From 6fa3b79b6dc6c510cc0594a0d269175579898170 Mon Sep 17 00:00:00 2001
From: Dariusz Szut <dew326@gmail.com>
Date: Tue, 18 Jul 2023 14:23:52 +0200
Subject: [PATCH] IBX-6200: Changed the was custom styles list is diplayed

---
 .../inline/custom-style-inline-ui.js          | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 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
index c9d0afd1..f1095f7e 100644
--- 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,28 +15,20 @@ 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() {
@@ -43,7 +36,7 @@ class IbexaCustomStyleInlineUI extends Plugin {
             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;
         });
     }