IBX-8845: Added alignments for custom tags (#187)

Author: dew326

src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-editing.js

@@ -25,6 +25,7 @@ class IbexaCustomAttributesEditing extends Plugin {
         const { model } = this.editor;
 
         model.schema.extend('embedImage', { allowAttributes: 'data-ezalign' });
+        model.schema.extend('customTag', { allowAttributes: 'data-ezalign' });
 
         this.defineConverters();
 

src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js

@@ -205,6 +205,16 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
                         'ibexaRemoveElement',
                     ],
                 },
+                customTag: {
+                    toolbar: [
+                        'ibexaBlockLeftAlignment',
+                        'ibexaBlockCenterAlignment',
+                        'ibexaBlockRightAlignment',
+                        '|',
+                        'ibexaCustomTagSettings',
+                        'ibexaRemoveElement',
+                    ],
+                },
                 heading: {
                     options: [
                         { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js

@@ -41,24 +41,11 @@ class IbexaCustomTagEditing extends Plugin {
                 const header = downcastWriter.createUIElement('div', { class: 'ibexa-custom-tag__header' }, function (domDocument) {
                     const domElement = this.toDomElement(domDocument);
                     const customTagConfig = window.ibexa.richText.customTags[customTagName];
-                    const attributesButton = `<button type="button" class="ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--show-custom-tag-attributes">
-                        <svg class="ibexa-icon ibexa-icon--small ibexa-icon--secondary">
-                            <use xlink:href="${window.ibexa.helpers.icon.getIconPath('settings-block')}"></use>
-                        </svg>
-                    </button>`;
 
                     domElement.innerHTML = `
                         <div class="ibexa-custom-tag__header-title" data-cke-tooltip-text="${customTagConfig.label}">
                             ${customTagConfig.label}
                         </div>
-                        <div class="ibexa-custom-tag__header-actions">
-                            ${Object.keys(customTagConfig.attributes).length ? attributesButton : ''}
-                            <button type="button" class="ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--remove-custom-tag">
-                                <svg class="ibexa-icon ibexa-icon--small ibexa-icon--secondary">
-                                    <use xlink:href="${window.ibexa.helpers.icon.getIconPath('trash')}"></use>
-                                </svg>
-                            </button>
-                        </div>
                     `;
 
                     return domElement;

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-command.js

@@ -0,0 +1,16 @@
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+const { ibexa } = window;
+
+class IbexaCustomTagSettingsCommand extends Command {
+    refresh() {
+        const modelElement = this.editor.model.document.selection.getSelectedElement();
+        const isCustomTag = modelElement?.name === 'customTag';
+        const isEnabled =
+            isCustomTag && !!Object.keys(ibexa.richText.customTags[modelElement.getAttribute('customTagName')].attributes).length;
+
+        this.isEnabled = isEnabled;
+    }
+}
+
+export default IbexaCustomTagSettingsCommand;

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-ui.js

@@ -0,0 +1,42 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import IbexaButtonView from '../../common/button-view/button-view';
+
+import IbexaCustomTagSettingsCommand from './custom-tag-settings-command';
+
+const { ibexa, Translator } = window;
+
+class IbexaCustomTagSettingsUI extends Plugin {
+    constructor(props) {
+        super(props);
+
+        this.showSettings = this.showSettings.bind(this);
+    }
+
+    showSettings() {
+        this.editor.editing.view.document.fire('ibexa-show-custom-tag-settings');
+    }
+
+    init() {
+        const ibexaCustomTagSettingsCommand = new IbexaCustomTagSettingsCommand(this.editor);
+
+        this.editor.ui.componentFactory.add('ibexaCustomTagSettings', (locale) => {
+            const buttonView = new IbexaButtonView(locale);
+
+            buttonView.set({
+                label: Translator.trans(/*@Desc("Settings")*/ 'custom_tag.settings.label', {}, 'ck_editor'),
+                icon: ibexa.helpers.icon.getIconPath('settings-block'),
+                tooltip: true,
+            });
+
+            this.listenTo(buttonView, 'execute', this.showSettings);
+
+            buttonView.bind('isEnabled').to(ibexaCustomTagSettingsCommand);
+
+            return buttonView;
+        });
+
+        this.editor.commands.add('ibexaCustomTagSettings', ibexaCustomTagSettingsCommand);
+    }
+}
+
+export default IbexaCustomTagSettingsUI;

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-toolbar.js

@@ -0,0 +1,30 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
+
+const { Translator } = window;
+
+class IbexaCustomTagsToolbar extends Plugin {
+    static get requires() {
+        return [WidgetToolbarRepository];
+    }
+
+    getSelectedCustomTagWidget(selection) {
+        const viewElement = selection.getSelectedElement();
+        const isCustomTag = viewElement?.hasClass('ibexa-custom-tag') && viewElement?.getAttribute('data-ezelement') === 'eztemplate';
+
+        return isCustomTag ? viewElement : null;
+    }
+
+    afterInit() {
+        const { editor } = this;
+        const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
+
+        widgetToolbarRepository.register('customTags', {
+            ariaLabel: Translator.trans(/*@Desc("Custom tag toolbar")*/ 'custom_tag.toolbar.label', {}, 'ck_editor'),
+            items: editor.config.get('customTag.toolbar') || [],
+            getRelatedElement: this.getSelectedCustomTagWidget,
+        });
+    }
+}
+
+export default IbexaCustomTagsToolbar;

src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js

@@ -29,22 +29,10 @@ class IbexaCustomTagUI extends Plugin {
         });
     }
 
-    isCustomTagSelected(eventData) {
+    isCustomTagSelected() {
         const modelElement = this.editor.model.document.selection.getSelectedElement();
 
-        return (
-            !!eventData.domTarget.closest(`[data-ezname="${this.componentName}"]`) &&
-            modelElement?.name === 'customTag' &&
-            modelElement?.getAttribute('customTagName') === this.componentName
-        );
-    }
-
-    isRemoveButtonClicked(eventData) {
-        return !!eventData.domTarget.closest('.ibexa-btn--remove-custom-tag');
-    }
-
-    isShowAttributesButtonClicked(eventData) {
-        return !!eventData.domTarget.closest('.ibexa-btn--show-custom-tag-attributes');
+        return modelElement?.name === 'customTag' && modelElement?.getAttribute('customTagName') === this.componentName;
     }
 
     hasAttributes() {
@@ -54,15 +42,9 @@ class IbexaCustomTagUI extends Plugin {
     enableUserBalloonInteractions() {
         const viewDocument = this.editor.editing.view.document;
 
-        this.listenTo(viewDocument, 'click', (eventInfo, eventData) => {
-            if (this.isCustomTagSelected(eventData)) {
-                if (this.isRemoveButtonClicked(eventData)) {
-                    this.removeCustomTag();
-                }
-
-                if (this.isShowAttributesButtonClicked(eventData)) {
-                    this.showAttributes(eventData.domTarget);
-                }
+        this.listenTo(viewDocument, 'ibexa-show-custom-tag-settings', () => {
+            if (this.isCustomTagSelected()) {
+                this.showAttributes(viewDocument.selection.getSelectedElement());
             }
         });
 
@@ -159,7 +141,7 @@ class IbexaCustomTagUI extends Plugin {
             position: { target },
         });
 
-        this.balloon.updatePosition({ target });
+        this.balloon.updatePosition(this.getBalloonPositionData());
     }
 
     hideAttributes() {

src/bundle/Resources/public/js/CKEditor/custom-tags/custom-tags.js

@@ -4,6 +4,8 @@ import IbexaCustomTagsUI from './block-custom-tag/custom-tag-ui';
 import IbexaInlineCustomTagsUI from './inline-custom-tag/inline-custom-tag-ui';
 import IbexaCustomTagsEditing from './block-custom-tag/custom-tag-editing';
 import IbexaInlineCustomTagsEditing from './inline-custom-tag/inline-custom-tag-editing';
+import IbexaCustomTagsToolbar from './block-custom-tag/custom-tag-toolbar';
+import IbexaCustomTagSettingsUI from './block-custom-tag/custom-tag-settings-ui';
 
 class IbexaCustomTags extends Plugin {
     static get requires() {
@@ -56,7 +58,14 @@ class IbexaCustomTags extends Plugin {
             };
         });
 
-        return [...blockCustomTagsUI, ...inlineCustomTagsUI, IbexaCustomTagsEditing, IbexaInlineCustomTagsEditing];
+        return [
+            ...blockCustomTagsUI,
+            ...inlineCustomTagsUI,
+            IbexaCustomTagsEditing,
+            IbexaInlineCustomTagsEditing,
+            IbexaCustomTagsToolbar,
+            IbexaCustomTagSettingsUI,
+        ];
     }
 }
 

src/bundle/Resources/public/scss/_custom-tag.scss

@@ -2,6 +2,7 @@
     position: relative;
     padding: calculateRem(32px) calculateRem(10px) calculateRem(10px);
     border: calculateRem(1px) solid $ibexa-color-dark-200;
+    width: 100%;
 
     &__header {
         background-color: $ibexa-color-light-100;
@@ -17,6 +18,7 @@
         align-items: center;
         border-top-left-radius: $ibexa-border-radius;
         border-top-right-radius: $ibexa-border-radius;
+        min-height: calculateRem(32px);
     }
 
     &__header-title {

src/bundle/Resources/translations/ck_editor.en.xliff

@@ -46,6 +46,16 @@
         <target state="new">Custom styles</target>
         <note>key: custom_styles_btn.label</note>
       </trans-unit>
+      <trans-unit id="1027bcb4083e4adb65f39bfa202e9a6968327ef2" resname="custom_tag.settings.label">
+        <source>Settings</source>
+        <target state="new">Settings</target>
+        <note>key: custom_tag.settings.label</note>
+      </trans-unit>
+      <trans-unit id="af69b1457df848a63cb4c9cb2acf4583f110fb84" resname="custom_tag.toolbar.label">
+        <source>Custom tag toolbar</source>
+        <target state="new">Custom tag toolbar</target>
+        <note>key: custom_tag.toolbar.label</note>
+      </trans-unit>
       <trans-unit id="3b257be2c6dd1f7bf0d5c70e64c22bf5b298dbbf" resname="elements_path.list.label">
         <source>list</source>
         <target state="new">list</target>