Merge pull request #2815 from microsoft/u/juliaroldi/image-text-ip

[Image Edit] When the image is in edit mode, hide the text caret
microsoft · Sep 27, 2024 · da47dfe · da47dfe
1 parent da9c80f
commit da47dfe
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
@@ -53,6 +53,8 @@ const DefaultOptions: Partial<ImageEditOptions> = {
 
 const MouseRightButton = 2;
 const DRAG_ID = '_dragging';
+const IMAGE_EDIT_CLASS = 'imageEdit';
+const IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
 
 /**
  * ImageEdit plugin handles the following image editing features:
@@ -384,9 +386,11 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         this.croppers = croppers;
         this.zoomScale = editor.getDOMHelper().calculateZoomScale();
 
-        editor.setEditorStyle('imageEdit', `outline-style:none!important;`, [
+        editor.setEditorStyle(IMAGE_EDIT_CLASS, `outline-style:none!important;`, [
             `span:has(>img${getSafeIdSelector(this.selectedImage.id)})`,
         ]);
+
+        editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, `caret-color: transparent;`);
     }
 
     public startRotateAndResize(editor: IEditor, image: HTMLImageElement) {
@@ -607,7 +611,8 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     }
 
     private cleanInfo() {
-        this.editor?.setEditorStyle('imageEdit', null);
+        this.editor?.setEditorStyle(IMAGE_EDIT_CLASS, null);
+        this.editor?.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null);
         this.selectedImage = null;
         this.shadowSpan = null;
         this.wrapper = null;

diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts
@@ -430,4 +430,61 @@ describe('ImageEditPlugin', () => {
         expect(formatContentModelSpy).toHaveBeenCalledTimes(3);
         plugin.dispose();
     });
+
+    it('flip setEditorStyle', () => {
+        const model: ContentModelDocument = {
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    blockType: 'Paragraph',
+                    segments: [
+                        {
+                            segmentType: 'Image',
+                            src: 'test',
+                            format: {
+                                fontFamily: 'Calibri',
+                                fontSize: '11pt',
+                                textColor: 'rgb(0, 0, 0)',
+                                id: 'image_0',
+                                maxWidth: '1800px',
+                            },
+                            dataset: {},
+                            isSelectedAsImageSelection: true,
+                            isSelected: true,
+                        },
+                    ],
+                    format: {},
+                    segmentFormat: {
+                        fontFamily: 'Calibri',
+                        fontSize: '11pt',
+                        textColor: 'rgb(0, 0, 0)',
+                    },
+                },
+            ],
+            format: {
+                fontFamily: 'Calibri',
+                fontSize: '11pt',
+                textColor: '#000000',
+            },
+        };
+        const plugin = new ImageEditPlugin();
+        const editor = initEditor('image_edit', [plugin], model);
+        spyOn(editor, 'setEditorStyle').and.callThrough();
+
+        plugin.initialize(editor);
+        plugin.flipImage('horizontal');
+        plugin.dispose();
+
+        expect(editor.setEditorStyle).toHaveBeenCalledWith(
+            'imageEdit',
+            'outline-style:none!important;',
+            ['span:has(>img#image_0)']
+        );
+        expect(editor.setEditorStyle).toHaveBeenCalledWith(
+            'imageEditCaretColor',
+            'caret-color: transparent;'
+        );
+        expect(editor.setEditorStyle).toHaveBeenCalledWith('imageEdit', null);
+        expect(editor.setEditorStyle).toHaveBeenCalledWith('imageEditCaretColor', null);
+    });
 });