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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "0.0.0-nightly-20250224.0",
+  "version": "0.0.0-nightly-next-20250224.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-20250224.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20250224.0",
-    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-20250224.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250224.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250224.0",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250224.0",
-    "lodash-es": "4.17.21"
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-next-20250224.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-next-20250224.0",
+    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-next-20250224.0",
+    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20250224.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20250224.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20250224.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-next-20250224.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.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
      */

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>