Add support for images floating to the left

See WoltLab/editor#51

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Normalizer.ts
index 7b576552a42445c4184593fd4c66e06fcbc846d7..61919b45227fabf5f11dbb83fc2fd50dc881fddd 100644 (file)
--- 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 1278f76178357c7d4fd239f02e07a39a4df21764..c6ba3600868253c53f04ac1ea360d89a685346d4 100644 (file)
--- 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 7e730ab150c4972a51be11fd639d92df5ab4350c..943fa3dbb7199d312bf5a91d5f883e9b46459efc 100644 (file)
--- 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 81462e6d83f5fbceb3d299edefa0e061aea45146..46365f2393205a97dd4225e9fd00f53d524e9002 100644 (file)
--- 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;