@ckeditor/ckeditor5-fullscreen 45.0.0-alpha.1 → 45.0.0-alpha.11

package/dist/index.js

@@ -3,10 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { global, createElement, Rect, env } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic/dist/index.js';
 import { DecoupledEditor } from '@ckeditor/ckeditor5-editor-decoupled/dist/index.js';
 import { BodyCollection, DialogViewPosition, MenuBarView, ButtonView, MenuBarMenuListItemButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { global, createElement, Rect } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { IconFullscreenLeave, IconFullscreenEnter } from '@ckeditor/ckeditor5-icons/dist/index.js';
 
 const DIALOG_OFFSET = 28;
@@ -40,6 +40,9 @@ const DIALOG_OFFSET = 28;
 	 * It is used to restore their previous visibility when leaving the fullscreen mode and avoid showing elements
 	 * 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.
 	 */ _showRevisionViewerCallback = null;
@@ -122,6 +125,7 @@ const DIALOG_OFFSET = 28;
     /**
 	 * 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) {
@@ -140,7 +144,7 @@ const DIALOG_OFFSET = 28;
             this._generateDocumentOutlineContainer();
         }
         // Code coverage is provided in the commercial package repository as integration unit tests.
-        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('Pagination')) {
+        /* istanbul ignore next -- @preserve */ if (this._editor.plugins.has('Pagination') && this._editor.plugins.get('Pagination').isEnabled) {
             const paginationRenderer = this._editor.plugins.get('PaginationRenderer');
             paginationRenderer.setupScrollableAncestor();
             this._paginationBodyCollection = new BodyCollection(this._editor.locale);
@@ -208,9 +212,16 @@ const DIALOG_OFFSET = 28;
         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 if -- @preserve */ if (this._editor.plugins.has('Pagination')) {
+        /* istanbul ignore next -- @preserve */ if (this._editor.plugins.has('Pagination') && this._editor.plugins.get('Pagination').isEnabled) {
             const paginationRenderer = this._editor.plugins.get('PaginationRenderer');
             paginationRenderer.setupScrollableAncestor();
             paginationRenderer.linesRepository.setViewCollection(this._editor.ui.view.body);
@@ -259,13 +270,15 @@ const DIALOG_OFFSET = 28;
 	 * Checks if the PresenceListUI plugin is available and moves its elements to fullscreen mode.
 	 */ // Code coverage is provided in the commercial package repository as integration unit tests.
     /* istanbul ignore next -- @preserve */ _generatePresenceListContainer() {
+        const t = this._editor.t;
         const presenceListElement = createElement(document, 'div', {
             class: 'ck ck-fullscreen__left-sidebar-item'
         });
         presenceListElement.innerHTML = `
-			<div class="ck ck-fullscreen__left-sidebar-header">Connected users</div>
+			<div class="ck ck-fullscreen__left-sidebar-header"></div>
 			<div class="ck ck-fullscreen__presence-list" data-ck-fullscreen="presence-list"></div>
 		`;
+        presenceListElement.firstElementChild.innerText = t('Connected users');
         document.querySelector('[data-ck-fullscreen="left-sidebar-sticky"]').appendChild(presenceListElement);
         const presenceListUI = this._editor.plugins.get('PresenceListUI');
         this.moveToFullscreen(presenceListUI.view.element, 'presence-list');
@@ -274,14 +287,14 @@ const DIALOG_OFFSET = 28;
 	 * Checks if the DocumentOutlineUI plugin is available and moves its elements to fullscreen mode.
 	 */ // Code coverage is provided in the commercial package repository as integration unit tests.
     /* istanbul ignore next -- @preserve */ _generateDocumentOutlineContainer() {
+        const t = this._editor.t;
         const documentOutlineHeaderElement = createElement(document, 'div', {
             class: 'ck-fullscreen__left-sidebar-item ck-fullscreen__left-sidebar-item--no-margin'
         });
         documentOutlineHeaderElement.innerHTML = `
-			<div class="ck ck-fullscreen__left-sidebar-header ck-fullscreen__document-outline-header">
-				Document outline
-			</div>
+			<div class="ck ck-fullscreen__left-sidebar-header ck-fullscreen__document-outline-header"></div>
 		`;
+        documentOutlineHeaderElement.firstElementChild.innerText = t('Document outline');
         const documentOutlineBodyWrapper = createElement(document, 'div', {
             class: 'ck ck-fullscreen__left-sidebar-item ck-fullscreen__document-outline-wrapper'
         });
@@ -459,6 +472,31 @@ const DIALOG_OFFSET = 28;
             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;
+        }
+    }
 }
 
 /**
@@ -478,7 +516,8 @@ const DIALOG_OFFSET = 28;
 	 */ _defaultOnEnter() {
         const editorUI = this._editor.ui;
         const editorUIView = editorUI.view;
-        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('Pagination')) {
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore next -- @preserve */ if (this._editor.plugins.has('Pagination') && this._editor.plugins.get('Pagination').isEnabled) {
             this.moveToFullscreen(editorUI.getEditableElement().parentElement.querySelector('.ck-pagination-view'), 'pagination-view');
         }
         this.moveToFullscreen(editorUI.getEditableElement(), 'editable');
@@ -488,8 +527,13 @@ const DIALOG_OFFSET = 28;
         // in both menu bar and toolbar (adding the side padding to the elements).
         // Since we don't move the whole container but only parts, we need to reapply the attribute value manually.
         // Decupled editor doesn't have this issue because there is no top-level container,
-        // so `dir` is set on each component separately.
+        // so `dir` attribute is set on each component separately.
         this.getWrapper().setAttribute('dir', editorUIView.element.getAttribute('dir'));
+        // The `ck-rounded-corners` class is added to the wrapper element to ensure that the corners in menu bar, toolbar etc are rounded
+        // when the editor is in fullscreen mode.
+        // Decupled editor doesn't have this issue because there is no top-level container,
+        // so `ck-rounded-corners` class is set on each component separately.
+        this.getWrapper().classList.add('ck-rounded-corners');
         if (this._editor.config.get('fullscreen.menuBar.isVisible')) {
             if (!editorUIView.menuBarView) {
                 editorUIView.menuBarView = new MenuBarView(this._editor.locale);
@@ -517,7 +561,8 @@ const DIALOG_OFFSET = 28;
     /**
 	 * A function that moves the editor UI elements to the fullscreen mode.
 	 */ _defaultOnEnter() {
-        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('Pagination')) {
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore next -- @preserve */ if (this._editor.plugins.has('Pagination') && this._editor.plugins.get('Pagination').isEnabled) {
             this.moveToFullscreen(this._editor.ui.getEditableElement().parentElement.querySelector('.ck-pagination-view'), 'pagination-view');
         }
         this.moveToFullscreen(this._editor.ui.getEditableElement(), 'editable');
@@ -607,6 +652,15 @@ const DIALOG_OFFSET = 28;
         // 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 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();
         });
@@ -677,6 +731,14 @@ const COMMAND_NAME = 'toggleFullscreen';
         }
         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;