@ckeditor/ckeditor5-ui 43.0.0 → 43.1.0-alpha.0

package/src/panel/balloon/contextualballoon.js

@@ -89,6 +89,7 @@ export default class ContextualBalloon extends Plugin {
             }
             return null;
         };
+        this.decorate('getPositionOptions');
         this.set('visibleView', null);
         this.set('_numberOfStacks', 0);
         this.set('_singleViewMode', false);
@@ -227,9 +228,30 @@ export default class ContextualBalloon extends Plugin {
         if (position) {
             this._visibleStack.get(this.visibleView).position = position;
         }
-        this.view.pin(this._getBalloonPosition());
+        this.view.pin(this.getPositionOptions());
         this._fakePanelsView.updatePosition();
     }
+    /**
+     * Returns position options of the last view in the stack.
+     * This keeps the balloon in the same position when the view is changed.
+     */
+    getPositionOptions() {
+        let position = Array.from(this._visibleStack.values()).pop().position;
+        if (position) {
+            // Use the default limiter if none has been specified.
+            if (!position.limiter) {
+                // Don't modify the original options object.
+                position = Object.assign({}, position, {
+                    limiter: this.positionLimiter
+                });
+            }
+            // Don't modify the original options object.
+            position = Object.assign({}, position, {
+                viewportOffsetConfig: this.editor.ui.viewportOffset
+            });
+        }
+        return position;
+    }
     /**
      * Shows the last view from the stack of a given ID.
      */
@@ -255,7 +277,6 @@ export default class ContextualBalloon extends Plugin {
     _createPanelView() {
         this._view = new BalloonPanelView(this.editor.locale);
         this.editor.ui.view.body.add(this._view);
-        this.editor.ui.focusTracker.add(this._view.element);
         this._rotatorView = this._createRotatorView();
         this._fakePanelsView = this._createFakePanelsView();
     }
@@ -361,33 +382,12 @@ export default class ContextualBalloon extends Plugin {
         this.view.withArrow = withArrow;
         this._rotatorView.showView(view);
         this.visibleView = view;
-        this.view.pin(this._getBalloonPosition());
+        this.view.pin(this.getPositionOptions());
         this._fakePanelsView.updatePosition();
         if (singleViewMode) {
             this._singleViewMode = true;
         }
     }
-    /**
-     * Returns position options of the last view in the stack.
-     * This keeps the balloon in the same position when the view is changed.
-     */
-    _getBalloonPosition() {
-        let position = Array.from(this._visibleStack.values()).pop().position;
-        if (position) {
-            // Use the default limiter if none has been specified.
-            if (!position.limiter) {
-                // Don't modify the original options object.
-                position = Object.assign({}, position, {
-                    limiter: this.positionLimiter
-                });
-            }
-            // Don't modify the original options object.
-            position = Object.assign({}, position, {
-                viewportOffsetConfig: this.editor.ui.viewportOffset
-            });
-        }
-        return position;
-    }
 }
 /**
  * Rotator view is a helper class for the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon ContextualBalloon}.

package/src/toolbar/balloon/balloontoolbar.d.ts

@@ -85,6 +85,11 @@ export default class BalloonToolbar extends Plugin {
      * Hides the toolbar.
      */
     hide(): void;
+    /**
+     * Add or remove editable elements to the focus tracker. It watches added and removed roots
+     * and adds or removes their editable elements to the focus tracker.
+     */
+    private _trackFocusableEditableElements;
     /**
      * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached
      * to the selection.

package/src/toolbar/balloon/balloontoolbar.js

@@ -11,6 +11,7 @@ import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
 import normalizeToolbarConfig from '../normalizetoolbarconfig.js';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';
+import { Observer } from '@ckeditor/ckeditor5-engine';
 import { debounce } from 'lodash-es';
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
@@ -49,11 +50,9 @@ export default class BalloonToolbar extends Plugin {
         this._balloonConfig = normalizeToolbarConfig(editor.config.get('balloonToolbar'));
         this.toolbarView = this._createToolbarView();
         this.focusTracker = new FocusTracker();
-        // Wait for the EditorUI#init. EditableElement is not available before.
-        editor.ui.once('ready', () => {
-            this.focusTracker.add(editor.ui.getEditableElement());
-            this.focusTracker.add(this.toolbarView.element);
-        });
+        // Track focusable elements in the toolbar and the editable elements.
+        this._trackFocusableEditableElements();
+        this.focusTracker.add(this.toolbarView.element);
         // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
         editor.ui.addToolbar(this.toolbarView, {
             beforeFocus: () => this.show(true),
@@ -187,6 +186,28 @@ export default class BalloonToolbar extends Plugin {
             this._balloon.remove(this.toolbarView);
         }
     }
+    /**
+     * Add or remove editable elements to the focus tracker. It watches added and removed roots
+     * and adds or removes their editable elements to the focus tracker.
+     */
+    _trackFocusableEditableElements() {
+        const { editor, focusTracker } = this;
+        const { editing } = editor;
+        editing.view.addObserver(class TrackEditableElements extends Observer {
+            /**
+             * @inheritDoc
+             */
+            observe(domElement) {
+                focusTracker.add(domElement);
+            }
+            /**
+             * @inheritDoc
+             */
+            stopObserving(domElement) {
+                focusTracker.remove(domElement);
+            }
+        });
+    }
     /**
      * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached
      * to the selection.

package/src/toolbar/block/blocktoolbar.js

@@ -183,7 +183,6 @@ export default class BlockToolbar extends Plugin {
         panelView.content.add(this.toolbarView);
         panelView.class = 'ck-toolbar-container';
         editor.ui.view.body.add(panelView);
-        editor.ui.focusTracker.add(panelView.element);
         // Close #panelView on `Esc` press.
         this.toolbarView.keystrokes.set('Esc', (evt, cancel) => {
             this._hidePanel(true);
@@ -218,7 +217,6 @@ export default class BlockToolbar extends Plugin {
             }
         });
         editor.ui.view.body.add(buttonView);
-        editor.ui.focusTracker.add(buttonView.element);
         return buttonView;
     }
     /**

package/theme/components/dropdown/menu/dropdownmenu.css

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-dropdown-menu-list__nested-menu {
+	display: block;
+}

package/theme/components/dropdown/menu/dropdownmenubutton.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-dropdown-menu-list__nested-menu__button > .ck-dropdown-menu-list__nested-menu__button__arrow {
+	pointer-events: none;
+	z-index: var(--ck-z-default);
+}

package/theme/components/dropdown/menu/dropdownmenulistitem.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/dropdown/menu/dropdownmenulistitembutton.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */

package/theme/components/dropdown/menu/dropdownmenupanel.css

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-dropdown-menu__nested-menu__panel {
+	position: absolute;
+	max-height: 314px; /* With the default settings, this is equal to 10 menu items. */
+	overflow-y: auto;
+	z-index: calc(var(--ck-z-panel) + 1);
+}