@ckeditor/ckeditor5-fullscreen 45.1.0-alpha.4 → 45.1.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-fullscreen",
-  "version": "45.1.0-alpha.4",
+  "version": "45.1.0-alpha.6",
   "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-alpha.4",
-    "@ckeditor/ckeditor5-editor-classic": "45.1.0-alpha.4",
-    "@ckeditor/ckeditor5-editor-decoupled": "45.1.0-alpha.4",
-    "@ckeditor/ckeditor5-icons": "45.1.0-alpha.4",
-    "@ckeditor/ckeditor5-ui": "45.1.0-alpha.4",
-    "@ckeditor/ckeditor5-utils": "45.1.0-alpha.4",
-    "ckeditor5": "45.1.0-alpha.4"
+    "@ckeditor/ckeditor5-core": "45.1.0-alpha.6",
+    "@ckeditor/ckeditor5-editor-classic": "45.1.0-alpha.6",
+    "@ckeditor/ckeditor5-editor-decoupled": "45.1.0-alpha.6",
+    "@ckeditor/ckeditor5-icons": "45.1.0-alpha.6",
+    "@ckeditor/ckeditor5-ui": "45.1.0-alpha.6",
+    "@ckeditor/ckeditor5-utils": "45.1.0-alpha.6",
+    "ckeditor5": "45.1.0-alpha.6"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/handlers/abstracteditorhandler.d.ts

@@ -165,7 +165,7 @@ export default class AbstractEditorHandler {
      */
     private _restoreDocumentOutlineDefaultContainer;
     /**
-     * Stores the current state of the annotations UIs to restore it when leaving fullscreen mode.
+     * Stores the current state of the annotations UIs to restore it when leaving fullscreen mode and switches the UI to the wide sidebar.
      */
     private _overrideAnnotationsUIs;
     /**

package/src/handlers/abstracteditorhandler.js

@@ -412,18 +412,13 @@ export default class AbstractEditorHandler {
         documentOutlineUI.view.documentOutlineContainer = documentOutlineUI.view.element;
     }
     /**
-     * Stores the current state of the annotations UIs to restore it when leaving fullscreen mode.
+     * Stores the current state of the annotations UIs to restore it when leaving fullscreen mode and switches the UI to the wide sidebar.
      */
     // 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.
@@ -432,20 +427,43 @@ export default class AbstractEditorHandler {
             }
         }
         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'));
-        }
-        // If no filter is defined for `wideSidebar`, read the filters for the active display(s) mode and apply them.
-        // It's possible there are filters for both `narrowSidebar` and `inline` modes, so display annotations that match any of them.
-        else if (annotationsFilters.size) {
-            annotationsUIs.activate('wideSidebar', (annotation) => [...annotationsFilters.values()].some(filter => filter(annotation)));
-        }
-        // If no filters are defined for the active display mode(s), simply display all annotations in the wide sidebar.
+        const sidebarPlugin = this._editor.plugins.get('Sidebar');
+        // There are two scenarios to consider: if wide sidebar is already used and when it's not.
+        // If sidebar container is not set (e.g. in case of inline annotations), we need to:
+        // 1. Set the sidebar container in the sidebar plugin.
+        // 2. Activate the wide sidebar UI.
+        // 3. Move the sidebar element to the fullscreen mode.
+        if (!sidebarPlugin.container) {
+            sidebarPlugin.setContainer(this.getWrapper().querySelector('[data-ck-fullscreen="right-sidebar"]'));
+            switchToWideSidebar();
+            this.moveToFullscreen(sidebarPlugin.container.firstElementChild, 'right-sidebar');
+        }
+        // If sidebar was already used:
+        // 1. Switch to the wide sidebar UI (it's possibly switch back but we deactivated all UIs before).
+        // 2. Move the sidebar element to the fullscreen mode.
+        // 3. Set the sidebar container in the sidebar plugin.
+        // If we set the container before moving the sidebar, we lose the reference to the original sidebar container and it won't be
+        // moved back to the correct position after leaving fullscreen.
         else {
-            annotationsUIs.switchTo('wideSidebar');
+            switchToWideSidebar();
+            this.moveToFullscreen(sidebarPlugin.container.firstElementChild, 'right-sidebar');
+            sidebarPlugin.setContainer(this.getWrapper().querySelector('[data-ck-fullscreen="right-sidebar"]'));
+        }
+        function switchToWideSidebar() {
+            // First, check if someone has a filter defined for `wideSidebar`. If so, retrieve and apply it in fullscreen.
+            if (annotationsFilters.has('wideSidebar')) {
+                annotationsUIs.activate('wideSidebar', annotationsFilters.get('wideSidebar'));
+            }
+            // If no filter is defined for `wideSidebar`, read the filters for the active display(s) mode and apply them on wide sidebar.
+            // It's possible there are filters for both `narrowSidebar` and `inline` modes, so display annotations that match any of them.
+            else if (annotationsFilters.size) {
+                annotationsUIs.activate('wideSidebar', (annotation) => [...annotationsFilters.values()].some(filter => filter(annotation)));
+            }
+            // If no filters are defined for the active display mode(s), simply display all annotations in the wide sidebar.
+            else {
+                annotationsUIs.switchTo('wideSidebar');
+            }
         }
-        this.moveToFullscreen(sidebarPlugin.container.firstElementChild, 'right-sidebar');
     }
     /**
      * Restores the saved state of the annotations UIs.
@@ -453,6 +471,12 @@ export default class AbstractEditorHandler {
     // Code coverage is provided in the commercial package repository as integration unit tests.
     /* istanbul ignore next -- @preserve */
     _restoreAnnotationsUIs() {
+        const sidebarPlugin = this._editor.plugins.get('Sidebar');
+        const sidebarContainer = sidebarPlugin.context.config.get('sidebar.container');
+        // If sidebar container was set initially, restore it to the original value from config.
+        if (sidebarContainer) {
+            sidebarPlugin.setContainer(sidebarContainer);
+        }
         const annotationsUIs = this._editor.plugins.get('AnnotationsUIs');
         annotationsUIs.deactivateAll();
         for (const [uiName, data] of [...this._annotationsUIsData]) {