diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts index 2c14e9898dd..d4c723df34a 100644 --- a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts +++ b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts @@ -55,6 +55,7 @@ const MouseRightButton = 2; const DRAG_ID = '_dragging'; const IMAGE_EDIT_CLASS = 'imageEdit'; const IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor'; +const IMAGE_EDIT_DATASET = 'data-is-editing="true"'; /** * ImageEdit plugin handles the following image editing features: @@ -177,6 +178,9 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin { case 'extractContentWithDom': this.removeImageEditing(event.clonedRoot); break; + case 'beforeSetContent': + this.beforeSetContentHandler(this.editor, event.newContent); + break; } } @@ -279,6 +283,11 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin { } } + private beforeSetContentHandler(editor: IEditor, newContent: string) { + newContent.replace(IMAGE_EDIT_DATASET, ''); + editor?.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null); + } + /** * EXPOSED FOR TESTING PURPOSE ONLY */ diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts index 1bc97e1075c..22e47507008 100644 --- a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts +++ b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts @@ -670,6 +670,45 @@ describe('ImageEditPlugin', () => { expect(event.clonedRoot).toEqual(expectedClonedRoot); plugin.dispose(); }); + + it('beforeSetContent - should remove isEditing', () => { + const plugin = new ImageEditPlugin(); + plugin.initialize(editor); + const clonedRoot = document.createElement('div'); + const image = document.createElement('img'); + clonedRoot.appendChild(image); + image.dataset['editingInfo'] = JSON.stringify({ + src: 'test', + }); + image.dataset['isEditing'] = 'true'; + const event = { + eventType: 'beforeSetContent', + newContent: JSON.stringify(clonedRoot), + } as any; + plugin.onPluginEvent(event); + const isEditing = event.newContent.includes('data-is-editing="true"'); + expect(isEditing).toBeFalse(); + plugin.dispose(); + }); + + it('beforeSetContent - should editor caret style', () => { + const plugin = new ImageEditPlugin(); + plugin.initialize(editor); + const clonedRoot = document.createElement('div'); + const image = document.createElement('img'); + clonedRoot.appendChild(image); + image.dataset['editingInfo'] = JSON.stringify({ + src: 'test', + }); + image.dataset['isEditing'] = 'true'; + const event = { + eventType: 'beforeSetContent', + newContent: JSON.stringify(clonedRoot), + } as any; + plugin.onPluginEvent(event); + expect(editor.setEditorStyle).toHaveBeenCalledWith('imageEditCaretColor', null); + plugin.dispose(); + }); }); class TestPlugin extends ImageEditPlugin {