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

package/dist/index.js

@@ -0,0 +1,710 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import { Command, Plugin } from '@ckeditor/ckeditor5-core/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;
+/**
+ * The abstract editor type handler. It should be extended by the particular editor type handler.
+ */ class AbstractEditorHandler {
+    /**
+	 * Maps placeholder names to placeholder elements and moved elements.
+	 */ _placeholderMap;
+    /**
+	 * The wrapper element that holds the fullscreen mode layout.
+	 */ _wrapper = null;
+    /**
+	 * The document object in which the editor is located.
+	 */ _document;
+    /**
+	 * Data of the annotations UIs that were active before entering the fullscreen mode.
+	 */ _annotationsUIsData = null;
+    /**
+	 * The pagination body collection that is used in the fullscreen mode.
+	 * If we don't move pagination lines to the fullscreen container, they won't be visible.
+	 */ _paginationBodyCollection = null;
+    /**
+	 * A callback that hides the document outline header when the source editing mode is enabled.
+	 * Document outline element itself is hidden by source editing plugin.
+	 */ /* istanbul ignore next -- @preserve */ _sourceEditingCallback = (_evt, _name, value)=>{
+        this.getWrapper().querySelector('.ck-fullscreen__document-outline-header').style.display = value ? 'none' : '';
+    };
+    /**
+	 * A map of elements that were hidden when entering the fullscreen mode.
+	 * 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 callback that shows the revision viewer, stored to restore the original one after exiting the fullscreen mode.
+	 */ _showRevisionViewerCallback = null;
+    /**
+	 * A callback that closes the revision viewer, stored to restore the original one after exiting the fullscreen mode.
+	 */ _closeRevisionViewerCallback = null;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        this._placeholderMap = new Map();
+        if (editor.plugins.has('RevisionHistory')) {
+            this._showRevisionViewerCallback = editor.config.get('revisionHistory').showRevisionViewerCallback;
+            this._closeRevisionViewerCallback = editor.config.get('revisionHistory').closeRevisionViewerCallback;
+        }
+        this._editor = editor;
+        this._document = this._editor.sourceElement ? this._editor.sourceElement.ownerDocument : global.document;
+        this._editor.config.define('fullscreen.container', this._document.body);
+        editor.on('destroy', ()=>{
+            if (this._wrapper) {
+                this.destroy();
+            }
+        });
+    }
+    /**
+	 * Moves the given element to the fullscreen mode container, leaving a placeholder in its place.
+	 */ moveToFullscreen(elementToMove, placeholderName) {
+        const placeholderElement = createElement(this._document, 'div');
+        placeholderElement.setAttribute('data-ck-fullscreen-placeholder', placeholderName);
+        elementToMove.replaceWith(placeholderElement);
+        this.getWrapper().querySelector(`[data-ck-fullscreen="${placeholderName}"]`).append(elementToMove);
+        this._placeholderMap.set(placeholderName, {
+            placeholderElement,
+            movedElement: elementToMove
+        });
+    }
+    /**
+	 * Returns a single moved element to its original place.
+	 */ restoreMovedElementLocation(placeholderName) {
+        if (!this._placeholderMap.has(placeholderName)) {
+            return;
+        }
+        const { placeholderElement, movedElement } = this._placeholderMap.get(placeholderName);
+        placeholderElement.replaceWith(movedElement);
+        placeholderElement.remove();
+        this._placeholderMap.delete(placeholderName);
+        if (this._placeholderMap.size === 0) {
+            this._destroyContainer();
+        }
+    }
+    /**
+	 * Returns the fullscreen mode container element.
+	 */ getWrapper() {
+        if (!this._wrapper) {
+            this._wrapper = createElement(this._document, 'div', {
+                class: 'ck ck-fullscreen__main-wrapper'
+            });
+            // For now, the container is generated in a very straightforward way. If necessary, it may be rewritten using our UI lib.
+            this._wrapper.innerHTML = `
+				<div class="ck ck-fullscreen__top-wrapper ck-reset_all">
+					<div class="ck ck-fullscreen__menu-bar" data-ck-fullscreen="menu-bar"></div>
+					<div class="ck ck-fullscreen__toolbar" data-ck-fullscreen="toolbar"></div>
+				</div>
+				<div class="ck ck-fullscreen__editable-wrapper">
+					<div class="ck ck-fullscreen__sidebar ck-fullscreen__left-sidebar" data-ck-fullscreen="left-sidebar">
+						<div class="ck ck-fullscreen__left-sidebar--sticky" data-ck-fullscreen="left-sidebar-sticky"></div>
+					</div>
+					<div class="ck ck-fullscreen__editable" data-ck-fullscreen="editable">
+						<div class="ck ck-fullscreen__pagination-view" data-ck-fullscreen="pagination-view"></div>
+					</div>
+					<div class="ck ck-fullscreen__sidebar ck-fullscreen__right-sidebar" data-ck-fullscreen="right-sidebar"></div>
+				</div>
+				<div class="ck ck-fullscreen__bottom-wrapper">
+					<div class="ck ck-fullscreen__body-wrapper" data-ck-fullscreen="body-wrapper"></div>
+				</div>
+			`;
+            this._editor.config.get('fullscreen.container').appendChild(this._wrapper);
+        }
+        return this._wrapper;
+    }
+    /**
+	 * Enables the fullscreen mode. It executes the editor-specific enable handler and then the configured callback.
+	 */ enable() {
+        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) {
+            this._document.body.classList.add('ck-fullscreen');
+            this._document.body.parentElement.classList.add('ck-fullscreen');
+        }
+        if (this._editor.plugins.has('Dialog')) {
+            this._registerFullscreenDialogPositionAdjustments();
+        }
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('PresenceListUI')) {
+            this._generatePresenceListContainer();
+        }
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('DocumentOutlineUI')) {
+            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')) {
+            const paginationRenderer = this._editor.plugins.get('PaginationRenderer');
+            paginationRenderer.setupScrollableAncestor();
+            this._paginationBodyCollection = new BodyCollection(this._editor.locale);
+            this._paginationBodyCollection.attachToDom();
+            paginationRenderer.linesRepository.setViewCollection(this._paginationBodyCollection);
+            this._editor.once('destroy', ()=>{
+                this._paginationBodyCollection.detachFromDom();
+            });
+            this.moveToFullscreen(this._paginationBodyCollection.bodyCollectionContainer, 'body-wrapper');
+        }
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('AnnotationsUIs')) {
+            this._overrideAnnotationsUIs();
+        }
+        if (this._editor.plugins.has('RevisionHistory')) {
+            // Code coverage is provided in the commercial package repository as integration unit tests.
+            /* istanbul ignore if -- @preserve */ if (this._editor.plugins.get('RevisionHistory').isRevisionViewerOpen) {
+                // Keep in mind that closing the revision history viewer is an asynchronous operation.
+                this._editor.config.get('revisionHistory.closeRevisionViewerCallback')();
+            }
+            this._overrideRevisionHistoryCallbacks();
+        }
+        if (this._editor.plugins.has('SourceEditing') && this._editor.plugins.has('DocumentOutlineUI')) {
+            this._editor.plugins.get('SourceEditing').on('change:isSourceEditingMode', this._sourceEditingCallback);
+        }
+        // Hide all other elements in the container to ensure they don't create an empty unscrollable space.
+        for (const element of this._editor.config.get('fullscreen.container').children){
+            // Do not hide body wrapper and ckbox wrapper to keep dialogs, balloons etc visible.
+            if (element !== this._wrapper && !element.classList.contains('ck-body-wrapper') && !element.classList.contains('ckbox-wrapper') && // Already hidden elements are not hidden again to avoid accidentally showing them after leaving fullscreen.
+            element.style.display !== 'none') {
+                this._hiddenElements.set(element, element.style.display);
+                element.style.display = 'none';
+            }
+        }
+        if (this._editor.config.get('fullscreen.onEnterCallback')) {
+            this._editor.config.get('fullscreen.onEnterCallback')(this.getWrapper());
+        }
+    }
+    /**
+	 * Disables the fullscreen mode by restoring all moved elements and destroying the fullscreen container.
+	 */ disable() {
+        if (this._editor.config.get('fullscreen.onLeaveCallback')) {
+            this._editor.config.get('fullscreen.onLeaveCallback')(this.getWrapper());
+        }
+        this._document.body.classList.remove('ck-fullscreen');
+        this._document.body.parentElement.classList.remove('ck-fullscreen');
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('DocumentOutlineUI')) {
+            this._restoreDocumentOutlineDefaultContainer();
+        }
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore if -- @preserve */ if (this._annotationsUIsData) {
+            this._restoreAnnotationsUIs();
+        }
+        if (this._editor.plugins.has('RevisionHistory')) {
+            this._restoreRevisionHistoryCallbacks();
+        }
+        if (this._editor.plugins.has('SourceEditing') && this._editor.plugins.has('DocumentOutlineUI')) {
+            this._editor.plugins.get('SourceEditing').off('change:isSourceEditingMode', this._sourceEditingCallback);
+        }
+        for (const placeholderName of this._placeholderMap.keys()){
+            this.restoreMovedElementLocation(placeholderName);
+        }
+        this._editor.ui.view.toolbar.switchBehavior(this._editor.config.get('toolbar.shouldNotGroupWhenFull') === true ? 'static' : 'dynamic');
+        if (this._placeholderMap.size === 0) {
+            this._destroyContainer();
+        }
+        // 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')) {
+            const paginationRenderer = this._editor.plugins.get('PaginationRenderer');
+            paginationRenderer.setupScrollableAncestor();
+            paginationRenderer.linesRepository.setViewCollection(this._editor.ui.view.body);
+            this._paginationBodyCollection.detachFromDom();
+            this._paginationBodyCollection?.destroy();
+        }
+        // Also dialog position needs to be recalculated after leaving fullscreen mode.
+        if (this._editor.plugins.has('Dialog')) {
+            this._unregisterFullscreenDialogPositionAdjustments();
+        }
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        for (const { placeholderElement, movedElement } of this._placeholderMap.values()){
+            placeholderElement.remove();
+            movedElement.remove();
+        }
+        this._destroyContainer();
+        this._document.body.classList.remove('ck-fullscreen');
+        this._document.body.parentElement.classList.remove('ck-fullscreen');
+    }
+    /**
+	 * A function that moves the editor UI elements to the fullscreen mode. It should be set by the particular editor type handler.
+	 *
+	 * Returns the fullscreen mode container element so it can be further customized via
+	 * `fullscreen.onEnterCallback` configuration property.
+	 */ _defaultOnEnter() {
+        return this.getWrapper();
+    }
+    /**
+	 * Destroys the fullscreen mode container.
+	 */ _destroyContainer() {
+        if (!this._wrapper) {
+            return;
+        }
+        this._wrapper.remove();
+        this._wrapper = null;
+        // Restore visibility of all other elements in the container.
+        for (const [element, displayValue] of this._hiddenElements){
+            element.style.display = displayValue;
+        }
+        this._hiddenElements.clear();
+    }
+    /**
+	 * 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 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__presence-list" data-ck-fullscreen="presence-list"></div>
+		`;
+        document.querySelector('[data-ck-fullscreen="left-sidebar-sticky"]').appendChild(presenceListElement);
+        const presenceListUI = this._editor.plugins.get('PresenceListUI');
+        this.moveToFullscreen(presenceListUI.view.element, 'presence-list');
+    }
+    /**
+	 * 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 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>
+		`;
+        const documentOutlineBodyWrapper = createElement(document, 'div', {
+            class: 'ck ck-fullscreen__left-sidebar-item ck-fullscreen__document-outline-wrapper'
+        });
+        documentOutlineBodyWrapper.innerHTML = `
+			<div class="ck ck-fullscreen__document-outline" data-ck-fullscreen="document-outline"></div>
+		`;
+        document.querySelector('[data-ck-fullscreen="left-sidebar"]').appendChild(documentOutlineBodyWrapper);
+        document.querySelector('[data-ck-fullscreen="left-sidebar-sticky"]').appendChild(documentOutlineHeaderElement);
+        const documentOutlineUI = this._editor.plugins.get('DocumentOutlineUI');
+        documentOutlineUI.view.documentOutlineContainer = document.querySelector('[data-ck-fullscreen="left-sidebar"]');
+        this.moveToFullscreen(documentOutlineUI.view.element, 'document-outline');
+    }
+    /**
+	 * Restores the default value of documentOutlineContainer, which is modified in fullscreen mode.
+	 */ // Code coverage is provided in the commercial package repository as integration unit tests.
+    /* istanbul ignore next -- @preserve */ _restoreDocumentOutlineDefaultContainer() {
+        const documentOutlineUI = this._editor.plugins.get('DocumentOutlineUI');
+        documentOutlineUI.view.documentOutlineContainer = documentOutlineUI.view.element;
+    }
+    /**
+	 * Stores the current state of the annotations UIs to restore it when leaving fullscreen mode.
+	 */ // Code coverage is provided in the commercial package repository as integration unit tests.
+    /* istanbul ignore next -- @preserve */ _overrideAnnotationsUIs() {
+        const annotationsUIs = this._editor.plugins.get('AnnotationsUIs');
+        this._annotationsUIsData = new Map(annotationsUIs.uisData);
+        // Switch to the wide sidebar.
+        const sidebarPlugin = this._editor.plugins.get('Sidebar');
+        if (!sidebarPlugin.container) {
+            sidebarPlugin.setContainer(this.getWrapper().querySelector('[data-ck-fullscreen="right-sidebar"]'));
+        }
+        const annotationsFilters = new Map();
+        for (const [uiName, data] of [
+            ...this._annotationsUIsData
+        ]){
+            // Default filter is `() => true`. Only store filters that are different.
+            if (data.filter !== annotationsUIs.defaultFilter) {
+                annotationsFilters.set(uiName, data.filter);
+            }
+        }
+        annotationsUIs.deactivateAll();
+        // Check if someone has a filter defined for `wideSidebar`. If so, retrieve and apply it in fullscreen. Do not show any other UI.
+        if (annotationsFilters.has('wideSidebar')) {
+            annotationsUIs.activate('wideSidebar', annotationsFilters.get('wideSidebar'));
+        } else if (annotationsFilters.size) {
+            annotationsUIs.activate('wideSidebar', (annotation)=>[
+                    ...annotationsFilters.values()
+                ].some((filter)=>filter(annotation)));
+        } else {
+            annotationsUIs.switchTo('wideSidebar');
+        }
+        this.moveToFullscreen(sidebarPlugin.container.firstElementChild, 'right-sidebar');
+    }
+    /**
+	 * Restores the saved state of the annotations UIs.
+	 */ // Code coverage is provided in the commercial package repository as integration unit tests.
+    /* istanbul ignore next -- @preserve */ _restoreAnnotationsUIs() {
+        const annotationsUIs = this._editor.plugins.get('AnnotationsUIs');
+        annotationsUIs.deactivateAll();
+        for (const [uiName, data] of [
+            ...this._annotationsUIsData
+        ]){
+            annotationsUIs.activate(uiName, data.filter);
+        }
+        this._annotationsUIsData = null;
+    }
+    /**
+	 * Modifies the revision history viewer callbacks to display the viewer in the fullscreen mode.
+	 */ _overrideRevisionHistoryCallbacks() {
+        // * Hide editor's editable, toolbar and sidebar;
+        // * Disable menu bar;
+        // * Show revision viewer editable, toolbar and sidebar.
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore next -- @preserve */ this._editor.config.set('revisionHistory.showRevisionViewerCallback', async ()=>{
+            const revisionViewerEditor = await this._showRevisionViewerCallback();
+            if (this._editor.plugins.has('DocumentOutlineUI')) {
+                this.getWrapper().querySelector('.ck-fullscreen__document-outline-header').style.display = 'none';
+            }
+            this.restoreMovedElementLocation('editable');
+            this.restoreMovedElementLocation('toolbar');
+            this.restoreMovedElementLocation('right-sidebar');
+            if (this._annotationsUIsData) {
+                this._restoreAnnotationsUIs();
+            }
+            if (this._editor.ui.view.menuBarView) {
+                this._editor.ui.view.menuBarView.disable();
+            }
+            this.moveToFullscreen(revisionViewerEditor.ui.getEditableElement(), 'editable');
+            this.moveToFullscreen(revisionViewerEditor.ui.view.toolbar.element, 'toolbar');
+            this.moveToFullscreen(this._editor.config.get('revisionHistory.viewerSidebarContainer'), 'right-sidebar');
+            return revisionViewerEditor;
+        });
+        // * Hide revision viewer editable, toolbar and sidebar;
+        // * Enable menu bar;
+        // * Show editor's editable, toolbar and sidebar.
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore next -- @preserve */ this._editor.config.set('revisionHistory.closeRevisionViewerCallback', async ()=>{
+            this.restoreMovedElementLocation('toolbar');
+            this.restoreMovedElementLocation('editable');
+            this.restoreMovedElementLocation('right-sidebar');
+            if (this._editor.plugins.has('DocumentOutlineUI')) {
+                this.getWrapper().querySelector('.ck-fullscreen__document-outline-header').style.display = '';
+            }
+            this.moveToFullscreen(this._editor.ui.getEditableElement(), 'editable');
+            this.moveToFullscreen(this._editor.ui.view.toolbar.element, 'toolbar');
+            await this._closeRevisionViewerCallback();
+            if (this._editor.plugins.has('AnnotationsUIs')) {
+                this._overrideAnnotationsUIs();
+            }
+            if (this._editor.ui.view.menuBarView) {
+                this._editor.ui.view.menuBarView.enable();
+            }
+        });
+    }
+    /**
+	 * Resets the revision history viewer callbacks to their original values.
+	 */ _restoreRevisionHistoryCallbacks() {
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore next -- @preserve */ this._editor.config.set('revisionHistory.showRevisionViewerCallback', async ()=>{
+            return this._showRevisionViewerCallback();
+        });
+        // Code coverage is provided in the commercial package repository as integration unit tests.
+        /* istanbul ignore next -- @preserve */ this._editor.config.set('revisionHistory.closeRevisionViewerCallback', async ()=>{
+            return this._closeRevisionViewerCallback();
+        });
+    }
+    /**
+	 * Adds an event listener when the dialog opens to adjust its position in fullscreen mode,
+	 * utilizing the empty space on the right side of the editable element.
+	 */ _registerFullscreenDialogPositionAdjustments() {
+        const dialog = this._editor.plugins.get('Dialog');
+        this._setNewDialogPosition();
+        dialog.on('change:isOpen', this.updateDialogPositionCallback, {
+            priority: 'highest'
+        });
+    }
+    /**
+	 * Removes an event listener that adjusts the dialog's position in fullscreen mode.
+	 */ _unregisterFullscreenDialogPositionAdjustments() {
+        const dialog = this._editor.plugins.get('Dialog');
+        const dialogView = dialog.view;
+        if (dialogView && dialogView.position === null) {
+            dialogView.position = DialogViewPosition.EDITOR_TOP_SIDE;
+        }
+        if (dialogView) {
+            dialogView.updatePosition();
+        }
+        dialog.off('change:isOpen', this.updateDialogPositionCallback);
+    }
+    /**
+	 * Stores a bound reference to the _updateDialogPosition method, allowing it to be attached and detached from change event.
+	 */ updateDialogPositionCallback = this._updateDialogPosition.bind(this);
+    /**
+	 * If dialog is open, adjust its positioning.
+	 */ _updateDialogPosition(_evt, _name, isOpen) {
+        if (isOpen) {
+            this._setNewDialogPosition();
+        }
+    }
+    /**
+	 * Adjusts the dialog position to utilize the empty space on the right side of the editable.
+	 * The new dialog position should be on the right side of the fullscreen view with a 30px margin.
+	 * Only dialogs with the position set to "editor-top-side" should have their position changed.
+	 */ _setNewDialogPosition() {
+        const dialog = this._editor.plugins.get('Dialog');
+        const dialogView = dialog.view;
+        if (!dialogView || dialogView.position !== DialogViewPosition.EDITOR_TOP_SIDE) {
+            return;
+        }
+        const fullscreenViewContainerRect = new Rect(this._wrapper).getVisible();
+        const editorContainerRect = new Rect(document.querySelector('.ck-fullscreen__editable')).getVisible();
+        const dialogRect = new Rect(dialogView.element.querySelector('.ck-dialog')).getVisible();
+        const scrollOffset = new Rect(document.querySelector('.ck-fullscreen__editable-wrapper')).excludeScrollbarsAndBorders().getVisible().width - new Rect(document.querySelector('.ck-fullscreen__editable-wrapper')).getVisible().width;
+        if (fullscreenViewContainerRect && editorContainerRect && dialogRect) {
+            dialogView.position = null;
+            dialogView.moveTo(fullscreenViewContainerRect.left + fullscreenViewContainerRect.width - dialogRect.width - DIALOG_OFFSET + scrollOffset, editorContainerRect.top);
+        }
+    }
+}
+
+/**
+ * The classic editor fullscreen mode handler.
+ */ class ClassicEditorHandler extends AbstractEditorHandler {
+    /**
+	 * An editor instance.
+	 */ _editor;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._editor = editor;
+    }
+    /**
+	 * A function that moves the editor UI elements to the fullscreen mode.
+	 */ _defaultOnEnter() {
+        const editorUI = this._editor.ui;
+        const editorUIView = editorUI.view;
+        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('Pagination')) {
+            this.moveToFullscreen(editorUI.getEditableElement().parentElement.querySelector('.ck-pagination-view'), 'pagination-view');
+        }
+        this.moveToFullscreen(editorUI.getEditableElement(), 'editable');
+        this.moveToFullscreen(editorUIView.toolbar.element, 'toolbar');
+        editorUIView.toolbar.switchBehavior(this._editor.config.get('fullscreen.toolbar.shouldNotGroupWhenFull') === true ? 'static' : 'dynamic');
+        // In classic editor, the `dir` attribute is set on the top-level container and it affects the styling
+        // 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.
+        this.getWrapper().setAttribute('dir', editorUIView.element.getAttribute('dir'));
+        if (this._editor.config.get('fullscreen.menuBar.isVisible')) {
+            if (!editorUIView.menuBarView) {
+                editorUIView.menuBarView = new MenuBarView(this._editor.locale);
+                editorUIView.menuBarView.render();
+                editorUI.initMenuBar(editorUIView.menuBarView);
+            }
+            this.moveToFullscreen(editorUIView.menuBarView.element, 'menu-bar');
+        }
+        return this.getWrapper();
+    }
+}
+
+/**
+ * The decoupled editor fullscreen mode handler.
+ */ class DecoupledEditorHandler extends AbstractEditorHandler {
+    /**
+	 * An editor instance.
+	 */ _editor;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._editor = editor;
+    }
+    /**
+	 * A function that moves the editor UI elements to the fullscreen mode.
+	 */ _defaultOnEnter() {
+        /* istanbul ignore if -- @preserve */ if (this._editor.plugins.has('Pagination')) {
+            this.moveToFullscreen(this._editor.ui.getEditableElement().parentElement.querySelector('.ck-pagination-view'), 'pagination-view');
+        }
+        this.moveToFullscreen(this._editor.ui.getEditableElement(), 'editable');
+        this.moveToFullscreen(this._editor.ui.view.toolbar.element, 'toolbar');
+        this._editor.ui.view.toolbar.switchBehavior(this._editor.config.get('fullscreen.toolbar.shouldNotGroupWhenFull') === true ? 'static' : 'dynamic');
+        if (this._editor.config.get('fullscreen.menuBar.isVisible')) {
+            this.moveToFullscreen(this._editor.ui.view.menuBarView.element, 'menu-bar');
+        }
+        return this.getWrapper();
+    }
+}
+
+/**
+ * A command toggling the fullscreen mode.
+ */ class FullscreenCommand extends Command {
+    /**
+	 * Specialized class handling the fullscreen mode toggling for a specific editor type.
+	 */ _fullscreenHandler;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this.affectsData = false;
+        this.isEnabled = true;
+        this.value = false;
+        // Choose the appropriate handler based on the editor type.
+        // Currently only ClassicEditor and DecoupledEditor are supported. For other editor types, the abstract handler is used
+        // which will throw if user tries to enable the fullscreen mode.
+        if (editor instanceof ClassicEditor) {
+            this._fullscreenHandler = new ClassicEditorHandler(editor);
+        } else if (editor instanceof DecoupledEditor) {
+            this._fullscreenHandler = new DecoupledEditorHandler(editor);
+        } else {
+            this._fullscreenHandler = new AbstractEditorHandler(editor);
+        }
+    }
+    /**
+	 * Toggles the fullscreen mode.
+	 */ execute() {
+        if (this.value) {
+            this._disableFullscreenMode();
+        } else {
+            this._enableFullscreenMode();
+        }
+    }
+    /**
+	 * Enables the fullscreen mode.
+	 */ _enableFullscreenMode() {
+        this._fullscreenHandler.enable();
+        this.value = true;
+    }
+    /**
+	 * Disables the fullscreen mode.
+	 */ _disableFullscreenMode() {
+        this._fullscreenHandler.disable();
+        this.value = false;
+    }
+}
+
+/**
+ * A plugin that registers the fullscreen mode command.
+ */ class FullscreenEditing extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'FullscreenEditing';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('fullscreen.menuBar.isVisible', true);
+        // By default, toolbar should behave the same way in fullscreen mode as in normal mode.
+        // This means that the toolbar buttons should be grouped when the toolbar is full.
+        editor.config.define('fullscreen.toolbar.shouldNotGroupWhenFull', editor.config.get('toolbar.shouldNotGroupWhenFull') === true);
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        this.editor.commands.add('toggleFullscreen', new FullscreenCommand(this.editor));
+        const t = this.editor.locale.t;
+        // Set the Ctrl+Shift+F keystroke.
+        this.editor.keystrokes.set('Ctrl+Shift+F', (evt, cancel)=>{
+            this.editor.execute('toggleFullscreen');
+            this.editor.editing.view.focus();
+            cancel();
+        });
+        // Add the information about the keystroke to the accessibility database.
+        this.editor.accessibility.addKeystrokeInfos({
+            keystrokes: [
+                {
+                    label: t('Toggle fullscreen mode'),
+                    keystroke: 'CTRL+SHIFT+F'
+                }
+            ],
+            categoryId: 'navigation'
+        });
+    }
+}
+
+const COMMAND_NAME = 'toggleFullscreen';
+/**
+ * A plugin registering the fullscreen mode buttons.
+ */ class FullscreenUI extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            FullscreenEditing
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'FullscreenUI';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('fullscreen', ()=>this._createButton(ButtonView));
+        editor.ui.componentFactory.add('menuBar:fullscreen', ()=>this._createButton(MenuBarMenuListItemButtonView));
+    }
+    /**
+	 * Creates a button that toggles the fullscreen mode.
+	 */ _createButton(ButtonClass) {
+        const editor = this.editor;
+        const t = editor.t;
+        const command = editor.commands.get(COMMAND_NAME);
+        const view = new ButtonClass(editor.locale);
+        view.set({
+            isToggleable: true
+        });
+        view.bind('isEnabled').to(command, 'isEnabled');
+        view.bind('isOn').to(command, 'value');
+        if (view instanceof MenuBarMenuListItemButtonView) {
+            view.set({
+                role: 'menuitemcheckbox',
+                label: t('Fullscreen mode')
+            });
+        } else {
+            view.bind('icon').to(command, 'value', (value)=>value ? IconFullscreenLeave : IconFullscreenEnter);
+            view.bind('label').to(command, 'value', (value)=>value ? t('Leave fullscreen mode') : t('Enter fullscreen mode'));
+            view.set({
+                tooltip: true
+            });
+        }
+        this.listenTo(view, 'execute', ()=>{
+            editor.execute(COMMAND_NAME);
+            editor.editing.view.focus();
+        });
+        return view;
+    }
+}
+
+/**
+ * The fullscreen mode feature.
+ */ class Fullscreen extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            FullscreenEditing,
+            FullscreenUI
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'Fullscreen';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+}
+
+export { Fullscreen, FullscreenEditing, FullscreenUI };
+//# sourceMappingURL=index.js.map