@ckeditor/ckeditor5-widget - npm Package Compare versions

Comparing version 16.0.0 to 17.0.0

CHANGELOG.md

 Changelog
 =========
 
+## [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)
@@ -8,3 +28,3 @@
 
-* Updated translations. ([b3bf5f0](https://github.com/ckeditor/ckeditor5-widget/commit/b3bf5f0)) 
+* Updated translations. ([b3bf5f0](https://github.com/ckeditor/ckeditor5-widget/commit/b3bf5f0))
 
@@ -11,0 +31,0 @@

LICENSE.md

@@ -5,3 +5,3 @@ Software License Agreement
 **CKEditor 5 widget API** – https://github.com/ckeditor/ckeditor5-image <br>
-Copyright (c) 2003-2019, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
+Copyright (c) 2003-2020, [CKSource](http://cksource.com) Frederico Knabben. All rights reserved.
 
@@ -8,0 +8,0 @@ Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).

package.json

 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "16.0.0",
+  "version": "17.0.0",
   "description": "Widget API for CKEditor 5.",
@@ -12,21 +12,21 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^16.0.0",
-    "@ckeditor/ckeditor5-engine": "^16.0.0",
-    "@ckeditor/ckeditor5-ui": "^16.0.0",
-    "@ckeditor/ckeditor5-utils": "^16.0.0",
+    "@ckeditor/ckeditor5-core": "^17.0.0",
+    "@ckeditor/ckeditor5-engine": "^17.0.0",
+    "@ckeditor/ckeditor5-ui": "^17.0.0",
+    "@ckeditor/ckeditor5-utils": "^17.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^16.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^16.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^16.0.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^16.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
-    "@ckeditor/ckeditor5-enter": "^16.0.0",
-    "@ckeditor/ckeditor5-essentials": "^16.0.0",
-    "@ckeditor/ckeditor5-heading": "^16.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^16.0.0",
-    "@ckeditor/ckeditor5-table": "^16.0.0",
-    "@ckeditor/ckeditor5-typing": "^16.0.0",
-    "@ckeditor/ckeditor5-undo": "^16.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^17.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^17.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^17.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^17.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^17.0.0",
+    "@ckeditor/ckeditor5-enter": "^17.0.0",
+    "@ckeditor/ckeditor5-essentials": "^17.0.0",
+    "@ckeditor/ckeditor5-heading": "^17.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^17.0.0",
+    "@ckeditor/ckeditor5-table": "^17.0.0",
+    "@ckeditor/ckeditor5-typing": "^17.0.0",
+    "@ckeditor/ckeditor5-undo": "^17.0.0",
     "eslint": "^5.5.0",
@@ -33,0 +33,0 @@ "eslint-config-ckeditor5": "^2.0.0",

src/highlightstack.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -4,0 +4,0 @@ */

src/utils.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -4,0 +4,0 @@ */

src/widget.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -4,0 +4,0 @@ */

src/widgetresize.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -138,5 +138,24 @@ */
 		const resizer = new Resizer( options );
+		const plugins = this.editor.plugins;
 
 		resizer.attach();
 
+		if ( plugins.has( 'WidgetToolbarRepository' ) ) {
+			// Hiding widget toolbar to improve the performance
+			// (https://github.com/ckeditor/ckeditor5-widget/pull/112#issuecomment-564528765).
+			const widgetToolbarRepository = plugins.get( 'WidgetToolbarRepository' );
+
+			resizer.on( 'begin', () => {
+				widgetToolbarRepository.forceDisabled( 'resize' );
+			}, { priority: 'lowest' } );
+
+			resizer.on( 'cancel', () => {
+				widgetToolbarRepository.clearForceDisabled( 'resize' );
+			}, { priority: 'highest' } );
+
+			resizer.on( 'commit', () => {
+				widgetToolbarRepository.clearForceDisabled( 'resize' );
+			}, { priority: 'highest' } );
+		}
+
 		this._resizers.set( options.viewElement, resizer );
@@ -183,11 +202,13 @@
 /**
- * @member {module:engine/model/element~Element} module:widget/widgetresize~ResizerOptions#modelElement
+ * Editor instance associated with the resizer.
+ *
+ * @member {module:core/editor/editor~Editor} module:widget/widgetresize~ResizerOptions#editor
  */
 
 /**
- * @member {module:engine/view/containerelement~ContainerElement} module:widget/widgetresize~ResizerOptions#viewElement
+ * @member {module:engine/model/element~Element} module:widget/widgetresize~ResizerOptions#modelElement
  */
 
 /**
- * @member {module:engine/view/downcastwriter~DowncastWriter} module:widget/widgetresize~ResizerOptions#downcastWriter
+ * @member {module:engine/view/containerelement~ContainerElement} module:widget/widgetresize~ResizerOptions#viewElement
  */
@@ -205,5 +226,5 @@
  * {
+ *	editor,
  *	modelElement: data.item,
  *	viewElement: widget,
- *	downcastWriter: conversionApi.writer,
  *
@@ -210,0 +231,0 @@ *	onCommit( newValue ) {

src/widgetresize/resizer.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -66,2 +66,10 @@ */
 		/**
+		 * A wrapper that is controlled by the resizer. This is usually a widget element.
+		 *
+		 * @private
+		 * @type {module:engine/view/element~Element|null}
+		 */
+		this._viewResizerWrapper = null;
+
+		/**
 		 * @observable
@@ -75,2 +83,11 @@ */
 		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._cleanup();
+				event.stop();
+			}
+		}, { priority: 'high' } );
 	}
@@ -84,26 +101,30 @@
 		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';
+
+				return domElement;
 			} );
 
-			domElement.style.display = that.isEnabled ? '' : 'none';
+			// Append the resizer wrapper to the widget's wrapper.
+			writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
+			writer.addClass( 'ck-widget_with-resizer', widgetElement );
 
-			return domElement;
+			this._viewResizerWrapper = viewResizerWrapper;
 		} );
-
-		// Append the resizer wrapper to the widget's wrapper.
-		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
-		writer.addClass( 'ck-widget_with-resizer', widgetElement );
 	}
@@ -134,9 +155,16 @@
 	updateSize( domEventData ) {
-		const domHandleHost = this._getHandleHost();
-		const domResizeHost = this._getResizeHost();
-		const unit = this._options.unit;
 		const newSize = this._proposeNewSize( domEventData );
+		const editingView = this._options.editor.editing.view;
 
-		domResizeHost.style.width = ( unit === '%' ? newSize.widthPercents : newSize.width ) + this._options.unit;
+		editingView.change( writer => {
+			const unit = this._options.unit;
+			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + unit;
 
+			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
+		const domHandleHost = this._getHandleHost();
 		const domHandleHostRect = new Rect( domHandleHost );
@@ -194,32 +222,33 @@
 	redraw( handleHostRect ) {
-		// TODO review this
 		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 );
+			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 );
 
-			domWrapper.style.width = clientRect.width + 'px';
-			domWrapper.style.height = clientRect.height + 'px';
+				writer.setStyle( 'width', clientRect.width + 'px', this._viewResizerWrapper );
+				writer.setStyle( 'height', clientRect.height + 'px', this._viewResizerWrapper );
 
-			const offsets = {
-				left: handleHost.offsetLeft,
-				top: handleHost.offsetTop,
-				height: handleHost.offsetHeight,
-				width: handleHost.offsetWidth
-			};
+				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 ) ) {
-				domWrapper.style.left = offsets.left + 'px';
-				domWrapper.style.top = offsets.top + 'px';
+				// 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._viewResizerWrapper );
+					writer.setStyle( 'top', offsets.top + 'px', this._viewResizerWrapper );
 
-				domWrapper.style.height = offsets.height + 'px';
-				domWrapper.style.width = offsets.width + 'px';
-			}
+					writer.setStyle( 'height', offsets.height + 'px', this._viewResizerWrapper );
+					writer.setStyle( 'width', offsets.width + 'px', this._viewResizerWrapper );
+				}
+			} );
 		}
@@ -226,0 +255,0 @@

src/widgetresize/resizerstate.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -4,0 +4,0 @@ */

src/widgettoolbarrepository.js

 /**
- * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
@@ -86,2 +86,6 @@ */
 
+		this.on( 'change:isEnabled', () => {
+			this._updateToolbarsVisibility();
+		} );
+
 		this.listenTo( editor.ui, 'update', () => {
@@ -159,8 +163,8 @@ this._updateToolbarsVisibility();
 
-			if ( !this.editor.ui.focusTracker.isFocused ) {
-				if ( this._isToolbarVisible( definition ) ) {
+			if ( !this.isEnabled || !relatedElement ) {
+				if ( this._isToolbarInBalloon( definition ) ) {
 					this._hideToolbar( definition );
 				}
-			} else if ( !relatedElement ) {
-				if ( this._isToolbarInBalloon( definition ) ) {
+			} else if ( !this.editor.ui.focusTracker.isFocused ) {
+				if ( this._isToolbarVisible( definition ) ) {
 					this._hideToolbar( definition );
@@ -167,0 +171,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125161

increased by4%

Number of package files

45

increased by4.65%

Lines of code

2088

increased by2.2%

Dependency changes

• + Added@ckeditor/ckeditor5-core@17.0.0(transitive)

• + Added@ckeditor/ckeditor5-engine@17.0.0(transitive)

• + Added@ckeditor/ckeditor5-ui@17.0.0(transitive)

• + Added@ckeditor/ckeditor5-utils@17.0.0(transitive)

• - Removed@ckeditor/ckeditor5-core@16.0.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@16.0.0(transitive)

• - Removed@ckeditor/ckeditor5-ui@16.0.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@16.0.0(transitive)

• Updated@ckeditor/ckeditor5-core@^17.0.0

• Updated@ckeditor/ckeditor5-engine@^17.0.0

• Updated@ckeditor/ckeditor5-ui@^17.0.0

• Updated@ckeditor/ckeditor5-utils@^17.0.0