@ckeditor/ckeditor5-widget 28.0.0 → 30.0.0

package/README.md

@@ -2,8 +2,8 @@ CKEditor 5 widget API
 ========================================
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-widget.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-widget)
-[![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-widget/status.svg)](https://david-dm.org/ckeditor/ckeditor5-widget)
-[![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-widget/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-widget?type=dev)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://travis-ci.com/ckeditor/ckeditor5)
 
 This package implements the widget API for CKEditor 5.
 

package/lang/translations/ro.po

@@ -22,8 +22,8 @@ msgstr "Bară widget"
 
 msgctxt "The title displayed when a mouse is over a button that inserts a paragraph before a block."
 msgid "Insert paragraph before block"
-msgstr ""
+msgstr "Inserează un paragraf înaintea blocului"
 
 msgctxt "The title displayed when a mouse is over a button that inserts a paragraph after a block."
 msgid "Insert paragraph after block"
-msgstr ""
+msgstr "Inserează un paragraf după bloc"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "28.0.0",
+  "version": "30.0.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,29 +11,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^28.0.0",
-    "@ckeditor/ckeditor5-engine": "^28.0.0",
-    "@ckeditor/ckeditor5-enter": "^28.0.0",
-    "@ckeditor/ckeditor5-ui": "^28.0.0",
-    "@ckeditor/ckeditor5-utils": "^28.0.0",
-    "@ckeditor/ckeditor5-typing": "^28.0.0",
+    "@ckeditor/ckeditor5-core": "^30.0.0",
+    "@ckeditor/ckeditor5-engine": "^30.0.0",
+    "@ckeditor/ckeditor5-enter": "^30.0.0",
+    "@ckeditor/ckeditor5-ui": "^30.0.0",
+    "@ckeditor/ckeditor5-utils": "^30.0.0",
+    "@ckeditor/ckeditor5-typing": "^30.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^28.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^28.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^28.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^28.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
-    "@ckeditor/ckeditor5-essentials": "^28.0.0",
-    "@ckeditor/ckeditor5-heading": "^28.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^28.0.0",
-    "@ckeditor/ckeditor5-image": "^28.0.0",
-    "@ckeditor/ckeditor5-link": "^28.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^28.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^28.0.0",
-    "@ckeditor/ckeditor5-table": "^28.0.0",
-    "@ckeditor/ckeditor5-undo": "^28.0.0"
+    "@ckeditor/ckeditor5-basic-styles": "^30.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^30.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^30.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^30.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^30.0.0",
+    "@ckeditor/ckeditor5-essentials": "^30.0.0",
+    "@ckeditor/ckeditor5-heading": "^30.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^30.0.0",
+    "@ckeditor/ckeditor5-image": "^30.0.0",
+    "@ckeditor/ckeditor5-link": "^30.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^30.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^30.0.0",
+    "@ckeditor/ckeditor5-table": "^30.0.0",
+    "@ckeditor/ckeditor5-undo": "^30.0.0"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -51,6 +51,7 @@
   "files": [
     "lang",
     "src",
-    "theme"
+    "theme",
+    "ckeditor5-metadata.json"
   ]
 }

package/src/utils.js

@@ -7,10 +7,6 @@
  * @module widget/utils
  */
 
-import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
-
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import toArray from '@ckeditor/ckeditor5-utils/src/toarray';
 
@@ -124,7 +120,7 @@ export function toWidget( element, writer, options = {} ) {
 		addSelectionHandle( element, writer );
 	}
 
-	setHighlightHandling( element, writer, addHighlight, removeHighlight );
+	setHighlightHandling( element, writer );
 
 	return element;
 }
@@ -171,10 +167,10 @@ function removeHighlight( element, descriptor, writer ) {
  *
  * @param {module:engine/view/element~Element} element
  * @param {module:engine/view/downcastwriter~DowncastWriter} writer
- * @param {Function} add
- * @param {Function} remove
+ * @param {Function} [add]
+ * @param {Function} [remove]
  */
-export function setHighlightHandling( element, writer, add, remove ) {
+export function setHighlightHandling( element, writer, add = addHighlight, remove = removeHighlight ) {
 	const stack = new HighlightStack();
 
 	stack.on( 'change:top', ( evt, data ) => {
@@ -227,6 +223,7 @@ export function getLabel( element ) {
  * otherwise sets it to `false`,
  * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
  * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
+ * * implements the {@link ~setHighlightHandling view highlight on widget's editable}.
  *
  * Similarly to {@link ~toWidget `toWidget()`} this function should be used in `editingDowncast` only and it is usually
  * used together with {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
@@ -278,26 +275,28 @@ export function toWidgetEditable( editable, writer ) {
 		}
 	} );
 
+	setHighlightHandling( editable, writer );
+
 	return editable;
 }
 
 /**
- * Returns a model position which is optimal (in terms of UX) for inserting a widget block.
+ * Returns a model range which is optimal (in terms of UX) for inserting a widget block.
  *
- * For instance, if a selection is in the middle of a paragraph, the position before this paragraph
+ * For instance, if a selection is in the middle of a paragraph, the collapsed range before this paragraph
  * will be returned so that it is not split. If the selection is at the end of a paragraph,
- * the position after this paragraph will be returned.
+ * the collapsed range after this paragraph will be returned.
  *
- * Note: If the selection is placed in an empty block, that block will be returned. If that position
- * is then passed to {@link module:engine/model/model~Model#insertContent},
- * the block will be fully replaced by the image.
+ * Note: If the selection is placed in an empty block, the range in that block will be returned. If that range
+ * is then passed to {@link module:engine/model/model~Model#insertContent}, the block will be fully replaced
+ * by the inserted widget block.
  *
  * @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
  * The selection based on which the insertion position should be calculated.
  * @param {module:engine/model/model~Model} model Model instance.
- * @returns {module:engine/model/position~Position} The optimal position.
+ * @returns {module:engine/model/range~Range} The optimal range.
  */
-export function findOptimalInsertionPosition( selection, model ) {
+export function findOptimalInsertionRange( selection, model ) {
 	const selectedElement = selection.getSelectedElement();
 
 	if ( selectedElement ) {
@@ -306,11 +305,11 @@ export function findOptimalInsertionPosition( selection, model ) {
 		// If the WidgetTypeAround "fake caret" is displayed, use its position for the insertion
 		// to provide the most predictable UX (https://github.com/ckeditor/ckeditor5/issues/7438).
 		if ( typeAroundFakeCaretPosition ) {
-			return model.createPositionAt( selectedElement, typeAroundFakeCaretPosition );
+			return model.createRange( model.createPositionAt( selectedElement, typeAroundFakeCaretPosition ) );
 		}
 
-		if ( model.schema.isBlock( selectedElement ) ) {
-			return model.createPositionAfter( selectedElement );
+		if ( model.schema.isObject( selectedElement ) && !model.schema.isInline( selectedElement ) ) {
+			return model.createRangeOn( selectedElement );
 		}
 	}
 
@@ -320,34 +319,21 @@ export function findOptimalInsertionPosition( selection, model ) {
 		// If inserting into an empty block – return position in that block. It will get
 		// replaced with the image by insertContent(). #42.
 		if ( firstBlock.isEmpty ) {
-			return model.createPositionAt( firstBlock, 0 );
+			return model.createRange( model.createPositionAt( firstBlock, 0 ) );
 		}
 
 		const positionAfter = model.createPositionAfter( firstBlock );
 
 		// If selection is at the end of the block - return position after the block.
 		if ( selection.focus.isTouching( positionAfter ) ) {
-			return positionAfter;
+			return model.createRange( positionAfter );
 		}
 
 		// Otherwise return position before the block.
-		return model.createPositionBefore( firstBlock );
+		return model.createRange( model.createPositionBefore( firstBlock ) );
 	}
 
-	return selection.focus;
-}
-
-/**
- * Checks if the selection is on an object.
- *
- * @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
- * @param {module:engine/model/schema~Schema} schema
- * @returns {Boolean}
-*/
-export function checkSelectionOnObject( selection, schema ) {
-	const selectedElement = selection.getSelectedElement();
-
-	return !!selectedElement && schema.isObject( selectedElement );
+	return model.createRange( selection.focus );
 }
 
 /**
@@ -409,65 +395,6 @@ export function viewToModelPositionOutsideModelElement( model, viewElementMatche
 	};
 }
 
-/**
- * A positioning function passed to the {@link module:utils/dom/position~getOptimalPosition} helper as a last resort
- * when attaching {@link  module:ui/panel/balloon/balloonpanelview~BalloonPanelView balloon UI} to widgets.
- * It comes in handy when a widget is longer than the visual viewport of the web browser and/or upper/lower boundaries
- * of a widget are off screen because of the web page scroll.
- *
- *	                                       ┌─┄┄┄┄┄┄┄┄┄Widget┄┄┄┄┄┄┄┄┄┐
- *	                                       ┊                         ┊
- *	┌────────────Viewport───────────┐   ┌──╁─────────Viewport────────╁──┐
- *	│  ┏━━━━━━━━━━Widget━━━━━━━━━┓  │   │  ┃            ^            ┃  │
- *	│  ┃            ^            ┃  │   │  ┃   ╭───────/ \───────╮   ┃  │
- *	│  ┃   ╭───────/ \───────╮   ┃  │   │  ┃   │     Balloon     │   ┃  │
- *	│  ┃   │     Balloon     │   ┃  │   │  ┃   ╰─────────────────╯   ┃  │
- *	│  ┃   ╰─────────────────╯   ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │
- *	│  ┃                         ┃  │   │  ┃                         ┃  │
- *	└──╀─────────────────────────╀──┘   └──╀─────────────────────────╀──┘
- *	   ┊                         ┊         ┊                         ┊
- *	   ┊                         ┊         └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘
- *	   ┊                         ┊
- *	   └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘
- *
- * **Note**: Works best if used together with
- * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions default `BalloonPanelView` positions}
- * like `northArrowSouth` and `southArrowNorth`; the transition between these two and this position is smooth.
- *
- * @param {module:utils/dom/rect~Rect} widgetRect A rect of the widget.
- * @param {module:utils/dom/rect~Rect} balloonRect A rect of the balloon.
- * @returns {module:utils/dom/position~Position|null}
- */
-export function centeredBalloonPositionForLongWidgets( widgetRect, balloonRect ) {
-	const viewportRect = new Rect( global.window );
-	const viewportWidgetInsersectionRect = viewportRect.getIntersection( widgetRect );
-
-	const balloonTotalHeight = balloonRect.height + BalloonPanelView.arrowVerticalOffset;
-
-	// If there is enough space above or below the widget then this position should not be used.
-	if ( widgetRect.top - balloonTotalHeight > viewportRect.top || widgetRect.bottom + balloonTotalHeight < viewportRect.bottom ) {
-		return null;
-	}
-
-	// Because this is a last resort positioning, to keep things simple we're not playing with positions of the arrow
-	// like, for instance, "south west" or whatever. Just try to keep the balloon in the middle of the visible area of
-	// the widget for as long as it is possible. If the widgets becomes invisible (because cropped by the viewport),
-	// just... place the balloon in the middle of it (because why not?).
-	const targetRect = viewportWidgetInsersectionRect || widgetRect;
-	const left = targetRect.left + targetRect.width / 2 - balloonRect.width / 2;
-
-	return {
-		top: Math.max( widgetRect.top, 0 ) + BalloonPanelView.arrowVerticalOffset,
-		left,
-		name: 'arrow_n'
-	};
-}
-
 // Default filler offset function applied to all widget elements.
 //
 // @returns {null}

package/src/verticalnavigation.js

@@ -40,15 +40,29 @@ export default function verticalNavigationHandler( editing ) {
 		// Find a range between selection and closest limit element.
 		const range = findTextRangeFromSelection( editing, selection, isForward );
 
-		if ( !range || range.isCollapsed ) {
+		// There is no selection position inside the limit element.
+		if ( !range ) {
 			return;
 		}
 
+		// If already at the edge of a limit element.
+		if ( range.isCollapsed ) {
+			// A collapsed selection at limit edge - nothing more to do.
+			if ( selection.isCollapsed ) {
+				return;
+			}
+
+			// A non collapsed selection is at the limit edge while expanding the selection - let others do their stuff.
+			else if ( expandSelection ) {
+				return;
+			}
+		}
+
 		// If the range is a single line (there is no word wrapping) then move the selection to the position closest to the limit element.
 		//
 		// We can't move the selection directly to the isObject element (eg. table cell) because of dual position at the end/beginning
 		// of wrapped line (it's at the same time at the end of one line and at the start of the next line).
-		if ( isSingleLineRange( editing, range, isForward ) ) {
+		if ( range.isCollapsed || isSingleLineRange( editing, range, isForward ) ) {
 			model.change( writer => {
 				const newPosition = isForward ? range.end : range.start;
 
@@ -94,7 +108,7 @@ function findTextRangeFromSelection( editing, selection, isForward ) {
 		const range = model.createRange( startPosition, endPosition );
 		const lastRangePosition = getNearestTextPosition( model.schema, range, 'backward' );
 
-		if ( lastRangePosition && startPosition.isBefore( lastRangePosition ) ) {
+		if ( lastRangePosition ) {
 			return model.createRange( startPosition, lastRangePosition );
 		}
 
@@ -111,7 +125,7 @@ function findTextRangeFromSelection( editing, selection, isForward ) {
 		const range = model.createRange( startPosition, endPosition );
 		const firstRangePosition = getNearestTextPosition( model.schema, range, 'forward' );
 
-		if ( firstRangePosition && endPosition.isAfter( firstRangePosition ) ) {
+		if ( firstRangePosition ) {
 			return model.createRange( firstRangePosition, endPosition );
 		}
 
@@ -152,7 +166,7 @@ function getNearestNonInlineLimit( model, startPosition, direction ) {
 // @param {module:engine/model/schema~Schema} schema The schema.
 // @param {module:engine/model/range~Range} range The range to find the position in.
 // @param {'forward'|'backward'} direction Search direction.
-// @returns {module:engine/model/position~Position} The nearest selection range.
+// @returns {module:engine/model/position~Position|null} The nearest selection position.
 //
 function getNearestTextPosition( schema, range, direction ) {
 	const position = direction == 'backward' ? range.end : range.start;
@@ -166,6 +180,8 @@ function getNearestTextPosition( schema, range, direction ) {
 			return nextPosition;
 		}
 	}
+
+	return null;
 }
 
 // Checks if the DOM range corresponding to the provided model range renders as a single line by analyzing DOMRects

package/src/widget.js

@@ -11,12 +11,13 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import MouseObserver from '@ckeditor/ckeditor5-engine/src/view/observer/mouseobserver';
 import WidgetTypeAround from './widgettypearound/widgettypearound';
 import Delete from '@ckeditor/ckeditor5-typing/src/delete';
-import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils';
-import { isForwardArrowKeyCode } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import env from '@ckeditor/ckeditor5-utils/src/env';
+import { getLocalizedArrowKeyCodeDirection } from '@ckeditor/ckeditor5-utils/src/keyboard';
 
-import '../theme/widget.css';
 import verticalNavigationHandler from './verticalnavigation';
+import { getLabel, isWidget, WIDGET_SELECTED_CLASS_NAME } from './utils';
+
+import '../theme/widget.css';
 
 /**
  * The widget plugin. It enables base support for widgets.
@@ -52,7 +53,8 @@ export default class Widget extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
-		const view = this.editor.editing.view;
+		const editor = this.editor;
+		const view = editor.editing.view;
 		const viewDocument = view.document;
 
 		/**
@@ -64,17 +66,69 @@ export default class Widget extends Plugin {
 		this._previouslySelected = new Set();
 
 		// Model to view selection converter.
-		// Converts selection placed over widget element to fake selection
+		// Converts selection placed over widget element to fake selection.
+		//
+		// By default, the selection is downcasted by the engine to surround the attribute element, even though its only
+		// child is an inline widget. A similar thing also happens when a collapsed marker is rendered as a UI element
+		// next to an inline widget: the view selection contains both the widget and the marker.
+		//
+		// This prevents creating a correct fake selection when this inline widget is selected. Normalize the selection
+		// in these cases based on the model:
+		//
+		//		[<attributeElement><inlineWidget /></attributeElement>] -> <attributeElement>[<inlineWidget />]</attributeElement>
+		//		[<uiElement></uiElement><inlineWidget />] -> <uiElement></uiElement>[<inlineWidget />]
+		//
+		// Thanks to this:
+		//
+		// * fake selection can be set correctly,
+		// * any logic depending on (View)Selection#getSelectedElement() also works OK.
+		//
+		// See https://github.com/ckeditor/ckeditor5/issues/9524.
+		this.editor.editing.downcastDispatcher.on( 'selection', ( evt, data, conversionApi ) => {
+			const viewWriter = conversionApi.writer;
+			const modelSelection = data.selection;
+
+			// The collapsed selection can't contain any widget.
+			if ( modelSelection.isCollapsed ) {
+				return;
+			}
+
+			const selectedModelElement = modelSelection.getSelectedElement();
+
+			if ( !selectedModelElement ) {
+				return;
+			}
+
+			const selectedViewElement = editor.editing.mapper.toViewElement( selectedModelElement );
+
+			if ( !isWidget( selectedViewElement ) ) {
+				return;
+			}
+
+			if ( !conversionApi.consumable.consume( modelSelection, 'selection' ) ) {
+				return;
+			}
+
+			viewWriter.setSelection( viewWriter.createRangeOn( selectedViewElement ), {
+				fake: true,
+				label: getLabel( selectedViewElement )
+			} );
+		} );
+
+		// Mark all widgets inside the selection with the css class.
+		// This handler is registered at the 'low' priority so it's triggered after the real selection conversion.
 		this.editor.editing.downcastDispatcher.on( 'selection', ( evt, data, conversionApi ) => {
 			// Remove selected class from previously selected widgets.
 			this._clearPreviouslySelectedWidgets( conversionApi.writer );
 
 			const viewWriter = conversionApi.writer;
 			const viewSelection = viewWriter.document.selection;
-			const selectedElement = viewSelection.getSelectedElement();
+
 			let lastMarked = null;
 
 			for ( const range of viewSelection.getRanges() ) {
+				// Note: There could be multiple selected widgets in a range but no fake selection.
+				// All of them must be marked as selected, for instance [<widget></widget><widget></widget>]
 				for ( const value of range ) {
 					const node = value.item;
 
@@ -84,11 +138,6 @@ export default class Widget extends Plugin {
 
 						this._previouslySelected.add( node );
 						lastMarked = node;
-
-						// Check if widget is a single element selected.
-						if ( node == selectedElement ) {
-							viewWriter.setSelection( viewSelection.getRanges(), { fake: true, label: getLabel( selectedElement ) } );
-						}
 					}
 				}
 			}
@@ -208,7 +257,9 @@ export default class Widget extends Plugin {
 		const schema = model.schema;
 		const modelSelection = model.document.selection;
 		const objectElement = modelSelection.getSelectedElement();
-		const isForward = isForwardArrowKeyCode( keyCode, this.editor.locale.contentLanguageDirection );
+		const direction = getLocalizedArrowKeyCodeDirection( keyCode, this.editor.locale.contentLanguageDirection );
+		const isForward = direction == 'down' || direction == 'right';
+		const isVerticalNavigation = direction == 'up' || direction == 'down';
 
 		// If object element is selected.
 		if ( objectElement && schema.isObject( objectElement ) ) {
@@ -227,15 +278,42 @@ export default class Widget extends Plugin {
 			return;
 		}
 
-		// If selection is next to object element.
+		// Handle collapsing of the selection when there is any widget on the edge of selection.
+		// This is needed because browsers have problems with collapsing such selection.
+		if ( !modelSelection.isCollapsed && !domEventData.shiftKey ) {
+			const firstPosition = modelSelection.getFirstPosition();
+			const lastPosition = modelSelection.getLastPosition();
+
+			const firstSelectedNode = firstPosition.nodeAfter;
+			const lastSelectedNode = lastPosition.nodeBefore;
+
+			if ( firstSelectedNode && schema.isObject( firstSelectedNode ) || lastSelectedNode && schema.isObject( lastSelectedNode ) ) {
+				model.change( writer => {
+					writer.setSelection( isForward ? lastPosition : firstPosition );
+				} );
+
+				domEventData.preventDefault();
+				eventInfo.stop();
+			}
+
+			return;
+		}
+
 		// Return if not collapsed.
 		if ( !modelSelection.isCollapsed ) {
 			return;
 		}
 
+		// If selection is next to object element.
+
 		const objectElementNextToSelection = this._getObjectElementNextToSelection( isForward );
 
 		if ( objectElementNextToSelection && schema.isObject( objectElementNextToSelection ) ) {
+			// Do not select an inline widget while handling up/down arrow.
+			if ( schema.isInline( objectElementNextToSelection ) && isVerticalNavigation ) {
+				return;
+			}
+
 			this._setSelectionOverElement( objectElementNextToSelection );
 
 			domEventData.preventDefault();
@@ -338,6 +416,12 @@ export default class Widget extends Plugin {
 		// to its current state after undo.
 		const probe = model.createSelection( modelSelection );
 		model.modifySelection( probe, { direction: forward ? 'forward' : 'backward' } );
+
+		// The selection didn't change so there is nothing there.
+		if ( probe.isEqual( modelSelection ) ) {
+			return null;
+		}
+
 		const objectElement = forward ? probe.focus.nodeBefore : probe.focus.nodeAfter;
 
 		if ( !!objectElement && schema.isObject( objectElement ) ) {

package/src/widgetresize/resizer.js

@@ -7,7 +7,6 @@
  * @module widget/widgetresize/resizer
  */
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import compareArrays from '@ckeditor/ckeditor5-utils/src/comparearrays';
@@ -16,6 +15,7 @@ import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 
 import ResizeState from './resizerstate';
+import SizeView from './sizeview';
 
 /**
  * Represents a resizer for a single resizable object.
@@ -41,7 +41,7 @@ export default class Resizer {
 		 *
 		 * @protected
 		 * @readonly
-		 * @member {module:widget/widgetresize/resizer~SizeView} #_sizeUI
+		 * @member {module:widget/widgetresize/sizeview~SizeView} #_sizeView
 		 */
 
 		/**
@@ -52,17 +52,6 @@ export default class Resizer {
 		 */
 		this._options = options;
 
-		/**
-		 * Container of the entire resize UI.
-		 *
-		 * Note that this property is initialized only after the element bound with the resizer is drawn
-		 * so it will be a `null` when uninitialized.
-		 *
-		 * @private
-		 * @type {HTMLElement|null}
-		 */
-		this._domResizerWrapper = null;
-
 		/**
 		 * A wrapper that is controlled by the resizer. This is usually a widget element.
 		 *
@@ -123,8 +112,6 @@ export default class Resizer {
 				that._appendHandles( domElement );
 				that._appendSizeUI( domElement );
 
-				that._domResizerWrapper = domElement;
-
 				that.on( 'change:isEnabled', ( evt, propName, newValue ) => {
 					domElement.style.display = newValue ? '' : 'none';
 				} );
@@ -153,7 +140,7 @@ export default class Resizer {
 	begin( domResizeHandle ) {
 		this.state = new ResizeState( this._options );
 
-		this._sizeUI.bindToState( this._options, this.state );
+		this._sizeView._bindToState( this._options, this.state );
 
 		this._initialViewWidth = this._options.viewElement.getStyle( 'width' );
 
@@ -307,8 +294,7 @@ export default class Resizer {
 	 * @protected
 	 */
 	_cleanup() {
-		this._sizeUI.dismiss();
-		this._sizeUI.isVisible = false;
+		this._sizeView._dismiss();
 
 		const editingView = this._options.editor.editing.view;
 
@@ -420,6 +406,19 @@ export default class Resizer {
 		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`).
+	 *
+	 * @private
+	 * @member {HTMLElement|null}
+	 */
+	get _domResizerWrapper() {
+		return this._options.editor.editing.view.domConverter.mapViewToDom( this._viewResizerWrapper );
+	}
+
 	/**
 	 * Renders the resize handles in the DOM.
 	 *
@@ -440,20 +439,18 @@ export default class Resizer {
 	}
 
 	/**
-	 * Sets up the {@link #_sizeUI} property and adds it to the passed `domElement`.
+	 * Sets up the {@link #_sizeView} property and adds it to the passed `domElement`.
 	 *
 	 * @private
 	 * @param {HTMLElement} domElement
 	 */
 	_appendSizeUI( domElement ) {
-		const sizeUI = new SizeView();
+		this._sizeView = new SizeView();
 
 		// Make sure icon#element is rendered before passing to appendChild().
-		sizeUI.render();
-
-		this._sizeUI = sizeUI;
+		this._sizeView.render();
 
-		domElement.appendChild( sizeUI.element );
+		domElement.appendChild( this._sizeView.element );
 	}
 
 	/**
@@ -475,61 +472,6 @@ export default class Resizer {
 
 mix( Resizer, ObservableMixin );
 
-/**
- * A view displaying the proposed new element size during the resizing.
- *
- * @extends {module:ui/view~View}
- */
-class SizeView extends View {
-	constructor() {
-		super();
-
-		const bind = this.bindTemplate;
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-size-view',
-					bind.to( 'activeHandlePosition', value => value ? `ck-orientation-${ value }` : '' )
-				],
-				style: {
-					display: bind.if( 'isVisible', 'none', visible => !visible )
-				}
-			},
-			children: [ {
-				text: bind.to( 'label' )
-			} ]
-		} );
-	}
-
-	bindToState( options, resizerState ) {
-		this.bind( 'isVisible' ).to( resizerState, 'proposedWidth', resizerState, 'proposedHeight', ( width, height ) =>
-			width !== null && height !== null );
-
-		this.bind( 'label' ).to(
-			resizerState, 'proposedHandleHostWidth',
-			resizerState, 'proposedHandleHostHeight',
-			resizerState, 'proposedWidthPercents',
-			( width, height, widthPercents ) => {
-				if ( options.unit === 'px' ) {
-					return `${ width }×${ height }`;
-				} else {
-					return `${ widthPercents }%`;
-				}
-			}
-		);
-
-		this.bind( 'activeHandlePosition' ).to( resizerState );
-	}
-
-	dismiss() {
-		this.unbind();
-		this.isVisible = false;
-	}
-}
-
 // @private
 // @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
 // @returns {String} A prefixed HTML class name for the resizer element

package/src/widgetresize/sizeview.js

@@ -0,0 +1,114 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module widget/widgetresize/sizeview
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+
+/**
+ * A view displaying the proposed new element size during the resizing.
+ *
+ * @protected
+ * @extends {module:ui/view~View}
+ */
+export default class SizeView extends View {
+	constructor() {
+		super();
+
+		/**
+		 * The visibility of the view defined based on the existence of the host proposed dimensions.
+		 *
+		 * @private
+		 * @observable
+		 * @readonly
+		 * @member {Boolean} #_isVisible
+		 */
+
+		/**
+		 * The text that will be displayed in the `SizeView` child.
+		 * It can be formatted as the pixel values (e.g. 10x20) or the percentage value (e.g. 10%).
+		 *
+		 * @private
+		 * @observable
+		 * @readonly
+		 * @member {Boolean} #_label
+		 */
+
+		/**
+		 * The position of the view defined based on the host size and active handle position.
+		 *
+		 * @private
+		 * @observable
+		 * @readonly
+		 * @member {String} #_viewPosition
+		 */
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-size-view',
+					bind.to( '_viewPosition', value => value ? `ck-orientation-${ value }` : '' )
+				],
+				style: {
+					display: bind.if( '_isVisible', 'none', visible => !visible )
+				}
+			},
+			children: [ {
+				text: bind.to( '_label' )
+			} ]
+		} );
+	}
+
+	/**
+	 * A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
+	 *
+	 * @protected
+	 * @param {module:widget/widgetresize~ResizerOptions} options
+	 * An object defining the resizer options, used for setting the proper size label.
+	 * @param {module:widget/widgetresize/resizerstate~ResizeState} 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.
+	 *
+	 * @protected
+	 */
+	_dismiss() {
+		this.unbind();
+		this._isVisible = false;
+	}
+}

package/src/widgetresize.js

@@ -38,6 +38,9 @@ export default class WidgetResize extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
+		const editing = this.editor.editing;
+		const domDocument = global.window.document;
+
 		/**
 		 * The currently visible resizer.
 		 *
@@ -60,22 +63,16 @@ export default class WidgetResize extends Plugin {
 		/**
 		 * A map of resizers created using this plugin instance.
 		 *
-		 * @private
+		 * @protected
 		 * @type {Map.<module:engine/view/containerelement~ContainerElement, module:widget/widgetresize/resizer~Resizer>}
 		 */
 		this._resizers = new Map();
 
-		const domDocument = global.window.document;
-
-		this.editor.model.schema.setAttributeProperties( 'width', {
-			isFormatting: true
-		} );
-
-		this.editor.editing.view.addObserver( MouseObserver );
+		editing.view.addObserver( MouseObserver );
 
 		this._observer = Object.create( DomEmitterMixin );
 
-		this.listenTo( this.editor.editing.view.document, 'mousedown', this._mouseDownListener.bind( this ), { priority: 'high' } );
+		this.listenTo( editing.view.document, 'mousedown', this._mouseDownListener.bind( this ), { priority: 'high' } );
 
 		this._observer.listenTo( domDocument, 'mousemove', this._mouseMoveListener.bind( this ) );
 		this._observer.listenTo( domDocument, 'mouseup', this._mouseUpListener.bind( this ) );
@@ -95,6 +92,18 @@ export default class WidgetResize extends Plugin {
 		// Redrawing on any change of the UI of the editor (including content changes).
 		this.editor.ui.on( 'update', this._redrawFocusedResizerThrottled );
 
+		// Remove view widget-resizer mappings for widgets that have been removed from the document.
+		// https://github.com/ckeditor/ckeditor5/issues/10156
+		// https://github.com/ckeditor/ckeditor5/issues/10266
+		this.editor.model.document.on( 'change', () => {
+			for ( const [ viewElement, resizer ] of this._resizers ) {
+				if ( !viewElement.isAttached() ) {
+					this._resizers.delete( viewElement );
+					resizer.destroy();
+				}
+			}
+		}, { priority: 'lowest' } );
+
 		// Resizers need to be redrawn upon window resize, because new window might shrink resize host.
 		this._observer.listenTo( global.window, 'resize', this._redrawFocusedResizerThrottled );
 

package/src/widgettoolbarrepository.js

@@ -11,10 +11,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
-import {
-	isWidget,
-	centeredBalloonPositionForLongWidgets
-} from './utils';
+import { isWidget } from './utils';
 import CKEditorError, { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
@@ -36,7 +33,7 @@ import CKEditorError, { logWarning } from '@ckeditor/ckeditor5-utils/src/ckedito
  *
  *				widgetToolbarRepository.register( 'image', {
  *					items: editor.config.get( 'image.toolbar' ),
- *					getRelatedElement: getSelectedImageWidget
+ *					getRelatedElement: getClosestSelectedImageWidget
  *				} );
  *			}
  *		}
@@ -289,7 +286,7 @@ function getBalloonPositionData( editor, relatedElement ) {
 			defaultPositions.southArrowNorth,
 			defaultPositions.southArrowNorthWest,
 			defaultPositions.southArrowNorthEast,
-			centeredBalloonPositionForLongWidgets
+			defaultPositions.viewportStickyNorth
 		]
 	};
 }

package/src/widgettypearound/widgettypearound.js

@@ -398,6 +398,10 @@ export default class WidgetTypeAround extends Plugin {
 		else if ( modelSelection.isCollapsed ) {
 			shouldStopAndPreventDefault = this._handleArrowKeyPressWhenSelectionNextToAWidget( isForward );
 		}
+		// Handle collapsing a non-collapsed selection that is wider than on a single widget.
+		else if ( !domEventData.shiftKey ) {
+			shouldStopAndPreventDefault = this._handleArrowKeyPressWhenNonCollapsedSelection( isForward );
+		}
 
 		if ( shouldStopAndPreventDefault ) {
 			domEventData.preventDefault();
@@ -492,6 +496,42 @@ export default 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.
+	 *
+	 * @private
+	 * @param {Boolean} isForward `true` when the pressed arrow key was responsible for the forward model selection movement
+	 * as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
+	 * @returns {Boolean} 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;
+		const mapper = editor.editing.mapper;
+		const modelSelection = model.document.selection;
+
+		const selectedModelNode = isForward ?
+			modelSelection.getLastPosition().nodeBefore :
+			modelSelection.getFirstPosition().nodeAfter;
+
+		const selectedViewNode = mapper.toViewElement( selectedModelNode );
+
+		// There is a widget at the collapse position so collapse the selection to the fake caret on it.
+		if ( isTypeAroundWidget( selectedViewNode, selectedModelNode, schema ) ) {
+			model.change( writer => {
+				writer.setSelection( selectedModelNode, 'on' );
+				writer.setSelectionAttribute( TYPE_AROUND_SELECTION_ATTRIBUTE, isForward ? 'after' : 'before' );
+			} );
+
+			return true;
+		}
+
+		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

package/theme/widget.css

@@ -10,6 +10,7 @@
 
 	--ck-resizer-border-radius: var(--ck-border-radius);
 	--ck-resizer-tooltip-offset: 10px;
+	--ck-resizer-tooltip-height: calc(var(--ck-spacing-small) * 2 + 10px);
 }
 
 .ck .ck-widget {
@@ -49,12 +50,15 @@
 	border-radius: var(--ck-resizer-border-radius);
 	font-size: var(--ck-font-size-tiny);
 	display: block;
-	padding: var(--ck-spacing-small);
+	padding: 0 var(--ck-spacing-small);
+	height: var(--ck-resizer-tooltip-height);
+	line-height: var(--ck-resizer-tooltip-height);
 
 	&.ck-orientation-top-left,
 	&.ck-orientation-top-right,
 	&.ck-orientation-bottom-right,
-	&.ck-orientation-bottom-left {
+	&.ck-orientation-bottom-left,
+	&.ck-orientation-above-center {
 		position: absolute;
 	}
 
@@ -77,4 +81,11 @@
 		bottom: var(--ck-resizer-tooltip-offset);
 		left: var(--ck-resizer-tooltip-offset);
 	}
+
+	/* Class applied if the widget is too small to contain the size label */
+	&.ck-orientation-above-center {
+		top: calc(var(--ck-resizer-tooltip-height) * -1);
+		left: 50%;
+		transform: translate(-50%);
+	}
 }

package/CHANGELOG.md

@@ -1,260 +0,0 @@
-Changelog
-=========
-
-All changes in the package are documented in the main repository. See: https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.
-
-Changes for the past releases are available below.
-
-## [19.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v18.0.0...v19.0.0) (2020-04-29)
-
-### MINOR BREAKING CHANGES
-
-* Make sure the latest version of the [`Essentials`](https://ckeditor.com/docs/ckeditor5/latest/api/essentials.html) plugin or the [`SelectAll`](https://ckeditor.com/docs/ckeditor5/latest/api/module_select-all_selectall-SelectAll.html) plugin is installed in your integration. Either is required for proper keystroke handling in editor widgets.
-
-### Bug fixes
-
-* Image resize now cleans up temporary view `width` style changes. Closes [ckeditor/ckeditor5#6060](https://github.com/ckeditor/ckeditor5/issues/6060). ([92226f9](https://github.com/ckeditor/ckeditor5-widget/commit/92226f9))
-
-### Other changes
-
-* Moved the <kbd>Ctrl</kbd>+<kbd>A</kbd> keystroke handling in widgets to the [`SelectAll`](https://ckeditor.com/docs/ckeditor5/latest/api/module_select-all_selectall-SelectAll.html) plugin (see [ckeditor/ckeditor5#6536](https://github.com/ckeditor/ckeditor5/issues/6536)). ([57eb263](https://github.com/ckeditor/ckeditor5-widget/commit/57eb263))
-* Updated translations. ([79d1a21](https://github.com/ckeditor/ckeditor5-widget/commit/79d1a21))
-
-
-## [18.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v17.0.0...v18.0.0) (2020-03-19)
-
-Internal changes only (updated dependencies, documentation, etc.).
-
-
-## [17.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v16.0.0...v17.0.0) (2020-02-19)
-
-### MINOR BREAKING CHANGES
-
-* Resizer options object now also takes an editor instance.
-
-### Features
-
-* Introduced API to temporarily disable the `WidgetToolbarRepository` plugin (prevent the toolbar from showing up). Closes [ckeditor/ckeditor5#5964](https://github.com/ckeditor/ckeditor5/issues/5964). ([b9cf062](https://github.com/ckeditor/ckeditor5-widget/commit/b9cf062))
-
-### Bug fixes
-
-* Fixed image resize behavior upon short clicking a handle without dragging. Image will no longer became full width, nor will it briefly flash an unexpected size. Closes [ckeditor/ckeditor5#5189](https://github.com/ckeditor/ckeditor5/issues/5189). Closes [ckeditor/ckeditor5#5195](https://github.com/ckeditor/ckeditor5/issues/5195). ([d6a5c93](https://github.com/ckeditor/ckeditor5-widget/commit/d6a5c93))
-
-### Other changes
-
-* Align code to changes in `Plugin` API. ([81bb636](https://github.com/ckeditor/ckeditor5-widget/commit/81bb636))
-* Updated translations. ([75b8c83](https://github.com/ckeditor/ckeditor5-widget/commit/75b8c83))
-
-
-## [16.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v15.0.0...v16.0.0) (2019-12-04)
-
-### Other changes
-
-* Updated translations. ([b3bf5f0](https://github.com/ckeditor/ckeditor5-widget/commit/b3bf5f0))
-
-
-## [15.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v11.1.0...v15.0.0) (2019-10-23)
-
-### MAJOR BREAKING CHANGES
-
-* The `drag-handler.svg` icon is now `drag-handle.svg`. If you use it in your integration, please update the path.
-* The `hasSelectionHandler` option of the [`toWidget()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_widget_utils.html#static-function-toWidget) utility has been renamed to `hasSelectionHandle`. Consider this change if you create your own widgets using this helper.
-* `.ck-widget__selection-handler` and `.ck-widget_with-selection-handler` CSS classes set on widgets have been renamed to `.ck-widget__selection-handle` and `.ck-widget_with-selection-handle`. This change may affect styling in your integration.
-
-### Bug fixes
-
-* Initial resize of a side image with no width predefined now gives correct percentage values. ([6c2c52e](https://github.com/ckeditor/ckeditor5-widget/commit/6c2c52e))
-* Keyboard navigation should work around widgets in RTL content. Closes [#97](https://github.com/ckeditor/ckeditor5-widget/issues/97). ([dfbf88d](https://github.com/ckeditor/ckeditor5-widget/commit/dfbf88d))
-
-### Other changes
-
-* Improved the resizer performance. Closes [ckeditor/ckeditor5#5191](https://github.com/ckeditor/ckeditor5/issues/5191). ([1d1de77](https://github.com/ckeditor/ckeditor5-widget/commit/1d1de77))
-* Renamed "handler" to "handle" in the entire package. Closes [#99](https://github.com/ckeditor/ckeditor5-widget/issues/99). ([1d35884](https://github.com/ckeditor/ckeditor5-widget/commit/1d35884))
-* Updated translations. ([b9cb673](https://github.com/ckeditor/ckeditor5-widget/commit/b9cb673)) ([daea4f5](https://github.com/ckeditor/ckeditor5-widget/commit/daea4f5))
-
-
-## [11.1.0](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.4...v11.1.0) (2019-08-26)
-
-### Features
-
-* Introduced image widget resizer. See [ckeditor/ckeditor5-image#241](https://github.com/ckeditor/ckeditor5-image/issues/241). ([c84cd73](https://github.com/ckeditor/ckeditor5-widget/commit/c84cd73))
-
-### Bug fixes
-
-* Improved balloon positioning when there is more than one stack in the rotator. ([763c9ba](https://github.com/ckeditor/ckeditor5-widget/commit/763c9ba))
-* Reposition visible toolbar when it is in a not visible stack of rotator. Closes [ckeditor/ckeditor5#1957](https://github.com/ckeditor/ckeditor5/issues/1957). ([a438c8b](https://github.com/ckeditor/ckeditor5-widget/commit/a438c8b))
-
-### Other changes
-
-* The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([cfd41c1](https://github.com/ckeditor/ckeditor5-widget/commit/cfd41c1))
-* The widget toolbar should have a proper `aria-label` attribute (see [ckeditor/ckeditor5#1404](https://github.com/ckeditor/ckeditor5/issues/1404)). ([aec5888](https://github.com/ckeditor/ckeditor5-widget/commit/aec5888))
-
-
-## [11.0.4](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.3...v11.0.4) (2019-07-10)
-
-Internal changes only (updated dependencies, documentation, etc.).
-
-
-## [11.0.3](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.2...v11.0.3) (2019-07-04)
-
-### Bug fixes
-
-* A proper `DomConverter` method should be used to map a view to DOM when getting balloon position data. Closes [#87](https://github.com/ckeditor/ckeditor5-widget/issues/87). ([160333a](https://github.com/ckeditor/ckeditor5-widget/commit/160333a))
-
-
-## [11.0.2](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.1...v11.0.2) (2019-06-05)
-
-Internal changes only (updated dependencies, documentation, etc.).
-
-
-## [11.0.1](https://github.com/ckeditor/ckeditor5-widget/compare/v11.0.0...v11.0.1) (2019-04-10)
-
-### Bug fixes
-
-* Triple clicking inside a nested editable should not select the entire widget in Safari. Closes [ckeditor/ckeditor5#1463](https://github.com/ckeditor/ckeditor5/issues/1463). ([b7c4765](https://github.com/ckeditor/ckeditor5-widget/commit/b7c4765))
-
-
-## [11.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.3.1...v11.0.0) (2019-02-28)
-
-### Bug fixes
-
-* Editor crashes after <kbd>Enter</kbd> key on an image that is inside a blockquote. Closes [ckeditor/ckeditor5#1555](https://github.com/ckeditor/ckeditor5/issues/1555). ([8a8842b](https://github.com/ckeditor/ckeditor5-widget/commit/8a8842b))
-* Ensured only the widget toolbar attached to the view element which is deepest in the view tree will show up. Code and documentation refactoring in the `WidgetToolbarRepository`. Closes [#60](https://github.com/ckeditor/ckeditor5-widget/issues/60). ([7e11a24](https://github.com/ckeditor/ckeditor5-widget/commit/7e11a24))
-* Make widget in editable clickable. Closes [ckeditor/ckeditor5-table#98](https://github.com/ckeditor/ckeditor5-table/issues/98). ([8226829](https://github.com/ckeditor/ckeditor5-widget/commit/8226829))
-* Pressing <kbd>Enter</kbd> should split parent element when the inline widget is inside a `$block`. Closes [ckeditor/ckeditor5#1529](https://github.com/ckeditor/ckeditor5/issues/1529). ([847d2ab](https://github.com/ckeditor/ckeditor5-widget/commit/847d2ab))
-* Fixed memory leaks during editor initialization and destruction (see [ckeditor/ckeditor5#1341](https://github.com/ckeditor/ckeditor5/issues/1341)). ([2e8f20d](https://github.com/ckeditor/ckeditor5-widget/commit/2e8f20d))
-
-### Other changes
-
-* Introduce support and utils for creating inline widgets. Closes [[ckeditor/ckeditor5#1096](https://github.com/ckeditor/ckeditor5/issues/1096)](https://github.com/ckeditor/ckeditor5/issues/1096). ([38fa159](https://github.com/ckeditor/ckeditor5-widget/commit/38fa159))
-* Renamed the `.ck-widget_selectable` class to `.ck-widget_with-selection-handler` for better semantics. Closes [#66](https://github.com/ckeditor/ckeditor5-widget/issues/66). ([178ad5f](https://github.com/ckeditor/ckeditor5-widget/commit/178ad5f))
-
-### BREAKING CHANGES
-
-* Upgraded minimal versions of Node to `8.0.0` and npm to `5.7.1`. See: [ckeditor/ckeditor5#1507](https://github.com/ckeditor/ckeditor5/issues/1507). ([612ea3c](https://github.com/ckeditor/ckeditor5-cloud-services/commit/612ea3c))
-* The `.ck-widget_selectable` class has been renamed to `.ck-widget_with-selection-handler` for better semantics.
-* The `visibleWhen()` function, a property of an object passed into `WidgetToolbarRepository.register()`, has been renamed to `getRelatedElement()` and must return an editing `View` element the toolbar should be attached to (instead of `Boolean`).
-
-
-## [10.3.1](https://github.com/ckeditor/ckeditor5-widget/compare/v10.3.0...v10.3.1) (2018-12-05)
-
-### Bug fixes
-
-* Selection converter will mark only the topmost widget in case of selecting a widget with another widget nested inside it. Closes [#57](https://github.com/ckeditor/ckeditor5-widget/issues/57). ([a78efec](https://github.com/ckeditor/ckeditor5-widget/commit/a78efec))
-
-### Other changes
-
-* Improved SVG icons size. See [ckeditor/ckeditor5-theme-lark#206](https://github.com/ckeditor/ckeditor5-theme-lark/issues/206). ([5b7a457](https://github.com/ckeditor/ckeditor5-widget/commit/5b7a457))
-
-
-## [10.3.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.2.0...v10.3.0) (2018-10-08)
-
-### Features
-
-* Introduced the `findOptimalInsertionPostion()` utility function. ([9c0d4ce](https://github.com/ckeditor/ckeditor5-widget/commit/9c0d4ce))
-* Introduced the widget toolbar repository. Closes [ckeditor/ckeditor5-ui#442](https://github.com/ckeditor/ckeditor5-ui/issues/442). ([bc45176](https://github.com/ckeditor/ckeditor5-widget/commit/bc45176))
-
-
-## [10.2.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.1.0...v10.2.0) (2018-07-18)
-
-### Features
-
-* Implemented the widget selection handle. Closes [#40](https://github.com/ckeditor/ckeditor5-widget/issues/40). ([bbf9298](https://github.com/ckeditor/ckeditor5-widget/commit/bbf9298))
-
-### Other changes
-
-* Do not set the `contenteditable` property for widgets and their nested editables on Edge due to an awful instability which it causes in this browser. Closes [ckeditor/ckeditor5#1079](https://github.com/ckeditor/ckeditor5/issues/1079). Closes [ckeditor/ckeditor5#1067](https://github.com/ckeditor/ckeditor5/issues/1067). ([ee530b1](https://github.com/ckeditor/ckeditor5-widget/commit/ee530b1))
-
-
-## [10.1.0](https://github.com/ckeditor/ckeditor5-widget/compare/v10.0.0...v10.1.0) (2018-06-21)
-
-### Features
-
-* Creating a paragraph next to the selected widget is possible using the (<kbd>Shift</kbd>+)<kbd>Enter</kbd> key (see [ckeditor/ckeditor5#407](https://github.com/ckeditor/ckeditor5/issues/407)). ([d68b7d0](https://github.com/ckeditor/ckeditor5-widget/commit/d68b7d0))
-
-
-## [10.0.0](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-beta.4...v10.0.0) (2018-04-25)
-
-### Other changes
-
-* Changed the license to GPL2+ only. See [ckeditor/ckeditor5#991](https://github.com/ckeditor/ckeditor5/issues/991). ([88ef879](https://github.com/ckeditor/ckeditor5-widget/commit/88ef879))
-
-### BREAKING CHANGES
-
-* The license under which CKEditor 5 is released has been changed from a triple GPL, LGPL and MPL license to a GPL2+ only. See [ckeditor/ckeditor5#991](https://github.com/ckeditor/ckeditor5/issues/991) for more information.
-
-
-## [1.0.0-beta.4](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-beta.2...v1.0.0-beta.4) (2018-04-19)
-
-Internal changes only (updated dependencies, documentation, etc.).
-
-
-## [1.0.0-beta.2](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2018-04-10)
-
-### Bug fixes
-
-* Replaced nested editable's `.ck-editable` class with `.ck-editor__editable` + `.ck-editor__nested-editable` to stop Grammarly throwing errors. Closes [ckeditor/ckeditor5#578](https://github.com/ckeditor/ckeditor5/issues/578). ([051b326](https://github.com/ckeditor/ckeditor5-widget/commit/051b326))
-
-### Other changes
-
-* Increased the specificity of CSS rules. Introduced the .ck class for editor UI components (see: [ckeditor/ckeditor5#494](https://github.com/ckeditor/ckeditor5/issues/494)). ([abc7def](https://github.com/ckeditor/ckeditor5-widget/commit/abc7def))
-
-### BREAKING CHANGES
-
-* The `.ck-editable` class is no longer available. Use the `.ck-editor__nested-editable` class instead.
-
-
-## [1.0.0-beta.1](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-alpha.2...v1.0.0-beta.1) (2018-03-15)
-
-### Other changes
-
-* Aligned feature class naming to the new scheme. ([23991a4](https://github.com/ckeditor/ckeditor5-widget/commit/23991a4))
-* Migrated package styles to PostCSS. Moved visual styles to `@ckeditor/ckeditor5-theme-lark` (see [ckeditor/ckeditor5-ui#144](https://github.com/ckeditor/ckeditor5-ui/issues/144)). ([857d6d4](https://github.com/ckeditor/ckeditor5-widget/commit/857d6d4))
-* Switched to handling deletion around widgets by using the `delete` event instead of listening directly on key events. Closes [#29](https://github.com/ckeditor/ckeditor5-widget/issues/29). ([ee6cc95](https://github.com/ckeditor/ckeditor5-widget/commit/ee6cc95))
-
-
-## [1.0.0-alpha.2](https://github.com/ckeditor/ckeditor5-widget/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2017-11-14)
-
-### Bug fixes
-
-* The <kbd>Ctrl</kbd>+<kbd>A</kbd> keystroke will be now correctly handled when a widget is selected. Closes [#23](https://github.com/ckeditor/ckeditor5-widget/issues/23). ([3e8f91f](https://github.com/ckeditor/ckeditor5-widget/commit/3e8f91f))
-* View element's `setAttribute()` method should be used with string values of the `contenteditable` attribute. Closes [#26](https://github.com/ckeditor/ckeditor5-widget/issues/26). ([d2a6cf5](https://github.com/ckeditor/ckeditor5-widget/commit/d2a6cf5))
-
-### Other changes
-
-* Widgets highlight remove handler will now use only descriptor id, instead of the full descriptor. ([1dfdc83](https://github.com/ckeditor/ckeditor5-widget/commit/1dfdc83))
-
-
-## [1.0.0-alpha.1](https://github.com/ckeditor/ckeditor5-widget/compare/v0.2.0...v1.0.0-alpha.1) (2017-10-03)
-
-### Bug fixes
-
-* <kbd>Backspace</kbd> and <kbd>Delete</kbd> should not delete a widget when the editor is in the read-only mode. Closes [#6](https://github.com/ckeditor/ckeditor5-widget/issues/6). ([5f64125](https://github.com/ckeditor/ckeditor5-widget/commit/5f64125))
-* Nested element structures next to widgets will be correctly removed when pressing <kbd>Backspace</kbd> or <kbd>Delete</kbd>. Closes [#19](https://github.com/ckeditor/ckeditor5-widget/issues/19). ([27ee848](https://github.com/ckeditor/ckeditor5-widget/commit/27ee848))
-
-
-## [0.2.0](https://github.com/ckeditor/ckeditor5-widget/compare/v0.1.1...v0.2.0) (2017-09-03)
-
-### Bug fixes
-
-* Added initial contenteditable state for editable widget. Closes [#9](https://github.com/ckeditor/ckeditor5-widget/issues/9). ([c6321ff](https://github.com/ckeditor/ckeditor5-widget/commit/c6321ff))
-
-### Features
-
-* <kbd>Ctrl</kbd>+<kbd>A</kbd> in a nested editable should select nested editable's content. Closes [#13](https://github.com/ckeditor/ckeditor5-widget/issues/13). ([35a8aff](https://github.com/ckeditor/ckeditor5-widget/commit/35a8aff))
-
-### Other changes
-
-* Adjusted widget to the editor read-only mode. Closes [#7](https://github.com/ckeditor/ckeditor5-widget/issues/7). ([2726873](https://github.com/ckeditor/ckeditor5-widget/commit/2726873))
-* Introduced highlights support for widgets. Closes [#11](https://github.com/ckeditor/ckeditor5-widget/issues/11). ([0bd3d66](https://github.com/ckeditor/ckeditor5-widget/commit/0bd3d66))
-
-
-## [0.1.1](https://github.com/ckeditor/ckeditor5-widget/compare/v0.1.0...v0.1.1) (2017-05-07)
-
-Internal changes only (updated dependencies, documentation, etc.).
-
-## 0.1.0 (2017-04-05)
-
-### Features
-
-* Initial implementation (the code was moved from the `ckeditor5-image` package). Closes [#1](https://github.com/ckeditor/ckeditor5-widget/issues/1). ([564dd97](https://github.com/ckeditor/ckeditor5-widget/commit/564dd97))