Add support for floating images
authorAlexander Ebert <ebert@woltlab.com>
Wed, 10 May 2023 13:34:39 +0000 (15:34 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Wed, 10 May 2023 13:34:39 +0000 (15:34 +0200)
See WoltLab/editor#51

wcfsetup/install/files/lib/system/html/input/filter/MessageHtmlInputFilter.class.php
wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeProcessor.class.php
wcfsetup/install/files/style/layout/global.scss

index 4c69a26999859dbcab8d7ae3c51f917fe52eec8d..0cd44304f0e54fb034d7aadd1560ed212aaf4df7 100644 (file)
@@ -126,6 +126,11 @@ class MessageHtmlInputFilter implements IHtmlInputFilter
         $definition->addAttribute('img', 'data-attachment-id', 'Number');
         $definition->addAttribute('img', 'srcset', 'Text');
 
+        // <figure> element for images
+        $definition->addElement('figure', 'Block', 'Flow', '', [
+            'class' => 'Text',
+        ]);
+
         $parameters = [
             'config' => $config,
             'definition' => $definition,
index 0e9c6a9d0257a4acedeb819077e6e49fb3d0a779..7e730ab150c4972a51be11fd639d92df5ab4350c 100644 (file)
@@ -27,6 +27,7 @@ class HtmlInputNodeProcessor extends AbstractHtmlNodeProcessor
      * @var array<array>
      */
     public static $allowedClassNames = [
+        'figure' => ['image', 'image-style-side'],
         'h2' => ['text-center', 'text-justify', 'text-right'],
         'h3' => ['text-center', 'text-justify', 'text-right'],
         'h4' => ['text-center', 'text-justify', 'text-right'],
index 088e9f043837afac8d4d5454ac4dcecd379f3168..81462e6d83f5fbceb3d299edefa0e061aea45146 100644 (file)
@@ -176,6 +176,19 @@ ol.nativeList {
                        margin-bottom: 0 !important;
                }
        }
+
+       figure.image {
+               clear: both;
+               display: table;
+               margin: 1em auto;
+               min-width: 50px;
+               text-align: center;
+
+               &.image-style-side {
+                       float: right;
+                       margin: 0 0 20px 20px;
+               }
+       }
 }
 
 .containerContent,