@ckeditor/ckeditor5-fullscreen 47.6.1 → 48.0.0-alpha.1

package/src/handlers/classiceditorhandler.js

@@ -1,60 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module fullscreen/handlers/classiceditorhandler
- */
-import { MenuBarView } from 'ckeditor5/src/ui.js';
-import { FullscreenAbstractEditorHandler } from './abstracteditorhandler.js';
-/**
- * The classic editor fullscreen mode handler.
- */
-export class FullscreenClassicEditorHandler extends FullscreenAbstractEditorHandler {
-    /**
-     * 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;
-        // 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');
-        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` 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);
-                editorUIView.menuBarView.render();
-                editorUI.initMenuBar(editorUIView.menuBarView);
-            }
-            this.moveToFullscreen(editorUIView.menuBarView.element, 'menu-bar');
-        }
-        return this.getWrapper();
-    }
-}

package/src/handlers/decouplededitorhandler.js

@@ -1,38 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { FullscreenAbstractEditorHandler } from './abstracteditorhandler.js';
-/**
- * The decoupled editor fullscreen mode handler.
- */
-export class FullscreenDecoupledEditorHandler extends FullscreenAbstractEditorHandler {
-    /**
-     * 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() {
-        // 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');
-        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();
-    }
-}

package/src/index.js

@@ -1,15 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module fullscreen
- */
-export { Fullscreen } from './fullscreen.js';
-export { FullscreenEditing } from './fullscreenediting.js';
-export { FullscreenUI } from './fullscreenui.js';
-export { FullscreenCommand } from './fullscreencommand.js';
-export { FullscreenAbstractEditorHandler } from './handlers/abstracteditorhandler.js';
-export { FullscreenClassicEditorHandler } from './handlers/classiceditorhandler.js';
-export { FullscreenDecoupledEditorHandler } from './handlers/decouplededitorhandler.js';
-import './augmentation.js';

package/theme/fullscreen.css

@@ -1,283 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/* Increase z-index of everything to make sure nothing sticks in front of the editor.
-Disable scrollbars that can be present due to the rest of the website content. */
-html.ck-fullscreen,
-body.ck-fullscreen {
-	--ck-z-fullscreen: 10000;
-
-	overflow: hidden;
-
-	--ck-z-default: calc(var(--ck-z-fullscreen) + 1);
-	--ck-z-panel: calc(var(--ck-z-default) + 999);
-	--ck-z-dialog: 100000;
-
-	/* CKBox wrappers have z-index of 9999, let's bump them over the dialog's to ensure visibility like outside fullscreen mode. */
-	& .ckbox-reset:not(#n)>.ckbox--dialog {
-		--ckbox-z-index-root: calc(var(--ck-z-dialog) + 1);
-	}
-
-	& .ckbox:not(#n) .ckbox-img-editor {
-		--ckbox-z-index-preview: calc(var(--ck-z-dialog) + 1);
-	}
-
-	& .ck-pagination-view-line {
-		z-index: calc(var(--ck-z-fullscreen) + 1);
-	}
-
-	& .page-break__label {
-		/* Needs to be higher than for .ck-pagination-view-line to be displayed on top of the line. */
-		z-index: calc(var(--ck-z-fullscreen) + 2);
-	}
-}
-
-/*
-Fullscreen layout:
-
-<div class="ck ck-fullscreen__main-wrapper">
-	<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>
-		<div class="ck ck-fullscreen__editable" data-ck-fullscreen="editable"></div>
-		<div class="ck ck-fullscreen__sidebar ck-fullscreen__right-sidebar" data-ck-fullscreen="right-sidebar"></div>
-		<div class="ck ck-fullscreen__right-edge" data-ck-fullscreen="right-edge"></div>
-	</div>
-	<div class="ck ck-fullscreen__bottom-wrapper">
-		<div class="ck ck-fullscreen__body-wrapper" data-ck-fullscreen="body-wrapper"></div>
-	</div>
-</div>
-*/
-
-.ck.ck-fullscreen__main-wrapper {
-	/* `position: fixed` prevents the overscroll on macos that would happen with `position: absolute`. */
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: var(--ck-z-fullscreen);
-	background: var(--ck-color-base-foreground);
-	display: flex;
-	flex-direction: column;
-
-	& .ck.ck-revision-history-ui__changes-navigation {
-		margin-top: 0px;
-		margin-bottom: 0px;
-	}
-}
-
-/* If the fullscreen container is not directly in the body, we need to make sure it's positioned absolutely. */
-:not(body> .ck-fullscreen__main-wrapper).ck-fullscreen__main-wrapper {
-	position: absolute;
-
-	& .ck-fullscreen__top-wrapper {
-		border-top: 1px solid var(--ck-color-base-border);
-		border-left: 1px solid var(--ck-color-base-border);
-		border-right: 1px solid var(--ck-color-base-border);
-		border-radius: var(--ck-border-radius) 0;
-	}
-}
-
-.ck-fullscreen__menu-bar .ck.ck-menu-bar {
-	border: none;
-}
-
-.ck.ck-fullscreen__toolbar .ck-toolbar {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-}
-
-.ck-fullscreen__main-wrapper .ck-fullscreen__editable-wrapper {
-	--ck-fullscreen-editor-top-margin: 28px;
-	--ck-fullscreen-editor-bottom-margin: 28px;
-	display: flex;
-	justify-content: flex-start;
-	overflow: auto;
-	max-height: 100%;
-}
-
-.ck-fullscreen__main-wrapper .ck-fullscreen__editable {
-	margin-top: var(--ck-fullscreen-editor-top-margin);
-	height: 100%;
-	margin-left: auto;
-
-	&::after {
-		content: '';
-		display: block;
-		height: var(--ck-fullscreen-editor-bottom-margin);
-	}
-}
-
-.ck-fullscreen__main-wrapper .ck-fullscreen__editable .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
-	box-sizing: border-box;
-	/* Make sure the border is taken into account. */
-	width: calc(210mm + 2px);
-	/* Make sure the border is taken into account. */
-	max-width: calc(210mm + 2px);
-	min-height: 297mm;
-	height: fit-content;
-	/* Reset margins that may be present on editable. We add them in other places. */
-	margin: 0;
-	padding: 20mm 12mm;
-	border: 1px var(--ck-color-base-border) solid;
-	background: hsl(0, 0%, 100%);
-	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
-}
-
-.ck-fullscreen__main-wrapper .ck-fullscreen__editable .ck-source-editing-area {
-	width: calc(210mm + 2px);
-}
-
-.ck-fullscreen__sidebar {
-	width: 270px;
-	margin-top: var(--ck-fullscreen-editor-top-margin);
-	margin-left: 10px;
-}
-
-.ck-fullscreen__left-sidebar {
-	font-family: Helvetica, Arial, sans-serif;
-	--ck-user-avatar-size: 28px;
-	position: sticky;
-	align-self: flex-start;
-	top: 0;
-	height: 100%;
-	background-color: transparent;
-	margin-top: 0px;
-	margin-right: 10px;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-
-	& .ck-button.ck-fullscreen__left-sidebar-toggle-button {
-		--ck-icon-size: 20px;
-		--ck-ui-component-min-height: 0px;
-
-		align-self: flex-start;
-		padding-top: 0;
-		margin-top: var(--ck-fullscreen-editor-top-margin);
-		margin-bottom: var(--ck-spacing-large);
-		opacity: 0.5;
-		border-radius: 100%;
-	}
-
-	> .ck-fullscreen__left-sidebar-sticky {
-		/* Set minimal width if there is any item in the sidebar. */
-		min-width: 270px;
-
-		&:first-child {
-			padding-top: var(--ck-fullscreen-editor-top-margin);
-		}
-	}
-
-	&.ck-fullscreen__left-sidebar--collapsed {
-		width: 65px;
-
-		> :not(.ck-fullscreen__left-sidebar-toggle-button) {
-			display: none;
-		}
-	}
-}
-
-.ck-fullscreen__left-sidebar .ck.ck-presence-list--collapsed {
-	--ck-user-avatar-size: 32px;
-}
-
-.ck-fullscreen__left-sidebar .ck-user {
-	font-size: 0.85em;
-}
-
-.ck-fullscreen__left-sidebar .ck-presence-list__users-counter__text {
-	font-size: 0.85em;
-}
-
-.ck-fullscreen__left-sidebar-item {
-	padding: var(--ck-spacing-medium);
-	margin-bottom: var(--ck-spacing-medium);
-
-	/* First header should not have top padding. */
-	&:first-child {
-		padding-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}
-
-.ck-fullscreen__left-sidebar-header {
-	--ck-fullscreen-presence-list-header-font-size: 0.875em;
-	font-size: var(--ck-fullscreen-presence-list-header-font-size);
-	font-weight: bold;
-	color: var(--ck-document-outline-item-default-color);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.ck-fullscreen__left-sidebar--sticky {
-	position: sticky;
-	top: 0;
-
-	& > :first-child {
-		padding-top: 0;
-	}
-}
-
-.ck-fullscreen__presence-list {
-	margin-top: var(--ck-spacing-medium);
-}
-
-.ck-fullscreen__left-sidebar-item--no-margin {
-	margin: 0;
-}
-
-.ck-fullscreen__left-sidebar .ck.ck-document-outline {
-	padding-top: 0;
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.ck-fullscreen__document-outline-wrapper {
-	padding-top: 0;
-	overflow-y: auto;
-}
-
-.ck-fullscreen__sidebar.ck-fullscreen__right-sidebar {
-	margin-top: var(--ck-fullscreen-editor-top-margin);
-	margin-right: auto;
-
-	&:not(.ck-fullscreen__right-sidebar--collapsed) > :first-child {
-		/* Set minimal width if there is any item in the sidebar. */
-		min-width: 270px;
-	}
-
-	&.ck-fullscreen__right-sidebar--collapsed {
-		width: 65px;
-
-		& > :first-child {
-			min-width: 65px;
-		}
-	}
-}
-
-.ck.ck-fullscreen__right-edge {
-	position: sticky;
-	top: 0;
-	margin-top: 0;
-	margin-left: 10px;
-
-	& > :first-child {
-		border-top: none;
-		border-bottom: none;
-		border-right: none;
-		height: 100%;
-		width: 495px;
-	}
-}