@ckeditor/ckeditor5-fullscreen 45.0.0-alpha.7 → 45.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-fullscreen",
-  "version": "45.0.0-alpha.7",
+  "version": "45.0.0-alpha.9",
   "description": "Fullscreen mode feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,18 +13,18 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-comments": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-document-outline": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-editor-classic": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-editor-decoupled": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-pagination": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-real-time-collaboration": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-revision-history": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.7",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.7",
-    "ckeditor5": "45.0.0-alpha.7"
+    "@ckeditor/ckeditor5-comments": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-document-outline": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-editor-classic": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-editor-decoupled": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-pagination": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-real-time-collaboration": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-revision-history": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.9",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.9",
+    "ckeditor5": "45.0.0-alpha.9"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/fullscreenediting.js

@@ -43,12 +43,15 @@ export default class FullscreenEditing extends Plugin {
         // Set the Ctrl+Shift+F keystroke.
         this.editor.keystrokes.set('Ctrl+Shift+F', (evt, cancel) => {
             this.editor.execute('toggleFullscreen');
-            // On non-Chromium browsers, the editor view is not blurred properly after moving the editable,
-            // even though the `document.activeElement` is changed. Hence we need to blur the view manually.
+            // On non-Chromium browsers, the editor view and toolbar are not blurred properly after moving the editable,
+            // even though the `document.activeElement` is changed. Hence we need to blur them manually.
             // Fixes https://github.com/ckeditor/ckeditor5/issues/18250 and https://github.com/ckeditor/ckeditor5/issues/18247.
             if (!env.isBlink) {
                 this.editor.editing.view.document.isFocused = false;
+                this.editor.ui.view.toolbar.focusTracker.focusedElement = null;
             }
+            // The order of scroll and focus is not important here.
+            this.editor.editing.view.scrollToTheSelection();
             this.editor.editing.view.focus();
             cancel();
         });

package/src/fullscreenui.js

@@ -8,6 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 import { IconFullscreenEnter, IconFullscreenLeave } from 'ckeditor5/src/icons.js';
+import { env } from 'ckeditor5/src/utils.js';
 import FullscreenEditing from './fullscreenediting.js';
 import '../theme/fullscreen.css';
 const COMMAND_NAME = 'toggleFullscreen';
@@ -69,6 +70,14 @@ export default class FullscreenUI extends Plugin {
         }
         this.listenTo(view, 'execute', () => {
             editor.execute(COMMAND_NAME);
+            // On non-Chromium browsers, toolbar is not blurred properly after moving the editable,
+            // even though the `document.activeElement` is changed. Hence we need to blur the view manually.
+            // Fixes https://github.com/ckeditor/ckeditor5/issues/18250 and https://github.com/ckeditor/ckeditor5/issues/18247.
+            if (!env.isBlink) {
+                this.editor.ui.view.toolbar.focusTracker.focusedElement = null;
+            }
+            // The order of scroll and focus is not important here.
+            editor.editing.view.scrollToTheSelection();
             editor.editing.view.focus();
         });
         return view;

package/src/handlers/abstracteditorhandler.d.ts

@@ -41,6 +41,10 @@ export default class AbstractEditorHandler {
      * that were hidden before entering the fullscreen mode.
      */
     private _hiddenElements;
+    /**
+     * A map matching the ancestors of the editable element with their scroll positions before entering fullscreen mode.
+     */
+    private _savedAncestorsScrollPositions;
     /**
      * A callback that shows the revision viewer, stored to restore the original one after exiting the fullscreen mode.
      */
@@ -143,4 +147,8 @@ export default class AbstractEditorHandler {
      * Only dialogs with the position set to "editor-top-side" should have their position changed.
      */
     private _setNewDialogPosition;
+    /**
+     * Saves the scroll positions of all ancestors of the given element.
+     */
+    private _saveAncestorsScrollPositions;
 }

package/src/handlers/abstracteditorhandler.js

@@ -48,6 +48,10 @@ export default class AbstractEditorHandler {
      * that were hidden before entering the fullscreen mode.
      */
     _hiddenElements = new Map();
+    /**
+     * A map matching the ancestors of the editable element with their scroll positions before entering fullscreen mode.
+     */
+    _savedAncestorsScrollPositions = new Map();
     /**
      * A callback that shows the revision viewer, stored to restore the original one after exiting the fullscreen mode.
      */
@@ -134,6 +138,7 @@ export default class AbstractEditorHandler {
      * Enables the fullscreen mode. It executes the editor-specific enable handler and then the configured callback.
      */
     enable() {
+        this._saveAncestorsScrollPositions(this._editor.ui.getEditableElement());
         this._defaultOnEnter();
         // Block scroll if the fullscreen container is the body element. Otherwise the document has to stay scrollable.
         if (this._editor.config.get('fullscreen.container') === this._document.body) {
@@ -231,6 +236,13 @@ export default class AbstractEditorHandler {
         if (this._placeholderMap.size === 0) {
             this._destroyContainer();
         }
+        // Restore scroll positions of all ancestors. It may include the closest editable wrapper causing the editor to change
+        // the visible content, which is not what we want. Thus, after executing the command, we use
+        // `editor.editing.view.scrollToTheSelection()` to scroll the editor viewport to the current selection.
+        for (const [ancestor, value] of this._savedAncestorsScrollPositions) {
+            ancestor.scrollTo(value.scrollLeft, value.scrollTop);
+        }
+        this._savedAncestorsScrollPositions.clear();
         // Pagination has to be restored after leaving fullscreen mode to ensure proper rendering.
         // Code coverage is provided in the commercial package repository as integration unit tests.
         /* istanbul ignore next -- @preserve */
@@ -506,4 +518,34 @@ export default class AbstractEditorHandler {
             dialogView.moveTo(fullscreenViewContainerRect.left + fullscreenViewContainerRect.width - dialogRect.width - DIALOG_OFFSET + scrollOffset, editorContainerRect.top);
         }
     }
+    /**
+     * Saves the scroll positions of all ancestors of the given element.
+     */
+    _saveAncestorsScrollPositions(domElement) {
+        let element = domElement.parentElement;
+        if (!element) {
+            return;
+        }
+        while (element) {
+            const overflowY = element.style.overflowY || global.window.getComputedStyle(element).overflowY;
+            const overflowX = element.style.overflowX || global.window.getComputedStyle(element).overflowX;
+            // Out of 5 possible keyword values: visible, hidden, clip, scroll and auto - only the last two allow for scrolling.
+            if (overflowY === 'auto' ||
+                overflowY === 'scroll' ||
+                overflowX === 'auto' ||
+                overflowX === 'scroll') {
+                this._savedAncestorsScrollPositions.set(element, {
+                    scrollLeft: element.scrollLeft,
+                    scrollTop: element.scrollTop
+                });
+            }
+            else if (element.tagName === 'HTML') {
+                this._savedAncestorsScrollPositions.set(element, {
+                    scrollLeft: element.scrollLeft,
+                    scrollTop: element.scrollTop
+                });
+            }
+            element = element.parentElement;
+        }
+    }
 }