IBX-8824: The popup for custom tags with multiple fields is not scrollable

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

@@ -2,6 +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 IbexaCustomTagFormView from '../ui/custom-tag-form-view';
 import IbexaCustomTagAttributesView from '../ui/custom-tag-attributes-view';
 import IbexaButtonView from '../../common/button-view/button-view';
@@ -18,6 +19,22 @@ class IbexaCustomTagUI extends Plugin {
         this.addCustomTag = this.addCustomTag.bind(this);
 
         this.isNew = false;
+        this.lastClassListValue = null;
+        this.observer = new MutationObserver((mutationList) => {
+            for (const mutation of mutationList) {
+                if (this.lastClassListValue !== mutation.target.classList.value) {
+                    if (this.lastClassListValue !== null) {
+                        setPanelContentMaxHeight(this.balloon.view);
+                    }
+
+                    this.lastClassListValue = mutation.target.classList.value;
+                }
+            }
+        });
+
+        this.observer.observe(this.balloon.view.element, {
+            attributes: true,
+        });
     }
 
     isCustomTagSelected(eventData) {
@@ -80,6 +97,8 @@ class IbexaCustomTagUI extends Plugin {
             this.showForm();
         });
 
+        setPanelContentMaxHeight(this.balloon.view);
+
         return attributesView;
     }
 
@@ -150,6 +169,7 @@ class IbexaCustomTagUI extends Plugin {
             position: { target },
         });
 
+        setPanelContentMaxHeight(this.balloon.view);
         this.balloon.updatePosition({ target });
     }
 
@@ -183,6 +203,7 @@ class IbexaCustomTagUI extends Plugin {
             position: this.getBalloonPositionData(),
         });
 
+        setPanelContentMaxHeight(this.balloon.view);
         this.balloon.updatePosition(this.getBalloonPositionData());
     }
 

src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js

@@ -0,0 +1,25 @@
+const setPanelContentMaxHeight = (balloonView) => {
+    const HEADER_HEIGHT = 90;
+    const MIN_HEIGHT_VALUE = 220;
+    const { innerHeight: windowHeight } = window;
+    const { top: panelTopPosition, 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');
+
+    if (!panelContent) {
+        return;
+    }
+
+    const panelHeaderHeight = panelHeader?.offsetHeight ?? 0;
+    const panelFooterHeight = panelFooter?.offsetHeight ?? 0;
+    const isPanelOverTopWindowEdge = panelTopPosition - HEADER_HEIGHT < 0;
+    const maxHeightValue = isPanelOverTopWindowEdge
+        ? panelContent.offsetHeight - Math.abs(panelTopPosition)
+        : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
+    const panelMaxHeight = maxHeightValue < MIN_HEIGHT_VALUE ? MIN_HEIGHT_VALUE : maxHeightValue;
+
+    panelContent.style.maxHeight = `${panelMaxHeight}px`;
+};
+
+export { setPanelContentMaxHeight };

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

@@ -2,6 +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 IbexaCustomTagFormView from '../ui/custom-tag-form-view';
 import IbexaButtonView from '../../common/button-view/button-view';
 
@@ -90,6 +91,7 @@ class IbexaInlineCustomTagUI extends Plugin {
             position: this.getBalloonPositionData(),
         });
 
+        setPanelContentMaxHeight(this.balloon.view);
         this.balloon.updatePosition(this.getBalloonPositionData());
     }
 

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

@@ -33,11 +33,12 @@ class IbexaCustomTagAttributesView extends View {
 
         buttonView.delegate('execute').to(this, 'edit-attributes');
 
+        const items = [];
         const children = [
             {
                 tag: 'div',
                 attributes: {
-                    class: 'ibexa-custom-tag-attributes__header',
+                    class: 'ibexa-custom-tag-attributes__header ibexa-custom-tag-panel-header',
                 },
                 children: [
                     {
@@ -63,7 +64,7 @@ class IbexaCustomTagAttributesView extends View {
             const getValueLabelMethods = window.ibexa.richText.CKEditor.customTags?.getValueLabelMethods || {};
             const valueLabel = getValueLabelMethods[name] && value !== '-' ? getValueLabelMethods[name](value, config) : value;
 
-            children.push({
+            items.push({
                 tag: 'div',
                 attributes: {
                     class: 'ibexa-custom-tag-attributes__item',
@@ -87,6 +88,14 @@ class IbexaCustomTagAttributesView extends View {
             });
         });
 
+        children.push({
+            tag: 'div',
+            attributes: {
+                class: 'ibexa-custom-tag-attributes__items ibexa-custom-tag-panel-content',
+            },
+            children: items,
+        });
+
         return children;
     }
 }

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

@@ -121,7 +121,7 @@ class IbexaCustomTagFormView extends View {
                 {
                     tag: 'div',
                     attributes: {
-                        class: 'ibexa-ckeditor-balloon-form__header',
+                        class: 'ibexa-ckeditor-balloon-form__header ibexa-custom-tag-panel-header',
                     },
                     children: [label],
                 },
@@ -134,14 +134,14 @@ class IbexaCustomTagFormView extends View {
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__fields',
+                                class: 'ibexa-ckeditor-balloon-form__fields ibexa-custom-tag-panel-content',
                             },
                             children: this.children,
                         },
                         {
                             tag: 'div',
                             attributes: {
-                                class: 'ibexa-ckeditor-balloon-form__actions',
+                                class: 'ibexa-ckeditor-balloon-form__actions ibexa-custom-tag-panel-footer',
                             },
                             children: [this.saveButtonView, this.cancelButtonView],
                         },

src/bundle/Resources/public/scss/_balloon-form.scss

@@ -1,16 +1,17 @@
 .ck.ck-reset_all {
     .ibexa-ckeditor-balloon-form {
-        padding: 0 calculateRem(16px);
+        position: relative;
 
         &__header {
             border-top-left-radius: $ibexa-border-radius;
             border-top-right-radius: $ibexa-border-radius;
-            padding: calculateRem(2px) 0;
+            padding: calculateRem(2px) calculateRem(16px);
             font-weight: bold;
         }
 
         &__fields {
-            padding: calculateRem(8px) 0;
+            overflow: auto;
+            padding: calculateRem(8px) calculateRem(16px);
 
             &--attributes {
                 border-bottom: calculateRem(1px) solid $ibexa-color-light;
@@ -135,7 +136,7 @@
         }
 
         &__actions {
-            padding: 0 0 calculateRem(16px);
+            padding: calculateRem(8px) calculateRem(16px);
         }
     }
 

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

@@ -17,6 +17,10 @@
             font-weight: bold;
         }
 
+        &__items {
+            overflow: auto;
+        }
+
         &__item {
             padding: calculateRem(8px) calculateRem(16px);
         }