roosterjs-content-model-plugins 9.4.1 → 9.5.0

package/lib-mjs/imageEdit/utils/getHTMLImageOptions.js

@@ -0,0 +1,18 @@
+import { isASmallImage } from './imageEditUtils';
+/**
+ * Default background colors for rotate handle
+ */
+var LIGHT_MODE_BGCOLOR = 'white';
+var DARK_MODE_BGCOLOR = '#333';
+/**
+ * @internal
+ */
+export var getHTMLImageOptions = function (editor, options, editInfo) {
+    var _a, _b;
+    return {
+        borderColor: options.borderColor || (editor.isDarkMode() ? DARK_MODE_BGCOLOR : LIGHT_MODE_BGCOLOR),
+        rotateHandleBackColor: editor.isDarkMode() ? DARK_MODE_BGCOLOR : LIGHT_MODE_BGCOLOR,
+        isSmallImage: isASmallImage((_a = editInfo.widthPx) !== null && _a !== void 0 ? _a : 0, (_b = editInfo.heightPx) !== null && _b !== void 0 ? _b : 0),
+    };
+};
+//# sourceMappingURL=getHTMLImageOptions.js.map

package/lib-mjs/imageEdit/utils/getHTMLImageOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getHTMLImageOptions.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getHTMLImageOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD;;GAEG;AACH,IAAM,kBAAkB,GAAG,OAAO,CAAC;AACnC,IAAM,iBAAiB,GAAG,MAAM,CAAC;AAEjC;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAC/B,MAAe,EACf,OAAyB,EACzB,QAA6B;;IAE7B,OAAO;QACH,WAAW,EACP,OAAO,CAAC,WAAW,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC;QACzF,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;QACnF,YAAY,EAAE,aAAa,CAAC,MAAA,QAAQ,CAAC,OAAO,mCAAI,CAAC,EAAE,MAAA,QAAQ,CAAC,QAAQ,mCAAI,CAAC,CAAC;KAC7E,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { isASmallImage } from './imageEditUtils';\nimport type { IEditor, ImageMetadataFormat } from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\n/**\n * Default background colors for rotate handle\n */\nconst LIGHT_MODE_BGCOLOR = 'white';\nconst DARK_MODE_BGCOLOR = '#333';\n\n/**\n * @internal\n */\nexport const getHTMLImageOptions = (\n    editor: IEditor,\n    options: ImageEditOptions,\n    editInfo: ImageMetadataFormat\n): ImageHtmlOptions => {\n    return {\n        borderColor:\n            options.borderColor || (editor.isDarkMode() ? DARK_MODE_BGCOLOR : LIGHT_MODE_BGCOLOR),\n        rotateHandleBackColor: editor.isDarkMode() ? DARK_MODE_BGCOLOR : LIGHT_MODE_BGCOLOR,\n        isSmallImage: isASmallImage(editInfo.widthPx ?? 0, editInfo.heightPx ?? 0),\n    };\n};\n"]}

package/lib-mjs/imageEdit/utils/getSelectedContentModelImage.d.ts

@@ -0,0 +1,5 @@
+import type { ReadonlyContentModelImage, ShallowMutableContentModelDocument } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function getSelectedContentModelImage(model: ShallowMutableContentModelDocument): ReadonlyContentModelImage | null;

package/lib-mjs/imageEdit/utils/getSelectedContentModelImage.js

@@ -0,0 +1,12 @@
+import { getSelectedSegments } from 'roosterjs-content-model-dom';
+/**
+ * @internal
+ */
+export function getSelectedContentModelImage(model) {
+    var selectedSegments = getSelectedSegments(model, false /*includeFormatHolder*/);
+    if (selectedSegments.length == 1 && selectedSegments[0].segmentType == 'Image') {
+        return selectedSegments[0];
+    }
+    return null;
+}
+//# sourceMappingURL=getSelectedContentModelImage.js.map

package/lib-mjs/imageEdit/utils/getSelectedContentModelImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSelectedContentModelImage.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedContentModelImage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAMlE;;GAEG;AACH,MAAM,UAAU,4BAA4B,CACxC,KAAyC;IAEzC,IAAM,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAC;IACnF,IAAI,gBAAgB,CAAC,MAAM,IAAI,CAAC,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,OAAO,EAAE;QAC5E,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;KAC9B;IAED,OAAO,IAAI,CAAC;AAChB,CAAC","sourcesContent":["import { getSelectedSegments } from 'roosterjs-content-model-dom';\nimport type {\n    ReadonlyContentModelImage,\n    ShallowMutableContentModelDocument,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function getSelectedContentModelImage(\n    model: ShallowMutableContentModelDocument\n): ReadonlyContentModelImage | null {\n    const selectedSegments = getSelectedSegments(model, false /*includeFormatHolder*/);\n    if (selectedSegments.length == 1 && selectedSegments[0].segmentType == 'Image') {\n        return selectedSegments[0];\n    }\n\n    return null;\n}\n"]}

package/lib-mjs/imageEdit/utils/imageEditUtils.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @internal
+ */
+export declare function getPx(value: number): string;
+/**
+ * @internal
+ */
+export declare function isASmallImage(widthPx: number, heightPx: number): boolean;
+/**
+ * @internal Calculate the rotated x and y distance for mouse moving
+ * @param x Original x distance
+ * @param y Original y distance
+ * @param angle Rotated angle, in radian
+ * @returns rotated x and y distances
+ */
+export declare function rotateCoordinate(x: number, y: number, angle: number): [number, number];
+/**
+ * @internal
+ */
+export declare function setFlipped(element: HTMLElement | null, flippedHorizontally?: boolean, flippedVertically?: boolean): void;
+/**
+ * @internal
+ */
+export declare function setWrapperSizeDimensions(wrapper: HTMLElement, image: HTMLImageElement, width: number, height: number): void;
+/**
+ * @internal
+ */
+export declare function setSize(element: HTMLElement, left: number | undefined, top: number | undefined, right: number | undefined, bottom: number | undefined, width: number | undefined, height: number | undefined): void;
+/**
+ * @internal
+ * Check if the current image was resized by the user
+ * @param image the current image
+ * @returns if the user resized the image, returns true, otherwise, returns false
+ */
+export declare function checkIfImageWasResized(image: HTMLImageElement): boolean;
+/**
+ * @internal
+ */
+export declare function isRTL(image: HTMLImageElement): boolean;

package/lib-mjs/imageEdit/utils/imageEditUtils.js

@@ -0,0 +1,91 @@
+import { MIN_HEIGHT_WIDTH } from '../constants/constants';
+/**
+ * @internal
+ */
+export function getPx(value) {
+    return value + 'px';
+}
+/**
+ * @internal
+ */
+export function isASmallImage(widthPx, heightPx) {
+    return widthPx && heightPx && (widthPx < MIN_HEIGHT_WIDTH || heightPx < MIN_HEIGHT_WIDTH)
+        ? true
+        : false;
+}
+/**
+ * @internal Calculate the rotated x and y distance for mouse moving
+ * @param x Original x distance
+ * @param y Original y distance
+ * @param angle Rotated angle, in radian
+ * @returns rotated x and y distances
+ */
+export function rotateCoordinate(x, y, angle) {
+    if (x == 0 && y == 0) {
+        return [0, 0];
+    }
+    var hypotenuse = Math.sqrt(x * x + y * y);
+    angle = Math.atan2(y, x) - angle;
+    return [hypotenuse * Math.cos(angle), hypotenuse * Math.sin(angle)];
+}
+/**
+ * @internal
+ */
+export function setFlipped(element, flippedHorizontally, flippedVertically) {
+    if (element) {
+        element.style.transform = "scale(" + (flippedHorizontally ? -1 : 1) + ", " + (flippedVertically ? -1 : 1) + ")";
+    }
+}
+/**
+ * @internal
+ */
+export function setWrapperSizeDimensions(wrapper, image, width, height) {
+    var hasBorder = image.style.borderStyle;
+    if (hasBorder) {
+        var borderWidth = image.style.borderWidth ? 2 * parseInt(image.style.borderWidth) : 2;
+        wrapper.style.width = getPx(width + borderWidth);
+        wrapper.style.height = getPx(height + borderWidth);
+        return;
+    }
+    wrapper.style.width = getPx(width);
+    wrapper.style.height = getPx(height);
+}
+/**
+ * @internal
+ */
+export function setSize(element, left, top, right, bottom, width, height) {
+    element.style.left = left !== undefined ? getPx(left) : element.style.left;
+    element.style.top = top !== undefined ? getPx(top) : element.style.top;
+    element.style.right = right !== undefined ? getPx(right) : element.style.right;
+    element.style.bottom = bottom !== undefined ? getPx(bottom) : element.style.bottom;
+    element.style.width = width !== undefined ? getPx(width) : element.style.width;
+    element.style.height = height !== undefined ? getPx(height) : element.style.height;
+}
+/**
+ * @internal
+ * Check if the current image was resized by the user
+ * @param image the current image
+ * @returns if the user resized the image, returns true, otherwise, returns false
+ */
+export function checkIfImageWasResized(image) {
+    var style = image.style;
+    var isMaxWidthInitial = style.maxWidth === '' || style.maxWidth === 'initial' || style.maxWidth === 'auto';
+    if (isMaxWidthInitial &&
+        (isFixedNumberValue(style.height) || isFixedNumberValue(style.width))) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+/**
+ * @internal
+ */
+export function isRTL(image) {
+    return window.getComputedStyle(image).direction === 'rtl';
+}
+function isFixedNumberValue(value) {
+    var numberValue = typeof value === 'string' ? parseInt(value) : value;
+    return !isNaN(numberValue);
+}
+//# sourceMappingURL=imageEditUtils.js.map

package/lib-mjs/imageEdit/utils/imageEditUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageEditUtils.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/imageEditUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import { MIN_HEIGHT_WIDTH } from '../constants/constants';\n\n/**\n * @internal\n */\nexport function getPx(value: number): string {\n    return value + 'px';\n}\n\n/**\n * @internal\n */\nexport function isASmallImage(widthPx: number, heightPx: number): boolean {\n    return widthPx && heightPx && (widthPx < MIN_HEIGHT_WIDTH || heightPx < MIN_HEIGHT_WIDTH)\n        ? true\n        : false;\n}\n\n/**\n * @internal Calculate the rotated x and y distance for mouse moving\n * @param x Original x distance\n * @param y Original y distance\n * @param angle Rotated angle, in radian\n * @returns rotated x and y distances\n */\nexport function rotateCoordinate(x: number, y: number, angle: number): [number, number] {\n    if (x == 0 && y == 0) {\n        return [0, 0];\n    }\n    const hypotenuse = Math.sqrt(x * x + y * y);\n    angle = Math.atan2(y, x) - angle;\n    return [hypotenuse * Math.cos(angle), hypotenuse * Math.sin(angle)];\n}\n\n/**\n * @internal\n */\nexport function setFlipped(\n    element: HTMLElement | null,\n    flippedHorizontally?: boolean,\n    flippedVertically?: boolean\n) {\n    if (element) {\n        element.style.transform = `scale(${flippedHorizontally ? -1 : 1}, ${\n            flippedVertically ? -1 : 1\n        })`;\n    }\n}\n\n/**\n * @internal\n */\nexport function setWrapperSizeDimensions(\n    wrapper: HTMLElement,\n    image: HTMLImageElement,\n    width: number,\n    height: number\n) {\n    const hasBorder = image.style.borderStyle;\n    if (hasBorder) {\n        const borderWidth = image.style.borderWidth ? 2 * parseInt(image.style.borderWidth) : 2;\n        wrapper.style.width = getPx(width + borderWidth);\n        wrapper.style.height = getPx(height + borderWidth);\n        return;\n    }\n    wrapper.style.width = getPx(width);\n    wrapper.style.height = getPx(height);\n}\n\n/**\n * @internal\n */\nexport function setSize(\n    element: HTMLElement,\n    left: number | undefined,\n    top: number | undefined,\n    right: number | undefined,\n    bottom: number | undefined,\n    width: number | undefined,\n    height: number | undefined\n) {\n    element.style.left = left !== undefined ? getPx(left) : element.style.left;\n    element.style.top = top !== undefined ? getPx(top) : element.style.top;\n    element.style.right = right !== undefined ? getPx(right) : element.style.right;\n    element.style.bottom = bottom !== undefined ? getPx(bottom) : element.style.bottom;\n    element.style.width = width !== undefined ? getPx(width) : element.style.width;\n    element.style.height = height !== undefined ? getPx(height) : element.style.height;\n}\n\n/**\n * @internal\n * Check if the current image was resized by the user\n * @param image the current image\n * @returns if the user resized the image, returns true, otherwise, returns false\n */\nexport function checkIfImageWasResized(image: HTMLImageElement): boolean {\n    const { style } = image;\n    const isMaxWidthInitial =\n        style.maxWidth === '' || style.maxWidth === 'initial' || style.maxWidth === 'auto';\n    if (\n        isMaxWidthInitial &&\n        (isFixedNumberValue(style.height) || isFixedNumberValue(style.width))\n    ) {\n        return true;\n    } else {\n        return false;\n    }\n}\n\n/**\n * @internal\n */\nexport function isRTL(image: HTMLImageElement): boolean {\n    return window.getComputedStyle(image).direction === 'rtl';\n}\n\nfunction isFixedNumberValue(value: string | number) {\n    const numberValue = typeof value === 'string' ? parseInt(value) : value;\n    return !isNaN(numberValue);\n}\n"]}

package/lib-mjs/imageEdit/utils/updateHandleCursor.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ * Rotate the resizer and cropper handles according to the image position.
+ * @param handles The resizer handles.
+ * @param angleRad The angle that the image was rotated.
+ */
+export declare function updateHandleCursor(handles: HTMLElement[], angleRad: number): void;

package/lib-mjs/imageEdit/utils/updateHandleCursor.js

@@ -0,0 +1,30 @@
+var PI = Math.PI;
+var DIRECTIONS = 8;
+var DirectionRad = (PI * 2) / DIRECTIONS;
+var DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+function handleRadIndexCalculator(angleRad) {
+    var idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
+    return idx < 0 ? idx + DIRECTIONS : idx;
+}
+function rotateHandles(angleRad, y, x) {
+    if (y === void 0) { y = ''; }
+    if (x === void 0) { x = ''; }
+    var radIndex = handleRadIndexCalculator(angleRad);
+    var originalDirection = y + x;
+    var originalIndex = DirectionOrder.indexOf(originalDirection);
+    var rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;
+    return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';
+}
+/**
+ * @internal
+ * Rotate the resizer and cropper handles according to the image position.
+ * @param handles The resizer handles.
+ * @param angleRad The angle that the image was rotated.
+ */
+export function updateHandleCursor(handles, angleRad) {
+    handles.forEach(function (handle) {
+        var _a = handle.dataset, y = _a.y, x = _a.x;
+        handle.style.cursor = rotateHandles(angleRad, y, x) + "-resize";
+    });
+}
+//# sourceMappingURL=updateHandleCursor.js.map

package/lib-mjs/imageEdit/utils/updateHandleCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateHandleCursor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateHandleCursor.ts"],"names":[],"mappings":"AAAA,IAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;AACnB,IAAM,UAAU,GAAG,CAAC,CAAC;AACrB,IAAM,YAAY,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;AAC3C,IAAM,cAAc,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;AAEpE,SAAS,wBAAwB,CAAC,QAAgB;IAC9C,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC,GAAG,UAAU,CAAC;IAC7D,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;AAC5C,CAAC;AAED,SAAS,aAAa,CAAC,QAAgB,EAAE,CAAc,EAAE,CAAc;IAA9B,kBAAA,EAAA,MAAc;IAAE,kBAAA,EAAA,MAAc;IACnE,IAAM,QAAQ,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACpD,IAAM,iBAAiB,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,IAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAChE,IAAM,YAAY,GAAG,aAAa,IAAI,CAAC,IAAI,aAAa,GAAG,QAAQ,CAAC;IACpE,OAAO,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AACzE,CAAC;AACD;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,OAAsB,EAAE,QAAgB;IACvE,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;QACZ,IAAA,KAAW,MAAM,CAAC,OAAO,EAAvB,CAAC,OAAA,EAAE,CAAC,OAAmB,CAAC;QAChC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAM,aAAa,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,YAAS,CAAC;IACpE,CAAC,CAAC,CAAC;AACP,CAAC","sourcesContent":["const PI = Math.PI;\nconst DIRECTIONS = 8;\nconst DirectionRad = (PI * 2) / DIRECTIONS;\nconst DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];\n\nfunction handleRadIndexCalculator(angleRad: number): number {\n    const idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;\n    return idx < 0 ? idx + DIRECTIONS : idx;\n}\n\nfunction rotateHandles(angleRad: number, y: string = '', x: string = ''): string {\n    const radIndex = handleRadIndexCalculator(angleRad);\n    const originalDirection = y + x;\n    const originalIndex = DirectionOrder.indexOf(originalDirection);\n    const rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;\n    return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';\n}\n/**\n * @internal\n * Rotate the resizer and cropper handles according to the image position.\n * @param handles The resizer handles.\n * @param angleRad The angle that the image was rotated.\n */\nexport function updateHandleCursor(handles: HTMLElement[], angleRad: number) {\n    handles.forEach(handle => {\n        const { y, x } = handle.dataset;\n        handle.style.cursor = `${rotateHandles(angleRad, y, x)}-resize`;\n    });\n}\n"]}

package/lib-mjs/imageEdit/utils/updateImageEditInfo.d.ts

@@ -0,0 +1,10 @@
+import type { ContentModelImage, IEditor, ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function updateImageEditInfo(contentModelImage: ContentModelImage, newImageMetadata?: ImageMetadataFormat | null): void;
+/**
+ * @internal
+ * @returns
+ */
+export declare function getSelectedImageMetadata(editor: IEditor, image: HTMLImageElement): ImageMetadataFormat;

package/lib-mjs/imageEdit/utils/updateImageEditInfo.js

@@ -0,0 +1,44 @@
+import { __assign } from "tslib";
+import { getSelectedContentModelImage } from './getSelectedContentModelImage';
+import { updateImageMetadata } from 'roosterjs-content-model-dom';
+/**
+ * @internal
+ */
+export function updateImageEditInfo(contentModelImage, newImageMetadata) {
+    updateImageMetadata(contentModelImage, newImageMetadata !== undefined
+        ? function (format) {
+            format = newImageMetadata;
+            return format;
+        }
+        : undefined);
+}
+function getInitialEditInfo(image) {
+    return {
+        src: image.getAttribute('src') || '',
+        widthPx: image.clientWidth,
+        heightPx: image.clientHeight,
+        naturalWidth: image.naturalWidth,
+        naturalHeight: image.naturalHeight,
+        leftPercent: 0,
+        rightPercent: 0,
+        topPercent: 0,
+        bottomPercent: 0,
+        angleRad: 0,
+    };
+}
+/**
+ * @internal
+ * @returns
+ */
+export function getSelectedImageMetadata(editor, image) {
+    var imageMetadata = getInitialEditInfo(image);
+    editor.formatContentModel(function (model) {
+        var selectedImage = getSelectedContentModelImage(model);
+        if (selectedImage) {
+            imageMetadata = __assign(__assign({}, imageMetadata), selectedImage.dataset);
+        }
+        return false;
+    });
+    return imageMetadata;
+}
+//# sourceMappingURL=updateImageEditInfo.js.map

package/lib-mjs/imageEdit/utils/updateImageEditInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateImageEditInfo.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateImageEditInfo.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAOlE;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAC/B,iBAAoC,EACpC,gBAA6C;IAE7C,mBAAmB,CACf,iBAAiB,EACjB,gBAAgB,KAAK,SAAS;QAC1B,CAAC,CAAC,UAAA,MAAM;YACF,MAAM,GAAG,gBAAgB,CAAC;YAC1B,OAAO,MAAM,CAAC;QAClB,CAAC;QACH,CAAC,CAAC,SAAS,CAClB,CAAC;AACN,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAuB;IAC/C,OAAO;QACH,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE;QACpC,OAAO,EAAE,KAAK,CAAC,WAAW;QAC1B,QAAQ,EAAE,KAAK,CAAC,YAAY;QAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,CAAC;QACb,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,CAAC;KACd,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,wBAAwB,CACpC,MAAe,EACf,KAAuB;IAEvB,IAAI,aAAa,GAAwB,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACnE,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;QAC3B,IAAM,aAAa,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;QAC1D,IAAI,aAAa,EAAE;YACf,aAAa,yBAAQ,aAAa,GAAK,aAAa,CAAC,OAAO,CAAE,CAAC;SAClE;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,aAAa,CAAC;AACzB,CAAC","sourcesContent":["import { getSelectedContentModelImage } from './getSelectedContentModelImage';\nimport { updateImageMetadata } from 'roosterjs-content-model-dom';\nimport type {\n    ContentModelImage,\n    IEditor,\n    ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function updateImageEditInfo(\n    contentModelImage: ContentModelImage,\n    newImageMetadata?: ImageMetadataFormat | null\n) {\n    updateImageMetadata(\n        contentModelImage,\n        newImageMetadata !== undefined\n            ? format => {\n                  format = newImageMetadata;\n                  return format;\n              }\n            : undefined\n    );\n}\n\nfunction getInitialEditInfo(image: HTMLImageElement): ImageMetadataFormat {\n    return {\n        src: image.getAttribute('src') || '',\n        widthPx: image.clientWidth,\n        heightPx: image.clientHeight,\n        naturalWidth: image.naturalWidth,\n        naturalHeight: image.naturalHeight,\n        leftPercent: 0,\n        rightPercent: 0,\n        topPercent: 0,\n        bottomPercent: 0,\n        angleRad: 0,\n    };\n}\n\n/**\n * @internal\n * @returns\n */\nexport function getSelectedImageMetadata(\n    editor: IEditor,\n    image: HTMLImageElement\n): ImageMetadataFormat {\n    let imageMetadata: ImageMetadataFormat = getInitialEditInfo(image);\n    editor.formatContentModel(model => {\n        const selectedImage = getSelectedContentModelImage(model);\n        if (selectedImage) {\n            imageMetadata = { ...imageMetadata, ...selectedImage.dataset };\n        }\n        return false;\n    });\n\n    return imageMetadata;\n}\n"]}

package/lib-mjs/imageEdit/utils/updateWrapper.d.ts

@@ -0,0 +1,6 @@
+import type { ImageEditOptions } from '../types/ImageEditOptions';
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function updateWrapper(editInfo: ImageMetadataFormat, options: ImageEditOptions, image: HTMLImageElement, clonedImage: HTMLImageElement, wrapper: HTMLSpanElement, resizers?: HTMLDivElement[], croppers?: HTMLDivElement[]): void;

package/lib-mjs/imageEdit/utils/updateWrapper.js

@@ -0,0 +1,83 @@
+import { doubleCheckResize } from './doubleCheckResize';
+import { getGeneratedImageSize } from './generateImageSize';
+import { ImageEditElementClass } from '../types/ImageEditElementClass';
+import { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';
+import { updateHandleCursor } from './updateHandleCursor';
+import { updateSideHandlesVisibility } from '../Resizer/updateSideHandlesVisibility';
+import { getPx, isASmallImage, isRTL, setFlipped, setSize, setWrapperSizeDimensions, } from './imageEditUtils';
+/**
+ * @internal
+ */
+export function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers, croppers) {
+    var angleRad = editInfo.angleRad, bottomPercent = editInfo.bottomPercent, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, flippedHorizontal = editInfo.flippedHorizontal, flippedVertical = editInfo.flippedVertical;
+    var generateImageSize = getGeneratedImageSize(editInfo, croppers && (croppers === null || croppers === void 0 ? void 0 : croppers.length) > 0);
+    if (!generateImageSize) {
+        return;
+    }
+    var targetWidth = generateImageSize.targetWidth, targetHeight = generateImageSize.targetHeight, originalWidth = generateImageSize.originalWidth, originalHeight = generateImageSize.originalHeight, visibleWidth = generateImageSize.visibleWidth, visibleHeight = generateImageSize.visibleHeight;
+    var marginHorizontal = (targetWidth - visibleWidth) / 2;
+    var marginVertical = (targetHeight - visibleHeight) / 2;
+    var cropLeftPx = originalWidth * (leftPercent || 0);
+    var cropRightPx = originalWidth * (rightPercent || 0);
+    var cropTopPx = originalHeight * (topPercent || 0);
+    var cropBottomPx = originalHeight * (bottomPercent || 0);
+    // Update size and margin of the wrapper
+    wrapper.style.margin = marginVertical + "px " + marginHorizontal + "px";
+    wrapper.style.transform = "rotate(" + angleRad + "rad)";
+    setWrapperSizeDimensions(wrapper, image, visibleWidth, visibleHeight);
+    // Update the text-alignment to avoid the image to overflow if the parent element have align center or right
+    // or if the direction is Right To Left
+    if (isRTL(clonedImage)) {
+        wrapper.style.textAlign = 'right';
+        if (!croppers) {
+            clonedImage.style.left = getPx(cropLeftPx);
+            clonedImage.style.right = getPx(-cropRightPx);
+        }
+    }
+    else {
+        wrapper.style.textAlign = 'left';
+    }
+    // Update size of the image
+    clonedImage.style.width = getPx(originalWidth);
+    clonedImage.style.height = getPx(originalHeight);
+    clonedImage.style.verticalAlign = 'bottom';
+    clonedImage.style.position = 'absolute';
+    //Update flip direction
+    setFlipped(clonedImage.parentElement, flippedHorizontal, flippedVertical);
+    var smallImage = isASmallImage(visibleWidth, visibleWidth);
+    if (!croppers) {
+        // For rotate/resize, set the margin of the image so that cropped part won't be visible
+        clonedImage.style.margin = -cropTopPx + "px 0 0 " + -cropLeftPx + "px";
+    }
+    if (croppers && croppers.length > 0) {
+        var cropContainer = croppers[0];
+        var cropOverlays = croppers.filter(function (cropper) { return cropper.className === ImageEditElementClass.CropOverlay; });
+        setSize(cropContainer, cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
+        setSize(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);
+        setSize(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);
+        setSize(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);
+        setSize(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);
+        if (angleRad) {
+            updateHandleCursor(croppers, angleRad);
+        }
+    }
+    if (resizers) {
+        var clientWidth = wrapper.clientWidth;
+        var clientHeight = wrapper.clientHeight;
+        doubleCheckResize(editInfo, options.preserveRatio || false, clientWidth, clientHeight);
+        var resizeHandles = resizers
+            .map(function (resizer) {
+            var resizeHandle = resizer.firstElementChild;
+            if (isNodeOfType(resizeHandle, 'ELEMENT_NODE') &&
+                isElementOfType(resizeHandle, 'div')) {
+                return resizeHandle;
+            }
+        })
+            .filter(function (handle) { return !!handle; });
+        if (angleRad) {
+            updateHandleCursor(resizeHandles, angleRad);
+        }
+        updateSideHandlesVisibility(resizeHandles, smallImage);
+    }
+}
+//# sourceMappingURL=updateWrapper.js.map

package/lib-mjs/imageEdit/utils/updateWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AAGrF,OAAO,EACH,KAAK,EACL,aAAa,EACb,KAAK,EACL,UAAU,EACV,OAAO,EACP,wBAAwB,GAC3B,MAAM,kBAAkB,CAAC;AAE1B;;GAEG;AACH,MAAM,UAAU,aAAa,CACzB,QAA6B,EAC7B,OAAyB,EACzB,KAAuB,EACvB,WAA6B,EAC7B,OAAwB,EACxB,QAA2B,EAC3B,QAA2B;IAGvB,IAAA,QAAQ,GAOR,QAAQ,SAPA,EACR,aAAa,GAMb,QAAQ,cANK,EACb,WAAW,GAKX,QAAQ,YALG,EACX,YAAY,GAIZ,QAAQ,aAJI,EACZ,UAAU,GAGV,QAAQ,WAHE,EACV,iBAAiB,GAEjB,QAAQ,kBAFS,EACjB,eAAe,GACf,QAAQ,gBADO,CACN;IAEb,IAAM,iBAAiB,GAAG,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,IAAI,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC;IAC5F,IAAI,CAAC,iBAAiB,EAAE;QACpB,OAAO;KACV;IAEG,IAAA,WAAW,GAMX,iBAAiB,YANN,EACX,YAAY,GAKZ,iBAAiB,aALL,EACZ,aAAa,GAIb,iBAAiB,cAJJ,EACb,cAAc,GAGd,iBAAiB,eAHH,EACd,YAAY,GAEZ,iBAAiB,aAFL,EACZ,aAAa,GACb,iBAAiB,cADJ,CACK;IAEtB,IAAM,gBAAgB,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAC1D,IAAM,cAAc,GAAG,CAAC,YAAY,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1D,IAAM,UAAU,GAAG,aAAa,GAAG,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC;IACtD,IAAM,WAAW,GAAG,aAAa,GAAG,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC;IACxD,IAAM,SAAS,GAAG,cAAc,GAAG,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC;IACrD,IAAM,YAAY,GAAG,cAAc,GAAG,CAAC,aAAa,IAAI,CAAC,CAAC,CAAC;IAE3D,wCAAwC;IACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAM,cAAc,WAAM,gBAAgB,OAAI,CAAC;IACnE,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,YAAU,QAAQ,SAAM,CAAC;IACnD,wBAAwB,CAAC,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IAEtE,4GAA4G;IAC5G,uCAAuC;IACvC,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;QAClC,IAAI,CAAC,QAAQ,EAAE;YACX,WAAW,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;YAC3C,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC;SACjD;KACJ;SAAM;QACH,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;KACpC;IAED,2BAA2B;IAC3B,WAAW,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;IACjD,WAAW,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC3C,WAAW,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IAExC,uBAAuB;IACvB,UAAU,CAAC,WAAW,CAAC,aAAa,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAAC;IAC1E,IAAM,UAAU,GAAG,aAAa,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAE7D,IAAI,CAAC,QAAQ,EAAE;QACX,uFAAuF;QACvF,WAAW,CAAC,KAAK,CAAC,MAAM,GAAM,CAAC,SAAS,eAAU,CAAC,UAAU,OAAI,CAAC;KACrE;IAED,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QACjC,IAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClC,IAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAChC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,SAAS,KAAK,qBAAqB,CAAC,WAAW,EAAvD,CAAuD,CACrE,CAAC;QAEF,OAAO,CACH,aAAa,EACb,UAAU,EACV,SAAS,EACT,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,CACZ,CAAC;QACF,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC7E,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;QAChF,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;QAC/E,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;QAE5E,IAAI,QAAQ,EAAE;YACV,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;SAC1C;KACJ;IAED,IAAI,QAAQ,EAAE;QACV,IAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC;QACxC,IAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;QAE1C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,CAAC,aAAa,IAAI,KAAK,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAEvF,IAAM,aAAa,GAAG,QAAQ;aACzB,GAAG,CAAC,UAAA,OAAO;YACR,IAAM,YAAY,GAAG,OAAO,CAAC,iBAAiB,CAAC;YAC/C,IACI,YAAY,CAAC,YAAY,EAAE,cAAc,CAAC;gBAC1C,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACtC;gBACE,OAAO,YAAY,CAAC;aACvB;QACL,CAAC,CAAC;aACD,MAAM,CAAC,UAAA,MAAM,IAAI,OAAA,CAAC,CAAC,MAAM,EAAR,CAAQ,CAAqB,CAAC;QAEpD,IAAI,QAAQ,EAAE;YACV,kBAAkB,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;SAC/C;QAED,2BAA2B,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;KAC1D;AACL,CAAC","sourcesContent":["import { doubleCheckResize } from './doubleCheckResize';\nimport { getGeneratedImageSize } from './generateImageSize';\nimport { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';\nimport { updateHandleCursor } from './updateHandleCursor';\nimport { updateSideHandlesVisibility } from '../Resizer/updateSideHandlesVisibility';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\nimport {\n    getPx,\n    isASmallImage,\n    isRTL,\n    setFlipped,\n    setSize,\n    setWrapperSizeDimensions,\n} from './imageEditUtils';\n\n/**\n * @internal\n */\nexport function updateWrapper(\n    editInfo: ImageMetadataFormat,\n    options: ImageEditOptions,\n    image: HTMLImageElement,\n    clonedImage: HTMLImageElement,\n    wrapper: HTMLSpanElement,\n    resizers?: HTMLDivElement[],\n    croppers?: HTMLDivElement[]\n) {\n    const {\n        angleRad,\n        bottomPercent,\n        leftPercent,\n        rightPercent,\n        topPercent,\n        flippedHorizontal,\n        flippedVertical,\n    } = editInfo;\n\n    const generateImageSize = getGeneratedImageSize(editInfo, croppers && croppers?.length > 0);\n    if (!generateImageSize) {\n        return;\n    }\n    const {\n        targetWidth,\n        targetHeight,\n        originalWidth,\n        originalHeight,\n        visibleWidth,\n        visibleHeight,\n    } = generateImageSize;\n\n    const marginHorizontal = (targetWidth - visibleWidth) / 2;\n    const marginVertical = (targetHeight - visibleHeight) / 2;\n    const cropLeftPx = originalWidth * (leftPercent || 0);\n    const cropRightPx = originalWidth * (rightPercent || 0);\n    const cropTopPx = originalHeight * (topPercent || 0);\n    const cropBottomPx = originalHeight * (bottomPercent || 0);\n\n    // Update size and margin of the wrapper\n    wrapper.style.margin = `${marginVertical}px ${marginHorizontal}px`;\n    wrapper.style.transform = `rotate(${angleRad}rad)`;\n    setWrapperSizeDimensions(wrapper, image, visibleWidth, visibleHeight);\n\n    // Update the text-alignment to avoid the image to overflow if the parent element have align center or right\n    // or if the direction is Right To Left\n    if (isRTL(clonedImage)) {\n        wrapper.style.textAlign = 'right';\n        if (!croppers) {\n            clonedImage.style.left = getPx(cropLeftPx);\n            clonedImage.style.right = getPx(-cropRightPx);\n        }\n    } else {\n        wrapper.style.textAlign = 'left';\n    }\n\n    // Update size of the image\n    clonedImage.style.width = getPx(originalWidth);\n    clonedImage.style.height = getPx(originalHeight);\n    clonedImage.style.verticalAlign = 'bottom';\n    clonedImage.style.position = 'absolute';\n\n    //Update flip direction\n    setFlipped(clonedImage.parentElement, flippedHorizontal, flippedVertical);\n    const smallImage = isASmallImage(visibleWidth, visibleWidth);\n\n    if (!croppers) {\n        // For rotate/resize, set the margin of the image so that cropped part won't be visible\n        clonedImage.style.margin = `${-cropTopPx}px 0 0 ${-cropLeftPx}px`;\n    }\n\n    if (croppers && croppers.length > 0) {\n        const cropContainer = croppers[0];\n        const cropOverlays = croppers.filter(\n            cropper => cropper.className === ImageEditElementClass.CropOverlay\n        );\n\n        setSize(\n            cropContainer,\n            cropLeftPx,\n            cropTopPx,\n            cropRightPx,\n            cropBottomPx,\n            undefined,\n            undefined\n        );\n        setSize(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);\n        setSize(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);\n        setSize(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);\n        setSize(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);\n\n        if (angleRad) {\n            updateHandleCursor(croppers, angleRad);\n        }\n    }\n\n    if (resizers) {\n        const clientWidth = wrapper.clientWidth;\n        const clientHeight = wrapper.clientHeight;\n\n        doubleCheckResize(editInfo, options.preserveRatio || false, clientWidth, clientHeight);\n\n        const resizeHandles = resizers\n            .map(resizer => {\n                const resizeHandle = resizer.firstElementChild;\n                if (\n                    isNodeOfType(resizeHandle, 'ELEMENT_NODE') &&\n                    isElementOfType(resizeHandle, 'div')\n                ) {\n                    return resizeHandle;\n                }\n            })\n            .filter(handle => !!handle) as HTMLDivElement[];\n\n        if (angleRad) {\n            updateHandleCursor(resizeHandles, angleRad);\n        }\n\n        updateSideHandlesVisibility(resizeHandles, smallImage);\n    }\n}\n"]}

package/lib-mjs/index.d.ts

@@ -17,4 +17,5 @@ export { PickerPlugin } from './picker/PickerPlugin';
 export { PickerHelper } from './picker/PickerHelper';
 export { PickerSelectionChangMode, PickerDirection, PickerHandler } from './picker/PickerHandler';
 export { CustomReplacePlugin, CustomReplace } from './customReplace/CustomReplacePlugin';
-export { getDOMInsertPointRect } from './pluginUtils/Rect/getDOMInsertPointRect';
+export { ImageEditPlugin } from './imageEdit/ImageEditPlugin';
+export { ImageEditOptions } from './imageEdit/types/ImageEditOptions';

package/lib-mjs/index.js

@@ -10,5 +10,5 @@ export { MarkdownPlugin } from './markdown/MarkdownPlugin';
 export { HyperlinkPlugin } from './hyperlink/HyperlinkPlugin';
 export { PickerPlugin } from './picker/PickerPlugin';
 export { CustomReplacePlugin } from './customReplace/CustomReplacePlugin';
-export { getDOMInsertPointRect } from './pluginUtils/Rect/getDOMInsertPointRect';
+export { ImageEditPlugin } from './imageEdit/ImageEditPlugin';
 //# sourceMappingURL=index.js.map

package/lib-mjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/roosterjs-content-model-plugins/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,+BAA+B,CAAC;AAEpF,OAAO,EACH,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,qBAAqB,EAAsB,MAAM,yCAAyC,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAmB,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,EAAE,mBAAmB,EAAiB,MAAM,qCAAqC,CAAC;AAEzF,OAAO,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC","sourcesContent":["export { TableEditPlugin } from './tableEdit/TableEditPlugin';\nexport { OnTableEditorCreatedCallback } from './tableEdit/OnTableEditorCreatedCallback';\nexport { TableEditFeatureName } from './tableEdit/editors/features/TableEditFeatureName';\nexport { PastePlugin } from './paste/PastePlugin';\nexport { EditPlugin } from './edit/EditPlugin';\nexport { AutoFormatPlugin, AutoFormatOptions } from './autoFormat/AutoFormatPlugin';\n\nexport {\n    ShortcutBold,\n    ShortcutItalic,\n    ShortcutUnderline,\n    ShortcutClearFormat,\n    ShortcutUndo,\n    ShortcutUndo2,\n    ShortcutRedo,\n    ShortcutRedoAlt,\n    ShortcutRedoMacOS,\n    ShortcutBullet,\n    ShortcutNumbering,\n    ShortcutIncreaseFont,\n    ShortcutDecreaseFont,\n    ShortcutIndentList,\n    ShortcutOutdentList,\n} from './shortcut/shortcuts';\nexport { ShortcutPlugin } from './shortcut/ShortcutPlugin';\nexport { ShortcutKeyDefinition, ShortcutCommand } from './shortcut/ShortcutCommand';\nexport { ContextMenuPluginBase, ContextMenuOptions } from './contextMenuBase/ContextMenuPluginBase';\nexport { WatermarkPlugin } from './watermark/WatermarkPlugin';\nexport { WatermarkFormat } from './watermark/WatermarkFormat';\nexport { MarkdownPlugin, MarkdownOptions } from './markdown/MarkdownPlugin';\nexport { HyperlinkPlugin } from './hyperlink/HyperlinkPlugin';\nexport { HyperlinkToolTip } from './hyperlink/HyperlinkToolTip';\nexport { PickerPlugin } from './picker/PickerPlugin';\nexport { PickerHelper } from './picker/PickerHelper';\nexport { PickerSelectionChangMode, PickerDirection, PickerHandler } from './picker/PickerHandler';\nexport { CustomReplacePlugin, CustomReplace } from './customReplace/CustomReplacePlugin';\n\nexport { getDOMInsertPointRect } from './pluginUtils/Rect/getDOMInsertPointRect';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/roosterjs-content-model-plugins/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAqB,MAAM,+BAA+B,CAAC;AAEpF,OAAO,EACH,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,qBAAqB,EAAsB,MAAM,yCAAyC,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,cAAc,EAAmB,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,EAAE,mBAAmB,EAAiB,MAAM,qCAAqC,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { TableEditPlugin } from './tableEdit/TableEditPlugin';\nexport { OnTableEditorCreatedCallback } from './tableEdit/OnTableEditorCreatedCallback';\nexport { TableEditFeatureName } from './tableEdit/editors/features/TableEditFeatureName';\nexport { PastePlugin } from './paste/PastePlugin';\nexport { EditPlugin } from './edit/EditPlugin';\nexport { AutoFormatPlugin, AutoFormatOptions } from './autoFormat/AutoFormatPlugin';\n\nexport {\n    ShortcutBold,\n    ShortcutItalic,\n    ShortcutUnderline,\n    ShortcutClearFormat,\n    ShortcutUndo,\n    ShortcutUndo2,\n    ShortcutRedo,\n    ShortcutRedoAlt,\n    ShortcutRedoMacOS,\n    ShortcutBullet,\n    ShortcutNumbering,\n    ShortcutIncreaseFont,\n    ShortcutDecreaseFont,\n    ShortcutIndentList,\n    ShortcutOutdentList,\n} from './shortcut/shortcuts';\nexport { ShortcutPlugin } from './shortcut/ShortcutPlugin';\nexport { ShortcutKeyDefinition, ShortcutCommand } from './shortcut/ShortcutCommand';\nexport { ContextMenuPluginBase, ContextMenuOptions } from './contextMenuBase/ContextMenuPluginBase';\nexport { WatermarkPlugin } from './watermark/WatermarkPlugin';\nexport { WatermarkFormat } from './watermark/WatermarkFormat';\nexport { MarkdownPlugin, MarkdownOptions } from './markdown/MarkdownPlugin';\nexport { HyperlinkPlugin } from './hyperlink/HyperlinkPlugin';\nexport { HyperlinkToolTip } from './hyperlink/HyperlinkToolTip';\nexport { PickerPlugin } from './picker/PickerPlugin';\nexport { PickerHelper } from './picker/PickerHelper';\nexport { PickerSelectionChangMode, PickerDirection, PickerHandler } from './picker/PickerHandler';\nexport { CustomReplacePlugin, CustomReplace } from './customReplace/CustomReplacePlugin';\nexport { ImageEditPlugin } from './imageEdit/ImageEditPlugin';\nexport { ImageEditOptions } from './imageEdit/types/ImageEditOptions';\n"]}

package/lib-mjs/paste/DefaultSanitizers.d.ts

@@ -0,0 +1,10 @@
+import type { ValueSanitizer } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare const DefaultSanitizers: Record<string, ValueSanitizer>;
+/**
+ * @internal
+ * exported only for unit test
+ */
+export declare function divParagraphSanitizer(value: string, tagName: string): string | null;

package/lib-mjs/paste/DefaultSanitizers.js

@@ -0,0 +1,21 @@
+/**
+ * @internal
+ */
+export var DefaultSanitizers = {
+    width: divParagraphSanitizer,
+    height: divParagraphSanitizer,
+    'inline-size': divParagraphSanitizer,
+    'block-size': divParagraphSanitizer,
+};
+/**
+ * @internal
+ * exported only for unit test
+ */
+export function divParagraphSanitizer(value, tagName) {
+    var tag = tagName.toLowerCase();
+    if (tag == 'div' || tag == 'p') {
+        return null;
+    }
+    return value;
+}
+//# sourceMappingURL=DefaultSanitizers.js.map

package/lib-mjs/paste/DefaultSanitizers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultSanitizers.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/paste/DefaultSanitizers.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,IAAM,iBAAiB,GAAmC;IAC7D,KAAK,EAAE,qBAAqB;IAC5B,MAAM,EAAE,qBAAqB;IAC7B,aAAa,EAAE,qBAAqB;IACpC,YAAY,EAAE,qBAAqB;CACtC,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAa,EAAE,OAAe;IAChE,IAAM,GAAG,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IAClC,IAAI,GAAG,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;QAC5B,OAAO,IAAI,CAAC;KACf;IACD,OAAO,KAAK,CAAC;AACjB,CAAC","sourcesContent":["import type { ValueSanitizer } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const DefaultSanitizers: Record<string, ValueSanitizer> = {\n    width: divParagraphSanitizer,\n    height: divParagraphSanitizer,\n    'inline-size': divParagraphSanitizer,\n    'block-size': divParagraphSanitizer,\n};\n\n/**\n * @internal\n * exported only for unit test\n */\nexport function divParagraphSanitizer(value: string, tagName: string): string | null {\n    const tag = tagName.toLowerCase();\n    if (tag == 'div' || tag == 'p') {\n        return null;\n    }\n    return value;\n}\n"]}

package/lib-mjs/paste/PastePlugin.d.ts

@@ -1,4 +1,4 @@
-import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+import type { DomToModelOptionForSanitizing, EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
 /**
  * Paste plugin, handles BeforePaste event and reformat some special content, including:
  * 1. Content copied from Word
@@ -8,13 +8,14 @@ import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model
  */
 export declare class PastePlugin implements EditorPlugin {
     private allowExcelNoBorderTable?;
+    private domToModelForSanitizing;
     private editor;
     /**
      * Construct a new instance of Paste class
      * @param unknownTagReplacement Replace solution of unknown tags, default behavior is to replace with SPAN
      * @param allowExcelNoBorderTable Allow table copied from Excel without border
      */
-    constructor(allowExcelNoBorderTable?: boolean | undefined);
+    constructor(allowExcelNoBorderTable?: boolean | undefined, domToModelForSanitizing?: Pick<DomToModelOptionForSanitizing, 'additionalAllowedTags' | 'additionalDisallowedTags' | 'styleSanitizers' | 'attributeSanitizers'>);
     /**
      * Get name of this plugin
      */
@@ -39,4 +40,5 @@ export declare class PastePlugin implements EditorPlugin {
      * @param event The event to handle:
      */
     onPluginEvent(event: PluginEvent): void;
+    private setEventSanitizers;
 }

package/lib-mjs/paste/PastePlugin.js

@@ -1,5 +1,8 @@
+import { __read, __spreadArray } from "tslib";
 import { addParser } from './utils/addParser';
-import { BorderKeys } from 'roosterjs-content-model-dom';
+import { BorderKeys, getObjectKeys } from 'roosterjs-content-model-dom';
+import { chainSanitizerCallback } from './utils/chainSanitizerCallback';
+import { DefaultSanitizers } from './DefaultSanitizers';
 import { deprecatedBorderColorParser } from './utils/deprecatedColorParser';
 import { getPasteSource } from './pasteSourceValidations/getPasteSource';
 import { parseLink } from './utils/linkParser';
@@ -21,8 +24,15 @@ var PastePlugin = /** @class */ (function () {
      * @param unknownTagReplacement Replace solution of unknown tags, default behavior is to replace with SPAN
      * @param allowExcelNoBorderTable Allow table copied from Excel without border
      */
-    function PastePlugin(allowExcelNoBorderTable) {
+    function PastePlugin(allowExcelNoBorderTable, domToModelForSanitizing) {
+        if (domToModelForSanitizing === void 0) { domToModelForSanitizing = {
+            styleSanitizers: DefaultSanitizers,
+            additionalAllowedTags: [],
+            additionalDisallowedTags: [],
+            attributeSanitizers: {},
+        }; }
         this.allowExcelNoBorderTable = allowExcelNoBorderTable;
+        this.domToModelForSanitizing = domToModelForSanitizing;
         this.editor = null;
     }
     /**
@@ -92,6 +102,21 @@ var PastePlugin = /** @class */ (function () {
             addParser(event.domToModelOption, 'block', blockElementParser);
             addParser(event.domToModelOption, 'listLevel', blockElementParser);
         }
+        this.setEventSanitizers(event);
+    };
+    PastePlugin.prototype.setEventSanitizers = function (event) {
+        var _a, _b;
+        if (this.domToModelForSanitizing) {
+            var _c = this.domToModelForSanitizing, styleSanitizers_1 = _c.styleSanitizers, attributeSanitizers_1 = _c.attributeSanitizers, additionalAllowedTags = _c.additionalAllowedTags, additionalDisallowedTags = _c.additionalDisallowedTags;
+            getObjectKeys(styleSanitizers_1).forEach(function (key) {
+                return chainSanitizerCallback(event.domToModelOption.styleSanitizers, key, styleSanitizers_1[key]);
+            });
+            getObjectKeys(attributeSanitizers_1).forEach(function (key) {
+                return chainSanitizerCallback(event.domToModelOption.attributeSanitizers, key, attributeSanitizers_1[key]);
+            });
+            (_a = event.domToModelOption.additionalAllowedTags).push.apply(_a, __spreadArray([], __read(additionalAllowedTags), false));
+            (_b = event.domToModelOption.additionalDisallowedTags).push.apply(_b, __spreadArray([], __read(additionalDisallowedTags), false));
+        }
     };
     return PastePlugin;
 }());