remove data-istrue

microsoft · Jan 28, 2025 · 4578669 · 4578669
1 parent 54c7dbe
commit 4578669
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git 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
@@ -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 {