From 7fe18d91a7c1361d9e20d518e526308e48cb3582 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 10 May 2023 15:43:18 +0200
Subject: [PATCH] Convert floating images in CKEditor into `<figure>`

See WoltLab/editor#51
---
 .../Core/Component/Ckeditor/Normalizer.ts     | 22 +++++++++++++++++++
 .../Core/Component/Ckeditor/Normalizer.js     | 18 +++++++++++++++
 2 files changed, 40 insertions(+)

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;
-- 
2.20.1