fix test

demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createImageEditMenuProvider.tsx

@@ -1,7 +1,7 @@
 import { createContextMenuProvider } from '../utils/createContextMenuProvider';
 import { EditorPlugin, IEditor, ImageEditor } from 'roosterjs-content-model-types';
 import { formatImageWithContentModel } from 'roosterjs-content-model-api';
-import { iterateSelections, updateImageMetadata } from 'roosterjs-content-model-dom';
+import { iterateSelections, mutateBlock, updateImageMetadata } from 'roosterjs-content-model-dom';
 import { setImageAltText } from 'roosterjs-content-model-api';
 import { showInputDialog } from '../../inputDialog/utils/showInputDialog';
 import type { ContextMenuItem } from '../types/ContextMenuItem';
@@ -208,7 +208,7 @@ function removeImage(editor: IEditor) {
                         const index = block.segments.indexOf(segment);
 
                         if (index >= 0) {
-                            block.segments.splice(index, 1);
+                            mutateBlock(block).segments.splice(index, 1);
                             changed = true;
                         }
                     }

demo/scripts/controlsV2/roosterjsReact/emoji/plugin/createEmojiPlugin.ts

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { isModifierKey, isNodeOfType, iterateSelections } from 'roosterjs-content-model-dom';
+import {
+    isModifierKey,
+    isNodeOfType,
+    iterateSelections,
+    mutateSegment,
+} from 'roosterjs-content-model-dom';
 import { KeyCodes } from '@fluentui/react/lib/Utilities';
 import { MoreEmoji } from '../utils/emojiList';
 import { showEmojiCallout } from '../components/showEmojiCallout';
@@ -264,11 +269,13 @@ class EmojiPlugin implements ReactEditorPlugin {
                         previousSegment?.segmentType == 'Text' &&
                         previousSegment.text.endsWith(wordBeforeCursor)
                     ) {
-                        previousSegment.text =
-                            previousSegment.text.substring(
-                                0,
-                                previousSegment.text.length - wordBeforeCursor.length
-                            ) + emoji.codePoint;
+                        mutateSegment(block, previousSegment, segment => {
+                            segment.text =
+                                segment.text.substring(
+                                    0,
+                                    segment.text.length - wordBeforeCursor.length
+                                ) + emoji.codePoint;
+                        });
                     }
                 }
 

demo/scripts/controlsV2/sidePane/contentModel/buttons/exportButton.ts

@@ -1,4 +1,5 @@
 import { getCurrentContentModel } from '../currentModel';
+import { mutateBlock } from 'roosterjs-content-model-dom';
 import { RibbonButton } from '../../../roosterjsReact/ribbon';
 
 export const exportButton: RibbonButton<'buttonNameExport'> = {
@@ -10,7 +11,7 @@ export const exportButton: RibbonButton<'buttonNameExport'> = {
 
         if (model) {
             editor.formatContentModel(currentModel => {
-                currentModel.blocks = model.blocks;
+                mutateBlock(currentModel).blocks = model.blocks;
 
                 return true;
             });

demo/scripts/controlsV2/sidePane/contentModel/buttons/importModelButton.ts

@@ -32,8 +32,11 @@ export const importModelButton: RibbonButton<'buttonNameImportModel'> = {
                 const importedModel = JSON.parse(values.model);
                 if (isBlockGroupOfType(importedModel, 'Document')) {
                     editor.formatContentModel(model => {
-                        model.blocks = importedModel.blocks;
-                        model.format = importedModel.format;
+                        const mutableModel = model;
+
+                        mutableModel.blocks = importedModel.blocks;
+                        mutableModel.format = importedModel.format;
+
                         return true;
                     });
                 }

packages/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts

@@ -112,7 +112,7 @@ export function setModelIndentation(
 
                     break;
                 } else if (currentParent.blockGroupType == 'FormatContainer' && index >= 0) {
-                    delete currentParent.cachedElement;
+                    mutateBlock(currentParent);
 
                     currentBlock = currentParent;
                     currentParent = path[index + 1];

packages/roosterjs-content-model-api/lib/modelApi/table/alignTable.ts

@@ -9,6 +9,4 @@ import type {
 export function alignTable(table: ShallowMutableContentModelTable, operation: TableAlignOperation) {
     table.format.marginLeft = operation == 'alignLeft' ? '' : 'auto';
     table.format.marginRight = operation == 'alignRight' ? '' : 'auto';
-
-    delete table.cachedElement;
 }

packages/roosterjs-content-model-api/lib/modelApi/table/alignTableCell.ts

@@ -71,8 +71,6 @@ function alignTableCellInternal(
                 const format = cell?.format;
 
                 if (format) {
-                    delete cell.cachedElement;
-
                     callback(mutateBlock(cell));
 
                     cell.blocks.forEach(block => {

packages/roosterjs-content-model-api/lib/modelApi/table/deleteTable.ts

@@ -5,5 +5,4 @@ import type { ShallowMutableContentModelTable } from 'roosterjs-content-model-ty
  */
 export function deleteTable(table: ShallowMutableContentModelTable) {
     table.rows = [];
-    delete table.cachedElement;
 }

packages/roosterjs-content-model-api/lib/modelApi/table/mergeTableCells.ts

@@ -23,8 +23,6 @@ export function mergeTableCells(table: ShallowMutableContentModelTable) {
                     mutableCell.spanAbove = rowIndex > sel.firstRow;
                 }
             }
-
-            delete table.rows[rowIndex].cachedElement;
         }
     }
 }

packages/roosterjs-content-model-api/lib/modelApi/table/mergeTableColumn.ts

@@ -46,8 +46,6 @@ export function mergeTableColumn(
                         mutateBlock(newCell).isSelected = true;
                     }
                 }
-
-                delete table.rows[rowIndex].cachedElement;
             }
         }
     }

packages/roosterjs-content-model-api/lib/modelApi/table/mergeTableRow.ts

@@ -37,8 +37,7 @@ export function mergeTableRow(
                     let newSelectedRow = mergingRowIndex;
 
                     while (table.rows[newSelectedRow]?.cells[colIndex]?.spanAbove) {
-                        delete table.rows[newSelectedRow].cells[colIndex].cachedElement;
-                        delete table.rows[newSelectedRow].cachedElement;
+                        mutateBlock(table.rows[newSelectedRow].cells[colIndex]);
                         newSelectedRow--;
                     }
 

packages/roosterjs-content-model-api/lib/modelApi/table/splitTableCellHorizontally.ts

@@ -46,7 +46,7 @@ export function splitTableCellHorizontally(table: ShallowMutableContentModelTabl
                         }
                         row.cells.splice(colIndex + 1, 0, newCell);
 
-                        delete row.cells[colIndex].cachedElement;
+                        mutateBlock(row.cells[colIndex]);
                     }
                 });
 

packages/roosterjs-content-model-api/lib/modelApi/table/splitTableCellVertically.ts

@@ -17,11 +17,7 @@ export function splitTableCellVertically(table: ShallowMutableContentModelTable)
             const row = table.rows[rowIndex];
             const belowRow = table.rows[rowIndex + 1];
 
-            row.cells.forEach(cell => {
-                delete cell.cachedElement;
-            });
-
-            delete row.cachedElement;
+            row.cells.forEach(mutateBlock);
 
             if (
                 belowRow?.cells.every(
@@ -36,8 +32,6 @@ export function splitTableCellVertically(table: ShallowMutableContentModelTable)
                         mutateBlock(belowCell).spanAbove = false;
                     }
                 });
-
-                delete belowRow.cachedElement;
             } else {
                 const newHeight = Math.max((row.height /= 2), MIN_HEIGHT);
                 const newRow: ContentModelTableRow = {

packages/roosterjs-content-model-api/lib/publicApi/table/applyTableBorderFormat.ts

@@ -4,7 +4,6 @@ import {
     getSelectedCells,
     mutateBlock,
     getTableMetadata,
-    hasMetadata,
     parseValueWithUnit,
     setFirstColumnFormatBorders,
     updateTableCellMetadata,
@@ -370,10 +369,10 @@ export function applyTableBorderFormat(
                     modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl);
                 }
 
-                const tableMeta = hasMetadata(tableModel) ? getTableMetadata(tableModel) : {};
+                const tableMeta = getTableMetadata(tableModel);
                 if (tableMeta) {
                     // Enforce first column format if necessary
-                    setFirstColumnFormatBorders(tableModel.rows, tableMeta);
+                    setFirstColumnFormatBorders(mutateBlock(tableModel).rows, tableMeta);
                 }
 
                 return true;

packages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts

@@ -3,6 +3,7 @@ import {
     addTextSegment,
     buildSelectionMarker,
     getRegularSelectionOffsets,
+    mutateBlock,
     processChildNode,
 } from 'roosterjs-content-model-dom';
 import type {
@@ -13,8 +14,8 @@ import type {
     InsertPoint,
     DomToModelContext,
     ContentModelBlockGroup,
-    ContentModelDocument,
     FormatContentModelContext,
+    ShallowMutableContentModelDocument,
 } from 'roosterjs-content-model-types';
 
 /**
@@ -28,7 +29,7 @@ export function formatInsertPointWithContentModel(
     editor: IEditor,
     insertPoint: DOMInsertPoint,
     callback: (
-        model: ContentModelDocument,
+        model: ShallowMutableContentModelDocument,
         context: FormatContentModelContext,
         insertPoint?: InsertPoint
     ) => void,
@@ -47,7 +48,7 @@ export function formatInsertPointWithContentModel(
                 const index = paragraph.segments.indexOf(marker);
 
                 if (index >= 0) {
-                    paragraph.segments.splice(index, 1);
+                    mutateBlock(paragraph).segments.splice(index, 1);
                 }
             }
             return true;

packages/roosterjs-content-model-api/lib/publicApi/utils/formatParagraphWithContentModel.ts

@@ -1,5 +1,5 @@
 import { getSelectedParagraphs } from 'roosterjs-content-model-dom';
-import type { ContentModelParagraph, IEditor } from 'roosterjs-content-model-types';
+import type { IEditor, ShallowMutableContentModelParagraph } from 'roosterjs-content-model-types';
 
 /**
  * Invoke a callback to format the selected paragraph using Content Model
@@ -10,11 +10,11 @@ import type { ContentModelParagraph, IEditor } from 'roosterjs-content-model-typ
 export function formatParagraphWithContentModel(
     editor: IEditor,
     apiName: string,
-    setStyleCallback: (paragraph: ContentModelParagraph) => void
+    setStyleCallback: (paragraph: ShallowMutableContentModelParagraph) => void
 ) {
     editor.formatContentModel(
         (model, context) => {
-            const paragraphs = getSelectedParagraphs(model);
+            const paragraphs = getSelectedParagraphs(model, true /*mutate*/);
 
             paragraphs.forEach(setStyleCallback);
             context.newPendingFormat = 'preserve';

packages/roosterjs-content-model-api/lib/publicApi/utils/formatTableWithContentModel.ts

@@ -8,8 +8,13 @@ import {
     getFirstSelectedTable,
     normalizeTable,
     setSelection,
+    mutateBlock,
 } from 'roosterjs-content-model-dom';
-import type { ContentModelTable, IEditor, TableSelection } from 'roosterjs-content-model-types';
+import type {
+    IEditor,
+    ShallowMutableContentModelTable,
+    TableSelection,
+} from 'roosterjs-content-model-types';
 
 /**
  * Invoke a callback to format the selected table using Content Model
@@ -21,14 +26,16 @@ import type { ContentModelTable, IEditor, TableSelection } from 'roosterjs-conte
 export function formatTableWithContentModel(
     editor: IEditor,
     apiName: string,
-    callback: (tableModel: ContentModelTable) => void,
+    callback: (tableModel: ShallowMutableContentModelTable) => void,
     selectionOverride?: TableSelection
 ) {
     editor.formatContentModel(
         model => {
-            const [tableModel, path] = getFirstSelectedTable(model);
+            const [readonlyTableModel, path] = getFirstSelectedTable(model);
+
+            if (readonlyTableModel) {
+                const tableModel = mutateBlock(readonlyTableModel);
 
-            if (tableModel) {
                 callback(tableModel);
 
                 if (!hasSelectionInBlock(tableModel)) {

packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts

@@ -1,12 +1,12 @@
-import { getSelectedSegmentsAndParagraphs } from 'roosterjs-content-model-dom';
+import { getSelectedSegmentsAndParagraphs, mutateSegment } from 'roosterjs-content-model-dom';
 import type {
-    ContentModelDocument,
-    ContentModelParagraph,
     ContentModelSegmentFormat,
     ContentModelText,
     FormatContentModelContext,
     FormatContentModelOptions,
     IEditor,
+    ShallowMutableContentModelDocument,
+    ShallowMutableContentModelParagraph,
 } from 'roosterjs-content-model-types';
 
 /**
@@ -18,9 +18,9 @@ import type {
 export function formatTextSegmentBeforeSelectionMarker(
     editor: IEditor,
     callback: (
-        model: ContentModelDocument,
+        model: ShallowMutableContentModelDocument,
         previousSegment: ContentModelText,
-        paragraph: ContentModelParagraph,
+        paragraph: ShallowMutableContentModelParagraph,
         markerFormat: ContentModelSegmentFormat,
         context: FormatContentModelContext
     ) => boolean,
@@ -33,22 +33,34 @@ export function formatTextSegmentBeforeSelectionMarker(
             model,
             false /*includeFormatHolder*/
         );
+        let rewrite = false;
 
-        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
-            const marker = selectedSegmentsAndParagraphs[0][0];
-            const paragraph = selectedSegmentsAndParagraphs[0][1];
-            const markerIndex = paragraph.segments.indexOf(marker);
-            if (marker.segmentType === 'SelectionMarker' && markerIndex > 0) {
-                const previousSegment = paragraph.segments[markerIndex - 1];
-                if (previousSegment && previousSegment.segmentType === 'Text') {
-                    result = true;
+        if (
+            selectedSegmentsAndParagraphs.length > 0 &&
+            selectedSegmentsAndParagraphs[0][0].segmentType == 'SelectionMarker' &&
+            selectedSegmentsAndParagraphs[0][1]
+        ) {
+            mutateSegment(
+                selectedSegmentsAndParagraphs[0][1],
+                selectedSegmentsAndParagraphs[0][0],
+                (marker, paragraph, markerIndex) => {
+                    const previousSegment = paragraph.segments[markerIndex - 1];
 
-                    return callback(model, previousSegment, paragraph, marker.format, context);
+                    if (previousSegment && previousSegment.segmentType === 'Text') {
+                        result = true;
+                        rewrite = callback(
+                            model,
+                            previousSegment,
+                            paragraph,
+                            marker.format,
+                            context
+                        );
+                    }
                 }
-            }
+            );
         }
 
-        return false;
+        return rewrite;
     }, options);
 
     return result;

packages/roosterjs-content-model-api/test/modelApi/table/alignTableTest.ts

@@ -53,14 +53,11 @@ describe('alignTable', () => {
     });
 
     it('Align table to left, check cached table and align is cleared', () => {
-        const tableNode = document.createElement('table');
         const table = createTable(1);
 
         table.format.textAlign = 'start';
         table.format.htmlAlign = 'end';
 
-        table.cachedElement = tableNode;
-
         alignTable(table, 'alignRight');
 
         expect(table.format).toEqual({
@@ -69,6 +66,5 @@ describe('alignTable', () => {
             textAlign: 'start',
             htmlAlign: 'end',
         });
-        expect(table.cachedElement).toBeUndefined();
     });
 });

packages/roosterjs-content-model-api/test/modelApi/table/deleteTableTest.ts

@@ -5,11 +5,8 @@ describe('deleteTable', () => {
     it('deleteTable', () => {
         const table = createTable(2);
 
-        table.cachedElement = {} as any;
-
         deleteTable(table);
 
         expect(table.rows).toEqual([]);
-        expect(table.cachedElement).toBeUndefined();
     });
 });