diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js index 33fba98c..c7bc9861 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-attributes/custom-attributes-ui.js @@ -3,6 +3,7 @@ import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsid import IbexaCustomAttributesFormView from './ui/custom-attributes-form-view'; import IbexaButtonView from '../common/button-view/button-view'; +import { setPanelContentMaxHeight } from '../helpers/custom-panel-helper'; import { getCustomAttributesElementConfig, getCustomClassesElementConfig } from './helpers/config-helper'; @@ -16,6 +17,15 @@ class IbexaAttributesUI extends Plugin { this.formView = this.createFormView(); this.showForm = this.showForm.bind(this); + + let timeoutId = null; + + this.listenTo(this.balloon.view, 'change:top', () => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + setPanelContentMaxHeight(this.balloon.view); + }, 0); + }); } getModelElement() { diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js index a38d435b..a37f2d23 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js @@ -44,13 +44,13 @@ class IbexaCustomAttributesFormView extends View { this.setTemplate({ tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form', + class: 'ibexa-ckeditor-balloon-form ibexa-custom-panel', }, children: [ { tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form__header', + class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-panel__header', }, children: ['Custom Attributes'], }, @@ -63,14 +63,14 @@ class IbexaCustomAttributesFormView extends View { { tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form__fields', + class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-panel__content ibexa-custom-panel__content--overflow-with-scroll', }, children: this.children, }, { tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form__actions', + class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-panel__footer', }, children: [this.saveButtonView, this.revertButtonView, this.cancelButtonView], }, 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 0d6b9b36..e7bbb18b 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 @@ -2,7 +2,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler'; import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver'; -import { setPanelContentMaxHeight } from '../helpers/panel-helper'; +import { setPanelContentMaxHeight } from '../../helpers/custom-panel-helper'; import IbexaCustomTagFormView from '../ui/custom-tag-form-view'; import IbexaCustomTagAttributesView from '../ui/custom-tag-attributes-view'; import IbexaButtonView from '../../common/button-view/button-view'; @@ -19,6 +19,7 @@ class IbexaCustomTagUI extends Plugin { this.addCustomTag = this.addCustomTag.bind(this); this.isNew = false; + this.activeModelElement = null; let timeoutId = null; this.listenTo(this.balloon.view, 'change:top', () => { @@ -95,8 +96,7 @@ class IbexaCustomTagUI extends Plugin { const formView = new IbexaCustomTagFormView({ locale: this.editor.locale }); this.listenTo(formView, 'save-custom-tag', () => { - const modelElement = this.editor.model.document.selection.getSelectedElement(); - const values = modelElement.getAttribute('values'); + const values = this.activeModelElement.getAttribute('values'); const newValues = { ...values }; this.isNew = false; @@ -112,7 +112,7 @@ class IbexaCustomTagUI extends Plugin { }); this.editor.model.change((writer) => { - writer.setAttribute('values', newValues, modelElement); + writer.setAttribute('values', newValues, this.activeModelElement); }); this.reinitAttributesView(); @@ -151,8 +151,9 @@ class IbexaCustomTagUI extends Plugin { } showForm() { - const modelElement = this.editor.model.document.selection.getSelectedElement(); - const values = modelElement.getAttribute('values'); + this.activeModelElement = this.editor.model.document.selection.getSelectedElement(); + + const values = this.activeModelElement.getAttribute('values'); const parsedValues = Object.entries(values).reduce((output, [key, value]) => { if (this.config.attributes[key]?.type === 'boolean') { return { @@ -189,14 +190,14 @@ class IbexaCustomTagUI extends Plugin { } removeCustomTag() { - const modelElement = this.editor.model.document.selection.getSelectedElement(); - this.editor.model.change((writer) => { if (this.balloon.hasView(this.attributesView)) { this.hideAttributes(); } - writer.remove(modelElement); + writer.remove(this.activeModelElement); + + this.activeModelElement = null; }); } @@ -209,13 +210,16 @@ class IbexaCustomTagUI extends Plugin { } addCustomTag() { + if (this.balloon.hasView(this.formView)) { + return; + } + const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => { outputValues[attributeName] = config.defaultValue; return outputValues; }, {}); - this.editor.focus(); this.editor.execute('insertIbexaCustomTag', { customTagName: this.componentName, values }); if (this.hasAttributes()) { diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js index 8636d776..b597e281 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-attributes-view.js @@ -38,7 +38,7 @@ class IbexaCustomTagAttributesView extends View { { tag: 'div', attributes: { - class: 'ibexa-custom-tag-attributes__header ibexa-custom-tag-panel-header', + class: 'ibexa-custom-tag-attributes__header ibexa-custom-panel__header', }, children: [ { @@ -91,7 +91,7 @@ class IbexaCustomTagAttributesView extends View { children.push({ tag: 'div', attributes: { - class: 'ibexa-custom-tag-attributes__items ibexa-custom-tag-panel-content', + class: 'ibexa-custom-tag-attributes__items ibexa-custom-panel__content', }, children: items, }); diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js index cf8a2aef..7b4fc928 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-tags/ui/custom-tag-form-view.js @@ -115,13 +115,13 @@ class IbexaCustomTagFormView extends View { this.setTemplate({ tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form', + class: 'ibexa-ckeditor-balloon-form ibexa-custom-panel', }, children: [ { tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-tag-panel-header', + class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-panel__header', }, children: [label], }, @@ -134,14 +134,14 @@ class IbexaCustomTagFormView extends View { { tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-tag-panel-content', + class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-panel__content ibexa-custom-panel__content--overflow-with-scroll', }, children: this.children, }, { tag: 'div', attributes: { - class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-tag-panel-footer', + class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-panel__footer', }, children: [this.saveButtonView, this.cancelButtonView], }, diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js b/src/bundle/Resources/public/js/CKEditor/helpers/custom-panel-helper.js similarity index 75% rename from src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js rename to src/bundle/Resources/public/js/CKEditor/helpers/custom-panel-helper.js index 49384d0c..1a137500 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js +++ b/src/bundle/Resources/public/js/CKEditor/helpers/custom-panel-helper.js @@ -1,17 +1,18 @@ const setPanelContentMaxHeight = (balloonView) => { const MIN_HEIGHT_VALUE = 100; const MARGIN = 50; + const BOTTOM_ARROW_CLASSES = ['ck-balloon-panel_arrow_s', 'ck-balloon-panel_arrow_se', 'ck-balloon-panel_arrow_sw']; const { innerHeight: windowHeight } = window; const { element: panelNode } = balloonView; - const panelHeader = panelNode.querySelector('.ibexa-custom-tag-panel-header'); - const panelContent = panelNode.querySelector('.ibexa-custom-tag-panel-content'); - const panelFooter = panelNode.querySelector('.ibexa-custom-tag-panel-footer'); + const panelHeader = panelNode.querySelector('.ibexa-custom-panel__header'); + const panelContent = panelNode.querySelector('.ibexa-custom-panel__content'); + const panelFooter = panelNode.querySelector('.ibexa-custom-panel__footer'); if (!panelContent) { return; } - const isBalloonAbovePivot = panelNode.classList.contains('ck-balloon-panel_arrow_s'); + const isBalloonAbovePivot = [...panelNode.classList].some((className) => BOTTOM_ARROW_CLASSES.includes(className)); const panelInitialHeight = panelNode.offsetHeight; const panelTopPosition = parseInt(panelNode.style.top, 10); const panelHeaderHeight = panelHeader?.offsetHeight ?? 0; diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss index 8bb527a0..8c330784 100644 --- a/src/bundle/Resources/public/scss/_balloon-form.scss +++ b/src/bundle/Resources/public/scss/_balloon-form.scss @@ -10,7 +10,6 @@ } &__fields { - overflow: auto; padding: calculateRem(8px) calculateRem(16px); &--attributes { diff --git a/src/bundle/Resources/public/scss/_custom-panel.scss b/src/bundle/Resources/public/scss/_custom-panel.scss new file mode 100644 index 00000000..2ad32032 --- /dev/null +++ b/src/bundle/Resources/public/scss/_custom-panel.scss @@ -0,0 +1,41 @@ +.ibexa-custom-panel { + min-width: calculateRem(320px); + + &__content { + &--overflow-with-scroll { + overflow: auto; + + &.ibexa-ckeditor-balloon-form__fields { + .ck.ck-labeled-field-view { + .ck.ck-input { + width: 100%; + } + + .ck.ck-dropdown { + width: 100%; + + .ck.ck-button { + display: block; + + .ck.ck-button__label { + width: calc(100% - calculateRem(20px)); + height: fit-content; + white-space: normal; + overflow: hidden; + } + } + } + + .ck-dropdown__panel-visible { + position: static; + bottom: 0; + height: fit-content; + max-height: 100%; + border: none; + box-shadow: none; + } + } + } + } + } +} diff --git a/src/bundle/Resources/public/scss/ckeditor.scss b/src/bundle/Resources/public/scss/ckeditor.scss index 9edd45d7..d250a627 100644 --- a/src/bundle/Resources/public/scss/ckeditor.scss +++ b/src/bundle/Resources/public/scss/ckeditor.scss @@ -5,6 +5,7 @@ @import 'general'; @import 'custom-tag'; @import 'custom-tag-attributes'; +@import 'custom-panel'; @import 'elements-path'; @import 'tools'; @import 'character-counter';