Improve

packages/roosterjs-content-model-core/lib/corePlugin/cache/domIndexerImpl.ts

@@ -19,7 +19,6 @@ import type {
     DomIndexer,
     DOMSelection,
     RangeSelectionForCache,
-    ReconcileChildListContext,
     Selectable,
 } from 'roosterjs-content-model-types';
 
@@ -40,6 +39,36 @@ interface IndexedTableElement extends HTMLTableElement {
     __roosterjsContentModel: TableItem;
 }
 
+/**
+ * Context object used by DomIndexer when reconcile mutations with child list
+ */
+interface ReconcileChildListContext {
+    /**
+     * Index of segment in current paragraph
+     */
+    segIndex: number;
+
+    /**
+     * The current paragraph that we are handling
+     */
+    paragraph?: ContentModelParagraph;
+
+    /**
+     * Text node that is added from mutation but has not been handled. This can happen when we first see an added node then later we see a removed one.
+     * e.g. Type text in an empty paragraph (<div><br></div>), so a text node will be added and <BR> will be removed.
+     * Set to a valid text node means we need to handle it later. If it is finally not handled, that means we need to clear cache
+     * Set to undefined (initial value) means no pending text node is hit yet (valid case)
+     * Set to null means there was a pending text node which is already handled, so if we see another pending text node,
+     * we should clear cache since we don't know how to handle it
+     */
+    pendingTextNode?: Text | null;
+
+    /**
+     * Format of the removed segment, this will be used as the format for newly created segment
+     */
+    format?: ContentModelSegmentFormat;
+}
+
 function isIndexedSegment(node: Node): node is IndexedSegmentNode {
     const { paragraph, segments } = (node as IndexedSegmentNode).__roosterjsContentModel ?? {};
 
@@ -302,12 +331,11 @@ export class DomIndexerImpl implements DomIndexer {
         return selectable;
     }
 
-    reconcileChildList(
-        addedNodes: ArrayLike<Node>,
-        removedNodes: ArrayLike<Node>,
-        context: ReconcileChildListContext
-    ): boolean {
+    reconcileChildList(addedNodes: ArrayLike<Node>, removedNodes: ArrayLike<Node>): boolean {
         let canHandle = true;
+        const context: ReconcileChildListContext = {
+            segIndex: -1,
+        };
 
         // First process added nodes
         const addedNode = addedNodes[0];
@@ -327,7 +355,7 @@ export class DomIndexerImpl implements DomIndexer {
             canHandle = false;
         }
 
-        return canHandle;
+        return canHandle && !context.pendingTextNode;
     }
 
     private reconcileAddedNode(node: Text, context: ReconcileChildListContext): boolean {

packages/roosterjs-content-model-core/lib/corePlugin/cache/textMutationObserver.ts

@@ -1,7 +1,6 @@
 import type {
     ContentModelDocument,
     DomIndexer,
-    ReconcileChildListContext,
     TextMutationObserver,
 } from 'roosterjs-content-model-types';
 
@@ -41,12 +40,12 @@ class TextMutationObserverImpl implements TextMutationObserver {
     }
 
     private onMutationInternal = (mutations: MutationRecord[]) => {
-        const context: ReconcileChildListContext = {
-            segIndex: -1,
-        };
         let canHandle = true;
         let firstTarget: Node | null = null;
         let lastTextChangeNode: Node | null = null;
+        let addedNodes: Node[] = [];
+        let removedNodes: Node[] = [];
+        let reconcileText = false;
 
         for (let i = 0; i < mutations.length && canHandle; i++) {
             const mutation = mutations[i];
@@ -65,7 +64,7 @@ class TextMutationObserverImpl implements TextMutationObserver {
                         canHandle = false;
                     } else {
                         lastTextChangeNode = mutation.target;
-                        this.onMutation(true /*textOnly*/);
+                        reconcileText = true;
                     }
                     break;
 
@@ -77,18 +76,21 @@ class TextMutationObserverImpl implements TextMutationObserver {
                     }
 
                     if (canHandle) {
-                        canHandle = this.domIndexer.reconcileChildList(
-                            mutation.addedNodes,
-                            mutation.removedNodes,
-                            context
-                        );
+                        addedNodes = addedNodes.concat(Array.from(mutation.addedNodes));
+                        removedNodes = removedNodes.concat(Array.from(mutation.removedNodes));
                     }
 
                     break;
             }
         }
 
-        if (!canHandle || context.pendingTextNode) {
+        if (canHandle && (addedNodes.length > 0 || removedNodes.length > 0)) {
+            canHandle = this.domIndexer.reconcileChildList(addedNodes, removedNodes);
+        }
+
+        if (canHandle && reconcileText) {
+            this.onMutation(true /*textOnly*/);
+        } else if (!canHandle) {
             this.onMutation(false /*textOnly*/);
         }
     };

packages/roosterjs-content-model-types/lib/context/DomIndexer.ts

@@ -1,4 +1,3 @@
-import type { ReconcileChildListContext } from '../parameter/ReconcileChildListContext';
 import type { CacheSelection } from '../pluginState/CachePluginState';
 import type { ContentModelDocument } from '../contentModel/blockGroup/ContentModelDocument';
 import type { ContentModelParagraph } from '../contentModel/block/ContentModelParagraph';
@@ -49,9 +48,14 @@ export interface DomIndexer {
         oldSelection?: CacheSelection
     ) => boolean;
 
-    reconcileChildList: (
-        addedNodes: ArrayLike<Node>,
-        removedNodes: ArrayLike<Node>,
-        context: ReconcileChildListContext
-    ) => boolean;
+    /**
+     * When child list of editor content is changed, we can use this method to do sync the change from editor into content model.
+     * This is mostly used when user start to type in an empty line. In that case browser will remove the existing BR node in the empty line if any,
+     * and create a new TEXT node for the typed text. Here we use these information to remove original Br segment and create a new Text segment
+     * in content model. But if we find anything that cannot be handled, return false so caller will invalidate the cached model
+     * @param addedNodes Nodes added by browser during mutation
+     * @param removedNodes Nodes removed by browser during mutation
+     * @returns True if the changed nodes are successfully reconciled, otherwise false
+     */
+    reconcileChildList: (addedNodes: ArrayLike<Node>, removedNodes: ArrayLike<Node>) => boolean;
 }

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

@@ -438,7 +438,6 @@ export { NodeTypeMap } from './parameter/NodeTypeMap';
 export { TypeOfBlockGroup } from './parameter/TypeOfBlockGroup';
 export { OperationalBlocks, ReadonlyOperationalBlocks } from './parameter/OperationalBlocks';
 export { ParsedTable, ParsedTableCell } from './parameter/ParsedTable';
-export { ReconcileChildListContext } from './parameter/ReconcileChildListContext';
 export {
     ModelToTextCallback,
     ModelToTextCallbacks,