From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 10 May 2023 13:43:18 +0000 (+0200)
Subject: Convert floating images in CKEditor into `<figure>`
X-Git-Tag: 6.0.0_Alpha_1~115
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=7fe18d91a7c1361d9e20d518e526308e48cb3582;p=GitHub%2FWoltLab%2FWCF.git

Convert floating images in CKEditor into `<figure>`

See WoltLab/editor#51
---

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
index 9b6447c646..7b576552a4 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
@@ -123,6 +123,27 @@ function reduceSpacerParagraphs(paragraphs: HTMLParagraphElement[]): void {
   }
 }
 
+function convertFloatingImages(div: HTMLElement): void {
+  div.querySelectorAll("img").forEach((img) => {
+    if (img.classList.contains("messageFloatObjectRight")) {
+      const paragraph = img.closest("p");
+      if (paragraph === null) {
+        return;
+      }
+
+      const figure = document.createElement("figure");
+      figure.classList.add("image", "image-style-side");
+      figure.append(img);
+
+      paragraph.insertAdjacentElement("beforebegin", figure);
+
+      if (paragraph.innerHTML === "") {
+        paragraph.remove();
+      }
+    }
+  });
+}
+
 export function normalizeLegacyMessage(element: HTMLElement): void {
   if (!(element instanceof HTMLTextAreaElement)) {
     throw new TypeError("Expected the element to be a <textarea>.");
@@ -134,6 +155,7 @@ export function normalizeLegacyMessage(element: HTMLElement): void {
   normalizeBr(div);
   const paragraphs = getPossibleSpacerParagraphs(div);
   reduceSpacerParagraphs(paragraphs);
+  convertFloatingImages(div);
 
   element.value = div.innerHTML;
 }
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 46f0f41c68..1278f76178 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
@@ -107,6 +107,23 @@ define(["require", "exports", "tslib", "../../Dom/Util"], function (require, exp
             }
         }
     }
+    function convertFloatingImages(div) {
+        div.querySelectorAll("img").forEach((img) => {
+            if (img.classList.contains("messageFloatObjectRight")) {
+                const paragraph = img.closest("p");
+                if (paragraph === null) {
+                    return;
+                }
+                const figure = document.createElement("figure");
+                figure.classList.add("image", "image-style-side");
+                figure.append(img);
+                paragraph.insertAdjacentElement("beforebegin", figure);
+                if (paragraph.innerHTML === "") {
+                    paragraph.remove();
+                }
+            }
+        });
+    }
     function normalizeLegacyMessage(element) {
         if (!(element instanceof HTMLTextAreaElement)) {
             throw new TypeError("Expected the element to be a <textarea>.");
@@ -116,6 +133,7 @@ define(["require", "exports", "tslib", "../../Dom/Util"], function (require, exp
         normalizeBr(div);
         const paragraphs = getPossibleSpacerParagraphs(div);
         reduceSpacerParagraphs(paragraphs);
+        convertFloatingImages(div);
         element.value = div.innerHTML;
     }
     exports.normalizeLegacyMessage = normalizeLegacyMessage;