From f1fa95dbd249df94baad999f077e48f318437b09 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 10 May 2023 17:11:30 +0200
Subject: [PATCH] Add support for images floating to the left

See WoltLab/editor#51
---
 .../Core/Component/Ckeditor/Normalizer.ts     | 32 +++++++++++--------
 .../Core/Component/Ckeditor/Normalizer.js     | 28 +++++++++-------
 .../node/HtmlInputNodeProcessor.class.php     |  2 +-
 .../install/files/style/layout/global.scss    |  5 +++
 4 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
index 7b576552a4..61919b4522 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
@@ -126,22 +126,28 @@ 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;
-      }
+      imageToFigure(img, "image-style-side");
+    } else if (img.classList.contains("messageFloatObjectLeft")) {
+      imageToFigure(img, "image-style-side-left");
+    }
+  });
+}
 
-      const figure = document.createElement("figure");
-      figure.classList.add("image", "image-style-side");
-      figure.append(img);
+function imageToFigure(img: HTMLImageElement, alignmentClass: string): void {
+  const paragraph = img.closest("p");
+  if (paragraph === null) {
+    return;
+  }
 
-      paragraph.insertAdjacentElement("beforebegin", figure);
+  const figure = document.createElement("figure");
+  figure.classList.add("image", alignmentClass);
+  figure.append(img);
 
-      if (paragraph.innerHTML === "") {
-        paragraph.remove();
-      }
-    }
-  });
+  paragraph.insertAdjacentElement("beforebegin", figure);
+
+  if (paragraph.innerHTML === "") {
+    paragraph.remove();
+  }
 }
 
 export function normalizeLegacyMessage(element: HTMLElement): void {
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 1278f76178..c6ba360086 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Normalizer.js
@@ -110,20 +110,26 @@ 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();
-                }
+                imageToFigure(img, "image-style-side");
+            }
+            else if (img.classList.contains("messageFloatObjectLeft")) {
+                imageToFigure(img, "image-style-side-left");
             }
         });
     }
+    function imageToFigure(img, alignmentClass) {
+        const paragraph = img.closest("p");
+        if (paragraph === null) {
+            return;
+        }
+        const figure = document.createElement("figure");
+        figure.classList.add("image", alignmentClass);
+        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>.");
diff --git a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
index 7e730ab150..943fa3dbb7 100644
--- a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
+++ b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
@@ -27,7 +27,7 @@ class HtmlInputNodeProcessor extends AbstractHtmlNodeProcessor
      * @var array<array>
      */
     public static $allowedClassNames = [
-        'figure' => ['image', 'image-style-side'],
+        'figure' => ['image', 'image-style-side', 'image-style-side-left'],
         'h2' => ['text-center', 'text-justify', 'text-right'],
         'h3' => ['text-center', 'text-justify', 'text-right'],
         'h4' => ['text-center', 'text-justify', 'text-right'],
diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index 81462e6d83..46365f2393 100644
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -184,6 +184,11 @@ ol.nativeList {
 		min-width: 50px;
 		text-align: center;
 
+		&.image-style-side-left {
+			float: left;
+			margin: 0 20px 20px 0;
+		}
+
 		&.image-style-side {
 			float: right;
 			margin: 0 0 20px 20px;
-- 
2.20.1