@ckeditor/ckeditor5-widget 0.0.0-nightly-20240415.0 → 0.0.0-nightly-20240417.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-widget",
-  "version": "0.0.0-nightly-20240415.0",
+  "version": "0.0.0-nightly-20240417.0",
   "description": "Widget API for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,12 +12,12 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240415.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240415.0",
-    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-20240415.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20240415.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240415.0",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20240415.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240417.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20240417.0",
+    "@ckeditor/ckeditor5-enter": "0.0.0-nightly-20240417.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20240417.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240417.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20240417.0",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/utils.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module widget/utils
  */
-import { type GetCallback } from '@ckeditor/ckeditor5-utils';
+import { Rect, type GetCallback } from '@ckeditor/ckeditor5-utils';
 import { type HighlightDescriptor, type MapperViewToModelPositionEvent, type DocumentSelection, type DowncastWriter, type Model, type Range, type Selection, type ViewEditableElement, type ViewElement, type ViewTypeCheckable } from '@ckeditor/ckeditor5-engine';
 /**
  * CSS class added to each widget element.
@@ -196,3 +196,20 @@ export declare function findOptimalInsertionRange(selection: Selection | Documen
  * should be applied to the given view element.
  */
 export declare function viewToModelPositionOutsideModelElement(model: Model, viewElementMatcher: (element: ViewElement) => boolean): GetCallback<MapperViewToModelPositionEvent>;
+/**
+ * Starting from a DOM resize host element (an element that receives dimensions as a result of resizing),
+ * this helper returns the width of the found ancestor element.
+ *
+ * **Note**: This helper searches up to 5 levels of ancestors only.
+ *
+ * @param domResizeHost Resize host DOM element that receives dimensions as a result of resizing.
+ * @returns Width of ancestor element in pixels or 0 if no ancestor with a computed width has been found.
+ */
+export declare function calculateResizeHostAncestorWidth(domResizeHost: HTMLElement): number;
+/**
+ * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
+ *
+ * @param domResizeHost Resize host DOM element.
+ * @returns Percentage value between 0 and 100.
+ */
+export declare function calculateResizeHostPercentageWidth(domResizeHost: HTMLElement, resizeHostRect?: Rect): number;

package/src/utils.js

@@ -5,7 +5,7 @@
 /**
  * @module widget/utils
  */
-import { CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
+import { Rect, CKEditorError, toArray } from '@ckeditor/ckeditor5-utils';
 import { IconView } from '@ckeditor/ckeditor5-ui';
 import HighlightStack from './highlightstack.js';
 import { getTypeAroundFakeCaretPosition } from './widgettypearound/utils.js';
@@ -346,3 +346,47 @@ function addSelectionHandle(widgetElement, writer) {
     writer.insert(writer.createPositionAt(widgetElement, 0), selectionHandle);
     writer.addClass(['ck-widget_with-selection-handle'], widgetElement);
 }
+/**
+ * Starting from a DOM resize host element (an element that receives dimensions as a result of resizing),
+ * this helper returns the width of the found ancestor element.
+ *
+ * **Note**: This helper searches up to 5 levels of ancestors only.
+ *
+ * @param domResizeHost Resize host DOM element that receives dimensions as a result of resizing.
+ * @returns Width of ancestor element in pixels or 0 if no ancestor with a computed width has been found.
+ */
+export function calculateResizeHostAncestorWidth(domResizeHost) {
+    const domResizeHostParent = domResizeHost.parentElement;
+    if (!domResizeHostParent) {
+        return 0;
+    }
+    // Need to use computed style as it properly excludes parent's paddings from the returned value.
+    let parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(domResizeHostParent).width);
+    // Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree
+    // and try to get width from next ancestor.
+    // https://github.com/ckeditor/ckeditor5/issues/10776
+    const ancestorLevelLimit = 5;
+    let currentLevel = 0;
+    let checkedElement = domResizeHostParent;
+    while (isNaN(parentWidth)) {
+        checkedElement = checkedElement.parentElement;
+        if (++currentLevel > ancestorLevelLimit) {
+            return 0;
+        }
+        parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(checkedElement).width);
+    }
+    return parentWidth;
+}
+/**
+ * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
+ *
+ * @param domResizeHost Resize host DOM element.
+ * @returns Percentage value between 0 and 100.
+ */
+export function calculateResizeHostPercentageWidth(domResizeHost, resizeHostRect = new Rect(domResizeHost)) {
+    const parentWidth = calculateResizeHostAncestorWidth(domResizeHost);
+    if (!parentWidth) {
+        return 0;
+    }
+    return resizeHostRect.width / parentWidth * 100;
+}

package/src/widgetresize/resizerstate.js

@@ -6,6 +6,7 @@
  * @module widget/widgetresize/resizerstate
  */
 import { ObservableMixin, Rect } from '@ckeditor/ckeditor5-utils';
+import { calculateResizeHostPercentageWidth } from '../utils.js';
 /**
  * Stores the internal state of a single resizable object.
  */
@@ -64,7 +65,7 @@ export default class ResizeState extends ObservableMixin() {
             this._originalWidthPercents = parseFloat(widthStyle);
         }
         else {
-            this._originalWidthPercents = calculateHostPercentageWidth(domResizeHost, clientRect);
+            this._originalWidthPercents = calculateResizeHostPercentageWidth(domResizeHost, clientRect);
         }
     }
     update(newSize) {
@@ -75,28 +76,6 @@ export default class ResizeState extends ObservableMixin() {
         this.proposedHandleHostHeight = newSize.handleHostHeight;
     }
 }
-/**
- * Calculates a relative width of a `domResizeHost` compared to its ancestor in percents.
- */
-function calculateHostPercentageWidth(domResizeHost, resizeHostRect) {
-    const domResizeHostParent = domResizeHost.parentElement;
-    // Need to use computed style as it properly excludes parent's paddings from the returned value.
-    let parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(domResizeHostParent).width);
-    // Sometimes parent width cannot be accessed. If that happens we should go up in the elements tree
-    // and try to get width from next ancestor.
-    // https://github.com/ckeditor/ckeditor5/issues/10776
-    const ancestorLevelLimit = 5;
-    let currentLevel = 0;
-    let checkedElement = domResizeHostParent;
-    while (isNaN(parentWidth)) {
-        checkedElement = checkedElement.parentElement;
-        if (++currentLevel > ancestorLevelLimit) {
-            return 0;
-        }
-        parentWidth = parseFloat(domResizeHostParent.ownerDocument.defaultView.getComputedStyle(checkedElement).width);
-    }
-    return resizeHostRect.width / parentWidth * 100;
-}
 /**
  * Returns coordinates of the top-left corner of an element, relative to the document's top-left corner.
  *