@ckeditor/ckeditor5-widget 0.0.0-nightly-next-20250226.0 → 0.0.0-nightly-20250227.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "0.0.0-nightly-next-20250226.0",
+  "version": "0.0.0-nightly-20250227.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,14 +12,13 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-next-20250226.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-next-20250226.0",
-    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-next-20250226.0",
-    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20250226.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20250226.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20250226.0",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-next-20250226.0",
-    "es-toolkit": "1.32.0"
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250227.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20250227.0",
+    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-20250227.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250227.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250227.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250227.0",
+    "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/highlightstack.js

@@ -18,7 +18,10 @@ import { EmitterMixin } from '@ckeditor/ckeditor5-utils';
  * This way, highlight will be applied with the same rules it is applied on texts.
  */
 export default class HighlightStack extends /* #__PURE__ */ EmitterMixin() {
-    _stack = [];
+    constructor() {
+        super(...arguments);
+        this._stack = [];
+    }
     /**
      * Adds highlight descriptor to the stack.
      *

package/src/utils.d.ts

@@ -2,6 +2,9 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+/**
+ * @module widget/utils
+ */
 import { Rect, type GetCallback } from '@ckeditor/ckeditor5-utils';
 import { type HighlightDescriptor, type MapperViewToModelPositionEvent, type DocumentSelection, type DowncastWriter, type Model, type Range, type Selection, type ViewEditableElement, type ViewElement, type ViewTypeCheckable } from '@ckeditor/ckeditor5-engine';
 /**

package/src/utils.js

@@ -5,11 +5,11 @@
 /**
  * @module widget/utils
  */
-import { IconDragHandle } from '@ckeditor/ckeditor5-icons';
 import { Rect, CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
 import { IconView } from '@ckeditor/ckeditor5-ui';
 import HighlightStack from './highlightstack.js';
 import { getTypeAroundFakeCaretPosition } from './widgettypearound/utils.js';
+import dragHandleIcon from '../theme/icons/drag-handle.svg';
 /**
  * CSS class added to each widget element.
  */
@@ -336,7 +336,7 @@ function addSelectionHandle(widgetElement, writer) {
         const domElement = this.toDomElement(domDocument);
         // Use the IconView from the ui library.
         const icon = new IconView();
-        icon.set('content', IconDragHandle);
+        icon.set('content', dragHandleIcon);
         // Render the icon view right away to append its #element to the selectionHandle DOM element.
         icon.render();
         domElement.appendChild(icon.element);

package/src/widget.js

@@ -27,10 +27,13 @@ import '../theme/widget.css';
  * * The mouse and keyboard events handling on and around widget elements.
  */
 export default class Widget extends Plugin {
-    /**
-     * Holds previously selected widgets.
-     */
-    _previouslySelected = new Set();
+    constructor() {
+        super(...arguments);
+        /**
+         * Holds previously selected widgets.
+         */
+        this._previouslySelected = new Set();
+    }
     /**
      * @inheritDoc
      */

package/src/widgetresize/resizer.js

@@ -13,33 +13,15 @@ import SizeView from './sizeview.js';
  * Represents a resizer for a single resizable object.
  */
 export default class Resizer extends /* #__PURE__ */ ObservableMixin() {
-    /**
-     * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
-     *
-     * Note that a new state is created for each resize transaction.
-     */
-    _state;
-    /**
-     * A view displaying the proposed new element size during the resizing.
-     */
-    _sizeView;
-    /**
-     * Options passed to the {@link #constructor}.
-     */
-    _options;
-    /**
-     * A wrapper that is controlled by the resizer. This is usually a widget element.
-     */
-    _viewResizerWrapper = null;
-    /**
-     * The width of the resized {@link module:widget/widgetresize~ResizerOptions#viewElement viewElement} before the resizing started.
-     */
-    _initialViewWidth;
     /**
      * @param options Resizer options.
      */
     constructor(options) {
         super();
+        /**
+         * A wrapper that is controlled by the resizer. This is usually a widget element.
+         */
+        this._viewResizerWrapper = null;
         this._options = options;
         this.set('isEnabled', true);
         this.set('isSelected', false);

package/src/widgetresize/resizerstate.js

@@ -11,42 +11,6 @@ import { calculateResizeHostPercentageWidth } from '../utils.js';
  * Stores the internal state of a single resizable object.
  */
 export default class ResizeState extends /* #__PURE__ */ ObservableMixin() {
-    /**
-     * The reference point of the resizer where the dragging started. It is used to measure the distance the user cursor
-     * traveled, so how much the image should be enlarged.
-     * This information is only known after the DOM was rendered, so it will be updated later.
-     *
-     * @internal
-     */
-    _referenceCoordinates;
-    /**
-     * Resizer options.
-     */
-    _options;
-    /**
-     * The original width (pixels) of the resized object when the resize process was started.
-     *
-     * @readonly
-     */
-    _originalWidth;
-    /**
-     * The original height (pixels) of the resized object when the resize process was started.
-     *
-     * @readonly
-     */
-    _originalHeight;
-    /**
-     * The original width (percents) of the resized object when the resize process was started.
-     *
-     * @readonly
-     */
-    _originalWidthPercents;
-    /**
-     * A width to height ratio of the resized image.
-     *
-     * @readonly
-     */
-    _aspectRatio;
     /**
      * @param options Resizer options.
      */

package/src/widgetresize.js

@@ -9,7 +9,7 @@ import Resizer from './widgetresize/resizer.js';
 import { Plugin } from '@ckeditor/ckeditor5-core';
 import { MouseObserver } from '@ckeditor/ckeditor5-engine';
 import { DomEmitterMixin, global } from '@ckeditor/ckeditor5-utils';
-import { throttle } from 'es-toolkit/compat';
+import { throttle } from 'lodash-es';
 import '../theme/widgetresize.css';
 /**
  * The widget resize feature plugin.
@@ -17,12 +17,13 @@ import '../theme/widgetresize.css';
  * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
  */
 export default class WidgetResize extends Plugin {
-    /**
-     * A map of resizers created using this plugin instance.
-     */
-    _resizers = new Map();
-    _observer;
-    _redrawSelectedResizerThrottled;
+    constructor() {
+        super(...arguments);
+        /**
+         * A map of resizers created using this plugin instance.
+         */
+        this._resizers = new Map();
+    }
     /**
      * @inheritDoc
      */

package/src/widgettoolbarrepository.d.ts

@@ -8,7 +8,6 @@
 import { Plugin, type ToolbarConfigItem } from '@ckeditor/ckeditor5-core';
 import type { ViewDocumentSelection, ViewElement } from '@ckeditor/ckeditor5-engine';
 import { ContextualBalloon } from '@ckeditor/ckeditor5-ui';
-import { type PositioningFunction } from '@ckeditor/ckeditor5-utils';
 /**
  * Widget toolbar repository plugin. A central point for registering widget toolbars. This plugin handles the whole
  * toolbar rendering process and exposes a concise API.
@@ -72,12 +71,11 @@ export default class WidgetToolbarRepository extends Plugin {
      * @param options.getRelatedElement Callback which returns an element the toolbar should be attached to.
      * @param options.balloonClassName CSS class for the widget balloon.
      */
-    register(toolbarId: string, { ariaLabel, items, getRelatedElement, balloonClassName, positions }: {
+    register(toolbarId: string, { ariaLabel, items, getRelatedElement, balloonClassName }: {
         ariaLabel?: string;
         items: Array<ToolbarConfigItem>;
         getRelatedElement: (selection: ViewDocumentSelection) => (ViewElement | null);
         balloonClassName?: string;
-        positions?: ReadonlyArray<PositioningFunction>;
     }): void;
     /**
      * Iterates over stored toolbars and makes them visible or hidden.

package/src/widgettoolbarrepository.js

@@ -36,11 +36,13 @@ import { isWidget } from './utils.js';
  * ```
  */
 export default class WidgetToolbarRepository extends Plugin {
-    /**
-     * A map of toolbar definitions.
-     */
-    _toolbarDefinitions = new Map();
-    _balloon;
+    constructor() {
+        super(...arguments);
+        /**
+         * A map of toolbar definitions.
+         */
+        this._toolbarDefinitions = new Map();
+    }
     /**
      * @inheritDoc
      */
@@ -105,7 +107,7 @@ export default class WidgetToolbarRepository extends Plugin {
      * @param options.getRelatedElement Callback which returns an element the toolbar should be attached to.
      * @param options.balloonClassName CSS class for the widget balloon.
      */
-    register(toolbarId, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container', positions }) {
+    register(toolbarId, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container' }) {
         // Trying to register a toolbar without any item.
         if (!items.length) {
             /**
@@ -143,7 +145,6 @@ export default class WidgetToolbarRepository extends Plugin {
             getRelatedElement,
             balloonClassName,
             itemsConfig: items,
-            positions,
             initialized: false
         };
         // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
@@ -213,7 +214,7 @@ export default class WidgetToolbarRepository extends Plugin {
      */
     _showToolbar(toolbarDefinition, relatedElement) {
         if (this._isToolbarVisible(toolbarDefinition)) {
-            repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
+            repositionContextualBalloon(this.editor, relatedElement);
         }
         else if (!this._isToolbarInBalloon(toolbarDefinition)) {
             if (!toolbarDefinition.initialized) {
@@ -222,7 +223,7 @@ export default class WidgetToolbarRepository extends Plugin {
             }
             this._balloon.add({
                 view: toolbarDefinition.view,
-                position: getBalloonPositionData(this.editor, relatedElement, toolbarDefinition.positions),
+                position: getBalloonPositionData(this.editor, relatedElement),
                 balloonClassName: toolbarDefinition.balloonClassName
             });
             // Update toolbar position each time stack with toolbar view is switched to visible.
@@ -233,7 +234,7 @@ export default class WidgetToolbarRepository extends Plugin {
                 for (const definition of this._toolbarDefinitions.values()) {
                     if (this._isToolbarVisible(definition)) {
                         const relatedElement = definition.getRelatedElement(this.editor.editing.view.document.selection);
-                        repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
+                        repositionContextualBalloon(this.editor, relatedElement);
                     }
                 }
             });
@@ -246,17 +247,17 @@ export default class WidgetToolbarRepository extends Plugin {
         return this._balloon.hasView(toolbar.view);
     }
 }
-function repositionContextualBalloon(editor, relatedElement, positions) {
+function repositionContextualBalloon(editor, relatedElement) {
     const balloon = editor.plugins.get('ContextualBalloon');
-    const position = getBalloonPositionData(editor, relatedElement, positions);
+    const position = getBalloonPositionData(editor, relatedElement);
     balloon.updatePosition(position);
 }
-function getBalloonPositionData(editor, relatedElement, positions) {
+function getBalloonPositionData(editor, relatedElement) {
     const editingView = editor.editing.view;
     const defaultPositions = BalloonPanelView.defaultPositions;
     return {
         target: editingView.domConverter.mapViewToDom(relatedElement),
-        positions: positions || [
+        positions: [
             defaultPositions.northArrowSouth,
             defaultPositions.northArrowSouthWest,
             defaultPositions.northArrowSouthEast,

package/src/widgettypearound/widgettypearound.js

@@ -7,17 +7,17 @@
  * @module widget/widgettypearound/widgettypearound
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { IconReturnArrow } from '@ckeditor/ckeditor5-icons';
 import { Template } from '@ckeditor/ckeditor5-ui';
 import { Enter } from '@ckeditor/ckeditor5-enter';
 import { Delete } from '@ckeditor/ckeditor5-typing';
 import { env, isForwardArrowKeyCode } from '@ckeditor/ckeditor5-utils';
 import { isTypeAroundWidget, getClosestTypeAroundDomButton, getTypeAroundButtonPosition, getClosestWidgetViewElement, getTypeAroundFakeCaretPosition, TYPE_AROUND_SELECTION_ATTRIBUTE } from './utils.js';
 import { isWidget } from '../utils.js';
+import returnIcon from '../../theme/icons/return-arrow.svg';
 import '../../theme/widgettypearound.css';
 const POSSIBLE_INSERTION_POSITIONS = ['before', 'after'];
 // Do the SVG parsing once and then clone the result <svg> DOM element for each new button.
-const RETURN_ARROW_ICON_ELEMENT = new DOMParser().parseFromString(IconReturnArrow, 'image/svg+xml').firstChild;
+const RETURN_ARROW_ICON_ELEMENT = new DOMParser().parseFromString(returnIcon, 'image/svg+xml').firstChild;
 const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
 /**
  * A plugin that allows users to type around widgets where normally it is impossible to place the caret due
@@ -30,12 +30,15 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
  * in it so that users can type (or insert content, paste, etc.) straight away.
  */
 export default class WidgetTypeAround extends Plugin {
-    /**
-     * A reference to the model widget element that has the fake caret active
-     * on either side of it. It is later used to remove CSS classes associated with the fake caret
-     * when the widget no longer needs it.
-     */
-    _currentFakeCaretModelElement = null;
+    constructor() {
+        super(...arguments);
+        /**
+         * A reference to the model widget element that has the fake caret active
+         * on either side of it. It is later used to remove CSS classes associated with the fake caret
+         * when the widget no longer needs it.
+         */
+        this._currentFakeCaretModelElement = null;
+    }
     /**
      * @inheritDoc
      */

package/theme/icons/drag-handle.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"/><path fill-opacity=".256" d="M1 1h14v14H1z"/><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"/><path fill-opacity=".254" d="M1 1h14v14H1z"/></g></svg>

package/theme/icons/return-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"/></svg>