Stop editing when content changed

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

@@ -29,6 +29,7 @@ import type { DragAndDropContext } from './types/DragAndDropContext';
 import type { ImageHtmlOptions } from './types/ImageHtmlOptions';
 import type { ImageEditOptions } from './types/ImageEditOptions';
 import type {
+    ContentChangedEvent,
     ContentModelImage,
     EditorPlugin,
     IEditor,
@@ -55,6 +56,7 @@ const MouseRightButton = 2;
 const DRAG_ID = '_dragging';
 const IMAGE_EDIT_CLASS = 'imageEdit';
 const IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
+const IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
 
 /**
  * ImageEdit plugin handles the following image editing features:
@@ -170,9 +172,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                 this.keyDownHandler(this.editor, event);
                 break;
             case 'contentChanged':
-                if (event.source == ChangeSource.Drop) {
-                    this.onDropHandler(this.editor);
-                }
+                this.contentChangedHandler(this.editor, event);
                 break;
             case 'extractContentWithDom':
                 this.removeImageEditing(event.clonedRoot);
@@ -279,6 +279,35 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         }
     }
 
+    private setContentHandler(editor: IEditor) {
+        const selection = editor.getDOMSelection();
+        if (selection?.type == 'image' && selection.image.dataset.isEditing && !this.isEditing) {
+            delete selection.image.dataset.isEditing;
+        }
+    }
+
+    private formatEventHandler(event: ContentChangedEvent) {
+        if (this.isEditing && event.formatApiName !== IMAGE_EDIT_FORMAT_EVENT) {
+            this.cleanInfo();
+            this.isEditing = false;
+            this.isCropMode = false;
+        }
+    }
+
+    private contentChangedHandler(editor: IEditor, event: ContentChangedEvent) {
+        switch (event.source) {
+            case ChangeSource.SetContent:
+                this.setContentHandler(editor);
+                break;
+            case ChangeSource.Format:
+                this.formatEventHandler(event);
+                break;
+            case ChangeSource.Drop:
+                this.onDropHandler(editor);
+                break;
+        }
+    }
+
     /**
      * EXPOSED FOR TESTING PURPOSE ONLY
      */
@@ -392,6 +421,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                         }
                     }
                 },
+                apiName: IMAGE_EDIT_FORMAT_EVENT,
             },
             {
                 tryGetFromCache: true,

packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts

@@ -10,9 +10,11 @@ import {
     ContentModelDocument,
     ContentModelFormatter,
     DOMEventRecord,
+    DOMSelection,
     EditorEnvironment,
     FormatContentModelOptions,
     IEditor,
+    ImageSelection,
 } from 'roosterjs-content-model-types';
 
 describe('ImageEditPlugin', () => {
@@ -670,6 +672,55 @@ describe('ImageEditPlugin', () => {
         expect(event.clonedRoot).toEqual(expectedClonedRoot);
         plugin.dispose();
     });
+
+    it('contentChanged - should remove isEditing', () => {
+        const plugin = new ImageEditPlugin();
+        const editor = initEditor('image_edit', [plugin], model);
+        plugin.initialize(editor);
+        const image = document.createElement('img');
+        image.dataset['isEditing'] = 'true';
+        const selection = {
+            type: 'image',
+            image,
+        } as DOMSelection;
+        spyOn(editor, 'getDOMSelection').and.returnValue(selection);
+        const event = {
+            eventType: 'contentChanged',
+            source: ChangeSource.SetContent,
+        } as any;
+        plugin.onPluginEvent(event);
+        const newSelection = editor.getDOMSelection() as ImageSelection;
+        expect(newSelection!.type).toBe('image');
+        expect(newSelection!.image.dataset.isEditing).toBeUndefined();
+        plugin.dispose();
+    });
+
+    it('contentChanged - should remove  editor caret style', () => {
+        const plugin = new TestPlugin();
+        plugin.initialize(editor);
+        plugin.setIsEditing(true);
+        const event = {
+            eventType: 'contentChanged',
+            source: ChangeSource.Format,
+        } as any;
+        plugin.onPluginEvent(event);
+        expect(editor.setEditorStyle).toHaveBeenCalledWith('imageEditCaretColor', null);
+        plugin.dispose();
+    });
+
+    it('contentChanged - should not remove  editor caret style', () => {
+        const plugin = new TestPlugin();
+        plugin.initialize(editor);
+        plugin.setIsEditing(true);
+        const event = {
+            eventType: 'contentChanged',
+            source: ChangeSource.Format,
+            formatApiName: 'ImageEditEvent',
+        } as any;
+        plugin.onPluginEvent(event);
+        expect(editor.setEditorStyle).not.toHaveBeenCalled();
+        plugin.dispose();
+    });
 });
 
 class TestPlugin extends ImageEditPlugin {