@ckeditor/ckeditor5-image 41.3.1 → 41.4.0

package/src/imageresize/utils/getselectedimagewidthinunits.js

@@ -0,0 +1,41 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/utils/getselectedimagewidthinunits
+ */
+import { Rect } from 'ckeditor5/src/utils.js';
+import { calculateResizeHostAncestorWidth } from 'ckeditor5/src/widget.js';
+import { tryCastDimensionsToUnit, tryParseDimensionWithUnit } from './tryparsedimensionwithunit.js';
+import { getSelectedImageEditorNodes } from './getselectedimageeditornodes.js';
+/**
+ * Returns image width in specified units. It is width of image after resize.
+ *
+ * 	* If image is not selected or command is disabled then `null` will be returned.
+ * 	* If image is not fully loaded (and it is impossible to determine its natural size) then `null` will be returned.
+ *	* If `targetUnit` percentage is passed then it will return width percentage of image related to its accessors.
+ *
+ * @param editor Editor instance.
+ * @param targetUnit Unit in which dimension will be returned.
+ * @returns Parsed image width after resize (with unit).
+ */
+export function getSelectedImageWidthInUnits(editor, targetUnit) {
+    const imageNodes = getSelectedImageEditorNodes(editor);
+    if (!imageNodes) {
+        return null;
+    }
+    const parsedResizedWidth = tryParseDimensionWithUnit(imageNodes.model.getAttribute('resizedWidth') || null);
+    if (!parsedResizedWidth) {
+        return null;
+    }
+    if (parsedResizedWidth.unit === targetUnit) {
+        return parsedResizedWidth;
+    }
+    const imageParentWidthPx = calculateResizeHostAncestorWidth(imageNodes.dom);
+    const imageHolderDimension = {
+        unit: 'px',
+        value: new Rect(imageNodes.dom).width
+    };
+    return tryCastDimensionsToUnit(imageParentWidthPx, imageHolderDimension, targetUnit);
+}

package/src/imageresize/utils/tryparsedimensionwithunit.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/utils/tryparsedimensionwithunit
+ */
+/**
+ * Parses provided string with dimension value and returns extracted numeric value and unit.
+ *
+ * 	* If non-string dimension is passed then `null` value is returned.
+ * 	* If unit is missing then `null` is returned.
+ * 	* If numeric value part of string is not a number then `null` is returned.
+ *
+ * Example:
+ * 	`"222px"` => `{ value: 222, unit: "px" }`
+ *	`"99%"` => `{ value: 99, unit: "%" }`
+
+ * @param dimension Unsafe string with dimension.
+ * @returns Parsed dimension with extracted numeric value and units.
+ */
+export declare function tryParseDimensionWithUnit(dimension: string | null | undefined): DimensionWithUnit | null;
+/**
+ * Converts dimension between `px` -> `%` and `%` -> `px`.
+ *
+ * @param parentDimensionPx	Dimension of parent element that contains measured element.
+ * @param dimension Measured element dimension.
+ * @returns Casted dimension.
+ */
+export declare function tryCastDimensionsToUnit(parentDimensionPx: number, dimension: DimensionWithUnit, targetUnit: string): DimensionWithUnit;
+/**
+ * @internal
+ */
+export type DimensionWithUnit = {
+    value: number;
+    unit: string;
+};

package/src/imageresize/utils/tryparsedimensionwithunit.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/utils/tryparsedimensionwithunit
+ */
+/**
+ * Parses provided string with dimension value and returns extracted numeric value and unit.
+ *
+ * 	* If non-string dimension is passed then `null` value is returned.
+ * 	* If unit is missing then `null` is returned.
+ * 	* If numeric value part of string is not a number then `null` is returned.
+ *
+ * Example:
+ * 	`"222px"` => `{ value: 222, unit: "px" }`
+ *	`"99%"` => `{ value: 99, unit: "%" }`
+
+ * @param dimension Unsafe string with dimension.
+ * @returns Parsed dimension with extracted numeric value and units.
+ */
+export function tryParseDimensionWithUnit(dimension) {
+    if (!dimension) {
+        return null;
+    }
+    const [, rawValue, unit] = dimension.trim().match(/([.,\d]+)(%|px)$/) || [];
+    const parsedValue = Number.parseFloat(rawValue);
+    if (Number.isNaN(parsedValue)) {
+        return null;
+    }
+    return {
+        value: parsedValue,
+        unit
+    };
+}
+/**
+ * Converts dimension between `px` -> `%` and `%` -> `px`.
+ *
+ * @param parentDimensionPx	Dimension of parent element that contains measured element.
+ * @param dimension Measured element dimension.
+ * @returns Casted dimension.
+ */
+export function tryCastDimensionsToUnit(parentDimensionPx, dimension, targetUnit) {
+    // "%" -> "px" conversion
+    if (targetUnit === 'px') {
+        return {
+            value: dimension.value,
+            unit: 'px'
+        };
+    }
+    // "px" -> "%" conversion
+    return {
+        value: dimension.value / parentDimensionPx * 100,
+        unit: '%'
+    };
+}

package/src/imageresize.d.ts

@@ -9,6 +9,7 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import ImageResizeButtons from './imageresize/imageresizebuttons.js';
 import ImageResizeEditing from './imageresize/imageresizeediting.js';
 import ImageResizeHandles from './imageresize/imageresizehandles.js';
+import ImageCustomResizeUI from './imageresize/imagecustomresizeui.js';
 import '../theme/imageresize.css';
 /**
  * The image resize plugin.
@@ -19,7 +20,7 @@ export default class ImageResize extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageResizeEditing, typeof ImageResizeHandles, typeof ImageResizeButtons];
+    static get requires(): readonly [typeof ImageResizeEditing, typeof ImageResizeHandles, typeof ImageCustomResizeUI, typeof ImageResizeButtons];
     /**
      * @inheritDoc
      */

package/src/imageresize.js

@@ -9,6 +9,7 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import ImageResizeButtons from './imageresize/imageresizebuttons.js';
 import ImageResizeEditing from './imageresize/imageresizeediting.js';
 import ImageResizeHandles from './imageresize/imageresizehandles.js';
+import ImageCustomResizeUI from './imageresize/imagecustomresizeui.js';
 import '../theme/imageresize.css';
 /**
  * The image resize plugin.
@@ -20,7 +21,7 @@ export default class ImageResize extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageResizeEditing, ImageResizeHandles, ImageResizeButtons];
+        return [ImageResizeEditing, ImageResizeHandles, ImageCustomResizeUI, ImageResizeButtons];
     }
     /**
      * @inheritDoc

package/src/imageupload/imageuploadediting.js

@@ -248,6 +248,9 @@ export default class ImageUploadEditing extends Plugin {
                     domFigure.style.display = originalDisplay;
                 });
             }
+            if (editor.ui) {
+                editor.ui.ariaLiveAnnouncer.announce(t('Uploading image'));
+            }
             model.enqueueChange({ isUndoable: false }, writer => {
                 writer.setAttribute('uploadStatus', 'uploading', imageElement);
             });
@@ -257,11 +260,17 @@ export default class ImageUploadEditing extends Plugin {
             model.enqueueChange({ isUndoable: false }, writer => {
                 const imageElement = imageUploadElements.get(loader.id);
                 writer.setAttribute('uploadStatus', 'complete', imageElement);
+                if (editor.ui) {
+                    editor.ui.ariaLiveAnnouncer.announce(t('Image upload complete'));
+                }
                 this.fire('uploadComplete', { data, imageElement });
             });
             clean();
         })
             .catch(error => {
+            if (editor.ui) {
+                editor.ui.ariaLiveAnnouncer.announce(t('Error during image upload'));
+            }
             // If status is not 'error' nor 'aborted' - throw error because it means that something else went wrong,
             // it might be generic error and it would be real pain to find what is going on.
             if (loader.status !== 'error' && loader.status !== 'aborted') {

package/src/index.d.ts

@@ -17,6 +17,7 @@ export { default as ImageResize } from './imageresize.js';
 export { default as ImageResizeButtons } from './imageresize/imageresizebuttons.js';
 export { default as ImageResizeEditing } from './imageresize/imageresizeediting.js';
 export { default as ImageResizeHandles } from './imageresize/imageresizehandles.js';
+export { default as ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
 export { default as ImageSizeAttributes } from './imagesizeattributes.js';
 export { default as ImageStyle } from './imagestyle.js';
 export { default as ImageStyleEditing } from './imagestyle/imagestyleediting.js';

package/src/index.js

@@ -17,6 +17,7 @@ export { default as ImageResize } from './imageresize.js';
 export { default as ImageResizeButtons } from './imageresize/imageresizebuttons.js';
 export { default as ImageResizeEditing } from './imageresize/imageresizeediting.js';
 export { default as ImageResizeHandles } from './imageresize/imageresizehandles.js';
+export { default as ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
 export { default as ImageSizeAttributes } from './imagesizeattributes.js';
 export { default as ImageStyle } from './imagestyle.js';
 export { default as ImageStyleEditing } from './imagestyle/imagestyleediting.js';

package/theme/imagecaption.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
+
 :root {
 	--ck-color-image-caption-background: hsl(0, 0%, 97%);
 	--ck-color-image-caption-text: hsl(0, 0%, 20%);
@@ -19,11 +21,23 @@
 	padding: .6em;
 	font-size: .75em;
 	outline-offset: -1px;
+
+	/* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
+	@media (forced-colors: active) {
+		background-color: unset;
+		color: unset;
+	}
 }
 
 /* Editing styles */
 .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
-	animation: ck-image-caption-highlight .6s ease-out;
+	@mixin ck-media-default-colors {
+		animation: ck-image-caption-highlight .6s ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
 }
 
 @keyframes ck-image-caption-highlight {

package/theme/imagecustomresizeform.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.ck.ck-image-custom-resize-form {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: flex-start;
+
+	& .ck-labeled-field-view {
+		display: inline-block;
+	}
+
+	& .ck-label {
+		display: none;
+	}
+
+	@mixin ck-media-phone {
+		flex-wrap: wrap;
+
+		& .ck-labeled-field-view {
+			flex-basis: 100%;
+		}
+
+		& .ck-button {
+			flex-basis: 50%;
+		}
+	}
+}