After CR

ibexa · Sep 12, 2024 · ac3260e · ac3260e
1 parent 214f84d
commit ac3260e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 35 deletions.
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
@@ -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';
@@ -150,7 +151,7 @@ class IbexaCustomTagUI extends Plugin {
             position: { target },
         });
 
-        this.setPanelContentMaxHeight();
+        setPanelContentMaxHeight(this.balloon.view);
         this.balloon.updatePosition({ target });
     }
 
@@ -184,7 +185,7 @@ class IbexaCustomTagUI extends Plugin {
             position: this.getBalloonPositionData(),
         });
 
-        this.setPanelContentMaxHeight();
+        setPanelContentMaxHeight(this.balloon.view);
         this.balloon.updatePosition(this.getBalloonPositionData());
     }
 
@@ -219,22 +220,6 @@ class IbexaCustomTagUI extends Plugin {
         return { target: view.domConverter.viewRangeToDom(range) };
     }
 
-    setPanelContentMaxHeight() {
-        const { innerHeight: windowHeight } = window;
-        const { top: panelTopPosition, element: panelNode } = this.balloon.view;
-        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 panelHeaderHeight = panelHeader?.offsetHeight ?? 0;
-        const panelFooterHeight = panelFooter?.offsetHeight ?? 0;
-        const isPanelOverTopWindowEdge = panelTopPosition < 0;
-        const maxHeightValue = isPanelOverTopWindowEdge
-            ? panelContent.offsetHeight - Math.abs(panelTopPosition)
-            : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
-
-        panelContent.style.maxHeight = `${maxHeightValue}px`;
-    }
-
     addCustomTag() {
         const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => {
             outputValues[attributeName] = config.defaultValue;

diff --git a/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js b/src/bundle/Resources/public/js/CKEditor/custom-tags/helpers/panel-helper.js
@@ -0,0 +1,17 @@
+const setPanelContentMaxHeight = (balloonView) => {
+    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');
+    const panelHeaderHeight = panelHeader?.offsetHeight ?? 0;
+    const panelFooterHeight = panelFooter?.offsetHeight ?? 0;
+    const isPanelOverTopWindowEdge = panelTopPosition < 0;
+    const maxHeightValue = isPanelOverTopWindowEdge
+        ? panelContent.offsetHeight - Math.abs(panelTopPosition)
+        : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
+
+    panelContent.style.maxHeight = `${maxHeightValue}px`;
+};
+
+export { setPanelContentMaxHeight };
diff --git a/...bundle/Resources/public/js/CKEditor/custom-tags/inline-custom-tag/inline-custom-tag-ui.js b/...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,7 +91,7 @@ class IbexaInlineCustomTagUI extends Plugin {
             position: this.getBalloonPositionData(),
         });
 
-        this.setPanelContentMaxHeight();
+        setPanelContentMaxHeight(this.balloon.view);
         this.balloon.updatePosition(this.getBalloonPositionData());
     }
 
@@ -116,22 +117,6 @@ class IbexaInlineCustomTagUI extends Plugin {
         return { target: view.domConverter.viewRangeToDom(range) };
     }
 
-    setPanelContentMaxHeight() {
-        const { innerHeight: windowHeight } = window;
-        const { top: panelTopPosition, element: panelNode } = this.balloon.view;
-        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 panelHeaderHeight = panelHeader?.offsetHeight ?? 0;
-        const panelFooterHeight = panelFooter?.offsetHeight ?? 0;
-        const isPanelOverTopWindowEdge = panelTopPosition < 0;
-        const maxHeightValue = isPanelOverTopWindowEdge
-            ? panelContent.offsetHeight - Math.abs(panelTopPosition)
-            : windowHeight - panelTopPosition - panelHeaderHeight - panelFooterHeight;
-
-        panelContent.style.maxHeight = `${maxHeightValue}px`;
-    }
-
     addInlineCustomTag() {
         const values = Object.entries(this.config.attributes).reduce((outputValues, [attributeName, config]) => {
             outputValues[attributeName] = config.defaultValue;