@ckeditor/ckeditor5-widget 0.0.0-nightly-20240603.0 → 0.0.0-nightly-20240604.0

package/dist/index.js

@@ -10,23 +10,12 @@ import { IconView, Template, ContextualBalloon, ToolbarView, BalloonPanelView, V
 import { Enter } from '@ckeditor/ckeditor5-enter/dist/index.js';
 import { throttle } from 'lodash-es';
 
-/**
- * Class used to handle the correct order of highlights on elements.
- *
- * When different highlights are applied to same element the correct order should be preserved:
- *
- * * 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}.
- *
- * This way, highlight will be applied with the same rules it is applied on texts.
- */ class HighlightStack extends /* #__PURE__ */ EmitterMixin() {
-    _stack = [];
-    /**
-	 * Adds highlight descriptor to the stack.
-	 *
-	 * @fires change:top
-	 */ add(descriptor, writer) {
+class HighlightStack extends EmitterMixin() {
+    /**
+     * Adds highlight descriptor to the stack.
+     *
+     * @fires change:top
+     */ add(descriptor, writer) {
         const stack = this._stack;
         // Save top descriptor and insert new one. If top is changed - fire event.
         const oldTop = stack[0];
@@ -42,11 +31,11 @@ import { throttle } from 'lodash-es';
         }
     }
     /**
-	 * Removes highlight descriptor from the stack.
-	 *
-	 * @fires change:top
-	 * @param id Id of the descriptor to remove.
-	 */ remove(id, writer) {
+     * Removes highlight descriptor from the stack.
+     *
+     * @fires change:top
+     * @param id Id of the descriptor to remove.
+     */ remove(id, writer) {
         const stack = this._stack;
         const oldTop = stack[0];
         this._removeDescriptor(id);
@@ -61,9 +50,9 @@ import { throttle } from 'lodash-es';
         }
     }
     /**
-	 * 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.
-	 */ _insertDescriptor(descriptor) {
+     * 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.
+     */ _insertDescriptor(descriptor) {
         const stack = this._stack;
         const index = stack.findIndex((item)=>item.id === descriptor.id);
         // Inserting exact same descriptor - do nothing.
@@ -83,10 +72,10 @@ import { throttle } from 'lodash-es';
         stack.splice(i, 0, descriptor);
     }
     /**
-	 * Removes descriptor with given id from the stack.
-	 *
-	 * @param id Descriptor's id.
-	 */ _removeDescriptor(id) {
+     * Removes descriptor with given id from the stack.
+     *
+     * @param id Descriptor's id.
+     */ _removeDescriptor(id) {
         const stack = this._stack;
         const index = stack.findIndex((item)=>item.id === id);
         // If descriptor with same id is on the list - remove it.
@@ -94,6 +83,10 @@ import { throttle } from 'lodash-es';
             stack.splice(index, 1);
         }
     }
+    constructor(){
+        super(...arguments);
+        this._stack = [];
+    }
 }
 /**
  * Compares two descriptors by checking their priority and class list.
@@ -184,12 +177,12 @@ var dragHandleIcon = "<svg viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/
  */ function toWidget(element, writer, options = {}) {
     if (!element.is('containerElement')) {
         /**
-		 * The element passed to `toWidget()` must be a {@link module:engine/view/containerelement~ContainerElement}
-		 * instance.
-		 *
-		 * @error widget-to-widget-wrong-element-type
-		 * @param element The view element passed to `toWidget()`.
-		 */ throw new CKEditorError('widget-to-widget-wrong-element-type', null, {
+         * The element passed to `toWidget()` must be a {@link module:engine/view/containerelement~ContainerElement}
+         * instance.
+         *
+         * @error widget-to-widget-wrong-element-type
+         * @param element The view element passed to `toWidget()`.
+         */ throw new CKEditorError('widget-to-widget-wrong-element-type', null, {
             element
         });
     }
@@ -545,37 +538,23 @@ const POSSIBLE_INSERTION_POSITIONS = [
 // Do the SVG parsing once and then clone the result <svg> DOM element for each new button.
 const RETURN_ARROW_ICON_ELEMENT = new DOMParser().parseFromString(returnIcon, 'image/svg+xml').firstChild;
 const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
-/**
- * A plugin that allows users to type around widgets where normally it is impossible to place the caret due
- * to limitations of web browsers. These "tight spots" occur, for instance, before (or after) a widget being
- * the first (or last) child of its parent or between two block widgets.
- *
- * This plugin extends the {@link module:widget/widget~Widget `Widget`} plugin and injects the user interface
- * with two buttons into each widget instance in the editor. Each of the buttons can be clicked by the
- * user if the widget is next to the "tight spot". Once clicked, a paragraph is created with the selection anchored
- * in it so that users can type (or insert content, paste, etc.) straight away.
- */ class WidgetTypeAround extends Plugin {
-    /**
-	 * A reference to the model widget element that has the fake caret active
-	 * on either side of it. It is later used to remove CSS classes associated with the fake caret
-	 * when the widget no longer needs it.
-	 */ _currentFakeCaretModelElement = null;
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+class WidgetTypeAround extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
         return 'WidgetTypeAround';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             Enter,
             Delete
         ];
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const editor = this.editor;
         const editingView = editor.editing.view;
         // Set a CSS class on the view editing root when the plugin is disabled so all the buttons
@@ -607,20 +586,20 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         this._enableDeleteContentIntegration();
     }
     /**
-	 * @inheritDoc
-	 */ destroy() {
+     * @inheritDoc
+     */ destroy() {
         super.destroy();
         this._currentFakeCaretModelElement = null;
     }
     /**
-	 * Inserts a new paragraph next to a widget element with the selection anchored in it.
-	 *
-	 * **Note**: This method is heavily user-oriented and will both focus the editing view and scroll
-	 * the viewport to the selection in the inserted paragraph.
-	 *
-	 * @param widgetModelElement The model widget element next to which a paragraph is inserted.
-	 * @param position The position where the paragraph is inserted. Either `'before'` or `'after'` the widget.
-	 */ _insertParagraph(widgetModelElement, position) {
+     * Inserts a new paragraph next to a widget element with the selection anchored in it.
+     *
+     * **Note**: This method is heavily user-oriented and will both focus the editing view and scroll
+     * the viewport to the selection in the inserted paragraph.
+     *
+     * @param widgetModelElement The model widget element next to which a paragraph is inserted.
+     * @param position The position where the paragraph is inserted. Either `'before'` or `'after'` the widget.
+     */ _insertParagraph(widgetModelElement, position) {
         const editor = this.editor;
         const editingView = editor.editing.view;
         const attributesToCopy = editor.model.schema.getAttributesWithProperty(widgetModelElement, 'copyOnReplace', true);
@@ -632,16 +611,16 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         editingView.scrollToTheSelection();
     }
     /**
-	 * A wrapper for the {@link module:utils/emittermixin~Emitter#listenTo} method that executes the callbacks only
-	 * when the plugin {@link #isEnabled is enabled}.
-	 *
-	 * @param emitter The object that fires the event.
-	 * @param event The name of the event.
-	 * @param callback The function to be called on event.
-	 * @param options Additional options.
-	 * @param options.priority The priority of this event callback. The higher the priority value the sooner
-	 * the callback will be fired. Events having the same priority are called in the order they were added.
-	 */ _listenToIfEnabled(emitter, event, callback, options) {
+     * A wrapper for the {@link module:utils/emittermixin~Emitter#listenTo} method that executes the callbacks only
+     * when the plugin {@link #isEnabled is enabled}.
+     *
+     * @param emitter The object that fires the event.
+     * @param event The name of the event.
+     * @param callback The function to be called on event.
+     * @param options Additional options.
+     * @param options.priority The priority of this event callback. The higher the priority value the sooner
+     * the callback will be fired. Events having the same priority are called in the order they were added.
+     */ _listenToIfEnabled(emitter, event, callback, options) {
         this.listenTo(emitter, event, (...args)=>{
             // Do not respond if the plugin is disabled.
             if (this.isEnabled) {
@@ -650,16 +629,16 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         }, options);
     }
     /**
-	 * Similar to {@link #_insertParagraph}, this method inserts a paragraph except that it
-	 * does not expect a position. Instead, it performs the insertion next to a selected widget
-	 * according to the `widget-type-around` model selection attribute value (fake caret position).
-	 *
-	 * Because this method requires the `widget-type-around` attribute to be set,
-	 * the insertion can only happen when the widget's fake caret is active (e.g. activated
-	 * using the keyboard).
-	 *
-	 * @returns Returns `true` when the paragraph was inserted (the attribute was present) and `false` otherwise.
-	 */ _insertParagraphAccordingToFakeCaretPosition() {
+     * Similar to {@link #_insertParagraph}, this method inserts a paragraph except that it
+     * does not expect a position. Instead, it performs the insertion next to a selected widget
+     * according to the `widget-type-around` model selection attribute value (fake caret position).
+     *
+     * Because this method requires the `widget-type-around` attribute to be set,
+     * the insertion can only happen when the widget's fake caret is active (e.g. activated
+     * using the keyboard).
+     *
+     * @returns Returns `true` when the paragraph was inserted (the attribute was present) and `false` otherwise.
+     */ _insertParagraphAccordingToFakeCaretPosition() {
         const editor = this.editor;
         const model = editor.model;
         const modelSelection = model.document.selection;
@@ -677,12 +656,12 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         return true;
     }
     /**
-	 * 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}
-	 * wrapper which renders DOM buttons that users can use to insert paragraphs.
-	 */ _enableTypeAroundUIInjection() {
+     * 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}
+     * wrapper which renders DOM buttons that users can use to insert paragraphs.
+     */ _enableTypeAroundUIInjection() {
         const editor = this.editor;
         const schema = editor.model.schema;
         const t = editor.locale.t;
@@ -708,30 +687,30 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Brings support for the fake caret that appears when either:
-	 *
-	 * * the selection moves to a widget from a position next to it using arrow keys,
-	 * * the arrow key is pressed when the widget is already selected.
-	 *
-	 * The fake caret lets the user know that they can start typing or just press
-	 * <kbd>Enter</kbd> to insert a paragraph at the position next to a widget as suggested by the fake caret.
-	 *
-	 * The fake caret disappears when the user changes the selection or the editor
-	 * gets blurred.
-	 *
-	 * The whole idea is as follows:
-	 *
-	 * 1. A user does one of the 2 scenarios described at the beginning.
-	 * 2. The "keydown" listener is executed and the decision is made whether to show or hide the fake caret.
-	 * 3. If it should show up, the `widget-type-around` model selection attribute is set indicating
-	 *    on which side of the widget it should appear.
-	 * 4. The selection dispatcher reacts to the selection attribute and sets CSS classes responsible for the
-	 *    fake caret on the view widget.
-	 * 5. If the fake caret should disappear, the selection attribute is removed and the dispatcher
-	 *    does the CSS class clean-up in the view.
-	 * 6. Additionally, `change:range` and `FocusTracker#isFocused` listeners also remove the selection
-	 *    attribute (the former also removes widget CSS classes).
-	 */ _enableTypeAroundFakeCaretActivationUsingKeyboardArrows() {
+     * Brings support for the fake caret that appears when either:
+     *
+     * * the selection moves to a widget from a position next to it using arrow keys,
+     * * the arrow key is pressed when the widget is already selected.
+     *
+     * The fake caret lets the user know that they can start typing or just press
+     * <kbd>Enter</kbd> to insert a paragraph at the position next to a widget as suggested by the fake caret.
+     *
+     * The fake caret disappears when the user changes the selection or the editor
+     * gets blurred.
+     *
+     * The whole idea is as follows:
+     *
+     * 1. A user does one of the 2 scenarios described at the beginning.
+     * 2. The "keydown" listener is executed and the decision is made whether to show or hide the fake caret.
+     * 3. If it should show up, the `widget-type-around` model selection attribute is set indicating
+     *    on which side of the widget it should appear.
+     * 4. The selection dispatcher reacts to the selection attribute and sets CSS classes responsible for the
+     *    fake caret on the view widget.
+     * 5. If the fake caret should disappear, the selection attribute is removed and the dispatcher
+     *    does the CSS class clean-up in the view.
+     * 6. Additionally, `change:range` and `FocusTracker#isFocused` listeners also remove the selection
+     *    attribute (the former also removes widget CSS classes).
+     */ _enableTypeAroundFakeCaretActivationUsingKeyboardArrows() {
         const editor = this.editor;
         const model = editor.model;
         const modelSelection = model.document.selection;
@@ -819,17 +798,17 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         }
     }
     /**
-	 * A listener executed on each "keydown" in the view document, a part of
-	 * {@link #_enableTypeAroundFakeCaretActivationUsingKeyboardArrows}.
-	 *
-	 * It decides whether the arrow keypress should activate the fake caret or not (also whether it should
-	 * be deactivated).
-	 *
-	 * The fake caret activation is done by setting the `widget-type-around` model selection attribute
-	 * in this listener, and stopping and preventing the event that would normally be handled by the widget
-	 * plugin that is responsible for the regular keyboard navigation near/across all widgets (that
-	 * includes inline widgets, which are ignored by the widget type around plugin).
-	 */ _handleArrowKeyPress(evt, domEventData) {
+     * A listener executed on each "keydown" in the view document, a part of
+     * {@link #_enableTypeAroundFakeCaretActivationUsingKeyboardArrows}.
+     *
+     * It decides whether the arrow keypress should activate the fake caret or not (also whether it should
+     * be deactivated).
+     *
+     * The fake caret activation is done by setting the `widget-type-around` model selection attribute
+     * in this listener, and stopping and preventing the event that would normally be handled by the widget
+     * plugin that is responsible for the regular keyboard navigation near/across all widgets (that
+     * includes inline widgets, which are ignored by the widget type around plugin).
+     */ _handleArrowKeyPress(evt, domEventData) {
         const editor = this.editor;
         const model = editor.model;
         const modelSelection = model.document.selection;
@@ -854,15 +833,15 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         }
     }
     /**
-	 * Handles the keyboard navigation on "keydown" when a widget is currently selected and activates or deactivates
-	 * the fake caret for that widget, depending on the current value of the `widget-type-around` model
-	 * selection attribute and the direction of the pressed arrow key.
-	 *
-	 * @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
-	 * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
-	 * @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
-	 * process the event any further. Returns `false` otherwise.
-	 */ _handleArrowKeyPressOnSelectedWidget(isForward) {
+     * Handles the keyboard navigation on "keydown" when a widget is currently selected and activates or deactivates
+     * the fake caret for that widget, depending on the current value of the `widget-type-around` model
+     * selection attribute and the direction of the pressed arrow key.
+     *
+     * @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
+     * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
+     * @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
+     * process the event any further. Returns `false` otherwise.
+     */ _handleArrowKeyPressOnSelectedWidget(isForward) {
         const editor = this.editor;
         const model = editor.model;
         const modelSelection = model.document.selection;
@@ -891,19 +870,19 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Handles the keyboard navigation on "keydown" when **no** widget is selected but the selection is **directly** next
-	 * to one and upon the fake caret should become active for this widget upon arrow keypress
-	 * (AKA entering/selecting the widget).
-	 *
-	 * **Note**: This code mirrors the implementation from the widget plugin but also adds the selection attribute.
-	 * Unfortunately, there is no safe way to let the widget plugin do the selection part first and then just set the
-	 * selection attribute here in the widget type around plugin. This is why this code must duplicate some from the widget plugin.
-	 *
-	 * @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
-	 * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
-	 * @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
-	 * process the event any further. Returns `false` otherwise.
-	 */ _handleArrowKeyPressWhenSelectionNextToAWidget(isForward) {
+     * Handles the keyboard navigation on "keydown" when **no** widget is selected but the selection is **directly** next
+     * to one and upon the fake caret should become active for this widget upon arrow keypress
+     * (AKA entering/selecting the widget).
+     *
+     * **Note**: This code mirrors the implementation from the widget plugin but also adds the selection attribute.
+     * Unfortunately, there is no safe way to let the widget plugin do the selection part first and then just set the
+     * selection attribute here in the widget type around plugin. This is why this code must duplicate some from the widget plugin.
+     *
+     * @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
+     * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
+     * @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
+     * process the event any further. Returns `false` otherwise.
+     */ _handleArrowKeyPressWhenSelectionNextToAWidget(isForward) {
         const editor = this.editor;
         const model = editor.model;
         const schema = model.schema;
@@ -923,14 +902,14 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         return false;
     }
     /**
-	 * Handles the keyboard navigation on "keydown" when a widget is currently selected (together with some other content)
-	 * and the widget is the first or last element in the selection. It activates or deactivates the fake caret for that widget.
-	 *
-	 * @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
-	 * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
-	 * @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
-	 * process the event any further. Returns `false` otherwise.
-	 */ _handleArrowKeyPressWhenNonCollapsedSelection(isForward) {
+     * Handles the keyboard navigation on "keydown" when a widget is currently selected (together with some other content)
+     * and the widget is the first or last element in the selection. It activates or deactivates the fake caret for that widget.
+     *
+     * @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
+     * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
+     * @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
+     * process the event any further. Returns `false` otherwise.
+     */ _handleArrowKeyPressWhenNonCollapsedSelection(isForward) {
         const editor = this.editor;
         const model = editor.model;
         const schema = model.schema;
@@ -949,10 +928,10 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         return false;
     }
     /**
-	 * Registers a `mousedown` listener for the view document which intercepts events
-	 * coming from the widget type around UI, which happens when a user clicks one of the buttons
-	 * that insert a paragraph next to a widget.
-	 */ _enableInsertingParagraphsOnButtonClick() {
+     * Registers a `mousedown` listener for the view document which intercepts events
+     * coming from the widget type around UI, which happens when a user clicks one of the buttons
+     * that insert a paragraph next to a widget.
+     */ _enableInsertingParagraphsOnButtonClick() {
         const editor = this.editor;
         const editingView = editor.editing.view;
         this._listenToIfEnabled(editingView.document, 'mousedown', (evt, domEventData)=>{
@@ -969,18 +948,18 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Creates the <kbd>Enter</kbd> key listener on the view document that allows the user to insert a paragraph
-	 * near the widget when either:
-	 *
-	 * * The fake caret was first activated using the arrow keys,
-	 * * The entire widget is selected in the model.
-	 *
-	 * In the first case, the new paragraph is inserted according to the `widget-type-around` selection
-	 * attribute (see {@link #_handleArrowKeyPress}).
-	 *
-	 * In the second case, the new paragraph is inserted based on whether a soft (<kbd>Shift</kbd>+<kbd>Enter</kbd>) keystroke
-	 * was pressed or not.
-	 */ _enableInsertingParagraphsOnEnterKeypress() {
+     * Creates the <kbd>Enter</kbd> key listener on the view document that allows the user to insert a paragraph
+     * near the widget when either:
+     *
+     * * The fake caret was first activated using the arrow keys,
+     * * The entire widget is selected in the model.
+     *
+     * In the first case, the new paragraph is inserted according to the `widget-type-around` selection
+     * attribute (see {@link #_handleArrowKeyPress}).
+     *
+     * In the second case, the new paragraph is inserted based on whether a soft (<kbd>Shift</kbd>+<kbd>Enter</kbd>) keystroke
+     * was pressed or not.
+     */ _enableInsertingParagraphsOnEnterKeypress() {
         const editor = this.editor;
         const selection = editor.model.document.selection;
         const editingView = editor.editing.view;
@@ -1011,18 +990,18 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Similar to the {@link #_enableInsertingParagraphsOnEnterKeypress}, it allows the user
-	 * to insert a paragraph next to a widget when the fake caret was activated using arrow
-	 * keys but it responds to typing instead of <kbd>Enter</kbd>.
-	 *
-	 * Listener enabled by this method will insert a new paragraph according to the `widget-type-around`
-	 * model selection attribute as the user simply starts typing, which creates the impression that the fake caret
-	 * behaves like a real one rendered by the browser (AKA your text appears where the caret was).
-	 *
-	 * **Note**: At the moment this listener creates 2 undo steps: one for the `insertParagraph` command
-	 * and another one for actual typing. It is not a disaster but this may need to be fixed
-	 * sooner or later.
-	 */ _enableInsertingParagraphsOnTypingKeystroke() {
+     * Similar to the {@link #_enableInsertingParagraphsOnEnterKeypress}, it allows the user
+     * to insert a paragraph next to a widget when the fake caret was activated using arrow
+     * keys but it responds to typing instead of <kbd>Enter</kbd>.
+     *
+     * Listener enabled by this method will insert a new paragraph according to the `widget-type-around`
+     * model selection attribute as the user simply starts typing, which creates the impression that the fake caret
+     * behaves like a real one rendered by the browser (AKA your text appears where the caret was).
+     *
+     * **Note**: At the moment this listener creates 2 undo steps: one for the `insertParagraph` command
+     * and another one for actual typing. It is not a disaster but this may need to be fixed
+     * sooner or later.
+     */ _enableInsertingParagraphsOnTypingKeystroke() {
         const editor = this.editor;
         const viewDocument = editor.editing.view.document;
         // Note: The priority must precede the default Input plugin insertText handler.
@@ -1056,13 +1035,13 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         }
     }
     /**
-	 * It creates a "delete" event listener on the view document to handle cases when the <kbd>Delete</kbd> or <kbd>Backspace</kbd>
-	 * is pressed and the fake caret is currently active.
-	 *
-	 * The fake caret should create an illusion of a real browser caret so that when it appears before or after
-	 * a widget, pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> should remove a widget or delete the content
-	 * before or after a widget (depending on the content surrounding the widget).
-	 */ _enableDeleteIntegration() {
+     * It creates a "delete" event listener on the view document to handle cases when the <kbd>Delete</kbd> or <kbd>Backspace</kbd>
+     * is pressed and the fake caret is currently active.
+     *
+     * The fake caret should create an illusion of a real browser caret so that when it appears before or after
+     * a widget, pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> should remove a widget or delete the content
+     * before or after a widget (depending on the content surrounding the widget).
+     */ _enableDeleteIntegration() {
         const editor = this.editor;
         const editingView = editor.editing.view;
         const model = editor.model;
@@ -1127,11 +1106,11 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Attaches the {@link module:engine/model/model~Model#event:insertContent} event listener that, for instance, allows the user to paste
-	 * content near a widget when the fake caret is first activated using the arrow keys.
-	 *
-	 * The content is inserted according to the `widget-type-around` selection attribute (see {@link #_handleArrowKeyPress}).
-	 */ _enableInsertContentIntegration() {
+     * Attaches the {@link module:engine/model/model~Model#event:insertContent} event listener that, for instance, allows the user to paste
+     * content near a widget when the fake caret is first activated using the arrow keys.
+     *
+     * The content is inserted according to the `widget-type-around` selection attribute (see {@link #_handleArrowKeyPress}).
+     */ _enableInsertContentIntegration() {
         const editor = this.editor;
         const model = this.editor.model;
         const documentSelection = model.document.selection;
@@ -1157,12 +1136,12 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Attaches the {@link module:engine/model/model~Model#event:insertObject} event listener that modifies the
-	 * `options.findOptimalPosition`parameter to position of fake caret in relation to selected element
-	 * to reflect user's intent of desired insertion position.
-	 *
-	 * The object is inserted according to the `widget-type-around` selection attribute (see {@link #_handleArrowKeyPress}).
-	 */ _enableInsertObjectIntegration() {
+     * Attaches the {@link module:engine/model/model~Model#event:insertObject} event listener that modifies the
+     * `options.findOptimalPosition`parameter to position of fake caret in relation to selected element
+     * to reflect user's intent of desired insertion position.
+     *
+     * The object is inserted according to the `widget-type-around` selection attribute (see {@link #_handleArrowKeyPress}).
+     */ _enableInsertObjectIntegration() {
         const editor = this.editor;
         const model = this.editor.model;
         const documentSelection = model.document.selection;
@@ -1182,13 +1161,13 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
         });
     }
     /**
-	 * Attaches the {@link module:engine/model/model~Model#event:deleteContent} event listener to block the event when the fake
-	 * caret is active.
-	 *
-	 * This is required for cases that trigger {@link module:engine/model/model~Model#deleteContent `model.deleteContent()`}
-	 * before calling {@link module:engine/model/model~Model#insertContent `model.insertContent()`} like, for instance,
-	 * plain text pasting.
-	 */ _enableDeleteContentIntegration() {
+     * Attaches the {@link module:engine/model/model~Model#event:deleteContent} event listener to block the event when the fake
+     * caret is active.
+     *
+     * This is required for cases that trigger {@link module:engine/model/model~Model#deleteContent `model.deleteContent()`}
+     * before calling {@link module:engine/model/model~Model#insertContent `model.insertContent()`} like, for instance,
+     * plain text pasting.
+     */ _enableDeleteContentIntegration() {
         const editor = this.editor;
         const model = this.editor.model;
         const documentSelection = model.document.selection;
@@ -1205,6 +1184,14 @@ const PLUGIN_DISABLED_EDITING_ROOT_CLASS = 'ck-widget__type-around_disabled';
             priority: 'high'
         });
     }
+    constructor(){
+        super(...arguments);
+        /**
+         * A reference to the model widget element that has the fake caret active
+         * on either side of it. It is later used to remove CSS classes associated with the fake caret
+         * when the widget no longer needs it.
+         */ this._currentFakeCaretModelElement = null;
+    }
 }
 /**
  * Injects the type around UI into a view widget instance.
@@ -1463,38 +1450,23 @@ function selectionWillShrink(selection, isForward) {
     return !selection.isCollapsed && selection.isBackward == isForward;
 }
 
-/**
- * The widget plugin. It enables base support for widgets.
- *
- * See {@glink api/widget package page} for more details and documentation.
- *
- * This plugin enables multiple behaviors required by widgets:
- *
- * * 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
- * is added to indicate that widget has been selected.
- * * The mouse and keyboard events handling on and around widget elements.
- */ class Widget extends Plugin {
-    /**
-	 * Holds previously selected widgets.
-	 */ _previouslySelected = new Set();
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+class Widget extends Plugin {
+    /**
+     * @inheritDoc
+     */ static get pluginName() {
         return 'Widget';
     }
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             WidgetTypeAround,
             Delete
         ];
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const editor = this.editor;
         const view = editor.editing.view;
         const viewDocument = view.document;
@@ -1651,10 +1623,6 @@ function selectionWillShrink(selection, isForward) {
             id: 'widget',
             label: t('Keystrokes that can be used when a widget is selected (for example: image, table, etc.)'),
             keystrokes: [
-                {
-                    label: t('Move focus from an editable area back to the parent widget'),
-                    keystroke: 'Esc'
-                },
                 {
                     label: t('Insert a new paragraph directly after a widget'),
                     keystroke: 'Enter'
@@ -1689,8 +1657,8 @@ function selectionWillShrink(selection, isForward) {
         });
     }
     /**
-	 * Handles {@link module:engine/view/document~Document#event:mousedown mousedown} events on widget elements.
-	 */ _onMousedown(eventInfo, domEventData) {
+     * Handles {@link module:engine/view/document~Document#event:mousedown mousedown} events on widget elements.
+     */ _onMousedown(eventInfo, domEventData) {
         const editor = this.editor;
         const view = editor.editing.view;
         const viewDocument = view.document;
@@ -1727,8 +1695,8 @@ function selectionWillShrink(selection, isForward) {
         this._setSelectionOverElement(modelElement);
     }
     /**
-	 * Selects entire block content, e.g. on triple click it selects entire paragraph.
-	 */ _selectBlockContent(element) {
+     * Selects entire block content, e.g. on triple click it selects entire paragraph.
+     */ _selectBlockContent(element) {
         const editor = this.editor;
         const model = editor.model;
         const mapper = editor.editing.mapper;
@@ -1747,14 +1715,14 @@ function selectionWillShrink(selection, isForward) {
         return true;
     }
     /**
-	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and changes
-	 * the model selection when:
-	 *
-	 * * arrow key is pressed when the widget is selected,
-	 * * the selection is next to a widget and the widget should become selected upon the arrow key press.
-	 *
-	 * See {@link #_preventDefaultOnArrowKeyPress}.
-	 */ _handleSelectionChangeOnArrowKeyPress(eventInfo, domEventData) {
+     * Handles {@link module:engine/view/document~Document#event:keydown keydown} events and changes
+     * the model selection when:
+     *
+     * * arrow key is pressed when the widget is selected,
+     * * the selection is next to a widget and the widget should become selected upon the arrow key press.
+     *
+     * See {@link #_preventDefaultOnArrowKeyPress}.
+     */ _handleSelectionChangeOnArrowKeyPress(eventInfo, domEventData) {
         const keyCode = domEventData.keyCode;
         const model = this.editor.model;
         const schema = model.schema;
@@ -1809,12 +1777,12 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * Handles {@link module:engine/view/document~Document#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.
-	 *
-	 * See {@link #_handleSelectionChangeOnArrowKeyPress}.
-	 */ _preventDefaultOnArrowKeyPress(eventInfo, domEventData) {
+     * Handles {@link module:engine/view/document~Document#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.
+     *
+     * See {@link #_handleSelectionChangeOnArrowKeyPress}.
+     */ _preventDefaultOnArrowKeyPress(eventInfo, domEventData) {
         const model = this.editor.model;
         const schema = model.schema;
         const objectElement = model.document.selection.getSelectedElement();
@@ -1825,11 +1793,11 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * Handles delete keys: backspace and delete.
-	 *
-	 * @param isForward Set to true if delete was performed in forward direction.
-	 * @returns Returns `true` if keys were handled correctly.
-	 */ _handleDelete(isForward) {
+     * Handles delete keys: backspace and delete.
+     *
+     * @param isForward Set to true if delete was performed in forward direction.
+     * @returns Returns `true` if keys were handled correctly.
+     */ _handleDelete(isForward) {
         const modelDocument = this.editor.model.document;
         const modelSelection = modelDocument.selection;
         // Do nothing when the read only mode is enabled.
@@ -1856,22 +1824,22 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
-	 *
-	 * @internal
-	 */ _setSelectionOverElement(element) {
+     * Sets {@link module:engine/model/selection~Selection document's selection} over given element.
+     *
+     * @internal
+     */ _setSelectionOverElement(element) {
         this.editor.model.change((writer)=>{
             writer.setSelection(writer.createRangeOn(element));
         });
     }
     /**
-	 * 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`.
-	 *
-	 * @internal
-	 * @param forward Direction of checking.
-	 */ _getObjectElementNextToSelection(forward) {
+     * 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`.
+     *
+     * @internal
+     * @param forward Direction of checking.
+     */ _getObjectElementNextToSelection(forward) {
         const model = this.editor.model;
         const schema = model.schema;
         const modelSelection = model.document.selection;
@@ -1892,16 +1860,16 @@ function selectionWillShrink(selection, isForward) {
         return null;
     }
     /**
-	 * Removes CSS class from previously selected widgets.
-	 */ _clearPreviouslySelectedWidgets(writer) {
+     * Removes CSS class from previously selected widgets.
+     */ _clearPreviouslySelectedWidgets(writer) {
         for (const widget of this._previouslySelected){
             writer.removeClass(WIDGET_SELECTED_CLASS_NAME, widget);
         }
         this._previouslySelected.clear();
     }
     /**
-	 * Moves the document selection into the first nested editable.
-	 */ _selectFirstNestedEditable() {
+     * Moves the document selection into the first nested editable.
+     */ _selectFirstNestedEditable() {
         const editor = this.editor;
         const view = this.editor.editing.view;
         const viewDocument = view.document;
@@ -1922,8 +1890,8 @@ function selectionWillShrink(selection, isForward) {
         return false;
     }
     /**
-	 * Updates the document selection so that it selects first ancestor widget.
-	 */ _selectAncestorWidget() {
+     * Updates the document selection so that it selects first ancestor widget.
+     */ _selectAncestorWidget() {
         const editor = this.editor;
         const mapper = editor.editing.mapper;
         const selection = editor.editing.view.document.selection;
@@ -1942,6 +1910,12 @@ function selectionWillShrink(selection, isForward) {
         });
         return true;
     }
+    constructor(){
+        super(...arguments);
+        /**
+         * Holds previously selected widgets.
+         */ this._previouslySelected = new Set();
+    }
 }
 /**
  * Returns `true` when element is a nested editable or is placed inside one.
@@ -2004,51 +1978,22 @@ function selectionWillShrink(selection, isForward) {
     return null;
 }
 
-/**
- * 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
- * 		} );
- * 	}
- * }
- * ```
- */ class WidgetToolbarRepository extends Plugin {
-    /**
-	 * A map of toolbar definitions.
-	 */ _toolbarDefinitions = new Map();
-    _balloon;
+class WidgetToolbarRepository extends Plugin {
     /**
-	 * @inheritDoc
-	 */ static get requires() {
+     * @inheritDoc
+     */ static get requires() {
         return [
             ContextualBalloon
         ];
     }
     /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'WidgetToolbarRepository';
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const editor = this.editor;
         // Disables the default balloon toolbar for all widgets.
         if (editor.plugins.has('BalloonToolbar')) {
@@ -2082,35 +2027,35 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * 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, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container' }) {
+     * 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, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container' }) {
         // 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 toolbarId The id of the toolbar that has not been configured correctly.
-			 */ logWarning('widget-toolbar-no-items', {
+             * 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 toolbarId The id of the toolbar that has not been configured correctly.
+             */ logWarning('widget-toolbar-no-items', {
                 toolbarId
             });
             return;
@@ -2121,11 +2066,11 @@ function selectionWillShrink(selection, isForward) {
         toolbarView.ariaLabel = ariaLabel || t('Widget toolbar');
         if (this._toolbarDefinitions.has(toolbarId)) {
             /**
-			 * Toolbar with the given id was already added.
-			 *
-			 * @error widget-toolbar-duplicated
-			 * @param toolbarId Toolbar id.
-			 */ throw new CKEditorError('widget-toolbar-duplicated', this, {
+             * Toolbar with the given id was already added.
+             *
+             * @error widget-toolbar-duplicated
+             * @param toolbarId Toolbar id.
+             */ throw new CKEditorError('widget-toolbar-duplicated', this, {
                 toolbarId
             });
         }
@@ -2152,8 +2097,8 @@ function selectionWillShrink(selection, isForward) {
         this._toolbarDefinitions.set(toolbarId, toolbarDefinition);
     }
     /**
-	 * Iterates over stored toolbars and makes them visible or hidden.
-	 */ _updateToolbarsVisibility() {
+     * Iterates over stored toolbars and makes them visible or hidden.
+     */ _updateToolbarsVisibility() {
         let maxRelatedElementDepth = 0;
         let deepestRelatedElement = null;
         let deepestToolbarDefinition = null;
@@ -2185,18 +2130,18 @@ function selectionWillShrink(selection, isForward) {
         }
     }
     /**
-	 * Hides the given toolbar.
-	 */ _hideToolbar(toolbarDefinition) {
+     * 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) {
+     * 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);
         } else if (!this._isToolbarInBalloon(toolbarDefinition)) {
@@ -2229,6 +2174,12 @@ function selectionWillShrink(selection, isForward) {
     _isToolbarInBalloon(toolbar) {
         return this._balloon.hasView(toolbar.view);
     }
+    constructor(){
+        super(...arguments);
+        /**
+         * A map of toolbar definitions.
+         */ this._toolbarDefinitions = new Map();
+    }
 }
 function repositionContextualBalloon(editor, relatedElement) {
     const balloon = editor.plugins.get('ContextualBalloon');
@@ -2256,76 +2207,31 @@ function isWidgetSelected(selection) {
     return !!(viewElement && isWidget(viewElement));
 }
 
-/**
- * Stores the internal state of a single resizable object.
- */ class ResizeState 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.
-	 * This information is only known after the DOM was rendered, so it will be updated later.
-	 *
-	 * @internal
-	 */ _referenceCoordinates;
-    /**
-	 * Resizer options.
-	 */ _options;
-    /**
-	 * The original width (pixels) of the resized object when the resize process was started.
-	 *
-	 * @readonly
-	 */ _originalWidth;
-    /**
-	 * The original height (pixels) of the resized object when the resize process was started.
-	 *
-	 * @readonly
-	 */ _originalHeight;
-    /**
-	 * The original width (percents) of the resized object when the resize process was started.
-	 *
-	 * @readonly
-	 */ _originalWidthPercents;
-    /**
-	 * A width to height ratio of the resized image.
-	 *
-	 * @readonly
-	 */ _aspectRatio;
-    /**
-	 * @param options Resizer options.
-	 */ constructor(options){
-        super();
-        this.set('activeHandlePosition', null);
-        this.set('proposedWidthPercents', null);
-        this.set('proposedWidth', null);
-        this.set('proposedHeight', null);
-        this.set('proposedHandleHostWidth', null);
-        this.set('proposedHandleHostHeight', null);
-        this._options = options;
-        this._referenceCoordinates = null;
-    }
+class ResizeState extends ObservableMixin() {
     /**
-	 * The original width (pixels) of the resized object when the resize process was started.
-	 */ get originalWidth() {
+     * The original width (pixels) of the resized object when the resize process was started.
+     */ get originalWidth() {
         return this._originalWidth;
     }
     /**
-	 * The original height (pixels) of the resized object when the resize process was started.
-	 */ get originalHeight() {
+     * The original height (pixels) of the resized object when the resize process was started.
+     */ get originalHeight() {
         return this._originalHeight;
     }
     /**
-	 * The original width (percents) of the resized object when the resize process was started.
-	 */ get originalWidthPercents() {
+     * The original width (percents) of the resized object when the resize process was started.
+     */ get originalWidthPercents() {
         return this._originalWidthPercents;
     }
     /**
-	 * A width to height ratio of the resized image.
-	 */ get aspectRatio() {
+     * A width to height ratio of the resized image.
+     */ get aspectRatio() {
         return this._aspectRatio;
     }
     /**
-	 *
-	 * @param domResizeHandle The handle used to calculate the reference point.
-	 */ begin(domResizeHandle, domHandleHost, domResizeHost) {
+     *
+     * @param domResizeHandle The handle used to calculate the reference point.
+     */ begin(domResizeHandle, domHandleHost, domResizeHost) {
         const clientRect = new Rect(domHandleHost);
         this.activeHandlePosition = getHandlePosition(domResizeHandle);
         this._referenceCoordinates = getAbsoluteBoundaryPoint(domHandleHost, getOppositePosition(this.activeHandlePosition));
@@ -2346,6 +2252,19 @@ function isWidgetSelected(selection) {
         this.proposedHandleHostWidth = newSize.handleHostWidth;
         this.proposedHandleHostHeight = newSize.handleHostHeight;
     }
+    /**
+     * @param options Resizer options.
+     */ constructor(options){
+        super();
+        this.set('activeHandlePosition', null);
+        this.set('proposedWidthPercents', null);
+        this.set('proposedWidth', null);
+        this.set('proposedHeight', null);
+        this.set('proposedHandleHostWidth', null);
+        this.set('proposedHandleHostHeight', null);
+        this._options = options;
+        this._referenceCoordinates = null;
+    }
 }
 /**
  * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
@@ -2400,9 +2319,33 @@ function isWidgetSelected(selection) {
     return `${replacements[parts[0]]}-${replacements[parts[1]]}`;
 }
 
-/**
- * A view displaying the proposed new element size during the resizing.
- */ class SizeView extends View {
+class SizeView extends View {
+    /**
+     * A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
+     *
+     * @internal
+     * @param options An object defining the resizer options, used for setting the proper size label.
+     * @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
+     */ _bindToState(options, resizeState) {
+        this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height)=>width !== null && height !== null);
+        this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents)=>{
+            if (options.unit === 'px') {
+                return `${width}×${height}`;
+            } else {
+                return `${widthPercents}%`;
+            }
+        });
+        this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', // If the widget is too small to contain the size label, display the label above.
+        (position, width, height)=>width < 50 || height < 50 ? 'above-center' : position);
+    }
+    /**
+     * A method used for cleaning up. It removes the bindings and hides the view.
+     *
+     * @internal
+     */ _dismiss() {
+        this.unbind();
+        this._isVisible = false;
+    }
     constructor(){
         super();
         const bind = this.bindTemplate;
@@ -2425,103 +2368,35 @@ function isWidgetSelected(selection) {
             ]
         });
     }
-    /**
-	 * A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
-	 *
-	 * @internal
-	 * @param options An object defining the resizer options, used for setting the proper size label.
-	 * @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
-	 */ _bindToState(options, resizeState) {
-        this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height)=>width !== null && height !== null);
-        this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents)=>{
-            if (options.unit === 'px') {
-                return `${width}×${height}`;
-            } else {
-                return `${widthPercents}%`;
-            }
-        });
-        this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', // If the widget is too small to contain the size label, display the label above.
-        (position, width, height)=>width < 50 || height < 50 ? 'above-center' : position);
-    }
-    /**
-	 * A method used for cleaning up. It removes the bindings and hides the view.
-	 *
-	 * @internal
-	 */ _dismiss() {
-        this.unbind();
-        this._isVisible = false;
-    }
 }
 
-/**
- * Represents a resizer for a single resizable object.
- */ class Resizer extends /* #__PURE__ */ ObservableMixin() {
-    /**
-	 * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
-	 *
-	 * Note that a new state is created for each resize transaction.
-	 */ _state;
-    /**
-	 * A view displaying the proposed new element size during the resizing.
-	 */ _sizeView;
-    /**
-	 * Options passed to the {@link #constructor}.
-	 */ _options;
-    /**
-	 * 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.
-	 */ _initialViewWidth;
-    /**
-	 * @param options Resizer options.
-	 */ constructor(options){
-        super();
-        this._options = options;
-        this.set('isEnabled', true);
-        this.set('isSelected', false);
-        this.bind('isVisible').to(this, 'isEnabled', this, 'isSelected', (isEnabled, isSelected)=>isEnabled && isSelected);
-        this.decorate('begin');
-        this.decorate('cancel');
-        this.decorate('commit');
-        this.decorate('updateSize');
-        this.on('commit', (event)=>{
-            // State might not be initialized yet. In this case, prevent further handling and make sure that the resizer is
-            // cleaned up (#5195).
-            if (!this.state.proposedWidth && !this.state.proposedWidthPercents) {
-                this._cleanup();
-                event.stop();
-            }
-        }, {
-            priority: 'high'
-        });
-    }
+class Resizer extends ObservableMixin() {
     /**
-	 * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
-	 *
-	 * Note that a new state is created for each resize transaction.
-	 */ get state() {
+     * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
+     *
+     * Note that a new state is created for each resize transaction.
+     */ get state() {
         return this._state;
     }
     /**
-	 * Makes resizer visible in the UI.
-	 */ show() {
+     * Makes resizer visible in the UI.
+     */ show() {
         const editingView = this._options.editor.editing.view;
         editingView.change((writer)=>{
             writer.removeClass('ck-hidden', this._viewResizerWrapper);
         });
     }
     /**
-	 * Hides resizer in the UI.
-	 */ hide() {
+     * Hides resizer in the UI.
+     */ hide() {
         const editingView = this._options.editor.editing.view;
         editingView.change((writer)=>{
             writer.addClass('ck-hidden', this._viewResizerWrapper);
         });
     }
     /**
-	 * Attaches the resizer to the DOM.
-	 */ attach() {
+     * Attaches the resizer to the DOM.
+     */ attach() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const that = this;
         const widgetElement = this._options.viewElement;
@@ -2553,23 +2428,23 @@ function isWidgetSelected(selection) {
         });
     }
     /**
-	 * Starts the resizing process.
-	 *
-	 * Creates a new {@link #state} for the current process.
-	 *
-	 * @fires begin
-	 * @param domResizeHandle Clicked handle.
-	 */ begin(domResizeHandle) {
+     * Starts the resizing process.
+     *
+     * Creates a new {@link #state} for the current process.
+     *
+     * @fires begin
+     * @param domResizeHandle Clicked handle.
+     */ begin(domResizeHandle) {
         this._state = new ResizeState(this._options);
         this._sizeView._bindToState(this._options, this.state);
         this._initialViewWidth = this._options.viewElement.getStyle('width');
         this.state.begin(domResizeHandle, this._getHandleHost(), this._getResizeHost());
     }
     /**
-	 * Updates the proposed size based on `domEventData`.
-	 *
-	 * @fires updateSize
-	 */ updateSize(domEventData) {
+     * Updates the proposed size based on `domEventData`.
+     *
+     * @fires updateSize
+     */ updateSize(domEventData) {
         const newSize = this._proposeNewSize(domEventData);
         const editingView = this._options.editor.editing.view;
         editingView.change((writer)=>{
@@ -2596,10 +2471,10 @@ function isWidgetSelected(selection) {
         });
     }
     /**
-	 * Applies the geometry proposed with the resizer.
-	 *
-	 * @fires commit
-	 */ commit() {
+     * Applies the geometry proposed with the resizer.
+     *
+     * @fires commit
+     */ commit() {
         const unit = this._options.unit || '%';
         const newValue = (unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth) + unit;
         // Both cleanup and onCommit callback are very likely to make view changes. Ensure that it is made in a single step.
@@ -2609,22 +2484,22 @@ function isWidgetSelected(selection) {
         });
     }
     /**
-	 * Cancels and rejects the proposed resize dimensions, hiding the UI.
-	 *
-	 * @fires cancel
-	 */ cancel() {
+     * Cancels and rejects the proposed resize dimensions, hiding the UI.
+     *
+     * @fires cancel
+     */ cancel() {
         this._cleanup();
     }
     /**
-	 * Destroys the resizer.
-	 */ destroy() {
+     * Destroys the resizer.
+     */ destroy() {
         this.cancel();
     }
     /**
-	 * Redraws the resizer.
-	 *
-	 * @param handleHostRect Handle host rectangle might be given to improve performance.
-	 */ redraw(handleHostRect) {
+     * Redraws the resizer.
+     *
+     * @param handleHostRect Handle host rectangle might be given to improve performance.
+     */ redraw(handleHostRect) {
         const domWrapper = this._domResizerWrapper;
         // Refresh only if resizer exists in the DOM.
         if (!existsInDom(domWrapper)) {
@@ -2679,8 +2554,8 @@ function isWidgetSelected(selection) {
         return domElement.classList.contains('ck-widget__resizer__handle');
     }
     /**
-	 * Cleans up the context state.
-	 */ _cleanup() {
+     * Cleans up the context state.
+     */ _cleanup() {
         this._sizeView._dismiss();
         const editingView = this._options.editor.editing.view;
         editingView.change((writer)=>{
@@ -2688,10 +2563,10 @@ function isWidgetSelected(selection) {
         });
     }
     /**
-	 * Calculates the proposed size as the resize handles are dragged.
-	 *
-	 * @param domEventData Event data that caused the size update request. It should be used to calculate the proposed size.
-	 */ _proposeNewSize(domEventData) {
+     * Calculates the proposed size as the resize handles are dragged.
+     *
+     * @param domEventData Event data that caused the size update request. It should be used to calculate the proposed size.
+     */ _proposeNewSize(domEventData) {
         const state = this.state;
         const currentCoordinates = extractCoordinates(domEventData);
         const isCentered = this._options.isCentered ? this._options.isCentered(this) : true;
@@ -2737,37 +2612,37 @@ function isWidgetSelected(selection) {
         };
     }
     /**
-	 * Obtains the resize host.
-	 *
-	 * Resize host is an object that receives dimensions which are the result of resizing.
-	 */ _getResizeHost() {
+     * Obtains the resize host.
+     *
+     * Resize host is an object that receives dimensions which are the result of resizing.
+     */ _getResizeHost() {
         const widgetWrapper = this._domResizerWrapper.parentElement;
         return this._options.getResizeHost(widgetWrapper);
     }
     /**
-	 * Obtains the handle host.
-	 *
-	 * Handle host is an object that the handles are aligned to.
-	 *
-	 * Handle host will not always be an entire widget itself. Take an image as an example. The image widget
-	 * contains an image and a caption. Only the image should be surrounded with handles.
-	 */ _getHandleHost() {
+     * Obtains the handle host.
+     *
+     * Handle host is an object that the handles are aligned to.
+     *
+     * Handle host will not always be an entire widget itself. Take an image as an example. The image widget
+     * contains an image and a caption. Only the image should be surrounded with handles.
+     */ _getHandleHost() {
         const widgetWrapper = this._domResizerWrapper.parentElement;
         return this._options.getHandleHost(widgetWrapper);
     }
     /**
-	 * DOM container of the entire resize UI.
-	 *
-	 * Note that this property will have a value only after the element bound with the resizer is rendered
-	 * (otherwise `null`).
-	 */ get _domResizerWrapper() {
+     * DOM container of the entire resize UI.
+     *
+     * Note that this property will have a value only after the element bound with the resizer is rendered
+     * (otherwise `null`).
+     */ get _domResizerWrapper() {
         return this._options.editor.editing.view.domConverter.mapViewToDom(this._viewResizerWrapper);
     }
     /**
-	 * Renders the resize handles in the DOM.
-	 *
-	 * @param domElement The resizer wrapper.
-	 */ _appendHandles(domElement) {
+     * Renders the resize handles in the DOM.
+     *
+     * @param domElement The resizer wrapper.
+     */ _appendHandles(domElement) {
         const resizerPositions = [
             'top-left',
             'top-right',
@@ -2784,13 +2659,39 @@ function isWidgetSelected(selection) {
         }
     }
     /**
-	 * Sets up the {@link #_sizeView} property and adds it to the passed `domElement`.
-	 */ _appendSizeUI(domElement) {
+     * Sets up the {@link #_sizeView} property and adds it to the passed `domElement`.
+     */ _appendSizeUI(domElement) {
         this._sizeView = new SizeView();
         // Make sure icon#element is rendered before passing to appendChild().
         this._sizeView.render();
         domElement.appendChild(this._sizeView.element);
     }
+    /**
+     * @param options Resizer options.
+     */ constructor(options){
+        super();
+        /**
+         * A wrapper that is controlled by the resizer. This is usually a widget element.
+         */ this._viewResizerWrapper = null;
+        this._options = options;
+        this.set('isEnabled', true);
+        this.set('isSelected', false);
+        this.bind('isVisible').to(this, 'isEnabled', this, 'isSelected', (isEnabled, isSelected)=>isEnabled && isSelected);
+        this.decorate('begin');
+        this.decorate('cancel');
+        this.decorate('commit');
+        this.decorate('updateSize');
+        this.on('commit', (event)=>{
+            // State might not be initialized yet. In this case, prevent further handling and make sure that the resizer is
+            // cleaned up (#5195).
+            if (!this.state.proposedWidth && !this.state.proposedWidthPercents) {
+                this._cleanup();
+                event.stop();
+            }
+        }, {
+            priority: 'high'
+        });
+    }
 }
 /**
  * @param resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
@@ -2808,24 +2709,15 @@ function existsInDom(element) {
     return element && element.ownerDocument && element.ownerDocument.contains(element);
 }
 
-/**
- * The widget resize feature plugin.
- *
- * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
- */ class WidgetResize extends Plugin {
+class WidgetResize extends Plugin {
     /**
-	 * A map of resizers created using this plugin instance.
-	 */ _resizers = new Map();
-    _observer;
-    _redrawSelectedResizerThrottled;
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
+     * @inheritDoc
+     */ static get pluginName() {
         return 'WidgetResize';
     }
     /**
-	 * @inheritDoc
-	 */ init() {
+     * @inheritDoc
+     */ init() {
         const editing = this.editor.editing;
         const domDocument = global.window.document;
         this.set('selectedResizer', null);
@@ -2867,15 +2759,15 @@ function existsInDom(element) {
         });
     }
     /**
-	 * Redraws the selected resizer if there is any selected resizer and if it is visible.
-	 */ redrawSelectedResizer() {
+     * 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() {
+     * @inheritDoc
+     */ destroy() {
         super.destroy();
         this._observer.stopListening();
         for (const resizer of this._resizers.values()){
@@ -2884,23 +2776,23 @@ function existsInDom(element) {
         this._redrawSelectedResizerThrottled.cancel();
     }
     /**
-	 * Marks resizer as selected.
-	 */ select(resizer) {
+     * Marks resizer as selected.
+     */ select(resizer) {
         this.deselect();
         this.selectedResizer = resizer;
         this.selectedResizer.isSelected = true;
     }
     /**
-	 * Deselects currently set resizer.
-	 */ deselect() {
+     * Deselects currently set resizer.
+     */ deselect() {
         if (this.selectedResizer) {
             this.selectedResizer.isSelected = false;
         }
         this.selectedResizer = null;
     }
     /**
-	 * @param options Resizer options.
-	 */ attachTo(options) {
+     * @param options Resizer options.
+     */ attachTo(options) {
         const resizer = new Resizer(options);
         const plugins = this.editor.plugins;
         resizer.attach();
@@ -2934,15 +2826,15 @@ function existsInDom(element) {
         return resizer;
     }
     /**
-	 * Returns a resizer created for a given view element (widget element).
-	 *
-	 * @param viewElement View element associated with the resizer.
-	 */ getResizerByViewElement(viewElement) {
+     * 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) {
+     * Returns a resizer that contains a given resize handle.
+     */ _getResizerByHandle(domResizeHandle) {
         for (const resizer of this._resizers.values()){
             if (resizer.containsHandle(domResizeHandle)) {
                 return resizer;
@@ -2950,8 +2842,8 @@ function existsInDom(element) {
         }
     }
     /**
-	 * @param domEventData Native DOM event.
-	 */ _mouseDownListener(event, domEventData) {
+     * @param domEventData Native DOM event.
+     */ _mouseDownListener(event, domEventData) {
         const resizeHandle = domEventData.domTarget;
         if (!Resizer.isResizeHandle(resizeHandle)) {
             return;
@@ -2965,8 +2857,8 @@ function existsInDom(element) {
         }
     }
     /**
-	 * @param domEventData Native DOM event.
-	 */ _mouseMoveListener(event, domEventData) {
+     * @param domEventData Native DOM event.
+     */ _mouseMoveListener(event, domEventData) {
         if (this._activeResizer) {
             this._activeResizer.updateSize(domEventData);
         }
@@ -2977,6 +2869,12 @@ function existsInDom(element) {
             this._activeResizer = null;
         }
     }
+    constructor(){
+        super(...arguments);
+        /**
+         * A map of resizers created using this plugin instance.
+         */ this._resizers = new Map();
+    }
 }
 
 export { WIDGET_CLASS_NAME, WIDGET_SELECTED_CLASS_NAME, Widget, WidgetResize, WidgetToolbarRepository, WidgetTypeAround, calculateResizeHostAncestorWidth, calculateResizeHostPercentageWidth, findOptimalInsertionRange, getLabel, isWidget, setHighlightHandling, setLabel, toWidget, toWidgetEditable, viewToModelPositionOutsideModelElement };