From 22668d98accadd35b7ed54909fa8f4884909a4f8 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Wed, 6 Nov 2019 09:45:57 +0100
Subject: [PATCH 01/15] Fix: Fixed a case where image would get a full width
 just by clicking the resize handle.

---
 src/widgetresize/resizer.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 91169731..4779d201 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -157,10 +157,13 @@ export default class Resizer {
 	 * @fires commit
 	 */
 	commit() {
-		const unit = this._options.unit;
-		const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + this._options.unit;
+		if ( this.state.proposedWidth ) {
+			// State might not be initialized (#5195).
+			const unit = this._options.unit;
+			const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + this._options.unit;
 
-		this._options.onCommit( newValue );
+			this._options.onCommit( newValue );
+		}
 
 		this._cleanup();
 	}

From 2c874d751c359803f547b20ab45646d9f2e44cd9 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Wed, 6 Nov 2019 14:36:47 +0100
Subject: [PATCH 02/15] Internal: Slightly different way of avoiding commit
 execution when there's no state.

---
 src/widgetresize/resizer.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 4779d201..52d88a81 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -71,6 +71,14 @@ export default class Resizer {
 		this.decorate( 'cancel' );
 		this.decorate( 'commit' );
 		this.decorate( 'updateSize' );
+
+		this.on( 'commit', event => {
+			// State might not be initialized (#5195).
+			if ( !this.state.proposedWidth ) {
+				this._cleanup();
+				event.stop();
+			}
+		}, { priority: 'high' } );
 	}
 
 	/**
@@ -157,13 +165,10 @@ export default class Resizer {
 	 * @fires commit
 	 */
 	commit() {
-		if ( this.state.proposedWidth ) {
-			// State might not be initialized (#5195).
-			const unit = this._options.unit;
-			const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + this._options.unit;
+		const unit = this._options.unit;
+		const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + this._options.unit;
 
-			this._options.onCommit( newValue );
-		}
+		this._options.onCommit( newValue );
 
 		this._cleanup();
 	}

From 4fbf26c380100709d01f59ee8114c02756b8e22d Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 14 Nov 2019 11:45:42 +0100
Subject: [PATCH 03/15] PoC for the resizer operating on views rather than on
 DOM directly.

---
 src/widgetresize.js         |  7 +++--
 src/widgetresize/resizer.js | 51 +++++++++++++++++++++----------------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index cd1ebae4..0aa41ba6 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -86,7 +86,7 @@ export default class WidgetResize extends Plugin {
 
 		this._observer.listenTo( domDocument, 'mousemove', ( event, domEventData ) => {
 			if ( this._activeResizer ) {
-				this._activeResizer.updateSize( domEventData );
+				this._activeResizer.updateSize( domEventData, this.editor );
 			}
 		} );
 
@@ -100,11 +100,14 @@ export default class WidgetResize extends Plugin {
 
 		const redrawFocusedResizer = () => {
 			if ( this._visibleResizer ) {
-				this._visibleResizer.redraw();
+				this.editor.editing.view.change( writer => {
+					this._visibleResizer.redraw( null, writer );
+				} );
 			}
 		};
 
 		const redrawFocusedResizerThrottled = throttle( redrawFocusedResizer, 200 ); // 5fps
+		// const redrawFocusedResizerThrottled = throttle( redrawFocusedResizer, 200 ); // 5fps
 
 		// Redraws occurring upon a change of visible resizer must not be throttled, as it is crucial for the initial
 		// render. Without it the resizer frame would be misaligned with resizing host for a fraction of second.
diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 52d88a81..564a5f62 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -111,6 +111,8 @@ export default class Resizer {
 		// Append the resizer wrapper to the widget's wrapper.
 		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
 		writer.addClass( 'ck-widget_with-resizer', widgetElement );
+
+		this._resizerWrapperView = viewResizerWrapper;
 	}
 
 	/**
@@ -135,28 +137,33 @@ export default class Resizer {
 	 * @fires updateSize
 	 * @param {Event} domEventData
 	 */
-	updateSize( domEventData ) {
-		const domHandleHost = this._getHandleHost();
-		const domResizeHost = this._getResizeHost();
-		const unit = this._options.unit;
-		const newSize = this._proposeNewSize( domEventData );
+	updateSize( domEventData, editor ) {
+		editor.editing.view.change( writer => {
+			const domHandleHost = this._getHandleHost();
+			const domResizeHost = this._getResizeHost();
+			const unit = this._options.unit;
+			const newSize = this._proposeNewSize( domEventData );
 
-		domResizeHost.style.width = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
+			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
 
-		const domHandleHostRect = new Rect( domHandleHost );
+			domResizeHost.style.width = newWidth;
+			writer.setStyle( 'width', newWidth, this._options.viewElement );
 
-		newSize.handleHostWidth = Math.round( domHandleHostRect.width );
-		newSize.handleHostHeight = Math.round( domHandleHostRect.height );
+			const domHandleHostRect = new Rect( domHandleHost );
 
-		// Handle max-width limitation.
-		const domResizeHostRect = new Rect( domHandleHost );
+			newSize.handleHostWidth = Math.round( domHandleHostRect.width );
+			newSize.handleHostHeight = Math.round( domHandleHostRect.height );
 
-		newSize.width = Math.round( domResizeHostRect.width );
-		newSize.height = Math.round( domResizeHostRect.height );
+			// Handle max-width limitation.
+			const domResizeHostRect = new Rect( domHandleHost );
 
-		this.redraw( domHandleHostRect );
+			newSize.width = Math.round( domResizeHostRect.width );
+			newSize.height = Math.round( domResizeHostRect.height );
 
-		this.state.update( newSize );
+			this.redraw( domHandleHostRect, writer );
+
+			this.state.update( newSize );
+		} );
 	}
 
 	/**
@@ -194,7 +201,7 @@ export default class Resizer {
 	 *
 	 * @param {module:utils/dom/rect~Rect} [handleHostRect] Handle host rectangle might be given to improve performance.
 	 */
-	redraw( handleHostRect ) {
+	redraw( handleHostRect, writer ) {
 		// TODO review this
 		const domWrapper = this._domResizerWrapper;
 
@@ -204,8 +211,8 @@ export default class Resizer {
 			const handleHost = this._getHandleHost();
 			const clientRect = handleHostRect || new Rect( handleHost );
 
-			domWrapper.style.width = clientRect.width + 'px';
-			domWrapper.style.height = clientRect.height + 'px';
+			writer.setStyle( 'width', clientRect.width + 'px', this._resizerWrapperView );
+			writer.setStyle( 'height', clientRect.height + 'px', this._resizerWrapperView );
 
 			const offsets = {
 				left: handleHost.offsetLeft,
@@ -219,11 +226,11 @@ export default class Resizer {
 			// or simply another editable. By doing that the border and resizers are shown
 			// only around the resize host.
 			if ( !widgetWrapper.isSameNode( handleHost ) ) {
-				domWrapper.style.left = offsets.left + 'px';
-				domWrapper.style.top = offsets.top + 'px';
+				writer.setStyle( 'left', offsets.left + 'px', this._resizerWrapperView );
+				writer.setStyle( 'top', offsets.top + 'px', this._resizerWrapperView );
 
-				domWrapper.style.height = offsets.height + 'px';
-				domWrapper.style.width = offsets.width + 'px';
+				writer.setStyle( 'height', offsets.height + 'px', this._resizerWrapperView );
+				writer.setStyle( 'width', offsets.width + 'px', this._resizerWrapperView );
 			}
 		}
 

From 68044f0dabdf31770e45ba75e23e909f70bd47a4 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 14 Nov 2019 11:48:26 +0100
Subject: [PATCH 04/15] Removed one leftover.

---
 src/widgetresize.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index 0aa41ba6..5184f781 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -107,7 +107,6 @@ export default class WidgetResize extends Plugin {
 		};
 
 		const redrawFocusedResizerThrottled = throttle( redrawFocusedResizer, 200 ); // 5fps
-		// const redrawFocusedResizerThrottled = throttle( redrawFocusedResizer, 200 ); // 5fps
 
 		// Redraws occurring upon a change of visible resizer must not be throttled, as it is crucial for the initial
 		// render. Without it the resizer frame would be misaligned with resizing host for a fraction of second.

From 146d262063e810ca7c96a554ff8be6260c83ce26 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 14 Nov 2019 12:10:15 +0100
Subject: [PATCH 05/15] Checkpoint.

---
 src/widgetresize/resizer.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 564a5f62..14187fbe 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -138,16 +138,34 @@ export default class Resizer {
 	 * @param {Event} domEventData
 	 */
 	updateSize( domEventData, editor ) {
+		const newSize = this._proposeNewSize( domEventData );
+
+		// editor.editing.view.change( writer => {
+		// 	const domResizeHost = this._getResizeHost();
+		// 	const unit = this._options.unit;
+
+		// 	const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
+
+		// 	newSize.width = parseInt( newWidth );
+		// 	newSize.height = 20;
+		// 	newSize.handleHostWidth = parseInt( newWidth );
+		// 	newSize.handleHostHeight = 20;
+
+		// 	writer.setStyle( 'width', newWidth, this._options.viewElement );
+
+		// 	this.state.update( newSize );
+		// } );
+
 		editor.editing.view.change( writer => {
-			const domHandleHost = this._getHandleHost();
-			const domResizeHost = this._getResizeHost();
 			const unit = this._options.unit;
-			const newSize = this._proposeNewSize( domEventData );
 
 			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
 
-			domResizeHost.style.width = newWidth;
 			writer.setStyle( 'width', newWidth, this._options.viewElement );
+		} );
+
+		editor.editing.view.change( writer => {
+			const domHandleHost = this._getHandleHost();
 
 			const domHandleHostRect = new Rect( domHandleHost );
 

From ac53c678eb12634e6b664e152c3c20fd68962926 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 14 Nov 2019 13:01:09 +0100
Subject: [PATCH 06/15] Checkpoint.

---
 src/widgetresize/resizer.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 14187fbe..ca2deb6c 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -164,6 +164,9 @@ export default class Resizer {
 			writer.setStyle( 'width', newWidth, this._options.viewElement );
 		} );
 
+		// Get an actual image width, and:
+		// * reflect this size to the resize wrapper
+		// * apply this **real** size to the state
 		editor.editing.view.change( writer => {
 			const domHandleHost = this._getHandleHost();
 
@@ -178,6 +181,8 @@ export default class Resizer {
 			newSize.width = Math.round( domResizeHostRect.width );
 			newSize.height = Math.round( domResizeHostRect.height );
 
+			// writer.setStyle( 'width', domHandleHostRect.width + 'px', this._options.viewElement );
+
 			this.redraw( domHandleHostRect, writer );
 
 			this.state.update( newSize );

From 32268acf0cf820f04349b322c0b30047d8e1d1ba Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Fri, 15 Nov 2019 09:27:35 +0100
Subject: [PATCH 07/15] Removed unused code.

---
 src/widgetresize/resizer.js | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index ca2deb6c..8f7464a8 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -140,26 +140,9 @@ export default class Resizer {
 	updateSize( domEventData, editor ) {
 		const newSize = this._proposeNewSize( domEventData );
 
-		// editor.editing.view.change( writer => {
-		// 	const domResizeHost = this._getResizeHost();
-		// 	const unit = this._options.unit;
-
-		// 	const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
-
-		// 	newSize.width = parseInt( newWidth );
-		// 	newSize.height = 20;
-		// 	newSize.handleHostWidth = parseInt( newWidth );
-		// 	newSize.handleHostHeight = 20;
-
-		// 	writer.setStyle( 'width', newWidth, this._options.viewElement );
-
-		// 	this.state.update( newSize );
-		// } );
-
 		editor.editing.view.change( writer => {
 			const unit = this._options.unit;
-
-			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
+			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + unit;
 
 			writer.setStyle( 'width', newWidth, this._options.viewElement );
 		} );
@@ -181,8 +164,6 @@ export default class Resizer {
 			newSize.width = Math.round( domResizeHostRect.width );
 			newSize.height = Math.round( domResizeHostRect.height );
 
-			// writer.setStyle( 'width', domHandleHostRect.width + 'px', this._options.viewElement );
-
 			this.redraw( domHandleHostRect, writer );
 
 			this.state.update( newSize );
@@ -225,7 +206,6 @@ export default class Resizer {
 	 * @param {module:utils/dom/rect~Rect} [handleHostRect] Handle host rectangle might be given to improve performance.
 	 */
 	redraw( handleHostRect, writer ) {
-		// TODO review this
 		const domWrapper = this._domResizerWrapper;
 
 		if ( existsInDom( domWrapper ) ) {

From b1142c6788d6854876b5a1d26f5c5261def03d19 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Fri, 15 Nov 2019 09:55:38 +0100
Subject: [PATCH 08/15] Internal: Simplified the API. Now resizer options take
 an editor instance.

This will cause fewer API changes than adding editor / writer instance to required functions.
---
 src/widgetresize.js         | 10 ++--
 src/widgetresize/resizer.js | 92 ++++++++++++++++++++-----------------
 2 files changed, 57 insertions(+), 45 deletions(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index 5184f781..e2be232e 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -100,9 +100,7 @@ export default class WidgetResize extends Plugin {
 
 		const redrawFocusedResizer = () => {
 			if ( this._visibleResizer ) {
-				this.editor.editing.view.change( writer => {
-					this._visibleResizer.redraw( null, writer );
-				} );
+				this._visibleResizer.redraw( null );
 			}
 		};
 
@@ -180,6 +178,12 @@ mix( WidgetResize, ObservableMixin );
  * @interface ResizerOptions
  */
 
+/**
+ * Editor instance associated with the resizer.
+ *
+ * @member {module:core/editor/editor~Editor} module:widget/widgetresize~ResizerOptions#editor
+ */
+
 /**
  * @member {module:engine/model/element~Element} module:widget/widgetresize~ResizerOptions#modelElement
  */
diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 8f7464a8..02082508 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -62,6 +62,14 @@ export default class Resizer {
 		 */
 		this._domResizerWrapper = null;
 
+		/**
+		 * View to a wrapper of an element controlled by this resizer.
+		 *
+		 * @private
+		 * @type {module:engine/view/element~Element|null}
+		 */
+		this._resizerWrapperView = null;
+
 		/**
 		 * @observable
 		 */
@@ -137,10 +145,11 @@ export default class Resizer {
 	 * @fires updateSize
 	 * @param {Event} domEventData
 	 */
-	updateSize( domEventData, editor ) {
+	updateSize( domEventData ) {
 		const newSize = this._proposeNewSize( domEventData );
+		const editingView = this._options.editor.editing.view;
 
-		editor.editing.view.change( writer => {
+		editingView.change( writer => {
 			const unit = this._options.unit;
 			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + unit;
 
@@ -150,24 +159,21 @@ export default class Resizer {
 		// Get an actual image width, and:
 		// * reflect this size to the resize wrapper
 		// * apply this **real** size to the state
-		editor.editing.view.change( writer => {
-			const domHandleHost = this._getHandleHost();
+		const domHandleHost = this._getHandleHost();
+		const domHandleHostRect = new Rect( domHandleHost );
 
-			const domHandleHostRect = new Rect( domHandleHost );
+		newSize.handleHostWidth = Math.round( domHandleHostRect.width );
+		newSize.handleHostHeight = Math.round( domHandleHostRect.height );
 
-			newSize.handleHostWidth = Math.round( domHandleHostRect.width );
-			newSize.handleHostHeight = Math.round( domHandleHostRect.height );
+		// Handle max-width limitation.
+		const domResizeHostRect = new Rect( domHandleHost );
 
-			// Handle max-width limitation.
-			const domResizeHostRect = new Rect( domHandleHost );
+		newSize.width = Math.round( domResizeHostRect.width );
+		newSize.height = Math.round( domResizeHostRect.height );
 
-			newSize.width = Math.round( domResizeHostRect.width );
-			newSize.height = Math.round( domResizeHostRect.height );
+		this.redraw( domHandleHostRect );
 
-			this.redraw( domHandleHostRect, writer );
-
-			this.state.update( newSize );
-		} );
+		this.state.update( newSize );
 	}
 
 	/**
@@ -205,36 +211,38 @@ export default class Resizer {
 	 *
 	 * @param {module:utils/dom/rect~Rect} [handleHostRect] Handle host rectangle might be given to improve performance.
 	 */
-	redraw( handleHostRect, writer ) {
+	redraw( handleHostRect ) {
 		const domWrapper = this._domResizerWrapper;
 
 		if ( existsInDom( domWrapper ) ) {
-			// Refresh only if resizer exists in the DOM.
-			const widgetWrapper = domWrapper.parentElement;
-			const handleHost = this._getHandleHost();
-			const clientRect = handleHostRect || new Rect( handleHost );
-
-			writer.setStyle( 'width', clientRect.width + 'px', this._resizerWrapperView );
-			writer.setStyle( 'height', clientRect.height + 'px', this._resizerWrapperView );
-
-			const offsets = {
-				left: handleHost.offsetLeft,
-				top: handleHost.offsetTop,
-				height: handleHost.offsetHeight,
-				width: handleHost.offsetWidth
-			};
-
-			// In case a resizing host is not a widget wrapper, we need to compensate
-			// for any additional offsets the resize host might have. E.g. wrapper padding
-			// or simply another editable. By doing that the border and resizers are shown
-			// only around the resize host.
-			if ( !widgetWrapper.isSameNode( handleHost ) ) {
-				writer.setStyle( 'left', offsets.left + 'px', this._resizerWrapperView );
-				writer.setStyle( 'top', offsets.top + 'px', this._resizerWrapperView );
-
-				writer.setStyle( 'height', offsets.height + 'px', this._resizerWrapperView );
-				writer.setStyle( 'width', offsets.width + 'px', this._resizerWrapperView );
-			}
+			this._options.editor.editing.view.change( writer => {
+				// Refresh only if resizer exists in the DOM.
+				const widgetWrapper = domWrapper.parentElement;
+				const handleHost = this._getHandleHost();
+				const clientRect = handleHostRect || new Rect( handleHost );
+
+				writer.setStyle( 'width', clientRect.width + 'px', this._resizerWrapperView );
+				writer.setStyle( 'height', clientRect.height + 'px', this._resizerWrapperView );
+
+				const offsets = {
+					left: handleHost.offsetLeft,
+					top: handleHost.offsetTop,
+					height: handleHost.offsetHeight,
+					width: handleHost.offsetWidth
+				};
+
+				// In case a resizing host is not a widget wrapper, we need to compensate
+				// for any additional offsets the resize host might have. E.g. wrapper padding
+				// or simply another editable. By doing that the border and resizers are shown
+				// only around the resize host.
+				if ( !widgetWrapper.isSameNode( handleHost ) ) {
+					writer.setStyle( 'left', offsets.left + 'px', this._resizerWrapperView );
+					writer.setStyle( 'top', offsets.top + 'px', this._resizerWrapperView );
+
+					writer.setStyle( 'height', offsets.height + 'px', this._resizerWrapperView );
+					writer.setStyle( 'width', offsets.width + 'px', this._resizerWrapperView );
+				}
+			} );
 		}
 
 		function existsInDom( element ) {

From 6f79f2c37e4c113e90fc4b95e65187c385b20cbb Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Fri, 15 Nov 2019 10:07:05 +0100
Subject: [PATCH 09/15] Internal: Further cleanup after API adjustment.

---
 src/widgetresize.js         | 4 ++--
 src/widgetresize/resizer.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index e2be232e..6e3c6709 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -86,7 +86,7 @@ export default class WidgetResize extends Plugin {
 
 		this._observer.listenTo( domDocument, 'mousemove', ( event, domEventData ) => {
 			if ( this._activeResizer ) {
-				this._activeResizer.updateSize( domEventData, this.editor );
+				this._activeResizer.updateSize( domEventData );
 			}
 		} );
 
@@ -100,7 +100,7 @@ export default class WidgetResize extends Plugin {
 
 		const redrawFocusedResizer = () => {
 			if ( this._visibleResizer ) {
-				this._visibleResizer.redraw( null );
+				this._visibleResizer.redraw();
 			}
 		};
 
diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 02082508..998348b0 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -81,7 +81,7 @@ export default class Resizer {
 		this.decorate( 'updateSize' );
 
 		this.on( 'commit', event => {
-			// State might not be initialized (#5195).
+			// State might not be initialized.In this case prevent further handling and make sure that resizer is cleaned up (#5195).
 			if ( !this.state.proposedWidth ) {
 				this._cleanup();
 				event.stop();

From 8bf0a016a06959ac3af4f9ba72dcc6a8e22b2a67 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <mlewand@users.noreply.github.com>
Date: Wed, 20 Nov 2019 10:43:54 +0100
Subject: [PATCH 10/15] Docs: Minor rewording in the docs.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Piotrek Koszuliński <pkoszulinski@gmail.com>
---
 src/widgetresize/resizer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 998348b0..b93d726f 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -81,7 +81,7 @@ export default class Resizer {
 		this.decorate( 'updateSize' );
 
 		this.on( 'commit', event => {
-			// State might not be initialized.In this case prevent further handling and make sure that resizer is cleaned up (#5195).
+			// 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._cleanup();
 				event.stop();

From 3c72995350527d810e832027e2175c38705719fb Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Wed, 20 Nov 2019 10:55:40 +0100
Subject: [PATCH 11/15] Internal: Renamed the _viewResizerWrapper property and
 adjusted API docs.

---
 src/widgetresize/resizer.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index b93d726f..597de7ad 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -63,12 +63,12 @@ export default class Resizer {
 		this._domResizerWrapper = null;
 
 		/**
-		 * View to a wrapper of an element controlled by this resizer.
+		 * A wrapper that is controlled by the resizer. This is usually a widget element.
 		 *
 		 * @private
 		 * @type {module:engine/view/element~Element|null}
 		 */
-		this._resizerWrapperView = null;
+		this._viewResizerWrapper = null;
 
 		/**
 		 * @observable
@@ -120,7 +120,7 @@ export default class Resizer {
 		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
 		writer.addClass( 'ck-widget_with-resizer', widgetElement );
 
-		this._resizerWrapperView = viewResizerWrapper;
+		this._viewResizerWrapper = viewResizerWrapper;
 	}
 
 	/**
@@ -221,8 +221,8 @@ export default class Resizer {
 				const handleHost = this._getHandleHost();
 				const clientRect = handleHostRect || new Rect( handleHost );
 
-				writer.setStyle( 'width', clientRect.width + 'px', this._resizerWrapperView );
-				writer.setStyle( 'height', clientRect.height + 'px', this._resizerWrapperView );
+				writer.setStyle( 'width', clientRect.width + 'px', this._viewResizerWrapper );
+				writer.setStyle( 'height', clientRect.height + 'px', this._viewResizerWrapper );
 
 				const offsets = {
 					left: handleHost.offsetLeft,
@@ -236,11 +236,11 @@ export default class Resizer {
 				// or simply another editable. By doing that the border and resizers are shown
 				// only around the resize host.
 				if ( !widgetWrapper.isSameNode( handleHost ) ) {
-					writer.setStyle( 'left', offsets.left + 'px', this._resizerWrapperView );
-					writer.setStyle( 'top', offsets.top + 'px', this._resizerWrapperView );
+					writer.setStyle( 'left', offsets.left + 'px', this._viewResizerWrapper );
+					writer.setStyle( 'top', offsets.top + 'px', this._viewResizerWrapper );
 
-					writer.setStyle( 'height', offsets.height + 'px', this._resizerWrapperView );
-					writer.setStyle( 'width', offsets.width + 'px', this._resizerWrapperView );
+					writer.setStyle( 'height', offsets.height + 'px', this._viewResizerWrapper );
+					writer.setStyle( 'width', offsets.width + 'px', this._viewResizerWrapper );
 				}
 			} );
 		}

From 24767b685a8af20f201d3225ab47e80f0d54f574 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Wed, 20 Nov 2019 13:38:02 +0100
Subject: [PATCH 12/15] Internal: ResizerOptions interface no longer has the
 downcastWriter property.

Also linting: fixed line that violated 140 chars policy. This line skipped linter as it was commit straight from GH web interface.

MINOR BREAKING CHANGE: Removed downcastWriter property from the ResizerOptions interface.
---
 src/widgetresize.js         |  6 +-----
 src/widgetresize/resizer.js | 41 ++++++++++++++++++++-----------------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index 6e3c6709..adc40573 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -192,10 +192,6 @@ mix( WidgetResize, ObservableMixin );
  * @member {module:engine/view/containerelement~ContainerElement} module:widget/widgetresize~ResizerOptions#viewElement
  */
 
-/**
- * @member {module:engine/view/downcastwriter~DowncastWriter} module:widget/widgetresize~ResizerOptions#downcastWriter
- */
-
 /**
  * A callback to be executed once the resizing process is done.
  *
@@ -206,9 +202,9 @@ mix( WidgetResize, ObservableMixin );
  *
  * ```js
  * {
+ *	editor,
  *	modelElement: data.item,
  *	viewElement: widget,
- *	downcastWriter: conversionApi.writer,
  *
  *	onCommit( newValue ) {
  *		editor.execute( 'imageResize', { width: newValue } );
diff --git a/src/widgetresize/resizer.js b/src/widgetresize/resizer.js
index 597de7ad..858885b5 100644
--- a/src/widgetresize/resizer.js
+++ b/src/widgetresize/resizer.js
@@ -81,7 +81,8 @@ export default class Resizer {
 		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).
+			// 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._cleanup();
 				event.stop();
@@ -95,32 +96,34 @@ export default class Resizer {
 	attach() {
 		const that = this;
 		const widgetElement = this._options.viewElement;
-		const writer = this._options.downcastWriter;
+		const editingView = this._options.editor.editing.view;
 
-		const viewResizerWrapper = writer.createUIElement( 'div', {
-			class: 'ck ck-reset_all ck-widget__resizer'
-		}, function( domDocument ) {
-			const domElement = this.toDomElement( domDocument );
+		editingView.change( writer => {
+			const viewResizerWrapper = writer.createUIElement( 'div', {
+				class: 'ck ck-reset_all ck-widget__resizer'
+			}, function( domDocument ) {
+				const domElement = this.toDomElement( domDocument );
 
-			that._appendHandles( domElement );
-			that._appendSizeUI( domElement );
+				that._appendHandles( domElement );
+				that._appendSizeUI( domElement );
 
-			that._domResizerWrapper = domElement;
+				that._domResizerWrapper = domElement;
 
-			that.on( 'change:isEnabled', ( evt, propName, newValue ) => {
-				domElement.style.display = newValue ? '' : 'none';
-			} );
+				that.on( 'change:isEnabled', ( evt, propName, newValue ) => {
+					domElement.style.display = newValue ? '' : 'none';
+				} );
 
-			domElement.style.display = that.isEnabled ? '' : 'none';
+				domElement.style.display = that.isEnabled ? '' : 'none';
 
-			return domElement;
-		} );
+				return domElement;
+			} );
 
-		// Append the resizer wrapper to the widget's wrapper.
-		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
-		writer.addClass( 'ck-widget_with-resizer', widgetElement );
+			// Append the resizer wrapper to the widget's wrapper.
+			writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
+			writer.addClass( 'ck-widget_with-resizer', widgetElement );
 
-		this._viewResizerWrapper = viewResizerWrapper;
+			this._viewResizerWrapper = viewResizerWrapper;
+		} );
 	}
 
 	/**

From dc2d46314a76eefc2bdea62c623a8dae603b4d54 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 2 Jan 2020 13:01:11 +0100
Subject: [PATCH 13/15] Internal: Hide the widget toolbar during resize to
 improve the performance.

See https://github.com/ckeditor/ckeditor5-widget/pull/112#issuecomment-564528765.
---
 src/widgetresize.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index adc40573..8878ed48 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -135,9 +135,23 @@ export default class WidgetResize extends Plugin {
 	 */
 	attachTo( options ) {
 		const resizer = new Resizer( options );
+		const widgetToolbarRepository = this.editor.plugins.get( 'WidgetToolbarRepository' );
 
 		resizer.attach();
 
+		// Hiding widget toolbar to improve the performance (https://github.com/ckeditor/ckeditor5-widget/pull/112#issuecomment-564528765).
+		resizer.on( 'begin', () => {
+			widgetToolbarRepository.forceDisabled( 'resize' );
+		} );
+
+		resizer.on( 'cancel', () => {
+			widgetToolbarRepository.clearForceDisabled( 'resize' );
+		} );
+
+		resizer.on( 'commit', () => {
+			widgetToolbarRepository.clearForceDisabled( 'resize' );
+		} );
+
 		this._resizers.set( options.viewElement, resizer );
 
 		return resizer;

From 02a71f820ea8cdf80f0f0f008365cfc5afdc8211 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 2 Jan 2020 14:38:49 +0100
Subject: [PATCH 14/15] Internal: Perform a soft-check on
 WidgetToolbarRepository plugin, so that it doesn't fail if it isn't included
 in the editor.

---
 src/widgetresize.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index 8878ed48..861a5109 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -135,22 +135,27 @@ export default class WidgetResize extends Plugin {
 	 */
 	attachTo( options ) {
 		const resizer = new Resizer( options );
-		const widgetToolbarRepository = this.editor.plugins.get( 'WidgetToolbarRepository' );
+		const plugins = this.editor.plugins;
 
 		resizer.attach();
 
-		// Hiding widget toolbar to improve the performance (https://github.com/ckeditor/ckeditor5-widget/pull/112#issuecomment-564528765).
-		resizer.on( 'begin', () => {
-			widgetToolbarRepository.forceDisabled( 'resize' );
-		} );
+		if ( plugins.has( 'WidgetToolbarRepository' ) ) {
+			// Hiding widget toolbar to improve the performance
+			// (https://github.com/ckeditor/ckeditor5-widget/pull/112#issuecomment-564528765).
+			const widgetToolbarRepository = plugins.get( 'WidgetToolbarRepository' );
 
-		resizer.on( 'cancel', () => {
-			widgetToolbarRepository.clearForceDisabled( 'resize' );
-		} );
+			resizer.on( 'begin', () => {
+				widgetToolbarRepository.forceDisabled( 'resize' );
+			} );
 
-		resizer.on( 'commit', () => {
-			widgetToolbarRepository.clearForceDisabled( 'resize' );
-		} );
+			resizer.on( 'cancel', () => {
+				widgetToolbarRepository.clearForceDisabled( 'resize' );
+			} );
+
+			resizer.on( 'commit', () => {
+				widgetToolbarRepository.clearForceDisabled( 'resize' );
+			} );
+		}
 
 		this._resizers.set( options.viewElement, resizer );
 

From 974c58d4040a17e7eaff49673b13d3be461b5291 Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Fri, 3 Jan 2020 09:31:34 +0100
Subject: [PATCH 15/15] Internal: Adjusted priorities to make sure that the
 toolbar is always shown again.

See https://github.com/ckeditor/ckeditor5-widget/pull/112#pullrequestreview-337725256
---
 src/widgetresize.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgetresize.js b/src/widgetresize.js
index 861a5109..b72ad140 100644
--- a/src/widgetresize.js
+++ b/src/widgetresize.js
@@ -146,15 +146,15 @@ export default class WidgetResize extends Plugin {
 
 			resizer.on( 'begin', () => {
 				widgetToolbarRepository.forceDisabled( 'resize' );
-			} );
+			}, { priority: 'lowest' } );
 
 			resizer.on( 'cancel', () => {
 				widgetToolbarRepository.clearForceDisabled( 'resize' );
-			} );
+			}, { priority: 'highest' } );
 
 			resizer.on( 'commit', () => {
 				widgetToolbarRepository.clearForceDisabled( 'resize' );
-			} );
+			}, { priority: 'highest' } );
 		}
 
 		this._resizers.set( options.viewElement, resizer );