roosterjs 9.3.1 → 9.4.1

package/dist/rooster.js

@@ -2446,7 +2446,7 @@ function setModelIndentation(model, indentation, length, context) {
             var currentParent = parent;
             while (currentParent && modifiedBlocks.indexOf(currentBlock) < 0) {
                 var index = path.indexOf(currentParent);
-                var format = currentBlock.format;
+                var format = (0, roosterjs_content_model_dom_1.mutateBlock)(currentBlock).format;
                 var newValue = calculateMarginValue(format, isIndent, length);
                 if (newValue !== null) {
                     var isRtl = format.direction == 'rtl';
@@ -2894,7 +2894,7 @@ function insertEntityModel(model, entityModel, position, isBlock, focusAfterEnti
             var pathIndex = position == 'root'
                 ? (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['TableCell', 'Document'])
                 : 0;
-            blockParent = path[pathIndex];
+            blockParent = (0, roosterjs_content_model_dom_1.mutateBlock)(path[pathIndex]);
             var child = path[pathIndex - 1];
             var directChild = (child === null || child === void 0 ? void 0 : child.blockGroupType) == 'FormatContainer' ||
                 (child === null || child === void 0 ? void 0 : child.blockGroupType) == 'General' ||
@@ -2912,7 +2912,7 @@ function insertEntityModel(model, entityModel, position, isBlock, focusAfterEnti
             var nextBlock = blockParent.blocks[blockIndex];
             blocksToInsert.push(entityModel);
             if ((nextBlock === null || nextBlock === void 0 ? void 0 : nextBlock.blockType) == 'Paragraph') {
-                nextParagraph = nextBlock;
+                nextParagraph = (0, roosterjs_content_model_dom_1.mutateBlock)(nextBlock);
             }
             else if (!nextBlock || nextBlock.blockType == 'Entity' || focusAfterEntity) {
                 nextParagraph = (0, roosterjs_content_model_dom_1.createParagraph)(false /*isImplicit*/, {}, model.format);
@@ -3134,11 +3134,6 @@ exports.matchLink = matchLink;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.findListItemsInSameThread = void 0;
-/**
- * @param model The content model
- * @param currentItem The current list item
- * Search for all list items in the same thread as the current list item
- */
 function findListItemsInSameThread(group, currentItem) {
     var items = [];
     findListItems(group, items);
@@ -3280,7 +3275,7 @@ function getListAnnounceData(path) {
         }
         else if (level.listType == 'OL') {
             var listNumber = getListNumber(path, listItem);
-            var metadata = (0, roosterjs_content_model_dom_1.updateListMetadata)(level);
+            var metadata = (0, roosterjs_content_model_dom_1.getListMetadata)(level);
             var listStyle = (0, roosterjs_content_model_dom_1.getAutoListStyleType)('OL', metadata !== null && metadata !== void 0 ? metadata : {}, listItem.levels.length - 1, level.format.listStyleType);
             return listStyle === undefined
                 ? null
@@ -5024,7 +5019,7 @@ function changeImage(editor, file) {
         if (dataUrl && !editor.isDisposed() && (selection === null || selection === void 0 ? void 0 : selection.type) === 'image') {
             (0, formatImageWithContentModel_1.formatImageWithContentModel)(editor, 'changeImage', function (image) {
                 var _a, _b;
-                var originalSrc = (_b = (_a = (0, roosterjs_content_model_dom_1.updateImageMetadata)(image)) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : '';
+                var originalSrc = (_b = (_a = (0, roosterjs_content_model_dom_1.getImageMetadata)(image)) === null || _a === void 0 ? void 0 : _a.src) !== null && _b !== void 0 ? _b : '';
                 var previousSrc = image.src;
                 image.src = dataUrl;
                 image.dataset = {};
@@ -6296,6 +6291,11 @@ function applyTableBorderFormat(editor, border, operation) {
                 //Format perimeter if necessary or possible
                 modifyPerimeter(tableModel, sel, borderFormat, perimeter, isRtl);
             }
+            var tableMeta = (0, roosterjs_content_model_dom_1.hasMetadata)(tableModel) ? (0, roosterjs_content_model_dom_1.getTableMetadata)(tableModel) : {};
+            if (tableMeta) {
+                // Enforce first column format if necessary
+                (0, roosterjs_content_model_dom_1.setFirstColumnFormatBorders)(tableModel.rows, tableMeta);
+            }
             return true;
         }
         else {
@@ -6602,7 +6602,6 @@ function setTableCellShade(editor, color) {
     editor.formatContentModel(function (model) {
         var _a = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model), 1), table = _a[0];
         if (table) {
-            (0, roosterjs_content_model_dom_1.normalizeTable)(table);
             table.rows.forEach(function (row) {
                 return row.cells.forEach(function (cell) {
                     if ((0, roosterjs_content_model_dom_1.hasSelectionInBlockGroup)(cell)) {
@@ -8574,7 +8573,7 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  */
 var formatContentModel = function (core, formatter, options, domToModelOptions) {
     var _a;
-    var _b = options || {}, apiName = _b.apiName, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, changeSource = _b.changeSource, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride, scrollCaretIntoView = _b.scrollCaretIntoView;
+    var _b = options || {}, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride, scrollCaretIntoView = _b.scrollCaretIntoView;
     var model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     var context = {
         newEntities: [],
@@ -8608,9 +8607,9 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
                 eventType: 'contentChanged',
                 contentModel: clearModelCache ? undefined : model,
                 selection: clearModelCache ? undefined : selection,
-                source: changeSource || roosterjs_content_model_dom_1.ChangeSource.Format,
+                source: (options === null || options === void 0 ? void 0 : options.changeSource) || roosterjs_content_model_dom_1.ChangeSource.Format,
                 data: getChangeData === null || getChangeData === void 0 ? void 0 : getChangeData(),
-                formatApiName: apiName,
+                formatApiName: options === null || options === void 0 ? void 0 : options.apiName,
                 changedEntities: getChangedEntities(context, rawEvent),
             };
             core.api.triggerEvent(core, eventData, true /*broadcast*/);
@@ -9293,8 +9292,6 @@ var HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor';
 var HIDE_SELECTION_CSS_KEY = '_DOMSelectionHideSelection';
 var IMAGE_ID = 'image';
 var TABLE_ID = 'table';
-var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
-var TABLE_CSS_RULE = 'background-color:#C6C6C6!important;';
 var CARET_CSS_RULE = 'caret-color: transparent';
 var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important;';
 var SELECTION_SELECTOR = '*::selection';
@@ -9307,6 +9304,7 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     // Set skipReselectOnFocus to skip this behavior
     var skipReselectOnFocus = core.selection.skipReselectOnFocus;
     var doc = core.physicalRoot.ownerDocument;
+    var isDarkMode = core.lifecycle.isDarkMode;
     core.selection.skipReselectOnFocus = true;
     core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, null /*cssRule*/);
     core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, null /*cssRule*/);
@@ -9319,7 +9317,10 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
                     type: 'image',
                     image: image,
                 };
-                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["span:has(>img#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID) + ")"]);
+                var imageSelectionColor = isDarkMode
+                    ? core.selection.imageSelectionBorderColorDark
+                    : core.selection.imageSelectionBorderColor;
+                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + imageSelectionColor + "!important;", ["span:has(>img#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID) + ")"]);
                 core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, TRANSPARENT_SELECTION_CSS_RULE, [SELECTION_SELECTOR]);
                 setRangeSelection(doc, image, false /* collapse */);
                 break;
@@ -9359,7 +9360,10 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
                     ? ["#" + tableId, "#" + tableId + " *"]
                     : handleTableSelected(parsedTable, tableId, table, firstCell, lastCell);
                 core.selection.selection = selection;
-                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, TABLE_CSS_RULE, tableSelectors);
+                var tableSelectionColor = isDarkMode
+                    ? core.selection.tableCellSelectionBackgroundColorDark
+                    : core.selection.tableCellSelectionBackgroundColor;
+                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "background-color:" + tableSelectionColor + "!important;", tableSelectors);
                 core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
                 var nodeToSelect = ((_c = firstCell.cell) === null || _c === void 0 ? void 0 : _c.firstElementChild) || firstCell.cell;
                 if (nodeToSelect) {
@@ -10667,7 +10671,7 @@ var deleteEmptyList = function (context) {
                 (!previousBlock || (0, roosterjs_content_model_dom_1.hasSelectionInBlock)(previousBlock)) &&
                 nextBlock &&
                 isEmptyBlock(nextBlock)) {
-                item.levels = [];
+                (0, roosterjs_content_model_dom_1.mutateBlock)(item).levels = [];
             }
         }
     }
@@ -12104,7 +12108,7 @@ exports.createLifecyclePlugin = createLifecyclePlugin;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createSelectionPlugin = void 0;
+exports.createSelectionPlugin = exports.DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR = exports.DEFAULT_SELECTION_BORDER_COLOR = void 0;
 var findCoordinate_1 = __webpack_require__(/*! ./findCoordinate */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/findCoordinate.ts");
 var findTableCellElement_1 = __webpack_require__(/*! ../../coreApi/setDOMSelection/findTableCellElement */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/findTableCellElement.ts");
 var isSingleImageInSelection_1 = __webpack_require__(/*! ./isSingleImageInSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts");
@@ -12118,9 +12122,18 @@ var Down = 'ArrowDown';
 var Left = 'ArrowLeft';
 var Right = 'ArrowRight';
 var Tab = 'Tab';
+/**
+ * @internal
+ */
+exports.DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
+/**
+ * @internal
+ */
+exports.DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR = '#C6C6C6';
 var SelectionPlugin = /** @class */ (function () {
     function SelectionPlugin(options) {
         var _this = this;
+        var _a, _b;
         this.editor = null;
         this.disposer = null;
         this.isSafari = false;
@@ -12241,7 +12254,14 @@ var SelectionPlugin = /** @class */ (function () {
         this.state = {
             selection: null,
             tableSelection: null,
-            imageSelectionBorderColor: options.imageSelectionBorderColor,
+            imageSelectionBorderColor: (_a = options.imageSelectionBorderColor) !== null && _a !== void 0 ? _a : exports.DEFAULT_SELECTION_BORDER_COLOR,
+            imageSelectionBorderColorDark: options.imageSelectionBorderColor
+                ? undefined
+                : exports.DEFAULT_SELECTION_BORDER_COLOR,
+            tableCellSelectionBackgroundColor: (_b = options.tableCellSelectionBackgroundColor) !== null && _b !== void 0 ? _b : exports.DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR,
+            tableCellSelectionBackgroundColorDark: options.tableCellSelectionBackgroundColor
+                ? undefined
+                : exports.DEFAULT_TABLE_CELL_SELECTION_BACKGROUND_COLOR,
         };
     }
     SelectionPlugin.prototype.getName = function () {
@@ -12249,6 +12269,17 @@ var SelectionPlugin = /** @class */ (function () {
     };
     SelectionPlugin.prototype.initialize = function (editor) {
         this.editor = editor;
+        if (!this.state.imageSelectionBorderColorDark && this.state.imageSelectionBorderColor) {
+            this.state.imageSelectionBorderColorDark = editor
+                .getColorManager()
+                .getDarkColor(this.state.imageSelectionBorderColor, undefined, 'border');
+        }
+        if (!this.state.tableCellSelectionBackgroundColorDark &&
+            this.state.tableCellSelectionBackgroundColor) {
+            this.state.tableCellSelectionBackgroundColorDark = editor
+                .getColorManager()
+                .getDarkColor(this.state.tableCellSelectionBackgroundColor, undefined, 'background');
+        }
         var env = this.editor.getEnvironment();
         var document = this.editor.getDocument();
         this.isSafari = !!env.isSafari;
@@ -12555,6 +12586,7 @@ var SelectionPlugin = /** @class */ (function () {
         var parsedTable;
         var firstCo;
         if ((table = domHelper.findClosestElementAncestor(tableStart, 'table')) &&
+            table.isContentEditable &&
             (parsedTable = (0, roosterjs_content_model_dom_1.parseTableCells)(table)) &&
             (firstCo = (0, findCoordinate_1.findCoordinate)(parsedTable, tdStart, domHelper))) {
             return { table: table, parsedTable: parsedTable, firstCo: firstCo, startNode: tdStart };
@@ -19583,9 +19615,9 @@ exports.shouldSetValue = shouldSetValue;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
-exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.setParagraphNotImplicit = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.createEmptyModel = void 0;
-exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = void 0;
+exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
+exports.iterateSelections = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.setParagraphNotImplicit = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = void 0;
+exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = void 0;
 var domToContentModel_1 = __webpack_require__(/*! ./domToModel/domToContentModel */ "./packages/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts");
 Object.defineProperty(exports, "domToContentModel", ({ enumerable: true, get: function () { return domToContentModel_1.domToContentModel; } }));
 var contentModelToDom_1 = __webpack_require__(/*! ./modelToDom/contentModelToDom */ "./packages/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts");
@@ -19612,6 +19644,7 @@ var buildSelectionMarker_1 = __webpack_require__(/*! ./domToModel/utils/buildSel
 Object.defineProperty(exports, "buildSelectionMarker", ({ enumerable: true, get: function () { return buildSelectionMarker_1.buildSelectionMarker; } }));
 var updateMetadata_1 = __webpack_require__(/*! ./modelApi/metadata/updateMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateMetadata.ts");
 Object.defineProperty(exports, "updateMetadata", ({ enumerable: true, get: function () { return updateMetadata_1.updateMetadata; } }));
+Object.defineProperty(exports, "getMetadata", ({ enumerable: true, get: function () { return updateMetadata_1.getMetadata; } }));
 Object.defineProperty(exports, "hasMetadata", ({ enumerable: true, get: function () { return updateMetadata_1.hasMetadata; } }));
 var isNodeOfType_1 = __webpack_require__(/*! ./domUtils/isNodeOfType */ "./packages/roosterjs-content-model-dom/lib/domUtils/isNodeOfType.ts");
 Object.defineProperty(exports, "isNodeOfType", ({ enumerable: true, get: function () { return isNodeOfType_1.isNodeOfType; } }));
@@ -19676,6 +19709,12 @@ var createListLevel_1 = __webpack_require__(/*! ./modelApi/creators/createListLe
 Object.defineProperty(exports, "createListLevel", ({ enumerable: true, get: function () { return createListLevel_1.createListLevel; } }));
 var createEmptyModel_1 = __webpack_require__(/*! ./modelApi/creators/createEmptyModel */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createEmptyModel.ts");
 Object.defineProperty(exports, "createEmptyModel", ({ enumerable: true, get: function () { return createEmptyModel_1.createEmptyModel; } }));
+var createTableRow_1 = __webpack_require__(/*! ./modelApi/creators/createTableRow */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createTableRow.ts");
+Object.defineProperty(exports, "createTableRow", ({ enumerable: true, get: function () { return createTableRow_1.createTableRow; } }));
+var mutate_1 = __webpack_require__(/*! ./modelApi/common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
+Object.defineProperty(exports, "mutateBlock", ({ enumerable: true, get: function () { return mutate_1.mutateBlock; } }));
+Object.defineProperty(exports, "mutateSegments", ({ enumerable: true, get: function () { return mutate_1.mutateSegments; } }));
+Object.defineProperty(exports, "mutateSegment", ({ enumerable: true, get: function () { return mutate_1.mutateSegment; } }));
 var addBlock_1 = __webpack_require__(/*! ./modelApi/common/addBlock */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addBlock.ts");
 Object.defineProperty(exports, "addBlock", ({ enumerable: true, get: function () { return addBlock_1.addBlock; } }));
 var addDecorators_1 = __webpack_require__(/*! ./modelApi/common/addDecorators */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addDecorators.ts");
@@ -19781,6 +19820,7 @@ var deleteBlock_1 = __webpack_require__(/*! ./modelApi/editing/deleteBlock */ ".
 Object.defineProperty(exports, "deleteBlock", ({ enumerable: true, get: function () { return deleteBlock_1.deleteBlock; } }));
 var applyTableFormat_1 = __webpack_require__(/*! ./modelApi/editing/applyTableFormat */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts");
 Object.defineProperty(exports, "applyTableFormat", ({ enumerable: true, get: function () { return applyTableFormat_1.applyTableFormat; } }));
+Object.defineProperty(exports, "setFirstColumnFormatBorders", ({ enumerable: true, get: function () { return applyTableFormat_1.setFirstColumnFormatBorders; } }));
 var normalizeTable_1 = __webpack_require__(/*! ./modelApi/editing/normalizeTable */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts");
 Object.defineProperty(exports, "normalizeTable", ({ enumerable: true, get: function () { return normalizeTable_1.normalizeTable; } }));
 Object.defineProperty(exports, "MIN_ALLOWED_TABLE_CELL_WIDTH", ({ enumerable: true, get: function () { return normalizeTable_1.MIN_ALLOWED_TABLE_CELL_WIDTH; } }));
@@ -19794,12 +19834,16 @@ var getSegmentTextFormat_1 = __webpack_require__(/*! ./modelApi/editing/getSegme
 Object.defineProperty(exports, "getSegmentTextFormat", ({ enumerable: true, get: function () { return getSegmentTextFormat_1.getSegmentTextFormat; } }));
 var updateImageMetadata_1 = __webpack_require__(/*! ./modelApi/metadata/updateImageMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateImageMetadata.ts");
 Object.defineProperty(exports, "updateImageMetadata", ({ enumerable: true, get: function () { return updateImageMetadata_1.updateImageMetadata; } }));
+Object.defineProperty(exports, "getImageMetadata", ({ enumerable: true, get: function () { return updateImageMetadata_1.getImageMetadata; } }));
 var updateTableCellMetadata_1 = __webpack_require__(/*! ./modelApi/metadata/updateTableCellMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableCellMetadata.ts");
 Object.defineProperty(exports, "updateTableCellMetadata", ({ enumerable: true, get: function () { return updateTableCellMetadata_1.updateTableCellMetadata; } }));
+Object.defineProperty(exports, "getTableCellMetadata", ({ enumerable: true, get: function () { return updateTableCellMetadata_1.getTableCellMetadata; } }));
 var updateTableMetadata_1 = __webpack_require__(/*! ./modelApi/metadata/updateTableMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableMetadata.ts");
 Object.defineProperty(exports, "updateTableMetadata", ({ enumerable: true, get: function () { return updateTableMetadata_1.updateTableMetadata; } }));
+Object.defineProperty(exports, "getTableMetadata", ({ enumerable: true, get: function () { return updateTableMetadata_1.getTableMetadata; } }));
 var updateListMetadata_1 = __webpack_require__(/*! ./modelApi/metadata/updateListMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateListMetadata.ts");
 Object.defineProperty(exports, "updateListMetadata", ({ enumerable: true, get: function () { return updateListMetadata_1.updateListMetadata; } }));
+Object.defineProperty(exports, "getListMetadata", ({ enumerable: true, get: function () { return updateListMetadata_1.getListMetadata; } }));
 Object.defineProperty(exports, "ListMetadataDefinition", ({ enumerable: true, get: function () { return updateListMetadata_1.ListMetadataDefinition; } }));
 var ChangeSource_1 = __webpack_require__(/*! ./constants/ChangeSource */ "./packages/roosterjs-content-model-dom/lib/constants/ChangeSource.ts");
 Object.defineProperty(exports, "ChangeSource", ({ enumerable: true, get: function () { return ChangeSource_1.ChangeSource; } }));
@@ -19821,19 +19865,20 @@ Object.defineProperty(exports, "UnorderedListStyleMap", ({ enumerable: true, get
 /*!********************************************************************************************!*\
   !*** ./packages/roosterjs-content-model-dom/lib/modelApi/block/setParagraphNotImplicit.ts ***!
   \********************************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setParagraphNotImplicit = void 0;
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 /**
  * For a given block, if it is a paragraph, set it to be not-implicit
  * @param block The block to check
  */
 function setParagraphNotImplicit(block) {
     if (block.blockType == 'Paragraph' && block.isImplicit) {
-        block.isImplicit = false;
+        (0, mutate_1.mutateBlock)(block).isImplicit = false;
     }
 }
 exports.setParagraphNotImplicit = setParagraphNotImplicit;
@@ -19923,13 +19968,6 @@ exports.addDecorators = addDecorators;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.addSegment = void 0;
 var ensureParagraph_1 = __webpack_require__(/*! ./ensureParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/ensureParagraph.ts");
-/**
- * Add a given segment into a paragraph from its parent group. If the last block of the given group is not paragraph, create a new paragraph.
- * @param group The parent block group of the paragraph to add segment into
- * @param newSegment The segment to add
- * @param blockFormat The block format used for creating a new paragraph when need
- * @returns The parent paragraph where the segment is added to
- */
 function addSegment(group, newSegment, blockFormat, segmentFormat) {
     var paragraph = (0, ensureParagraph_1.ensureParagraph)(group, blockFormat, segmentFormat);
     var lastSegment = paragraph.segments[paragraph.segments.length - 1];
@@ -20022,16 +20060,11 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ensureParagraph = void 0;
 var addBlock_1 = __webpack_require__(/*! ./addBlock */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addBlock.ts");
 var createParagraph_1 = __webpack_require__(/*! ../creators/createParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createParagraph.ts");
-/**
- * @internal
- * Ensure there is a Paragraph that can insert segments in a Content Model Block Group
- * @param group The parent block group of the target paragraph
- * @param blockFormat Format of the paragraph. This is only used if we need to create a new paragraph
- */
+var mutate_1 = __webpack_require__(/*! ./mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 function ensureParagraph(group, blockFormat, segmentFormat) {
     var lastBlock = group.blocks[group.blocks.length - 1];
     if ((lastBlock === null || lastBlock === void 0 ? void 0 : lastBlock.blockType) == 'Paragraph') {
-        return lastBlock;
+        return (0, mutate_1.mutateBlock)(lastBlock);
     }
     else {
         var paragraph = (0, createParagraph_1.createParagraph)(true, blockFormat, segmentFormat);
@@ -20159,6 +20192,87 @@ function isBlockGroup(model) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts":
+/*!****************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts ***!
+  \****************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+/**
+ * Convert a readonly block to mutable block, clear cached element if exist
+ * @param block The block to convert from
+ * @returns The same block object of its related mutable type
+ */
+function mutateBlock(block) {
+    if (block.cachedElement) {
+        delete block.cachedElement;
+    }
+    if (isTable(block)) {
+        block.rows.forEach(function (row) {
+            delete row.cachedElement;
+        });
+    }
+    else if (isListItem(block)) {
+        block.levels.forEach(function (level) { return delete level.cachedElement; });
+    }
+    var result = block;
+    return result;
+}
+exports.mutateBlock = mutateBlock;
+/**
+ * Convert segments of a readonly paragraph to be mutable.
+ * Segments that are not belong to the given paragraph will be skipped
+ * @param paragraph The readonly paragraph to convert from
+ * @param segments The segments to convert from
+ */
+function mutateSegments(paragraph, segments) {
+    var mutablePara = mutateBlock(paragraph);
+    var result = [mutablePara, [], []];
+    if (segments) {
+        segments.forEach(function (segment) {
+            var index = paragraph.segments.indexOf(segment);
+            if (index >= 0) {
+                result[1].push(mutablePara.segments[index]);
+                result[2].push(index);
+            }
+        });
+    }
+    return result;
+}
+exports.mutateSegments = mutateSegments;
+/**
+ * Convert a readonly segment to be mutable, together with its owner paragraph
+ * If the segment does not belong to the given paragraph, return null for the segment
+ * @param paragraph The readonly paragraph to convert from
+ * @param segment The segment to convert from
+ */
+function mutateSegment(paragraph, segment, callback) {
+    var _a;
+    var _b = (0, tslib_1.__read)(mutateSegments(paragraph, [segment]), 3), mutablePara = _b[0], mutableSegments = _b[1], indexes = _b[2];
+    var mutableSegment = mutableSegments[0] == segment
+        ? mutableSegments[0]
+        : null;
+    if (callback && mutableSegment) {
+        callback(mutableSegments[0], mutablePara, indexes[0]);
+    }
+    return [mutablePara, mutableSegment, (_a = indexes[0]) !== null && _a !== void 0 ? _a : -1];
+}
+exports.mutateSegment = mutateSegment;
+function isTable(obj) {
+    return obj.blockType == 'Table';
+}
+function isListItem(obj) {
+    return obj.blockGroupType == 'ListItem';
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeContentModel.ts":
@@ -20172,6 +20286,7 @@ function isBlockGroup(model) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.normalizeContentModel = void 0;
 var isEmpty_1 = __webpack_require__(/*! ./isEmpty */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/isEmpty.ts");
+var mutate_1 = __webpack_require__(/*! ./mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var normalizeParagraph_1 = __webpack_require__(/*! ./normalizeParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeParagraph.ts");
 var unwrapBlock_1 = __webpack_require__(/*! ./unwrapBlock */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/unwrapBlock.ts");
 /**
@@ -20210,7 +20325,7 @@ function normalizeContentModel(group) {
                 break;
         }
         if ((0, isEmpty_1.isBlockEmpty)(block)) {
-            group.blocks.splice(i, 1);
+            (0, mutate_1.mutateBlock)(group).blocks.splice(i, 1);
         }
     }
 }
@@ -20233,6 +20348,7 @@ var areSameFormats_1 = __webpack_require__(/*! ../../domToModel/utils/areSameFor
 var createBr_1 = __webpack_require__(/*! ../creators/createBr */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createBr.ts");
 var isEmpty_1 = __webpack_require__(/*! ./isEmpty */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/isEmpty.ts");
 var isWhiteSpacePreserved_1 = __webpack_require__(/*! ../../domUtils/isWhiteSpacePreserved */ "./packages/roosterjs-content-model-dom/lib/domUtils/isWhiteSpacePreserved.ts");
+var mutate_1 = __webpack_require__(/*! ./mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var normalizeSegment_1 = __webpack_require__(/*! ./normalizeSegment */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegment.ts");
 /**
  * @param paragraph The paragraph to normalize
@@ -20245,7 +20361,7 @@ function normalizeParagraph(paragraph) {
         var secondLast = segments[segments.length - 2];
         if (last.segmentType == 'SelectionMarker' &&
             (!secondLast || secondLast.segmentType == 'Br')) {
-            segments.push((0, createBr_1.createBr)(last.format));
+            (0, mutate_1.mutateBlock)(paragraph).segments.push((0, createBr_1.createBr)(last.format));
         }
         else if (segments.length > 1 && segments[segments.length - 1].segmentType == 'Br') {
             var noMarkerSegments = segments.filter(function (x) { return x.segmentType != 'SelectionMarker'; });
@@ -20253,7 +20369,7 @@ function normalizeParagraph(paragraph) {
             // But if there are more than one <BR> at the end, do not remove them.
             if (noMarkerSegments.length > 1 &&
                 noMarkerSegments[noMarkerSegments.length - 2].segmentType != 'Br') {
-                segments.pop();
+                (0, mutate_1.mutateBlock)(paragraph).segments.pop();
             }
         }
     }
@@ -20268,7 +20384,7 @@ exports.normalizeParagraph = normalizeParagraph;
 function removeEmptySegments(block) {
     for (var j = block.segments.length - 1; j >= 0; j--) {
         if ((0, isEmpty_1.isSegmentEmpty)(block.segments[j])) {
-            block.segments.splice(j, 1);
+            (0, mutate_1.mutateBlock)(block).segments.splice(j, 1);
         }
     }
 }
@@ -20288,7 +20404,9 @@ function removeEmptyLinks(paragraph) {
                 next &&
                 !next.link &&
                 (0, areSameFormats_1.areSameFormats)(next.format, marker.format))) {
-            delete marker.link;
+            (0, mutate_1.mutateSegment)(paragraph, marker, function (mutableMarker) {
+                delete mutableMarker.link;
+            });
         }
     }
 }
@@ -20303,7 +20421,7 @@ function moveUpSegmentFormat(paragraph) {
             changed_1 = internalMoveUpSegmentFormat(segments_1, target_1, key) || changed_1;
         });
         if (changed_1) {
-            paragraph.segmentFormat = target_1;
+            (0, mutate_1.mutateBlock)(paragraph).segmentFormat = target_1;
         }
     }
 }
@@ -20334,6 +20452,7 @@ function internalMoveUpSegmentFormat(segments, target, formatKey) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.normalizeSegment = exports.createNormalizeSegmentContext = exports.normalizeSingleSegment = exports.normalizeAllSegments = void 0;
 var hasSpacesOnly_1 = __webpack_require__(/*! ./hasSpacesOnly */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/hasSpacesOnly.ts");
+var mutate_1 = __webpack_require__(/*! ./mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var SPACE = '\u0020';
 var NONE_BREAK_SPACE = '\u00A0';
 var LEADING_SPACE_REGEX = /^\u0020+/;
@@ -20344,10 +20463,10 @@ var TRAILING_SPACE_REGEX = /\u0020+$/;
 function normalizeAllSegments(paragraph) {
     var context = resetNormalizeSegmentContext();
     paragraph.segments.forEach(function (segment) {
-        normalizeSegment(segment, context);
+        normalizeSegment(paragraph, segment, context);
     });
-    normalizeTextSegments(context.textSegments, context.lastInlineSegment);
-    normalizeLastTextSegment(context.lastTextSegment, context.lastInlineSegment);
+    normalizeTextSegments(paragraph, context.textSegments, context.lastInlineSegment);
+    normalizeLastTextSegment(paragraph, context.lastTextSegment, context.lastInlineSegment);
 }
 exports.normalizeAllSegments = normalizeAllSegments;
 /**
@@ -20355,11 +20474,11 @@ exports.normalizeAllSegments = normalizeAllSegments;
  * @param segment The segment to normalize
  * @param ignoreTrailingSpaces Whether we should ignore the trailing space of the text segment @default false
  */
-function normalizeSingleSegment(segment, ignoreTrailingSpaces) {
+function normalizeSingleSegment(paragraph, segment, ignoreTrailingSpaces) {
     if (ignoreTrailingSpaces === void 0) { ignoreTrailingSpaces = false; }
     var context = resetNormalizeSegmentContext();
     context.ignoreTrailingSpaces = ignoreTrailingSpaces;
-    normalizeSegment(segment, context);
+    normalizeSegment(paragraph, segment, context);
 }
 exports.normalizeSingleSegment = normalizeSingleSegment;
 /**
@@ -20381,11 +20500,11 @@ function resetNormalizeSegmentContext(context) {
 /**
  * @internal Export for test only
  */
-function normalizeSegment(segment, context) {
+function normalizeSegment(paragraph, segment, context) {
     switch (segment.segmentType) {
         case 'Br':
-            normalizeTextSegments(context.textSegments, context.lastInlineSegment);
-            normalizeLastTextSegment(context.lastTextSegment, context.lastInlineSegment);
+            normalizeTextSegments(paragraph, context.textSegments, context.lastInlineSegment);
+            normalizeLastTextSegment(paragraph, context.lastTextSegment, context.lastInlineSegment);
             // Line ends, reset all states
             resetNormalizeSegmentContext(context);
             break;
@@ -20407,11 +20526,15 @@ function normalizeSegment(segment, context) {
             if (!(0, hasSpacesOnly_1.hasSpacesOnly)(segment.text)) {
                 if (first == SPACE) {
                     // 1. Multiple leading space => single &nbsp; or empty (depends on if previous segment ends with space)
-                    segment.text = segment.text.replace(LEADING_SPACE_REGEX, context.ignoreLeadingSpaces ? '' : NONE_BREAK_SPACE);
+                    (0, mutate_1.mutateSegment)(paragraph, segment, function (textSegment) {
+                        textSegment.text = textSegment.text.replace(LEADING_SPACE_REGEX, context.ignoreLeadingSpaces ? '' : NONE_BREAK_SPACE);
+                    });
                 }
                 if (last == SPACE) {
                     // 2. Multiple trailing space => single space
-                    segment.text = segment.text.replace(TRAILING_SPACE_REGEX, context.ignoreTrailingSpaces ? SPACE : NONE_BREAK_SPACE);
+                    (0, mutate_1.mutateSegment)(paragraph, segment, function (textSegment) {
+                        textSegment.text = textSegment.text.replace(TRAILING_SPACE_REGEX, context.ignoreTrailingSpaces ? SPACE : NONE_BREAK_SPACE);
+                    });
                 }
             }
             context.ignoreLeadingSpaces = last == SPACE;
@@ -20419,24 +20542,28 @@ function normalizeSegment(segment, context) {
     }
 }
 exports.normalizeSegment = normalizeSegment;
-function normalizeTextSegments(segments, lastInlineSegment) {
+function normalizeTextSegments(paragraph, segments, lastInlineSegment) {
     segments.forEach(function (segment) {
         // 3. Segment ends with &nbsp; replace it with space if the previous char is not space so that next segment can wrap
         // Only do this for segments that is not the last one since the last space will be removed in step 4
         if (segment != lastInlineSegment) {
-            var text = segment.text;
-            if (text.substr(-1) == NONE_BREAK_SPACE &&
-                text.length > 1 &&
-                text.substr(-2, 1) != SPACE) {
-                segment.text = text.substring(0, text.length - 1) + SPACE;
+            var text_1 = segment.text;
+            if (text_1.substr(-1) == NONE_BREAK_SPACE &&
+                text_1.length > 1 &&
+                text_1.substr(-2, 1) != SPACE) {
+                (0, mutate_1.mutateSegment)(paragraph, segment, function (textSegment) {
+                    textSegment.text = text_1.substring(0, text_1.length - 1) + SPACE;
+                });
             }
         }
     });
 }
-function normalizeLastTextSegment(segment, lastInlineSegment) {
+function normalizeLastTextSegment(paragraph, segment, lastInlineSegment) {
     if (segment && segment == lastInlineSegment && (segment === null || segment === void 0 ? void 0 : segment.text.substr(-1)) == SPACE) {
         // 4. last text segment of the paragraph, remove trailing space
-        segment.text = segment.text.replace(TRAILING_SPACE_REGEX, '');
+        (0, mutate_1.mutateSegment)(paragraph, segment, function (textSegment) {
+            textSegment.text = textSegment.text.replace(TRAILING_SPACE_REGEX, '');
+        });
     }
 }
 
@@ -20454,6 +20581,7 @@ function normalizeLastTextSegment(segment, lastInlineSegment) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.unwrapBlock = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var mutate_1 = __webpack_require__(/*! ./mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var setParagraphNotImplicit_1 = __webpack_require__(/*! ../block/setParagraphNotImplicit */ "./packages/roosterjs-content-model-dom/lib/modelApi/block/setParagraphNotImplicit.ts");
 /**
  * Unwrap a given block group, move its child blocks to be under its parent group
@@ -20462,11 +20590,13 @@ var setParagraphNotImplicit_1 = __webpack_require__(/*! ../block/setParagraphNot
  */
 function unwrapBlock(parent, groupToUnwrap) {
     var _a;
-    var _b;
+    var _b, _c;
     var index = (_b = parent === null || parent === void 0 ? void 0 : parent.blocks.indexOf(groupToUnwrap)) !== null && _b !== void 0 ? _b : -1;
     if (index >= 0) {
         groupToUnwrap.blocks.forEach(setParagraphNotImplicit_1.setParagraphNotImplicit);
-        parent === null || parent === void 0 ? void 0 : (_a = parent.blocks).splice.apply(_a, (0, tslib_1.__spreadArray)([index, 1], (0, tslib_1.__read)(groupToUnwrap.blocks), false));
+        if (parent) {
+            (_c = (0, mutate_1.mutateBlock)(parent)) === null || _c === void 0 ? void 0 : (_a = _c.blocks).splice.apply(_a, (0, tslib_1.__spreadArray)([index, 1], (0, tslib_1.__read)(groupToUnwrap.blocks.map(mutate_1.mutateBlock)), false));
+        }
     }
 }
 exports.unwrapBlock = unwrapBlock;
@@ -20492,7 +20622,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 function createBr(format) {
     return {
         segmentType: 'Br',
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
     };
 }
 exports.createBr = createBr;
@@ -20549,7 +20679,7 @@ function createDivider(tagName, format) {
     return {
         blockType: 'Divider',
         tagName: tagName,
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
     };
 }
 exports.createDivider = createDivider;
@@ -20647,7 +20777,7 @@ function createFormatContainer(tag, format) {
         blockGroupType: 'FormatContainer',
         tagName: tag,
         blocks: [],
-        format: (0, tslib_1.__assign)({}, (format || {})),
+        format: (0, tslib_1.__assign)({}, format),
     };
 }
 exports.createFormatContainer = createFormatContainer;
@@ -20704,7 +20834,7 @@ function createGeneralSegment(element, format) {
         blockType: 'BlockGroup',
         blockGroupType: 'General',
         segmentType: 'General',
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
         blocks: [],
         element: element,
     };
@@ -20734,7 +20864,7 @@ function createImage(src, format) {
     return {
         segmentType: 'Image',
         src: src,
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
         dataset: {},
     };
 }
@@ -20830,7 +20960,7 @@ function createParagraph(isImplicit, blockFormat, segmentFormat, decorator) {
     var result = {
         blockType: 'Paragraph',
         segments: [],
-        format: blockFormat ? (0, tslib_1.__assign)({}, blockFormat) : {},
+        format: (0, tslib_1.__assign)({}, blockFormat),
     };
     if (segmentFormat && Object.keys(segmentFormat).length > 0) {
         result.segmentFormat = (0, tslib_1.__assign)({}, segmentFormat);
@@ -20870,7 +21000,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 function createParagraphDecorator(tagName, format) {
     return {
         tagName: tagName.toLocaleLowerCase(),
-        format: (0, tslib_1.__assign)({}, (format || {})),
+        format: (0, tslib_1.__assign)({}, format),
     };
 }
 exports.createParagraphDecorator = createParagraphDecorator;
@@ -20897,7 +21027,7 @@ function createSelectionMarker(format) {
     return {
         segmentType: 'SelectionMarker',
         isSelected: true,
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
     };
 }
 exports.createSelectionMarker = createSelectionMarker;
@@ -20916,6 +21046,7 @@ exports.createSelectionMarker = createSelectionMarker;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createTable = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var createTableRow_1 = __webpack_require__(/*! ./createTableRow */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createTableRow.ts");
 /**
  * Create a ContentModelTable model
  * @param rowCount Count of rows of this table
@@ -20924,16 +21055,12 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 function createTable(rowCount, format) {
     var rows = [];
     for (var i = 0; i < rowCount; i++) {
-        rows.push({
-            height: 0,
-            format: {},
-            cells: [],
-        });
+        rows.push((0, createTableRow_1.createTableRow)());
     }
     return {
         blockType: 'Table',
         rows: rows,
-        format: (0, tslib_1.__assign)({}, (format || {})),
+        format: (0, tslib_1.__assign)({}, format),
         widths: [],
         dataset: {},
     };
@@ -20967,7 +21094,7 @@ function createTableCell(spanLeftOrColSpan, spanAboveOrRowSpan, isHeader, format
     return {
         blockGroupType: 'TableCell',
         blocks: [],
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
         spanLeft: spanLeft,
         spanAbove: spanAbove,
         isHeader: !!isHeader,
@@ -20977,6 +21104,34 @@ function createTableCell(spanLeftOrColSpan, spanAboveOrRowSpan, isHeader, format
 exports.createTableCell = createTableCell;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createTableRow.ts":
+/*!**************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/modelApi/creators/createTableRow.ts ***!
+  \**************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.createTableRow = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+/**
+ * Create a ContentModelTableRow model
+ * @param format @optional The format of this model
+ */
+function createTableRow(format, height) {
+    if (height === void 0) { height = 0; }
+    return {
+        height: height,
+        format: (0, tslib_1.__assign)({}, format),
+        cells: [],
+    };
+}
+exports.createTableRow = createTableRow;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createText.ts":
@@ -21002,7 +21157,7 @@ function createText(text, format, link, code) {
     var result = {
         segmentType: 'Text',
         text: text,
-        format: format ? (0, tslib_1.__assign)({}, format) : {},
+        format: (0, tslib_1.__assign)({}, format),
     };
     if (link) {
         (0, addDecorators_1.addLink)(result, link);
@@ -21027,10 +21182,11 @@ exports.createText = createText;
 
 var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.applyTableFormat = void 0;
+exports.setFirstColumnFormatBorders = exports.applyTableFormat = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var borderFormatHandler_1 = __webpack_require__(/*! ../../formatHandlers/common/borderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts");
 var borderValues_1 = __webpack_require__(/*! ../../domUtils/style/borderValues */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/borderValues.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var setTableCellBackgroundColor_1 = __webpack_require__(/*! ./setTableCellBackgroundColor */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/setTableCellBackgroundColor.ts");
 var TableBorderFormat_1 = __webpack_require__(/*! ../../constants/TableBorderFormat */ "./packages/roosterjs-content-model-dom/lib/constants/TableBorderFormat.ts");
 var updateTableCellMetadata_1 = __webpack_require__(/*! ../metadata/updateTableCellMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableCellMetadata.ts");
@@ -21056,27 +21212,18 @@ var DEFAULT_FORMAT = {
  * @param keepCellShade @optional When pass true, table cells with customized shade color will not be overwritten. @default false
  */
 function applyTableFormat(table, newFormat, keepCellShade) {
-    var rows = table.rows;
-    (0, updateTableMetadata_1.updateTableMetadata)(table, function (format) {
-        var effectiveMetadata = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, DEFAULT_FORMAT), format), (newFormat || {}));
+    var mutableTable = (0, mutate_1.mutateBlock)(table);
+    var rows = mutableTable.rows;
+    (0, updateTableMetadata_1.updateTableMetadata)(mutableTable, function (format) {
+        var effectiveMetadata = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, DEFAULT_FORMAT), format), newFormat);
         var metaOverrides = updateOverrides(rows, !keepCellShade);
-        delete table.cachedElement;
-        clearCache(rows);
         formatCells(rows, effectiveMetadata, metaOverrides);
-        setFirstColumnFormat(rows, effectiveMetadata, metaOverrides);
+        setFirstColumnFormatBorders(rows, effectiveMetadata);
         setHeaderRowFormat(rows, effectiveMetadata, metaOverrides);
         return effectiveMetadata;
     });
 }
 exports.applyTableFormat = applyTableFormat;
-function clearCache(rows) {
-    rows.forEach(function (row) {
-        row.cells.forEach(function (cell) {
-            delete cell.cachedElement;
-        });
-        delete row.cachedElement;
-    });
-}
 function updateOverrides(rows, removeCellShade) {
     var overrides = {
         bgColorOverrides: [],
@@ -21091,7 +21238,7 @@ function updateOverrides(rows, removeCellShade) {
         overrides.vAlignOverrides.push(vAlignOverrides);
         overrides.borderOverrides.push(borderOverrides);
         row.cells.forEach(function (cell) {
-            (0, updateTableCellMetadata_1.updateTableCellMetadata)(cell, function (metadata) {
+            (0, updateTableCellMetadata_1.updateTableCellMetadata)((0, mutate_1.mutateBlock)(cell), function (metadata) {
                 if (metadata && removeCellShade) {
                     bgColorOverrides.push(false);
                     delete metadata.bgColorOverride;
@@ -21178,10 +21325,11 @@ var BorderFormatters = (_a = {},
  * Apply vertical align, borders, and background color to all cells in the table
  */
 function formatCells(rows, format, metaOverrides) {
-    var hasBandedRows = format.hasBandedRows, hasBandedColumns = format.hasBandedColumns, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven;
+    var hasBandedRows = format.hasBandedRows, hasBandedColumns = format.hasBandedColumns, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven, hasFirstColumn = format.hasFirstColumn;
     rows.forEach(function (row, rowIndex) {
-        row.cells.forEach(function (cell, colIndex) {
+        row.cells.forEach(function (readonlyCell, colIndex) {
             var _a;
+            var cell = (0, mutate_1.mutateBlock)(readonlyCell);
             // Format Borders
             if (!metaOverrides.borderOverrides[rowIndex][colIndex] &&
                 typeof format.tableBorderFormat == 'number') {
@@ -21208,46 +21356,76 @@ function formatCells(rows, format, metaOverrides) {
             }
             // Format Background Color
             if (!metaOverrides.bgColorOverrides[rowIndex][colIndex]) {
-                var color = hasBandedRows || hasBandedColumns
-                    ? (hasBandedColumns && colIndex % 2 != 0) ||
-                        (hasBandedRows && rowIndex % 2 != 0)
-                        ? bgColorOdd
-                        : bgColorEven
-                    : bgColorEven; /* bgColorEven is the default color */
+                var color = void 0;
+                if (hasFirstColumn && colIndex == 0 && rowIndex > 0) {
+                    color = null;
+                }
+                else {
+                    color =
+                        hasBandedRows || hasBandedColumns
+                            ? (hasBandedColumns && colIndex % 2 != 0) ||
+                                (hasBandedRows && rowIndex % 2 != 0)
+                                ? bgColorOdd
+                                : bgColorEven
+                            : bgColorEven; /* bgColorEven is the default color */
+                }
                 (0, setTableCellBackgroundColor_1.setTableCellBackgroundColor)(cell, color, false /*isColorOverride*/, true /*applyToSegments*/);
             }
             // Format Vertical Align
             if (format.verticalAlign && !metaOverrides.vAlignOverrides[rowIndex][colIndex]) {
                 cell.format.verticalAlign = format.verticalAlign;
             }
+            // Format Header
+            cell.isHeader = false;
         });
     });
 }
-function setFirstColumnFormat(rows, format, metaOverrides) {
+/**
+ * Set the first column format borders for the table as well as header property
+ * @param rows The rows of the table
+ * @param format The table metadata format
+ */
+function setFirstColumnFormatBorders(rows, format) {
+    // Exit early hasFirstColumn is not set
+    if (!format.hasFirstColumn) {
+        return;
+    }
     rows.forEach(function (row, rowIndex) {
-        row.cells.forEach(function (cell, cellIndex) {
-            if (format.hasFirstColumn && cellIndex === 0) {
+        row.cells.forEach(function (readonlyCell, cellIndex) {
+            var cell = (0, mutate_1.mutateBlock)(readonlyCell);
+            if (cellIndex === 0) {
                 cell.isHeader = true;
-                if (rowIndex !== 0 && !metaOverrides.bgColorOverrides[rowIndex][cellIndex]) {
-                    setBorderColor(cell.format, 'borderTop');
-                    (0, setTableCellBackgroundColor_1.setTableCellBackgroundColor)(cell, null /*color*/, false /*isColorOverride*/, true /*applyToSegments*/);
-                }
-                if (rowIndex !== rows.length - 1 && rowIndex !== 0) {
-                    setBorderColor(cell.format, 'borderBottom');
+                switch (rowIndex) {
+                    case 0:
+                        cell.isHeader = !!format.hasHeaderRow;
+                        break;
+                    case rows.length - 1:
+                        setBorderColor(cell.format, 'borderTop');
+                        break;
+                    case 1:
+                        setBorderColor(cell.format, 'borderBottom');
+                        break;
+                    default:
+                        setBorderColor(cell.format, 'borderTop');
+                        setBorderColor(cell.format, 'borderBottom');
+                        break;
                 }
             }
-            else {
-                cell.isHeader = false;
-            }
         });
     });
 }
+exports.setFirstColumnFormatBorders = setFirstColumnFormatBorders;
 function setHeaderRowFormat(rows, format, metaOverrides) {
     var _a;
+    // Exit early if hasHeaderRow is not set
+    if (!format.hasHeaderRow) {
+        return;
+    }
     var rowIndex = 0;
-    (_a = rows[rowIndex]) === null || _a === void 0 ? void 0 : _a.cells.forEach(function (cell, cellIndex) {
-        cell.isHeader = format.hasHeaderRow;
-        if (format.hasHeaderRow && format.headerRowColor) {
+    (_a = rows[rowIndex]) === null || _a === void 0 ? void 0 : _a.cells.forEach(function (readonlyCell, cellIndex) {
+        var cell = (0, mutate_1.mutateBlock)(readonlyCell);
+        cell.isHeader = true;
+        if (format.headerRowColor) {
             if (!metaOverrides.bgColorOverrides[rowIndex][cellIndex]) {
                 (0, setTableCellBackgroundColor_1.setTableCellBackgroundColor)(cell, format.headerRowColor, false /*isColorOverride*/, true /*applyToSegments*/);
             }
@@ -21257,6 +21435,11 @@ function setHeaderRowFormat(rows, format, metaOverrides) {
         }
     });
 }
+/**
+ * @param format The cell format to set the border color
+ * @param key The border key to set the color
+ * @param value The color to set. If not given, it removes the color and sets the style to transparent
+ */
 function setBorderColor(format, key, value) {
     var border = (0, borderValues_1.extractBorderValues)(format[key]);
     border.color = value || '';
@@ -21426,10 +21609,11 @@ function cloneFormatContainer(container, options) {
     return newContainer;
 }
 function cloneListItem(item, options) {
-    var formatHolder = item.formatHolder, levels = item.levels;
+    var formatHolder = item.formatHolder, levels = item.levels, cachedElement = item.cachedElement;
     return Object.assign({
         formatHolder: cloneSelectionMarker(formatHolder),
         levels: levels.map(cloneListLevel),
+        cachedElement: handleCachedElement(cachedElement, 'cache', options),
     }, cloneBlockBase(item), cloneBlockGroupBase(item, options));
 }
 function cloneListLevel(level) {
@@ -21571,6 +21755,7 @@ var deleteBlock_1 = __webpack_require__(/*! ./deleteBlock */ "./packages/rooster
 var deleteSegment_1 = __webpack_require__(/*! ./deleteSegment */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/deleteSegment.ts");
 var getSegmentTextFormat_1 = __webpack_require__(/*! ./getSegmentTextFormat */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/getSegmentTextFormat.ts");
 var iterateSelections_1 = __webpack_require__(/*! ../selection/iterateSelections */ "./packages/roosterjs-content-model-dom/lib/modelApi/selection/iterateSelections.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var setParagraphNotImplicit_1 = __webpack_require__(/*! ../block/setParagraphNotImplicit */ "./packages/roosterjs-content-model-dom/lib/modelApi/block/setParagraphNotImplicit.ts");
 var DeleteSelectionIteratingOptions = {
     contentUnderSelectedTableCell: 'ignoreForTableOrCell',
@@ -21588,19 +21773,20 @@ function deleteExpandedSelection(model, formatContext) {
         insertPoint: null,
         formatContext: formatContext,
     };
-    (0, iterateSelections_1.iterateSelections)(model, function (path, tableContext, block, segments) {
+    (0, iterateSelections_1.iterateSelections)(model, function (path, tableContext, readonlyBlock, readonlySegments) {
         // Set paragraph, format and index for default position where we will put cursor to.
         // Later we can overwrite these info when process the selections
         var paragraph = (0, createParagraph_1.createParagraph)(true /*implicit*/, undefined /*blockFormat*/, model.format);
         var markerFormat = model.format;
         var insertMarkerIndex = 0;
-        if (segments) {
+        if (readonlySegments && (readonlyBlock === null || readonlyBlock === void 0 ? void 0 : readonlyBlock.blockType) == 'Paragraph') {
+            var _a = (0, tslib_1.__read)((0, mutate_1.mutateSegments)(readonlyBlock, readonlySegments), 3), block_1 = _a[0], segments = _a[1], indexes = _a[2];
             // Delete segments inside a paragraph
-            if (segments[0] && (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph') {
+            if (segments[0]) {
                 // Now that we have found a paragraph with selections, we can overwrite the default paragraph with this one
                 // so we can put cursor here after delete
-                paragraph = block;
-                insertMarkerIndex = paragraph.segments.indexOf(segments[0]);
+                paragraph = block_1;
+                insertMarkerIndex = indexes[0];
                 markerFormat = (0, getSegmentTextFormat_1.getSegmentTextFormat)(segments[0]);
                 context.lastParagraph = paragraph;
                 context.lastTableContext = tableContext;
@@ -21610,9 +21796,9 @@ function deleteExpandedSelection(model, formatContext) {
                         segment.segmentType == 'SelectionMarker') {
                         // First time we hit a selection and it is a selection marker, just mark it and not need to delete
                         // because this is possible a collapsed selection, then it will be handled later
-                        context.insertPoint = createInsertPoint(segment, block, path, tableContext);
+                        context.insertPoint = createInsertPoint(segment, block_1, path, tableContext);
                     }
-                    else if ((0, deleteSegment_1.deleteSegment)(block, segment, context.formatContext)) {
+                    else if ((0, deleteSegment_1.deleteSegment)(block_1, segment, context.formatContext)) {
                         context.deleteResult = 'range';
                     }
                 });
@@ -21620,27 +21806,26 @@ function deleteExpandedSelection(model, formatContext) {
                 // Need to make it "not implicit" so that it will always have a container element, so that when we do normalization
                 // of this paragraph, a BR can be added if need
                 if (context.deleteResult == 'range') {
-                    (0, setParagraphNotImplicit_1.setParagraphNotImplicit)(block);
+                    (0, setParagraphNotImplicit_1.setParagraphNotImplicit)(block_1);
                 }
             }
         }
-        else if (block) {
+        else if (readonlyBlock) {
             // Delete a whole block (divider, table, ...)
-            var blocks = path[0].blocks;
-            if ((0, deleteBlock_1.deleteBlock)(blocks, block, paragraph, context.formatContext)) {
+            var blocks = (0, mutate_1.mutateBlock)(path[0]).blocks;
+            if ((0, deleteBlock_1.deleteBlock)(blocks, readonlyBlock, paragraph, context.formatContext)) {
                 context.deleteResult = 'range';
             }
         }
         else if (tableContext) {
             // Delete a whole table cell
             var table = tableContext.table, colIndex = tableContext.colIndex, rowIndex = tableContext.rowIndex;
-            var row = table.rows[rowIndex];
-            var cell = row.cells[colIndex];
+            var mutableTable = (0, mutate_1.mutateBlock)(table);
+            var row = mutableTable.rows[rowIndex];
+            var cell = (0, mutate_1.mutateBlock)(row.cells[colIndex]);
             path = (0, tslib_1.__spreadArray)([cell], (0, tslib_1.__read)(path), false);
             paragraph.segments.push((0, createBr_1.createBr)(model.format));
             cell.blocks = [paragraph];
-            delete cell.cachedElement;
-            delete row.cachedElement;
             context.deleteResult = 'range';
         }
         if (!context.insertPoint) {
@@ -21676,28 +21861,30 @@ function createInsertPoint(marker, paragraph, path, tableContext) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.deleteSegment = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var deleteSingleChar_1 = __webpack_require__(/*! ./deleteSingleChar */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/deleteSingleChar.ts");
 var isWhiteSpacePreserved_1 = __webpack_require__(/*! ../../domUtils/isWhiteSpacePreserved */ "./packages/roosterjs-content-model-dom/lib/domUtils/isWhiteSpacePreserved.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var normalizeSegment_1 = __webpack_require__(/*! ../common/normalizeSegment */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegment.ts");
 var stringUtil_1 = __webpack_require__(/*! ../../domUtils/stringUtil */ "./packages/roosterjs-content-model-dom/lib/domUtils/stringUtil.ts");
 /**
  * Delete a content model segment from current selection
- * @param paragraph Parent paragraph of the segment to delete
- * @param segmentToDelete The segment to delete
+ * @param readonlyParagraph Parent paragraph of the segment to delete
+ * @param readonlySegmentToDelete The segment to delete
  * @param context @optional Context object provided by formatContentModel API
  * @param direction @optional Whether this is deleting forward or backward. This is only used for deleting entity.
  * If not specified, only selected entity will be deleted
  */
-function deleteSegment(paragraph, segmentToDelete, context, direction) {
+function deleteSegment(readonlyParagraph, readonlySegmentToDelete, context, direction) {
+    var _a = (0, tslib_1.__read)((0, mutate_1.mutateSegment)(readonlyParagraph, readonlySegmentToDelete), 3), paragraph = _a[0], segmentToDelete = _a[1], index = _a[2];
     var segments = paragraph.segments;
-    var index = segments.indexOf(segmentToDelete);
     var preserveWhiteSpace = (0, isWhiteSpacePreserved_1.isWhiteSpacePreserved)(paragraph.format.whiteSpace);
     var isForward = direction == 'forward';
     var isBackward = direction == 'backward';
     if (!preserveWhiteSpace) {
-        normalizePreviousSegment(segments, index);
+        normalizePreviousSegment(paragraph, segments, index);
     }
-    switch (segmentToDelete.segmentType) {
+    switch (segmentToDelete === null || segmentToDelete === void 0 ? void 0 : segmentToDelete.segmentType) {
         case 'Br':
         case 'Image':
         case 'SelectionMarker':
@@ -21745,10 +21932,12 @@ function deleteSegment(paragraph, segmentToDelete, context, direction) {
             else {
                 return false;
             }
+        default:
+            return false;
     }
 }
 exports.deleteSegment = deleteSegment;
-function normalizePreviousSegment(segments, currentIndex) {
+function normalizePreviousSegment(paragraph, segments, currentIndex) {
     var _a;
     var index = currentIndex - 1;
     while (((_a = segments[index]) === null || _a === void 0 ? void 0 : _a.segmentType) == 'SelectionMarker') {
@@ -21756,7 +21945,7 @@ function normalizePreviousSegment(segments, currentIndex) {
     }
     var segment = segments[index];
     if (segment) {
-        (0, normalizeSegment_1.normalizeSingleSegment)(segment);
+        (0, normalizeSegment_1.normalizeSingleSegment)(paragraph, segment);
     }
 }
 
@@ -21775,6 +21964,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.deleteSelection = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var deleteExpandedSelection_1 = __webpack_require__(/*! ./deleteExpandedSelection */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/deleteExpandedSelection.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 /**
  * Delete selected content from Content Model
  * @param model The model to delete selected content from
@@ -21807,8 +21997,9 @@ function mergeParagraphAfterDelete(context) {
         lastParagraph &&
         lastParagraph != insertPoint.paragraph &&
         lastTableContext == insertPoint.tableContext) {
-        (_a = insertPoint.paragraph.segments).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(lastParagraph.segments), false));
-        lastParagraph.segments = [];
+        var mutableLastParagraph = (0, mutate_1.mutateBlock)(lastParagraph);
+        (_a = (0, mutate_1.mutateBlock)(insertPoint.paragraph).segments).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(mutableLastParagraph.segments), false));
+        mutableLastParagraph.segments = [];
     }
 }
 
@@ -21995,9 +22186,25 @@ var createTableCell_1 = __webpack_require__(/*! ../creators/createTableCell */ "
 var deleteSelection_1 = __webpack_require__(/*! ./deleteSelection */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/deleteSelection.ts");
 var getClosestAncestorBlockGroupIndex_1 = __webpack_require__(/*! ./getClosestAncestorBlockGroupIndex */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/getClosestAncestorBlockGroupIndex.ts");
 var getObjectKeys_1 = __webpack_require__(/*! ../..//domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var normalizeContentModel_1 = __webpack_require__(/*! ../common/normalizeContentModel */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeContentModel.ts");
 var normalizeTable_1 = __webpack_require__(/*! ./normalizeTable */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts");
 var HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+// An object to provide keys of required properties of segment format, do NOT use any of its values
+var RequiredEmptySegmentFormat = {
+    backgroundColor: null,
+    fontFamily: null,
+    fontSize: null,
+    fontWeight: null,
+    italic: null,
+    letterSpacing: null,
+    lineHeight: null,
+    strikethrough: null,
+    superOrSubScriptSequence: null,
+    textColor: null,
+    underline: null,
+};
+var KeysOfSegmentFormat = (0, getObjectKeys_1.getObjectKeys)(RequiredEmptySegmentFormat);
 /**
  * Merge source model into target mode
  * @param target Target Content Model that will merge content into
@@ -22103,7 +22310,8 @@ function mergeTable(markerPosition, newTable, source) {
     var _a, _b;
     var tableContext = markerPosition.tableContext, marker = markerPosition.marker;
     if (tableContext && source.blocks.length == 1 && source.blocks[0] == newTable) {
-        var table = tableContext.table, colIndex = tableContext.colIndex, rowIndex = tableContext.rowIndex;
+        var readonlyTable = tableContext.table, colIndex = tableContext.colIndex, rowIndex = tableContext.rowIndex;
+        var table = (0, mutate_1.mutateBlock)(readonlyTable);
         for (var i = 0; i < newTable.rows.length; i++) {
             for (var j = 0; j < newTable.rows[i].cells.length; j++) {
                 var newCell = newTable.rows[i].cells[j];
@@ -22155,7 +22363,7 @@ function mergeList(markerPosition, newList) {
     var listParent = path[listItemIndex + 1]; // It is ok here when index is -1, that means there is no list and we just insert a new paragraph and use path[0] as its parent
     var blockIndex = listParent.blocks.indexOf(listItem || paragraph);
     if (blockIndex >= 0) {
-        listParent.blocks.splice(blockIndex, 0, newList);
+        (0, mutate_1.mutateBlock)(listParent).blocks.splice(blockIndex, 0, newList);
     }
     if (listItem) {
         listItem === null || listItem === void 0 ? void 0 : listItem.levels.forEach(function (level, i) {
@@ -22172,7 +22380,7 @@ function splitParagraph(markerPosition, newParaFormat) {
         newParagraph.segments = paragraph.segments.splice(segmentIndex);
     }
     if (paraIndex >= 0) {
-        path[0].blocks.splice(paraIndex + 1, 0, newParagraph);
+        (0, mutate_1.mutateBlock)(path[0]).blocks.splice(paraIndex + 1, 0, newParagraph);
     }
     var listItemIndex = (0, getClosestAncestorBlockGroupIndex_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem'], ['FormatContainer', 'TableCell']);
     var listItem = path[listItemIndex];
@@ -22185,7 +22393,7 @@ function splitParagraph(markerPosition, newParaFormat) {
                 newListItem.blocks = listItem.blocks.splice(paraIndex + 1);
             }
             if (blockIndex >= 0) {
-                listParent.blocks.splice(blockIndex + 1, 0, newListItem);
+                (0, mutate_1.mutateBlock)(listParent).blocks.splice(blockIndex + 1, 0, newListItem);
             }
             path[listItemIndex] = newListItem;
         }
@@ -22199,7 +22407,7 @@ function insertBlock(markerPosition, block) {
     var newPara = splitParagraph(markerPosition, newParaFormat);
     var blockIndex = path[0].blocks.indexOf(newPara);
     if (blockIndex >= 0) {
-        path[0].blocks.splice(blockIndex, 0, block);
+        (0, mutate_1.mutateBlock)(path[0]).blocks.splice(blockIndex, 0, block);
     }
 }
 function applyDefaultFormat(group, format, applyDefaultFormatOption) {
@@ -22209,7 +22417,7 @@ function applyDefaultFormat(group, format, applyDefaultFormatOption) {
         switch (block.blockType) {
             case 'BlockGroup':
                 if (block.blockGroupType == 'ListItem') {
-                    block.formatHolder.format = mergeSegmentFormat(applyDefaultFormatOption, format, block.formatHolder.format);
+                    (0, mutate_1.mutateBlock)(block).formatHolder.format = mergeSegmentFormat(applyDefaultFormatOption, format, block.formatHolder.format);
                 }
                 applyDefaultFormat(block, format, applyDefaultFormatOption);
                 break;
@@ -22222,14 +22430,18 @@ function applyDefaultFormat(group, format, applyDefaultFormatOption) {
                 break;
             case 'Paragraph':
                 var paragraphFormat_1 = ((_a = block.decorator) === null || _a === void 0 ? void 0 : _a.format) || {};
-                block.segments.forEach(function (segment) {
+                var paragraph = (0, mutate_1.mutateBlock)(block);
+                paragraph.segments.forEach(function (segment) {
                     if (segment.segmentType == 'General') {
                         applyDefaultFormat(segment, format, applyDefaultFormatOption);
                     }
                     segment.format = mergeSegmentFormat(applyDefaultFormatOption, format, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, paragraphFormat_1), segment.format));
+                    if (segment.link) {
+                        segment.link.format = mergeSegmentFormat(applyDefaultFormatOption, getSegmentFormatInLinkFormat(format), segment.link.format);
+                    }
                 });
                 if (applyDefaultFormatOption === 'keepSourceEmphasisFormat') {
-                    delete block.decorator;
+                    delete paragraph.decorator;
                 }
                 break;
         }
@@ -22237,12 +22449,29 @@ function applyDefaultFormat(group, format, applyDefaultFormatOption) {
 }
 function mergeBlockFormat(applyDefaultFormatOption, block) {
     if (applyDefaultFormatOption == 'keepSourceEmphasisFormat' && block.format.backgroundColor) {
-        delete block.format.backgroundColor;
+        delete (0, mutate_1.mutateBlock)(block).format.backgroundColor;
     }
 }
-function mergeSegmentFormat(applyDefaultFormatOption, targetformat, sourceFormat) {
+/**
+ * Hyperlink format type definition only contains textColor, backgroundColor and underline.
+ * So create a minimum object with the styles supported in Hyperlink to be used in merge.
+ */
+function getSegmentFormatInLinkFormat(targetFormat) {
+    var result = {};
+    if (targetFormat.textColor) {
+        result.textColor = targetFormat.textColor;
+    }
+    if (targetFormat.backgroundColor) {
+        result.backgroundColor = targetFormat.backgroundColor;
+    }
+    if (targetFormat.underline) {
+        result.underline = targetFormat.underline;
+    }
+    return result;
+}
+function mergeSegmentFormat(applyDefaultFormatOption, targetFormat, sourceFormat) {
     return applyDefaultFormatOption == 'mergeAll'
-        ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetformat), sourceFormat) : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetformat), getSemanticFormat(sourceFormat));
+        ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetFormat), sourceFormat) : (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, getFormatWithoutSegmentFormat(sourceFormat)), targetFormat), getSemanticFormat(sourceFormat));
 }
 function getSemanticFormat(segmentFormat) {
     var result = {};
@@ -22258,6 +22487,15 @@ function getSemanticFormat(segmentFormat) {
     }
     return result;
 }
+/**
+ * Segment format can also contain other type of metadata, for example in Images/Hyperlink,
+ * we want to preserve these properties when merging format
+ */
+function getFormatWithoutSegmentFormat(sourceFormat) {
+    var resultFormat = (0, tslib_1.__assign)({}, sourceFormat);
+    KeysOfSegmentFormat.forEach(function (key) { return delete resultFormat[key]; });
+    return resultFormat;
+}
 
 
 /***/ }),
@@ -22277,6 +22515,7 @@ var addBlock_1 = __webpack_require__(/*! ../common/addBlock */ "./packages/roost
 var addSegment_1 = __webpack_require__(/*! ../common/addSegment */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/addSegment.ts");
 var createBr_1 = __webpack_require__(/*! ../creators/createBr */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createBr.ts");
 var createParagraph_1 = __webpack_require__(/*! ../creators/createParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createParagraph.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 /**
  * Minimum width for a table cell
  */
@@ -22285,16 +22524,17 @@ var MIN_HEIGHT = 22;
 /**
  * Normalize a Content Model table, make sure:
  * 1. Fist cells are not spanned
- * 2. Inner cells are not header
+ * 2. Only first column and row can have headers
  * 3. All cells have content and width
  * 4. Table and table row have correct width/height
  * 5. Spanned cell has no child blocks
  * 6. default format is correctly applied
- * @param table The table to normalize
+ * @param readonlyTable The table to normalize
  * @param defaultSegmentFormat @optional Default segment format to apply to cell
  */
-function normalizeTable(table, defaultSegmentFormat) {
+function normalizeTable(readonlyTable, defaultSegmentFormat) {
     var _a;
+    var table = (0, mutate_1.mutateBlock)(readonlyTable);
     // Always collapse border and use border box for table in roosterjs to make layout simpler
     var format = table.format;
     if (!format.borderCollapse || !format.useBorderBox) {
@@ -22305,7 +22545,8 @@ function normalizeTable(table, defaultSegmentFormat) {
     // Make sure all inner cells are not header
     // Make sure all cells have content and width
     table.rows.forEach(function (row, rowIndex) {
-        row.cells.forEach(function (cell, colIndex) {
+        row.cells.forEach(function (readonlyCell, colIndex) {
+            var cell = (0, mutate_1.mutateBlock)(readonlyCell);
             if (cell.blocks.length == 0) {
                 var format_1 = cell.format.textColor
                     ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultSegmentFormat), { textColor: cell.format.textColor }) : defaultSegmentFormat;
@@ -22315,7 +22556,7 @@ function normalizeTable(table, defaultSegmentFormat) {
             if (rowIndex == 0) {
                 cell.spanAbove = false;
             }
-            else if (rowIndex > 0 && cell.isHeader) {
+            else if (rowIndex > 0 && colIndex > 0 && cell.isHeader) {
                 cell.isHeader = false;
                 delete cell.cachedElement;
             }
@@ -22391,8 +22632,8 @@ function tryMoveBlocks(targetCell, sourceCell) {
     var _a;
     var onlyHasEmptyOrBr = sourceCell.blocks.every(function (block) { return block.blockType == 'Paragraph' && hasOnlyBrSegment(block.segments); });
     if (!onlyHasEmptyOrBr) {
-        (_a = targetCell.blocks).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sourceCell.blocks), false));
-        sourceCell.blocks = [];
+        (_a = (0, mutate_1.mutateBlock)(targetCell).blocks).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sourceCell.blocks), false));
+        (0, mutate_1.mutateBlock)(sourceCell).blocks = [];
     }
 }
 function hasOnlyBrSegment(segments) {
@@ -22413,12 +22654,13 @@ function hasOnlyBrSegment(segments) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.retrieveModelFormatState = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var borderValues_1 = __webpack_require__(/*! ../../domUtils/style/borderValues */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/borderValues.ts");
 var getClosestAncestorBlockGroupIndex_1 = __webpack_require__(/*! ./getClosestAncestorBlockGroupIndex */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/getClosestAncestorBlockGroupIndex.ts");
+var updateTableMetadata_1 = __webpack_require__(/*! ../metadata/updateTableMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableMetadata.ts");
 var isBold_1 = __webpack_require__(/*! ../../domUtils/style/isBold */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/isBold.ts");
 var iterateSelections_1 = __webpack_require__(/*! ../selection/iterateSelections */ "./packages/roosterjs-content-model-dom/lib/modelApi/selection/iterateSelections.ts");
 var parseValueWithUnit_1 = __webpack_require__(/*! ../../formatHandlers/utils/parseValueWithUnit */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/parseValueWithUnit.ts");
-var updateTableMetadata_1 = __webpack_require__(/*! ../metadata/updateTableMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableMetadata.ts");
 /**
  * Retrieve format state from the given Content Model
  * @param model The Content Model to retrieve format state from
@@ -22450,10 +22692,10 @@ function retrieveModelFormatState(model, pendingFormat, formatState) {
             segments === null || segments === void 0 ? void 0 : segments.forEach(function (segment) {
                 var _a, _b, _c;
                 if (isFirstSegment || segment.segmentType != 'SelectionMarker') {
-                    var modelFormat = Object.assign({}, model.format);
-                    modelFormat === null || modelFormat === void 0 ? true : delete modelFormat.italic;
-                    modelFormat === null || modelFormat === void 0 ? true : delete modelFormat.underline;
-                    modelFormat === null || modelFormat === void 0 ? true : delete modelFormat.fontWeight;
+                    var modelFormat = (0, tslib_1.__assign)({}, model.format);
+                    delete modelFormat.italic;
+                    delete modelFormat.underline;
+                    delete modelFormat.fontWeight;
                     retrieveSegmentFormat(formatState, isFirst, Object.assign({}, modelFormat, block.format, (_a = block.decorator) === null || _a === void 0 ? void 0 : _a.format, segment.format, (_b = segment.code) === null || _b === void 0 ? void 0 : _b.format, (_c = segment.link) === null || _c === void 0 ? void 0 : _c.format, pendingFormat));
                     mergeValue(formatState, 'isCodeInline', !!(segment === null || segment === void 0 ? void 0 : segment.code), isFirst);
                 }
@@ -22544,7 +22786,7 @@ function retrieveStructureFormat(result, path, isFirst) {
         ((_b = path[containerIndex]) === null || _b === void 0 ? void 0 : _b.tagName) == 'blockquote', isFirst);
 }
 function retrieveTableFormat(tableContext, result) {
-    var tableFormat = (0, updateTableMetadata_1.updateTableMetadata)(tableContext.table);
+    var tableFormat = (0, updateTableMetadata_1.getTableMetadata)(tableContext.table);
     result.isInTable = true;
     result.tableHasHeader = tableContext.table.rows.some(function (row) {
         return row.cells.some(function (cell) { return cell.isHeader; });
@@ -22602,6 +22844,7 @@ function px2Pt(px) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setTableCellBackgroundColor = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var color_1 = __webpack_require__(/*! ../../formatHandlers/utils/color */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts");
 var updateTableCellMetadata_1 = __webpack_require__(/*! ../metadata/updateTableCellMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateTableCellMetadata.ts");
 // Using the HSL (hue, saturation and lightness) representation for RGB color values.
@@ -22653,9 +22896,10 @@ function setTableCellBackgroundColor(cell, color, isColorOverride, applyToSegmen
 }
 exports.setTableCellBackgroundColor = setTableCellBackgroundColor;
 function removeAdaptiveCellColor(cell) {
-    cell.blocks.forEach(function (block) {
+    cell.blocks.forEach(function (readonlyBlock) {
         var _a, _b;
-        if (block.blockType == 'Paragraph') {
+        if (readonlyBlock.blockType == 'Paragraph') {
+            var block = (0, mutate_1.mutateBlock)(readonlyBlock);
             if (((_a = block.segmentFormat) === null || _a === void 0 ? void 0 : _a.textColor) &&
                 shouldRemoveColor((_b = block.segmentFormat) === null || _b === void 0 ? void 0 : _b.textColor, cell.format.backgroundColor || '')) {
                 delete block.segmentFormat.textColor;
@@ -22671,9 +22915,10 @@ function removeAdaptiveCellColor(cell) {
 }
 function setAdaptiveCellColor(cell) {
     if (cell.format.textColor) {
-        cell.blocks.forEach(function (block) {
+        cell.blocks.forEach(function (readonlyBlock) {
             var _a;
-            if (block.blockType == 'Paragraph') {
+            if (readonlyBlock.blockType == 'Paragraph') {
+                var block = (0, mutate_1.mutateBlock)(readonlyBlock);
                 if (!((_a = block.segmentFormat) === null || _a === void 0 ? void 0 : _a.textColor)) {
                     block.segmentFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, block.segmentFormat), { textColor: cell.format.textColor });
                 }
@@ -23005,7 +23250,7 @@ exports.createObjectDefinition = createObjectDefinition;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.updateImageMetadata = void 0;
+exports.updateImageMetadata = exports.getImageMetadata = void 0;
 var updateMetadata_1 = __webpack_require__(/*! ./updateMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateMetadata.ts");
 var definitionCreators_1 = __webpack_require__(/*! ./definitionCreators */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/definitionCreators.ts");
 var NumberDefinition = (0, definitionCreators_1.createNumberDefinition)();
@@ -23021,6 +23266,14 @@ var ImageMetadataFormatDefinition = (0, definitionCreators_1.createObjectDefinit
     naturalHeight: NumberDefinition,
     naturalWidth: NumberDefinition,
 });
+/**
+ * Get image metadata
+ * @param image The image Content Model
+ */
+function getImageMetadata(image) {
+    return (0, updateMetadata_1.getMetadata)(image, ImageMetadataFormatDefinition);
+}
+exports.getImageMetadata = getImageMetadata;
 /**
  * Update image metadata with a callback
  * @param image The image Content Model
@@ -23043,10 +23296,10 @@ exports.updateImageMetadata = updateImageMetadata;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.updateListMetadata = exports.ListMetadataDefinition = void 0;
+exports.updateListMetadata = exports.getListMetadata = exports.ListMetadataDefinition = void 0;
 var BulletListType_1 = __webpack_require__(/*! ../../constants/BulletListType */ "./packages/roosterjs-content-model-dom/lib/constants/BulletListType.ts");
-var NumberingListType_1 = __webpack_require__(/*! ../../constants/NumberingListType */ "./packages/roosterjs-content-model-dom/lib/constants/NumberingListType.ts");
 var updateMetadata_1 = __webpack_require__(/*! ./updateMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateMetadata.ts");
+var NumberingListType_1 = __webpack_require__(/*! ../../constants/NumberingListType */ "./packages/roosterjs-content-model-dom/lib/constants/NumberingListType.ts");
 var definitionCreators_1 = __webpack_require__(/*! ./definitionCreators */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/definitionCreators.ts");
 /**
  * Metadata definition for List
@@ -23056,6 +23309,14 @@ exports.ListMetadataDefinition = (0, definitionCreators_1.createObjectDefinition
     unorderedStyleType: (0, definitionCreators_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, BulletListType_1.BulletListType.Min, BulletListType_1.BulletListType.Max),
     applyListStyleFromLevel: (0, definitionCreators_1.createBooleanDefinition)(true /*isOptional*/),
 }, true /** isOptional */, true /** allowNull */);
+/**
+ * Get list metadata
+ * @param list The list Content Model (metadata holder)
+ */
+function getListMetadata(list) {
+    return (0, updateMetadata_1.getMetadata)(list, exports.ListMetadataDefinition);
+}
+exports.getListMetadata = getListMetadata;
 /**
  * Update list metadata with a callback
  * @param list The list Content Model (metadata holder)
@@ -23078,26 +23339,34 @@ exports.updateListMetadata = updateListMetadata;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.hasMetadata = exports.updateMetadata = void 0;
+exports.hasMetadata = exports.updateMetadata = exports.getMetadata = void 0;
 var validate_1 = __webpack_require__(/*! ./validate */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/validate.ts");
 var EditingInfoDatasetName = 'editingInfo';
 /**
- * Update metadata of the given model
- * @param model The model to update metadata to
- * @param callback A callback function to update metadata
- * @param definition @optional Metadata definition used for verify the metadata object
- * @returns The metadata object if any, or null
+ * Retrieve metadata from the given model.
+ * @param model The Content Model to retrieve metadata from
+ * @param definition Definition of this metadata type, used for validate the metadata object
+ * @returns Metadata of the model, or null if it does not contain a valid metadata
  */
-function updateMetadata(model, callback, definition) {
+function getMetadata(model, definition) {
     var metadataString = model.dataset[EditingInfoDatasetName];
     var obj = null;
     try {
         obj = JSON.parse(metadataString);
     }
     catch (_a) { }
-    if (definition && !(0, validate_1.validate)(obj, definition)) {
-        obj = null;
-    }
+    return !definition || (0, validate_1.validate)(obj, definition) ? obj : null;
+}
+exports.getMetadata = getMetadata;
+/**
+ * Update metadata of the given model
+ * @param model The model to update metadata to
+ * @param callback A callback function to update metadata
+ * @param definition @optional Metadata definition used for verify the metadata object
+ * @returns The metadata object if any, or null
+ */
+function updateMetadata(model, callback, definition) {
+    var obj = getMetadata(model, definition);
     if (callback) {
         obj = callback(obj);
         if (!obj) {
@@ -23131,7 +23400,7 @@ exports.hasMetadata = hasMetadata;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.updateTableCellMetadata = void 0;
+exports.updateTableCellMetadata = exports.getTableCellMetadata = void 0;
 var definitionCreators_1 = __webpack_require__(/*! ./definitionCreators */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/definitionCreators.ts");
 var updateMetadata_1 = __webpack_require__(/*! ./updateMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateMetadata.ts");
 var TableCellMetadataFormatDefinition = (0, definitionCreators_1.createObjectDefinition)({
@@ -23139,6 +23408,14 @@ var TableCellMetadataFormatDefinition = (0, definitionCreators_1.createObjectDef
     vAlignOverride: (0, definitionCreators_1.createBooleanDefinition)(true /** isOptional */),
     borderOverride: (0, definitionCreators_1.createBooleanDefinition)(true /** isOptional */),
 }, false /* isOptional */, true /** allowNull */);
+/**
+ * Get table cell metadata
+ * @param cell The table cell Content Model
+ */
+function getTableCellMetadata(cell) {
+    return (0, updateMetadata_1.getMetadata)(cell, TableCellMetadataFormatDefinition);
+}
+exports.getTableCellMetadata = getTableCellMetadata;
 /**
  * Update table cell metadata with a callback
  * @param cell The table cell Content Model
@@ -23161,9 +23438,9 @@ exports.updateTableCellMetadata = updateTableCellMetadata;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.updateTableMetadata = void 0;
-var TableBorderFormat_1 = __webpack_require__(/*! ../../constants/TableBorderFormat */ "./packages/roosterjs-content-model-dom/lib/constants/TableBorderFormat.ts");
+exports.updateTableMetadata = exports.getTableMetadata = void 0;
 var updateMetadata_1 = __webpack_require__(/*! ./updateMetadata */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/updateMetadata.ts");
+var TableBorderFormat_1 = __webpack_require__(/*! ../../constants/TableBorderFormat */ "./packages/roosterjs-content-model-dom/lib/constants/TableBorderFormat.ts");
 var definitionCreators_1 = __webpack_require__(/*! ./definitionCreators */ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/definitionCreators.ts");
 var NullStringDefinition = (0, definitionCreators_1.createStringDefinition)(false /** isOptional */, undefined /** value */, true /** allowNull */);
 var BooleanDefinition = (0, definitionCreators_1.createBooleanDefinition)(false /** isOptional */);
@@ -23181,6 +23458,14 @@ var TableFormatDefinition = (0, definitionCreators_1.createObjectDefinition)({
     tableBorderFormat: (0, definitionCreators_1.createNumberDefinition)(false /** isOptional */, undefined /* value */, TableBorderFormat_1.TableBorderFormat.Min /* first table border format */, TableBorderFormat_1.TableBorderFormat.Max /* last table border format */),
     verticalAlign: NullStringDefinition,
 }, false /* isOptional */, true /** allowNull */);
+/**
+ * Get table metadata
+ * @param table The table Content Model
+ */
+function getTableMetadata(table) {
+    return (0, updateMetadata_1.getMetadata)(table, TableFormatDefinition);
+}
+exports.getTableMetadata = getTableMetadata;
 /**
  * Update table metadata with a callback
  * @param table The table Content Model
@@ -23280,64 +23565,63 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 var getClosestAncestorBlockGroupIndex_1 = __webpack_require__(/*! ../editing/getClosestAncestorBlockGroupIndex */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/getClosestAncestorBlockGroupIndex.ts");
 var isBlockGroupOfType_1 = __webpack_require__(/*! ../typeCheck/isBlockGroupOfType */ "./packages/roosterjs-content-model-dom/lib/modelApi/typeCheck/isBlockGroupOfType.ts");
 var iterateSelections_1 = __webpack_require__(/*! ./iterateSelections */ "./packages/roosterjs-content-model-dom/lib/modelApi/selection/iterateSelections.ts");
-/**
- * Get an array of selected parent paragraph and child segment pair
- * @param model The Content Model to get selection from
- * @param includingFormatHolder True means also include format holder as segment from list item, in that case paragraph will be null
- */
-function getSelectedSegmentsAndParagraphs(model, includingFormatHolder, includingEntity) {
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
+function getSelectedSegmentsAndParagraphs(model, includingFormatHolder, includingEntity, mutate) {
     var selections = collectSelections(model, {
         includeListFormatHolder: includingFormatHolder ? 'allSegments' : 'never',
     });
     var result = [];
     selections.forEach(function (_a) {
         var segments = _a.segments, block = _a.block, path = _a.path;
-        if (segments && ((includingFormatHolder && !block) || (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph')) {
-            segments.forEach(function (segment) {
-                if (includingEntity ||
-                    segment.segmentType != 'Entity' ||
-                    !segment.entityFormat.isReadonly) {
-                    result.push([segment, (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph' ? block : null, path]);
+        if (segments) {
+            if (includingFormatHolder &&
+                !block &&
+                segments.length == 1 &&
+                path[0].blockGroupType == 'ListItem' &&
+                segments[0] == path[0].formatHolder) {
+                var list = path[0];
+                if (mutate) {
+                    (0, mutate_1.mutateBlock)(list);
                 }
-            });
+                result.push([list.formatHolder, null, path]);
+            }
+            else if ((block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph') {
+                if (mutate) {
+                    (0, mutate_1.mutateBlock)(block);
+                }
+                segments.forEach(function (segment) {
+                    if (includingEntity ||
+                        segment.segmentType != 'Entity' ||
+                        !segment.entityFormat.isReadonly) {
+                        result.push([segment, block, path]);
+                    }
+                });
+            }
         }
     });
     return result;
 }
 exports.getSelectedSegmentsAndParagraphs = getSelectedSegmentsAndParagraphs;
-/**
- * Get an array of selected segments from a content model
- * @param model The Content Model to get selection from
- * @param includingFormatHolder True means also include format holder as segment from list item
- */
-function getSelectedSegments(model, includingFormatHolder) {
-    return getSelectedSegmentsAndParagraphs(model, includingFormatHolder).map(function (x) { return x[0]; });
+function getSelectedSegments(model, includingFormatHolder, mutate) {
+    var segments = mutate
+        ? getSelectedSegmentsAndParagraphs(model, includingFormatHolder, false /*includeEntity*/, true /*mutate*/)
+        : getSelectedSegmentsAndParagraphs(model, includingFormatHolder);
+    return segments.map(function (x) { return x[0]; });
 }
 exports.getSelectedSegments = getSelectedSegments;
-/**
- * Get any array of selected paragraphs from a content model
- * @param model The Content Model to get selection from
- */
-function getSelectedParagraphs(model) {
+function getSelectedParagraphs(model, mutate) {
     var selections = collectSelections(model, { includeListFormatHolder: 'never' });
     var result = [];
     removeUnmeaningfulSelections(selections);
     selections.forEach(function (_a) {
         var block = _a.block;
         if ((block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph') {
-            result.push(block);
+            result.push(mutate ? (0, mutate_1.mutateBlock)(block) : block);
         }
     });
     return result;
 }
 exports.getSelectedParagraphs = getSelectedParagraphs;
-/**
- * Get an array of block group - block pair that is of the expected block group type from selection
- * @param group The root block group to search
- * @param blockGroupTypes The expected block group types
- * @param stopTypes Block group types that will stop searching when hit
- * @param deepFirst True means search in deep first, otherwise wide first
- */
 function getOperationalBlocks(group, blockGroupTypes, stopTypes, deepFirst) {
     var result = [];
     var findSequence = deepFirst ? blockGroupTypes.map(function (type) { return [type]; }) : [blockGroupTypes];
@@ -23378,10 +23662,6 @@ function getOperationalBlocks(group, blockGroupTypes, stopTypes, deepFirst) {
     return result;
 }
 exports.getOperationalBlocks = getOperationalBlocks;
-/**
- * Get the first selected table from content model
- * @param model The Content Model to get selection from
- */
 function getFirstSelectedTable(model) {
     var selections = collectSelections(model, { includeListFormatHolder: 'never' });
     var table;
@@ -23405,10 +23685,6 @@ function getFirstSelectedTable(model) {
     return [table, resultPath];
 }
 exports.getFirstSelectedTable = getFirstSelectedTable;
-/**
- * Get the first selected list item from content model
- * @param model The Content Model to get selection from
- */
 function getFirstSelectedListItem(model) {
     var listItem;
     getOperationalBlocks(model, ['ListItem'], ['TableCell']).forEach(function (r) {
@@ -23431,6 +23707,8 @@ function collectSelections(group, option) {
     }, option);
     return selections;
 }
+//#endregion
+//#region utils
 function removeUnmeaningfulSelections(selections) {
     if (selections.length > 1 &&
         isOnlySelectionMarkerSelected(selections, false /*checkFirstParagraph*/)) {
@@ -23458,6 +23736,7 @@ function isOnlySelectionMarkerSelected(selections, checkFirstParagraph) {
         return false;
     }
 }
+//#endregion
 
 
 /***/ }),
@@ -23605,12 +23884,6 @@ exports.hasSelectionInSegment = hasSelectionInSegment;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.iterateSelections = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-/**
- * Iterate all selected elements in a given model
- * @param group The given Content Model to iterate selection from
- * @param callback The callback function to access the selected element
- * @param option Option to determine how to iterate
- */
 function iterateSelections(group, callback, option) {
     var internalCallback = function (path, tableContext, block, segments) {
         var _a;
@@ -23760,6 +24033,7 @@ function internalIterateSelections(path, callback, option, table, treatAllAsSele
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setSelection = void 0;
 var isGeneralSegment_1 = __webpack_require__(/*! ../typeCheck/isGeneralSegment */ "./packages/roosterjs-content-model-dom/lib/modelApi/typeCheck/isGeneralSegment.ts");
+var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 /**
  * Set selection into Content Model. If the Content Model already has selection, existing selection will be overwritten by the new one.
  * @param group The root level group of Content Model
@@ -23772,8 +24046,8 @@ function setSelection(group, start, end) {
 exports.setSelection = setSelection;
 function setSelectionToBlockGroup(group, isInSelection, start, end) {
     return handleSelection(isInSelection, group, start, end, function (isInSelection) {
-        if ((0, isGeneralSegment_1.isGeneralSegment)(group)) {
-            setIsSelected(group, isInSelection);
+        if ((0, isGeneralSegment_1.isGeneralSegment)(group) && needToSetSelection(group, isInSelection)) {
+            setIsSelected((0, mutate_1.mutateBlock)(group), isInSelection);
         }
         group.blocks.forEach(function (block) {
             isInSelection = setSelectionToBlock(block, isInSelection, start, end);
@@ -23790,11 +24064,14 @@ function setSelectionToBlock(block, isInSelection, start, end) {
         case 'Divider':
         case 'Entity':
             return handleSelection(isInSelection, block, start, end, function (isInSelection) {
-                if (isInSelection) {
-                    block.isSelected = true;
-                }
-                else {
-                    delete block.isSelected;
+                if (needToSetSelection(block, isInSelection)) {
+                    var mutableBlock = (0, mutate_1.mutateBlock)(block);
+                    if (isInSelection) {
+                        mutableBlock.isSelected = true;
+                    }
+                    else {
+                        delete mutableBlock.isSelected;
+                    }
                 }
                 return isInSelection;
             });
@@ -23802,13 +24079,13 @@ function setSelectionToBlock(block, isInSelection, start, end) {
             var segmentsToDelete_1 = [];
             block.segments.forEach(function (segment, i) {
                 isInSelection = handleSelection(isInSelection, segment, start, end, function (isInSelection) {
-                    return setSelectionToSegment(segment, isInSelection, segmentsToDelete_1, start, end, i);
+                    return setSelectionToSegment(block, segment, isInSelection, segmentsToDelete_1, start, end, i);
                 });
             });
-            while (segmentsToDelete_1.length > 0) {
-                var index = segmentsToDelete_1.pop();
+            var index = void 0;
+            while ((index = segmentsToDelete_1.pop()) !== undefined) {
                 if (index >= 0) {
-                    block.segments.splice(index, 1);
+                    (0, mutate_1.mutateBlock)(block).segments.splice(index, 1);
                 }
             }
             return isInSelection;
@@ -23825,7 +24102,9 @@ function setSelectionToTable(table, isInSelection, start, end) {
             for (var col = 0; col < currentRow.cells.length; col++) {
                 var currentCell = table.rows[row].cells[col];
                 var isSelected = row >= first.row && row <= last.row && col >= first.col && col <= last.col;
-                setIsSelected(currentCell, isSelected);
+                if (needToSetSelection(currentCell, isSelected)) {
+                    setIsSelected((0, mutate_1.mutateBlock)(currentCell), isSelected);
+                }
                 if (!isSelected) {
                     setSelectionToBlockGroup(currentCell, false /*isInSelection*/, start, end);
                 }
@@ -23848,7 +24127,7 @@ function findCell(table, cell) {
         : -1;
     return { row: row, col: col };
 }
-function setSelectionToSegment(segment, isInSelection, segmentsToDelete, start, end, i) {
+function setSelectionToSegment(paragraph, segment, isInSelection, segmentsToDelete, start, end, i) {
     switch (segment.segmentType) {
         case 'SelectionMarker':
             if (!isInSelection || (segment != start && segment != end)) {
@@ -23859,19 +24138,32 @@ function setSelectionToSegment(segment, isInSelection, segmentsToDelete, start,
             }
             return isInSelection;
         case 'General':
-            setIsSelected(segment, isInSelection);
+            internalSetSelectionToSegment(paragraph, segment, isInSelection);
             return segment != start && segment != end
                 ? setSelectionToBlockGroup(segment, isInSelection, start, end)
                 : isInSelection;
         case 'Image':
-            setIsSelected(segment, isInSelection);
-            segment.isSelectedAsImageSelection = start == segment && (!end || end == segment);
+            var isSelectedAsImageSelection_1 = start == segment && (!end || end == segment);
+            internalSetSelectionToSegment(paragraph, segment, isInSelection, !segment.isSelectedAsImageSelection != !isSelectedAsImageSelection_1
+                ? function (image) { return (image.isSelectedAsImageSelection = isSelectedAsImageSelection_1); }
+                : undefined);
             return isInSelection;
         default:
-            setIsSelected(segment, isInSelection);
+            internalSetSelectionToSegment(paragraph, segment, isInSelection);
             return isInSelection;
     }
 }
+function internalSetSelectionToSegment(paragraph, segment, isInSelection, additionAction) {
+    if (additionAction || needToSetSelection(segment, isInSelection)) {
+        (0, mutate_1.mutateSegment)(paragraph, segment, function (mutableSegment) {
+            setIsSelected(mutableSegment, isInSelection);
+            additionAction === null || additionAction === void 0 ? void 0 : additionAction(mutableSegment);
+        });
+    }
+}
+function needToSetSelection(selectable, isSelected) {
+    return !selectable.isSelected != !isSelected;
+}
 function setIsSelected(selectable, value) {
     if (value) {
         selectable.isSelected = true;
@@ -23900,11 +24192,6 @@ function handleSelection(isInSelection, model, start, end, callback) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.isBlockGroupOfType = void 0;
-/**
- * Check if the given content model block or block group is of the expected block group type
- * @param input The object to check
- * @param type The expected type
- */
 function isBlockGroupOfType(input, type) {
     var item = input;
     return (item === null || item === void 0 ? void 0 : item.blockGroupType) == type;
@@ -23924,10 +24211,6 @@ exports.isBlockGroupOfType = isBlockGroupOfType;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.isGeneralSegment = void 0;
-/**
- * Check if the given block group is a general segment
- * @param group The group to check
- */
 function isGeneralSegment(group) {
     return (group.blockGroupType == 'General' &&
         group.segmentType == 'General');
@@ -25637,7 +25920,11 @@ var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-mo
  * @internal
  */
 function createLink(editor) {
+    var anchorNode = null;
     (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, linkSegment, _paragraph) {
+        if (linkSegment.link) {
+            return true;
+        }
         var linkData = null;
         if (!linkSegment.link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(linkSegment.text))) {
             (0, roosterjs_content_model_dom_1.addLink)(linkSegment, {
@@ -25652,6 +25939,12 @@ function createLink(editor) {
         return false;
     }, {
         changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoLink,
+        onNodeCreated: function (_modelElement, node) {
+            if (!anchorNode) {
+                anchorNode = node;
+            }
+        },
+        getChangeData: function () { return anchorNode; },
     });
 }
 exports.createLink = createLink;
@@ -26392,6 +26685,7 @@ var EditPlugin = /** @class */ (function () {
         this.editor = null;
         this.disposer = null;
         this.shouldHandleNextInputEvent = false;
+        this.selectionAfterDelete = null;
     }
     /**
      * Get name of this plugin
@@ -26439,6 +26733,12 @@ var EditPlugin = /** @class */ (function () {
                 case 'keyDown':
                     this.handleKeyDownEvent(this.editor, event);
                     break;
+                case 'keyUp':
+                    if (this.selectionAfterDelete) {
+                        this.editor.setDOMSelection(this.selectionAfterDelete);
+                        this.selectionAfterDelete = null;
+                    }
+                    break;
             }
         }
     };
@@ -26475,8 +26775,6 @@ var EditPlugin = /** @class */ (function () {
         }
     };
     EditPlugin.prototype.handleBeforeInputEvent = function (editor, rawEvent) {
-        var _this = this;
-        var _a, _b;
         // Some Android IMEs doesn't fire correct keydown event for BACKSPACE/DELETE key
         // Here we translate input event to BACKSPACE/DELETE keydown event to be compatible with existing logic
         if (!this.shouldHandleNextInputEvent ||
@@ -26504,15 +26802,9 @@ var EditPlugin = /** @class */ (function () {
         }
         if (handled) {
             rawEvent.preventDefault();
-            // Restore the selection to avoid the cursor jump issue
+            // Restore the selection on keyup event to avoid the cursor jump issue
             // See: https://issues.chromium.org/issues/330596261
-            var selection_1 = editor.getDOMSelection();
-            var doc = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDocument();
-            (_b = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _b === void 0 ? void 0 : _b.requestAnimationFrame(function () {
-                if (_this.editor) {
-                    _this.editor.setDOMSelection(selection_1);
-                }
-            });
+            this.selectionAfterDelete = editor.getDOMSelection();
         }
     };
     return EditPlugin;
@@ -26596,8 +26888,9 @@ function getDeleteCollapsedSelection(direction) {
             context.deleteResult = 'range';
         }
         else if ((blockToDelete = (0, getLeafSiblingBlock_1.getLeafSiblingBlock)(path, paragraph, isForward))) {
-            var block = blockToDelete.block, path_1 = blockToDelete.path, siblingSegment = blockToDelete.siblingSegment;
-            if (block.blockType == 'Paragraph') {
+            var readonlyBlock = blockToDelete.block, path_1 = blockToDelete.path, siblingSegment = blockToDelete.siblingSegment;
+            if (readonlyBlock.blockType == 'Paragraph') {
+                var block = (0, roosterjs_content_model_dom_1.mutateBlock)(readonlyBlock);
                 if (siblingSegment) {
                     // When selection is under general segment, need to check if it has a sibling sibling, and delete from it
                     if ((0, roosterjs_content_model_dom_1.deleteSegment)(block, siblingSegment, context.formatContext, direction)) {
@@ -26619,7 +26912,6 @@ function getDeleteCollapsedSelection(direction) {
                             tableContext: tableContext,
                         };
                         context.lastParagraph = paragraph;
-                        delete block.cachedElement;
                     }
                     context.deleteResult = 'range';
                 }
@@ -26627,7 +26919,7 @@ function getDeleteCollapsedSelection(direction) {
                 context.lastTableContext = tableContext;
             }
             else {
-                if ((0, roosterjs_content_model_dom_1.deleteBlock)(path_1[0].blocks, block, undefined /*replacement*/, context.formatContext, direction)) {
+                if ((0, roosterjs_content_model_dom_1.deleteBlock)((0, roosterjs_content_model_dom_1.mutateBlock)(path_1[0]).blocks, readonlyBlock, undefined /*replacement*/, context.formatContext, direction)) {
                     context.deleteResult = 'range';
                 }
             }
@@ -26740,7 +27032,7 @@ var insertNewLine = function (quote, parent, index) {
     var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)();
     var newParagraph = (0, roosterjs_content_model_dom_1.createParagraph)(false /* isImplicit */);
     newParagraph.segments.push(marker);
-    parent.blocks.splice(index + 1, 0, newParagraph);
+    (0, roosterjs_content_model_dom_1.mutateBlock)(parent).blocks.splice(index + 1, 0, newParagraph);
 };
 
 
@@ -27080,7 +27372,7 @@ var handleEnterOnList = function (context) {
                         lastParagraph.blockType === 'Paragraph' &&
                         lastParagraph.segments[lastParagraph.segments.length - 1].segmentType ===
                             'SelectionMarker') {
-                        lastParagraph.segments.pop();
+                        (0, roosterjs_content_model_dom_1.mutateBlock)(lastParagraph).segments.pop();
                         nextParagraph.segments.unshift((0, roosterjs_content_model_dom_1.createSelectionMarker)(insertPoint.marker.format));
                     }
                     context.lastParagraph = undefined;
@@ -27088,7 +27380,7 @@ var handleEnterOnList = function (context) {
             }
             else if (deleteResult !== 'range') {
                 if (isEmptyListItem(listItem_1)) {
-                    listItem_1.levels.pop();
+                    (0, roosterjs_content_model_dom_1.mutateBlock)(listItem_1).levels.pop();
                 }
                 else {
                     var newListItem = createNewListItem(context, listItem_1, listParent);
@@ -27121,7 +27413,7 @@ var createNewListItem = function (context, listItem, listParent) {
     newListItem.blocks.push(newParagraph);
     insertPoint.paragraph = newParagraph;
     context.lastParagraph = newParagraph;
-    listParent.blocks.splice(listIndex + 1, 0, newListItem);
+    (0, roosterjs_content_model_dom_1.mutateBlock)(listParent).blocks.splice(listIndex + 1, 0, newListItem);
     return newListItem;
 };
 var createNewListLevel = function (listItem) {
@@ -27615,9 +27907,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getLeafSiblingBlock = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-/**
- * @internal
- */
 function getLeafSiblingBlock(path, block, isNext) {
     var _a;
     var newPath = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(path), false);
@@ -31133,6 +31422,7 @@ exports.createCellResizer = exports.VERTICAL_RESIZER_ID = exports.HORIZONTAL_RES
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
+var getTableFromContentModel_1 = __webpack_require__(/*! ../utils/getTableFromContentModel */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var CELL_RESIZER_WIDTH = 4;
 /**
@@ -31185,21 +31475,8 @@ function onDragStart(context, event) {
         }; // Just a fallback
     }
     var editor = context.editor, table = context.table;
-    // Get current selection
-    var selection = editor.getDOMSelection();
-    // Select first cell of the table
-    editor.setDOMSelection({
-        type: 'table',
-        firstColumn: 0,
-        firstRow: 0,
-        lastColumn: 0,
-        lastRow: 0,
-        table: table,
-    });
-    // Get the table content model
-    var cmTable = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected'))[0];
-    // Restore selection
-    editor.setDOMSelection(selection);
+    // Get Table block in content model
+    var cmTable = (0, getTableFromContentModel_1.getCMTableFromTable)(editor, table);
     if (rect && cmTable) {
         onStart();
         return {
@@ -31476,6 +31753,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var getTableFromContentModel_1 = __webpack_require__(/*! ../utils/getTableFromContentModel */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TABLE_MOVER_LENGTH = 12;
 /**
@@ -31609,21 +31887,10 @@ function onDragStart(context) {
     tableRect.style.top = trect.top + "px";
     tableRect.style.left = trect.left + "px";
     (_a = div.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(tableRect);
-    // Get current selection
+    // Get drag start selection
     var initialSelection = editor.getDOMSelection();
-    // Select first cell of the table
-    editor.setDOMSelection({
-        type: 'table',
-        firstColumn: 0,
-        firstRow: 0,
-        lastColumn: 0,
-        lastRow: 0,
-        table: table,
-    });
-    // Get the table content model
-    var _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected')), 1), cmTable = _b[0];
-    // Restore selection
-    editor.setDOMSelection(initialSelection);
+    // Get Table block in content model
+    var cmTable = (0, getTableFromContentModel_1.getCMTableFromTable)(editor, table);
     return {
         cmTable: cmTable,
         initialSelection: initialSelection,
@@ -31756,6 +32023,7 @@ exports.createTableResizer = exports.TABLE_RESIZER_ID = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
+var getTableFromContentModel_1 = __webpack_require__(/*! ../utils/getTableFromContentModel */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TABLE_RESIZER_LENGTH = 12;
 /**
@@ -31819,21 +32087,8 @@ var TableResizer = /** @class */ (function (_super) {
 function onDragStart(context, event) {
     context.onStart();
     var editor = context.editor, table = context.table;
-    // Get current selection
-    var selection = editor.getDOMSelection();
-    // Select first cell of the table
-    editor.setDOMSelection({
-        type: 'table',
-        firstColumn: 0,
-        firstRow: 0,
-        lastColumn: 0,
-        lastRow: 0,
-        table: table,
-    });
-    // Get the table content model
-    var cmTable = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected'))[0];
-    // Restore selection
-    editor.setDOMSelection(selection);
+    // Get Table block in content model
+    var cmTable = (0, getTableFromContentModel_1.getCMTableFromTable)(editor, table);
     // Save original widths and heights
     var heights = [];
     cmTable === null || cmTable === void 0 ? void 0 : cmTable.rows.forEach(function (row) {
@@ -31935,6 +32190,45 @@ function isTableBottomVisible(editor, rect, contentDiv) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts":
+/*!**********************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts ***!
+  \**********************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getCMTableFromTable = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ * Get ContentModelTable from a table element if it is present in the content model
+ */
+function getCMTableFromTable(editor, table) {
+    var cmTable;
+    editor.formatContentModel(function (model) {
+        var _a;
+        _a = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model), 1), cmTable = _a[0];
+        return false;
+    }, {
+        selectionOverride: {
+            type: 'table',
+            firstColumn: 0,
+            firstRow: 0,
+            lastColumn: 0,
+            lastRow: 0,
+            table: table,
+        },
+    });
+    return cmTable;
+}
+exports.getCMTableFromTable = getCMTableFromTable;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/watermark/WatermarkPlugin.ts":