@ckeditor/ckeditor5-widget 40.0.0 → 40.1.0

package/src/widgetresize.js

@@ -1,188 +1,188 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module widget/widgetresize
- */
-import Resizer from './widgetresize/resizer';
-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 '../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 default class WidgetResize extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * A map of resizers created using this plugin instance.
-         */
-        this._resizers = new Map();
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'WidgetResize';
-    }
-    /**
-     * @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 Resizer(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 (!Resizer.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;
-        }
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module widget/widgetresize
+ */
+import Resizer from './widgetresize/resizer';
+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 '../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 default class WidgetResize extends Plugin {
+    constructor() {
+        super(...arguments);
+        /**
+         * A map of resizers created using this plugin instance.
+         */
+        this._resizers = new Map();
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'WidgetResize';
+    }
+    /**
+     * @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 Resizer(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 (!Resizer.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.d.ts

@@ -1,94 +1,94 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module widget/widgettoolbarrepository
- */
-import { Plugin, type ToolbarConfigItem } from '@ckeditor/ckeditor5-core';
-import type { ViewDocumentSelection, ViewElement } from '@ckeditor/ckeditor5-engine';
-import { ContextualBalloon } from '@ckeditor/ckeditor5-ui';
-/**
- * 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 default class WidgetToolbarRepository extends Plugin {
-    /**
-     * A map of toolbar definitions.
-     */
-    private _toolbarDefinitions;
-    private _balloon;
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof ContextualBalloon];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "WidgetToolbarRepository";
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    destroy(): void;
-    /**
-     * 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.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: string, { ariaLabel, items, getRelatedElement, balloonClassName }: {
-        ariaLabel?: string;
-        items: Array<ToolbarConfigItem>;
-        getRelatedElement: (selection: ViewDocumentSelection) => (ViewElement | null);
-        balloonClassName?: string;
-    }): void;
-    /**
-     * Iterates over stored toolbars and makes them visible or hidden.
-     */
-    private _updateToolbarsVisibility;
-    /**
-     * Hides the given toolbar.
-     */
-    private _hideToolbar;
-    /**
-     * 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}.
-     */
-    private _showToolbar;
-    private _isToolbarVisible;
-    private _isToolbarInBalloon;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module widget/widgettoolbarrepository
+ */
+import { Plugin, type ToolbarConfigItem } from '@ckeditor/ckeditor5-core';
+import type { ViewDocumentSelection, ViewElement } from '@ckeditor/ckeditor5-engine';
+import { ContextualBalloon } from '@ckeditor/ckeditor5-ui';
+/**
+ * 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 default class WidgetToolbarRepository extends Plugin {
+    /**
+     * A map of toolbar definitions.
+     */
+    private _toolbarDefinitions;
+    private _balloon;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ContextualBalloon];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "WidgetToolbarRepository";
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    destroy(): void;
+    /**
+     * 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.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: string, { ariaLabel, items, getRelatedElement, balloonClassName }: {
+        ariaLabel?: string;
+        items: Array<ToolbarConfigItem>;
+        getRelatedElement: (selection: ViewDocumentSelection) => (ViewElement | null);
+        balloonClassName?: string;
+    }): void;
+    /**
+     * Iterates over stored toolbars and makes them visible or hidden.
+     */
+    private _updateToolbarsVisibility;
+    /**
+     * Hides the given toolbar.
+     */
+    private _hideToolbar;
+    /**
+     * 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}.
+     */
+    private _showToolbar;
+    private _isToolbarVisible;
+    private _isToolbarInBalloon;
+}