Merge pull request #2818 from microsoft/u/juliaroldi/remove-selection

Fix image selection in range expanded selection
microsoft · Oct 7, 2024 · c0b5f41 · c0b5f41
2 parents 3415d5a + ab3ccc8
commit c0b5f41
Show file tree

Hide file tree

Showing 2 changed files with 1,362 additions and 46 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
@@ -14,10 +14,10 @@ import { Resizer } from './Resizer/resizerContext';
 import { Rotator } from './Rotator/rotatorContext';
 import { updateRotateHandle } from './Rotator/updateRotateHandle';
 import { updateWrapper } from './utils/updateWrapper';
-
 import {
     ChangeSource,
     getSafeIdSelector,
+    getSelectedParagraphs,
     isElementOfType,
     isNodeOfType,
     mutateBlock,
@@ -254,21 +254,26 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         }
     }
 
-    private applyFormatWithContentModel(
+    /**
+     * EXPOSED FOR TESTING PURPOSE ONLY
+     */
+    protected applyFormatWithContentModel(
         editor: IEditor,
         isCropMode: boolean,
         shouldSelectImage: boolean,
         isApiOperation?: boolean
     ) {
         let editingImageModel: ContentModelImage | undefined;
         const selection = editor.getDOMSelection();
+
         editor.formatContentModel(
             model => {
                 const editingImage = getSelectedImage(model);
                 const previousSelectedImage = isApiOperation
                     ? editingImage
                     : findEditingImage(model);
                 let result = false;
+
                 if (
                     shouldSelectImage ||
                     previousSelectedImage?.image != editingImage?.image ||
@@ -301,6 +306,16 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                 image.isSelected = shouldSelectImage;
                                 image.isSelectedAsImageSelection = shouldSelectImage;
                                 delete image.dataset.isEditing;
+
+                                if (selection?.type == 'range' && !selection.range.collapsed) {
+                                    const selectedParagraphs = getSelectedParagraphs(model, true);
+                                    const isImageInRange = selectedParagraphs.some(paragraph =>
+                                        paragraph.segments.includes(image)
+                                    );
+                                    if (isImageInRange) {
+                                        image.isSelected = true;
+                                    }
+                                }
                             }
                         );
 
@@ -314,6 +329,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
 
                     this.isEditing = false;
                     this.isCropMode = false;
+
                     if (
                         editingImage &&
                         selection?.type == 'image' &&