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

package/src/widgetresize.js

@@ -1,193 +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/widgetresize
- */
-import { WidgetResizer } 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 'es-toolkit/compat';
-import '../theme/widgetresize.css';
-/**
- * The widget resize feature plugin.
- *
- * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
- */
-export class WidgetResize extends Plugin {
-    /**
-     * A map of resizers created using this plugin instance.
-     */
-    _resizers = new Map();
-    _observer;
-    _redrawSelectedResizerThrottled;
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'WidgetResize';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editing = this.editor.editing;
-        const domDocument = global.window.document;
-        this.set('selectedResizer', null);
-        this.set('_activeResizer', null);
-        editing.view.addObserver(MouseObserver);
-        this._observer = new (DomEmitterMixin())();
-        this.listenTo(editing.view.document, 'mousedown', this._mouseDownListener.bind(this), { priority: 'high' });
-        this._observer.listenTo(domDocument, 'mousemove', this._mouseMoveListener.bind(this));
-        this._observer.listenTo(domDocument, 'mouseup', this._mouseUpListener.bind(this));
-        this._redrawSelectedResizerThrottled = throttle(() => this.redrawSelectedResizer(), 200);
-        // Redrawing on any change of the UI of the editor (including content changes).
-        this.editor.ui.on('update', this._redrawSelectedResizerThrottled);
-        // Remove view widget-resizer mappings for widgets that have been removed from the document.
-        // https://github.com/ckeditor/ckeditor5/issues/10156
-        // https://github.com/ckeditor/ckeditor5/issues/10266
-        this.editor.model.document.on('change', () => {
-            for (const [viewElement, resizer] of this._resizers) {
-                if (!viewElement.isAttached()) {
-                    this._resizers.delete(viewElement);
-                    resizer.destroy();
-                }
-            }
-        }, { priority: 'lowest' });
-        // Resizers need to be redrawn upon window resize, because new window might shrink resize host.
-        this._observer.listenTo(global.window, 'resize', this._redrawSelectedResizerThrottled);
-        const viewSelection = this.editor.editing.view.document.selection;
-        viewSelection.on('change', () => {
-            const selectedElement = viewSelection.getSelectedElement();
-            const resizer = this.getResizerByViewElement(selectedElement) || null;
-            if (resizer) {
-                this.select(resizer);
-            }
-            else {
-                this.deselect();
-            }
-        });
-    }
-    /**
-     * Redraws the selected resizer if there is any selected resizer and if it is visible.
-     */
-    redrawSelectedResizer() {
-        if (this.selectedResizer && this.selectedResizer.isVisible) {
-            this.selectedResizer.redraw();
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this._observer.stopListening();
-        for (const resizer of this._resizers.values()) {
-            resizer.destroy();
-        }
-        this._redrawSelectedResizerThrottled.cancel();
-    }
-    /**
-     * Marks resizer as selected.
-     */
-    select(resizer) {
-        this.deselect();
-        this.selectedResizer = resizer;
-        this.selectedResizer.isSelected = true;
-    }
-    /**
-     * Deselects currently set resizer.
-     */
-    deselect() {
-        if (this.selectedResizer) {
-            this.selectedResizer.isSelected = false;
-        }
-        this.selectedResizer = null;
-    }
-    /**
-     * @param options Resizer options.
-     */
-    attachTo(options) {
-        const resizer = new WidgetResizer(options);
-        const plugins = this.editor.plugins;
-        resizer.attach();
-        if (plugins.has('WidgetToolbarRepository')) {
-            // Hiding widget toolbar to improve the performance
-            // (https://github.com/ckeditor/ckeditor5-widget/pull/112#issuecomment-564528765).
-            const widgetToolbarRepository = plugins.get('WidgetToolbarRepository');
-            resizer.on('begin', () => {
-                widgetToolbarRepository.forceDisabled('resize');
-            }, { priority: 'lowest' });
-            resizer.on('cancel', () => {
-                widgetToolbarRepository.clearForceDisabled('resize');
-            }, { priority: 'highest' });
-            resizer.on('commit', () => {
-                widgetToolbarRepository.clearForceDisabled('resize');
-            }, { priority: 'highest' });
-        }
-        this._resizers.set(options.viewElement, resizer);
-        const viewSelection = this.editor.editing.view.document.selection;
-        const selectedElement = viewSelection.getSelectedElement();
-        // If the element the resizer is created for is currently focused, it should become visible.
-        if (this.getResizerByViewElement(selectedElement) == resizer) {
-            this.select(resizer);
-        }
-        return resizer;
-    }
-    /**
-     * Returns a resizer created for a given view element (widget element).
-     *
-     * @param viewElement View element associated with the resizer.
-     */
-    getResizerByViewElement(viewElement) {
-        return this._resizers.get(viewElement);
-    }
-    /**
-     * Returns a resizer that contains a given resize handle.
-     */
-    _getResizerByHandle(domResizeHandle) {
-        for (const resizer of this._resizers.values()) {
-            if (resizer.containsHandle(domResizeHandle)) {
-                return resizer;
-            }
-        }
-    }
-    /**
-     * @param domEventData Native DOM event.
-     */
-    _mouseDownListener(event, domEventData) {
-        const resizeHandle = domEventData.domTarget;
-        if (!WidgetResizer.isResizeHandle(resizeHandle)) {
-            return;
-        }
-        this._activeResizer = this._getResizerByHandle(resizeHandle) || null;
-        if (this._activeResizer) {
-            this._activeResizer.begin(resizeHandle);
-            // Do not call other events when resizing. See: #6755.
-            event.stop();
-            domEventData.preventDefault();
-        }
-    }
-    /**
-     * @param domEventData Native DOM event.
-     */
-    _mouseMoveListener(event, domEventData) {
-        if (this._activeResizer) {
-            this._activeResizer.updateSize(domEventData);
-        }
-    }
-    _mouseUpListener() {
-        if (this._activeResizer) {
-            this._activeResizer.commit();
-            this._activeResizer = null;
-        }
-    }
-}

package/src/widgettoolbarrepository.js

@@ -1,274 +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/widgettoolbarrepository
- */
-import { Plugin } from '@ckeditor/ckeditor5-core';
-import { BalloonPanelView, ContextualBalloon, ToolbarView } from '@ckeditor/ckeditor5-ui';
-import { CKEditorError, logWarning } from '@ckeditor/ckeditor5-utils';
-import { isWidget } from './utils.js';
-/**
- * Widget toolbar repository plugin. A central point for registering widget toolbars. This plugin handles the whole
- * toolbar rendering process and exposes a concise API.
- *
- * To add a toolbar for your widget use the {@link ~WidgetToolbarRepository#register `WidgetToolbarRepository#register()`} method.
- *
- * The following example comes from the {@link module:image/imagetoolbar~ImageToolbar} plugin:
- *
- * ```ts
- * class ImageToolbar extends Plugin {
- * 	static get requires() {
- * 		return [ WidgetToolbarRepository ];
- * 	}
- *
- * 	afterInit() {
- * 		const editor = this.editor;
- * 		const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
- *
- * 		widgetToolbarRepository.register( 'image', {
- * 			items: editor.config.get( 'image.toolbar' ),
- * 			getRelatedElement: getClosestSelectedImageWidget
- * 		} );
- * 	}
- * }
- * ```
- */
-export class WidgetToolbarRepository extends Plugin {
-    /**
-     * A map of toolbar definitions.
-     */
-    _toolbarDefinitions = new Map();
-    _balloon;
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ContextualBalloon];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'WidgetToolbarRepository';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        // Disables the default balloon toolbar for all widgets.
-        if (editor.plugins.has('BalloonToolbar')) {
-            const balloonToolbar = editor.plugins.get('BalloonToolbar');
-            this.listenTo(balloonToolbar, 'show', evt => {
-                if (isWidgetSelected(editor.editing.view.document.selection)) {
-                    evt.stop();
-                }
-            }, { priority: 'high' });
-        }
-        this._balloon = this.editor.plugins.get('ContextualBalloon');
-        this.on('change:isEnabled', () => {
-            this._updateToolbarsVisibility();
-        });
-        this.listenTo(editor.ui, 'update', () => {
-            this._updateToolbarsVisibility();
-        });
-        // UI#update is not fired after focus is back in editor, we need to check if balloon panel should be visible.
-        this.listenTo(editor.ui.focusTracker, 'change:isFocused', () => {
-            this._updateToolbarsVisibility();
-        }, { priority: 'low' });
-    }
-    destroy() {
-        super.destroy();
-        for (const toolbarConfig of this._toolbarDefinitions.values()) {
-            toolbarConfig.view.destroy();
-        }
-    }
-    /**
-     * Registers toolbar in the WidgetToolbarRepository. It renders it in the `ContextualBalloon` based on the value of the invoked
-     * `getRelatedElement` function. Toolbar items are gathered from `items` array.
-     * The balloon's CSS class is by default `ck-toolbar-container` and may be override with the `balloonClassName` option.
-     *
-     * Note: This method should be called in the {@link module:core/plugin~PluginInterface#afterInit `Plugin#afterInit()`}
-     * callback (or later) to make sure that the given toolbar items were already registered by other plugins.
-     *
-     * @param toolbarId An id for the toolbar. Used to
-     * @param options Detailed options
-     * @param options.ariaLabel Label used by assistive technologies to describe this toolbar element.
-     * @param options.items Array of toolbar items.
-     * @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', positions }) {
-        // Trying to register a toolbar without any item.
-        if (!items.length) {
-            /**
-             * When {@link module:widget/widgettoolbarrepository~WidgetToolbarRepository#register registering} a new widget toolbar, you
-             * need to provide a non-empty array with the items that will be inserted into the toolbar.
-             *
-             * If you see this error when integrating the editor, you likely forgot to configure one of the widget toolbars.
-             *
-             * See for instance:
-             *
-             * * {@link module:table/tableconfig~TableConfig#contentToolbar `config.table.contentToolbar`}
-             * * {@link module:image/imageconfig~ImageConfig#toolbar `config.image.toolbar`}
-             *
-             * @error widget-toolbar-no-items
-             * @param {string} toolbarId The id of the toolbar that has not been configured correctly.
-             */
-            logWarning('widget-toolbar-no-items', { toolbarId });
-            return;
-        }
-        const editor = this.editor;
-        const t = editor.t;
-        const toolbarView = new ToolbarView(editor.locale);
-        toolbarView.ariaLabel = ariaLabel || t('Widget toolbar');
-        if (this._toolbarDefinitions.has(toolbarId)) {
-            /**
-             * Toolbar with the given id was already added.
-             *
-             * @error widget-toolbar-duplicated
-             * @param {string} toolbarId Toolbar id.
-             */
-            throw new CKEditorError('widget-toolbar-duplicated', this, { toolbarId });
-        }
-        const toolbarDefinition = {
-            view: toolbarView,
-            getRelatedElement,
-            balloonClassName,
-            itemsConfig: items,
-            positions,
-            initialized: false
-        };
-        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
-        editor.ui.addToolbar(toolbarView, {
-            isContextual: true,
-            beforeFocus: () => {
-                const relatedElement = getRelatedElement(editor.editing.view.document.selection);
-                if (relatedElement) {
-                    this._showToolbar(toolbarDefinition, relatedElement);
-                }
-            },
-            afterBlur: () => {
-                this._hideToolbar(toolbarDefinition);
-            }
-        });
-        this._toolbarDefinitions.set(toolbarId, toolbarDefinition);
-    }
-    /**
-     * Iterates over stored toolbars and makes them visible or hidden.
-     */
-    _updateToolbarsVisibility() {
-        let maxRelatedElementDepth = 0;
-        let deepestRelatedElement = null;
-        let deepestToolbarDefinition = null;
-        for (const definition of this._toolbarDefinitions.values()) {
-            const relatedElement = definition.getRelatedElement(this.editor.editing.view.document.selection);
-            if (!this.isEnabled || !relatedElement) {
-                if (this._isToolbarInBalloon(definition)) {
-                    this._hideToolbar(definition);
-                }
-            }
-            else if (!this.editor.ui.focusTracker.isFocused) {
-                if (this._isToolbarVisible(definition)) {
-                    this._hideToolbar(definition);
-                }
-            }
-            else {
-                const relatedElementDepth = relatedElement.getAncestors().length;
-                // Many toolbars can express willingness to be displayed but they do not know about
-                // each other. Figure out which toolbar is deepest in the view tree to decide which
-                // should be displayed. For instance, if a selected image is inside a table cell, display
-                // the ImageToolbar rather than the TableToolbar (#60).
-                if (relatedElementDepth > maxRelatedElementDepth) {
-                    maxRelatedElementDepth = relatedElementDepth;
-                    deepestRelatedElement = relatedElement;
-                    deepestToolbarDefinition = definition;
-                }
-            }
-        }
-        if (deepestToolbarDefinition) {
-            this._showToolbar(deepestToolbarDefinition, deepestRelatedElement);
-        }
-    }
-    /**
-     * Hides the given toolbar.
-     */
-    _hideToolbar(toolbarDefinition) {
-        this._balloon.remove(toolbarDefinition.view);
-        this.stopListening(this._balloon, 'change:visibleView');
-    }
-    /**
-     * Shows up the toolbar if the toolbar is not visible.
-     * Otherwise, repositions the toolbar's balloon when toolbar's view is the most top view in balloon stack.
-     *
-     * It might happen here that the toolbar's view is under another view. Then do nothing as the other toolbar view
-     * should be still visible after the {@link module:ui/editorui/editorui~EditorUI#event:update}.
-     */
-    _showToolbar(toolbarDefinition, relatedElement) {
-        if (this._isToolbarVisible(toolbarDefinition)) {
-            repositionContextualBalloon(this.editor, relatedElement, toolbarDefinition.positions);
-        }
-        else if (!this._isToolbarInBalloon(toolbarDefinition)) {
-            if (!toolbarDefinition.initialized) {
-                toolbarDefinition.initialized = true;
-                toolbarDefinition.view.fillFromConfig(toolbarDefinition.itemsConfig, this.editor.ui.componentFactory);
-            }
-            this._balloon.add({
-                view: toolbarDefinition.view,
-                position: getBalloonPositionData(this.editor, relatedElement, toolbarDefinition.positions),
-                balloonClassName: toolbarDefinition.balloonClassName
-            });
-            // Update toolbar position each time stack with toolbar view is switched to visible.
-            // This is in a case target element has changed when toolbar was in invisible stack
-            // e.g. target image was wrapped by a block quote.
-            // See https://github.com/ckeditor/ckeditor5-widget/issues/92.
-            this.listenTo(this._balloon, 'change:visibleView', () => {
-                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, toolbarDefinition.positions);
-                    }
-                }
-            });
-        }
-    }
-    _isToolbarVisible(toolbar) {
-        return this._balloon.visibleView === toolbar.view;
-    }
-    _isToolbarInBalloon(toolbar) {
-        return this._balloon.hasView(toolbar.view);
-    }
-}
-function repositionContextualBalloon(editor, relatedElement, positions) {
-    const balloon = editor.plugins.get('ContextualBalloon');
-    const position = getBalloonPositionData(editor, relatedElement, positions);
-    balloon.updatePosition(position);
-}
-function getBalloonPositionData(editor, relatedElement, positions) {
-    const editingView = editor.editing.view;
-    const defaultPositions = BalloonPanelView.defaultPositions;
-    return {
-        target: editingView.domConverter.mapViewToDom(relatedElement),
-        positions: positions || [
-            defaultPositions.northArrowSouth,
-            defaultPositions.northArrowSouthWest,
-            defaultPositions.northArrowSouthEast,
-            defaultPositions.southArrowNorth,
-            defaultPositions.southArrowNorthWest,
-            defaultPositions.southArrowNorthEast,
-            defaultPositions.viewportStickyNorth
-        ]
-    };
-}
-function isWidgetSelected(selection) {
-    const viewElement = selection.getSelectedElement();
-    return !!(viewElement && isWidget(viewElement));
-}

package/src/widgettypearound/utils.js

@@ -1,60 +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/widgettypearound/utils
- */
-import { isWidget } from '../utils.js';
-/**
- * The name of the type around model selection attribute responsible for
- * displaying a fake caret next to a selected widget.
- *
- * @internal
- */
-export 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 function isTypeAroundWidget(viewElement, modelElement, schema) {
-    return !!viewElement && isWidget(viewElement) && !schema.isInline(modelElement);
-}
-/**
- * For the passed HTML element, this helper finds the closest widget type around button ancestor.
- *
- * @internal
- */
-export function getClosestTypeAroundDomButton(domElement) {
-    return domElement.closest('.ck-widget__type-around__button');
-}
-/**
- * For the passed widget type around button element, this helper determines at which position
- * 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.
- */
-export 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
- */
-export function getClosestWidgetViewElement(domElement, domConverter) {
-    const widgetDomElement = domElement.closest('.ck-widget');
-    return domConverter.mapDomToView(widgetDomElement);
-}
-/**
- * For the passed selection instance, it returns the position of the fake caret displayed next to a widget.
- *
- * **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.
- */
-export function getTypeAroundFakeCaretPosition(selection) {
-    return selection.getAttribute(TYPE_AROUND_SELECTION_ATTRIBUTE);
-}