@ckeditor/ckeditor5-widget 0.0.0-nightly-20250616.0 → 0.0.0-nightly-20250618.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "0.0.0-nightly-20250616.0",
+  "version": "0.0.0-nightly-20250618.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,13 +12,13 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250616.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20250616.0",
-    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-20250616.0",
-    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-20250616.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250616.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250616.0",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250616.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250618.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20250618.0",
+    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-20250618.0",
+    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-20250618.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250618.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250618.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250618.0",
     "es-toolkit": "1.38.0"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/highlightstack.d.ts

@@ -2,7 +2,7 @@
  * @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
  */
-import type { DowncastWriter, HighlightDescriptor } from '@ckeditor/ckeditor5-engine';
+import type { ViewDowncastWriter, DowncastHighlightDescriptor } from '@ckeditor/ckeditor5-engine';
 declare const WidgetHighlightStack_base: {
     new (): import("@ckeditor/ckeditor5-utils").Emitter;
     prototype: import("@ckeditor/ckeditor5-utils").Emitter;
@@ -14,7 +14,7 @@ declare const WidgetHighlightStack_base: {
  *
  * * highlight with highest priority should be applied,
  * * if two highlights have same priority - sort by CSS class provided in
- * {@link module:engine/conversion/downcasthelpers~HighlightDescriptor}.
+ * {@link module:engine/conversion/downcasthelpers~DowncastHighlightDescriptor}.
  *
  * This way, highlight will be applied with the same rules it is applied on texts.
  */
@@ -25,14 +25,14 @@ export declare class WidgetHighlightStack extends /* #__PURE__ */ WidgetHighligh
      *
      * @fires change:top
      */
-    add(descriptor: HighlightDescriptor, writer: DowncastWriter): void;
+    add(descriptor: DowncastHighlightDescriptor, writer: ViewDowncastWriter): void;
     /**
      * Removes highlight descriptor from the stack.
      *
      * @fires change:top
      * @param id Id of the descriptor to remove.
      */
-    remove(id: string, writer: DowncastWriter): void;
+    remove(id: string, writer: ViewDowncastWriter): void;
     /**
      * Inserts a given descriptor in correct place in the stack. It also takes care about updating information
      * when descriptor with same id is already present.
@@ -61,14 +61,14 @@ export type WidgetHighlightStackChangeEventData = {
     /**
      * Old highlight descriptor. It will be `undefined` when first descriptor is added to the stack.
      */
-    oldDescriptor: HighlightDescriptor;
+    oldDescriptor: DowncastHighlightDescriptor;
     /**
      * New highlight descriptor. It will be `undefined` when last descriptor is removed from the stack.
      */
-    newDescriptor: HighlightDescriptor;
+    newDescriptor: DowncastHighlightDescriptor;
     /**
      * View writer that can be used to modify element.
      */
-    writer: DowncastWriter;
+    writer: ViewDowncastWriter;
 };
 export {};

package/src/highlightstack.js

@@ -13,7 +13,7 @@ import { EmitterMixin } from '@ckeditor/ckeditor5-utils';
  *
  * * highlight with highest priority should be applied,
  * * if two highlights have same priority - sort by CSS class provided in
- * {@link module:engine/conversion/downcasthelpers~HighlightDescriptor}.
+ * {@link module:engine/conversion/downcasthelpers~DowncastHighlightDescriptor}.
  *
  * This way, highlight will be applied with the same rules it is applied on texts.
  */
@@ -118,7 +118,7 @@ function shouldABeBeforeB(a, b) {
     return classesToString(a.classes) > classesToString(b.classes);
 }
 /**
- * Converts CSS classes passed with {@link module:engine/conversion/downcasthelpers~HighlightDescriptor} to
+ * Converts CSS classes passed with {@link module:engine/conversion/downcasthelpers~DowncastHighlightDescriptor} to
  * sorted string.
  */
 function classesToString(classes) {

package/src/utils.d.ts

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 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';
+import { type DowncastHighlightDescriptor, type MapperViewToModelPositionEvent, type ModelDocumentSelection, type ViewDowncastWriter, type Model, type ModelRange, type ModelSelection, type ViewEditableElement, type ViewElement, type ViewTypeCheckable } from '@ckeditor/ckeditor5-engine';
 /**
  * CSS class added to each widget element.
  */
@@ -13,15 +13,15 @@ export declare const WIDGET_CLASS_NAME = "ck-widget";
  */
 export declare const WIDGET_SELECTED_CLASS_NAME = "ck-widget_selected";
 /**
- * Returns `true` if given {@link module:engine/view/node~Node} is an {@link module:engine/view/element~Element} and a widget.
+ * Returns `true` if given {@link module:engine/view/node~ViewNode} is an {@link module:engine/view/element~ViewElement} and a widget.
  */
 export declare function isWidget(node: ViewTypeCheckable): boolean;
 /**
- * Converts the given {@link module:engine/view/element~Element} to a widget in the following way:
+ * Converts the given {@link module:engine/view/element~ViewElement} to a widget in the following way:
  *
  * * sets the `contenteditable` attribute to `"false"`,
  * * adds the `ck-widget` CSS class,
- * * adds a custom {@link module:engine/view/element~Element#getFillerOffset `getFillerOffset()`} method returning `null`,
+ * * adds a custom {@link module:engine/view/element~ViewElement#getFillerOffset `getFillerOffset()`} method returning `null`,
  * * adds a custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},
  * * implements the {@link ~setHighlightHandling view highlight on widgets}.
  *
@@ -62,7 +62,7 @@ export declare function isWidget(node: ViewTypeCheckable): boolean;
  * @param options.hasSelectionHandle If `true`, the widget will have a selection handle added.
  * @returns Returns the same element.
  */
-export declare function toWidget(element: ViewElement, writer: DowncastWriter, options?: {
+export declare function toWidget(element: ViewElement, writer: ViewDowncastWriter, options?: {
     label?: string | (() => string);
     hasSelectionHandle?: boolean;
 }): ViewElement;
@@ -70,7 +70,7 @@ export declare function toWidget(element: ViewElement, writer: DowncastWriter, o
  * Sets highlight handling methods. Uses {@link module:widget/highlightstack~WidgetHighlightStack} to
  * properly determine which highlight descriptor should be used at given time.
  */
-export declare function setHighlightHandling(element: ViewElement, writer: DowncastWriter, add?: (element: ViewElement, descriptor: HighlightDescriptor, writer: DowncastWriter) => void, remove?: (element: ViewElement, descriptor: HighlightDescriptor, writer: DowncastWriter) => void): void;
+export declare function setHighlightHandling(element: ViewElement, writer: ViewDowncastWriter, add?: (element: ViewElement, descriptor: DowncastHighlightDescriptor, writer: ViewDowncastWriter) => void, remove?: (element: ViewElement, descriptor: DowncastHighlightDescriptor, writer: ViewDowncastWriter) => void): void;
 /**
  * Sets label for given element.
  * It can be passed as a plain string or a function returning a string. Function will be called each time label is retrieved by
@@ -82,9 +82,10 @@ export declare function setLabel(element: ViewElement, labelOrCreator: string |
  */
 export declare function getLabel(element: ViewElement): string;
 /**
- * Adds functionality to the provided {@link module:engine/view/editableelement~EditableElement} to act as a widget's editable:
+ * Adds functionality to the provided {@link module:engine/view/editableelement~ViewEditableElement} to act as a widget's editable:
  *
- * * sets the `contenteditable` attribute to `true` when {@link module:engine/view/editableelement~EditableElement#isReadOnly} is `false`,
+ * * sets the `contenteditable` attribute to `true` when
+ * {@link module:engine/view/editableelement~ViewEditableElement#isReadOnly} is `false`,
  * otherwise sets it to `false`,
  * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
  * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
@@ -125,7 +126,7 @@ export declare function getLabel(element: ViewElement): string;
  * @param options.withAriaRole Whether to add the role="textbox" attribute on the editable. Defaults to `true`.
  * @returns Returns the same element that was provided in the `editable` parameter
  */
-export declare function toWidgetEditable(editable: ViewEditableElement, writer: DowncastWriter, options?: {
+export declare function toWidgetEditable(editable: ViewEditableElement, writer: ViewDowncastWriter, options?: {
     label?: string;
     withAriaRole?: boolean;
 }): ViewEditableElement;
@@ -144,7 +145,7 @@ export declare function toWidgetEditable(editable: ViewEditableElement, writer:
  * @param model Model instance.
  * @returns The optimal range.
  */
-export declare function findOptimalInsertionRange(selection: Selection | DocumentSelection, model: Model): Range;
+export declare function findOptimalInsertionRange(selection: ModelSelection | ModelDocumentSelection, model: Model): ModelRange;
 /**
  * A util to be used in order to map view positions to correct model positions when implementing a widget
  * which renders non-empty view element for an empty model element.

package/src/utils.js

@@ -19,7 +19,7 @@ export const WIDGET_CLASS_NAME = 'ck-widget';
  */
 export const WIDGET_SELECTED_CLASS_NAME = 'ck-widget_selected';
 /**
- * Returns `true` if given {@link module:engine/view/node~Node} is an {@link module:engine/view/element~Element} and a widget.
+ * Returns `true` if given {@link module:engine/view/node~ViewNode} is an {@link module:engine/view/element~ViewElement} and a widget.
  */
 export function isWidget(node) {
     if (!node.is('element')) {
@@ -28,11 +28,11 @@ export function isWidget(node) {
     return !!node.getCustomProperty('widget');
 }
 /**
- * Converts the given {@link module:engine/view/element~Element} to a widget in the following way:
+ * Converts the given {@link module:engine/view/element~ViewElement} to a widget in the following way:
  *
  * * sets the `contenteditable` attribute to `"false"`,
  * * adds the `ck-widget` CSS class,
- * * adds a custom {@link module:engine/view/element~Element#getFillerOffset `getFillerOffset()`} method returning `null`,
+ * * adds a custom {@link module:engine/view/element~ViewElement#getFillerOffset `getFillerOffset()`} method returning `null`,
  * * adds a custom property allowing to recognize widget elements by using {@link ~isWidget `isWidget()`},
  * * implements the {@link ~setHighlightHandling view highlight on widgets}.
  *
@@ -76,7 +76,7 @@ export function isWidget(node) {
 export function toWidget(element, writer, options = {}) {
     if (!element.is('containerElement')) {
         /**
-         * The element passed to `toWidget()` must be a {@link module:engine/view/containerelement~ContainerElement}
+         * The element passed to `toWidget()` must be a {@link module:engine/view/containerelement~ViewContainerElement}
          * instance.
          *
          * @error widget-to-widget-wrong-element-type
@@ -169,9 +169,10 @@ export function getLabel(element) {
     }, '');
 }
 /**
- * Adds functionality to the provided {@link module:engine/view/editableelement~EditableElement} to act as a widget's editable:
+ * Adds functionality to the provided {@link module:engine/view/editableelement~ViewEditableElement} to act as a widget's editable:
  *
- * * sets the `contenteditable` attribute to `true` when {@link module:engine/view/editableelement~EditableElement#isReadOnly} is `false`,
+ * * sets the `contenteditable` attribute to `true` when
+ * {@link module:engine/view/editableelement~ViewEditableElement#isReadOnly} is `false`,
  * otherwise sets it to `false`,
  * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
  * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.

package/src/widget.d.ts

@@ -6,7 +6,7 @@
  * @module widget/widget
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { type Element, type Node } from '@ckeditor/ckeditor5-engine';
+import { type ModelElement, type ModelNode } from '@ckeditor/ckeditor5-engine';
 import { Delete } from '@ckeditor/ckeditor5-typing';
 import { WidgetTypeAround } from './widgettypearound/widgettypearound.js';
 import '../theme/widget.css';
@@ -19,7 +19,7 @@ import '../theme/widget.css';
  *
  * * The model to view selection converter for the editing pipeline (it handles widget custom selection rendering).
  * If a converted selection wraps around a widget element, that selection is marked as
- * {@link module:engine/view/selection~Selection#isFake fake}. Additionally, the `ck-widget_selected` CSS class
+ * {@link module:engine/view/selection~ViewSelection#isFake fake}. Additionally, the `ck-widget_selected` CSS class
  * is added to indicate that widget has been selected.
  * * The mouse and keyboard events handling on and around widget elements.
  */
@@ -45,7 +45,7 @@ export declare class Widget extends Plugin {
      */
     init(): void;
     /**
-     * Handles {@link module:engine/view/document~Document#event:mousedown mousedown} events on widget elements.
+     * Handles {@link module:engine/view/document~ViewDocument#event:mousedown mousedown} events on widget elements.
      */
     private _onMousedown;
     /**
@@ -53,7 +53,7 @@ export declare class Widget extends Plugin {
      */
     private _selectBlockContent;
     /**
-     * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and changes
+     * Handles {@link module:engine/view/document~ViewDocument#event:keydown keydown} events and changes
      * the model selection when:
      *
      * * arrow key is pressed when the widget is selected,
@@ -63,7 +63,7 @@ export declare class Widget extends Plugin {
      */
     private _handleSelectionChangeOnArrowKeyPress;
     /**
-     * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and prevents
+     * Handles {@link module:engine/view/document~ViewDocument#event:keydown keydown} events and prevents
      * the default browser behavior to make sure the fake selection is not being moved from a fake selection
      * container.
      *
@@ -78,20 +78,20 @@ export declare class Widget extends Plugin {
      */
     private _handleDelete;
     /**
-     * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
+     * Sets {@link module:engine/model/selection~ModelSelection document's selection} over given element.
      *
      * @internal
      */
-    _setSelectionOverElement(element: Node): void;
+    _setSelectionOverElement(element: ModelNode): void;
     /**
-     * Checks if {@link module:engine/model/element~Element element} placed next to the current
-     * {@link module:engine/model/selection~Selection model selection} exists and is marked in
-     * {@link module:engine/model/schema~Schema schema} as `object`.
+     * Checks if {@link module:engine/model/element~ModelElement element} placed next to the current
+     * {@link module:engine/model/selection~ModelSelection model selection} exists and is marked in
+     * {@link module:engine/model/schema~ModelSchema schema} as `object`.
      *
      * @internal
      * @param forward Direction of checking.
      */
-    _getObjectElementNextToSelection(forward: boolean): Element | null;
+    _getObjectElementNextToSelection(forward: boolean): ModelElement | null;
     /**
      * Removes CSS class from previously selected widgets.
      */

package/src/widget.js

@@ -6,7 +6,7 @@
  * @module widget/widget
  */
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { MouseObserver, TreeWalker } from '@ckeditor/ckeditor5-engine';
+import { MouseObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine';
 import { Delete } from '@ckeditor/ckeditor5-typing';
 import { env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent } from '@ckeditor/ckeditor5-utils';
 import { WidgetTypeAround } from './widgettypearound/widgettypearound.js';
@@ -22,7 +22,7 @@ import '../theme/widget.css';
  *
  * * The model to view selection converter for the editing pipeline (it handles widget custom selection rendering).
  * If a converted selection wraps around a widget element, that selection is marked as
- * {@link module:engine/view/selection~Selection#isFake fake}. Additionally, the `ck-widget_selected` CSS class
+ * {@link module:engine/view/selection~ViewSelection#isFake fake}. Additionally, the `ck-widget_selected` CSS class
  * is added to indicate that widget has been selected.
  * * The mouse and keyboard events handling on and around widget elements.
  */
@@ -213,7 +213,7 @@ export class Widget extends Plugin {
         });
     }
     /**
-     * Handles {@link module:engine/view/document~Document#event:mousedown mousedown} events on widget elements.
+     * Handles {@link module:engine/view/document~ViewDocument#event:mousedown mousedown} events on widget elements.
      */
     _onMousedown(eventInfo, domEventData) {
         const editor = this.editor;
@@ -290,7 +290,7 @@ export class Widget extends Plugin {
         return true;
     }
     /**
-     * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and changes
+     * Handles {@link module:engine/view/document~ViewDocument#event:keydown keydown} events and changes
      * the model selection when:
      *
      * * arrow key is pressed when the widget is selected,
@@ -353,7 +353,7 @@ export class Widget extends Plugin {
         }
     }
     /**
-     * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and prevents
+     * Handles {@link module:engine/view/document~ViewDocument#event:keydown keydown} events and prevents
      * the default browser behavior to make sure the fake selection is not being moved from a fake selection
      * container.
      *
@@ -402,7 +402,7 @@ export class Widget extends Plugin {
         }
     }
     /**
-     * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
+     * Sets {@link module:engine/model/selection~ModelSelection document's selection} over given element.
      *
      * @internal
      */
@@ -412,9 +412,9 @@ export class Widget extends Plugin {
         });
     }
     /**
-     * Checks if {@link module:engine/model/element~Element element} placed next to the current
-     * {@link module:engine/model/selection~Selection model selection} exists and is marked in
-     * {@link module:engine/model/schema~Schema schema} as `object`.
+     * Checks if {@link module:engine/model/element~ModelElement element} placed next to the current
+     * {@link module:engine/model/selection~ModelSelection model selection} exists and is marked in
+     * {@link module:engine/model/schema~ModelSchema schema} as `object`.
      *
      * @internal
      * @param forward Direction of checking.
@@ -587,7 +587,7 @@ function findTextBlockAncestor(modelElement, schema) {
  * Returns next text block where could put selection.
  */
 function findNextTextBlock(position, schema) {
-    const treeWalker = new TreeWalker({ startPosition: position });
+    const treeWalker = new ModelTreeWalker({ startPosition: position });
     for (const { item } of treeWalker) {
         if (schema.isLimit(item) || !item.is('element')) {
             return null;

package/src/widgetresize.d.ts

@@ -7,7 +7,7 @@
  */
 import { WidgetResizer } from './widgetresize/resizer.js';
 import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import { type Element, type ViewContainerElement } from '@ckeditor/ckeditor5-engine';
+import { type ModelElement, type ViewContainerElement } from '@ckeditor/ckeditor5-engine';
 import '../theme/widgetresize.css';
 /**
  * The widget resize feature plugin.
@@ -96,7 +96,7 @@ export interface WidgetResizerOptions {
      * Editor instance associated with the resizer.
      */
     editor: Editor;
-    modelElement: Element;
+    modelElement: ModelElement;
     /**
      * A view of an element to be resized. Typically it's the main widget's view instance.
      */

package/src/widgettypearound/utils.d.ts

@@ -2,7 +2,7 @@
  * @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
  */
-import type { DocumentSelection, DomConverter, Element, Schema, Selection, ViewElement } from '@ckeditor/ckeditor5-engine';
+import type { ModelDocumentSelection, ViewDomConverter, ModelElement, ModelSchema, ModelSelection, ViewElement } from '@ckeditor/ckeditor5-engine';
 /**
  * The name of the type around model selection attribute responsible for
  * displaying a fake caret next to a selected widget.
@@ -13,7 +13,7 @@ export declare const TYPE_AROUND_SELECTION_ATTRIBUTE = "widget-type-around";
 /**
  * Checks if an element is a widget that qualifies to get the widget type around UI.
  */
-export declare function isTypeAroundWidget(viewElement: ViewElement | undefined, modelElement: Element, schema: Schema): boolean;
+export declare function isTypeAroundWidget(viewElement: ViewElement | undefined, modelElement: ModelElement, schema: ModelSchema): boolean;
 /**
  * For the passed HTML element, this helper finds the closest widget type around button ancestor.
  *
@@ -34,7 +34,7 @@ export declare function getTypeAroundButtonPosition(domElement: HTMLElement): 'b
  *
  * @internal
  */
-export declare function getClosestWidgetViewElement(domElement: HTMLElement, domConverter: DomConverter): ViewElement;
+export declare function getClosestWidgetViewElement(domElement: HTMLElement, domConverter: ViewDomConverter): ViewElement;
 /**
  * For the passed selection instance, it returns the position of the fake caret displayed next to a widget.
  *
@@ -43,4 +43,4 @@ export declare function getClosestWidgetViewElement(domElement: HTMLElement, dom
  * @internal
  * @returns The position of the fake caret or `null` when none is present.
  */
-export declare function getTypeAroundFakeCaretPosition(selection: Selection | DocumentSelection): 'before' | 'after' | null;
+export declare function getTypeAroundFakeCaretPosition(selection: ModelSelection | ModelDocumentSelection): 'before' | 'after' | null;

package/src/widgettypearound/widgettypearound.d.ts

@@ -82,7 +82,7 @@ export declare class WidgetTypeAround extends Plugin {
      * Creates a listener in the editing conversion pipeline that injects the widget type around
      * UI into every single widget instance created in the editor.
      *
-     * The UI is delivered as a {@link module:engine/view/uielement~UIElement}
+     * The UI is delivered as a {@link module:engine/view/uielement~ViewUIElement}
      * wrapper which renders DOM buttons that users can use to insert paragraphs.
      */
     private _enableTypeAroundUIInjection;

package/src/widgettypearound/widgettypearound.js

@@ -165,7 +165,7 @@ export class WidgetTypeAround extends Plugin {
      * Creates a listener in the editing conversion pipeline that injects the widget type around
      * UI into every single widget instance created in the editor.
      *
-     * The UI is delivered as a {@link module:engine/view/uielement~UIElement}
+     * The UI is delivered as a {@link module:engine/view/uielement~ViewUIElement}
      * wrapper which renders DOM buttons that users can use to insert paragraphs.
      */
     _enableTypeAroundUIInjection() {