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

package/package.json

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

package/src/highlightstack.js

@@ -18,10 +18,7 @@ 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() {
-    constructor() {
-        super(...arguments);
-        this._stack = [];
-    }
+    _stack = [];
     /**
      * Adds highlight descriptor to the stack.
      *

package/src/utils.d.ts

@@ -2,9 +2,6 @@
  * @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', dragHandleIcon);
+        icon.set('content', IconDragHandle);
         // 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,13 +27,10 @@ import '../theme/widget.css';
  * * The mouse and keyboard events handling on and around widget elements.
  */
 export default class Widget extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * Holds previously selected widgets.
-         */
-        this._previouslySelected = new Set();
-    }
+    /**
+     * Holds previously selected widgets.
+     */
+    _previouslySelected = new Set();
     /**
      * @inheritDoc
      */

package/src/widgetresize/resizer.js

@@ -13,15 +13,33 @@ 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,6 +11,42 @@ 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 'lodash-es';
+import { throttle } from 'es-toolkit/compat';
 import '../theme/widgetresize.css';
 /**
  * The widget resize feature plugin.
@@ -17,13 +17,12 @@ 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 {
-    constructor() {
-        super(...arguments);
-        /**
-         * A map of resizers created using this plugin instance.
-         */
-        this._resizers = new Map();
-    }
+    /**
+     * A map of resizers created using this plugin instance.
+     */
+    _resizers = new Map();
+    _observer;
+    _redrawSelectedResizerThrottled;
     /**
      * @inheritDoc
      */

package/src/widgettoolbarrepository.d.ts

@@ -8,6 +8,7 @@
 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.
@@ -71,11 +72,12 @@ 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 }: {
+    register(toolbarId: string, { ariaLabel, items, getRelatedElement, balloonClassName, positions }: {
         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,13 +36,11 @@ import { isWidget } from './utils.js';
  * ```
  */
 export default class WidgetToolbarRepository extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * A map of toolbar definitions.
-         */
-        this._toolbarDefinitions = new Map();
-    }
+    /**
+     * A map of toolbar definitions.
+     */
+    _toolbarDefinitions = new Map();
+    _balloon;
     /**
      * @inheritDoc
      */
@@ -107,7 +105,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' }) {
+    register(toolbarId, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container', positions }) {
         // Trying to register a toolbar without any item.
         if (!items.length) {
             /**
@@ -145,6 +143,7 @@ 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.
@@ -214,7 +213,7 @@ export default class WidgetToolbarRepository extends Plugin {
      */
     _showToolbar(toolbarDefinition, relatedElement) {
         if (this._isToolbarVisible(toolbarDefinition)) {
-            repositionContextualBalloon(this.editor, relatedElement);
+            repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
         }
         else if (!this._isToolbarInBalloon(toolbarDefinition)) {
             if (!toolbarDefinition.initialized) {
@@ -223,7 +222,7 @@ export default class WidgetToolbarRepository extends Plugin {
             }
             this._balloon.add({
                 view: toolbarDefinition.view,
-                position: getBalloonPositionData(this.editor, relatedElement),
+                position: getBalloonPositionData(this.editor, relatedElement, toolbarDefinition.positions),
                 balloonClassName: toolbarDefinition.balloonClassName
             });
             // Update toolbar position each time stack with toolbar view is switched to visible.
@@ -234,7 +233,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);
+                        repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
                     }
                 }
             });
@@ -247,17 +246,17 @@ export default class WidgetToolbarRepository extends Plugin {
         return this._balloon.hasView(toolbar.view);
     }
 }
-function repositionContextualBalloon(editor, relatedElement) {
+function repositionContextualBalloon(editor, relatedElement, positions) {
     const balloon = editor.plugins.get('ContextualBalloon');
-    const position = getBalloonPositionData(editor, relatedElement);
+    const position = getBalloonPositionData(editor, relatedElement, positions);
     balloon.updatePosition(position);
 }
-function getBalloonPositionData(editor, relatedElement) {
+function getBalloonPositionData(editor, relatedElement, positions) {
     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(returnIcon, 'image/svg+xml').firstChild;
+const RETURN_ARROW_ICON_ELEMENT = new DOMParser().parseFromString(IconReturnArrow, '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,15 +30,12 @@ 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 {
-    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;
-    }
+    /**
+     * 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;
     /**
      * @inheritDoc
      */

package/theme/icons/drag-handle.svg

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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>