@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 0.0.0-nightly-20240805.0 to 0.0.0-nightly-20240806.0

dist/index.d.ts

@@ -65,3 +65,3 @@ /**
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview.js';
-export { default as ContextualBalloon } from './panel/balloon/contextualballoon.js';
+export { default as ContextualBalloon, type ContextualBalloonGetPositionOptionsEvent } from './panel/balloon/contextualballoon.js';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview.js';
@@ -68,0 +68,0 @@ export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview.js';

dist/panel/balloon/contextualballoon.d.ts

@@ -17,3 +17,3 @@ /**
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import { FocusTracker, type Locale, type PositionOptions } from '@ckeditor/ckeditor5-utils';
+import { FocusTracker, type Locale, type PositionOptions, type DecoratedMethodEvent } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/panel/balloonrotator.css';
@@ -161,2 +161,7 @@ import '../../../theme/components/panel/fakepanel.css';
     /**
+     * Returns position options of the last view in the stack.
+     * This keeps the balloon in the same position when the view is changed.
+     */
+    getPositionOptions(): Partial<PositionOptions> | undefined;
+    /**
      * Shows the last view from the stack of a given ID.
@@ -203,9 +208,10 @@ */
     private _showView;
-    /**
-     * Returns position options of the last view in the stack.
-     * This keeps the balloon in the same position when the view is changed.
-     */
-    private _getBalloonPosition;
 }
 /**
+ * An event fired when the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon} is about to get the position of the balloon.
+ *
+ * @eventName ~ContextualBalloon#getPositionOptions
+ */
+export type ContextualBalloonGetPositionOptionsEvent = DecoratedMethodEvent<ContextualBalloon, 'getPositionOptions'>;
+/**
  * The configuration of the view.
@@ -212,0 +218,0 @@ */

dist/toolbar/balloon/balloontoolbar.d.ts

@@ -93,2 +93,7 @@ /**
     /**
+     * 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
@@ -95,0 +100,0 @@ * to the selection.

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "0.0.0-nightly-20240805.0",
+  "version": "0.0.0-nightly-20240806.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -15,4 +15,5 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240805.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240805.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240806.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240806.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240806.0",
     "color-convert": "2.0.1",
@@ -19,0 +20,0 @@ "color-parse": "1.4.2",

src/index.d.ts

@@ -61,3 +61,3 @@ /**
 export { default as BalloonPanelView } from './panel/balloon/balloonpanelview.js';
-export { default as ContextualBalloon } from './panel/balloon/contextualballoon.js';
+export { default as ContextualBalloon, type ContextualBalloonGetPositionOptionsEvent } from './panel/balloon/contextualballoon.js';
 export { default as StickyPanelView } from './panel/sticky/stickypanelview.js';
@@ -64,0 +64,0 @@ export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview.js';

src/panel/balloon/contextualballoon.d.ts

@@ -13,3 +13,3 @@ /**
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import { FocusTracker, type Locale, type PositionOptions } from '@ckeditor/ckeditor5-utils';
+import { FocusTracker, type Locale, type PositionOptions, type DecoratedMethodEvent } from '@ckeditor/ckeditor5-utils';
 import '../../../theme/components/panel/balloonrotator.css';
@@ -157,2 +157,7 @@ import '../../../theme/components/panel/fakepanel.css';
     /**
+     * Returns position options of the last view in the stack.
+     * This keeps the balloon in the same position when the view is changed.
+     */
+    getPositionOptions(): Partial<PositionOptions> | undefined;
+    /**
      * Shows the last view from the stack of a given ID.
@@ -199,9 +204,10 @@ */
     private _showView;
-    /**
-     * Returns position options of the last view in the stack.
-     * This keeps the balloon in the same position when the view is changed.
-     */
-    private _getBalloonPosition;
 }
 /**
+ * An event fired when the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon} is about to get the position of the balloon.
+ *
+ * @eventName ~ContextualBalloon#getPositionOptions
+ */
+export type ContextualBalloonGetPositionOptionsEvent = DecoratedMethodEvent<ContextualBalloon, 'getPositionOptions'>;
+/**
  * The configuration of the view.
@@ -208,0 +214,0 @@ */

src/panel/balloon/contextualballoon.js

@@ -92,2 +92,3 @@ /**
         };
+        this.decorate('getPositionOptions');
         this.set('visibleView', null);
@@ -231,6 +232,27 @@ this.set('_numberOfStacks', 0);
         }
-        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.
@@ -366,3 +388,3 @@ */
         this.visibleView = view;
-        this.view.pin(this._getBalloonPosition());
+        this.view.pin(this.getPositionOptions());
         this._fakePanelsView.updatePosition();
@@ -373,23 +395,2 @@ if (singleViewMode) {
     }
-    /**
-     * 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;
-    }
 }
@@ -396,0 +397,0 @@ /**

src/toolbar/balloon/balloontoolbar.d.ts

@@ -89,2 +89,7 @@ /**
     /**
+     * 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
@@ -91,0 +96,0 @@ * to the selection.

src/toolbar/balloon/balloontoolbar.js

@@ -14,2 +14,3 @@ /**
 import { FocusTracker, Rect, ResizeObserver, env, global, toUnit } from '@ckeditor/ckeditor5-utils';
+import { Observer } from '@ckeditor/ckeditor5-engine';
 import { debounce } from 'lodash-es';
@@ -53,7 +54,5 @@ const toPx = /* #__PURE__ */ toUnit('px');
         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.
@@ -193,2 +192,24 @@ editor.ui.addToolbar(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
@@ -195,0 +216,0 @@ * to the selection.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6348133

increased by0.1%

Lines of code

61625

increased by0.1%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@ckeditor/ckeditor5-engine@0.0.0-nightly-20240806.0

• + Added@ckeditor/ckeditor5-core@0.0.0-nightly-20240806.0(transitive)

• + Added@ckeditor/ckeditor5-engine@0.0.0-nightly-20240806.0(transitive)

• + Added@ckeditor/ckeditor5-utils@0.0.0-nightly-20240806.0(transitive)

• + Added@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240806.0(transitive)

• - Removed@ckeditor/ckeditor5-core@0.0.0-nightly-20240805.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@0.0.0-nightly-20240805.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@0.0.0-nightly-20240805.0(transitive)

• - Removed@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240805.0(transitive)

• Updated@ckeditor/ckeditor5-core@0.0.0-nightly-20240806.0

• Updated@ckeditor/ckeditor5-utils@0.0.0-nightly-20240806.0