@ckeditor/ckeditor5-widget 45.2.1 → 46.0.0-alpha.1

package/dist/index.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { MouseObserver, TreeWalker } from '@ckeditor/ckeditor5-engine/dist/index.js';
+import { MouseObserver, ModelTreeWalker } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
 import { EmitterMixin, Rect, CKEditorError, toArray, isForwardArrowKeyCode, env, keyCodes, getLocalizedArrowKeyCodeDirection, getRangeFromMouseEvent, logWarning, ObservableMixin, compareArrays, global, DomEmitterMixin } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { IconDragHandle, IconReturnArrow } from '@ckeditor/ckeditor5-icons/dist/index.js';
@@ -18,10 +18,10 @@ import { throttle } from 'es-toolkit/compat';
  *
  * * 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.
- */ class HighlightStack extends /* #__PURE__ */ EmitterMixin() {
+ */ class WidgetHighlightStack extends /* #__PURE__ */ EmitterMixin() {
     _stack = [];
     /**
 	 * Adds highlight descriptor to the stack.
@@ -115,7 +115,7 @@ import { throttle } from 'es-toolkit/compat';
     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) {
     return Array.isArray(classes) ? classes.sort().join(',') : classes;
@@ -128,7 +128,7 @@ import { throttle } from 'es-toolkit/compat';
  * CSS class added to currently selected widget element.
  */ 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.
  */ function isWidget(node) {
     if (!node.is('element')) {
         return false;
@@ -136,11 +136,11 @@ import { throttle } from 'es-toolkit/compat';
     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}.
  *
@@ -183,7 +183,7 @@ import { throttle } from 'es-toolkit/compat';
  */ 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
@@ -233,10 +233,10 @@ import { throttle } from 'es-toolkit/compat';
     }
 }
 /**
- * Sets highlight handling methods. Uses {@link module:widget/highlightstack~HighlightStack} to
+ * Sets highlight handling methods. Uses {@link module:widget/highlightstack~WidgetHighlightStack} to
  * properly determine which highlight descriptor should be used at given time.
  */ function setHighlightHandling(element, writer, add = addHighlight, remove = removeHighlight) {
-    const stack = new HighlightStack();
+    const stack = new WidgetHighlightStack();
     stack.on('change:top', (evt, data)=>{
         if (data.oldDescriptor) {
             remove(element, data.oldDescriptor, data.writer);
@@ -271,9 +271,10 @@ import { throttle } from 'es-toolkit/compat';
     }, '');
 }
 /**
- * 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.
@@ -504,6 +505,8 @@ import { throttle } from 'es-toolkit/compat';
 /**
  * The name of the type around model selection attribute responsible for
  * displaying a fake caret next to a selected widget.
+ *
+ * @internal
  */ const TYPE_AROUND_SELECTION_ATTRIBUTE = 'widget-type-around';
 /**
  * Checks if an element is a widget that qualifies to get the widget type around UI.
@@ -512,6 +515,8 @@ import { throttle } from 'es-toolkit/compat';
 }
 /**
  * For the passed HTML element, this helper finds the closest widget type around button ancestor.
+ *
+ * @internal
  */ function getClosestTypeAroundDomButton(domElement) {
     return domElement.closest('.ck-widget__type-around__button');
 }
@@ -520,12 +525,15 @@ import { throttle } from 'es-toolkit/compat';
  * the paragraph would be inserted into the content if, for instance, the button was
  * clicked by the user.
  *
+ * @internal
  * @returns The position of the button.
  */ function getTypeAroundButtonPosition(domElement) {
     return domElement.classList.contains('ck-widget__type-around__button_before') ? 'before' : 'after';
 }
 /**
  * For the passed HTML element, this helper returns the closest view widget ancestor.
+ *
+ * @internal
  */ function getClosestWidgetViewElement(domElement, domConverter) {
     const widgetDomElement = domElement.closest('.ck-widget');
     return domConverter.mapDomToView(widgetDomElement);
@@ -535,6 +543,7 @@ import { throttle } from 'es-toolkit/compat';
  *
  * **Note**: If the fake caret is not currently displayed, `null` is returned.
  *
+ * @internal
  * @returns The position of the fake caret or `null` when none is present.
  */ function getTypeAroundFakeCaretPosition(selection) {
     return selection.getAttribute(TYPE_AROUND_SELECTION_ATTRIBUTE);
@@ -685,7 +694,7 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
 	 * 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() {
         const editor = this.editor;
@@ -1287,7 +1296,7 @@ function injectFakeCaret(wrapperDomElement) {
  * Returns 'keydown' handler for up/down arrow keys that modifies the caret movement if it's in a text line next to an object.
  *
  * @param editing The editing controller.
- */ function verticalNavigationHandler(editing) {
+ */ function verticalWidgetNavigationHandler(editing) {
     const model = editing.model;
     return (evt, data)=>{
         const arrowUpPressed = data.keyCode == keyCodes.arrowup;
@@ -1477,7 +1486,7 @@ function selectionWillShrink(selection, isForward) {
  *
  * * 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.
  */ class Widget extends Plugin {
@@ -1602,7 +1611,7 @@ function selectionWillShrink(selection, isForward) {
         }, {
             context: '$root'
         });
-        this.listenTo(viewDocument, 'arrowKey', verticalNavigationHandler(this.editor.editing), {
+        this.listenTo(viewDocument, 'arrowKey', verticalWidgetNavigationHandler(this.editor.editing), {
             context: '$text'
         });
         // Handle custom delete behaviour.
@@ -1699,7 +1708,7 @@ function selectionWillShrink(selection, isForward) {
         });
     }
     /**
-	 * 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;
         const view = editor.editing.view;
@@ -1768,7 +1777,7 @@ function selectionWillShrink(selection, isForward) {
         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,
@@ -1830,7 +1839,7 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * 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.
 	 *
@@ -1877,7 +1886,7 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * 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) {
@@ -1886,9 +1895,9 @@ function selectionWillShrink(selection, isForward) {
         });
     }
     /**
-	 * 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.
@@ -2051,7 +2060,7 @@ function selectionWillShrink(selection, isForward) {
 /**
  * Returns next text block where could put selection.
  */ function findNextTextBlock(position, schema) {
-    const treeWalker = new TreeWalker({
+    const treeWalker = new ModelTreeWalker({
         startPosition: position
     });
     for (const { item } of treeWalker){
@@ -2326,7 +2335,7 @@ function isWidgetSelected(selection) {
 
 /**
  * Stores the internal state of a single resizable object.
- */ class ResizeState extends /* #__PURE__ */ ObservableMixin() {
+ */ class WidgetResizeState 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.
@@ -2470,6 +2479,8 @@ function isWidgetSelected(selection) {
 
 /**
  * A view displaying the proposed new element size during the resizing.
+ *
+ * @internal
  */ class SizeView extends View {
     constructor(){
         super();
@@ -2523,7 +2534,7 @@ function isWidgetSelected(selection) {
 
 /**
  * Represents a resizer for a single resizable object.
- */ class Resizer extends /* #__PURE__ */ ObservableMixin() {
+ */ class WidgetResizer extends /* #__PURE__ */ ObservableMixin() {
     /**
 	 * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
 	 *
@@ -2539,7 +2550,7 @@ function isWidgetSelected(selection) {
 	 * 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.
+	 * The width of the resized {@link module:widget/widgetresize~WidgetResizerOptions#viewElement viewElement} before the resizing started.
 	 */ _initialViewWidth;
     /**
 	 * @param options Resizer options.
@@ -2628,7 +2639,7 @@ function isWidgetSelected(selection) {
 	 * @fires begin
 	 * @param domResizeHandle Clicked handle.
 	 */ begin(domResizeHandle) {
-        this._state = new ResizeState(this._options);
+        this._state = new WidgetResizeState(this._options);
         this._sizeView._bindToState(this._options, this.state);
         this._initialViewWidth = this._options.viewElement.getStyle('width');
         this.state.begin(domResizeHandle, this._getHandleHost(), this._getResizeHost());
@@ -2974,7 +2985,7 @@ function existsInDom(element) {
     /**
 	 * @param options Resizer options.
 	 */ attachTo(options) {
-        const resizer = new Resizer(options);
+        const resizer = new WidgetResizer(options);
         const plugins = this.editor.plugins;
         resizer.attach();
         if (plugins.has('WidgetToolbarRepository')) {
@@ -3026,7 +3037,7 @@ function existsInDom(element) {
 	 * @param domEventData Native DOM event.
 	 */ _mouseDownListener(event, domEventData) {
         const resizeHandle = domEventData.domTarget;
-        if (!Resizer.isResizeHandle(resizeHandle)) {
+        if (!WidgetResizer.isResizeHandle(resizeHandle)) {
             return;
         }
         this._activeResizer = this._getResizerByHandle(resizeHandle) || null;
@@ -3052,5 +3063,5 @@ function existsInDom(element) {
     }
 }
 
-export { WIDGET_CLASS_NAME, WIDGET_SELECTED_CLASS_NAME, Widget, WidgetResize, WidgetToolbarRepository, WidgetTypeAround, calculateResizeHostAncestorWidth, calculateResizeHostPercentageWidth, findOptimalInsertionRange, getLabel, isWidget, setHighlightHandling, setLabel, toWidget, toWidgetEditable, viewToModelPositionOutsideModelElement };
+export { WIDGET_CLASS_NAME, WIDGET_SELECTED_CLASS_NAME, Widget, WidgetHighlightStack, WidgetResize, WidgetResizeState, WidgetResizer, WidgetToolbarRepository, WidgetTypeAround, TYPE_AROUND_SELECTION_ATTRIBUTE as _WIDGET_TYPE_AROUND_SELECTION_ATTRIBUTE, SizeView as _WidgetSizeView, getClosestTypeAroundDomButton as _getClosestWidgetTypeAroundDomButton, getClosestWidgetViewElement as _getClosestWidgetViewElement, getTypeAroundButtonPosition as _getWidgetTypeAroundButtonPosition, getTypeAroundFakeCaretPosition as _getWidgetTypeAroundFakeCaretPosition, calculateResizeHostAncestorWidth, calculateResizeHostPercentageWidth, findOptimalInsertionRange, getLabel, isTypeAroundWidget, isWidget, setHighlightHandling, setLabel, toWidget, toWidgetEditable, verticalWidgetNavigationHandler, viewToModelPositionOutsideModelElement };
 //# sourceMappingURL=index.js.map