From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 4 Aug 2023 10:23:43 +0000 (+0200)
Subject: Normalize HTML before inserting it into CKEditor
X-Git-Tag: 6.0.0_Alpha_8~8
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=be579c61302712c056fe62d7a7662ea5f6b2f99e;p=GitHub%2FWoltLab%2FWCF.git

Normalize HTML before inserting it into CKEditor

Fixes https://www.woltlab.com/community/thread/300657-quoting-pre-6-0-posts-does-not-normalize-the-old-paragraph-behavior/
---

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index 54dbf90a61..c8eb2853db 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -21,7 +21,7 @@ import { deleteDraft, initializeAutosave, setupRestoreDraft } from "./Ckeditor/A
 import { createConfigurationFor, Features } from "./Ckeditor/Configuration";
 import { dispatchToCkeditor } from "./Ckeditor/Event";
 import { setup as setupSubmitOnEnter } from "./Ckeditor/SubmitOnEnter";
-import { normalizeLegacyMessage } from "./Ckeditor/Normalizer";
+import { normalizeLegacyHtml, normalizeLegacyMessage } from "./Ckeditor/Normalizer";
 import { element as scrollToElement } from "../Ui/Scroll";
 import Devtools from "../Devtools";
 import { ClassicEditor, CodeBlockConfig, EditorConfig, Element as CkeElement } from "./Ckeditor/Types";
@@ -78,6 +78,8 @@ class Ckeditor {
   }
 
   insertHtml(html: string): void {
+    html = normalizeLegacyHtml(html);
+
     this.#editor.model.change((writer) => {
       const viewFragment = this.#editor.data.processor.toView(html);
       const modelFragment = this.#editor.data.toModel(viewFragment);
diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
index 0ad32f1db0..6bb2cfc914 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
@@ -151,18 +151,22 @@ function imageToFigure(img: HTMLImageElement, alignmentClass: string): void {
   }
 }
 
-export function normalizeLegacyMessage(element: HTMLElement): void {
-  if (!(element instanceof HTMLTextAreaElement)) {
-    throw new TypeError("Expected the element to be a <textarea>.");
-  }
-
+export function normalizeLegacyHtml(html: string): string {
   const div = document.createElement("div");
-  div.innerHTML = element.value;
+  div.innerHTML = html;
 
   normalizeBr(div);
   const paragraphs = getPossibleSpacerParagraphs(div);
   reduceSpacerParagraphs(paragraphs);
   convertFloatingImages(div);
 
-  element.value = div.innerHTML;
+  return div.innerHTML;
+}
+
+export function normalizeLegacyMessage(element: HTMLElement): void {
+  if (!(element instanceof HTMLTextAreaElement)) {
+    throw new TypeError("Expected the element to be a <textarea>.");
+  }
+
+  element.value = normalizeLegacyHtml(element.value);
 }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
index 98de8ccdca..d4d75af6cd 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
@@ -60,6 +60,7 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi
             return this.#editor.data.get();
         }
         insertHtml(html) {
+            html = (0, Normalizer_1.normalizeLegacyHtml)(html);
             this.#editor.model.change((writer) => {
                 const viewFragment = this.#editor.data.processor.toView(html);
                 const modelFragment = this.#editor.data.toModel(viewFragment);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
index c3095a6cd5..f276d19587 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
@@ -14,7 +14,7 @@
 define(["require", "exports", "tslib", "../../Dom/Util"], function (require, exports, tslib_1, Util_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.normalizeLegacyMessage = void 0;
+    exports.normalizeLegacyMessage = exports.normalizeLegacyHtml = void 0;
     Util_1 = tslib_1.__importDefault(Util_1);
     function normalizeBr(div) {
         div.querySelectorAll("br").forEach((br) => {
@@ -131,17 +131,21 @@ define(["require", "exports", "tslib", "../../Dom/Util"], function (require, exp
             paragraph.remove();
         }
     }
-    function normalizeLegacyMessage(element) {
-        if (!(element instanceof HTMLTextAreaElement)) {
-            throw new TypeError("Expected the element to be a <textarea>.");
-        }
+    function normalizeLegacyHtml(html) {
         const div = document.createElement("div");
-        div.innerHTML = element.value;
+        div.innerHTML = html;
         normalizeBr(div);
         const paragraphs = getPossibleSpacerParagraphs(div);
         reduceSpacerParagraphs(paragraphs);
         convertFloatingImages(div);
-        element.value = div.innerHTML;
+        return div.innerHTML;
+    }
+    exports.normalizeLegacyHtml = normalizeLegacyHtml;
+    function normalizeLegacyMessage(element) {
+        if (!(element instanceof HTMLTextAreaElement)) {
+            throw new TypeError("Expected the element to be a <textarea>.");
+        }
+        element.value = normalizeLegacyHtml(element.value);
     }
     exports.normalizeLegacyMessage = normalizeLegacyMessage;
 });