npm - roosterjs-content-model-plugins - Versions diffs - 9.54.0 → 9.56.0 - Mend

roosterjs-content-model-plugins 9.54.0 → 9.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/imageEdit/utils/createImageWrapper.js CHANGED Viewed

@@ -25,16 +25,31 @@ function createImageWrapper(editor, image, options, editInfo, htmlOptions, opera
         croppers = (0, createImageCropper_1.createImageCropper)(doc);
     }
     var wrapper = createWrapper(editor, imageClone, options, editInfo, resizers, rotators, croppers);
+    // Capture the image footprint before attaching the shadow root, since the light-DOM image
+    // stops being rendered once the shadow root takes over.
+    var imageWidth = image.offsetWidth;
+    var imageHeight = image.offsetHeight;
     var imageSpan = (0, roosterjs_content_model_dom_1.wrap)(doc, image, 'span');
-    var shadowSpan = createShadowSpan(wrapper, imageSpan);
+    var shadowSpan = createShadowSpan(wrapper, imageSpan, imageWidth, imageHeight);
     return { wrapper: wrapper, shadowSpan: shadowSpan, imageClone: imageClone, resizers: resizers, rotators: rotators, croppers: croppers };
 }
 exports.createImageWrapper = createImageWrapper;
-var createShadowSpan = function (wrapper, imageSpan) {
+var createShadowSpan = function (wrapper, imageSpan, imageWidth, imageHeight) {
     var shadowRoot = imageSpan.attachShadow({
         mode: 'open',
     });
     imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;
+    // Pin the shadow host to the original image's box so that wrapping the image does not grow the
+    // surrounding line box. Without this, the taller edit wrapper enlarges the line and the browser
+    // scrolls the selection back into view, making the editor jump. The wrapper and handles still
+    // overflow the host visually because overflow is left visible.
+    if (imageWidth > 0 && imageHeight > 0) {
+        imageSpan.style.display = 'inline-block';
+        imageSpan.style.width = imageWidth + "px";
+        imageSpan.style.height = imageHeight + "px";
+        imageSpan.style.verticalAlign = 'bottom';
+        imageSpan.style.overflow = 'visible';
+    }
     shadowRoot.appendChild(wrapper);
     return imageSpan;
 };

package/lib/imageEdit/utils/createImageWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\nimport { wrap } from 'roosterjs-content-model-dom';\n\nimport type {\n IEditor,\n ImageEditOperation,\n ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\nconst IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';\n\n/*\n @internal\n /\nexport interface WrapperElements {\n wrapper: HTMLSpanElement;\n shadowSpan: HTMLElement;\n imageClone: HTMLImageElement;\n resizers: HTMLDivElement[];\n rotators: HTMLDivElement[];\n croppers: HTMLDivElement[];\n}\n\n/\n @internal\n */\nexport function createImageWrapper(\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n htmlOptions: ImageHtmlOptions,\n operation: ImageEditOperation[]\n): WrapperElements {\n const imageClone = cloneImage(image, editInfo, options.resolveImageSource);\n const doc = editor.getDocument();\n\n let rotators: HTMLDivElement[] = [];\n if (!options.disableRotate && operation.indexOf('rotate') > -1) {\n rotators = createImageRotator(doc, htmlOptions);\n }\n let resizers: HTMLDivElement[] = [];\n if (operation.indexOf('resize') > -1) {\n resizers = createImageResizer(doc, !!options.disableSideResize);\n }\n\n let croppers: HTMLDivElement[] = [];\n if (operation.indexOf('crop') > -1) {\n croppers = createImageCropper(doc);\n }\n\n const wrapper = createWrapper(\n editor,\n imageClone,\n options,\n editInfo,\n resizers,\n rotators,\n croppers\n );\n const imageSpan = wrap(doc, image, 'span');\n const shadowSpan = createShadowSpan(wrapper, imageSpan);\n return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (wrapper: HTMLElement, imageSpan: HTMLSpanElement) => {\n const shadowRoot = imageSpan.attachShadow({\n mode: 'open',\n });\n imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;\n shadowRoot.appendChild(wrapper);\n return imageSpan;\n};\n\nconst createWrapper = (\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n resizers?: HTMLDivElement[],\n rotators?: HTMLDivElement[],\n cropper?: HTMLDivElement[]\n) => {\n const doc = editor.getDocument();\n const wrapper = doc.createElement('span');\n const imageBox = doc.createElement('div');\n\n imageBox.setAttribute(\n `style`,\n `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n );\n imageBox.appendChild(image);\n wrapper.setAttribute(\n 'style',\n `font-size: 24px; margin: 0px; transform: rotate(${editInfo.angleRad ?? 0}rad);`\n );\n wrapper.style.display = editor.getEnvironment().isSafari\n ? '-webkit-inline-flex'\n : 'inline-flex';\n\n const border = createBorder(editor, options.borderColor);\n wrapper.appendChild(imageBox);\n wrapper.appendChild(border);\n wrapper.style.userSelect = 'none';\n\n if (resizers && resizers?.length > 0) {\n resizers.forEach(resizer => {\n wrapper.appendChild(resizer);\n });\n }\n if (rotators && rotators.length > 0) {\n rotators.forEach(r => {\n wrapper.appendChild(r);\n });\n }\n if (cropper && cropper.length > 0) {\n cropper.forEach(c => {\n wrapper.appendChild(c);\n });\n }\n\n return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n const doc = editor.getDocument();\n const resizeBorder = doc.createElement('div');\n resizeBorder.setAttribute(\n `style`,\n `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n );\n return resizeBorder;\n};\n\nconst cloneImage = (\n image: HTMLImageElement,\n editInfo: ImageMetadataFormat,\n resolveImageSource?: (src: string) => string \| undefined\n) => {\n const imageClone = image.cloneNode(true) as HTMLImageElement;\n imageClone.style.removeProperty('transform');\n if (editInfo.src) {\n imageClone.src = resolveImageSource?.(editInfo.src) ?? editInfo.src;\n imageClone.removeAttribute('id');\n imageClone.style.removeProperty('max-width');\n imageClone.style.removeProperty('max-height');\n imageClone.style.width = editInfo.widthPx + 'px';\n imageClone.style.height = editInfo.heightPx + 'px';\n }\n return imageClone;\n};\n"]}
1	+ {"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\nimport { wrap } from 'roosterjs-content-model-dom';\n\nimport type {\n IEditor,\n ImageEditOperation,\n ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\nconst IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';\n\n/*\n @internal\n /\nexport interface WrapperElements {\n wrapper: HTMLSpanElement;\n shadowSpan: HTMLElement;\n imageClone: HTMLImageElement;\n resizers: HTMLDivElement[];\n rotators: HTMLDivElement[];\n croppers: HTMLDivElement[];\n}\n\n/\n @internal\n */\nexport function createImageWrapper(\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n htmlOptions: ImageHtmlOptions,\n operation: ImageEditOperation[]\n): WrapperElements {\n const imageClone = cloneImage(image, editInfo, options.resolveImageSource);\n const doc = editor.getDocument();\n\n let rotators: HTMLDivElement[] = [];\n if (!options.disableRotate && operation.indexOf('rotate') > -1) {\n rotators = createImageRotator(doc, htmlOptions);\n }\n let resizers: HTMLDivElement[] = [];\n if (operation.indexOf('resize') > -1) {\n resizers = createImageResizer(doc, !!options.disableSideResize);\n }\n\n let croppers: HTMLDivElement[] = [];\n if (operation.indexOf('crop') > -1) {\n croppers = createImageCropper(doc);\n }\n\n const wrapper = createWrapper(\n editor,\n imageClone,\n options,\n editInfo,\n resizers,\n rotators,\n croppers\n );\n // Capture the image footprint before attaching the shadow root, since the light-DOM image\n // stops being rendered once the shadow root takes over.\n const imageWidth = image.offsetWidth;\n const imageHeight = image.offsetHeight;\n const imageSpan = wrap(doc, image, 'span');\n const shadowSpan = createShadowSpan(wrapper, imageSpan, imageWidth, imageHeight);\n return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (\n wrapper: HTMLElement,\n imageSpan: HTMLSpanElement,\n imageWidth: number,\n imageHeight: number\n) => {\n const shadowRoot = imageSpan.attachShadow({\n mode: 'open',\n });\n imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;\n\n // Pin the shadow host to the original image's box so that wrapping the image does not grow the\n // surrounding line box. Without this, the taller edit wrapper enlarges the line and the browser\n // scrolls the selection back into view, making the editor jump. The wrapper and handles still\n // overflow the host visually because overflow is left visible.\n if (imageWidth > 0 && imageHeight > 0) {\n imageSpan.style.display = 'inline-block';\n imageSpan.style.width = `${imageWidth}px`;\n imageSpan.style.height = `${imageHeight}px`;\n imageSpan.style.verticalAlign = 'bottom';\n imageSpan.style.overflow = 'visible';\n }\n\n shadowRoot.appendChild(wrapper);\n return imageSpan;\n};\n\nconst createWrapper = (\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n resizers?: HTMLDivElement[],\n rotators?: HTMLDivElement[],\n cropper?: HTMLDivElement[]\n) => {\n const doc = editor.getDocument();\n const wrapper = doc.createElement('span');\n const imageBox = doc.createElement('div');\n\n imageBox.setAttribute(\n `style`,\n `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n );\n imageBox.appendChild(image);\n wrapper.setAttribute(\n 'style',\n `font-size: 24px; margin: 0px; transform: rotate(${editInfo.angleRad ?? 0}rad);`\n );\n wrapper.style.display = editor.getEnvironment().isSafari\n ? '-webkit-inline-flex'\n : 'inline-flex';\n\n const border = createBorder(editor, options.borderColor);\n wrapper.appendChild(imageBox);\n wrapper.appendChild(border);\n wrapper.style.userSelect = 'none';\n\n if (resizers && resizers?.length > 0) {\n resizers.forEach(resizer => {\n wrapper.appendChild(resizer);\n });\n }\n if (rotators && rotators.length > 0) {\n rotators.forEach(r => {\n wrapper.appendChild(r);\n });\n }\n if (cropper && cropper.length > 0) {\n cropper.forEach(c => {\n wrapper.appendChild(c);\n });\n }\n\n return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n const doc = editor.getDocument();\n const resizeBorder = doc.createElement('div');\n resizeBorder.setAttribute(\n `style`,\n `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n );\n return resizeBorder;\n};\n\nconst cloneImage = (\n image: HTMLImageElement,\n editInfo: ImageMetadataFormat,\n resolveImageSource?: (src: string) => string \| undefined\n) => {\n const imageClone = image.cloneNode(true) as HTMLImageElement;\n imageClone.style.removeProperty('transform');\n if (editInfo.src) {\n imageClone.src = resolveImageSource?.(editInfo.src) ?? editInfo.src;\n imageClone.removeAttribute('id');\n imageClone.style.removeProperty('max-width');\n imageClone.style.removeProperty('max-height');\n imageClone.style.width = editInfo.widthPx + 'px';\n imageClone.style.height = editInfo.heightPx + 'px';\n }\n return imageClone;\n};\n"]}

package/lib-amd/imageEdit/utils/createImageWrapper.js CHANGED Viewed

@@ -22,16 +22,31 @@ define(["require", "exports", "../Cropper/createImageCropper", "../Resizer/creat
             croppers = (0, createImageCropper_1.createImageCropper)(doc);
         }
         var wrapper = createWrapper(editor, imageClone, options, editInfo, resizers, rotators, croppers);
+        // Capture the image footprint before attaching the shadow root, since the light-DOM image
+        // stops being rendered once the shadow root takes over.
+        var imageWidth = image.offsetWidth;
+        var imageHeight = image.offsetHeight;
         var imageSpan = (0, roosterjs_content_model_dom_1.wrap)(doc, image, 'span');
-        var shadowSpan = createShadowSpan(wrapper, imageSpan);
+        var shadowSpan = createShadowSpan(wrapper, imageSpan, imageWidth, imageHeight);
         return { wrapper: wrapper, shadowSpan: shadowSpan, imageClone: imageClone, resizers: resizers, rotators: rotators, croppers: croppers };
     }
     exports.createImageWrapper = createImageWrapper;
-    var createShadowSpan = function (wrapper, imageSpan) {
+    var createShadowSpan = function (wrapper, imageSpan, imageWidth, imageHeight) {
         var shadowRoot = imageSpan.attachShadow({
             mode: 'open',
         });
         imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;
+        // Pin the shadow host to the original image's box so that wrapping the image does not grow the
+        // surrounding line box. Without this, the taller edit wrapper enlarges the line and the browser
+        // scrolls the selection back into view, making the editor jump. The wrapper and handles still
+        // overflow the host visually because overflow is left visible.
+        if (imageWidth > 0 && imageHeight > 0) {
+            imageSpan.style.display = 'inline-block';
+            imageSpan.style.width = imageWidth + "px";
+            imageSpan.style.height = imageHeight + "px";
+            imageSpan.style.verticalAlign = 'bottom';
+            imageSpan.style.overflow = 'visible';
+        }
         shadowRoot.appendChild(wrapper);
         return imageSpan;
     };

package/lib-amd/imageEdit/utils/createImageWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\nimport { wrap } from 'roosterjs-content-model-dom';\n\nimport type {\n IEditor,\n ImageEditOperation,\n ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\nconst IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';\n\n/*\n @internal\n /\nexport interface WrapperElements {\n wrapper: HTMLSpanElement;\n shadowSpan: HTMLElement;\n imageClone: HTMLImageElement;\n resizers: HTMLDivElement[];\n rotators: HTMLDivElement[];\n croppers: HTMLDivElement[];\n}\n\n/\n @internal\n */\nexport function createImageWrapper(\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n htmlOptions: ImageHtmlOptions,\n operation: ImageEditOperation[]\n): WrapperElements {\n const imageClone = cloneImage(image, editInfo, options.resolveImageSource);\n const doc = editor.getDocument();\n\n let rotators: HTMLDivElement[] = [];\n if (!options.disableRotate && operation.indexOf('rotate') > -1) {\n rotators = createImageRotator(doc, htmlOptions);\n }\n let resizers: HTMLDivElement[] = [];\n if (operation.indexOf('resize') > -1) {\n resizers = createImageResizer(doc, !!options.disableSideResize);\n }\n\n let croppers: HTMLDivElement[] = [];\n if (operation.indexOf('crop') > -1) {\n croppers = createImageCropper(doc);\n }\n\n const wrapper = createWrapper(\n editor,\n imageClone,\n options,\n editInfo,\n resizers,\n rotators,\n croppers\n );\n const imageSpan = wrap(doc, image, 'span');\n const shadowSpan = createShadowSpan(wrapper, imageSpan);\n return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (wrapper: HTMLElement, imageSpan: HTMLSpanElement) => {\n const shadowRoot = imageSpan.attachShadow({\n mode: 'open',\n });\n imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;\n shadowRoot.appendChild(wrapper);\n return imageSpan;\n};\n\nconst createWrapper = (\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n resizers?: HTMLDivElement[],\n rotators?: HTMLDivElement[],\n cropper?: HTMLDivElement[]\n) => {\n const doc = editor.getDocument();\n const wrapper = doc.createElement('span');\n const imageBox = doc.createElement('div');\n\n imageBox.setAttribute(\n `style`,\n `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n );\n imageBox.appendChild(image);\n wrapper.setAttribute(\n 'style',\n `font-size: 24px; margin: 0px; transform: rotate(${editInfo.angleRad ?? 0}rad);`\n );\n wrapper.style.display = editor.getEnvironment().isSafari\n ? '-webkit-inline-flex'\n : 'inline-flex';\n\n const border = createBorder(editor, options.borderColor);\n wrapper.appendChild(imageBox);\n wrapper.appendChild(border);\n wrapper.style.userSelect = 'none';\n\n if (resizers && resizers?.length > 0) {\n resizers.forEach(resizer => {\n wrapper.appendChild(resizer);\n });\n }\n if (rotators && rotators.length > 0) {\n rotators.forEach(r => {\n wrapper.appendChild(r);\n });\n }\n if (cropper && cropper.length > 0) {\n cropper.forEach(c => {\n wrapper.appendChild(c);\n });\n }\n\n return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n const doc = editor.getDocument();\n const resizeBorder = doc.createElement('div');\n resizeBorder.setAttribute(\n `style`,\n `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n );\n return resizeBorder;\n};\n\nconst cloneImage = (\n image: HTMLImageElement,\n editInfo: ImageMetadataFormat,\n resolveImageSource?: (src: string) => string \| undefined\n) => {\n const imageClone = image.cloneNode(true) as HTMLImageElement;\n imageClone.style.removeProperty('transform');\n if (editInfo.src) {\n imageClone.src = resolveImageSource?.(editInfo.src) ?? editInfo.src;\n imageClone.removeAttribute('id');\n imageClone.style.removeProperty('max-width');\n imageClone.style.removeProperty('max-height');\n imageClone.style.width = editInfo.widthPx + 'px';\n imageClone.style.height = editInfo.heightPx + 'px';\n }\n return imageClone;\n};\n"]}
1	+ {"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\nimport { wrap } from 'roosterjs-content-model-dom';\n\nimport type {\n IEditor,\n ImageEditOperation,\n ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\nconst IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';\n\n/*\n @internal\n /\nexport interface WrapperElements {\n wrapper: HTMLSpanElement;\n shadowSpan: HTMLElement;\n imageClone: HTMLImageElement;\n resizers: HTMLDivElement[];\n rotators: HTMLDivElement[];\n croppers: HTMLDivElement[];\n}\n\n/\n @internal\n */\nexport function createImageWrapper(\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n htmlOptions: ImageHtmlOptions,\n operation: ImageEditOperation[]\n): WrapperElements {\n const imageClone = cloneImage(image, editInfo, options.resolveImageSource);\n const doc = editor.getDocument();\n\n let rotators: HTMLDivElement[] = [];\n if (!options.disableRotate && operation.indexOf('rotate') > -1) {\n rotators = createImageRotator(doc, htmlOptions);\n }\n let resizers: HTMLDivElement[] = [];\n if (operation.indexOf('resize') > -1) {\n resizers = createImageResizer(doc, !!options.disableSideResize);\n }\n\n let croppers: HTMLDivElement[] = [];\n if (operation.indexOf('crop') > -1) {\n croppers = createImageCropper(doc);\n }\n\n const wrapper = createWrapper(\n editor,\n imageClone,\n options,\n editInfo,\n resizers,\n rotators,\n croppers\n );\n // Capture the image footprint before attaching the shadow root, since the light-DOM image\n // stops being rendered once the shadow root takes over.\n const imageWidth = image.offsetWidth;\n const imageHeight = image.offsetHeight;\n const imageSpan = wrap(doc, image, 'span');\n const shadowSpan = createShadowSpan(wrapper, imageSpan, imageWidth, imageHeight);\n return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (\n wrapper: HTMLElement,\n imageSpan: HTMLSpanElement,\n imageWidth: number,\n imageHeight: number\n) => {\n const shadowRoot = imageSpan.attachShadow({\n mode: 'open',\n });\n imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;\n\n // Pin the shadow host to the original image's box so that wrapping the image does not grow the\n // surrounding line box. Without this, the taller edit wrapper enlarges the line and the browser\n // scrolls the selection back into view, making the editor jump. The wrapper and handles still\n // overflow the host visually because overflow is left visible.\n if (imageWidth > 0 && imageHeight > 0) {\n imageSpan.style.display = 'inline-block';\n imageSpan.style.width = `${imageWidth}px`;\n imageSpan.style.height = `${imageHeight}px`;\n imageSpan.style.verticalAlign = 'bottom';\n imageSpan.style.overflow = 'visible';\n }\n\n shadowRoot.appendChild(wrapper);\n return imageSpan;\n};\n\nconst createWrapper = (\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n resizers?: HTMLDivElement[],\n rotators?: HTMLDivElement[],\n cropper?: HTMLDivElement[]\n) => {\n const doc = editor.getDocument();\n const wrapper = doc.createElement('span');\n const imageBox = doc.createElement('div');\n\n imageBox.setAttribute(\n `style`,\n `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n );\n imageBox.appendChild(image);\n wrapper.setAttribute(\n 'style',\n `font-size: 24px; margin: 0px; transform: rotate(${editInfo.angleRad ?? 0}rad);`\n );\n wrapper.style.display = editor.getEnvironment().isSafari\n ? '-webkit-inline-flex'\n : 'inline-flex';\n\n const border = createBorder(editor, options.borderColor);\n wrapper.appendChild(imageBox);\n wrapper.appendChild(border);\n wrapper.style.userSelect = 'none';\n\n if (resizers && resizers?.length > 0) {\n resizers.forEach(resizer => {\n wrapper.appendChild(resizer);\n });\n }\n if (rotators && rotators.length > 0) {\n rotators.forEach(r => {\n wrapper.appendChild(r);\n });\n }\n if (cropper && cropper.length > 0) {\n cropper.forEach(c => {\n wrapper.appendChild(c);\n });\n }\n\n return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n const doc = editor.getDocument();\n const resizeBorder = doc.createElement('div');\n resizeBorder.setAttribute(\n `style`,\n `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n );\n return resizeBorder;\n};\n\nconst cloneImage = (\n image: HTMLImageElement,\n editInfo: ImageMetadataFormat,\n resolveImageSource?: (src: string) => string \| undefined\n) => {\n const imageClone = image.cloneNode(true) as HTMLImageElement;\n imageClone.style.removeProperty('transform');\n if (editInfo.src) {\n imageClone.src = resolveImageSource?.(editInfo.src) ?? editInfo.src;\n imageClone.removeAttribute('id');\n imageClone.style.removeProperty('max-width');\n imageClone.style.removeProperty('max-height');\n imageClone.style.width = editInfo.widthPx + 'px';\n imageClone.style.height = editInfo.heightPx + 'px';\n }\n return imageClone;\n};\n"]}

package/lib-mjs/imageEdit/utils/createImageWrapper.js CHANGED Viewed

@@ -22,15 +22,30 @@ export function createImageWrapper(editor, image, options, editInfo, htmlOptions
         croppers = createImageCropper(doc);
     }
     var wrapper = createWrapper(editor, imageClone, options, editInfo, resizers, rotators, croppers);
+    // Capture the image footprint before attaching the shadow root, since the light-DOM image
+    // stops being rendered once the shadow root takes over.
+    var imageWidth = image.offsetWidth;
+    var imageHeight = image.offsetHeight;
     var imageSpan = wrap(doc, image, 'span');
-    var shadowSpan = createShadowSpan(wrapper, imageSpan);
+    var shadowSpan = createShadowSpan(wrapper, imageSpan, imageWidth, imageHeight);
     return { wrapper: wrapper, shadowSpan: shadowSpan, imageClone: imageClone, resizers: resizers, rotators: rotators, croppers: croppers };
 }
-var createShadowSpan = function (wrapper, imageSpan) {
+var createShadowSpan = function (wrapper, imageSpan, imageWidth, imageHeight) {
     var shadowRoot = imageSpan.attachShadow({
         mode: 'open',
     });
     imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;
+    // Pin the shadow host to the original image's box so that wrapping the image does not grow the
+    // surrounding line box. Without this, the taller edit wrapper enlarges the line and the browser
+    // scrolls the selection back into view, making the editor jump. The wrapper and handles still
+    // overflow the host visually because overflow is left visible.
+    if (imageWidth > 0 && imageHeight > 0) {
+        imageSpan.style.display = 'inline-block';
+        imageSpan.style.width = imageWidth + "px";
+        imageSpan.style.height = imageHeight + "px";
+        imageSpan.style.verticalAlign = 'bottom';
+        imageSpan.style.overflow = 'visible';
+    }
     shadowRoot.appendChild(wrapper);
     return imageSpan;
 };

package/lib-mjs/imageEdit/utils/createImageWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\nimport { wrap } from 'roosterjs-content-model-dom';\n\nimport type {\n IEditor,\n ImageEditOperation,\n ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\nconst IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';\n\n/*\n @internal\n /\nexport interface WrapperElements {\n wrapper: HTMLSpanElement;\n shadowSpan: HTMLElement;\n imageClone: HTMLImageElement;\n resizers: HTMLDivElement[];\n rotators: HTMLDivElement[];\n croppers: HTMLDivElement[];\n}\n\n/\n @internal\n */\nexport function createImageWrapper(\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n htmlOptions: ImageHtmlOptions,\n operation: ImageEditOperation[]\n): WrapperElements {\n const imageClone = cloneImage(image, editInfo, options.resolveImageSource);\n const doc = editor.getDocument();\n\n let rotators: HTMLDivElement[] = [];\n if (!options.disableRotate && operation.indexOf('rotate') > -1) {\n rotators = createImageRotator(doc, htmlOptions);\n }\n let resizers: HTMLDivElement[] = [];\n if (operation.indexOf('resize') > -1) {\n resizers = createImageResizer(doc, !!options.disableSideResize);\n }\n\n let croppers: HTMLDivElement[] = [];\n if (operation.indexOf('crop') > -1) {\n croppers = createImageCropper(doc);\n }\n\n const wrapper = createWrapper(\n editor,\n imageClone,\n options,\n editInfo,\n resizers,\n rotators,\n croppers\n );\n const imageSpan = wrap(doc, image, 'span');\n const shadowSpan = createShadowSpan(wrapper, imageSpan);\n return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (wrapper: HTMLElement, imageSpan: HTMLSpanElement) => {\n const shadowRoot = imageSpan.attachShadow({\n mode: 'open',\n });\n imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;\n shadowRoot.appendChild(wrapper);\n return imageSpan;\n};\n\nconst createWrapper = (\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n resizers?: HTMLDivElement[],\n rotators?: HTMLDivElement[],\n cropper?: HTMLDivElement[]\n) => {\n const doc = editor.getDocument();\n const wrapper = doc.createElement('span');\n const imageBox = doc.createElement('div');\n\n imageBox.setAttribute(\n `style`,\n `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n );\n imageBox.appendChild(image);\n wrapper.setAttribute(\n 'style',\n `font-size: 24px; margin: 0px; transform: rotate(${editInfo.angleRad ?? 0}rad);`\n );\n wrapper.style.display = editor.getEnvironment().isSafari\n ? '-webkit-inline-flex'\n : 'inline-flex';\n\n const border = createBorder(editor, options.borderColor);\n wrapper.appendChild(imageBox);\n wrapper.appendChild(border);\n wrapper.style.userSelect = 'none';\n\n if (resizers && resizers?.length > 0) {\n resizers.forEach(resizer => {\n wrapper.appendChild(resizer);\n });\n }\n if (rotators && rotators.length > 0) {\n rotators.forEach(r => {\n wrapper.appendChild(r);\n });\n }\n if (cropper && cropper.length > 0) {\n cropper.forEach(c => {\n wrapper.appendChild(c);\n });\n }\n\n return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n const doc = editor.getDocument();\n const resizeBorder = doc.createElement('div');\n resizeBorder.setAttribute(\n `style`,\n `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n );\n return resizeBorder;\n};\n\nconst cloneImage = (\n image: HTMLImageElement,\n editInfo: ImageMetadataFormat,\n resolveImageSource?: (src: string) => string \| undefined\n) => {\n const imageClone = image.cloneNode(true) as HTMLImageElement;\n imageClone.style.removeProperty('transform');\n if (editInfo.src) {\n imageClone.src = resolveImageSource?.(editInfo.src) ?? editInfo.src;\n imageClone.removeAttribute('id');\n imageClone.style.removeProperty('max-width');\n imageClone.style.removeProperty('max-height');\n imageClone.style.width = editInfo.widthPx + 'px';\n imageClone.style.height = editInfo.heightPx + 'px';\n }\n return imageClone;\n};\n"]}
1	+ {"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\nimport { wrap } from 'roosterjs-content-model-dom';\n\nimport type {\n IEditor,\n ImageEditOperation,\n ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\nconst IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';\n\n/*\n @internal\n /\nexport interface WrapperElements {\n wrapper: HTMLSpanElement;\n shadowSpan: HTMLElement;\n imageClone: HTMLImageElement;\n resizers: HTMLDivElement[];\n rotators: HTMLDivElement[];\n croppers: HTMLDivElement[];\n}\n\n/\n @internal\n */\nexport function createImageWrapper(\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n htmlOptions: ImageHtmlOptions,\n operation: ImageEditOperation[]\n): WrapperElements {\n const imageClone = cloneImage(image, editInfo, options.resolveImageSource);\n const doc = editor.getDocument();\n\n let rotators: HTMLDivElement[] = [];\n if (!options.disableRotate && operation.indexOf('rotate') > -1) {\n rotators = createImageRotator(doc, htmlOptions);\n }\n let resizers: HTMLDivElement[] = [];\n if (operation.indexOf('resize') > -1) {\n resizers = createImageResizer(doc, !!options.disableSideResize);\n }\n\n let croppers: HTMLDivElement[] = [];\n if (operation.indexOf('crop') > -1) {\n croppers = createImageCropper(doc);\n }\n\n const wrapper = createWrapper(\n editor,\n imageClone,\n options,\n editInfo,\n resizers,\n rotators,\n croppers\n );\n // Capture the image footprint before attaching the shadow root, since the light-DOM image\n // stops being rendered once the shadow root takes over.\n const imageWidth = image.offsetWidth;\n const imageHeight = image.offsetHeight;\n const imageSpan = wrap(doc, image, 'span');\n const shadowSpan = createShadowSpan(wrapper, imageSpan, imageWidth, imageHeight);\n return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (\n wrapper: HTMLElement,\n imageSpan: HTMLSpanElement,\n imageWidth: number,\n imageHeight: number\n) => {\n const shadowRoot = imageSpan.attachShadow({\n mode: 'open',\n });\n imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;\n\n // Pin the shadow host to the original image's box so that wrapping the image does not grow the\n // surrounding line box. Without this, the taller edit wrapper enlarges the line and the browser\n // scrolls the selection back into view, making the editor jump. The wrapper and handles still\n // overflow the host visually because overflow is left visible.\n if (imageWidth > 0 && imageHeight > 0) {\n imageSpan.style.display = 'inline-block';\n imageSpan.style.width = `${imageWidth}px`;\n imageSpan.style.height = `${imageHeight}px`;\n imageSpan.style.verticalAlign = 'bottom';\n imageSpan.style.overflow = 'visible';\n }\n\n shadowRoot.appendChild(wrapper);\n return imageSpan;\n};\n\nconst createWrapper = (\n editor: IEditor,\n image: HTMLImageElement,\n options: ImageEditOptions,\n editInfo: ImageMetadataFormat,\n resizers?: HTMLDivElement[],\n rotators?: HTMLDivElement[],\n cropper?: HTMLDivElement[]\n) => {\n const doc = editor.getDocument();\n const wrapper = doc.createElement('span');\n const imageBox = doc.createElement('div');\n\n imageBox.setAttribute(\n `style`,\n `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n );\n imageBox.appendChild(image);\n wrapper.setAttribute(\n 'style',\n `font-size: 24px; margin: 0px; transform: rotate(${editInfo.angleRad ?? 0}rad);`\n );\n wrapper.style.display = editor.getEnvironment().isSafari\n ? '-webkit-inline-flex'\n : 'inline-flex';\n\n const border = createBorder(editor, options.borderColor);\n wrapper.appendChild(imageBox);\n wrapper.appendChild(border);\n wrapper.style.userSelect = 'none';\n\n if (resizers && resizers?.length > 0) {\n resizers.forEach(resizer => {\n wrapper.appendChild(resizer);\n });\n }\n if (rotators && rotators.length > 0) {\n rotators.forEach(r => {\n wrapper.appendChild(r);\n });\n }\n if (cropper && cropper.length > 0) {\n cropper.forEach(c => {\n wrapper.appendChild(c);\n });\n }\n\n return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n const doc = editor.getDocument();\n const resizeBorder = doc.createElement('div');\n resizeBorder.setAttribute(\n `style`,\n `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n );\n return resizeBorder;\n};\n\nconst cloneImage = (\n image: HTMLImageElement,\n editInfo: ImageMetadataFormat,\n resolveImageSource?: (src: string) => string \| undefined\n) => {\n const imageClone = image.cloneNode(true) as HTMLImageElement;\n imageClone.style.removeProperty('transform');\n if (editInfo.src) {\n imageClone.src = resolveImageSource?.(editInfo.src) ?? editInfo.src;\n imageClone.removeAttribute('id');\n imageClone.style.removeProperty('max-width');\n imageClone.style.removeProperty('max-height');\n imageClone.style.width = editInfo.widthPx + 'px';\n imageClone.style.height = editInfo.heightPx + 'px';\n }\n return imageClone;\n};\n"]}

package/package.json CHANGED Viewed

@@ -3,12 +3,12 @@
     "description": "Plugins for roosterjs",
     "dependencies": {
         "tslib": "^2.3.1",
-        "roosterjs-content-model-core": "^9.54.0",
-        "roosterjs-content-model-dom": "^9.54.0",
-        "roosterjs-content-model-types": "^9.54.0",
-        "roosterjs-content-model-api": "^9.54.0"
+        "roosterjs-content-model-core": "^9.56.0",
+        "roosterjs-content-model-dom": "^9.56.0",
+        "roosterjs-content-model-types": "^9.56.0",
+        "roosterjs-content-model-api": "^9.56.0"
     },
-    "version": "9.54.0",
+    "version": "9.56.0",
     "main": "./lib/index.js",
     "typings": "./lib/index.d.ts",
     "module": "./lib-mjs/index.js",