add quill support (#239)

* add quill support * fix tests
dachcom-digital · Jan 7, 2025 · 6ec2e26 · 6ec2e26
1 parent 39fc2f3
commit 6ec2e26
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 35 deletions.
diff --git a/UPGRADE.md b/UPGRADE.md
@@ -1,5 +1,8 @@
 # Upgrade Notes
 
+## 5.3.0
+- [ENHANCEMENT] [Quill Editor Bundle](https://github.com/pimcore/quill-bundle) Support added. See [Editor Configuration Section](./docs/13_Wysiwyg_Editor.md#quill)
+
 ## 5.2.2
 - [ENHANCEMENT] Ignore disabled area bricks in autoload watcher pass
 

diff --git a/config/services/event.yaml b/config/services/event.yaml
@@ -6,6 +6,8 @@ services:
         public: false
 
     ToolboxBundle\EventListener\Admin\AssetListener:
+        arguments:
+            $enabledWysiwygEditorName: '%toolbox.wysiwyg_editor%'
         tags:
             - { name: kernel.event_subscriber }
 

diff --git a/docs/13_Wysiwyg_Editor.md b/docs/13_Wysiwyg_Editor.md
@@ -7,13 +7,22 @@ There are several reasons for that:
 - Define custom styles via configuration
 - Use the same editor layout in every wysiwyg element (Document, Emails, Objects)
 
-> Currently, only TinyMce Editor is supported!
+## Supported Editors
+- [TinyMCE (default)](#tinymce)
+- [Quill](#quill)
 
+> [!IMPORTANT]  
+> Depending on the installed editor bundle, 
+> toolbox **automatically enables** the corresponding extension configuration!
+
+***
+
+## TinyMCE
 
-## TinyMce Toolbar
-The Toolbox Bundle already removes some (mostly dangerous) elements. Feel free to modify them according to your needs.
-Checkout the [available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/) to do that.
+### Toolbar
+Checkout the [available toolbar buttons](https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/).  
 
+> [!TIP]
 > Info: This is the global configuration for the TinyMCE-Editor Toolbar.
 > If you need to provide a different configuration in objects or areas, use the object/area configuration (see below)
 
@@ -38,7 +47,7 @@ toolbox:
 > If your extending style formats, you also have to extend the [html sanitize](https://pimcore.com/docs/platform/Pimcore/Documents/Editables/WYSIWYG/#extending-symfony-html-sanitizer-configuration)
 > otherwise you're applied data will be removed after persisting!
 
-### Area Editor Configuration
+#### Area Editor Configuration
 If you only need to modify the toolbar configuration for document areas, add this to your configuration:
 
 **Example** 
@@ -51,7 +60,7 @@ toolbox:
                 toolbar2: 'blocks'
 ```
 
-### Object Editor Configuration
+#### Object Editor Configuration
 If you only need to modify the toolbar configuration for objects, add this to your configuration:
 
 > [!NOTE]  
@@ -66,22 +75,104 @@ toolbox:
             config:
                 # this will change the toolbar2 only for object editors
                 toolbar2: 'blocks'
-
 ```
 
-## TinyMce Editor Plugins
-Toolbox provides some additional Editor Plugins:
+#### TinyMce Editor Plugins
+Toolbox provides some additional Editor Plugins
 
-### Google Opt Out
+##### Google Opt Out
 ![editor-google-opt-out](https://user-images.githubusercontent.com/700119/37820009-9dd6a418-2e7f-11e8-94b4-99c7a001a3a9.png)
 
-Add a link to allow user to disable google analytics tracking.
+Add a link to allow user to disable Google Analytics tracking.
 There is also a [frontend Javascript Plugin](./80_Javascript.md).
 
-#### Enable Button
+##### Enable Button
 ```yaml
 toolbox:
     wysiwyg_editor:
         config:
             toolbar2: 'tb_goo_link_button'
 ```
+
+***
+
+## Quill
+
+### Toolbar
+Checkout the [available toolbar buttons](https://quilljs.com/docs/modules/toolbar).  
+
+> [!TIP]
+> Info: This is the global configuration for the Quill-Editor Toolbar.
+> If you need to provide a different configuration in objects or areas, use the object/area configuration (see below)
+
+### Overriding Configuration
+
+> [!CAUTION]
+> Because pimcore only uses a simple `Object.assign()` method to merge the configuration,
+> you have to pass the full configuration (even if you only want to change the toolbar config)
+
+**Example** 
+```yaml
+toolbox:
+    wysiwyg_editor:
+        config:
+            modules:
+                table: false
+                table-better:
+                    language: 'en_US'
+                    menus: [ 'column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete' ]
+                    toolbarTable: true
+                keyboard:
+                    bindings: QuillTableBetter.keyboardBindings
+                history:
+                    delay: 700
+                    maxStack: 200
+                    userOnly: true
+                toolbar:
+                    container: [
+                        [ { header: [ 1, 2, false ] } ],
+                        [{ 'size': ['small', false, 'large', 'huge'] }],  # custom dropdown
+                        [ 'bold' ],
+                        [ { align: [ ] } ],
+                        [ { list: 'ordered' } ],
+                        [ 'link', 'table-better' ],
+                        [ 'clean' ],
+                    ]
+
+```
+> [!IMPORTANT]  
+> If your extending style formats (In this example the "size" dropdown), you also have to extend the [html sanitize](https://pimcore.com/docs/platform/Pimcore/Documents/Editables/WYSIWYG/#extending-symfony-html-sanitizer-configuration)
+> otherwise you're applied data will be removed after persisting!
+
+#### Area Editor Configuration
+If you only need to modify the toolbar configuration for document areas, add this to your configuration:
+
+**Example** 
+```yaml
+toolbox:
+    wysiwyg_editor:
+        area_editor:
+            config:
+                # his will change the modules only for document editables editors
+                modules: [...]
+```
+
+#### Object Editor Configuration
+If you only need to modify the toolbar configuration for objects, add this to your configuration:
+
+> [!NOTE]  
+> The object configuration does not respect different toolbox context environments at the moment. 
+> Objects are not restricted to any sites by nature which makes any context-binding quite impossible.
+
+**Example** 
+```yaml
+toolbox:
+    wysiwyg_editor:
+        object_editor:
+            config:
+                # this will change the modules only for object editors
+                modules: 'blocks'
+```
+
+#### Quill Editor Plugins
+Currently no plugins available.
diff --git a/public/js/quill/.gitkeep b/public/js/quill/.gitkeep
diff --git a/public/js/toolbox-wysiwyg-plugins.js → public/js/tinymce/google-opt-out-button.js b/public/js/toolbox-wysiwyg-plugins.js → public/js/tinymce/google-opt-out-button.js
diff --git a/src/DependencyInjection/ToolboxExtension.php b/src/DependencyInjection/ToolboxExtension.php
@@ -2,6 +2,7 @@
 
 namespace ToolboxBundle\DependencyInjection;
 
+use Pimcore\Bundle\QuillBundle\PimcoreQuillBundle;
 use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
 use Symfony\Component\DependencyInjection\Loader\YamlFileLoader;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
@@ -22,6 +23,9 @@ public function prepend(ContainerBuilder $container): void
         $wysiwygEditor = null;
         if ($container->hasExtension('pimcore_tinymce') === true) {
             $wysiwygEditor = 'tiny_mce';
+        } elseif (class_exists(PimcoreQuillBundle::class, false)) {
+            // no extension definition set in quill bundle...
+            $wysiwygEditor = 'quill';
         }
 
         $coreLoader = new YamlFileLoader($container, new FileLocator(__DIR__ . '/../../config'));
@@ -80,7 +84,7 @@ public function load(array $configs, ContainerBuilder $container): void
         $configManagerDefinition = $container->getDefinition(ConfigManager::class);
         $configManagerDefinition->addMethodCall('setConfig', [$config]);
 
-        $disabledAreaBricks = array_filter($config['areas'], static function(array $area) {
+        $disabledAreaBricks = array_filter($config['areas'], static function (array $area) {
             return $area['enabled'] === false;
         });
 

diff --git a/src/EventListener/Admin/AssetListener.php b/src/EventListener/Admin/AssetListener.php
@@ -8,6 +8,10 @@
 
 class AssetListener implements EventSubscriberInterface
 {
+    public function __construct(protected ?string $enabledWysiwygEditorName)
+    {
+    }
+
     public static function getSubscribedEvents(): array
     {
         return [
@@ -27,24 +31,43 @@ public function addEditModeCssFiles(PathsEvent $event): void
 
     public function addJsFiles(PathsEvent $event): void
     {
-        $event->addPaths([
-            '/admin/toolbox-wysiwyg-object-style.js',
-            '/bundles/toolbox/js/toolbox-wysiwyg-plugins.js',
-            '/bundles/toolbox/js/document/edit.js'
-        ]);
+        $event->addPaths(
+            array_merge(
+                $this->getEditorJsResources(),
+                [
+                    '/admin/toolbox-wysiwyg-object-style.js',
+                    '/bundles/toolbox/js/document/edit.js'
+                ]
+            )
+        );
     }
 
     public function addEditModeJsFiles(PathsEvent $event): void
     {
-        $event->addPaths([
-            '/bundles/toolbox/js/toolbox-wysiwyg-plugins.js',
-            '/bundles/toolbox/js/document/editables/area.js',
-            '/bundles/toolbox/js/document/editables/areablock.js',
-            '/bundles/toolbox/js/document/editables/googlemap.js',
-            '/bundles/toolbox/js/document/editables/parallaximage.js',
-            '/bundles/toolbox/js/document/editables/columnadjuster.js',
-            '/bundles/toolbox/js/document/editables/vhs.js',
-            '/bundles/toolbox/js/document/editables/vhs/editor.js',
-        ]);
+        $event->addPaths(
+            array_merge(
+                $this->getEditorJsResources(),
+                [
+                    '/bundles/toolbox/js/document/editables/area.js',
+                    '/bundles/toolbox/js/document/editables/areablock.js',
+                    '/bundles/toolbox/js/document/editables/googlemap.js',
+                    '/bundles/toolbox/js/document/editables/parallaximage.js',
+                    '/bundles/toolbox/js/document/editables/columnadjuster.js',
+                    '/bundles/toolbox/js/document/editables/vhs.js',
+                    '/bundles/toolbox/js/document/editables/vhs/editor.js',
+                ]
+            )
+        );
+    }
+
+    private function getEditorJsResources(): array
+    {
+        return match ($this->enabledWysiwygEditorName) {
+            'tiny_mce' => [
+                '/bundles/toolbox/js/tinymce/google-opt-out-button.js'
+            ],
+            'quill' => [],
+            default => []
+        };
     }
 }
diff --git a/tests/UnitDefault/Areas/LinkListTest.php b/tests/UnitDefault/Areas/LinkListTest.php
@@ -78,10 +78,10 @@ private function getCompare()
         return '<div class="toolbox-element toolbox-linklist ">
                     <ul>
                         <li>
-                            <a href="https://www.dachcom.com" class="list-link">dummy</a>
+                            <a href="https://www.dachcom.com" path="https://www.dachcom.com" linktype="direct" text="dummy" class="list-link">dummy</a>
                         </li>
                         <li>
-                            <a href="https://www.dachcom-digital.com" class="list-link">dummy</a>
+                            <a href="https://www.dachcom-digital.com" path="https://www.dachcom-digital.com" linktype="direct" text="dummy" class="list-link">dummy</a>
                         </li>
                     </ul>
                 </div>';
@@ -92,10 +92,10 @@ private function getCompareWithAdditionalClass()
         return '<div class="toolbox-element toolbox-linklist additional-class">
                     <ul>
                         <li>
-                            <a href="https://www.dachcom.com" class="list-link">dummy</a>
+                            <a href="https://www.dachcom.com" path="https://www.dachcom.com" linktype="direct" text="dummy" class="list-link">dummy</a>
                         </li>
                         <li>
-                            <a href="https://www.dachcom-digital.com" class="list-link">dummy</a>
+                            <a href="https://www.dachcom-digital.com" path="https://www.dachcom-digital.com" linktype="direct" text="dummy" class="list-link">dummy</a>
                         </li>
                     </ul>
                 </div>';

diff --git a/tests/UnitDefault/Areas/TeaserTest.php b/tests/UnitDefault/Areas/TeaserTest.php
@@ -124,7 +124,7 @@ private function getCompare(\Pimcore\Model\Asset\Image $asset)
                                 </a>
                                 <h3 class="teaser-headline">teaser headline</h3>
                                 <div class="teaser-text">        teaser text    </div>
-                                <a href="/test/test2" class="btn btn-default teaser-link"></a>
+                                <a href="/test/test2" path="/test/test2" linktype="direct" class="btn btn-default teaser-link"></a>
                             </div>
                         </div>
                     </div>
@@ -141,7 +141,7 @@ private function getCompareWithLightBox(\Pimcore\Model\Asset\Image $asset)
                                     ' . $asset->getThumbnail('standardTeaser')->getHtml() . '
                                 </a>
                                 <h3 class="teaser-headline">teaser headline</h3><div class="teaser-text">        teaser text    </div>
-                                <a href="/test/test2" class="btn btn-default teaser-link"></a>
+                                <a href="/test/test2" path="/test/test2" linktype="direct" class="btn btn-default teaser-link"></a>
                             </div>
                         </div>
                     </div>
@@ -159,7 +159,7 @@ private function getCompareWithAdditionalClass(\Pimcore\Model\Asset\Image $asset
                                 </a>
                                 <h3 class="teaser-headline">teaser headline</h3>
                                 <div class="teaser-text">        teaser text    </div>
-                                <a href="/test/test2" class="btn btn-default teaser-link"></a>
+                                <a href="/test/test2" path="/test/test2" linktype="direct" class="btn btn-default teaser-link"></a>
                             </div>
                         </div>
                     </div>