Add beforeLogicalRootChanged event handling and related tests

packages/roosterjs-content-model-core/lib/coreApi/setLogicalRoot/setLogicalRoot.ts

@@ -1,4 +1,8 @@
-import type { LogicalRootChangedEvent, SetLogicalRoot } from 'roosterjs-content-model-types';
+import type {
+    BeforeLogicalRootChangeEvent,
+    LogicalRootChangedEvent,
+    SetLogicalRoot,
+} from 'roosterjs-content-model-types';
 
 /**
  * @internal
@@ -16,6 +20,13 @@ export const setLogicalRoot: SetLogicalRoot = (core, logicalRoot) => {
 
         // if the logical root changed
         if (logicalRoot !== core.logicalRoot) {
+            // tell plugins that the logical root is about to change, so they can clean up listeners or caches
+            const beforeLogicalRootEvent: BeforeLogicalRootChangeEvent = {
+                eventType: 'beforeLogicalRootChange',
+                logicalRoot: core.logicalRoot,
+            };
+            core.api.triggerEvent(core, beforeLogicalRootEvent, false /*broadcast*/);
+
             // make sure the old logical root is not content editable and the new one is
             core.logicalRoot.contentEditable = 'false';
             logicalRoot.contentEditable = 'true';

packages/roosterjs-content-model-core/test/coreApi/setLogicalRoot/setLogicalRootTest.ts

@@ -10,8 +10,11 @@ describe('setLogicalRoot', () => {
 
     beforeEach(() => {
         physicalRoot = document.createElement('div');
+        physicalRoot.id = 'physicalRoot';
         insideElement1 = document.createElement('div');
+        insideElement1.id = 'insideElement1';
         insideElement2 = document.createElement('div');
+        insideElement2.id = 'insideElement2';
         physicalRoot.appendChild(insideElement1);
         physicalRoot.appendChild(insideElement2);
         physicalRoot.contentEditable = 'true';
@@ -62,6 +65,14 @@ describe('setLogicalRoot', () => {
                 },
                 false
             );
+            expect(triggerEventSpy).toHaveBeenCalledWith(
+                core,
+                {
+                    eventType: 'beforeLogicalRootChange',
+                    logicalRoot: physicalRoot,
+                },
+                false
+            );
         });
 
         it('is called with unrelated, non-nested element', () => {
@@ -99,6 +110,14 @@ describe('setLogicalRoot', () => {
                 },
                 false
             );
+            expect(triggerEventSpy).toHaveBeenCalledWith(
+                core,
+                {
+                    eventType: 'beforeLogicalRootChange',
+                    logicalRoot: insideElement1,
+                },
+                false
+            );
         });
 
         it('is called with same nested element', () => {
@@ -128,6 +147,14 @@ describe('setLogicalRoot', () => {
                 },
                 false
             );
+            expect(triggerEventSpy).toHaveBeenCalledWith(
+                core,
+                {
+                    eventType: 'beforeLogicalRootChange',
+                    logicalRoot: insideElement1,
+                },
+                false
+            );
         });
 
         it('is called with unrelated, non-nested element', () => {

packages/roosterjs-content-model-markdown/test/modelToMarkdown/convertContentModelToMarkdownTest.ts

@@ -118,7 +118,6 @@ describe('convertContentModelToMarkdown', () => {
     it('should set a default alt to images', () => {
         const markdown = '![image](https://www.example.com/image)';
         const model = createModelFromHtml("<img src='https://www.example.com/image'>");
-        console.log(model);
         const md = convertContentModelToMarkdown(model).trim();
         expect(md).toEqual(markdown);
     });

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

@@ -178,6 +178,21 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
             case 'extractContentWithDom':
                 this.removeImageEditing(event.clonedRoot);
                 break;
+            case 'beforeLogicalRootChange':
+                this.handleBeforeLogicalRootChange();
+                break;
+        }
+    }
+
+    private handleBeforeLogicalRootChange() {
+        if (this.isEditing && this.editor && !this.editor.isDisposed()) {
+            this.applyFormatWithContentModel(
+                this.editor,
+                this.isCropMode,
+                false /* shouldSelectImage */
+            );
+            this.removeImageWrapper();
+            this.cleanInfo();
         }
     }
 

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

@@ -779,6 +779,48 @@ describe('ImageEditPlugin', () => {
         expect(cleanInfoSpy).toHaveBeenCalled();
         plugin.dispose();
     });
+
+    it('should call applyFormatWithContentModel and clean up on beforeLogicalRootChange when editing', () => {
+        const plugin = new ImageEditPlugin();
+        plugin.initialize(editor);
+        // Simulate editing state
+        plugin['isEditing'] = true;
+        plugin['editor'] = editor;
+        spyOn(plugin as any, 'applyFormatWithContentModel');
+        spyOn(plugin as any, 'removeImageWrapper');
+        spyOn(plugin as any, 'cleanInfo');
+        editor.isDisposed = () => false; // Simulate editor not disposed
+
+        // Act: simulate the event
+        plugin.onPluginEvent({ eventType: 'beforeLogicalRootChange' } as any);
+
+        // Assert
+        expect((plugin as any).applyFormatWithContentModel).toHaveBeenCalledWith(
+            editor,
+            plugin['isCropMode'],
+            false
+        );
+        expect((plugin as any).removeImageWrapper).toHaveBeenCalled();
+        expect((plugin as any).cleanInfo).toHaveBeenCalled();
+        plugin.dispose();
+    });
+
+    it('should do nothing on beforeLogicalRootChange if not editing', () => {
+        const plugin = new ImageEditPlugin();
+        plugin.initialize(editor);
+        plugin['isEditing'] = false;
+        plugin['editor'] = editor;
+        spyOn(plugin as any, 'applyFormatWithContentModel');
+        spyOn(plugin as any, 'removeImageWrapper');
+        spyOn(plugin as any, 'cleanInfo');
+
+        plugin.onPluginEvent({ eventType: 'beforeLogicalRootChange' } as any);
+
+        expect((plugin as any).applyFormatWithContentModel).not.toHaveBeenCalled();
+        expect((plugin as any).removeImageWrapper).not.toHaveBeenCalled();
+        expect((plugin as any).cleanInfo).not.toHaveBeenCalled();
+        plugin.dispose();
+    });
 });
 
 class TestPlugin extends ImageEditPlugin {
@@ -1903,7 +1945,7 @@ describe('ImageEditPlugin - applyFormatWithContentModel', () => {
                             isSelected: true,
                         },
                     ],
-                    segmentFormat: {},
+                    segmentFormat: undefined,
                     blockType: 'Paragraph',
                     format: {},
                 },

packages/roosterjs-content-model-types/lib/event/LogicalRootChangedEvent.ts

@@ -9,3 +9,13 @@ export interface LogicalRootChangedEvent extends BasePluginEvent<'logicalRootCha
      */
     logicalRoot: HTMLDivElement;
 }
+
+/**
+ * Fired when the logical root is about to be changed
+ */
+export interface BeforeLogicalRootChangeEvent extends BasePluginEvent<'beforeLogicalRootChange'> {
+    /**
+     * The logical root element that will no longer be the logical root
+     */
+    logicalRoot: HTMLDivElement;
+}

packages/roosterjs-content-model-types/lib/event/PluginEvent.ts

@@ -12,7 +12,10 @@ import type { EditorReadyEvent } from './EditorReadyEvent';
 import type { EntityOperationEvent } from './EntityOperationEvent';
 import type { ExtractContentWithDomEvent } from './ExtractContentWithDomEvent';
 import type { CompositionEndEvent, KeyDownEvent, KeyPressEvent, KeyUpEvent } from './KeyboardEvent';
-import type { LogicalRootChangedEvent } from './LogicalRootChangedEvent';
+import type {
+    BeforeLogicalRootChangeEvent,
+    LogicalRootChangedEvent,
+} from './LogicalRootChangedEvent';
 import type { MouseDownEvent, MouseUpEvent } from './MouseEvent';
 import type { ScrollEvent } from './ScrollEvent';
 import type { SelectionChangedEvent } from './SelectionChangedEvent';
@@ -26,6 +29,7 @@ export type PluginEvent =
     | BeforeCutCopyEvent
     | BeforeDisposeEvent
     | BeforeKeyboardEditingEvent
+    | BeforeLogicalRootChangeEvent
     | BeforePasteEvent
     | BeforeSetContentEvent
     | CompositionEndEvent

packages/roosterjs-content-model-types/lib/event/PluginEventType.ts

@@ -133,4 +133,11 @@ export type PluginEventType =
      * Editor content is about to be changed by keyboard event.
      * This is only used by Content Model editing
      */
-    | 'beforeKeyboardEditing';
+    | 'beforeKeyboardEditing'
+
+    /**
+     * The logical root is about to change
+     * This event is used to clean up any features from the old logical root
+     * before the new logical root is set.
+     */
+    | 'beforeLogicalRootChange';

packages/roosterjs-content-model-types/lib/index.ts

@@ -477,7 +477,10 @@ export {
     KeyUpEvent,
     CompositionEndEvent,
 } from './event/KeyboardEvent';
-export { LogicalRootChangedEvent } from './event/LogicalRootChangedEvent';
+export {
+    BeforeLogicalRootChangeEvent,
+    LogicalRootChangedEvent,
+} from './event/LogicalRootChangedEvent';
 export { MouseDownEvent, MouseUpEvent } from './event/MouseEvent';
 export { PluginEvent } from './event/PluginEvent';
 export {