Merge pull request #2895 from microsoft/u/julairoldi/investigate-image

Do not remove image shadow root
microsoft · Dec 2, 2024 · c831ce5 · c831ce5
1 parent 78c9b01
commit c831ce5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts
@@ -11,6 +11,8 @@ import type {
 import type { ImageEditOptions } from '../types/ImageEditOptions';
 import type { ImageHtmlOptions } from '../types/ImageHtmlOptions';
 
+const IMAGE_EDIT_SHADOW_ROOT = 'ImageEditShadowRoot';
+
 /**
  * @internal
  */
@@ -69,6 +71,7 @@ const createShadowSpan = (wrapper: HTMLElement, imageSpan: HTMLSpanElement) => {
     const shadowRoot = imageSpan.attachShadow({
         mode: 'open',
     });
+    imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;
     wrapper.style.verticalAlign = 'bottom';
     shadowRoot.appendChild(wrapper);
     return imageSpan;

diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/utils/createImageWrapperTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/utils/createImageWrapperTest.ts
@@ -14,22 +14,13 @@ describe('createImageWrapper', () => {
     const editor = initEditor('editor_test');
     function runTest(
         image: HTMLImageElement,
-        imageSpan: HTMLSpanElement,
         options: ImageEditOptions,
         editInfo: ImageMetadataFormat,
         htmlOptions: ImageHtmlOptions,
         operation: ImageEditOperation[],
         expectResult: WrapperElements
     ) {
-        const result = createImageWrapper(
-            editor,
-            image,
-
-            options,
-            editInfo,
-            htmlOptions,
-            operation
-        );
+        const result = createImageWrapper(editor, image, options, editInfo, htmlOptions, operation);
         expect(JSON.stringify(result)).toEqual(JSON.stringify(expectResult));
     }
 
@@ -69,7 +60,7 @@ describe('createImageWrapper', () => {
         const shadowSpan = createShadowSpan(wrapper);
         const imageClone = cloneImage(image, editInfo);
 
-        runTest(image, imageSpan, options, editInfo, htmlOptions, ['resize'], {
+        runTest(image, options, editInfo, htmlOptions, ['resize'], {
             wrapper,
             shadowSpan,
             imageClone,
@@ -116,7 +107,7 @@ describe('createImageWrapper', () => {
         const shadowSpan = createShadowSpan(wrapper);
         const imageClone = cloneImage(image, editInfo);
 
-        runTest(image, imageSpan, options, editInfo, htmlOptions, ['rotate'], {
+        runTest(image, options, editInfo, htmlOptions, ['rotate'], {
             wrapper: wrapper,
             shadowSpan: shadowSpan,
             imageClone: imageClone,
@@ -171,7 +162,7 @@ describe('createImageWrapper', () => {
         const shadowSpan = createShadowSpan(wrapper);
         const imageClone = cloneImage(image, editInfo);
 
-        runTest(image, imageSpan, options, editInfo, htmlOptions, ['crop'], {
+        runTest(image, options, editInfo, htmlOptions, ['crop'], {
             wrapper,
             shadowSpan,
             imageClone,
@@ -202,6 +193,7 @@ const createShadowSpan = (wrapper: HTMLSpanElement) => {
     const shadowRoot = span.attachShadow({
         mode: 'open',
     });
+    span.id = 'IMAGE_EDIT_SHADOW_ROOT';
     wrapper.style.verticalAlign = 'bottom';
     shadowRoot.append(wrapper);
     return span;