Fix: keep image selection when selectionchange range is collapsed (#3396)

Co-authored-by: Liang Meng <liangmeng@microsoft.com>
Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

Author: 3 people

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

@@ -738,11 +738,11 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
             const newSelection = this.editor.getDOMSelection();
             const domHelper = this.editor.getDOMHelper();
 
-            //If am image selection changed to a wider range due a keyboard event, we should update the selection
+            // If an image selection changed to a wider range due to a keyboard event, we should update the selection
             const range = domHelper.getSelectionRange();
             if (range) {
                 const image = isSingleImageInSelection(range);
-                if (newSelection?.type == 'image' && !image) {
+                if (newSelection?.type == 'image' && !image && !range.collapsed) {
                     const sel = this.editor.getDocument().defaultView?.getSelection();
                     const isReverted = sel
                         ? sel.focusNode != range.endContainer || sel.focusOffset != range.endOffset

packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts

@@ -3698,6 +3698,38 @@ describe('SelectionPlugin selectionChange on image selected', () => {
         });
         expect(getDOMSelectionSpy).toHaveBeenCalledTimes(1);
     });
+
+    it('onSelectionChange on image | 5, keeps image selection when range is collapsed', () => {
+        spyOn(isSingleImageInSelection, 'isSingleImageInSelection').and.returnValue(null);
+
+        mockedRange = { startContainer: {}, collapsed: true } as any;
+
+        const plugin = createSelectionPlugin({});
+        const state = plugin.getState();
+        const mockedOldSelection = {
+            type: 'image',
+            image: {} as any,
+        } as DOMSelection;
+
+        state.selection = mockedOldSelection;
+
+        plugin.initialize(editor);
+
+        const onSelectionChange = addEventListenerSpy.calls.argsFor(0)[1] as Function;
+        const mockedNewSelection = {
+            type: 'image',
+            image: {} as any,
+        } as any;
+
+        hasFocusSpy.and.returnValue(true);
+        isInShadowEditSpy.and.returnValue(false);
+        getDOMSelectionSpy.and.returnValue(mockedNewSelection);
+
+        onSelectionChange();
+
+        expect(setDOMSelectionSpy).not.toHaveBeenCalled();
+        expect(getDOMSelectionSpy).toHaveBeenCalledTimes(1);
+    });
 });
 
 describe('SelectionPlugin handle logical root change', () => {