IBX-6200: Changed the way Custom Styles list was displayed (#109)

For more details see https://issues.ibexa.co/browse/IBX-6200 and #109
ibexa · Aug 1, 2023 · 507315c · 507315c
1 parent 72c3bb5
commit 507315c
Showing 1 changed file with 23 additions and 20 deletions.
diff --git a/src/bundle/Resources/public/js/CKEditor/custom-styles/inline/custom-style-inline-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-styles/inline/custom-style-inline-ui.js
@@ -1,6 +1,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import { createDropdown, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import Model from '@ckeditor/ckeditor5-ui/src/model';
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 
 const { Translator, ibexa } = window;
 
@@ -14,36 +15,28 @@ class IbexaCustomStyleInlineUI extends Plugin {
     createButton([customStyleName, config]) {
         const { editor } = this;
         const customStyleInlineCommand = editor.commands.get('ibexaCustomStyleInline');
-
-        this.editor.ui.componentFactory.add(customStyleName, (locale) => {
-            const buttonView = new ButtonView(locale);
-
-            buttonView.set({
+        const buttonDef = {
+            type: 'button',
+            model: new Model({
                 label: config.label,
                 tooltip: true,
                 isToggleable: true,
                 withText: true,
-            });
+            }),
+        };
 
-            buttonView.bind('isOn').to(customStyleInlineCommand, 'value', (value) => value === customStyleName);
+        buttonDef.model.bind('isOn').to(customStyleInlineCommand, 'value', (value) => value === customStyleName);
+        buttonDef.model.set({ commandName: customStyleName });
 
-            this.listenTo(buttonView, 'execute', () => {
-                editor.execute(customStyleName);
-                editor.editing.view.focus();
-            });
-
-            return buttonView;
-        });
-
-        return this.editor.ui.componentFactory.create(customStyleName);
+        return buttonDef;
     }
 
     init() {
         this.editor.ui.componentFactory.add('ibexaCustomStyleInline', (locale) => {
             const dropdownView = createDropdown(locale);
             const { customStyles } = ibexa.richText;
             const customStylesInline = Object.entries(customStyles).filter(([, config]) => config.inline);
-            const customStylesButtons = customStylesInline.map(this.createButton);
+            const customStylesButtons = new Collection();
             const defaultLabel = Translator.trans(/*@Desc("Custom styles")*/ 'custom_styles_btn.label', {}, 'ck_editor');
             const customStyleInlineCommand = this.editor.commands.get('ibexaCustomStyleInline');
 
@@ -53,7 +46,9 @@ class IbexaCustomStyleInlineUI extends Plugin {
                 withText: true,
             });
 
-            addToolbarToDropdown(dropdownView, customStylesButtons, { enableActiveItemFocusOnDropdownOpen: true });
+            customStylesInline.forEach((customStyle) => customStylesButtons.add(this.createButton(customStyle)));
+
+            addListToDropdown(dropdownView, customStylesButtons);
 
             this.editor.commands.add('ibexaCustomStyleInline', customStyleInlineCommand);
 
@@ -63,6 +58,14 @@ class IbexaCustomStyleInlineUI extends Plugin {
                 return selectedCustomStyle?.label ?? defaultLabel;
             });
 
+            this.listenTo(dropdownView, 'execute', (event) => {
+                const { editor } = this;
+                const { commandName } = event.source;
+
+                editor.execute(commandName);
+                editor.editing.view.focus();
+            });
+
             return dropdownView;
         });
     }