From dd47ed68aadab794d67241cce2b063664f9d04f8 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Fri, 27 Sep 2024 11:46:10 +0200 Subject: [PATCH] IBX-8845: Added alignments for custom tags --- .../block-alignment-editing.js | 1 + .../public/js/CKEditor/core/base-ckeditor.js | 10 +++++ .../block-custom-tag/custom-tag-editing.js | 13 ------ .../custom-tag-settings-command.js | 16 +++++++ .../custom-tag-settings-ui.js | 42 +++++++++++++++++++ .../block-custom-tag/custom-tag-toolbar.js | 30 +++++++++++++ .../block-custom-tag/custom-tag-ui.js | 30 +++---------- .../js/CKEditor/custom-tags/custom-tags.js | 11 ++++- .../Resources/public/scss/_custom-tag.scss | 2 + 9 files changed, 117 insertions(+), 38 deletions(-) create mode 100644 src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-command.js create mode 100644 src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-ui.js create mode 100644 src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-toolbar.js diff --git a/src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-editing.js b/src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-editing.js index e5855600..6d0c161f 100644 --- a/src/bundle/Resources/public/js/CKEditor/block-alignment/block-alignment-editing.js +++ b/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(); diff --git a/src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js b/src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js index b78a00e3..81aab8bd 100644 --- a/src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js +++ b/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' }, diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js index 98589810..9a2d2a00 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-editing.js +++ b/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 = ``; domElement.innerHTML = `
${customTagConfig.label}
-
- ${Object.keys(customTagConfig.attributes).length ? attributesButton : ''} - -
`; return domElement; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-command.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-command.js new file mode 100644 index 00000000..1eb82fff --- /dev/null +++ b/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; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-settings-ui.js new file mode 100644 index 00000000..9f852ebc --- /dev/null +++ b/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; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-toolbar.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-toolbar.js new file mode 100644 index 00000000..8f711c2e --- /dev/null +++ b/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; diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js index 262ff512..2eac876b 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/block-custom-tag/custom-tag-ui.js @@ -20,22 +20,10 @@ class IbexaCustomTagUI extends Plugin { this.isNew = false; } - 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() { @@ -45,15 +33,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()); } }); @@ -150,7 +132,7 @@ class IbexaCustomTagUI extends Plugin { position: { target }, }); - this.balloon.updatePosition({ target }); + this.balloon.updatePosition(this.getBalloonPositionData()); } hideAttributes() { diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/custom-tags.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/custom-tags.js index d86a99d5..c6287bf1 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/custom-tags.js +++ b/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, + ]; } } diff --git a/src/bundle/Resources/public/scss/_custom-tag.scss b/src/bundle/Resources/public/scss/_custom-tag.scss index 49ab6d7f..0d58b8f3 100644 --- a/src/bundle/Resources/public/scss/_custom-tag.scss +++ b/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 {