@ckeditor/ckeditor5-fullscreen 45.1.0 → 45.2.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-fullscreen",
-  "version": "45.1.0",
+  "version": "45.2.0-alpha.0",
   "description": "Fullscreen mode feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,13 +13,13 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "45.1.0",
-    "@ckeditor/ckeditor5-editor-decoupled": "45.1.0",
-    "@ckeditor/ckeditor5-icons": "45.1.0",
-    "@ckeditor/ckeditor5-ui": "45.1.0",
-    "@ckeditor/ckeditor5-utils": "45.1.0",
-    "ckeditor5": "45.1.0"
+    "@ckeditor/ckeditor5-core": "45.2.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-classic": "45.2.0-alpha.0",
+    "@ckeditor/ckeditor5-editor-decoupled": "45.2.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "45.2.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "45.2.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "45.2.0-alpha.0",
+    "ckeditor5": "45.2.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/handlers/abstracteditorhandler.js

@@ -175,9 +175,7 @@ export default class AbstractEditorHandler {
 					<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__sidebar ck-fullscreen__left-sidebar" data-ck-fullscreen="left-sidebar"></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>
@@ -372,6 +370,12 @@ export default class AbstractEditorHandler {
 			<div class="ck ck-fullscreen__presence-list" data-ck-fullscreen="presence-list"></div>
 		`;
         presenceListElement.firstElementChild.innerText = t('Connected users');
+        if (!document.querySelector('[data-ck-fullscreen="left-sidebar-sticky"]')) {
+            document.querySelector('[data-ck-fullscreen="left-sidebar"]').appendChild(createElement(document, 'div', {
+                class: 'ck ck-fullscreen__left-sidebar-sticky',
+                'data-ck-fullscreen': 'left-sidebar-sticky'
+            }));
+        }
         document.querySelector('[data-ck-fullscreen="left-sidebar-sticky"]').appendChild(presenceListElement);
         const presenceListUI = this._editor.plugins.get('PresenceListUI');
         this.moveToFullscreen(presenceListUI.view.element, 'presence-list');
@@ -396,6 +400,12 @@ export default class AbstractEditorHandler {
         documentOutlineBodyWrapper.innerHTML = `
 			<div class="ck ck-fullscreen__document-outline" data-ck-fullscreen="document-outline"></div>
 		`;
+        if (!document.querySelector('[data-ck-fullscreen="left-sidebar-sticky"]')) {
+            document.querySelector('[data-ck-fullscreen="left-sidebar"]').appendChild(createElement(document, 'div', {
+                class: 'ck ck-fullscreen__left-sidebar-sticky',
+                'data-ck-fullscreen': 'left-sidebar-sticky'
+            }));
+        }
         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');

package/theme/fullscreen.css

@@ -74,12 +74,25 @@ Fullscreen layout:
 /* 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;
@@ -89,17 +102,6 @@ Fullscreen layout:
 	max-height: 100%;
 }
 
-.ck-fullscreen__sidebar {
-	width: 300px;
-	margin-top: var(--ck-fullscreen-editor-top-margin);
-	margin-left: 10px;
-	flex-shrink: 0;
-}
-
-.ck-fullscreen__sidebar[data-ck-fullscreen="right-sidebar"] {
-	margin-right: auto;
-}
-
 .ck-fullscreen__main-wrapper .ck-fullscreen__editable {
 	margin-top: var(--ck-fullscreen-editor-top-margin);
 	height: 100%;
@@ -114,11 +116,14 @@ Fullscreen layout:
 
 .ck-fullscreen__main-wrapper .ck-fullscreen__editable .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
 	box-sizing: border-box;
-	width: calc(210mm + 2px); /* Make sure the border is taken into account. */
-	max-width: calc(210mm + 2px); /* Make sure the border is taken into account. */
+	/* 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;
-	margin: 0; /* Reset margins that may be present on editable. We add them in other places. */
+	/* 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%);
@@ -129,6 +134,12 @@ Fullscreen layout:
 	width: calc(210mm + 2px);
 }
 
+.ck-fullscreen__sidebar {
+	width: 300px;
+	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;
@@ -141,16 +152,19 @@ Fullscreen layout:
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
+
+	> :first-child {
+		/* Set minimal width if there is any item in the sidebar. */
+		min-width: 300px;
+		/* We have to use padding-top instead of margin-top because margin is scrollable. */
+		padding-top: var(--ck-fullscreen-editor-top-margin);
+	}
 }
 
 .ck-fullscreen__left-sidebar .ck.ck-presence-list--collapsed {
 	--ck-user-avatar-size: 32px;
 }
 
-.ck-fullscreen__left-sidebar> :first-child {
-	padding-top: var(--ck-fullscreen-editor-top-margin);
-}
-
 .ck-fullscreen__left-sidebar .ck-user {
 	font-size: 0.85em;
 }
@@ -162,10 +176,15 @@ Fullscreen layout:
 .ck-fullscreen__left-sidebar-item {
 	padding: var(--ck-spacing-medium);
 	margin-bottom: var(--ck-spacing-medium);
-}
 
-.ck-fullscreen__left-sidebar-item:last-child {
-	margin-bottom: 0;
+	/* First header should not have top padding. */
+	&:first-child {
+		padding-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }
 
 .ck-fullscreen__left-sidebar-header {
@@ -182,7 +201,7 @@ Fullscreen layout:
 	position: sticky;
 	top: 0;
 
-	&> :first-child {
+	& > :first-child {
 		padding-top: 0;
 	}
 }
@@ -205,3 +224,13 @@ Fullscreen layout:
 	padding-top: 0;
 	overflow-y: auto;
 }
+
+.ck-fullscreen__sidebar.ck-fullscreen__right-sidebar {
+	margin-top: var(--ck-fullscreen-editor-top-margin);
+	margin-right: auto;
+
+	&> :first-child {
+		/* Set minimal width if there is any item in the sidebar. */
+		min-width: 300px;
+	}
+}