@ckeditor/ckeditor5-widget 47.6.1 → 48.0.0-alpha.0

package/src/utils.js

@@ -1,414 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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 { IconDragHandle } from '@ckeditor/ckeditor5-icons';
-import { Rect, CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
-import { IconView } from '@ckeditor/ckeditor5-ui';
-import { WidgetHighlightStack } from './highlightstack.js';
-import { getTypeAroundFakeCaretPosition } from './widgettypearound/utils.js';
-/**
- * CSS class added to each widget element.
- */
-export const WIDGET_CLASS_NAME = 'ck-widget';
-/**
- * CSS class added to currently selected widget element.
- */
-export const WIDGET_SELECTED_CLASS_NAME = 'ck-widget_selected';
-/**
- * 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')) {
-        return false;
-    }
-    return !!node.getCustomProperty('widget');
-}
-/**
- * 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~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}.
- *
- * This function needs to be used in conjunction with
- * {@link module:engine/conversion/downcasthelpers~DowncastHelpers downcast conversion helpers}
- * like {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
- * Moreover, typically you will want to use `toWidget()` only for `editingDowncast`, while keeping the `dataDowncast` clean.
- *
- * For example, in order to convert a `<widget>` model element to `<div class="widget">` in the view, you can define
- * such converters:
- *
- * ```ts
- * editor.conversion.for( 'editingDowncast' )
- * 	.elementToElement( {
- * 		model: 'widget',
- * 		view: ( modelItem, { writer } ) => {
- * 			const div = writer.createContainerElement( 'div', { class: 'widget' } );
- *
- * 			return toWidget( div, writer, { label: 'some widget' } );
- * 		}
- * 	} );
- *
- * editor.conversion.for( 'dataDowncast' )
- * 	.elementToElement( {
- * 		model: 'widget',
- * 		view: ( modelItem, { writer } ) => {
- * 			return writer.createContainerElement( 'div', { class: 'widget' } );
- * 		}
- * 	} );
- * ```
- *
- * See the full source code of the widget (with a nested editable) schema definition and converters in
- * [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
- *
- * @param options Additional options.
- * @param options.label Element's label provided to the {@link ~setLabel} function. It can be passed as
- * a plain string or a function returning a string. It represents the widget for assistive technologies (like screen readers).
- * @param options.hasSelectionHandle If `true`, the widget will have a selection handle added.
- * @returns Returns the same element.
- */
-export function toWidget(element, writer, options = {}) {
-    if (!element.is('containerElement')) {
-        /**
-         * The element passed to `toWidget()` must be a {@link module:engine/view/containerelement~ViewContainerElement}
-         * instance.
-         *
-         * @error widget-to-widget-wrong-element-type
-         * @param {any} element The view element passed to `toWidget()`.
-         */
-        throw new CKEditorError('widget-to-widget-wrong-element-type', null, { element });
-    }
-    writer.setAttribute('contenteditable', 'false', element);
-    writer.addClass(WIDGET_CLASS_NAME, element);
-    writer.setCustomProperty('widget', true, element);
-    element.getFillerOffset = getFillerOffset;
-    writer.setCustomProperty('widgetLabel', [], element);
-    if (options.label) {
-        setLabel(element, options.label);
-    }
-    if (options.hasSelectionHandle) {
-        addSelectionHandle(element, writer);
-    }
-    setHighlightHandling(element, writer);
-    return element;
-}
-/**
- * Default handler for adding a highlight on a widget.
- * It adds CSS class and attributes basing on the given highlight descriptor.
- */
-function addHighlight(element, descriptor, writer) {
-    if (descriptor.classes) {
-        writer.addClass(toArray(descriptor.classes), element);
-    }
-    if (descriptor.attributes) {
-        for (const key in descriptor.attributes) {
-            writer.setAttribute(key, descriptor.attributes[key], element);
-        }
-    }
-}
-/**
- * Default handler for removing a highlight from a widget.
- * It removes CSS class and attributes basing on the given highlight descriptor.
- */
-function removeHighlight(element, descriptor, writer) {
-    if (descriptor.classes) {
-        writer.removeClass(toArray(descriptor.classes), element);
-    }
-    if (descriptor.attributes) {
-        for (const key in descriptor.attributes) {
-            writer.removeAttribute(key, element);
-        }
-    }
-}
-/**
- * Sets highlight handling methods. Uses {@link module:widget/highlightstack~WidgetHighlightStack} to
- * properly determine which highlight descriptor should be used at given time.
- */
-export function setHighlightHandling(element, writer, add = addHighlight, remove = removeHighlight) {
-    const stack = new WidgetHighlightStack();
-    stack.on('change:top', (evt, data) => {
-        if (data.oldDescriptor) {
-            remove(element, data.oldDescriptor, data.writer);
-        }
-        if (data.newDescriptor) {
-            add(element, data.newDescriptor, data.writer);
-        }
-    });
-    const addHighlightCallback = (element, descriptor, writer) => stack.add(descriptor, writer);
-    const removeHighlightCallback = (element, id, writer) => stack.remove(id, writer);
-    writer.setCustomProperty('addHighlight', addHighlightCallback, element);
-    writer.setCustomProperty('removeHighlight', removeHighlightCallback, element);
-}
-/**
- * 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
- * {@link ~getLabel `getLabel()`}.
- */
-export function setLabel(element, labelOrCreator) {
-    const widgetLabel = element.getCustomProperty('widgetLabel');
-    widgetLabel.push(labelOrCreator);
-}
-/**
- * Returns the label of the provided element.
- */
-export function getLabel(element) {
-    const widgetLabel = element.getCustomProperty('widgetLabel');
-    return widgetLabel.reduce((prev, current) => {
-        if (typeof current === 'function') {
-            return prev ? prev + '. ' + current() : current();
-        }
-        else {
-            return prev ? prev + '. ' + current : current;
-        }
-    }, '');
-}
-/**
- * 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~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.
- * * implements the {@link ~setHighlightHandling view highlight on widget's editable}.
- * * sets the `role` attribute to `textbox` for accessibility purposes.
- *
- * Similarly to {@link ~toWidget `toWidget()`} this function should be used in `editingDowncast` only and it is usually
- * used together with {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
- *
- * For example, in order to convert a `<nested>` model element to `<div class="nested">` in the view, you can define
- * such converters:
- *
- * ```ts
- * editor.conversion.for( 'editingDowncast' )
- * 	.elementToElement( {
- * 		model: 'nested',
- * 		view: ( modelItem, { writer } ) => {
- * 			const div = writer.createEditableElement( 'div', { class: 'nested' } );
- *
- * 			return toWidgetEditable( nested, writer, { label: 'label for editable' } );
- * 		}
- * 	} );
- *
- * editor.conversion.for( 'dataDowncast' )
- * 	.elementToElement( {
- * 		model: 'nested',
- * 		view: ( modelItem, { writer } ) => {
- * 			return writer.createContainerElement( 'div', { class: 'nested' } );
- * 		}
- * 	} );
- * ```
- *
- * See the full source code of the widget (with nested editable) schema definition and converters in
- * [this sample](https://github.com/ckeditor/ckeditor5-widget/blob/master/tests/manual/widget-with-nestededitable.js).
- *
- * @param options Additional options.
- * @param options.label Editable's label used by assistive technologies (e.g. screen readers).
- * @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 function toWidgetEditable(editable, writer, options = {}) {
-    writer.addClass(['ck-editor__editable', 'ck-editor__nested-editable'], editable);
-    // Set role="textbox" only if explicitly requested (defaults to true for backward compatibility).
-    if (options.withAriaRole !== false) {
-        writer.setAttribute('role', 'textbox', editable);
-    }
-    // Setting tabindex=-1 on contenteditable=false makes it focusable. It propagates focus to the editable
-    // element and makes it possible to highlight nested editables as focused. It's not what we want
-    // for read-only editables though.
-    // See more: https://github.com/ckeditor/ckeditor5/issues/18965
-    if (!editable.isReadOnly) {
-        writer.setAttribute('tabindex', '-1', editable);
-    }
-    if (options.label) {
-        writer.setAttribute('aria-label', options.label, editable);
-    }
-    // Set initial contenteditable value.
-    writer.setAttribute('contenteditable', editable.isReadOnly ? 'false' : 'true', editable);
-    // Bind the contenteditable property to element#isReadOnly.
-    editable.on('change:isReadOnly', (evt, property, isReadonly) => {
-        writer.setAttribute('contenteditable', isReadonly ? 'false' : 'true', editable);
-        if (isReadonly) {
-            writer.removeAttribute('tabindex', editable);
-        }
-        else {
-            writer.setAttribute('tabindex', '-1', editable);
-        }
-    });
-    editable.on('change:isFocused', (evt, property, is) => {
-        if (is) {
-            writer.addClass('ck-editor__nested-editable_focused', editable);
-        }
-        else {
-            writer.removeClass('ck-editor__nested-editable_focused', editable);
-        }
-    });
-    setHighlightHandling(editable, writer);
-    return editable;
-}
-/**
- * Returns a model range which is optimal (in terms of UX) for inserting a widget block.
- *
- * For instance, if a selection is in the middle of a paragraph, the collapsed range before this paragraph
- * will be returned so that it is not split. If the selection is at the end of a paragraph,
- * the collapsed range after this paragraph will be returned.
- *
- * Note: If the selection is placed in an empty block, the range in that block will be returned. If that range
- * is then passed to {@link module:engine/model/model~Model#insertContent}, the block will be fully replaced
- * by the inserted widget block.
- *
- * @param selection The selection based on which the insertion position should be calculated.
- * @param model Model instance.
- * @returns The optimal range.
- */
-export function findOptimalInsertionRange(selection, model) {
-    const selectedElement = selection.getSelectedElement();
-    if (selectedElement) {
-        const typeAroundFakeCaretPosition = getTypeAroundFakeCaretPosition(selection);
-        // If the WidgetTypeAround "fake caret" is displayed, use its position for the insertion
-        // to provide the most predictable UX (https://github.com/ckeditor/ckeditor5/issues/7438).
-        if (typeAroundFakeCaretPosition) {
-            return model.createRange(model.createPositionAt(selectedElement, typeAroundFakeCaretPosition));
-        }
-    }
-    return model.schema.findOptimalInsertionRange(selection);
-}
-/**
- * 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.
- *
- * For example:
- *
- * ```
- * // Model:
- * <placeholder type="name"></placeholder>
- *
- * // View:
- * <span class="placeholder">name</span>
- * ```
- *
- * In such case, view positions inside `<span>` cannot be correctly mapped to the model (because the model element is empty).
- * To handle mapping positions inside `<span class="placeholder">` to the model use this util as follows:
- *
- * ```ts
- * editor.editing.mapper.on(
- * 	'viewToModelPosition',
- * 	viewToModelPositionOutsideModelElement( model, viewElement => viewElement.hasClass( 'placeholder' ) )
- * );
- * ```
- *
- * The callback will try to map the view offset of selection to an expected model position.
- *
- * 1. When the position is at the end (or in the middle) of the inline widget:
- *
- * ```
- * // View:
- * <p>foo <span class="placeholder">name|</span> bar</p>
- *
- * // Model:
- * <paragraph>foo <placeholder type="name"></placeholder>| bar</paragraph>
- * ```
- *
- * 2. When the position is at the beginning of the inline widget:
- *
- * ```
- * // View:
- * <p>foo <span class="placeholder">|name</span> bar</p>
- *
- * // Model:
- * <paragraph>foo |<placeholder type="name"></placeholder> bar</paragraph>
- * ```
- *
- * @param model Model instance on which the callback operates.
- * @param viewElementMatcher Function that is passed a view element and should return `true` if the custom mapping
- * should be applied to the given view element.
- */
-export function viewToModelPositionOutsideModelElement(model, viewElementMatcher) {
-    return (evt, data) => {
-        const { mapper, viewPosition } = data;
-        const viewParent = mapper.findMappedViewAncestor(viewPosition);
-        if (!viewElementMatcher(viewParent)) {
-            return;
-        }
-        const modelParent = mapper.toModelElement(viewParent);
-        data.modelPosition = model.createPositionAt(modelParent, viewPosition.isAtStart ? 'before' : 'after');
-    };
-}
-/**
- * Default filler offset function applied to all widget elements.
- */
-function getFillerOffset() {
-    return null;
-}
-/**
- * Adds a drag handle to the widget.
- */
-function addSelectionHandle(widgetElement, writer) {
-    const selectionHandle = writer.createUIElement('div', { class: 'ck ck-widget__selection-handle' }, function (domDocument) {
-        const domElement = this.toDomElement(domDocument);
-        // Use the IconView from the ui library.
-        const icon = new IconView();
-        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);
-        return domElement;
-    });
-    // Append the selection handle into the widget wrapper.
-    writer.insert(writer.createPositionAt(widgetElement, 0), selectionHandle);
-    writer.addClass(['ck-widget_with-selection-handle'], widgetElement);
-}
-/**
- * Starting from a DOM resize host element (an element that receives dimensions as a result of resizing),
- * this helper returns the width of the found ancestor element.
- *
- *	* It searches up to 5 levels of ancestors only.
- *
- * @param domResizeHost Resize host DOM element that receives dimensions as a result of resizing.
- * @returns Width of ancestor element in pixels or 0 if no ancestor with a computed width has been found.
- */
-export function calculateResizeHostAncestorWidth(domResizeHost) {
-    const getElementComputedWidth = (element) => {
-        const { width, paddingLeft, paddingRight } = element.ownerDocument.defaultView.getComputedStyle(element);
-        return parseFloat(width) - (parseFloat(paddingLeft) || 0) - (parseFloat(paddingRight) || 0);
-    };
-    const domResizeHostParent = domResizeHost.parentElement;
-    if (!domResizeHostParent) {
-        return 0;
-    }
-    // Need to use computed style as it properly excludes parent's paddings from the returned value.
-    let parentWidth = getElementComputedWidth(domResizeHostParent);
-    // Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree
-    // and try to get width from next ancestor.
-    // https://github.com/ckeditor/ckeditor5/issues/10776
-    const ancestorLevelLimit = 5;
-    let currentLevel = 0;
-    let checkedElement = domResizeHostParent;
-    while (isNaN(parentWidth)) {
-        checkedElement = checkedElement.parentElement;
-        if (++currentLevel > ancestorLevelLimit) {
-            return 0;
-        }
-        parentWidth = getElementComputedWidth(checkedElement);
-    }
-    return parentWidth;
-}
-/**
- * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
- *
- * @param domResizeHost Resize host DOM element.
- * @returns Percentage value between 0 and 100.
- */
-export function calculateResizeHostPercentageWidth(domResizeHost, resizeHostRect = new Rect(domResizeHost)) {
-    const parentWidth = calculateResizeHostAncestorWidth(domResizeHost);
-    if (!parentWidth) {
-        return 0;
-    }
-    return resizeHostRect.width / parentWidth * 100;
-}

package/src/verticalnavigation.js

@@ -1,185 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module widget/verticalnavigation
- */
-import { keyCodes, Rect } from '@ckeditor/ckeditor5-utils';
-/**
- * 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.
- */
-export function verticalWidgetNavigationHandler(editing) {
-    const model = editing.model;
-    return (evt, data) => {
-        const arrowUpPressed = data.keyCode == keyCodes.arrowup;
-        const arrowDownPressed = data.keyCode == keyCodes.arrowdown;
-        const expandSelection = data.shiftKey;
-        const selection = model.document.selection;
-        if (!arrowUpPressed && !arrowDownPressed) {
-            return;
-        }
-        const isForward = arrowDownPressed;
-        // Find a range between selection and closest limit element.
-        const range = findTextRangeFromSelection(editing, selection, isForward);
-        // There is no selection position inside the limit element.
-        if (!range) {
-            return;
-        }
-        // If already at the edge of a limit element.
-        if (range.isCollapsed) {
-            // A collapsed selection at limit edge - nothing more to do.
-            if (selection.isCollapsed) {
-                return;
-            }
-            // A non collapsed selection is at the limit edge while expanding the selection - let others do their stuff.
-            else if (expandSelection) {
-                return;
-            }
-        }
-        // If the range is a single line (there is no word wrapping) then move the selection to the position closest to the limit element.
-        //
-        // We can't move the selection directly to the isObject element (eg. table cell) because of dual position at the end/beginning
-        // of wrapped line (it's at the same time at the end of one line and at the start of the next line).
-        if (range.isCollapsed || isSingleLineRange(editing, range, isForward)) {
-            model.change(writer => {
-                const newPosition = isForward ? range.end : range.start;
-                if (expandSelection) {
-                    const newSelection = model.createSelection(selection.anchor);
-                    newSelection.setFocus(newPosition);
-                    writer.setSelection(newSelection);
-                }
-                else {
-                    writer.setSelection(newPosition);
-                }
-            });
-            evt.stop();
-            data.preventDefault();
-            data.stopPropagation();
-        }
-    };
-}
-/**
- * Finds the range between selection and closest limit element (in the direction of navigation).
- * The position next to limit element is adjusted to the closest allowed `$text` position.
- *
- * Returns `null` if, according to the schema, the resulting range cannot contain a `$text` element.
- *
- * @param editing The editing controller.
- * @param selection The current selection.
- * @param isForward The expected navigation direction.
- */
-function findTextRangeFromSelection(editing, selection, isForward) {
-    const model = editing.model;
-    if (isForward) {
-        const startPosition = selection.focus;
-        const endPosition = getNearestNonInlineLimit(model, startPosition, 'forward');
-        // There is no limit element, browser should handle this.
-        if (!endPosition) {
-            return;
-        }
-        const range = model.createRange(startPosition, endPosition);
-        const lastRangePosition = getNearestTextPosition(model.schema, range, 'backward');
-        if (lastRangePosition) {
-            return model.createRange(startPosition, lastRangePosition);
-        }
-    }
-    else {
-        const endPosition = selection.focus;
-        const startPosition = getNearestNonInlineLimit(model, endPosition, 'backward');
-        // There is no limit element, browser should handle this.
-        if (!startPosition) {
-            return;
-        }
-        const range = model.createRange(startPosition, endPosition);
-        const firstRangePosition = getNearestTextPosition(model.schema, range, 'forward');
-        if (firstRangePosition) {
-            return model.createRange(firstRangePosition, endPosition);
-        }
-    }
-}
-/**
- * Finds the limit element position that is closest to startPosition.
- *
- * @param direction Search direction.
- */
-function getNearestNonInlineLimit(model, startPosition, direction) {
-    const schema = model.schema;
-    const range = model.createRangeIn(startPosition.root);
-    const walkerValueType = direction == 'forward' ? 'elementStart' : 'elementEnd';
-    for (const { previousPosition, item, type } of range.getWalker({ startPosition, direction })) {
-        if (schema.isLimit(item) && !schema.isInline(item)) {
-            return previousPosition;
-        }
-        // Stop looking for isLimit element if the next element is a block element (it is for sure not single line).
-        if (type == walkerValueType && schema.isBlock(item)) {
-            return null;
-        }
-    }
-    return null;
-}
-/**
- * Basing on the provided range, finds the first or last (depending on `direction`) position inside the range
- * that can contain `$text` (according to schema).
- *
- * @param schema The schema.
- * @param range The range to find the position in.
- * @param direction Search direction.
- * @returns The nearest selection position.
- *
- */
-function getNearestTextPosition(schema, range, direction) {
-    const position = direction == 'backward' ? range.end : range.start;
-    if (schema.checkChild(position, '$text')) {
-        return position;
-    }
-    for (const { nextPosition } of range.getWalker({ direction })) {
-        if (schema.checkChild(nextPosition, '$text')) {
-            return nextPosition;
-        }
-    }
-}
-/**
- * Checks if the DOM range corresponding to the provided model range renders as a single line by analyzing DOMRects
- * (verifying if they visually wrap content to the next line).
- *
- * @param editing The editing controller.
- * @param modelRange The current table cell content range.
- * @param isForward The expected navigation direction.
- */
-function isSingleLineRange(editing, modelRange, isForward) {
-    const model = editing.model;
-    const domConverter = editing.view.domConverter;
-    // Wrapped lines contain exactly the same position at the end of current line
-    // and at the beginning of next line. That position's client rect is at the end
-    // of current line. In case of caret at first position of the last line that 'dual'
-    // position would be detected as it's not the last line.
-    if (isForward) {
-        const probe = model.createSelection(modelRange.start);
-        model.modifySelection(probe);
-        // If the new position is at the end of the container then we can't use this position
-        // because it would provide incorrect result for eg caption of image and selection
-        // just before end of it. Also in this case there is no "dual" position.
-        if (!probe.focus.isAtEnd && !modelRange.start.isEqual(probe.focus)) {
-            modelRange = model.createRange(probe.focus, modelRange.end);
-        }
-    }
-    const viewRange = editing.mapper.toViewRange(modelRange);
-    const domRange = domConverter.viewRangeToDom(viewRange);
-    const rects = Rect.getDomRangeRects(domRange);
-    let boundaryVerticalPosition;
-    for (const rect of rects) {
-        if (boundaryVerticalPosition === undefined) {
-            boundaryVerticalPosition = Math.round(rect.bottom);
-            continue;
-        }
-        // Let's check if this rect is in new line.
-        if (Math.round(rect.top) >= boundaryVerticalPosition) {
-            return false;
-        }
-        boundaryVerticalPosition = Math.max(boundaryVerticalPosition, Math.round(rect.bottom));
-    }
-    return true;
-}