@ckeditor/ckeditor5-widget 41.4.2 → 42.0.0-alpha.0

package/dist/index.js

@@ -10,12 +10,23 @@ import { IconView, Template, ContextualBalloon, ToolbarView, BalloonPanelView, V
 import { Enter } from '@ckeditor/ckeditor5-enter/dist/index.js';
 import { throttle } from 'lodash-es';
 
-class HighlightStack extends EmitterMixin() {
-    /**
-     * Adds highlight descriptor to the stack.
-     *
-     * @fires change:top
-     */ add(descriptor, writer) {
+/**
+ * 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) {
         const stack = this._stack;
         // Save top descriptor and insert new one. If top is changed - fire event.
         const oldTop = stack[0];
@@ -31,11 +42,11 @@ class HighlightStack extends EmitterMixin() {
         }
     }
     /**
-     * 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);
@@ -50,9 +61,9 @@ class HighlightStack extends EmitterMixin() {
         }
     }
     /**
-     * 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.
@@ -72,10 +83,10 @@ class HighlightStack extends EmitterMixin() {
         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.
@@ -83,10 +94,6 @@ class HighlightStack extends EmitterMixin() {
             stack.splice(index, 1);
         }
     }
-    constructor(){
-        super(...arguments);
-        this._stack = [];
-    }
 }
 /**
  * Compares two descriptors by checking their priority and class list.
@@ -177,12 +184,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
         });
     }
@@ -538,23 +545,37 @@ 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';
-class WidgetTypeAround extends Plugin {
-    /**
-     * @inheritDoc
-     */ static get pluginName() {
+/**
+ * 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() {
         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
@@ -586,20 +607,20 @@ class WidgetTypeAround extends Plugin {
         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);
@@ -611,16 +632,16 @@ class WidgetTypeAround extends Plugin {
         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) {
@@ -629,16 +650,16 @@ class WidgetTypeAround extends Plugin {
         }, 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;
@@ -656,12 +677,12 @@ class WidgetTypeAround extends Plugin {
         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;
@@ -687,30 +708,30 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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;
@@ -798,17 +819,17 @@ class WidgetTypeAround extends Plugin {
         }
     }
     /**
-     * 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;
@@ -833,15 +854,15 @@ class WidgetTypeAround extends Plugin {
         }
     }
     /**
-     * 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;
@@ -870,19 +891,19 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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;
@@ -902,14 +923,14 @@ class WidgetTypeAround extends Plugin {
         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;
@@ -928,10 +949,10 @@ class WidgetTypeAround extends Plugin {
         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)=>{
@@ -948,18 +969,18 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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;
@@ -990,18 +1011,18 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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.
@@ -1035,13 +1056,13 @@ class WidgetTypeAround extends Plugin {
         }
     }
     /**
-     * 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;
@@ -1106,11 +1127,11 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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;
@@ -1136,12 +1157,12 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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;
@@ -1161,13 +1182,13 @@ class WidgetTypeAround extends Plugin {
         });
     }
     /**
-     * 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;
@@ -1184,14 +1205,6 @@ class WidgetTypeAround extends Plugin {
             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.
@@ -1450,23 +1463,38 @@ function selectionWillShrink(selection, isForward) {
     return !selection.isCollapsed && selection.isBackward == isForward;
 }
 
-class Widget extends Plugin {
-    /**
-     * @inheritDoc
-     */ static get pluginName() {
+/**
+ * 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() {
         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;
@@ -1623,6 +1651,10 @@ class Widget extends Plugin {
             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'
@@ -1657,8 +1689,8 @@ class Widget extends Plugin {
         });
     }
     /**
-     * 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;
@@ -1695,8 +1727,8 @@ class Widget extends Plugin {
         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;
@@ -1715,14 +1747,14 @@ class Widget extends Plugin {
         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;
@@ -1777,12 +1809,12 @@ class Widget extends Plugin {
         }
     }
     /**
-     * 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();
@@ -1793,11 +1825,11 @@ class Widget extends Plugin {
         }
     }
     /**
-     * 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.
@@ -1824,22 +1856,22 @@ class Widget extends Plugin {
         }
     }
     /**
-     * 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;
@@ -1860,16 +1892,16 @@ class Widget extends Plugin {
         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;
@@ -1890,8 +1922,8 @@ class Widget extends Plugin {
         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;
@@ -1910,12 +1942,6 @@ class Widget extends Plugin {
         });
         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.
@@ -1978,22 +2004,51 @@ class Widget extends Plugin {
     return null;
 }
 
-class WidgetToolbarRepository extends Plugin {
+/**
+ * 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;
     /**
-     * @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')) {
@@ -2027,35 +2082,35 @@ class WidgetToolbarRepository extends Plugin {
         }
     }
     /**
-     * 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;
@@ -2066,11 +2121,11 @@ class WidgetToolbarRepository extends Plugin {
         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
             });
         }
@@ -2097,8 +2152,8 @@ class WidgetToolbarRepository extends Plugin {
         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;
@@ -2130,18 +2185,18 @@ class WidgetToolbarRepository extends Plugin {
         }
     }
     /**
-     * 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)) {
@@ -2174,12 +2229,6 @@ class WidgetToolbarRepository extends Plugin {
     _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');
@@ -2207,31 +2256,76 @@ function isWidgetSelected(selection) {
     return !!(viewElement && isWidget(viewElement));
 }
 
-class ResizeState extends ObservableMixin() {
+/**
+ * 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;
+    }
     /**
-     * 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));
@@ -2252,19 +2346,6 @@ class ResizeState extends ObservableMixin() {
         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.
@@ -2319,33 +2400,9 @@ class ResizeState extends ObservableMixin() {
     return `${replacements[parts[0]]}-${replacements[parts[1]]}`;
 }
 
-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;
-    }
+/**
+ * A view displaying the proposed new element size during the resizing.
+ */ class SizeView extends View {
     constructor(){
         super();
         const bind = this.bindTemplate;
@@ -2368,35 +2425,103 @@ 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;
+    }
 }
 
-class Resizer extends ObservableMixin() {
+/**
+ * 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'
+        });
+    }
     /**
-     * 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;
@@ -2428,23 +2553,23 @@ class Resizer extends ObservableMixin() {
         });
     }
     /**
-     * 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)=>{
@@ -2471,10 +2596,10 @@ class Resizer extends ObservableMixin() {
         });
     }
     /**
-     * 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.
@@ -2484,22 +2609,22 @@ class Resizer extends ObservableMixin() {
         });
     }
     /**
-     * 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)) {
@@ -2554,8 +2679,8 @@ class Resizer extends ObservableMixin() {
         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)=>{
@@ -2563,10 +2688,10 @@ class Resizer extends ObservableMixin() {
         });
     }
     /**
-     * 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;
@@ -2612,37 +2737,37 @@ class Resizer extends ObservableMixin() {
         };
     }
     /**
-     * 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',
@@ -2659,39 +2784,13 @@ class Resizer extends ObservableMixin() {
         }
     }
     /**
-     * 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"`.
@@ -2709,15 +2808,24 @@ function existsInDom(element) {
     return element && element.ownerDocument && element.ownerDocument.contains(element);
 }
 
-class WidgetResize extends Plugin {
+/**
+ * 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 {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * A map of resizers created using this plugin instance.
+	 */ _resizers = new Map();
+    _observer;
+    _redrawSelectedResizerThrottled;
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'WidgetResize';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editing = this.editor.editing;
         const domDocument = global.window.document;
         this.set('selectedResizer', null);
@@ -2759,15 +2867,15 @@ class WidgetResize extends Plugin {
         });
     }
     /**
-     * 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()){
@@ -2776,23 +2884,23 @@ class WidgetResize extends Plugin {
         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();
@@ -2826,15 +2934,15 @@ class WidgetResize extends Plugin {
         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;
@@ -2842,8 +2950,8 @@ class WidgetResize extends Plugin {
         }
     }
     /**
-     * @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;
@@ -2857,8 +2965,8 @@ class WidgetResize extends Plugin {
         }
     }
     /**
-     * @param domEventData Native DOM event.
-     */ _mouseMoveListener(event, domEventData) {
+	 * @param domEventData Native DOM event.
+	 */ _mouseMoveListener(event, domEventData) {
         if (this._activeResizer) {
             this._activeResizer.updateSize(domEventData);
         }
@@ -2869,12 +2977,6 @@ class WidgetResize extends Plugin {
             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 };