IBX-6200: Changed the was custom styles list is diplayed

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;
         });
     }