IBX-6843: Focus mode

ibexa · Oct 24, 2023 · d7c151a · d7c151a
1 parent d4b9f58
commit d7c151a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js b/src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js
@@ -31,6 +31,7 @@ import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
 import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
 
 const VIEWPORT_TOP_OFFSET = 102;
+const VIEWPORT_TOP_OFFSET_FOCUS_MODE = 0;
 
 (function (global, doc, ibexa) {
     class BaseRichText {
@@ -40,9 +41,11 @@ const VIEWPORT_TOP_OFFSET = 102;
 
             this.editor = null;
             this.viewportTopOffset = config?.viewportTopOffset ?? VIEWPORT_TOP_OFFSET;
+            this.initialData = config?.initialData;
 
             this.xhtmlify = this.xhtmlify.bind(this);
             this.getData = this.getData.bind(this);
+            this.getHTMLDocumentFragment = this.getHTMLDocumentFragment.bind(this);
         }
 
         getData() {
@@ -180,6 +183,7 @@ const VIEWPORT_TOP_OFFSET = 102;
                 ],
                 toolbar: {
                     items: toolbar,
+                    // shouldNotGroupWhenFull: true
                 },
                 ui: {
                     viewportOffset: {
@@ -216,6 +220,13 @@ const VIEWPORT_TOP_OFFSET = 102;
                 ...extraConfig,
             }).then((editor) => {
                 this.editor = editor;
+
+                // Richtext
+                const editorUiInstance = this.editor.ui;
+                const editorUiViewInstance = editorUiInstance.view;
+                const editorToolboxPanelInstance = editorUiViewInstance.panel;
+                // End
+
                 const initialData = this.getData();
                 const updateInput = (data, shouldFireInputEvent = true) => {
                     const textarea = container.closest('.ibexa-data-source').querySelector('textarea');
@@ -229,10 +240,26 @@ const VIEWPORT_TOP_OFFSET = 102;
 
                 updateInput(initialData, false);
 
-                this.editor.model.document.on('change:data', () => {
-                    const data = this.getData();
+                editor.on('set:focusModeEnabled', ({ source: eventEditorInstance }, name, value) => {
+                    const { ui: eventEditorUiInstance } = eventEditorInstance;
+                    const panelNode = eventEditorUiInstance.view.panel.element;
+                    const panelsContainer = panelNode.closest('.ck-body');
+
+                    eventEditorUiInstance.viewportOffset = {
+                        top: value ? VIEWPORT_TOP_OFFSET_FOCUS_MODE : this.viewportTopOffset
+                    };
 
-                    updateInput(data);
+                    panelsContainer.classList.toggle('ck-body--in-focus-mode');
+                })
+                editorUiInstance.on('ibexa-rt-update-ui', ({ source: eventEditorUiInstance }) => {
+                    eventEditorUiInstance.update();
+                });
+                editorToolboxPanelInstance.on('change:isVisible', ({ source: eventBalloonPanelViewInstance }) => {
+                    if (!this.editor?.focusModeEnabled) {
+                        return;
+                    }
+
+                    eventBalloonPanelViewInstance.set('isVisible', true);
                 });
             });
         }

diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss
@@ -253,6 +253,16 @@
     }
 }
 
+.ibexa-field-edit {
+    &--in-focus-mode {
+        .ibexa-data-source {
+            &__richtext {
+                height: calc(100% - #{calculateRem(32px)});
+            }
+        }
+    }
+}
+
 .ck {
     &.ck-editor__editable_inline {
         border: none;
@@ -277,4 +287,12 @@
         max-height: calculateRem(300px);
         overflow-y: auto;
     }
+
+    &.ck-reset_all.ck-body--in-focus-mode {
+        .ck-balloon-panel_visible,
+        .ck-toolbar-container,
+        .ck-toolbar-container.ck-balloon-panel_with-arrow {
+            z-index: 1080;
+        }
+    }
 }