roosterjs-content-model-plugins 9.4.1 → 9.5.0

package/lib/imageEdit/utils/getDropAndDragHelpers.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDropAndDragHelpers = void 0;
+var DragAndDropHelper_1 = require("../../pluginUtils/DragAndDrop/DragAndDropHelper");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+/**
+ * @internal
+ */
+function getDropAndDragHelpers(wrapper, editInfo, options, elementClass, helper, updateWrapper, zoomScale) {
+    return getEditElements(wrapper, elementClass).map(function (element) {
+        return new DragAndDropHelper_1.DragAndDropHelper(element, {
+            editInfo: editInfo,
+            options: options,
+            elementClass: elementClass,
+            x: element.dataset.x,
+            y: element.dataset.y,
+        }, updateWrapper, helper, zoomScale);
+    });
+}
+exports.getDropAndDragHelpers = getDropAndDragHelpers;
+function getEditElements(wrapper, elementClass) {
+    return (0, roosterjs_content_model_dom_1.toArray)(wrapper.querySelectorAll('.' + elementClass));
+}
+//# sourceMappingURL=getDropAndDragHelpers.js.map

package/lib/imageEdit/utils/getDropAndDragHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDropAndDragHelpers.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getDropAndDragHelpers.ts"],"names":[],"mappings":";;;AAAA,qFAAoF;AACpF,2EAAsD;AAOtD;;GAEG;AACH,SAAgB,qBAAqB,CACjC,OAAoB,EACpB,QAA6B,EAC7B,OAAyB,EACzB,YAAmC,EACnC,MAAmD,EACnD,aAA0E,EAC1E,SAAiB;IAEjB,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAG,CAC7C,UAAA,OAAO;QACH,OAAA,IAAI,qCAAiB,CACjB,OAAO,EACP;YACI,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;YAChB,YAAY,cAAA;YACZ,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAkB;YACrC,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAkB;SACxC,EACD,aAAa,EACb,MAAM,EACN,SAAS,CACZ;IAZD,CAYC,CACR,CAAC;AACN,CAAC;AAzBD,sDAyBC;AAED,SAAS,eAAe,CAAC,OAAoB,EAAE,YAAmC;IAC9E,OAAO,IAAA,qCAAO,EAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,GAAG,YAAY,CAAC,CAAkB,CAAC;AAClF,CAAC","sourcesContent":["import { DragAndDropHelper } from '../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { toArray } from 'roosterjs-content-model-dom';\nimport type { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { DragAndDropContext, DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';\n\n/**\n * @internal\n */\nexport function getDropAndDragHelpers(\n    wrapper: HTMLElement,\n    editInfo: ImageMetadataFormat,\n    options: ImageEditOptions,\n    elementClass: ImageEditElementClass,\n    helper: DragAndDropHandler<DragAndDropContext, any>,\n    updateWrapper: (context: DragAndDropContext, _handle: HTMLElement) => void,\n    zoomScale: number\n): DragAndDropHelper<DragAndDropContext, any>[] {\n    return getEditElements(wrapper, elementClass).map(\n        element =>\n            new DragAndDropHelper<DragAndDropContext, any>(\n                element,\n                {\n                    editInfo: editInfo,\n                    options: options,\n                    elementClass,\n                    x: element.dataset.x as DNDDirectionX,\n                    y: element.dataset.y as DnDDirectionY,\n                },\n                updateWrapper,\n                helper,\n                zoomScale\n            )\n    );\n}\n\nfunction getEditElements(wrapper: HTMLElement, elementClass: ImageEditElementClass): HTMLElement[] {\n    return toArray(wrapper.querySelectorAll('.' + elementClass)) as HTMLElement[];\n}\n"]}

package/lib/imageEdit/utils/getHTMLImageOptions.d.ts

@@ -0,0 +1,7 @@
+import type { IEditor, ImageMetadataFormat } from 'roosterjs-content-model-types';
+import type { ImageEditOptions } from '../types/ImageEditOptions';
+import type { ImageHtmlOptions } from '../types/ImageHtmlOptions';
+/**
+ * @internal
+ */
+export declare const getHTMLImageOptions: (editor: IEditor, options: ImageEditOptions, editInfo: ImageMetadataFormat) => ImageHtmlOptions;

package/lib/imageEdit/utils/getHTMLImageOptions.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHTMLImageOptions = void 0;
+var imageEditUtils_1 = require("./imageEditUtils");
+/**
+ * Default background colors for rotate handle
+ */
+var LIGHT_MODE_BGCOLOR = 'white';
+var DARK_MODE_BGCOLOR = '#333';
+/**
+ * @internal
+ */
+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: (0, imageEditUtils_1.isASmallImage)((_a = editInfo.widthPx) !== null && _a !== void 0 ? _a : 0, (_b = editInfo.heightPx) !== null && _b !== void 0 ? _b : 0),
+    };
+};
+exports.getHTMLImageOptions = getHTMLImageOptions;
+//# sourceMappingURL=getHTMLImageOptions.js.map

package/lib/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,mDAAiD;AAKjD;;GAEG;AACH,IAAM,kBAAkB,GAAG,OAAO,CAAC;AACnC,IAAM,iBAAiB,GAAG,MAAM,CAAC;AAEjC;;GAEG;AACI,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,IAAA,8BAAa,EAAC,MAAA,QAAQ,CAAC,OAAO,mCAAI,CAAC,EAAE,MAAA,QAAQ,CAAC,QAAQ,mCAAI,CAAC,CAAC;KAC7E,CAAC;AACN,CAAC,CAAC;AAXW,QAAA,mBAAmB,uBAW9B","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/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/imageEdit/utils/getSelectedContentModelImage.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedContentModelImage = void 0;
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+/**
+ * @internal
+ */
+function getSelectedContentModelImage(model) {
+    var selectedSegments = (0, roosterjs_content_model_dom_1.getSelectedSegments)(model, false /*includeFormatHolder*/);
+    if (selectedSegments.length == 1 && selectedSegments[0].segmentType == 'Image') {
+        return selectedSegments[0];
+    }
+    return null;
+}
+exports.getSelectedContentModelImage = getSelectedContentModelImage;
+//# sourceMappingURL=getSelectedContentModelImage.js.map

package/lib/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,2EAAkE;AAMlE;;GAEG;AACH,SAAgB,4BAA4B,CACxC,KAAyC;IAEzC,IAAM,gBAAgB,GAAG,IAAA,iDAAmB,EAAC,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;AATD,oEASC","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/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/imageEdit/utils/imageEditUtils.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRTL = exports.checkIfImageWasResized = exports.setSize = exports.setWrapperSizeDimensions = exports.setFlipped = exports.rotateCoordinate = exports.isASmallImage = exports.getPx = void 0;
+var constants_1 = require("../constants/constants");
+/**
+ * @internal
+ */
+function getPx(value) {
+    return value + 'px';
+}
+exports.getPx = getPx;
+/**
+ * @internal
+ */
+function isASmallImage(widthPx, heightPx) {
+    return widthPx && heightPx && (widthPx < constants_1.MIN_HEIGHT_WIDTH || heightPx < constants_1.MIN_HEIGHT_WIDTH)
+        ? true
+        : false;
+}
+exports.isASmallImage = isASmallImage;
+/**
+ * @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
+ */
+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)];
+}
+exports.rotateCoordinate = rotateCoordinate;
+/**
+ * @internal
+ */
+function setFlipped(element, flippedHorizontally, flippedVertically) {
+    if (element) {
+        element.style.transform = "scale(" + (flippedHorizontally ? -1 : 1) + ", " + (flippedVertically ? -1 : 1) + ")";
+    }
+}
+exports.setFlipped = setFlipped;
+/**
+ * @internal
+ */
+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);
+}
+exports.setWrapperSizeDimensions = setWrapperSizeDimensions;
+/**
+ * @internal
+ */
+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;
+}
+exports.setSize = setSize;
+/**
+ * @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
+ */
+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;
+    }
+}
+exports.checkIfImageWasResized = checkIfImageWasResized;
+/**
+ * @internal
+ */
+function isRTL(image) {
+    return window.getComputedStyle(image).direction === 'rtl';
+}
+exports.isRTL = isRTL;
+function isFixedNumberValue(value) {
+    var numberValue = typeof value === 'string' ? parseInt(value) : value;
+    return !isNaN(numberValue);
+}
+//# sourceMappingURL=imageEditUtils.js.map

package/lib/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/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/imageEdit/utils/updateHandleCursor.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateHandleCursor = void 0;
+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.
+ */
+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";
+    });
+}
+exports.updateHandleCursor = updateHandleCursor;
+//# sourceMappingURL=updateHandleCursor.js.map

package/lib/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,SAAgB,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;AALD,gDAKC","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/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/imageEdit/utils/updateImageEditInfo.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedImageMetadata = exports.updateImageEditInfo = void 0;
+var tslib_1 = require("tslib");
+var getSelectedContentModelImage_1 = require("./getSelectedContentModelImage");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+/**
+ * @internal
+ */
+function updateImageEditInfo(contentModelImage, newImageMetadata) {
+    (0, roosterjs_content_model_dom_1.updateImageMetadata)(contentModelImage, newImageMetadata !== undefined
+        ? function (format) {
+            format = newImageMetadata;
+            return format;
+        }
+        : undefined);
+}
+exports.updateImageEditInfo = updateImageEditInfo;
+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
+ */
+function getSelectedImageMetadata(editor, image) {
+    var imageMetadata = getInitialEditInfo(image);
+    editor.formatContentModel(function (model) {
+        var selectedImage = (0, getSelectedContentModelImage_1.getSelectedContentModelImage)(model);
+        if (selectedImage) {
+            imageMetadata = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, imageMetadata), selectedImage.dataset);
+        }
+        return false;
+    });
+    return imageMetadata;
+}
+exports.getSelectedImageMetadata = getSelectedImageMetadata;
+//# sourceMappingURL=updateImageEditInfo.js.map

package/lib/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,+EAA8E;AAC9E,2EAAkE;AAOlE;;GAEG;AACH,SAAgB,mBAAmB,CAC/B,iBAAoC,EACpC,gBAA6C;IAE7C,IAAA,iDAAmB,EACf,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;AAbD,kDAaC;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,SAAgB,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,IAAA,2DAA4B,EAAC,KAAK,CAAC,CAAC;QAC1D,IAAI,aAAa,EAAE;YACf,aAAa,mDAAQ,aAAa,GAAK,aAAa,CAAC,OAAO,CAAE,CAAC;SAClE;QACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,aAAa,CAAC;AACzB,CAAC;AAdD,4DAcC","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/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/imageEdit/utils/updateWrapper.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateWrapper = void 0;
+var doubleCheckResize_1 = require("./doubleCheckResize");
+var generateImageSize_1 = require("./generateImageSize");
+var ImageEditElementClass_1 = require("../types/ImageEditElementClass");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var updateHandleCursor_1 = require("./updateHandleCursor");
+var updateSideHandlesVisibility_1 = require("../Resizer/updateSideHandlesVisibility");
+var imageEditUtils_1 = require("./imageEditUtils");
+/**
+ * @internal
+ */
+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 = (0, generateImageSize_1.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)";
+    (0, imageEditUtils_1.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 ((0, imageEditUtils_1.isRTL)(clonedImage)) {
+        wrapper.style.textAlign = 'right';
+        if (!croppers) {
+            clonedImage.style.left = (0, imageEditUtils_1.getPx)(cropLeftPx);
+            clonedImage.style.right = (0, imageEditUtils_1.getPx)(-cropRightPx);
+        }
+    }
+    else {
+        wrapper.style.textAlign = 'left';
+    }
+    // Update size of the image
+    clonedImage.style.width = (0, imageEditUtils_1.getPx)(originalWidth);
+    clonedImage.style.height = (0, imageEditUtils_1.getPx)(originalHeight);
+    clonedImage.style.verticalAlign = 'bottom';
+    clonedImage.style.position = 'absolute';
+    //Update flip direction
+    (0, imageEditUtils_1.setFlipped)(clonedImage.parentElement, flippedHorizontal, flippedVertical);
+    var smallImage = (0, imageEditUtils_1.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_1.ImageEditElementClass.CropOverlay; });
+        (0, imageEditUtils_1.setSize)(cropContainer, cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
+        (0, imageEditUtils_1.setSize)(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);
+        (0, imageEditUtils_1.setSize)(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);
+        (0, imageEditUtils_1.setSize)(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);
+        (0, imageEditUtils_1.setSize)(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);
+        if (angleRad) {
+            (0, updateHandleCursor_1.updateHandleCursor)(croppers, angleRad);
+        }
+    }
+    if (resizers) {
+        var clientWidth = wrapper.clientWidth;
+        var clientHeight = wrapper.clientHeight;
+        (0, doubleCheckResize_1.doubleCheckResize)(editInfo, options.preserveRatio || false, clientWidth, clientHeight);
+        var resizeHandles = resizers
+            .map(function (resizer) {
+            var resizeHandle = resizer.firstElementChild;
+            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(resizeHandle, 'ELEMENT_NODE') &&
+                (0, roosterjs_content_model_dom_1.isElementOfType)(resizeHandle, 'div')) {
+                return resizeHandle;
+            }
+        })
+            .filter(function (handle) { return !!handle; });
+        if (angleRad) {
+            (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
+        }
+        (0, updateSideHandlesVisibility_1.updateSideHandlesVisibility)(resizeHandles, smallImage);
+    }
+}
+exports.updateWrapper = updateWrapper;
+//# sourceMappingURL=updateWrapper.js.map

package/lib/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":"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","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/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/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDOMInsertPointRect = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
+exports.ImageEditPlugin = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
 var TableEditPlugin_1 = require("./tableEdit/TableEditPlugin");
 Object.defineProperty(exports, "TableEditPlugin", { enumerable: true, get: function () { return TableEditPlugin_1.TableEditPlugin; } });
 var PastePlugin_1 = require("./paste/PastePlugin");
@@ -39,6 +39,6 @@ var PickerPlugin_1 = require("./picker/PickerPlugin");
 Object.defineProperty(exports, "PickerPlugin", { enumerable: true, get: function () { return PickerPlugin_1.PickerPlugin; } });
 var CustomReplacePlugin_1 = require("./customReplace/CustomReplacePlugin");
 Object.defineProperty(exports, "CustomReplacePlugin", { enumerable: true, get: function () { return CustomReplacePlugin_1.CustomReplacePlugin; } });
-var getDOMInsertPointRect_1 = require("./pluginUtils/Rect/getDOMInsertPointRect");
-Object.defineProperty(exports, "getDOMInsertPointRect", { enumerable: true, get: function () { return getDOMInsertPointRect_1.getDOMInsertPointRect; } });
+var ImageEditPlugin_1 = require("./imageEdit/ImageEditPlugin");
+Object.defineProperty(exports, "ImageEditPlugin", { enumerable: true, get: function () { return ImageEditPlugin_1.ImageEditPlugin; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../packages/roosterjs-content-model-plugins/lib/index.ts"],"names":[],"mappings":";;;AAAA,+DAA8D;AAArD,kHAAA,eAAe,OAAA;AAGxB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,gDAA+C;AAAtC,wGAAA,UAAU,OAAA;AACnB,kEAAoF;AAA3E,oHAAA,gBAAgB,OAAA;AAEzB,kDAgB8B;AAf1B,yGAAA,YAAY,OAAA;AACZ,2GAAA,cAAc,OAAA;AACd,8GAAA,iBAAiB,OAAA;AACjB,gHAAA,mBAAmB,OAAA;AACnB,yGAAA,YAAY,OAAA;AACZ,0GAAA,aAAa,OAAA;AACb,yGAAA,YAAY,OAAA;AACZ,4GAAA,eAAe,OAAA;AACf,8GAAA,iBAAiB,OAAA;AACjB,2GAAA,cAAc,OAAA;AACd,8GAAA,iBAAiB,OAAA;AACjB,iHAAA,oBAAoB,OAAA;AACpB,iHAAA,oBAAoB,OAAA;AACpB,+GAAA,kBAAkB,OAAA;AAClB,gHAAA,mBAAmB,OAAA;AAEvB,4DAA2D;AAAlD,gHAAA,cAAc,OAAA;AAEvB,iFAAoG;AAA3F,8HAAA,qBAAqB,OAAA;AAC9B,+DAA8D;AAArD,kHAAA,eAAe,OAAA;AAExB,4DAA4E;AAAnE,gHAAA,cAAc,OAAA;AACvB,+DAA8D;AAArD,kHAAA,eAAe,OAAA;AAExB,sDAAqD;AAA5C,4GAAA,YAAY,OAAA;AAGrB,2EAAyF;AAAhF,0HAAA,mBAAmB,OAAA;AAE5B,kFAAiF;AAAxE,8HAAA,qBAAqB,OAAA","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,+DAA8D;AAArD,kHAAA,eAAe,OAAA;AAGxB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,gDAA+C;AAAtC,wGAAA,UAAU,OAAA;AACnB,kEAAoF;AAA3E,oHAAA,gBAAgB,OAAA;AAEzB,kDAgB8B;AAf1B,yGAAA,YAAY,OAAA;AACZ,2GAAA,cAAc,OAAA;AACd,8GAAA,iBAAiB,OAAA;AACjB,gHAAA,mBAAmB,OAAA;AACnB,yGAAA,YAAY,OAAA;AACZ,0GAAA,aAAa,OAAA;AACb,yGAAA,YAAY,OAAA;AACZ,4GAAA,eAAe,OAAA;AACf,8GAAA,iBAAiB,OAAA;AACjB,2GAAA,cAAc,OAAA;AACd,8GAAA,iBAAiB,OAAA;AACjB,iHAAA,oBAAoB,OAAA;AACpB,iHAAA,oBAAoB,OAAA;AACpB,+GAAA,kBAAkB,OAAA;AAClB,gHAAA,mBAAmB,OAAA;AAEvB,4DAA2D;AAAlD,gHAAA,cAAc,OAAA;AAEvB,iFAAoG;AAA3F,8HAAA,qBAAqB,OAAA;AAC9B,+DAA8D;AAArD,kHAAA,eAAe,OAAA;AAExB,4DAA4E;AAAnE,gHAAA,cAAc,OAAA;AACvB,+DAA8D;AAArD,kHAAA,eAAe,OAAA;AAExB,sDAAqD;AAA5C,4GAAA,YAAY,OAAA;AAGrB,2EAAyF;AAAhF,0HAAA,mBAAmB,OAAA;AAC5B,+DAA8D;AAArD,kHAAA,eAAe,OAAA","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/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/paste/DefaultSanitizers.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.divParagraphSanitizer = exports.DefaultSanitizers = void 0;
+/**
+ * @internal
+ */
+exports.DefaultSanitizers = {
+    width: divParagraphSanitizer,
+    height: divParagraphSanitizer,
+    'inline-size': divParagraphSanitizer,
+    'block-size': divParagraphSanitizer,
+};
+/**
+ * @internal
+ * exported only for unit test
+ */
+function divParagraphSanitizer(value, tagName) {
+    var tag = tagName.toLowerCase();
+    if (tag == 'div' || tag == 'p') {
+        return null;
+    }
+    return value;
+}
+exports.divParagraphSanitizer = divParagraphSanitizer;
+//# sourceMappingURL=DefaultSanitizers.js.map

package/lib/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;AACU,QAAA,iBAAiB,GAAmC;IAC7D,KAAK,EAAE,qBAAqB;IAC5B,MAAM,EAAE,qBAAqB;IAC7B,aAAa,EAAE,qBAAqB;IACpC,YAAY,EAAE,qBAAqB;CACtC,CAAC;AAEF;;;GAGG;AACH,SAAgB,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;AAND,sDAMC","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/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;
 }