@ckeditor/ckeditor5-widget - npm Package Compare versions

Comparing version 11.1.0 to 15.0.0

CHANGELOG.md

 Changelog
 =========
 
+## [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)
@@ -5,0 +25,0 @@

package.json

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

README.md

 CKEditor 5 widget API
 ========================================
 
-[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-widget.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-widget)
@@ -6,0 +5,0 @@ [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-widget.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-widget)

src/utils.js

@@ -14,3 +14,3 @@ /**
 
-import dragHandlerIcon from '../theme/icons/drag-handler.svg';
+import dragHandleIcon from '../theme/icons/drag-handle.svg';
 
@@ -89,3 +89,3 @@ /**
  * a plain string or a function returning a string. It represents the widget for assistive technologies (like screen readers).
- * @param {Boolean} [options.hasSelectionHandler=false] If `true`, the widget will have a selection handler added.
+ * @param {Boolean} [options.hasSelectionHandle=false] If `true`, the widget will have a selection handle added.
  * @returns {module:engine/view/element~Element} Returns the same element.
@@ -109,4 +109,4 @@ */
 
-	if ( options.hasSelectionHandler ) {
-		addSelectionHandler( element, writer );
+	if ( options.hasSelectionHandle ) {
+		addSelectionHandle( element, writer );
 	}
@@ -361,8 +361,8 @@
 
-// Adds a drag handler to the widget.
+// Adds a drag handle to the widget.
 //
 // @param {module:engine/view/containerelement~ContainerElement}
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
-function addSelectionHandler( widgetElement, writer ) {
-	const selectionHandler = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handler' }, function( domDocument ) {
+function addSelectionHandle( widgetElement, writer ) {
+	const selectionHandle = writer.createUIElement( 'div', { class: 'ck ck-widget__selection-handle' }, function( domDocument ) {
 		const domElement = this.toDomElement( domDocument );
@@ -372,5 +372,5 @@
 		const icon = new IconView();
-		icon.set( 'content', dragHandlerIcon );
+		icon.set( 'content', dragHandleIcon );
 
-		// Render the icon view right away to append its #element to the selectionHandler DOM element.
+		// Render the icon view right away to append its #element to the selectionHandle DOM element.
 		icon.render();
@@ -383,5 +383,5 @@
 
-	// Append the selection handler into the widget wrapper.
-	writer.insert( writer.createPositionAt( widgetElement, 0 ), selectionHandler );
-	writer.addClass( [ 'ck-widget_with-selection-handler' ], widgetElement );
+	// Append the selection handle into the widget wrapper.
+	writer.insert( writer.createPositionAt( widgetElement, 0 ), selectionHandle );
+	writer.addClass( [ 'ck-widget_with-selection-handle' ], widgetElement );
 }

src/widget.js

@@ -167,3 +167,4 @@ /**
 		const keyCode = domEventData.keyCode;
-		const isForward = keyCode == keyCodes.arrowdown || keyCode == keyCodes.arrowright;
+		const isLtrContent = this.editor.locale.contentLanguageDirection === 'ltr';
+		const isForward = keyCode == keyCodes.arrowdown || keyCode == keyCodes[ isLtrContent ? 'arrowright' : 'arrowleft' ];
 		let wasHandled = false;
@@ -170,0 +171,0 @@

src/widgetresize.js

@@ -14,6 +14,10 @@ /**
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import { throttle } from 'lodash-es';
 
+import '../theme/widgetresize.css';
+
 /**
- * Widget resize feature plugin.
+ * The widget resize feature plugin.
  *
@@ -23,2 +27,3 @@ * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
  * @extends module:core/plugin~Plugin
+ * @mixes module:utils/observablemixin~ObservableMixin
  */
@@ -34,7 +39,31 @@ export default class WidgetResize extends Plugin {
 	init() {
-		this.resizers = [];
-		this.activeResizer = null;
+		/**
+		 * The currently visible resizer.
+		 *
+		 * @protected
+		 * @observable
+		 * @member {module:widget/widgetresize/resizer~Resizer|null} #_visibleResizer
+		 */
+		this.set( '_visibleResizer', null );
 
+		/**
+		 * References an active resizer.
+		 *
+		 * Active resizer means a resizer which handle is actively used by the end user.
+		 *
+		 * @protected
+		 * @observable
+		 * @member {module:widget/widgetresize/resizer~Resizer|null} #_activeResizer
+		 */
+		this.set( '_activeResizer', null );
+
+		/**
+		 * A map of resizers created using this plugin instance.
+		 *
+		 * @private
+		 * @type {Map.<module:engine/view/containerelement~ContainerElement, module:widget/widgetresize/resizer~Resizer>}
+		 */
+		this._resizers = new Map();
+
 		const domDocument = global.window.document;
-		const THROTTLE_THRESHOLD = 16; // 16ms = ~60fps
 
@@ -54,34 +83,48 @@ this.editor.model.schema.setAttributeProperties( 'width', {
 
-			this.activeResizer = this._getResizerByHandle( resizeHandle );
+			this._activeResizer = this._getResizerByHandle( resizeHandle );
 
-			if ( this.activeResizer ) {
-				this.activeResizer.begin( resizeHandle );
+			if ( this._activeResizer ) {
+				this._activeResizer.begin( resizeHandle );
 			}
 		} );
 
-		this._observer.listenTo( domDocument, 'mousemove', throttle( ( event, domEventData ) => {
-			if ( this.activeResizer ) {
-				this.activeResizer.updateSize( domEventData );
+		this._observer.listenTo( domDocument, 'mousemove', ( event, domEventData ) => {
+			if ( this._activeResizer ) {
+				this._activeResizer.updateSize( domEventData );
 			}
-		}, THROTTLE_THRESHOLD ) );
+		} );
 
 		this._observer.listenTo( domDocument, 'mouseup', () => {
-			if ( this.activeResizer ) {
-				this.activeResizer.commit();
+			if ( this._activeResizer ) {
+				this._activeResizer.commit();
 
-				this.activeResizer = null;
+				this._activeResizer = null;
 			}
 		} );
 
-		const redrawResizers = throttle( () => {
-			for ( const context of this.resizers ) {
-				context.redraw();
+		const redrawFocusedResizer = () => {
+			if ( this._visibleResizer ) {
+				this._visibleResizer.redraw();
 			}
-		}, THROTTLE_THRESHOLD );
+		};
 
+		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.
+		this.on( 'change:_visibleResizer', redrawFocusedResizer );
+
 		// Redrawing on any change of the UI of the editor (including content changes).
-		this.editor.ui.on( 'update', redrawResizers );
+		this.editor.ui.on( 'update', redrawFocusedResizerThrottled );
 
 		// Resizers need to be redrawn upon window resize, because new window might shrink resize host.
-		this._observer.listenTo( global.window, 'resize', redrawResizers );
+		this._observer.listenTo( global.window, 'resize', redrawFocusedResizerThrottled );
+
+		const viewSelection = this.editor.editing.view.document.selection;
+
+		viewSelection.on( 'change', () => {
+			const selectedElement = viewSelection.getSelectedElement();
+
+			this._visibleResizer = this._getResizerByViewElement( selectedElement ) || null;
+		} );
 	}
@@ -102,11 +145,16 @@
 
-		this.editor.editing.view.once( 'render', () => resizer.redraw() );
+		this._resizers.set( options.viewElement, resizer );
 
-		this.resizers.push( resizer );
-
 		return resizer;
 	}
 
+	/**
+	 * Returns a resizer that contains a given resize handle.
+	 *
+	 * @protected
+	 * @param {HTMLElement} domResizeHandle
+	 * @returns {module:widget/widgetresize/resizer~Resizer}
+	 */
 	_getResizerByHandle( domResizeHandle ) {
-		for ( const resizer of this.resizers ) {
+		for ( const resizer of this._resizers.values() ) {
 			if ( resizer.containsHandle( domResizeHandle ) ) {
@@ -117,6 +165,19 @@ return resizer;
 	}
+
+	/**
+	 * Returns a resizer created for a given view element (widget element).
+	 *
+	 * @protected
+	 * @param {module:engine/view/containerelement~ContainerElement} viewElement
+	 * @returns {module:widget/widgetresize/resizer~Resizer}
+	 */
+	_getResizerByViewElement( viewElement ) {
+		return this._resizers.get( viewElement );
+	}
 }
 
+mix( WidgetResize, ObservableMixin );
+
 /**
- * Interface describing a resizer. It allows to specify resizing host, custom logic for calculating aspect ratio etc.
+ * Interface describing a resizer. It allows to specify the resizing host, custom logic for calculating aspect ratio, etc.
  *
@@ -139,8 +200,8 @@ * @interface ResizerOptions
 /**
- * A callback to be executed once resizing process is done.
+ * A callback to be executed once the resizing process is done.
  *
  * It receives a `Number` (`newValue`) as a parameter.
  *
- * For example, {@link module:image/imageresize~ImageResize} uses it to execute image resize command,
- * which puts new value into the model.
+ * For example, {@link module:image/imageresize~ImageResize} uses it to execute the image resize command
+ * which puts the new value into the model.
  *
@@ -147,0 +208,0 @@ * ```js

src/widgetresize/resizer.js

@@ -30,3 +30,3 @@ /**
 		/**
-		 * Stores the state of resizable host geometry, such as original width, currently proposed height, etc.
+		 * Stores the state of the resizable host geometry, such as the original width, the currently proposed height, etc.
 		 *
@@ -40,3 +40,3 @@ * Note that a new state is created for each resize transaction.
 		/**
-		 * A view displaying new proposed element's size during the resizing.
+		 * A view displaying the proposed new element size during the resizing.
 		 *
@@ -105,3 +105,3 @@ * @protected
 
-		// Append resizer wrapper to the widget's wrapper.
+		// Append the resizer wrapper to the widget's wrapper.
 		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
@@ -114,3 +114,3 @@ writer.addClass( 'ck-widget_with-resizer', widgetElement );
 	 *
-	 * Creates a new {@link #state} for current process.
+	 * Creates a new {@link #state} for the current process.
 	 *
@@ -126,4 +126,2 @@ * @fires begin
 		this.state.begin( domResizeHandle, this._getHandleHost(), this._getResizeHost() );
-
-		this.redraw();
 	}
@@ -150,2 +148,3 @@
 
+		// Handle max-width limitation.
 		const domResizeHostRect = new Rect( domHandleHost );
@@ -156,8 +155,5 @@
 
+		this.redraw( domHandleHostRect );
+
 		this.state.update( newSize );
-
-		// Refresh values based on the real image. Real image might be limited by max-width, and thus fetching it
-		// here will reflect this limitation.
-		this._domResizerWrapper.style.width = newSize.handleHostWidth + 'px';
-		this._domResizerWrapper.style.height = newSize.handleHostHeight + 'px';
 	}
@@ -180,3 +176,3 @@
 	/**
-	 * Cancels and rejects proposed resize dimensions hiding all the UI.
+	 * Cancels and rejects the proposed resize dimensions, hiding the UI.
 	 *
@@ -198,4 +194,6 @@ * @fires cancel
 	 * Redraws the resizer.
+	 *
+	 * @param {module:utils/dom/rect~Rect} [handleHostRect] Handle host rectangle might be given to improve performance.
 	 */
-	redraw() {
+	redraw( handleHostRect ) {
 		// TODO review this
@@ -208,3 +206,3 @@ const domWrapper = this._domResizerWrapper;
 			const handleHost = this._getHandleHost();
-			const clientRect = new Rect( handleHost );
+			const clientRect = handleHostRect || new Rect( handleHost );
 
@@ -214,2 +212,9 @@ domWrapper.style.width = clientRect.width + 'px';
 
+			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
@@ -220,7 +225,7 @@ // for any additional offsets the resize host might have. E.g. wrapper padding
 			if ( !widgetWrapper.isSameNode( handleHost ) ) {
-				domWrapper.style.left = handleHost.offsetLeft + 'px';
-				domWrapper.style.top = handleHost.offsetTop + 'px';
+				domWrapper.style.left = offsets.left + 'px';
+				domWrapper.style.top = offsets.top + 'px';
 
-				domWrapper.style.height = handleHost.offsetHeight + 'px';
-				domWrapper.style.width = handleHost.offsetWidth + 'px';
+				domWrapper.style.height = offsets.height + 'px';
+				domWrapper.style.width = offsets.width + 'px';
 			}
@@ -253,3 +258,3 @@ }
 	/**
-	 * Method used to calculate the proposed size as the resize handles are dragged.
+	 * Calculates the proposed size as the resize handles are dragged.
 	 *
@@ -326,5 +331,5 @@ * @private
 	/**
-	 * Method used to obtain the resize host.
+	 * Obtains the resize host.
 	 *
-	 * Resize host is an object that receives dimensions that are result of resizing.
+	 * Resize host is an object that receives dimensions which are the result of resizing.
 	 *
@@ -341,8 +346,8 @@ * @protected
 	/**
-	 * Method used to obtain the handle host.
+	 * Obtains the handle host.
 	 *
-	 * Handle host is an object to which the handles are aligned to.
+	 * Handle host is an object that the handles are aligned to.
 	 *
-	 * Handle host will not always be an entire widget itself. Take an image as an example. Image widget
-	 * contains an image and a caption. Only image should be surrounded with handles.
+	 * Handle host will not always be an entire widget itself. Take an image as an example. The image widget
+	 * contains an image and a caption. Only the image should be surrounded with handles.
 	 *
@@ -359,3 +364,3 @@ * @protected
 	/**
-	 * Renders the resize handles in DOM.
+	 * Renders the resize handles in the DOM.
 	 *
@@ -399,3 +404,3 @@ * @private
 	 * @private
-	 * @param {HTMLElement} domHandle Handler used to calculate reference point.
+	 * @param {HTMLElement} domHandle Handle used to calculate the reference point.
 	 * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
@@ -433,3 +438,3 @@ */
 /**
- * A view displaying new proposed element's size during the resizing.
+ * A view displaying the proposed new element size during the resizing.
  *
@@ -488,2 +493,3 @@ * @extends {module:ui/view~View}
 
+// @private
 // @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
@@ -490,0 +496,0 @@ // @returns {String} A prefixed HTML class name for the resizer element

src/widgetresize/resizerstate.js

@@ -25,3 +25,3 @@ /**
 		/**
-		 * TODO
+		 * The original width (pixels) of the resized object when the resize process was started.
 		 *
@@ -33,3 +33,3 @@ * @readonly
 		/**
-		 * TODO
+		 * The original height (pixels) of the resized object when the resize process was started.
 		 *
@@ -41,3 +41,3 @@ * @readonly
 		/**
-		 * TODO
+		 * The original width (percents) of the resized object when the resize process was started.
 		 *
@@ -49,3 +49,3 @@ * @readonly
 		/**
-		 * Position of the handle that has initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc or `null`
+		 * The position of the handle that initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc. or `null`
 		 * if unknown.
@@ -60,3 +60,3 @@ *
 		/**
-		 * TODO
+		 * The width (percents) proposed, but not committed yet, in the current resize process.
 		 *
@@ -70,3 +70,3 @@ * @readonly
 		/**
-		 * TODO
+		 * The width (pixels) proposed, but not committed yet, in the current resize process.
 		 *
@@ -80,3 +80,3 @@ * @readonly
 		/**
-		 * TODO
+		 * The height (pixels) proposed, but not committed yet, in the current resize process.
 		 *
@@ -93,3 +93,3 @@ * @readonly
 		/**
-		 * TODO
+		 * A width to height ratio of the resized image.
 		 *
@@ -107,5 +107,5 @@ * @readonly
 		/**
-		 * Reference point of resizer where the dragging started. It is used to measure the distance to user cursor
-		 * traveled, thus how much the image should be enlarged.
-		 * This information is only known after DOM was rendered, so it will be updated later.
+		 * The reference point of the resizer where the dragging started. It is used to measure the distance the user cursor
+		 * traveled, so how much the image should be enlarged.
+		 * This information is only known after the DOM was rendered, so it will be updated later.
 		 *
@@ -138,11 +138,6 @@ * @private
 
-		if ( widthStyle ) {
-			if ( widthStyle.match( /^\d+\.?\d*%$/ ) ) {
-				this.originalWidthPercents = parseFloat( widthStyle );
-			} else {
-				// TODO we need to check it via comparing to the parent's width.
-				this.originalWidthPercents = 50;
-			}
+		if ( widthStyle && widthStyle.match( /^\d+\.?\d*%$/ ) ) {
+			this.originalWidthPercents = parseFloat( widthStyle );
 		} else {
-			this.originalWidthPercents = 100;
+			this.originalWidthPercents = calculateHostPercentageWidth( domResizeHost, clientRect );
 		}
@@ -163,12 +158,24 @@ }
 
-/**
- * Returns coordinates of top-left corner of a element, relative to the document's top-left corner.
- *
- * @private
- * @param {HTMLElement} element
- * @param {String} resizerPosition Position of the resize handler, e.g. `"top-left"`, `"bottom-right"`.
- * @returns {Object} return
- * @returns {Number} return.x
- * @returns {Number} return.y
- */
+// Calculates a relative width of a `domResizeHost` compared to it's parent in percents.
+//
+// @private
+// @param {HTMLElement} domResizeHost
+// @param {module:utils/dom/rect~Rect} resizeHostRect
+// @returns {Number}
+function calculateHostPercentageWidth( domResizeHost, resizeHostRect ) {
+	const domResizeHostParent = domResizeHost.parentElement;
+	// Need to use computed style as it properly excludes parent's paddings from the returned value.
+	const parentWidth = parseFloat( domResizeHostParent.ownerDocument.defaultView.getComputedStyle( domResizeHostParent ).width );
+
+	return resizeHostRect.width / parentWidth * 100;
+}
+
+// Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
+//
+// @private
+// @param {HTMLElement} element
+// @param {String} resizerPosition The position of the resize handle, e.g. `"top-left"`, `"bottom-right"`.
+// @returns {Object} return
+// @returns {Number} return.x
+// @returns {Number} return.y
 function getAbsoluteBoundaryPoint( element, resizerPosition ) {
@@ -188,7 +195,5 @@ const elementRect = new Rect( element );
 
-/**
- * @private
- * @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
- * @returns {String} A prefixed HTML class name for the resizer element
- */
+// @private
+// @param {String} resizerPosition The expected resizer position, like `"top-left"`, `"bottom-right"`.
+// @returns {String} A prefixed HTML class name for the resizer element.
 function getResizerHandleClass( resizerPosition ) {
@@ -198,9 +203,7 @@ return `ck-widget__resizer__handle-${ resizerPosition }`;
 
-/**
- * Determines the position of a given resize handle.
- *
- * @private
- * @param {HTMLElement} domHandle Handler used to calculate reference point.
- * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
- */
+// Determines the position of a given resize handle.
+//
+// @private
+// @param {HTMLElement} domHandle Handle used to calculate the reference point.
+// @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 function getHandlePosition( domHandle ) {
@@ -216,6 +219,5 @@ const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
-/**
- * @param {String} position Like `"top-left"`.
- * @returns {String} Inverted `position`, e.g. returns `"bottom-right"` if `"top-left"` was given as `position`.
- */
+// @private
+// @param {String} position Like `"top-left"`.
+// @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
 function getOppositePosition( position ) {
@@ -222,0 +224,0 @@ const parts = position.split( '-' );

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116862

increased by22.87%

Number of package files

40

increased by166.67%

Lines of code

2043

increased by3.18%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

20

decreased by-4.76%

Dependency changes

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

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

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

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

• + Addedckeditor5@15.0.0(transitive)

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

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

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

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

• - Removedckeditor5@12.4.0(transitive)

• Updated@ckeditor/ckeditor5-core@^15.0.0

• Updated@ckeditor/ckeditor5-engine@^15.0.0

• Updated@ckeditor/ckeditor5-ui@^15.0.0

• Updated@ckeditor/ckeditor5-utils@^15.0.0