[Image Edit] Skip DOM selection during image edit to prevent editor jump

Add a skipDOMSelection option to FormatContentModelOptions and honor it in
formatContentModel so callers can avoid resetting the DOM selection after
writing the DOM tree. ImageEditPlugin passes skipDOMSelection: true when
entering edit mode, replacing the previous approach of pinning the shadow
host width/height to the original image footprint.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 02ace9a1-26cc-4655-9ecc-a56c32a2bbf0

Author: juliaroldi

packages/roosterjs-content-model-core/lib/coreApi/formatContentModel/formatContentModel.ts

@@ -25,8 +25,13 @@ export const formatContentModel: FormatContentModel = (
     options,
     domToModelOptions
 ) => {
-    const { onNodeCreated, rawEvent, selectionOverride, scrollCaretIntoView: scroll } =
-        options || {};
+    const {
+        onNodeCreated,
+        rawEvent,
+        selectionOverride,
+        scrollCaretIntoView: scroll,
+        skipDOMSelection,
+    } = options || {};
     const model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     const context: FormatContentModelContext = {
         newEntities: [],
@@ -62,7 +67,7 @@ export const formatContentModel: FormatContentModel = (
                 core.api.setContentModel(
                     core,
                     model,
-                    hasFocus ? undefined : { ignoreSelection: true }, // If editor did not have focus before format, do not set focus after format
+                    hasFocus && !skipDOMSelection ? undefined : { ignoreSelection: true }, // If editor did not have focus before format, do not set focus after format
                     onNodeCreated
                 ) ?? undefined;
 

packages/roosterjs-content-model-core/test/coreApi/formatContentModel/formatContentModelTest.ts

@@ -793,6 +793,49 @@ describe('formatContentModel', () => {
         });
     });
 
+    describe('skipDOMSelection', () => {
+        it('skipDOMSelection is true, do not set DOM selection even when editor has focus', () => {
+            hasFocus.and.returnValue(true);
+
+            formatContentModel(
+                core,
+                (model, context) => {
+                    return true;
+                },
+                {
+                    apiName,
+                    skipDOMSelection: true,
+                }
+            );
+
+            expect(setContentModel).toHaveBeenCalledWith(
+                core,
+                mockedModel,
+                {
+                    ignoreSelection: true,
+                },
+                undefined
+            );
+        });
+
+        it('skipDOMSelection is false, set DOM selection when editor has focus', () => {
+            hasFocus.and.returnValue(true);
+
+            formatContentModel(
+                core,
+                (model, context) => {
+                    return true;
+                },
+                {
+                    apiName,
+                    skipDOMSelection: false,
+                }
+            );
+
+            expect(setContentModel).toHaveBeenCalledWith(core, mockedModel, undefined, undefined);
+        });
+    });
+
     describe('Pending format', () => {
         const mockedStartContainer1 = 'CONTAINER1' as any;
         const mockedStartOffset1 = 'OFFSET1' as any;

packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts

@@ -452,6 +452,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                     }
                 },
                 apiName: IMAGE_EDIT_FORMAT_EVENT,
+                skipDOMSelection: true,
             },
             {
                 tryGetFromCache: true,

packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts

@@ -82,14 +82,8 @@ const createShadowSpan = (
     });
     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';
     }

packages/roosterjs-content-model-plugins/test/imageEdit/utils/createImageWrapperTest.ts

@@ -175,74 +175,6 @@ describe('createImageWrapper', () => {
         });
         imageSpan.remove();
     });
-
-    function createImageWithSize(width: number, height: number) {
-        const image = document.createElement('img');
-        const imageSpan = document.createElement('span');
-        imageSpan.append(image);
-        document.body.appendChild(imageSpan);
-        Object.defineProperty(image, 'offsetWidth', { value: width, configurable: true });
-        Object.defineProperty(image, 'offsetHeight', { value: height, configurable: true });
-        return { image, imageSpan };
-    }
-
-    const options: ImageEditOptions = {
-        borderColor: '#DB626C',
-        minWidth: 10,
-        minHeight: 10,
-        preserveRatio: true,
-        disableRotate: false,
-        disableSideResize: false,
-        onSelectState: ['resize'],
-    };
-    const editInfo = {
-        src: 'test',
-        widthPx: 20,
-        heightPx: 20,
-        naturalWidth: 10,
-        naturalHeight: 10,
-        leftPercent: 0,
-        rightPercent: 0,
-        topPercent: 0.1,
-        bottomPercent: 0,
-        angleRad: 0,
-    };
-    const htmlOptions = {
-        borderColor: '#DB626C',
-        rotateHandleBackColor: 'white',
-        isSmallImage: false,
-        disableSideResize: false,
-    };
-
-    it('pins the shadow host to the original image footprint', () => {
-        const { image, imageSpan } = createImageWithSize(120, 80);
-
-        const result = createImageWrapper(editor, image, options, editInfo, htmlOptions, [
-            'resize',
-        ]);
-
-        expect(result.shadowSpan.style.display).toBe('inline-block');
-        expect(result.shadowSpan.style.width).toBe('120px');
-        expect(result.shadowSpan.style.height).toBe('80px');
-        expect(result.shadowSpan.style.verticalAlign).toBe('bottom');
-        expect(result.shadowSpan.style.overflow).toBe('visible');
-        imageSpan.remove();
-    });
-
-    it('does not pin the shadow host when the image has no footprint', () => {
-        const { image, imageSpan } = createImageWithSize(0, 0);
-
-        const result = createImageWrapper(editor, image, options, editInfo, htmlOptions, [
-            'resize',
-        ]);
-
-        expect(result.shadowSpan.style.display).toBe('');
-        expect(result.shadowSpan.style.width).toBe('');
-        expect(result.shadowSpan.style.height).toBe('');
-        expect(result.shadowSpan.style.verticalAlign).toBe('');
-        expect(result.shadowSpan.style.overflow).toBe('');
-        imageSpan.remove();
-    });
 });
 
 const cloneImage = (image: HTMLImageElement, editInfo: ImageMetadataFormat) => {

packages/roosterjs-content-model-types/lib/parameter/FormatContentModelOptions.ts

@@ -43,6 +43,11 @@ export interface FormatContentModelOptions {
      * When pass to true, scroll the editing caret into view after write DOM tree if need
      */
     scrollCaretIntoView?: boolean;
+
+    /**
+     * When pass to true, skip setting DOM selection after write DOM tree. @default false
+     */
+    skipDOMSelection?: boolean;
 }
 
 /**