@ckeditor/ckeditor5-widget 35.1.0 → 35.2.0

package/package.json

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

package/src/widgetresize/resizer.js

@@ -68,10 +68,27 @@ export default class Resizer {
 		 */
 
 		/**
+		 * Flag that indicates whether resizer can be used.
+		 *
 		 * @observable
 		 */
 		this.set( 'isEnabled', true );
 
+		/**
+		 * Flag that indicates that resizer is currently focused.
+		 *
+		 * @observable
+		 */
+		this.set( 'isSelected', false );
+
+		/**
+		 * Flag that indicates whether resizer is rendered (visible on the screen).
+		 *
+		 * @readonly
+		 * @observable
+		 */
+		this.bind( 'isVisible' ).to( this, 'isEnabled', this, 'isSelected', ( isEnabled, isSelected ) => isEnabled && isSelected );
+
 		this.decorate( 'begin' );
 		this.decorate( 'cancel' );
 		this.decorate( 'commit' );
@@ -86,15 +103,38 @@ export default class Resizer {
 			}
 		}, { priority: 'high' } );
 
-		this.on( 'change:isEnabled', () => {
-			// We should redraw the resize handles when the plugin is enabled again.
-			// Otherwise they won't show up.
-			if ( this.isEnabled ) {
+		this.on( 'change:isVisible', () => {
+			if ( this.isVisible ) {
+				this.show();
 				this.redraw();
+			} else {
+				this.hide();
 			}
 		} );
 	}
 
+	/**
+	 * Makes resizer visible in the UI.
+	 */
+	show() {
+		const editingView = this._options.editor.editing.view;
+
+		editingView.change( writer => {
+			writer.removeClass( 'ck-hidden', this._viewResizerWrapper );
+		} );
+	}
+
+	/**
+	 * Hides resizer in the UI.
+	 */
+	hide() {
+		const editingView = this._options.editor.editing.view;
+
+		editingView.change( writer => {
+			writer.addClass( 'ck-hidden', this._viewResizerWrapper );
+		} );
+	}
+
 	/**
 	 * Attaches the resizer to the DOM.
 	 */
@@ -112,12 +152,6 @@ export default class Resizer {
 				that._appendHandles( domElement );
 				that._appendSizeUI( domElement );
 
-				that.on( 'change:isEnabled', ( evt, propName, newValue ) => {
-					domElement.style.display = newValue ? '' : 'none';
-				} );
-
-				domElement.style.display = that.isEnabled ? '' : 'none';
-
 				return domElement;
 			} );
 
@@ -126,6 +160,10 @@ export default class Resizer {
 			writer.addClass( 'ck-widget_with-resizer', widgetElement );
 
 			this._viewResizerWrapper = viewResizerWrapper;
+
+			if ( !this.isVisible ) {
+				this.hide();
+			}
 		} );
 	}
 

package/src/widgetresize.js

@@ -42,12 +42,12 @@ export default class WidgetResize extends Plugin {
 		const domDocument = global.window.document;
 
 		/**
-		 * The currently visible resizer.
+		 * The currently selected resizer.
 		 *
 		 * @observable
-		 * @member {module:widget/widgetresize/resizer~Resizer|null} #visibleResizer
+		 * @member {module:widget/widgetresize/resizer~Resizer|null} #selectedResizer
 		 */
-		this.set( 'visibleResizer', null );
+		this.set( 'selectedResizer', null );
 
 		/**
 		 * References an active resizer.
@@ -77,20 +77,16 @@ export default class WidgetResize extends Plugin {
 		this._observer.listenTo( domDocument, 'mousemove', this._mouseMoveListener.bind( this ) );
 		this._observer.listenTo( domDocument, 'mouseup', this._mouseUpListener.bind( this ) );
 
-		const redrawFocusedResizer = () => {
-			if ( this.visibleResizer ) {
-				this.visibleResizer.redraw();
+		const redrawSelectedResizer = () => {
+			if ( this.selectedResizer && this.selectedResizer.isVisible ) {
+				this.selectedResizer.redraw();
 			}
 		};
 
-		this._redrawFocusedResizerThrottled = throttle( redrawFocusedResizer, 200 );
-
-		// 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.
-		this.on( 'change:visibleResizer', redrawFocusedResizer );
+		this._redrawSelectedResizerThrottled = throttle( redrawSelectedResizer, 200 );
 
 		// Redrawing on any change of the UI of the editor (including content changes).
-		this.editor.ui.on( 'update', this._redrawFocusedResizerThrottled );
+		this.editor.ui.on( 'update', this._redrawSelectedResizerThrottled );
 
 		// Remove view widget-resizer mappings for widgets that have been removed from the document.
 		// https://github.com/ckeditor/ckeditor5/issues/10156
@@ -105,14 +101,19 @@ export default class WidgetResize extends Plugin {
 		}, { 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 );
+		this._observer.listenTo( global.window, 'resize', this._redrawSelectedResizerThrottled );
 
 		const viewSelection = this.editor.editing.view.document.selection;
 
 		viewSelection.on( 'change', () => {
 			const selectedElement = viewSelection.getSelectedElement();
 
-			this.visibleResizer = this.getResizerByViewElement( selectedElement ) || null;
+			const resizer = this.getResizerByViewElement( selectedElement ) || null;
+			if ( resizer ) {
+				this.select( resizer );
+			} else {
+				this.deselect();
+			}
 		} );
 	}
 
@@ -126,7 +127,29 @@ export default class WidgetResize extends Plugin {
 			resizer.destroy();
 		}
 
-		this._redrawFocusedResizerThrottled.cancel();
+		this._redrawSelectedResizerThrottled.cancel();
+	}
+
+	/**
+	 * Marks resizer as selected.
+	 *
+	 * @param {module:widget/widgetresize/resizer~Resizer} resizer
+	 */
+	select( resizer ) {
+		this.deselect();
+		this.selectedResizer = resizer;
+		this.selectedResizer.isSelected = true;
+	}
+
+	/**
+	 * Deselects currently set resizer.
+	 */
+	deselect() {
+		if ( this.selectedResizer ) {
+			this.selectedResizer.isSelected = false;
+		}
+
+		this.selectedResizer = null;
 	}
 
 	/**
@@ -164,7 +187,7 @@ export default class WidgetResize extends Plugin {
 
 		// If the element the resizer is created for is currently focused, it should become visible.
 		if ( this.getResizerByViewElement( selectedElement ) == resizer ) {
-			this.visibleResizer = resizer;
+			this.select( resizer );
 		}
 
 		return resizer;