Merge pull request #3150 from flyingbee2012/u/biwu/versionbump912

Version bump to 9.36.1

Author: flyingbee2012

packages/roosterjs-content-model-core/lib/coreApi/restoreUndoSnapshot/restoreSnapshotLogicalRoot.ts

@@ -11,7 +11,5 @@ export function restoreSnapshotLogicalRoot(core: EditorCore, snapshot: Snapshot)
         if (restoredLogicalRoot !== core.logicalRoot) {
             core.api.setLogicalRoot(core, restoredLogicalRoot);
         }
-    } else {
-        core.api.setLogicalRoot(core, null);
     }
 }

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

@@ -24,6 +24,11 @@ export const restoreUndoSnapshot: RestoreUndoSnapshot = (core, snapshot) => {
     try {
         core.undo.isRestoring = true;
 
+        // Force clear logical root before restoring snapshot, so the whole editor is editable.
+        // Without changing logical root, browser may want to maintain the scroll position of current logical root,
+        // which may cause the editor to scroll to a wrong position after content is changed.
+        core.api.setLogicalRoot(core, null /* logicalRoot */);
+
         restoreSnapshotHTML(core, snapshot);
         restoreSnapshotLogicalRoot(core, snapshot);
         restoreSnapshotSelection(core, snapshot);

packages/roosterjs-content-model-core/lib/corePlugin/domEvent/DOMEventPlugin.ts

@@ -172,7 +172,8 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
             event.stopPropagation();
 
             const isAndroid = this.editor?.getEnvironment()?.isAndroid ?? false;
-            const isComposing = !isAndroid && ((event as InputEvent).isComposing || this.state.isInIME);
+            const isComposing =
+                !isAndroid && ((event as InputEvent).isComposing || this.state.isInIME);
 
             if (this.editor && !isComposing) {
                 this.editor.triggerEvent('input', {

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

@@ -21,6 +21,7 @@ import type {
     ParsedTable,
     TableSelectionInfo,
     TableCellCoordinate,
+    DOMEventRecord,
 } from 'roosterjs-content-model-types';
 
 const MouseLeftButton = 0;
@@ -48,6 +49,7 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
     private isSafari = false;
     private isMac = false;
     private scrollTopCache: number = 0;
+    private pointerEvent: PointerEvent | null = null;
 
     constructor(options: EditorOptions) {
         this.state = {
@@ -99,18 +101,15 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
         this.isSafari = !!env.isSafari;
         this.isMac = !!env.isMac;
         document.addEventListener('selectionchange', this.onSelectionChange);
-        if (this.isSafari) {
-            this.disposer = this.editor.attachDomEvent({
-                focus: { beforeDispatch: this.onFocus },
-                drop: { beforeDispatch: this.onDrop },
-            });
-        } else {
-            this.disposer = this.editor.attachDomEvent({
-                focus: { beforeDispatch: this.onFocus },
-                blur: { beforeDispatch: this.onBlur },
-                drop: { beforeDispatch: this.onDrop },
-            });
-        }
+        const eventHandlers: Partial<
+            { [P in keyof HTMLElementEventMap]: DOMEventRecord<HTMLElementEventMap[P]> }
+        > = {
+            focus: { beforeDispatch: this.onFocus },
+            drop: { beforeDispatch: this.onDrop },
+            blur: this.isSafari ? undefined : { beforeDispatch: this.onBlur },
+            pointerdown: { beforeDispatch: (event: PointerEvent) => this.onPointerDown(event) },
+        };
+        this.disposer = this.editor.attachDomEvent(<Record<string, DOMEventRecord>>eventHandlers);
     }
 
     dispose() {
@@ -246,6 +245,10 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
                 },
             });
         }
+
+        if (rawEvent.defaultPrevented) {
+            this.pointerEvent = null;
+        }
     }
 
     private onMouseMove = (event: Event) => {
@@ -310,12 +313,27 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
 
     private onMouseUp() {
         this.detachMouseEvent();
+        if (this.pointerEvent && this.pointerEvent.pointerType === 'touch') {
+            requestAnimationFrame(() => {
+                if (this.editor && this.pointerEvent) {
+                    // Handle touch selection here since the cursor position is updated
+                    // Work-in-progress
+                }
+                this.pointerEvent = null;
+            });
+        }
     }
 
     private onDrop = () => {
         this.detachMouseEvent();
     };
 
+    private onPointerDown = (e: PointerEvent) => {
+        if (e.pointerType === 'touch' || e.pointerType === 'pen') {
+            this.pointerEvent = e;
+        }
+    };
+
     private onKeyDown(editor: IEditor, rawEvent: KeyboardEvent) {
         const key = rawEvent.key;
         const selection = editor.getDOMSelection();

packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts

@@ -131,9 +131,10 @@ const getPreviousListLevel = (
 };
 
 const getPreviousListStyle = (list?: ContentModelListItem) => {
-    if (list?.levels[0].dataset) {
-        return updateListMetadata(list.levels[0])?.orderedStyleType;
+    if (!list || list.levels.length < 1) {
+        return undefined;
     }
+    return updateListMetadata(list.levels[0])?.orderedStyleType;
 };
 
 const bulletListType: Map<string, number> = new Map<string, number>([

packages/roosterjs-content-model-plugins/lib/edit/keyboardInput.ts

@@ -69,7 +69,11 @@ export function keyboardInput(editor: IEditor, rawEvent: KeyboardEvent) {
 function shouldInputWithContentModel(selection: DOMSelection | null, rawEvent: KeyboardEvent) {
     if (!selection) {
         return false; // Nothing to delete
-    } else if (!isModifierKey(rawEvent) && (rawEvent.key == 'Space' || rawEvent.key.length == 1)) {
+    } else if (
+        !isModifierKey(rawEvent) &&
+        rawEvent.key &&
+        (rawEvent.key == 'Space' || rawEvent.key.length == 1)
+    ) {
         return selection.type != 'range' || !selection.range.collapsed;
     } else {
         return false;

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

@@ -240,11 +240,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
             event.rawEvent.button !== MouseRightButton &&
             !this.isCropMode
         ) {
-            this.applyFormatWithContentModel(
-                editor,
-                this.isCropMode,
-                this.shadowSpan === event.rawEvent.target
-            );
+            this.applyFormatWithContentModel(editor, this.isCropMode);
         }
     }
 
@@ -339,7 +335,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
     protected applyFormatWithContentModel(
         editor: IEditor,
         isCropMode: boolean,
-        shouldSelectImage: boolean,
+        shouldSelectImage?: boolean,
         isApiOperation?: boolean
     ) {
         let editingImageModel: ContentModelImage | undefined;
@@ -389,9 +385,10 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
                                 if (this.wasImageResized || changeState == 'FullyChanged') {
                                     context.skipUndoSnapshot = false;
                                 }
-
-                                image.isSelected = shouldSelectImage;
-                                image.isSelectedAsImageSelection = shouldSelectImage;
+                                const isSameImage =
+                                    previousSelectedImage?.image === editingImage?.image;
+                                image.isSelected = isSameImage || shouldSelectImage;
+                                image.isSelectedAsImageSelection = isSameImage || shouldSelectImage;
                                 image.format.imageState = undefined;
 
                                 if (selection?.type == 'range' && !selection.range.collapsed) {
@@ -508,6 +505,7 @@ export class ImageEditPlugin implements ImageEditor, EditorPlugin {
         if (!this.imageEditInfo) {
             this.imageEditInfo = getSelectedImageMetadata(editor, image);
         }
+
         this.imageHTMLOptions = getHTMLImageOptions(editor, this.options, this.imageEditInfo);
         this.lastSrc = image.getAttribute('src');
 

packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/processPastedContentFromWordDesktop.ts

@@ -80,8 +80,11 @@ const listLevelParser: FormatParser<ContentModelListItemLevelFormat> = (
     format.marginBottom = undefined;
 };
 
-const wordTableParser: FormatParser<ContentModelTableFormat> = (format): void => {
+const wordTableParser: FormatParser<ContentModelTableFormat> = (format, element): void => {
     if (format.marginLeft?.startsWith('-')) {
         delete format.marginLeft;
     }
+    if (format.htmlAlign) {
+        delete format.htmlAlign;
+    }
 };

packages/roosterjs-content-model-plugins/lib/paste/WordDesktop/processWordLists.ts

@@ -227,10 +227,10 @@ function wordListPaddingParser(
     format: ContentModelListItemLevelFormat,
     element: HTMLElement
 ): void {
-    if (element.style.marginLeft && element.style.marginLeft != '0in') {
+    if (element.style.marginLeft && parseInt(element.style.marginLeft) != 0) {
         format.paddingLeft = '0px';
     }
-    if (element.style.marginRight && element.style.marginRight != '0in') {
+    if (element.style.marginRight && parseInt(element.style.marginRight) != 0) {
         format.paddingRight = '0px';
     }
 }

packages/roosterjs-content-model-plugins/test/autoFormat/list/getListTypeStyleTest.ts

@@ -1356,4 +1356,59 @@ describe('getListTypeStyle', () => {
             index: 3,
         });
     });
+
+    it('should create a new list', () => {
+        const model: ContentModelDocument = {
+            blockGroupType: 'Document',
+            blocks: [
+                {
+                    formatHolder: {
+                        isSelected: false,
+                        segmentType: 'SelectionMarker',
+                        format: {},
+                    },
+                    levels: [],
+                    blockType: 'BlockGroup',
+                    format: {},
+                    blockGroupType: 'ListItem',
+                    blocks: [
+                        {
+                            segments: [
+                                {
+                                    segmentType: 'Br',
+                                    format: {},
+                                },
+                            ],
+                            segmentFormat: {},
+                            blockType: 'Paragraph',
+                            format: {},
+                        },
+                    ],
+                },
+                {
+                    segments: [
+                        {
+                            text: '1.',
+                            segmentType: 'Text',
+                            format: {},
+                        },
+                        {
+                            isSelected: true,
+                            segmentType: 'SelectionMarker',
+                            format: {},
+                        },
+                    ],
+                    segmentFormat: {},
+                    blockType: 'Paragraph',
+                    format: {},
+                },
+            ],
+            format: {},
+        };
+        runTest(model, {
+            listType: 'OL',
+            styleType: NumberingListType.Decimal,
+            index: undefined,
+        });
+    });
 });