Patch Bump Plugins package (#3116)

BryanValverdeU · Copilot · web-flow · commit 6396b268a01e · 2025-08-13T14:18:56.000-06:00
* Fix #3110 (#3113) * Add logical root plugin and related presets; enhance event handling with capture option * Update packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update demo/scripts/controlsV2/sidePane/presets/PresetPane.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Add roosterjs-content-model-plugins version 9.33.1 to overrides --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx
@@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom';
 import SampleEntityPlugin from '../plugins/SampleEntityPlugin';
 import { ApiPlaygroundPlugin } from '../sidePane/apiPlayground/ApiPlaygroundPlugin';
 import { ContentModelPanePlugin } from '../sidePane/contentModel/ContentModelPanePlugin';
+import { createLogicalRootPlugin } from '../plugins/createLogicalRootPlugin';
 import { darkModeButton } from '../demoButtons/darkModeButton';
 import { defaultDomToModelOption } from '../options/defaultDomToModelOption';
 import { defaultModelToDomOption } from '../options/defaultModelToDomOption';
@@ -372,6 +373,8 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             plugins.push(...this.getSidePanePlugins());
         }
 
+        plugins.push(createLogicalRootPlugin());
+
         this.updateContentPlugin.update();
 
         return (
diff --git a/demo/scripts/controlsV2/plugins/createLogicalRootPlugin.tsx b/demo/scripts/controlsV2/plugins/createLogicalRootPlugin.tsx
@@ -0,0 +1,73 @@
+import { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+import { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';
+
+export function createLogicalRootPlugin(): EditorPlugin {
+    return new LogicalRootPlugin();
+}
+
+/**
+ * Plugin just for demo purpose of Logical root feature.
+ */
+class LogicalRootPlugin implements EditorPlugin {
+    private editor: IEditor | null = null;
+    private disposer: (() => void) | null = null;
+    private lastTarget: HTMLElement | null = null;
+
+    getName: () => string = () => 'LogicalRootPlugin';
+
+    initialize(editor: IEditor) {
+        this.editor = editor;
+        this.disposer = this.editor.attachDomEvent({
+            mousedown: {
+                capture: true,
+                beforeDispatch: (event: MouseEvent) => {
+                    if (this.editor && this.editor.isDisposed()) {
+                        return;
+                    }
+                    const target = event.target as HTMLElement;
+                    const closestEntity = target.closest('._Entity._EType_LogicalRoot');
+                    if (closestEntity) {
+                        this.editor.setLogicalRoot(closestEntity as HTMLDivElement);
+
+                        if (isElementOfType(target, 'img')) {
+                            this.editor.setDOMSelection({
+                                type: 'image',
+                                image: target,
+                            });
+                        }
+                    } else {
+                        this.editor.setLogicalRoot(null);
+                    }
+                },
+            },
+        });
+    }
+
+    dispose() {
+        this.disposer?.();
+        this.disposer = null;
+        this.editor = null;
+    }
+
+    onPluginEvent(event: PluginEvent) {
+        if (event.eventType === 'logicalRootChanged') {
+            // Handle logical root change if needed
+            event.logicalRoot.focus();
+            if (
+                isElementOfType(this.lastTarget, 'img') &&
+                event.logicalRoot.contains(this.lastTarget)
+            ) {
+                this.editor?.setDOMSelection({
+                    type: 'image',
+                    image: this.lastTarget,
+                });
+            }
+        }
+        if (
+            event.eventType === 'mouseUp' &&
+            isNodeOfType(event.rawEvent.target as Node, 'ELEMENT_NODE')
+        ) {
+            this.lastTarget = event.rawEvent.target as HTMLElement;
+        }
+    }
+}
diff --git a/demo/scripts/controlsV2/sidePane/presets/PresetPane.tsx b/demo/scripts/controlsV2/sidePane/presets/PresetPane.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { allPresets } from './allPresets/allPresets';
-import { IEditor } from 'roosterjs-content-model-types';
+import { ContentModelEntity, IEditor } from 'roosterjs-content-model-types';
+import { mutateBlock } from 'roosterjs-content-model-dom';
 import { Preset } from './allPresets/Preset';
 import { SidePaneElementProps } from '../SidePaneElement';
 
@@ -39,10 +40,21 @@ export default class PresetPane extends React.Component<PresetPaneProps, PresetP
     }
 
     setPreset(editor: IEditor, preset: Preset) {
-        editor?.formatContentModel(model => {
-            model.blocks = preset.content.blocks;
-            return true;
-        });
+        editor?.formatContentModel(
+            (model, ctx) => {
+                model.blocks = preset.content.blocks;
+                // Get the entity blocks
+                const entityBlocks = (model.blocks.filter(
+                    block => block.blockType === 'Entity'
+                ) as ContentModelEntity[]).map(mutateBlock);
+                ctx.newEntities.push(...entityBlocks);
+
+                return true;
+            },
+            {
+                apiName: 'setPreset',
+            }
+        );
 
         const url = new URL(window.location.href);
         url.searchParams.set('preset', preset.id);
diff --git a/demo/scripts/controlsV2/sidePane/presets/allPresets/allPresets.ts b/demo/scripts/controlsV2/sidePane/presets/allPresets/allPresets.ts
@@ -1,3 +1,4 @@
+import logicalRootPreset from './logicalRootPreset';
 import { allTextFormats } from './textPresets';
 import { htmlParagraphs, mixedParagraphs } from './paragraphPresets';
 import { image64x64Black, image64x64Gradient, image64x64White } from './imagePresets';
@@ -30,6 +31,7 @@ export const allPresets: Preset[] = [
     image64x64Black,
     image64x64White,
     undeleteableText,
+    logicalRootPreset,
 ];
 
 export function getPresetModelById(id: string) {
diff --git a/demo/scripts/controlsV2/sidePane/presets/allPresets/logicalRootPreset.ts b/demo/scripts/controlsV2/sidePane/presets/allPresets/logicalRootPreset.ts
@@ -0,0 +1,118 @@
+import { Preset } from './Preset';
+
+const logicalRootPreset: Preset = {
+    buttonName: 'Logical Root',
+    id: 'logicalRoot',
+    content: {
+        blockGroupType: 'Document',
+        blocks: [
+            {
+                segments: [
+                    {
+                        segmentType: 'Br',
+                        format: {
+                            fontFamily: 'Calibri',
+                            fontSize: '11pt',
+                            textColor: '#000000',
+                        },
+                    },
+                ],
+                segmentFormat: {
+                    fontFamily: 'Calibri',
+                    fontSize: '11pt',
+                    textColor: '#000000',
+                },
+                blockType: 'Paragraph',
+                format: {},
+            },
+            {
+                wrapper: createEntity(),
+                entityFormat: {
+                    id: 'LogicalRoot_5',
+                    entityType: 'LogicalRoot',
+                    isReadonly: true,
+                },
+                blockType: 'Entity',
+                format: {},
+                segmentType: 'Entity',
+            },
+            {
+                segments: [
+                    {
+                        isSelected: true,
+                        segmentType: 'SelectionMarker',
+                        format: {
+                            fontFamily: 'Calibri',
+                            fontSize: '11pt',
+                            textColor: 'rgb(0, 0, 0)',
+                        },
+                    },
+                    {
+                        segmentType: 'Br',
+                        format: {
+                            fontFamily: 'Calibri',
+                            fontSize: '11pt',
+                            textColor: 'rgb(0, 0, 0)',
+                        },
+                    },
+                ],
+                segmentFormat: {
+                    fontFamily: 'Calibri',
+                    fontSize: '11pt',
+                    textColor: 'rgb(0, 0, 0)',
+                },
+                blockType: 'Paragraph',
+                format: {},
+            },
+            {
+                wrapper: createEntity(),
+                entityFormat: {
+                    id: 'LogicalRoot_6',
+                    entityType: 'LogicalRoot',
+                    isReadonly: true,
+                },
+                blockType: 'Entity',
+                format: {},
+                segmentType: 'Entity',
+            },
+            {
+                segments: [
+                    {
+                        segmentType: 'Br',
+                        format: {
+                            fontFamily: 'Calibri',
+                            fontSize: '11pt',
+                            textColor: 'rgb(0, 0, 0)',
+                        },
+                    },
+                ],
+                segmentFormat: {
+                    fontFamily: 'Calibri',
+                    fontSize: '11pt',
+                    textColor: 'rgb(0, 0, 0)',
+                },
+                blockType: 'Paragraph',
+                format: {},
+            },
+        ],
+        format: {
+            fontFamily: 'Calibri',
+            fontSize: '11pt',
+            textColor: 'rgb(0, 0, 0)',
+        },
+    },
+};
+
+export default logicalRootPreset;
+
+let id = 0;
+function createEntity(): HTMLElement {
+    const div = document.createElement('div');
+    const newId = ++id;
+    div.className = `_Entity _EType_LogicalRoot _EId_LogicalRoot_${newId} _EReadonly_1`;
+    div.contentEditable = 'false';
+    div.style.width = '400px';
+    div.style.height = '400px';
+    div.style.border = '2px solid blue';
+    return div;
+}
diff --git a/packages/roosterjs-content-model-core/lib/coreApi/attachDomEvent/attachDomEvent.ts b/packages/roosterjs-content-model-core/lib/coreApi/attachDomEvent/attachDomEvent.ts
@@ -11,7 +11,7 @@ import type { AttachDomEvent, PluginEvent } from 'roosterjs-content-model-types'
  */
 export const attachDomEvent: AttachDomEvent = (core, eventMap) => {
     const disposers = getObjectKeys(eventMap || {}).map(key => {
-        const { pluginEventType, beforeDispatch } = eventMap[key];
+        const { pluginEventType, beforeDispatch, capture } = eventMap[key];
         const eventName = key as keyof HTMLElementEventMap;
         const onEvent = (event: HTMLElementEventMap[typeof eventName]) => {
             if (beforeDispatch) {
@@ -30,10 +30,12 @@ export const attachDomEvent: AttachDomEvent = (core, eventMap) => {
             }
         };
 
-        core.logicalRoot.addEventListener(eventName, onEvent);
+        core.logicalRoot.addEventListener(eventName, onEvent, { capture });
 
         return () => {
-            core.logicalRoot.removeEventListener(eventName, onEvent);
+            core.logicalRoot.removeEventListener(eventName, onEvent, {
+                capture,
+            });
         };
     });
 
diff --git a/packages/roosterjs-content-model-core/test/coreApi/attachDomEvent/attachDomEventTest.ts b/packages/roosterjs-content-model-core/test/coreApi/attachDomEvent/attachDomEventTest.ts
@@ -74,6 +74,35 @@ describe('attachDomEvent', () => {
         disposer();
     });
 
+    it('Check event dispatched with capture', () => {
+        const triggerEventSpy = jasmine.createSpy();
+        const beforeDispatch = jasmine.createSpy();
+        core.api.triggerEvent = triggerEventSpy;
+        core.logicalRoot = <any>{
+            addEventListener: jasmine.createSpy('addEventListener'),
+            removeEventListener: jasmine.createSpy('removeEventListener'),
+        };
+
+        const disposer = attachDomEvent(core, {
+            keydown: { pluginEventType: 'keyDown', capture: true, beforeDispatch },
+        });
+        const event = document.createEvent('KeyboardEvent');
+        event.initEvent('keydown');
+        div.dispatchEvent(event);
+
+        disposer();
+        expect(core.logicalRoot.addEventListener).toHaveBeenCalledWith(
+            'keydown',
+            jasmine.any(Function),
+            { capture: true }
+        );
+        expect(core.logicalRoot.removeEventListener).toHaveBeenCalledWith(
+            'keydown',
+            jasmine.any(Function),
+            { capture: true }
+        );
+    });
+
     it('Check event dispatched via triggerEvent and callback', () => {
         const triggerEventSpy = jasmine.createSpy();
         const callback = jasmine.createSpy();
diff --git a/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts b/packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts
@@ -469,15 +469,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         ) {
             // Image dimensions are zero and loading is incomplete, wait for image to load.
             image.onload = () => {
-                this.imageEditInfo = {
-                    ...this.imageEditInfo,
-                    widthPx: image.clientWidth,
-                    heightPx: image.clientHeight,
-                    naturalWidth: image.naturalWidth,
-                    naturalHeight: image.naturalHeight,
-                };
-                image.style.width = this.imageEditInfo.widthPx + 'px';
-                image.style.height = this.imageEditInfo.heightPx + 'px';
+                this.updateImageDimensionsIfZero(image);
                 this.startEditingInternal(editor, image, apiOperation);
                 image.onload = null;
                 image.onerror = null;
@@ -487,10 +479,18 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                 image.onerror = null;
             };
         } else {
+            this.updateImageDimensionsIfZero(image);
             this.startEditingInternal(editor, image, apiOperation);
         }
     }
 
+    private updateImageDimensionsIfZero(image: HTMLImageElement) {
+        if (this.imageEditInfo?.widthPx === 0 || this.imageEditInfo?.heightPx === 0) {
+            this.imageEditInfo.widthPx = image.clientWidth;
+            this.imageEditInfo.heightPx = image.clientHeight;
+        }
+    }
+
     private startEditingInternal(
         editor: IEditor,
         image: HTMLImageElement,
diff --git a/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts b/packages/roosterjs-content-model-plugins/test/imageEdit/ImageEditPluginTest.ts
diff --git a/packages/roosterjs-content-model-types/lib/parameter/DOMEventRecord.ts b/packages/roosterjs-content-model-types/lib/parameter/DOMEventRecord.ts
diff --git a/versions.json b/versions.json
