Docs: Widget resize API docs corrected. [skip ci]

src/widgetresize.js

@@ -14,7 +14,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { throttle } from 'lodash-es';
 
 /**
- * Widget resize feature plugin.
+ * The widget resize feature plugin.
  *
  * Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
  *
@@ -112,7 +112,7 @@ export default class WidgetResize extends Plugin {
 }
 
 /**
- * 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.
  *
  * @interface ResizerOptions
  */
@@ -130,12 +130,12 @@ export default class WidgetResize extends Plugin {
  */
 
 /**
- * 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.
  *
  * ```js
  * {

src/widgetresize/resizer.js

@@ -27,7 +27,7 @@ export default class Resizer {
 	 */
 	constructor( options ) {
 		/**
-		 * 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.
 		 *
 		 * Note that a new state is created for each resize transaction.
 		 *
@@ -36,7 +36,7 @@ export default class Resizer {
 		 */
 
 		/**
-		 * A view displaying new proposed element's size during the resizing.
+		 * A view displaying the proposed new element size during the resizing.
 		 *
 		 * @protected
 		 * @readonly
@@ -100,15 +100,15 @@ export default class Resizer {
 			return domElement;
 		} );
 
-		// Append resizer wrapper to the widget's wrapper.
+		// Append the resizer wrapper to the widget's wrapper.
 		writer.insert( writer.createPositionAt( widgetElement, 'end' ), viewResizerWrapper );
 		writer.addClass( 'ck-widget_with-resizer', widgetElement );
 	}
 
 	/**
 	 * Starts the resizing process.
 	 *
-	 * Creates a new {@link #state} for current process.
+	 * Creates a new {@link #state} for the current process.
 	 *
 	 * @fires begin
 	 * @param {HTMLElement} domResizeHandle Clicked handle.
@@ -170,7 +170,7 @@ export default class Resizer {
 	}
 
 	/**
-	 * Cancels and rejects proposed resize dimensions hiding all the UI.
+	 * Cancels and rejects the proposed resize dimensions, hiding the UI.
 	 *
 	 * @fires cancel
 	 */
@@ -238,7 +238,7 @@ export default class Resizer {
 	}
 
 	/**
-	 * Method used to calculate the proposed size as the resize handles are dragged.
+	 * Calculates the proposed size as the resize handles are dragged.
 	 *
 	 * @private
 	 * @param {Event} domEventData Event data that caused the size update request. It should be used to calculate the proposed size.
@@ -310,9 +310,9 @@ export default class Resizer {
 	}
 
 	/**
-	 * 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.
 	 *
 	 * @protected
 	 * @returns {HTMLElement}
@@ -324,12 +324,12 @@ export default class Resizer {
 	}
 
 	/**
-	 * 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.
 	 *
 	 * @protected
 	 * @returns {HTMLElement}
@@ -341,7 +341,7 @@ export default class Resizer {
 	}
 
 	/**
-	 * Renders the resize handles in DOM.
+	 * Renders the resize handles in the DOM.
 	 *
 	 * @private
 	 * @param {HTMLElement} domElement The resizer wrapper.
@@ -380,7 +380,7 @@ export default class Resizer {
 	 * Determines the position of a given resize handle.
 	 *
 	 * @private
-	 * @param {HTMLElement} domHandle Handler used to calculate reference point.
+	 * @param {HTMLElement} domHandle Handler used to calculate the reference point.
 	 * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
 	 */
 	_getHandlePosition( domHandle ) {
@@ -413,7 +413,7 @@ export default class Resizer {
 mix( Resizer, ObservableMixin );
 
 /**
- * A view displaying new proposed element's size during the resizing.
+ * A view displaying the proposed new element size during the resizing.
  *
  * @extends {module:ui/view~View}
  */

src/widgetresize/resizerstate.js

@@ -43,7 +43,7 @@ export default class ResizeState {
 		 */
 
 		/**
-		 * 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.
 		 *
 		 * @readonly
@@ -96,9 +96,9 @@ export default class ResizeState {
 		this._options = options;
 
 		/**
-		 * 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.
 		 *
 		 * @private
 		 * @type {Object}
@@ -151,11 +151,11 @@ export default class ResizeState {
 mix( ResizeState, ObservableMixin );
 
 /**
- * Returns coordinates of top-left corner of a element, relative to the document's top-left corner.
+ * 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 Position of the resize handler, e.g. `"top-left"`, `"bottom-right"`.
+ * @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
@@ -176,8 +176,8 @@ function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 
 /**
  * @private
- * @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
- * @returns {String} A prefixed HTML class name for the resizer element
+ * @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 ) {
 	return `ck-widget__resizer__handle-${ resizerPosition }`;
@@ -187,7 +187,7 @@ function getResizerHandleClass( resizerPosition ) {
  * Determines the position of a given resize handle.
  *
  * @private
- * @param {HTMLElement} domHandle Handler used to calculate reference point.
+ * @param {HTMLElement} domHandle Handler used to calculate the reference point.
  * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
  */
 function getHandlePosition( domHandle ) {
@@ -202,7 +202,7 @@ function getHandlePosition( domHandle ) {
 
 /**
  * @param {String} position Like `"top-left"`.
- * @returns {String} Inverted `position`, e.g. returns `"bottom-right"` if `"top-left"` was given as `position`.
+ * @returns {String} Inverted `position`, e.g. it returns `"bottom-right"` if `"top-left"` was given as `position`.
  */
 function getOppositePosition( position ) {
 	const parts = position.split( '-' );

theme/widget.css

@@ -9,7 +9,7 @@
 	--ck-resizer-border-width: 1px;
 	--ck-resizer-border-radius: 2px;
 
-	/* Set resizer with 50% offset. */
+	/* Set the resizer with a 50% offset. */
 	--ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
 
 	--ck-resizer-tooltip-offset: 10px;
@@ -26,7 +26,7 @@
 	display: none;
 	position: absolute;
 
-	/* The wrapper itself should not interfere with pointer device, only the handles. */
+	/* The wrapper itself should not interfere with the pointer device, only the handles should. */
 	pointer-events: none;
 
 	left: 0;
@@ -44,7 +44,7 @@
 .ck .ck-widget__resizer__handle {
 	position: absolute;
 
-	/* Resizers are the only UI elements that should interfere with pointer device. */
+	/* Resizers are the only UI elements that should interfere with a pointer device. */
 	pointer-events: all;
 
 	width: var(--ck-resizer-size);
@@ -79,7 +79,7 @@
 }
 
 .ck .ck-widget.ck-widget_with-selection-handler {
-	/* Make the widget wrapper a relative positioning container for the drag handler. */
+	/* Make the widget wrapper a relative positioning container for the drag handle. */
 	position: relative;
 
 	/* Show the selection handler on mouse hover over the widget. */
@@ -93,7 +93,7 @@
 		position: absolute;
 
 		& .ck-icon {
-			/* Make sure the icon in not a subject to font-size/line-height to avoid
+			/* Make sure the icon in not a subject to font-size or line-height to avoid
 			unnecessary spacing around it. */
 			display: block;
 		}