roosterjs 8.18.0 → 8.19.2

package/dist/rooster.js

@@ -3032,7 +3032,7 @@ function setAlignment(editor, alignment) {
     editor.addUndoSnapshot(function () {
         if (editor.isFeatureEnabled("TableAlignment" /* TableAlignment */) &&
             isATable &&
-            isWholeTableSelected(selection)) {
+            (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
             alignTable(selection, alignment);
         }
         else {
@@ -3084,25 +3084,6 @@ function alignText(editor, alignment) {
     (0, execCommand_1.default)(editor, command);
     editor.queryElements('[align]', 1 /* OnSelection */, function (node) { return (node.style.textAlign = align); });
 }
-/**
- * Check if the whole table is selected
- * @param selection
- * @returns
- */
-function isWholeTableSelected(selection) {
-    if (!selection) {
-        return false;
-    }
-    var vTable = new roosterjs_editor_dom_1.VTable(selection.table);
-    var _a = selection.coordinates, firstCell = _a.firstCell, lastCell = _a.lastCell;
-    var rowsLength = vTable.cells.length - 1;
-    var colIndex = vTable.cells[rowsLength].length - 1;
-    var firstX = firstCell.x;
-    var firstY = firstCell.y;
-    var lastX = lastCell.x;
-    var lastY = lastCell.y;
-    return firstX == 0 && firstY == 0 && lastX == colIndex && lastY == rowsLength;
-}
 
 
 /***/ }),
@@ -3289,7 +3270,6 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function setIndentation(editor, indentation) {
     var handler = indentation == 0 /* Increase */ ? indent : outdent;
     (0, blockFormat_1.default)(editor, function (region, start, end) {
-        var _a;
         var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/);
         var blockGroups = [[]];
         for (var i = 0; i < blocks.length; i++) {
@@ -3299,15 +3279,18 @@ function setIndentation(editor, indentation) {
                 while (blocks[i + 1] && vList.contains(blocks[i + 1].getStartNode())) {
                     i++;
                 }
-                if (((_a = vList.items[0]) === null || _a === void 0 ? void 0 : _a.getNode()) == startNode &&
-                    vList.getListItemIndex(startNode) == vList.getStart() &&
-                    (indentation == 0 /* Increase */ ||
-                        editor.getElementAtCursor('blockquote', startNode))) {
+                var isTabKeyTextFeaturesEnabled = editor.isFeatureEnabled("TabKeyTextFeatures" /* TabKeyTextFeatures */);
+                vList.rootList.style.listStylePosition = 'inside';
+                if (isTabKeyTextFeaturesEnabled &&
+                    isFirstItem(vList, startNode) &&
+                    shouldHandleWithBlockquotes(indentation, editor, startNode)) {
                     var block = editor.getBlockElementAtNode(vList.rootList);
                     blockGroups.push([block]);
                 }
                 else {
-                    vList.setIndentation(start, end, indentation);
+                    indentation == 1 /* Decrease */
+                        ? vList.setIndentation(start, end, indentation, false /* softOutdent */, isTabKeyTextFeaturesEnabled /* preventItemRemoval */)
+                        : vList.setIndentation(start, end, indentation);
                     vList.writeBack();
                     blockGroups.push([]);
                 }
@@ -3317,6 +3300,20 @@ function setIndentation(editor, indentation) {
             }
         }
         blockGroups.forEach(function (group) { return handler(region, group); });
+    }, function () {
+        var selection = editor.getSelectionRangeEx();
+        if (selection.type == 1 /* TableSelection */ &&
+            (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
+            if (indentation == 1 /* Decrease */) {
+                var quote = editor.getElementAtCursor('blockquote', selection.table);
+                (0, roosterjs_editor_dom_1.unwrap)(quote);
+            }
+            else if (indentation == 0 /* Increase */) {
+                (0, roosterjs_editor_dom_1.wrap)(selection.table, 2 /* BlockquoteWrapper */);
+            }
+            return false;
+        }
+        return true;
     });
 }
 exports.default = setIndentation;
@@ -3341,6 +3338,14 @@ function outdent(region, blocks) {
         }
     });
 }
+function isFirstItem(vList, startNode) {
+    var _a;
+    return (((_a = vList.items[0]) === null || _a === void 0 ? void 0 : _a.getNode()) == startNode &&
+        vList.getListItemIndex(startNode) == (vList.getStart() || 1));
+}
+function shouldHandleWithBlockquotes(indentation, editor, startNode) {
+    return (indentation == 0 /* Increase */ || editor.getElementAtCursor('blockquote', startNode));
+}
 
 
 /***/ }),
@@ -3917,12 +3922,12 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function editTable(editor, operation) {
     var td = editor.getElementAtCursor('TD,TH');
     if (td) {
-        editor.addUndoSnapshot(function (start, end) {
+        editor.addUndoSnapshot(function () {
             var vtable = new roosterjs_editor_dom_1.VTable(td);
+            saveTableSelection(editor, vtable);
             vtable.edit(operation);
             vtable.writeBack();
-            //Adding replaceNode to transform color when the theme is switched to dark.
-            editor.replaceNode(vtable.table, vtable.table, true /**transformColorForDarkMode*/);
+            editor.transformToDarkColor(vtable.table);
             editor.focus();
             var cellToSelect = calculateCellToSelect(operation, vtable.row, vtable.col);
             editor.select(vtable.getCell(cellToSelect.newRow, cellToSelect.newCol).td, 0 /* Begin */);
@@ -3954,6 +3959,12 @@ function calculateCellToSelect(operation, currentRow, currentCol) {
         newCol: newCol,
     };
 }
+function saveTableSelection(editor, vtable) {
+    var selection = editor.getSelectionRangeEx();
+    if (selection && selection.type === 1 /* TableSelection */) {
+        vtable.selection = selection.coordinates;
+    }
+}
 
 
 /***/ }),
@@ -3982,8 +3993,7 @@ function formatTable(editor, format, table) {
             var vtable = new roosterjs_editor_dom_1.VTable(table);
             vtable.applyFormat(format);
             vtable.writeBack();
-            //Adding replaceNode to transform color when the theme is switched to dark.
-            editor.replaceNode(vtable.table, vtable.table, true /**transformColorForDarkMode*/);
+            editor.transformToDarkColor(vtable.table);
             editor.focus();
             editor.select(start, end);
         }, "Format" /* Format */);
@@ -4411,6 +4421,9 @@ function toggleListType(editor, listType, startNumber, includeSiblingLists) {
             : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, includeSiblingLists);
         if (vList) {
             vList.changeListType(start, end, listType);
+            if (editor.isFeatureEnabled("TabKeyTextFeatures" /* TabKeyTextFeatures */)) {
+                vList.rootList.style.listStylePosition = 'inside';
+            }
             vList.writeBack();
         }
     });
@@ -4429,6 +4442,17 @@ exports.default = toggleListType;
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addUndoSnapshot = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
@@ -4444,22 +4468,17 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 var addUndoSnapshot = function (core, callback, changeSource, canUndoByBackspace) {
     var undoState = core.undo;
     var isNested = undoState.isNested;
-    var isShadowEdit = !!core.lifecycle.shadowEditFragment;
     var data;
     if (!isNested) {
         undoState.isNested = true;
-        if (!isShadowEdit) {
-            undoState.snapshotsService.addSnapshot(core.api.getContent(core, 2 /* RawHTMLWithSelection */), canUndoByBackspace);
-            undoState.hasNewContent = false;
-        }
+        addUndoSnapshotInternal(core, canUndoByBackspace);
     }
     try {
         if (callback) {
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             data = callback(range && roosterjs_editor_dom_1.Position.getStart(range).normalize(), range && roosterjs_editor_dom_1.Position.getEnd(range).normalize());
-            if (!isNested && !isShadowEdit) {
-                undoState.snapshotsService.addSnapshot(core.api.getContent(core, 2 /* RawHTMLWithSelection */), false /*isAutoCompleteSnapshot*/);
-                undoState.hasNewContent = false;
+            if (!isNested) {
+                addUndoSnapshotInternal(core, false /*isAutoCompleteSnapshot*/);
             }
         }
     }
@@ -4485,6 +4504,19 @@ var addUndoSnapshot = function (core, callback, changeSource, canUndoByBackspace
     }
 };
 exports.addUndoSnapshot = addUndoSnapshot;
+function addUndoSnapshotInternal(core, canUndoByBackspace) {
+    if (!core.lifecycle.shadowEditFragment) {
+        var rangeEx = core.api.getSelectionRangeEx(core);
+        var isDarkMode = core.lifecycle.isDarkMode;
+        var metadata = (rangeEx === null || rangeEx === void 0 ? void 0 : rangeEx.type) == 1 /* TableSelection */
+            ? __assign({ type: 1 /* TableSelection */, tableId: rangeEx.table.id, isDarkMode: isDarkMode }, rangeEx.coordinates) : __assign({ type: 0 /* Normal */, isDarkMode: isDarkMode, start: [], end: [] }, ((0, roosterjs_editor_dom_1.getSelectionPath)(core.contentDiv, rangeEx.ranges[0]) || {}));
+        core.undo.snapshotsService.addSnapshot({
+            html: core.contentDiv.innerHTML,
+            metadata: metadata,
+        }, canUndoByBackspace);
+        core.undo.hasNewContent = false;
+    }
+}
 
 
 /***/ }),
@@ -5424,10 +5456,10 @@ var restoreUndoSnapshot = function (core, step) {
         core.api.addUndoSnapshot(core, null /*callback*/, null /*changeSource*/, false /*canUndoByBackspace*/);
     }
     var snapshot = core.undo.snapshotsService.move(step);
-    if (snapshot != null) {
+    if (snapshot && snapshot.html != null) {
         try {
             core.undo.isRestoring = true;
-            core.api.setContent(core, snapshot, true /*triggerContentChangedEvent*/);
+            core.api.setContent(core, snapshot.html, true /*triggerContentChangedEvent*/, snapshot.metadata);
         }
         finally {
             core.undo.isRestoring = false;
@@ -5530,7 +5562,11 @@ var selectTable = function (core, table, coordinates) {
         ensureUniqueId(table, TABLE_ID);
         ensureUniqueId(core.contentDiv, CONTENT_DIV_ID);
         var ranges = select(core, table, coordinates);
-        core.api.selectRange(core, (0, roosterjs_editor_dom_1.createRange)(new roosterjs_editor_dom_1.Position(table.rows.item(coordinates.firstCell.y).cells.item(coordinates.firstCell.x), 0 /* Begin */)));
+        if (!isMergedCell(table, coordinates)) {
+            core.api.selectRange(core, (0, roosterjs_editor_dom_1.createRange)(new roosterjs_editor_dom_1.Position(table.rows
+                .item(coordinates.firstCell.y)
+                .cells.item(coordinates.firstCell.x), 0 /* Begin */)));
+        }
         return {
             type: 1 /* TableSelection */,
             ranges: ranges,
@@ -5693,6 +5729,10 @@ function areValidCoordinates(input) {
 function isValidCoordinate(input) {
     return (!!input || input == 0) && input > -1;
 }
+function isMergedCell(table, coordinates) {
+    var firstCell = coordinates.firstCell;
+    return !(table.rows.item(firstCell.y) && table.rows.item(firstCell.y).cells.item(firstCell.x));
+}
 
 
 /***/ }),
@@ -5709,6 +5749,7 @@ function isValidCoordinate(input) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setContent = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var roosterjs_editor_dom_2 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * @internal
  * Set HTML content to this editor. All existing content will be replaced. A ContentChanged event will be triggered
@@ -5717,20 +5758,24 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param content HTML content to set in
  * @param triggerContentChangedEvent True to trigger a ContentChanged event. Default value is true
  */
-var setContent = function (core, content, triggerContentChangedEvent) {
+var setContent = function (core, content, triggerContentChangedEvent, metadata) {
     var contentChanged = false;
     if (core.contentDiv.innerHTML != content) {
         core.api.triggerEvent(core, {
             eventType: 20 /* BeforeSetContent */,
             newContent: content,
         }, true /*broadcast*/);
-        var range = (0, roosterjs_editor_dom_1.setHtmlWithSelectionPath)(core.contentDiv, content, core.trustedHTMLHandler);
-        core.api.selectRange(core, range);
+        var metadataFromContent = (0, roosterjs_editor_dom_2.setHtmlWithMetadata)(core.contentDiv, content, core.trustedHTMLHandler);
+        metadata = metadata || metadataFromContent;
+        selectContentMetadata(core, metadata);
+        contentChanged = true;
+    }
+    var isDarkMode = core.lifecycle.isDarkMode;
+    if ((!metadata && isDarkMode) || (metadata && !!metadata.isDarkMode != !!isDarkMode)) {
+        core.api.transformColor(core, core.contentDiv, false /*includeSelf*/, null /*callback*/, isDarkMode ? 0 /* LightToDark */ : 1 /* DarkToLight */, true /*forceTransform*/);
         contentChanged = true;
     }
-    // Convert content even if it hasn't changed.
-    core.api.transformColor(core, core.contentDiv, false /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
-    if (triggerContentChangedEvent && (contentChanged || core.lifecycle.isDarkMode)) {
+    if (triggerContentChangedEvent && contentChanged) {
         core.api.triggerEvent(core, {
             eventType: 7 /* ContentChanged */,
             source: "SetContent" /* SetContent */,
@@ -5738,6 +5783,20 @@ var setContent = function (core, content, triggerContentChangedEvent) {
     }
 };
 exports.setContent = setContent;
+function selectContentMetadata(core, metadata) {
+    switch (metadata === null || metadata === void 0 ? void 0 : metadata.type) {
+        case 0 /* Normal */:
+            var range = (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, metadata.start, metadata.end);
+            core.api.selectRange(core, range);
+            break;
+        case 1 /* TableSelection */:
+            var table = (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, '#' + metadata.tableId)[0];
+            if (table) {
+                core.api.selectTable(core, table, metadata);
+            }
+            break;
+    }
+}
 
 
 /***/ }),
@@ -5848,52 +5907,70 @@ var ColorAttributeName = [
  * @param includeSelf True to transform the root node as well, otherwise false
  * @param callback The callback function to invoke before do color transformation
  * @param direction To specify the transform direction, light to dark, or dark to light
+ * @param forceTransform By default this function will only work when editor core is in dark mode.
+ * Pass true to this value to force do color transformation even editor core is in light mode
  */
-var transformColor = function (core, rootNode, includeSelf, callback, direction) {
-    var elementsToTransform = core.lifecycle.isDarkMode ? getAll(rootNode, includeSelf) : [];
-    var transformFunction = direction == 1 /* DarkToLight */
-        ? transformToLightMode
-        : core.lifecycle.onExternalContentTransform ||
-            (function (element) { return transformToDarkMode(element, core.lifecycle.getDarkColor); });
+var transformColor = function (core, rootNode, includeSelf, callback, direction, forceTransform) {
+    var elements = forceTransform || core.lifecycle.isDarkMode ? getAll(rootNode, includeSelf) : [];
     callback === null || callback === void 0 ? void 0 : callback();
-    elementsToTransform.forEach(function (element) { return (element === null || element === void 0 ? void 0 : element.dataset) && element.style && transformFunction(element); });
+    if (direction == 1 /* DarkToLight */) {
+        transformToLightMode(elements);
+    }
+    else if (core.lifecycle.onExternalContentTransform) {
+        elements.forEach(function (element) { return core.lifecycle.onExternalContentTransform(element); });
+    }
+    else {
+        transformToDarkMode(elements, core.lifecycle.getDarkColor);
+    }
 };
 exports.transformColor = transformColor;
-function transformToLightMode(element) {
-    ColorAttributeName.forEach(function (names) {
-        // Reset color styles based on the content of the ogsc/ogsb data element.
-        // If those data properties are empty or do not exist, set them anyway to clear the content.
-        element.style.setProperty(names[0 /* CssColor */], getValueOrDefault(element.dataset[names[2 /* CssDataSet */]], ''));
-        delete element.dataset[names[2 /* CssDataSet */]];
-        // Some elements might have set attribute colors. We need to reset these as well.
-        var value = element.dataset[names[3 /* HtmlDataSet */]];
-        if (getValueOrDefault(value, null)) {
-            element.setAttribute(names[1 /* HtmlColor */], value);
-        }
-        else {
-            element.removeAttribute(names[1 /* HtmlColor */]);
-        }
-        delete element.dataset[names[3 /* HtmlDataSet */]];
+function transformToLightMode(elements) {
+    elements.forEach(function (element) {
+        ColorAttributeName.forEach(function (names) {
+            // Reset color styles based on the content of the ogsc/ogsb data element.
+            // If those data properties are empty or do not exist, set them anyway to clear the content.
+            element.style.setProperty(names[0 /* CssColor */], getValueOrDefault(element.dataset[names[2 /* CssDataSet */]], ''));
+            delete element.dataset[names[2 /* CssDataSet */]];
+            // Some elements might have set attribute colors. We need to reset these as well.
+            var value = element.dataset[names[3 /* HtmlDataSet */]];
+            if (getValueOrDefault(value, null)) {
+                element.setAttribute(names[1 /* HtmlColor */], value);
+            }
+            else {
+                element.removeAttribute(names[1 /* HtmlColor */]);
+            }
+            delete element.dataset[names[3 /* HtmlDataSet */]];
+        });
     });
 }
-function transformToDarkMode(element, getDarkColor) {
-    var computedValues = (0, roosterjs_editor_dom_1.getComputedStyles)(element, ['color', 'background-color']);
-    ColorAttributeName.forEach(function (names, index) {
-        var styleColor = element.style.getPropertyValue(names[0 /* CssColor */]);
-        var attrColor = element.getAttribute(names[1 /* HtmlColor */]);
-        if (!element.dataset[names[2 /* CssDataSet */]] &&
-            !element.dataset[names[3 /* HtmlDataSet */]] &&
-            (styleColor || attrColor) &&
-            styleColor != 'inherit' // For inherit style, no need to change it and let it keep inherit from parent element
-        ) {
-            var newColor = getDarkColor(computedValues[index] || styleColor || attrColor);
+function transformToDarkMode(elements, getDarkColor) {
+    ColorAttributeName.forEach(function (names) {
+        elements
+            .map(function (element) {
+            var styleColor = element.style.getPropertyValue(names[0 /* CssColor */]);
+            var attrColor = element.getAttribute(names[1 /* HtmlColor */]);
+            return !element.dataset[names[2 /* CssDataSet */]] &&
+                !element.dataset[names[3 /* HtmlDataSet */]] &&
+                (styleColor || attrColor) &&
+                styleColor != 'inherit' // For inherit style, no need to change it and let it keep inherit from parent element
+                ? {
+                    element: element,
+                    styleColor: styleColor,
+                    attrColor: attrColor,
+                    newColor: getDarkColor(styleColor || attrColor),
+                }
+                : null;
+        })
+            .filter(function (x) { return !!x; })
+            .forEach(function (_a) {
+            var element = _a.element, styleColor = _a.styleColor, attrColor = _a.attrColor, newColor = _a.newColor;
             element.style.setProperty(names[0 /* CssColor */], newColor, 'important');
             element.dataset[names[2 /* CssDataSet */]] = styleColor || '';
             if (attrColor) {
                 element.setAttribute(names[1 /* HtmlColor */], newColor);
                 element.dataset[names[3 /* HtmlDataSet */]] = attrColor;
             }
-        }
+        });
     });
 }
 function getValueOrDefault(value, defaultValue) {
@@ -5912,7 +5989,14 @@ function getAll(rootNode, includeSelf) {
         var allChildren = rootNode.querySelectorAll('*');
         (0, roosterjs_editor_dom_1.arrayPush)(result, (0, roosterjs_editor_dom_1.toArray)(allChildren));
     }
-    return result;
+    return result.filter(isHTMLElement);
+}
+// This is not a strict check, we just need to make sure this element has style so that we can set style to it
+// We don't use safeInstanceOf() here since this function will be called very frequently when extract html content
+// in dark mode, so we need to make sure this check is fast enough
+function isHTMLElement(element) {
+    var htmlElement = element;
+    return !!htmlElement.style && !!htmlElement.dataset;
 }
 
 
@@ -6043,7 +6127,6 @@ var CopyPastePlugin = /** @class */ (function () {
         var _this = this;
         var selection = this.editor.getSelectionRangeEx();
         if (selection && !selection.areAllCollapsed) {
-            var originalRange_1 = selection.ranges[0];
             var html = this.editor.getContent(2 /* RawHTMLWithSelection */);
             var tempDiv_1 = this.getTempDiv(true /*forceInLightMode*/);
             var newRange = (0, roosterjs_editor_dom_1.setHtmlWithSelectionPath)(tempDiv_1, html, this.editor.getTrustedHTMLHandler());
@@ -6057,7 +6140,7 @@ var CopyPastePlugin = /** @class */ (function () {
                 isCut: isCut,
             });
             this.editor.runAsync(function (editor) {
-                _this.cleanUpAndRestoreSelection(tempDiv_1, originalRange_1, !isCut /* isCopy */);
+                _this.cleanUpAndRestoreSelection(tempDiv_1, selection, !isCut /* isCopy */);
                 if (isCut) {
                     editor.addUndoSnapshot(function () {
                         var position = _this.editor.deleteSelectedContent();
@@ -6086,15 +6169,35 @@ var CopyPastePlugin = /** @class */ (function () {
         return div;
     };
     CopyPastePlugin.prototype.cleanUpAndRestoreSelection = function (tempDiv, range, isCopy) {
-        if (isCopy && roosterjs_editor_dom_1.Browser.isAndroid) {
-            range.collapse();
+        var _a, _b;
+        if (!!((_a = range) === null || _a === void 0 ? void 0 : _a.type) || range.type == 0) {
+            var selection = range;
+            switch (selection.type) {
+                case 1 /* TableSelection */:
+                    this.editor.select(selection.table, selection.coordinates);
+                    break;
+                case 0 /* Normal */:
+                    var range_1 = (_b = selection.ranges) === null || _b === void 0 ? void 0 : _b[0];
+                    this.restoreRange(range_1, isCopy);
+                    break;
+            }
+        }
+        else {
+            this.restoreRange(range, isCopy);
         }
-        this.editor.select(range);
         tempDiv.style.backgroundColor = '';
         tempDiv.style.color = '';
         tempDiv.style.display = 'none';
         (0, roosterjs_editor_dom_1.moveChildNodes)(tempDiv);
     };
+    CopyPastePlugin.prototype.restoreRange = function (range, isCopy) {
+        if (range) {
+            if (isCopy && roosterjs_editor_dom_1.Browser.isAndroid) {
+                range.collapse();
+            }
+            this.editor.select(range);
+        }
+    };
     return CopyPastePlugin;
 }());
 exports.default = CopyPastePlugin;
@@ -7039,6 +7142,140 @@ var MouseUpPlugin = /** @class */ (function () {
 exports.default = MouseUpPlugin;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/corePlugins/NormalizeTablePlugin.ts":
+/*!********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/corePlugins/NormalizeTablePlugin.ts ***!
+  \********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * NormalizeTable plugin makes sure each table in editor has TBODY/THEAD/TFOOT tag around TR tags
+ *
+ * When we retrieve HTML content using innerHTML, browser will always add TBODY around TR nodes if there is not.
+ * This causes some issue when we restore the HTML content with selection path since the selection path is
+ * deeply coupled with DOM structure. So we need to always make sure there is already TBODY tag whenever
+ * new table is inserted, to make sure the selection path we created is correct.
+ */
+var NormalizeTablePlugin = /** @class */ (function () {
+    function NormalizeTablePlugin() {
+    }
+    /**
+     * Get a friendly name of this plugin
+     */
+    NormalizeTablePlugin.prototype.getName = function () {
+        return 'NormalizeTable';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    NormalizeTablePlugin.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    NormalizeTablePlugin.prototype.dispose = function () {
+        this.editor = null;
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    NormalizeTablePlugin.prototype.onPluginEvent = function (event) {
+        switch (event.eventType) {
+            case 11 /* EditorReady */:
+            case 7 /* ContentChanged */:
+                this.normalizeTables(this.editor.queryElements('table'));
+                break;
+            case 10 /* BeforePaste */:
+                this.normalizeTables((0, roosterjs_editor_dom_1.toArray)(event.fragment.querySelectorAll('table')));
+                break;
+            case 5 /* MouseDown */:
+                this.normalizeTableFromEvent(event.rawEvent);
+                break;
+            case 0 /* KeyDown */:
+                if (event.rawEvent.shiftKey) {
+                    this.normalizeTableFromEvent(event.rawEvent);
+                }
+                break;
+        }
+    };
+    NormalizeTablePlugin.prototype.normalizeTableFromEvent = function (event) {
+        var table = this.editor.getElementAtCursor('table', event.target);
+        if (table) {
+            this.normalizeTables([table]);
+        }
+    };
+    NormalizeTablePlugin.prototype.normalizeTables = function (tables) {
+        if (tables.length > 0) {
+            var rangeEx = this.editor.getSelectionRangeEx();
+            var _a = ((rangeEx === null || rangeEx === void 0 ? void 0 : rangeEx.type) == 0 /* Normal */ && rangeEx.ranges[0]) || {}, startContainer = _a.startContainer, endContainer = _a.endContainer, startOffset = _a.startOffset, endOffset = _a.endOffset;
+            var isChanged = normalizeTables(tables);
+            if (isChanged) {
+                if (startContainer && endContainer) {
+                    this.editor.select(startContainer, startOffset, endContainer, endOffset);
+                }
+                else if ((rangeEx === null || rangeEx === void 0 ? void 0 : rangeEx.type) == 1 /* TableSelection */) {
+                    this.editor.select(rangeEx.table, rangeEx.coordinates);
+                }
+            }
+        }
+    };
+    return NormalizeTablePlugin;
+}());
+exports.default = NormalizeTablePlugin;
+function normalizeTables(tables) {
+    var isDOMChanged = false;
+    tables.forEach(function (table) {
+        var tbody = null;
+        for (var child = table.firstChild; child; child = child.nextSibling) {
+            var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(child);
+            switch (tag) {
+                case 'TR':
+                    if (!tbody) {
+                        tbody = table.ownerDocument.createElement('tbody');
+                        table.insertBefore(tbody, child);
+                    }
+                    tbody.appendChild(child);
+                    child = tbody;
+                    isDOMChanged = true;
+                    break;
+                case 'TBODY':
+                    if (tbody) {
+                        (0, roosterjs_editor_dom_1.moveChildNodes)(tbody, child, true /*keepExistingChildren*/);
+                        child.parentNode.removeChild(child);
+                        child = tbody;
+                        isDOMChanged = true;
+                    }
+                    else {
+                        tbody = child;
+                    }
+                    break;
+                default:
+                    tbody = null;
+                    break;
+            }
+        }
+    });
+    return isDOMChanged;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/corePlugins/PendingFormatStatePlugin.ts":
@@ -7231,7 +7468,9 @@ var UndoPlugin = /** @class */ (function () {
      */
     function UndoPlugin(options) {
         this.state = {
-            snapshotsService: options.undoSnapshotService || createUndoSnapshots(),
+            snapshotsService: options.undoMetadataSnapshotService ||
+                createUndoSnapshotServiceBridge(options.undoSnapshotService) ||
+                createUndoSnapshots(),
             isRestoring: false,
             hasNewContent: false,
             isNested: false,
@@ -7301,7 +7540,9 @@ var UndoPlugin = /** @class */ (function () {
                 this.addUndoSnapshot();
                 break;
             case 7 /* ContentChanged */:
-                if (!this.state.isRestoring) {
+                if (!(this.state.isRestoring ||
+                    event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
+                    event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
                     this.clearRedoForInput();
                 }
                 break;
@@ -7387,12 +7628,26 @@ function createUndoSnapshots() {
         canMove: function (delta) { return (0, roosterjs_editor_dom_1.canMoveCurrentSnapshot)(snapshots, delta); },
         move: function (delta) { return (0, roosterjs_editor_dom_1.moveCurrentSnapshot)(snapshots, delta); },
         addSnapshot: function (snapshot, isAutoCompleteSnapshot) {
-            return (0, roosterjs_editor_dom_1.addSnapshot)(snapshots, snapshot, isAutoCompleteSnapshot);
+            return (0, roosterjs_editor_dom_1.addSnapshotV2)(snapshots, snapshot, isAutoCompleteSnapshot);
         },
-        clearRedo: function () { return (0, roosterjs_editor_dom_1.clearProceedingSnapshots)(snapshots); },
+        clearRedo: function () { return (0, roosterjs_editor_dom_1.clearProceedingSnapshotsV2)(snapshots); },
         canUndoAutoComplete: function () { return (0, roosterjs_editor_dom_1.canUndoAutoComplete)(snapshots); },
     };
 }
+function createUndoSnapshotServiceBridge(service) {
+    return service
+        ? {
+            canMove: function (delta) { return service.canMove(delta); },
+            move: function (delta) { return ({ html: service.move(delta), metadata: null }); },
+            addSnapshot: function (snapshot, isAutoCompleteSnapshot) {
+                return service.addSnapshot(snapshot.html +
+                    (snapshot.metadata ? "<!--" + JSON.stringify(snapshot.metadata) + "-->" : ''), isAutoCompleteSnapshot);
+            },
+            clearRedo: function () { return service.clearRedo(); },
+            canUndoAutoComplete: function () { return service.canUndoAutoComplete(); },
+        }
+        : undefined;
+}
 
 
 /***/ }),
@@ -7414,6 +7669,7 @@ var EditPlugin_1 = __webpack_require__(/*! ./EditPlugin */ "./packages/roosterjs
 var EntityPlugin_1 = __webpack_require__(/*! ./EntityPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/EntityPlugin.ts");
 var LifecyclePlugin_1 = __webpack_require__(/*! ./LifecyclePlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts");
 var MouseUpPlugin_1 = __webpack_require__(/*! ./MouseUpPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/MouseUpPlugin.ts");
+var NormalizeTablePlugin_1 = __webpack_require__(/*! ./NormalizeTablePlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/NormalizeTablePlugin.ts");
 var PendingFormatStatePlugin_1 = __webpack_require__(/*! ./PendingFormatStatePlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/PendingFormatStatePlugin.ts");
 var TypeInContainerPlugin_1 = __webpack_require__(/*! ./TypeInContainerPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts");
 var UndoPlugin_1 = __webpack_require__(/*! ./UndoPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/UndoPlugin.ts");
@@ -7438,6 +7694,7 @@ function createCorePlugins(contentDiv, options) {
         mouseUp: map.mouseUp || new MouseUpPlugin_1.default(),
         copyPaste: map.copyPaste || new CopyPastePlugin_1.default(options),
         entity: map.entity || new EntityPlugin_1.default(),
+        normalizeTable: map.normalizeTable || new NormalizeTablePlugin_1.default(),
         lifecycle: map.lifecycle || new LifecyclePlugin_1.default(options, contentDiv),
     };
 }
@@ -8094,12 +8351,13 @@ var Editor = /** @class */ (function () {
      * @param nextDarkMode The next status of dark mode. True if the editor should be in dark mode, false if not.
      */
     Editor.prototype.setDarkModeState = function (nextDarkMode) {
-        if (this.isDarkMode() == nextDarkMode) {
+        if (this.isDarkMode() == !!nextDarkMode) {
             return;
         }
-        var currentContent = this.getContent(0 /* CleanHTML */);
+        this.core.api.transformColor(this.core, this.core.contentDiv, false /*includeSelf*/, null /*callback*/, nextDarkMode
+            ? 0 /* LightToDark */
+            : 1 /* DarkToLight */, true /*forceTransform*/);
         this.triggerContentChangedEvent(nextDarkMode ? "SwitchToDarkMode" /* SwitchToDarkMode */ : "SwitchToLightMode" /* SwitchToLightMode */);
-        this.setContent(currentContent);
     };
     /**
      * Check if the editor is in dark mode
@@ -8108,6 +8366,13 @@ var Editor = /** @class */ (function () {
     Editor.prototype.isDarkMode = function () {
         return this.core.lifecycle.isDarkMode;
     };
+    /**
+     * Transform the given node and all its child nodes to dark mode color if editor is in dark mode
+     * @param node The node to transform
+     */
+    Editor.prototype.transformToDarkColor = function (node) {
+        this.core.api.transformColor(this.core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
+    };
     /**
      * Make the editor in "Shadow Edit" mode.
      * In Shadow Edit mode, all format change will finally be ignored.
@@ -8272,7 +8537,8 @@ var NodeBlockElement = /** @class */ (function () {
      * Get the text content of this block element
      */
     NodeBlockElement.prototype.getTextContent = function () {
-        return this.element ? this.element.textContent : '';
+        var _a;
+        return ((_a = this.element) === null || _a === void 0 ? void 0 : _a.textContent) || '';
     };
     return NodeBlockElement;
 }());
@@ -8316,10 +8582,11 @@ var StartEndBlockElement = /** @class */ (function () {
         this.endNode = endNode;
     }
     StartEndBlockElement.getBlockContext = function (node) {
-        while (node && !(0, isBlockElement_1.default)(node)) {
-            node = node.parentNode;
+        var currentNode = node;
+        while (currentNode && !(0, isBlockElement_1.default)(currentNode)) {
+            currentNode = currentNode.parentNode;
         }
-        return node;
+        return currentNode;
     };
     /**
      * Collapse this element to a single DOM element.
@@ -8327,7 +8594,10 @@ var StartEndBlockElement = /** @class */ (function () {
      * If the content nodes are included in root node with other nodes, split root node
      */
     StartEndBlockElement.prototype.collapseToSingleElement = function () {
-        var nodes = (0, collapseNodes_1.default)(StartEndBlockElement.getBlockContext(this.startNode), this.startNode, this.endNode, true /*canSplitParent*/);
+        var nodeContext = StartEndBlockElement.getBlockContext(this.startNode);
+        var nodes = nodeContext
+            ? (0, collapseNodes_1.default)(nodeContext, this.startNode, this.endNode, true /*canSplitParent*/)
+            : [];
         var blockContext = StartEndBlockElement.getBlockContext(this.startNode);
         while (nodes[0] &&
             nodes[0] != blockContext &&
@@ -8435,7 +8705,10 @@ function getBlockElementAtNode(rootNode, node) {
     // NOTE: this container block could be just the rootNode,
     // which cannot be used to create block element. We will special case handle it later on
     var containerBlockNode = StartEndBlockElement_1.default.getBlockContext(node);
-    if (containerBlockNode == node) {
+    if (!containerBlockNode) {
+        return null;
+    }
+    else if (containerBlockNode == node) {
         return new NodeBlockElement_1.default(containerBlockNode);
     }
     // Find the head and leaf node in the block
@@ -8465,7 +8738,7 @@ function getBlockElementAtNode(rootNode, node) {
                 }
                 break;
             }
-            else if (parentNode != rootNode) {
+            else if (parentNode && parentNode != rootNode) {
                 // Continue collapsing to parent
                 headNode = tailNode = parentNode;
             }
@@ -8495,7 +8768,7 @@ function findHeadTailLeafNode(node, containerBlockNode, isTail) {
     }
     while (result) {
         var sibling = node;
-        while (!(sibling = isTail ? node.nextSibling : node.previousSibling)) {
+        while (node.parentNode && !(sibling = isTail ? node.nextSibling : node.previousSibling)) {
             node = node.parentNode;
             if (node == containerBlockNode) {
                 return result;
@@ -8541,7 +8814,7 @@ function getFirstLastBlockElement(rootNode, isFirst) {
     do {
         node = node && (isFirst ? node.firstChild : node.lastChild);
     } while (node && node.firstChild);
-    return node && (0, getBlockElementAtNode_1.default)(rootNode, node);
+    return (node && (0, getBlockElementAtNode_1.default)(rootNode, node)) || null;
 }
 exports.default = getFirstLastBlockElement;
 
@@ -8652,6 +8925,7 @@ function extractClipboardItems(items, options) {
         types: [],
         text: '',
         image: null,
+        files: [],
         rawHtml: null,
         customValues: {},
     };
@@ -8676,6 +8950,16 @@ function extractClipboardItems(items, options) {
                 }
             });
         }
+        else if (item.kind == 'file') {
+            return new Promise(function (resolve) {
+                var file = item.getAsFile();
+                if (!!file) {
+                    data.types.push(type);
+                    data.files.push(file);
+                }
+                resolve();
+            });
+        }
         else {
             var customType_1 = getAllowedCustomType(type, options === null || options === void 0 ? void 0 : options.allowedCustomPasteType);
             var handler_1 = contentHandlers[type] || (customType_1 ? contentHandlers[OTHER_TEXT_TYPE] : null);
@@ -8756,6 +9040,7 @@ function extractClipboardItemsForIE(dataTransfer, callback, options) {
         types: dataTransfer.types ? (0, toArray_1.default)(dataTransfer.types) : [],
         text: dataTransfer.getData('text'),
         image: null,
+        files: [],
         rawHtml: null,
         customValues: {},
     };
@@ -8897,6 +9182,8 @@ var ContentTraverser = /** @class */ (function () {
     function ContentTraverser(scoper, skipTags) {
         this.scoper = scoper;
         this.skipTags = skipTags;
+        this.currentInline = null;
+        this.currentBlock = null;
     }
     /**
      * Create a content traverser for the whole body of given root node
@@ -9087,8 +9374,20 @@ var PositionContentSearcher = /** @class */ (function () {
         this.position = position;
         // The cached text before position that has been read so far
         this.text = '';
+        // The cached word before position
+        this.word = '';
+        // The inline element before position
+        this.inlineBefore = null;
+        // The inline element after position
+        this.inlineAfter = null;
+        // The content traverser used to traverse backwards
+        this.traverser = null;
+        // Backward parsing has completed
+        this.traversingComplete = false;
         // All inline elements before position that have been read so far
         this.inlineElements = [];
+        // First non-text inline before position
+        this.nearestNonTextInlineElement = null;
     }
     /**
      * Get the word before position. The word is determined by scanning backwards till the first white space, the portion
@@ -9100,7 +9399,7 @@ var PositionContentSearcher = /** @class */ (function () {
         if (!this.word) {
             this.traverse(function () { return _this.word; });
         }
-        return this.word;
+        return this.word || '';
     };
     /**
      * Get the inline element before position
@@ -9147,8 +9446,8 @@ var PositionContentSearcher = /** @class */ (function () {
         if (!text) {
             return null;
         }
-        var startPosition;
-        var endPosition;
+        var startPosition = null;
+        var endPosition = null;
         var textIndex = text.length - 1;
         this.forEachTextInlineElement(function (textInline) {
             var nodeContent = textInline.getTextContent() || '';
@@ -9389,6 +9688,8 @@ var SelectionScoper = /** @class */ (function () {
      */
     function SelectionScoper(rootNode, range) {
         this.rootNode = rootNode;
+        this.startBlock = null;
+        this.startInline = null;
         this.start = Position_1.default.getStart(range).normalize();
         this.end = Position_1.default.getEnd(range).normalize();
     }
@@ -9421,7 +9722,7 @@ var SelectionScoper = /** @class */ (function () {
         var inScope = false;
         var selStartBlock = this.getStartBlockElement();
         if (this.start.equalTo(this.end)) {
-            inScope = selStartBlock && selStartBlock.equals(block);
+            inScope = !!selStartBlock && selStartBlock.equals(block);
         }
         else {
             var selEndBlock = (0, getBlockElementAtNode_1.default)(this.rootNode, this.end.node);
@@ -9430,8 +9731,8 @@ var SelectionScoper = /** @class */ (function () {
             // 2) The end of selection falls on the block
             // 3) the block falls in-between selection start and end
             inScope =
-                selStartBlock &&
-                    selEndBlock &&
+                !!selStartBlock &&
+                    !!selEndBlock &&
                     (block.equals(selStartBlock) ||
                         block.equals(selEndBlock) ||
                         (block.isAfter(selStartBlock) && selEndBlock.isAfter(block)));
@@ -9466,7 +9767,7 @@ var SelectionScoper = /** @class */ (function () {
         return start.isAfter(end) || start.equalTo(end)
             ? null
             : startPartial || endPartial
-                ? new PartialInlineElement_1.default(inline, startPartial && start, endPartial && end)
+                ? new PartialInlineElement_1.default(inline, startPartial ? start : undefined, endPartial ? end : undefined)
                 : inline;
     };
     return SelectionScoper;
@@ -9555,13 +9856,14 @@ function adjustInsertPositionForHyperLink(root, nodeToInsert, position, range) {
  * Adjust position for a node don't be nested inside tags like BR, LI, TD.
  */
 function adjustInsertPositionForStructuredNode(root, nodeToInsert, position, range) {
+    var _a, _b, _c;
     var rootNodeToInsert = nodeToInsert;
     if (rootNodeToInsert.nodeType == 11 /* DocumentFragment */) {
         var rootNodes = (0, toArray_1.default)(rootNodeToInsert.childNodes).filter(function (n) { return (0, getTagOfNode_1.default)(n) != 'BR'; });
         rootNodeToInsert = rootNodes.length == 1 ? rootNodes[0] : null;
     }
     var tag = (0, getTagOfNode_1.default)(rootNodeToInsert);
-    var hasBrNextToRoot = tag && (0, getTagOfNode_1.default)(rootNodeToInsert.nextSibling) == 'BR';
+    var hasBrNextToRoot = tag && rootNodeToInsert && (0, getTagOfNode_1.default)(rootNodeToInsert.nextSibling) == 'BR';
     var listItem = (0, findClosestElementAncestor_1.default)(position.node, root, 'LI');
     var listNode = listItem && (0, findClosestElementAncestor_1.default)(listItem, root, 'OL,UL');
     var tdNode = (0, findClosestElementAncestor_1.default)(position.node, root, 'TD,TH');
@@ -9570,7 +9872,9 @@ function adjustInsertPositionForStructuredNode(root, nodeToInsert, position, ran
         tag = listNode ? (0, getTagOfNode_1.default)(listNode) : 'UL';
         rootNodeToInsert = (0, wrap_1.default)(rootNodeToInsert, tag);
     }
-    if ((tag == 'OL' || tag == 'UL') && (0, getTagOfNode_1.default)(rootNodeToInsert.firstChild) == 'LI') {
+    if ((tag == 'OL' || tag == 'UL') &&
+        rootNodeToInsert &&
+        (0, getTagOfNode_1.default)(rootNodeToInsert.firstChild) == 'LI') {
         var shouldInsertListAsText = !rootNodeToInsert.firstChild.nextSibling && !hasBrNextToRoot;
         if (hasBrNextToRoot && rootNodeToInsert.parentNode) {
             safeRemove(rootNodeToInsert.nextSibling);
@@ -9592,12 +9896,12 @@ function adjustInsertPositionForStructuredNode(root, nodeToInsert, position, ran
         var newTable = new VTable_1.default(rootNodeToInsert);
         var currentTable = new VTable_1.default(tdNode);
         if (currentTable.col == 0 &&
-            tdNode == currentTable.getCell(currentTable.row, 0).td &&
-            newTable.cells[0] &&
-            newTable.cells[0].length == currentTable.cells[0].length &&
+            tdNode == currentTable.getCell(currentTable.row || 0, 0).td &&
+            ((_a = newTable.cells) === null || _a === void 0 ? void 0 : _a[0]) &&
+            newTable.cells[0].length == ((_b = currentTable.cells) === null || _b === void 0 ? void 0 : _b[0].length) &&
             (0, isPositionAtBeginningOf_1.default)(position, tdNode)) {
             if ((0, getTagOfNode_1.default)(rootNodeToInsert.firstChild) == 'TBODY' &&
-                !rootNodeToInsert.firstChild.nextSibling) {
+                !((_c = rootNodeToInsert.firstChild) === null || _c === void 0 ? void 0 : _c.nextSibling)) {
                 (0, unwrap_1.default)(rootNodeToInsert.firstChild);
             }
             (0, unwrap_1.default)(rootNodeToInsert);
@@ -9726,13 +10030,15 @@ function deleteSelectedContent(root, range) {
     nodesToDelete.forEach(function (node) { var _a; return (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node); });
     // 4. Merge lines for each region, so that after we don't see extra line breaks
     nodesPairToMerge.forEach(function (nodes) {
-        return (0, mergeBlocksInRegion_1.default)(nodes.region, nodes.beforeStart, nodes.afterEnd);
+        if (nodes) {
+            (0, mergeBlocksInRegion_1.default)(nodes.region, nodes.beforeStart, nodes.afterEnd);
+        }
     });
     return nodeBefore && new Position_1.default(nodeBefore, -1 /* End */);
 }
 exports.default = deleteSelectedContent;
 function ensureBeforeAndAfter(node, offset, isStart) {
-    var _a;
+    var _a, _b;
     if ((0, safeInstanceOf_1.default)(node, 'Text')) {
         var newNode = (0, splitTextNode_1.default)(node, offset, isStart);
         return isStart ? [newNode, node] : [node, newNode];
@@ -9759,7 +10065,7 @@ function ensureBeforeAndAfter(node, offset, isStart) {
         // need to add empty text node to convert to condition 3
         if ((nodeBefore || nodeAfter) && (!nodeBefore || !nodeAfter)) {
             var emptyNode = node.ownerDocument.createTextNode('');
-            (_a = (nodeBefore || nodeAfter).parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(emptyNode, nodeAfter);
+            (_b = (_a = (nodeBefore || nodeAfter)) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(emptyNode, nodeAfter);
             if (nodeBefore) {
                 nodeAfter = emptyNode;
             }
@@ -10579,7 +10885,6 @@ var HTML_TAG_REPLACEMENT = {
     table: '*',
     tbody: '*',
     td: '*',
-    template: '*',
     textarea: '*',
     tfoot: '*',
     th: '*',
@@ -10612,6 +10917,7 @@ var HTML_TAG_REPLACEMENT = {
     slot: null,
     source: null,
     style: null,
+    template: null,
     title: null,
     track: null,
     video: null,
@@ -10842,7 +11148,7 @@ exports.default = getPredefinedCssForElement;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.toArray = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.arrayPush = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
-exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.VTable = exports.moveChildNodes = void 0;
+exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = exports.VTable = exports.moveChildNodes = void 0;
 var getBlockElementAtNode_1 = __webpack_require__(/*! ./blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
 Object.defineProperty(exports, "getBlockElementAtNode", { enumerable: true, get: function () { return getBlockElementAtNode_1.default; } });
 var getFirstLastBlockElement_1 = __webpack_require__(/*! ./blockElements/getFirstLastBlockElement */ "./packages/roosterjs-editor-dom/lib/blockElements/getFirstLastBlockElement.ts");
@@ -10940,6 +11246,8 @@ var moveChildNodes_1 = __webpack_require__(/*! ./utils/moveChildNodes */ "./pack
 Object.defineProperty(exports, "moveChildNodes", { enumerable: true, get: function () { return moveChildNodes_1.default; } });
 var VTable_1 = __webpack_require__(/*! ./table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
 Object.defineProperty(exports, "VTable", { enumerable: true, get: function () { return VTable_1.default; } });
+var isWholeTableSelected_1 = __webpack_require__(/*! ./table/isWholeTableSelected */ "./packages/roosterjs-editor-dom/lib/table/isWholeTableSelected.ts");
+Object.defineProperty(exports, "isWholeTableSelected", { enumerable: true, get: function () { return isWholeTableSelected_1.default; } });
 var VList_1 = __webpack_require__(/*! ./list/VList */ "./packages/roosterjs-editor-dom/lib/list/VList.ts");
 Object.defineProperty(exports, "VList", { enumerable: true, get: function () { return VList_1.default; } });
 var VListItem_1 = __webpack_require__(/*! ./list/VListItem */ "./packages/roosterjs-editor-dom/lib/list/VListItem.ts");
@@ -10976,14 +11284,17 @@ var getHtmlWithSelectionPath_1 = __webpack_require__(/*! ./selection/getHtmlWith
 Object.defineProperty(exports, "getHtmlWithSelectionPath", { enumerable: true, get: function () { return getHtmlWithSelectionPath_1.default; } });
 var setHtmlWithSelectionPath_1 = __webpack_require__(/*! ./selection/setHtmlWithSelectionPath */ "./packages/roosterjs-editor-dom/lib/selection/setHtmlWithSelectionPath.ts");
 Object.defineProperty(exports, "setHtmlWithSelectionPath", { enumerable: true, get: function () { return setHtmlWithSelectionPath_1.default; } });
+Object.defineProperty(exports, "setHtmlWithMetadata", { enumerable: true, get: function () { return setHtmlWithSelectionPath_1.setHtmlWithMetadata; } });
 var addRangeToSelection_1 = __webpack_require__(/*! ./selection/addRangeToSelection */ "./packages/roosterjs-editor-dom/lib/selection/addRangeToSelection.ts");
 Object.defineProperty(exports, "addRangeToSelection", { enumerable: true, get: function () { return addRangeToSelection_1.default; } });
 var addSnapshot_1 = __webpack_require__(/*! ./snapshots/addSnapshot */ "./packages/roosterjs-editor-dom/lib/snapshots/addSnapshot.ts");
 Object.defineProperty(exports, "addSnapshot", { enumerable: true, get: function () { return addSnapshot_1.default; } });
+Object.defineProperty(exports, "addSnapshotV2", { enumerable: true, get: function () { return addSnapshot_1.addSnapshotV2; } });
 var canMoveCurrentSnapshot_1 = __webpack_require__(/*! ./snapshots/canMoveCurrentSnapshot */ "./packages/roosterjs-editor-dom/lib/snapshots/canMoveCurrentSnapshot.ts");
 Object.defineProperty(exports, "canMoveCurrentSnapshot", { enumerable: true, get: function () { return canMoveCurrentSnapshot_1.default; } });
 var clearProceedingSnapshots_1 = __webpack_require__(/*! ./snapshots/clearProceedingSnapshots */ "./packages/roosterjs-editor-dom/lib/snapshots/clearProceedingSnapshots.ts");
 Object.defineProperty(exports, "clearProceedingSnapshots", { enumerable: true, get: function () { return clearProceedingSnapshots_1.default; } });
+Object.defineProperty(exports, "clearProceedingSnapshotsV2", { enumerable: true, get: function () { return clearProceedingSnapshots_1.clearProceedingSnapshotsV2; } });
 var moveCurrentSnapshot_1 = __webpack_require__(/*! ./snapshots/moveCurrentSnapshot */ "./packages/roosterjs-editor-dom/lib/snapshots/moveCurrentSnapshot.ts");
 Object.defineProperty(exports, "moveCurrentSnapshot", { enumerable: true, get: function () { return moveCurrentSnapshot_1.default; } });
 Object.defineProperty(exports, "moveCurrentSnapsnot", { enumerable: true, get: function () { return moveCurrentSnapshot_1.moveCurrentSnapsnot; } });
@@ -11220,9 +11531,9 @@ var NodeInlineElement = /** @class */ (function () {
      */
     NodeInlineElement.prototype.getTextContent = function () {
         // nodeValue is better way to retrieve content for a text. Others, just use textContent
-        return this.containerNode.nodeType == 3 /* Text */
+        return ((this.containerNode.nodeType == 3 /* Text */
             ? this.containerNode.nodeValue
-            : this.containerNode.textContent;
+            : this.containerNode.textContent) || '');
     };
     /**
      * Get the container node
@@ -11306,6 +11617,8 @@ var getLeafSibling_1 = __webpack_require__(/*! ../utils/getLeafSibling */ "./pac
  */
 var PartialInlineElement = /** @class */ (function () {
     function PartialInlineElement(inlineElement, start, end) {
+        if (start === void 0) { start = null; }
+        if (end === void 0) { end = null; }
         this.inlineElement = inlineElement;
         this.start = start;
         this.end = end;
@@ -11352,7 +11665,7 @@ var PartialInlineElement = /** @class */ (function () {
          * Get next partial inline element if it is not at the end boundary yet
          */
         get: function () {
-            return this.end && new PartialInlineElement(this.inlineElement, this.end, null);
+            return this.end ? new PartialInlineElement(this.inlineElement, this.end) : null;
         },
         enumerable: false,
         configurable: true
@@ -11362,7 +11675,9 @@ var PartialInlineElement = /** @class */ (function () {
          * Get previous partial inline element if it is not at the begin boundary yet
          */
         get: function () {
-            return this.start && new PartialInlineElement(this.inlineElement, null, this.start);
+            return this.start
+                ? new PartialInlineElement(this.inlineElement, undefined, this.start)
+                : null;
         },
         enumerable: false,
         configurable: true
@@ -11402,7 +11717,7 @@ var PartialInlineElement = /** @class */ (function () {
             var previousNode = (0, getLeafSibling_1.getPreviousLeafSibling)(container, to.node);
             to = previousNode ? new Position_1.default(previousNode, -1 /* End */) : null;
         }
-        (0, applyTextStyle_1.default)(container, styler, from, to);
+        (0, applyTextStyle_1.default)(container, styler, from || undefined, to || undefined);
     };
     return PartialInlineElement;
 }());
@@ -11432,35 +11747,39 @@ var STYLET_AGS = 'SPAN,B,I,U,EM,STRONG,STRIKE,S,SMALL'.split(',');
  * Apply style using a styler function to the given container node in the given range
  * @param container The container node to apply style to
  * @param styler The styler function
- * @param from From position
- * @param to To position
+ * @param fromPosition From position
+ * @param toPosition To position
  */
 function applyTextStyle(container, styler, from, to) {
     if (from === void 0) { from = new Position_1.default(container, 0 /* Begin */).normalize(); }
     if (to === void 0) { to = new Position_1.default(container, -1 /* End */).normalize(); }
     var formatNodes = [];
-    while (from && to && to.isAfter(from)) {
-        var formatNode = from.node;
+    var fromPosition = from;
+    var toPosition = to;
+    while (fromPosition && toPosition && toPosition.isAfter(fromPosition)) {
+        var formatNode = fromPosition.node;
         var parentTag = (0, getTagOfNode_1.default)(formatNode.parentNode);
         // The code below modifies DOM. Need to get the next sibling first otherwise you won't be able to reliably get a good next sibling node
         var nextNode = (0, getLeafSibling_1.getNextLeafSibling)(container, formatNode);
         if (formatNode.nodeType == 3 /* Text */ && ['TR', 'TABLE'].indexOf(parentTag) < 0) {
-            if (formatNode == to.node && !to.isAtEnd) {
-                formatNode = (0, splitTextNode_1.default)(formatNode, to.offset, true /*returnFirstPart*/);
+            if (formatNode == toPosition.node && !toPosition.isAtEnd) {
+                formatNode = (0, splitTextNode_1.default)(formatNode, toPosition.offset, true /*returnFirstPart*/);
             }
-            if (from.offset > 0) {
-                formatNode = (0, splitTextNode_1.default)(formatNode, from.offset, false /*returnFirstPart*/);
+            if (fromPosition.offset > 0) {
+                formatNode = (0, splitTextNode_1.default)(formatNode, fromPosition.offset, false /*returnFirstPart*/);
             }
             formatNodes.push(formatNode);
         }
-        from = nextNode && new Position_1.default(nextNode, 0 /* Begin */);
+        fromPosition = nextNode && new Position_1.default(nextNode, 0 /* Begin */);
     }
     if (formatNodes.length > 0) {
         if (formatNodes.every(function (node) { return node.parentNode == formatNodes[0].parentNode; })) {
             var newNode_1 = formatNodes.shift();
             formatNodes.forEach(function (node) {
-                newNode_1.nodeValue += node.nodeValue;
-                node.parentNode.removeChild(node);
+                var _a;
+                var newNodeValue = (newNode_1.nodeValue || '') + (node.nodeValue || '');
+                newNode_1.nodeValue = newNodeValue;
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
             });
             formatNodes = [newNode_1];
         }
@@ -11629,7 +11948,8 @@ function getInlineElementBeforeAfter(root, position, isAfter) {
         return null;
     }
     position = position.normalize();
-    var node = position.node, offset = position.offset, isAtEnd = position.isAtEnd;
+    var offset = position.offset, isAtEnd = position.isAtEnd;
+    var node = position.node;
     var isPartial = false;
     if ((!isAfter && offset == 0 && !isAtEnd) || (isAfter && isAtEnd)) {
         node = (0, getLeafSibling_1.getLeafSibling)(root, node, isAfter);
@@ -11644,8 +11964,8 @@ function getInlineElementBeforeAfter(root, position, isAfter) {
     var inlineElement = (0, getInlineElementAtNode_1.default)(root, node);
     if (inlineElement && (isPartial || inlineElement.contains(position))) {
         inlineElement = isAfter
-            ? new PartialInlineElement_1.default(inlineElement, position, null)
-            : new PartialInlineElement_1.default(inlineElement, null, position);
+            ? new PartialInlineElement_1.default(inlineElement, position, undefined)
+            : new PartialInlineElement_1.default(inlineElement, undefined, position);
     }
     return inlineElement;
 }
@@ -11839,9 +12159,10 @@ var VList = /** @class */ (function () {
         // Use a placeholder to hold the position since the root list may be moved into document fragment later
         this.rootList.parentNode.replaceChild(placeholder, this.rootList);
         this.items.forEach(function (item) {
-            if (item.getNewListStart() && item.getNewListStart() != start) {
+            var newListStart = item.getNewListStart();
+            if (newListStart && newListStart != start) {
                 listStack.splice(1, listStack.length - 1);
-                start = item.getNewListStart();
+                start = newListStart;
             }
             item.writeBack(listStack, _this.rootList);
             var topList = listStack[1];
@@ -11862,9 +12183,6 @@ var VList = /** @class */ (function () {
         });
         // Restore the content to the position of placeholder
         placeholder.parentNode.replaceChild(listStack[0], placeholder);
-        // Set rootList to null to avoid this to be called again for the same VList, because
-        // after change the rootList may not be available any more (e.g. outdent all items).
-        this.rootList = null;
     };
     /**
      * Sets the New List Start Property, that is going to be used to create a new List in the WriteBack function
@@ -11883,14 +12201,23 @@ var VList = /** @class */ (function () {
             }
         }
     };
-    VList.prototype.setIndentation = function (start, end, indentation, softOutdent) {
+    VList.prototype.setIndentation = function (start, end, indentation, softOutdent, preventItemRemoval) {
+        var _this = this;
+        if (preventItemRemoval === void 0) { preventItemRemoval = false; }
+        var shouldAddMargin = false;
         this.findListItems(start, end, function (item) {
-            return indentation == 1 /* Decrease */
+            shouldAddMargin = shouldAddMargin || _this.items.indexOf(item) == 0;
+            indentation == 1 /* Decrease */
                 ? softOutdent && !item.isDummy()
                     ? item.setIsDummy(true /*isDummy*/)
-                    : item.outdent()
+                    : item.outdent(preventItemRemoval)
                 : item.indent();
         });
+        if (shouldAddMargin && preventItemRemoval) {
+            for (var index = 0; index < this.items.length; index++) {
+                this.items[index].addNegativeMargins();
+            }
+        }
     };
     /**
      * Change list type of the given range of this list.
@@ -11944,16 +12271,33 @@ var VList = /** @class */ (function () {
     };
     /**
      * Get the index of the List Item in the current List
+     * If the root list is:
+     * Ordered list, the listIndex start count is going to be the start property of the OL - 1,
+     * @example For example if we want to find the index of Item 2 in the list below, the returned index is going to be 6
+     *  * ```html
+     * <ol start="5">
+     *   <li>item 1</li>
+     *   <li>item 2</li> <!-- Node to find -->
+     *   <li>item 3</li>
+     * </ol>
+     * ```
+     * Unordered list, the listIndex start count starts from 0
+     * @example For example if we want to find the index of Item 2 in the list below, the returned index is going to be 2
+     * ```html
+     * <ul>
+     *   <li>item 1</li>
+     *   <li>item 2</li> <!-- Node to find -->
+     *   <li>item 3</li>
+     * </ul>
+     * ```
      * @param input List item to find in the root list
      */
     VList.prototype.getListItemIndex = function (input) {
         if (this.items) {
-            var listIndex = this.getStart() - 1;
+            var listIndex = (this.getStart() || 1) - 1;
             for (var index = 0; index < this.items.length; index++) {
                 var child = this.items[index];
-                if (child.getListType() == 1 /* Ordered */ &&
-                    child.getLevel() == 1 &&
-                    !child.isDummy()) {
+                if (child.getLevel() == 1 && !child.isDummy()) {
                     listIndex++;
                 }
                 if (child.getNode() == input) {
@@ -12000,7 +12344,7 @@ var VList = /** @class */ (function () {
             if ((0, getListTypeFromNode_1.isListElement)(item)) {
                 _this.populateItems(item, newListTypes);
             }
-            else if (item.nodeType != 3 /* Text */ || item.nodeValue.trim() != '') {
+            else if (item.nodeType != 3 /* Text */ || (item.nodeValue || '').trim() != '') {
                 _this.items.push(new (VListItem_1.default.bind.apply(VListItem_1.default, __spreadArray([void 0, item], newListTypes, false)))());
             }
         });
@@ -12102,7 +12446,7 @@ var VListChain = /** @class */ (function () {
                     var chain = chains.filter(function (c) { return c.canAppendToTail(list); })[0] ||
                         new VListChain(region, (nameGenerator || createListChainName)());
                     var index = chains.indexOf(chain);
-                    var afterCurrentNode = currentNode && (0, isNodeAfter_1.default)(list, currentNode);
+                    var afterCurrentNode = !!currentNode && (0, isNodeAfter_1.default)(list, currentNode);
                     if (!afterCurrentNode) {
                         // Make sure current one is at the front if current block has not been met, so that
                         // the first chain is always the nearest one from current node
@@ -12135,7 +12479,7 @@ var VListChain = /** @class */ (function () {
      * @param startNumber Start number of the new list
      */
     VListChain.prototype.createVListAtBlock = function (container, startNumber) {
-        if (container) {
+        if (container && container.parentNode) {
             var list = container.ownerDocument.createElement('ol');
             list.start = startNumber;
             this.applyChainName(list);
@@ -12159,7 +12503,7 @@ var VListChain = /** @class */ (function () {
             var list = lists[i];
             list.start = lastNumber + 1;
             var vlist = new VList_1.default(list);
-            lastNumber = vlist.getLastItemNumber();
+            lastNumber = vlist.getLastItemNumber() || 0;
             delete list.dataset[CHAIN_DATASET_NAME];
             delete list.dataset[AFTER_CURSOR_DATASET_NAME];
             vlist.writeBack();
@@ -12179,7 +12523,7 @@ var VListChain = /** @class */ (function () {
      */
     VListChain.prototype.append = function (list, isAfterCurrentNode) {
         this.applyChainName(list);
-        this.lastNumber = new VList_1.default(list).getLastItemNumber();
+        this.lastNumber = new VList_1.default(list).getLastItemNumber() || 0;
         if (isAfterCurrentNode) {
             list.dataset[AFTER_CURSOR_DATASET_NAME] = 'true';
         }
@@ -12234,6 +12578,8 @@ var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterj
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
 var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
+var MARGIN_BASE = '0in 0in 0in 0.5in';
+var NEGATIVE_MARGIN = '-.25in';
 /**
  * !!! Never directly create instance of this class. It should be created within VList class !!!
  *
@@ -12335,6 +12681,11 @@ var VListItem = /** @class */ (function () {
      * If this is not an list item, it will be no op
      */
     VListItem.prototype.indent = function () {
+        if (this.node.style.marginLeft == NEGATIVE_MARGIN) {
+            this.node.style.margin = '';
+            this.node.style.marginLeft = '';
+            return;
+        }
         var listType = this.getListType();
         if (listType != 0 /* None */) {
             this.listTypes.push(listType);
@@ -12343,12 +12694,22 @@ var VListItem = /** @class */ (function () {
     /**
      * Outdent this item
      * If this item is already not an list item, it will be no op
+     * @param preventItemRemoval Whether prevent the list item to be removed for the listItem by default false
      */
-    VListItem.prototype.outdent = function () {
-        if (this.listTypes.length > 1) {
+    VListItem.prototype.outdent = function (preventItemRemoval) {
+        if (preventItemRemoval === void 0) { preventItemRemoval = false; }
+        var expectedLength = preventItemRemoval ? 2 : 1;
+        if (this.listTypes.length > expectedLength) {
             this.listTypes.pop();
         }
     };
+    /**
+     * Add negative margin to the List item
+     */
+    VListItem.prototype.addNegativeMargins = function () {
+        this.node.style.margin = MARGIN_BASE;
+        this.node.style.marginLeft = NEGATIVE_MARGIN;
+    };
     /**
      * Change list type of this item
      * @param targetType The target list type to change to
@@ -12406,7 +12767,7 @@ var VListItem = /** @class */ (function () {
         }
         // 3. Add current node into deepest list element
         listStack[listStack.length - 1].appendChild(this.node);
-        this.node.style.display = this.dummy ? 'block' : null;
+        this.node.style.setProperty('display', this.dummy ? 'block' : null);
         // 4. Inherit styles of the child element to the li, so we are able to apply the styles to the ::marker
         if (this.listTypes.length > 1) {
             if (!(this.node.style.fontSize || this.node.style.color || this.node.style.fontFamily)) {
@@ -12448,7 +12809,7 @@ function createListElement(newRoot, listType, nextLevel, originalRoot) {
         result = doc.createElement(listType == 1 /* Ordered */ ? 'ol' : 'ul');
     }
     if (listType == 1 /* Ordered */ && nextLevel > 1) {
-        result.style.listStyleType = orderListStyles[(nextLevel - 1) % orderListStyles.length];
+        result.style.setProperty('list-style-type', orderListStyles[(nextLevel - 1) % orderListStyles.length]);
     }
     return result;
 }
@@ -12545,18 +12906,22 @@ function createVListFromRegion(region, includeSiblingLists, startNode) {
     }
     var vList = null;
     if (nodes.length > 0) {
-        var firstNode = nodes.shift();
+        var firstNode = nodes.shift() || null;
         vList = (0, getListTypeFromNode_1.isListElement)(firstNode)
             ? new VList_1.default(firstNode)
-            : createVListFromItemNode(firstNode);
-        nodes.forEach(function (node) {
-            if ((0, getListTypeFromNode_1.isListElement)(node)) {
-                vList.mergeVList(new VList_1.default(node));
-            }
-            else {
-                vList.appendItem(node, 0 /* None */);
-            }
-        });
+            : firstNode
+                ? createVListFromItemNode(firstNode)
+                : null;
+        if (vList) {
+            nodes.forEach(function (node) {
+                if ((0, getListTypeFromNode_1.isListElement)(node)) {
+                    vList.mergeVList(new VList_1.default(node));
+                }
+                else {
+                    vList.appendItem(node, 0 /* None */);
+                }
+            });
+        }
     }
     return vList;
 }
@@ -12706,11 +13071,11 @@ exports.default = setListItemStyle;
 function getInlineChildElementsStyle(element) {
     var result = [];
     var contentTraverser = ContentTraverser_1.default.createBodyTraverser(element);
-    var currentInlineElement;
+    var currentInlineElement = null;
     while (contentTraverser.currentInlineElement != currentInlineElement) {
         currentInlineElement = contentTraverser.currentInlineElement;
-        var currentNode = currentInlineElement.getContainerNode();
-        currentNode = (0, findClosestElementAncestor_1.default)(currentNode);
+        var currentNode = (currentInlineElement === null || currentInlineElement === void 0 ? void 0 : currentInlineElement.getContainerNode()) || null;
+        currentNode = currentNode ? (0, findClosestElementAncestor_1.default)(currentNode) : null;
         if ((0, safeInstanceOf_1.default)(currentNode, 'HTMLElement')) {
             var childStyle = (0, getStyles_1.default)(currentNode);
             if (childStyle) {
@@ -12884,7 +13249,10 @@ function iterateNodes(creator, boundary, start, end, started) {
     var children = boundary.children, innerNode = boundary.innerNode;
     var regions = [];
     if (children.length == 0) {
-        regions.push(creator(innerNode));
+        var region = creator(innerNode);
+        if (region) {
+            regions.push(region);
+        }
     }
     else {
         // Need to run one more time to add region after all children
@@ -12892,7 +13260,10 @@ function iterateNodes(creator, boundary, start, end, started) {
             var _b = children[i] || {}, outerNode = _b.outerNode, boundaries = _b.boundaries;
             var previousOuterNode = (_a = children[i - 1]) === null || _a === void 0 ? void 0 : _a.outerNode;
             if (started) {
-                regions.push(creator(innerNode, previousOuterNode, outerNode));
+                var region = creator(innerNode, previousOuterNode, outerNode);
+                if (region) {
+                    regions.push(region);
+                }
             }
             boundaries === null || boundaries === void 0 ? void 0 : boundaries.forEach(function (child) {
                 var _a;
@@ -12985,7 +13356,10 @@ function getSelectedBlockElementsInRegion(regionBase, createBlockIfEmpty) {
     if (blocks.length == 0 && regionBase && !regionBase.rootNode.firstChild && createBlockIfEmpty) {
         var newNode = (0, createElement_1.default)(1 /* EmptyLine */, regionBase.rootNode.ownerDocument);
         regionBase.rootNode.appendChild(newNode);
-        blocks.push((0, getBlockElementAtNode_1.default)(regionBase.rootNode, newNode));
+        var block = (0, getBlockElementAtNode_1.default)(regionBase.rootNode, newNode);
+        if (block) {
+            blocks.push(block);
+        }
     }
     return blocks;
 }
@@ -13039,10 +13413,8 @@ function getSelectionRangeInRegion(regionBase) {
             var end = fullSelectionEnd.isAfter(regionEnd) ? regionEnd : fullSelectionEnd;
             return (0, createRange_1.default)(start, end);
         }
-        else {
-            return null;
-        }
     }
+    return null;
 }
 exports.default = getSelectionRangeInRegion;
 function isRegion(regionBase) {
@@ -13119,7 +13491,7 @@ var collapseNodes_1 = __webpack_require__(/*! ../utils/collapseNodes */ "./packa
  * @param targetNode The node of target block element
  */
 function mergeBlocksInRegion(region, refNode, targetNode) {
-    var _a, _b;
+    var _a, _b, _c;
     var block;
     if (!(0, isNodeInRegion_1.default)(region, refNode) ||
         !(0, isNodeInRegion_1.default)(region, targetNode) ||
@@ -13143,13 +13515,13 @@ function mergeBlocksInRegion(region, refNode, targetNode) {
         ? blockRoot.firstChild
         : (0, changeElementTag_1.default)(blockRoot, 'SPAN');
     // Remove empty node
-    for (var node = nodeToMerge; (0, contains_1.default)(commonContainer, node) && node.parentNode.childNodes.length == 1; node = node.parentNode) {
+    for (var node = nodeToMerge; (0, contains_1.default)(commonContainer, node) && ((_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.childNodes.length) == 1; node = node.parentNode) {
         // If the only child is the one which is about to be removed, this node should also be removed
         nodeToRemove = node.parentNode;
     }
     // Finally, merge blocks, and remove empty nodes
-    (_a = refNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(nodeToMerge, refNode.nextSibling);
-    (_b = nodeToRemove === null || nodeToRemove === void 0 ? void 0 : nodeToRemove.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(nodeToRemove);
+    (_b = refNode.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(nodeToMerge, refNode.nextSibling);
+    (_c = nodeToRemove === null || nodeToRemove === void 0 ? void 0 : nodeToRemove.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(nodeToRemove);
 }
 exports.default = mergeBlocksInRegion;
 
@@ -13463,8 +13835,6 @@ function getPositionFromPath(node, path) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var getInnerHTML_1 = __webpack_require__(/*! ../utils/getInnerHTML */ "./packages/roosterjs-editor-dom/lib/utils/getInnerHTML.ts");
 var getSelectionPath_1 = __webpack_require__(/*! ./getSelectionPath */ "./packages/roosterjs-editor-dom/lib/selection/getSelectionPath.ts");
-var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
-var queryElements_1 = __webpack_require__(/*! ../utils/queryElements */ "./packages/roosterjs-editor-dom/lib/utils/queryElements.ts");
 /**
  * Get inner Html of a root node with a selection path which can be used for restore selection.
  * The result string can be used by setHtmlWithSelectionPath() to restore the HTML and selection.
@@ -13476,32 +13846,6 @@ function getHtmlWithSelectionPath(rootNode, range) {
     if (!rootNode) {
         return '';
     }
-    var _a = range || {}, startContainer = _a.startContainer, endContainer = _a.endContainer, startOffset = _a.startOffset, endOffset = _a.endOffset;
-    var isDOMChanged = false;
-    (0, queryElements_1.default)(rootNode, 'table', function (table) {
-        var tbody = null;
-        for (var child = table.firstChild; child; child = child.nextSibling) {
-            if ((0, getTagOfNode_1.default)(child) == 'TR') {
-                if (!tbody) {
-                    tbody = table.ownerDocument.createElement('tbody');
-                    table.insertBefore(tbody, child);
-                }
-                tbody.appendChild(child);
-                child = tbody;
-                isDOMChanged = true;
-            }
-            else {
-                tbody = null;
-            }
-        }
-    });
-    if (range && isDOMChanged) {
-        try {
-            range.setStart(startContainer, startOffset);
-            range.setEnd(endContainer, endOffset);
-        }
-        catch (_b) { }
-    }
     var content = (0, getInnerHTML_1.default)(rootNode);
     var selectionPath = range && (0, getSelectionPath_1.default)(rootNode, range);
     return selectionPath ? content + "<!--" + JSON.stringify(selectionPath) + "-->" : content;
@@ -13719,53 +14063,88 @@ function areAllPreviousNodesEmpty(node) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.setHtmlWithMetadata = void 0;
 var createRange_1 = __webpack_require__(/*! ./createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
-var LastCommentRegex = /<!--([^-]+)-->$/;
+var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 /**
- * Restore inner Html of a root element from given html string. If the string contains selection path,
+ * @deprecated Use setHtmlWithMetadata instead
+ * Restore inner HTML of a root element from given html string. If the string contains selection path,
  * remove the selection path and return a range represented by the path
  * @param root The root element
- * @param html The html to restore
+ * @param html The HTML to restore
+ * @param trustedHTMLHandler An optional trusted HTML handler to convert HTML string to security string
  * @returns A selection range if the html contains a valid selection path, otherwise null
  */
 function setHtmlWithSelectionPath(rootNode, html, trustedHTMLHandler) {
+    var metadata = setHtmlWithMetadata(rootNode, html, trustedHTMLHandler);
+    return (metadata === null || metadata === void 0 ? void 0 : metadata.type) == 0 /* Normal */
+        ? (0, createRange_1.default)(rootNode, metadata.start, metadata.end)
+        : null;
+}
+exports.default = setHtmlWithSelectionPath;
+/**
+ * Restore inner HTML of a root element from given html string. If the string contains metadata,
+ * remove it from DOM tree and return the metadata
+ * @param root The root element
+ * @param html The HTML to restore
+ * @param trustedHTMLHandler An optional trusted HTML handler to convert HTML string to security string
+ * @returns Content metadata if any, or undefined
+ */
+function setHtmlWithMetadata(rootNode, html, trustedHTMLHandler) {
     if (!rootNode) {
-        return null;
+        return undefined;
     }
     html = html || '';
-    var lastComment = LastCommentRegex.exec(html);
     rootNode.innerHTML = (trustedHTMLHandler === null || trustedHTMLHandler === void 0 ? void 0 : trustedHTMLHandler(html)) || html;
-    var path = getSelectionPath(rootNode, (lastComment === null || lastComment === void 0 ? void 0 : lastComment[1]) || '');
-    return path && (0, createRange_1.default)(rootNode, path.start, path.end);
-}
-exports.default = setHtmlWithSelectionPath;
-function getSelectionPath(root, alternativeComment) {
-    var _a, _b, _c;
-    var pathCommentValue = '';
-    var pathCommentNode = null;
-    var path = null;
-    if (((_a = root.lastChild) === null || _a === void 0 ? void 0 : _a.nodeType) == 8 /* Comment */) {
-        pathCommentNode = root.lastChild;
-        pathCommentValue = pathCommentNode.nodeValue || '';
+    var potentialMetadataComment = rootNode.lastChild;
+    if ((0, safeInstanceOf_1.default)(potentialMetadataComment, 'Comment')) {
+        try {
+            var obj = JSON.parse(potentialMetadataComment.nodeValue || '');
+            if (isContentMetadata(obj)) {
+                rootNode.removeChild(potentialMetadataComment);
+                return obj;
+            }
+        }
+        catch (_a) { }
     }
-    else {
-        pathCommentValue = alternativeComment;
+    return undefined;
+}
+exports.setHtmlWithMetadata = setHtmlWithMetadata;
+function isContentMetadata(obj) {
+    if (!obj || typeof obj != 'object') {
+        return false;
     }
-    if (pathCommentValue) {
-        try {
-            path = JSON.parse(pathCommentValue);
-            if (path && ((_b = path.start) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = path.end) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                if (pathCommentNode) {
-                    root.removeChild(pathCommentNode);
-                }
+    switch (obj.type || 0 /* Normal */) {
+        case 0 /* Normal */:
+            var regularMetadata = obj;
+            if (isNumberArray(regularMetadata.start) && isNumberArray(regularMetadata.end)) {
+                obj.type = 0 /* Normal */;
+                obj.isDarkMode = !!obj.isDarkMode;
+                return true;
             }
-            else {
-                path = null;
+            break;
+        case 1 /* TableSelection */:
+            var tableMetadata = obj;
+            if (typeof tableMetadata.tableId == 'string' &&
+                !!tableMetadata.tableId &&
+                isCoordinates(tableMetadata.firstCell) &&
+                isCoordinates(tableMetadata.lastCell)) {
+                obj.isDarkMode = !!obj.isDarkMode;
+                return true;
             }
-        }
-        catch (_d) { }
+            break;
     }
-    return path;
+    return false;
+}
+function isNumberArray(obj) {
+    return obj && Array.isArray(obj) && obj.every(function (o) { return typeof o == 'number'; });
+}
+function isCoordinates(obj) {
+    var coordinates = obj;
+    return (coordinates &&
+        typeof coordinates == 'object' &&
+        typeof coordinates.x == 'number' &&
+        typeof coordinates.y == 'number');
 }
 
 
@@ -13781,23 +14160,21 @@ function getSelectionPath(root, alternativeComment) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.addSnapshotV2 = void 0;
 var clearProceedingSnapshots_1 = __webpack_require__(/*! ./clearProceedingSnapshots */ "./packages/roosterjs-editor-dom/lib/snapshots/clearProceedingSnapshots.ts");
-/**
- * Add a new snapshot to the given snapshots data structure
- * @param snapshots The snapshots data structure to add new snapshot into
- * @param snapshot The snapshot to add
- * @param isAutoCompleteSnapshot Whether this is a snapshot before auto complete action
- */
-function addSnapshot(snapshots, snapshot, isAutoCompleteSnapshot) {
-    if (snapshots.currentIndex < 0 || snapshot != snapshots.snapshots[snapshots.currentIndex]) {
-        (0, clearProceedingSnapshots_1.default)(snapshots);
+function addSnapshot(snapshots, snapshot, isAutoCompleteSnapshot, getLength, compare) {
+    getLength = getLength || (function (str) { var _a; return ((_a = str) === null || _a === void 0 ? void 0 : _a.length) || 0; });
+    compare = compare || defaultCompare;
+    var currentSnapshot = snapshots.snapshots[snapshots.currentIndex];
+    if (snapshots.currentIndex < 0 || !currentSnapshot || !compare(snapshot, currentSnapshot)) {
+        (0, clearProceedingSnapshots_1.default)(snapshots, getLength);
         snapshots.snapshots.push(snapshot);
         snapshots.currentIndex++;
-        snapshots.totalSize += snapshot.length;
+        snapshots.totalSize += getLength(snapshot);
         var removeCount = 0;
         while (removeCount < snapshots.snapshots.length &&
             snapshots.totalSize > snapshots.maxSize) {
-            snapshots.totalSize -= snapshots.snapshots[removeCount].length;
+            snapshots.totalSize -= getLength(snapshots.snapshots[removeCount]);
             removeCount++;
         }
         if (removeCount > 0) {
@@ -13811,6 +14188,22 @@ function addSnapshot(snapshots, snapshot, isAutoCompleteSnapshot) {
     }
 }
 exports.default = addSnapshot;
+/**
+ * Add a new snapshot to the given snapshots data structure
+ * @param snapshots The snapshots data structure to add new snapshot into
+ * @param snapshot The snapshot object to add
+ * @param isAutoCompleteSnapshot Whether this is a snapshot before auto complete action
+ */
+function addSnapshotV2(snapshots, snapshot, isAutoCompleteSnapshot) {
+    addSnapshot(snapshots, snapshot, isAutoCompleteSnapshot, function (s) { var _a; return ((_a = s.html) === null || _a === void 0 ? void 0 : _a.length) || 0; }, compareSnapshots);
+}
+exports.addSnapshotV2 = addSnapshotV2;
+function compareSnapshots(s1, s2) {
+    return s1.html == s2.html;
+}
+function defaultCompare(s1, s2) {
+    return s1 == s2;
+}
 
 
 /***/ }),
@@ -13872,16 +14265,18 @@ exports.default = canUndoAutoComplete;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearProceedingSnapshotsV2 = void 0;
 var canMoveCurrentSnapshot_1 = __webpack_require__(/*! ./canMoveCurrentSnapshot */ "./packages/roosterjs-editor-dom/lib/snapshots/canMoveCurrentSnapshot.ts");
 /**
  * Clear all snapshots after the current one
  * @param snapshots The snapshots data structure to clear
  */
-function clearProceedingSnapshots(snapshots) {
+function clearProceedingSnapshots(snapshots, getLength) {
+    getLength = getLength || (function (str) { var _a; return ((_a = str) === null || _a === void 0 ? void 0 : _a.length) || 0; });
     if ((0, canMoveCurrentSnapshot_1.default)(snapshots, 1)) {
         var removedSize = 0;
         for (var i = snapshots.currentIndex + 1; i < snapshots.snapshots.length; i++) {
-            removedSize += snapshots.snapshots[i].length;
+            removedSize += getLength(snapshots.snapshots[i]);
         }
         snapshots.snapshots.splice(snapshots.currentIndex + 1);
         snapshots.totalSize -= removedSize;
@@ -13889,6 +14284,14 @@ function clearProceedingSnapshots(snapshots) {
     }
 }
 exports.default = clearProceedingSnapshots;
+/**
+ * Clear all snapshots after the current one
+ * @param snapshots The snapshots data structure to clear
+ */
+function clearProceedingSnapshotsV2(snapshots) {
+    clearProceedingSnapshots(snapshots, function (s) { var _a; return ((_a = s.html) === null || _a === void 0 ? void 0 : _a.length) || 0; });
+}
+exports.clearProceedingSnapshotsV2 = clearProceedingSnapshotsV2;
 
 
 /***/ }),
@@ -14084,6 +14487,18 @@ var VTable = /** @class */ (function () {
      */
     function VTable(node, normalizeSize, zoomScale) {
         var _this = this;
+        /**
+         * Virtual cells
+         */
+        this.cells = null;
+        /**
+         * Selected range of cells with the coordinates of the first and last cell selected.
+         */
+        this.selection = null;
+        /**
+         * Current format of the table
+         */
+        this.formatInfo = null;
         this.trs = [];
         this.table = (0, safeInstanceOf_1.default)(node, 'HTMLTableElement') ? node : getTableFromTd(node);
         if (this.table) {
@@ -14128,17 +14543,20 @@ var VTable = /** @class */ (function () {
      */
     VTable.prototype.writeBack = function (skipApplyFormat) {
         var _this = this;
+        var _a;
         if (this.cells) {
             (0, moveChildNodes_1.default)(this.table);
             this.cells.forEach(function (row, r) {
                 var tr = cloneNode(_this.trs[r % 2] || _this.trs[0]);
-                _this.table.appendChild(tr);
-                row.forEach(function (cell, c) {
-                    if (cell.td) {
-                        _this.recalculateSpans(r, c);
-                        tr.appendChild(cell.td);
-                    }
-                });
+                if (tr) {
+                    _this.table.appendChild(tr);
+                    row.forEach(function (cell, c) {
+                        if (cell.td) {
+                            _this.recalculateSpans(r, c);
+                            tr.appendChild(cell.td);
+                        }
+                    });
+                }
             });
             if (this.formatInfo && !skipApplyFormat) {
                 (0, tableFormatInfo_1.saveTableInfo)(this.table, this.formatInfo);
@@ -14146,7 +14564,7 @@ var VTable = /** @class */ (function () {
             }
         }
         else if (this.table) {
-            this.table.parentNode.removeChild(this.table);
+            (_a = this.table.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.table);
         }
     };
     /**
@@ -14167,7 +14585,7 @@ var VTable = /** @class */ (function () {
      * @param cells
      */
     VTable.prototype.deleteCellShadeDataset = function (cells) {
-        cells.forEach(function (row) {
+        cells === null || cells === void 0 ? void 0 : cells.forEach(function (row) {
             row.forEach(function (cell) {
                 if (cell.td && cell.td.dataset[CELL_SHADE]) {
                     delete cell.td.dataset[CELL_SHADE];
@@ -14181,77 +14599,120 @@ var VTable = /** @class */ (function () {
      */
     VTable.prototype.edit = function (operation) {
         var _this = this;
-        if (!this.table) {
+        if (!this.table || !this.cells || this.row === undefined || this.col == undefined) {
             return;
         }
         var currentRow = this.cells[this.row];
         var currentCell = currentRow[this.col];
-        var style = currentCell.td.style;
+        var firstRow = this.selection ? this.selection.firstCell.y : this.row;
+        var lastRow = this.selection ? this.selection.lastCell.y : this.row;
+        var firstColumn = this.selection ? this.selection.firstCell.x : this.col;
+        var lastColumn = this.selection ? this.selection.lastCell.x : this.col;
         switch (operation) {
             case 0 /* InsertAbove */:
-                this.cells.splice(this.row, 0, currentRow.map(cloneCell));
+                for (var i = firstRow; i <= lastRow; i++) {
+                    this.cells.splice(firstRow, 0, currentRow.map(cloneCell));
+                }
                 break;
             case 1 /* InsertBelow */:
-                var newRow_1 = this.row + this.countSpanAbove(this.row, this.col);
-                this.cells.splice(newRow_1, 0, this.cells[newRow_1 - 1].map(function (cell, colIndex) {
-                    var nextCell = _this.getCell(newRow_1, colIndex);
-                    if (nextCell.spanAbove) {
-                        return cloneCell(nextCell);
-                    }
-                    else if (cell.spanLeft) {
-                        var newCell = cloneCell(cell);
-                        newCell.spanAbove = false;
-                        return newCell;
-                    }
-                    else {
-                        return {
-                            td: cloneNode(_this.getTd(_this.row, colIndex)),
-                        };
-                    }
-                }));
+                var _loop_1 = function (i) {
+                    var newRow = lastRow + this_1.countSpanAbove(lastRow, this_1.col);
+                    this_1.cells.splice(newRow, 0, this_1.cells[newRow - 1].map(function (cell, colIndex) {
+                        var nextCell = _this.getCell(newRow, colIndex);
+                        if (nextCell.spanAbove) {
+                            return cloneCell(nextCell);
+                        }
+                        else if (cell.spanLeft) {
+                            var newCell = cloneCell(cell);
+                            newCell.spanAbove = false;
+                            return newCell;
+                        }
+                        else {
+                            return {
+                                td: cloneNode(_this.getTd(_this.row, colIndex)),
+                            };
+                        }
+                    }));
+                };
+                var this_1 = this;
+                for (var i = firstRow; i <= lastRow; i++) {
+                    _loop_1(i);
+                }
                 break;
             case 2 /* InsertLeft */:
-                this.forEachCellOfCurrentColumn(function (cell, row) {
-                    row.splice(_this.col, 0, cloneCell(cell));
-                });
+                var _loop_2 = function (i) {
+                    this_2.forEachCellOfCurrentColumn(function (cell, row) {
+                        row.splice(i, 0, cloneCell(cell));
+                    });
+                };
+                var this_2 = this;
+                for (var i = firstColumn; i <= lastColumn; i++) {
+                    _loop_2(i);
+                }
                 break;
             case 3 /* InsertRight */:
-                var newCol_1 = this.col + this.countSpanLeft(this.row, this.col);
-                this.forEachCellOfColumn(newCol_1 - 1, function (cell, row, i) {
-                    var nextCell = _this.getCell(i, newCol_1);
-                    var newCell;
-                    if (nextCell.spanLeft) {
-                        newCell = cloneCell(nextCell);
-                    }
-                    else if (cell.spanAbove) {
-                        newCell = cloneCell(cell);
-                        newCell.spanLeft = false;
-                    }
-                    else {
-                        newCell = {
-                            td: cloneNode(_this.getTd(i, _this.col)),
-                        };
-                    }
-                    row.splice(newCol_1, 0, newCell);
-                });
+                var _loop_3 = function (i) {
+                    var newCol = lastColumn + this_3.countSpanLeft(this_3.row, lastColumn);
+                    this_3.forEachCellOfColumn(newCol - 1, function (cell, row, i) {
+                        var nextCell = _this.getCell(i, newCol);
+                        var newCell;
+                        if (nextCell.spanLeft) {
+                            newCell = cloneCell(nextCell);
+                        }
+                        else if (cell.spanAbove) {
+                            newCell = cloneCell(cell);
+                            newCell.spanLeft = false;
+                        }
+                        else {
+                            newCell = {
+                                td: cloneNode(_this.getTd(i, _this.col)),
+                            };
+                        }
+                        row.splice(newCol, 0, newCell);
+                    });
+                };
+                var this_3 = this;
+                for (var i = firstColumn; i <= lastColumn; i++) {
+                    _loop_3(i);
+                }
                 break;
             case 6 /* DeleteRow */:
-                this.forEachCellOfCurrentRow(function (cell, i) {
-                    var nextCell = _this.getCell(_this.row + 1, i);
-                    if (cell.td && cell.td.rowSpan > 1 && nextCell.spanAbove) {
-                        nextCell.td = cell.td;
-                    }
-                });
-                this.cells.splice(this.row, 1);
+                var _loop_4 = function (rowIndex) {
+                    this_4.forEachCellOfRow(rowIndex, function (cell, i) {
+                        var nextCell = _this.getCell(rowIndex + 1, i);
+                        if (cell.td && cell.td.rowSpan > 1 && nextCell.spanAbove) {
+                            nextCell.td = cell.td;
+                        }
+                    });
+                };
+                var this_4 = this;
+                for (var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++) {
+                    _loop_4(rowIndex);
+                }
+                var removedRows = this.selection
+                    ? this.selection.lastCell.y - this.selection.firstCell.y
+                    : 0;
+                this.cells.splice(firstRow, removedRows + 1);
                 break;
             case 5 /* DeleteColumn */:
-                this.forEachCellOfCurrentColumn(function (cell, row, i) {
-                    var nextCell = _this.getCell(i, _this.col + 1);
-                    if (cell.td && cell.td.colSpan > 1 && nextCell.spanLeft) {
-                        nextCell.td = cell.td;
-                    }
-                    row.splice(_this.col, 1);
-                });
+                var deletedColumns_1 = 0;
+                var _loop_5 = function (colIndex) {
+                    this_5.forEachCellOfColumn(colIndex, function (cell, row, i) {
+                        var nextCell = _this.getCell(i, colIndex + 1);
+                        if (cell.td && cell.td.colSpan > 1 && nextCell.spanLeft) {
+                            nextCell.td = cell.td;
+                        }
+                        var removedColumns = _this.selection
+                            ? colIndex - deletedColumns_1
+                            : _this.col;
+                        row.splice(removedColumns, 1);
+                    });
+                    deletedColumns_1++;
+                };
+                var this_5 = this;
+                for (var colIndex = firstColumn; colIndex <= lastColumn; colIndex++) {
+                    _loop_5(colIndex);
+                }
                 break;
             case 7 /* MergeAbove */:
             case 8 /* MergeBelow */:
@@ -14261,11 +14722,7 @@ var VTable = /** @class */ (function () {
                     if (cell.td && !cell.spanAbove) {
                         var aboveCell = rowIndex < this.row ? cell : currentCell;
                         var belowCell = rowIndex < this.row ? currentCell : cell;
-                        if (aboveCell.td.colSpan == belowCell.td.colSpan) {
-                            (0, moveChildNodes_1.default)(aboveCell.td, belowCell.td, true /*keepExistingChildren*/);
-                            belowCell.td = null;
-                            belowCell.spanAbove = true;
-                        }
+                        this.mergeCells(aboveCell, belowCell);
                         break;
                     }
                 }
@@ -14278,20 +14735,30 @@ var VTable = /** @class */ (function () {
                     if (cell.td && !cell.spanLeft) {
                         var leftCell = colIndex < this.col ? cell : currentCell;
                         var rightCell = colIndex < this.col ? currentCell : cell;
-                        if (leftCell.td.rowSpan == rightCell.td.rowSpan) {
-                            (0, moveChildNodes_1.default)(leftCell.td, rightCell.td, true /*keepExistingChildren*/);
-                            rightCell.td = null;
-                            rightCell.spanLeft = true;
-                        }
+                        this.mergeCells(leftCell, rightCell, true /** horizontally */);
                         break;
                     }
                 }
                 break;
+            case 11 /* MergeCells */:
+                for (var colIndex = firstColumn; colIndex <= lastColumn; colIndex++) {
+                    for (var rowIndex = firstRow + 1; rowIndex <= lastRow; rowIndex++) {
+                        var cell = this.getCell(firstRow, colIndex);
+                        var nextCellBelow = this.getCell(rowIndex, colIndex);
+                        this.mergeCells(cell, nextCellBelow);
+                    }
+                }
+                for (var colIndex = firstColumn + 1; colIndex <= lastColumn; colIndex++) {
+                    var cell = this.getCell(firstRow, firstColumn);
+                    var nextCellRight = this.getCell(firstRow, colIndex);
+                    this.mergeCells(cell, nextCellRight, true /** horizontally */);
+                }
+                break;
             case 4 /* DeleteTable */:
                 this.cells = null;
                 break;
-            case 12 /* SplitVertically */:
-                if (currentCell.td.rowSpan > 1) {
+            case 13 /* SplitVertically */:
+                if (currentCell.td && currentCell.td.rowSpan > 1) {
                     this.getCell(this.row + 1, this.col).td = cloneNode(currentCell.td);
                 }
                 else {
@@ -14305,8 +14772,8 @@ var VTable = /** @class */ (function () {
                     this.cells.splice(this.row + 1, 0, splitRow);
                 }
                 break;
-            case 11 /* SplitHorizontally */:
-                if (currentCell.td.colSpan > 1) {
+            case 12 /* SplitHorizontally */:
+                if (currentCell.td && currentCell.td.colSpan > 1) {
                     this.getCell(this.row, this.col + 1).td = cloneNode(currentCell.td);
                 }
                 else {
@@ -14319,38 +14786,70 @@ var VTable = /** @class */ (function () {
                     });
                 }
                 break;
-            case 13 /* AlignCenter */:
+            case 14 /* AlignCenter */:
                 this.table.style.marginLeft = 'auto';
                 this.table.style.marginRight = 'auto';
                 break;
-            case 14 /* AlignLeft */:
+            case 15 /* AlignLeft */:
                 this.table.style.marginLeft = '';
                 this.table.style.marginRight = 'auto';
                 break;
-            case 15 /* AlignRight */:
+            case 16 /* AlignRight */:
                 this.table.style.marginLeft = 'auto';
                 this.table.style.marginRight = '';
                 break;
-            case 17 /* AlignCellCenter */:
-                style.textAlign = 'center';
+            case 18 /* AlignCellCenter */:
+                this.setAlignmentToSelectedCells(firstRow, lastRow, firstColumn, lastColumn, 'center');
                 break;
-            case 16 /* AlignCellLeft */:
-                style.textAlign = 'left';
+            case 17 /* AlignCellLeft */:
+                this.setAlignmentToSelectedCells(firstRow, lastRow, firstColumn, lastColumn, 'left');
                 break;
-            case 18 /* AlignCellRight */:
-                style.textAlign = 'right';
+            case 19 /* AlignCellRight */:
+                this.setAlignmentToSelectedCells(firstRow, lastRow, firstColumn, lastColumn, 'right');
                 break;
-            case 19 /* AlignCellTop */:
-                style.verticalAlign = 'top';
+            case 20 /* AlignCellTop */:
+                this.setAlignmentToSelectedCells(firstRow, lastRow, firstColumn, lastColumn, 'top', true /** isVertical */);
                 break;
-            case 20 /* AlignCellMiddle */:
-                style.verticalAlign = 'middle';
+            case 21 /* AlignCellMiddle */:
+                this.setAlignmentToSelectedCells(firstRow, lastRow, firstColumn, lastColumn, 'middle', true /** isVertical */);
                 break;
-            case 21 /* AlignCellBottom */:
-                style.verticalAlign = 'bottom';
+            case 22 /* AlignCellBottom */:
+                this.setAlignmentToSelectedCells(firstRow, lastRow, firstColumn, lastColumn, 'bottom', true /** isVertical */);
                 break;
         }
     };
+    VTable.prototype.setAlignmentToSelectedCells = function (firstRow, lastRow, firstColumn, lastColumn, alignmentType, isVertical) {
+        var _a, _b;
+        for (var i = firstRow; i <= lastRow; i++) {
+            for (var j = firstColumn; j <= lastColumn; j++) {
+                if (this.cells) {
+                    var cell = this.cells[i][j].td;
+                    if (isVertical && cell) {
+                        (_a = cell.style) === null || _a === void 0 ? void 0 : _a.setProperty('vertical-align', alignmentType);
+                    }
+                    else if (cell) {
+                        (_b = cell.style) === null || _b === void 0 ? void 0 : _b.setProperty('text-align', alignmentType);
+                    }
+                }
+            }
+        }
+    };
+    VTable.prototype.mergeCells = function (cell, nextCell, horizontally) {
+        var _a, _b, _c, _d;
+        var checkSpans = horizontally
+            ? ((_a = cell.td) === null || _a === void 0 ? void 0 : _a.rowSpan) === ((_b = nextCell.td) === null || _b === void 0 ? void 0 : _b.rowSpan) && !cell.spanLeft
+            : ((_c = cell.td) === null || _c === void 0 ? void 0 : _c.colSpan) === ((_d = nextCell.td) === null || _d === void 0 ? void 0 : _d.colSpan) && !cell.spanAbove;
+        if (cell.td && nextCell.td && checkSpans) {
+            (0, moveChildNodes_1.default)(cell.td, nextCell.td, true /*keepExistingChildren*/);
+            nextCell.td = null;
+            if (horizontally) {
+                nextCell.spanLeft = true;
+            }
+            else {
+                nextCell.spanAbove = true;
+            }
+        }
+    };
     /**
      * Loop each cell of current column and invoke a callback function
      * @param callback The callback function to invoke
@@ -14384,7 +14883,7 @@ var VTable = /** @class */ (function () {
      */
     VTable.prototype.getCellsWithBorder = function (borderPos, getLeftCells) {
         var cells = [];
-        for (var i = 0; i < this.cells.length; i++) {
+        for (var i = 0; this.cells && i < this.cells.length; i++) {
             for (var j = 0; j < this.cells[i].length; j++) {
                 var cell = this.getCell(i, j);
                 if (cell.td) {
@@ -14443,7 +14942,7 @@ var VTable = /** @class */ (function () {
      * @param col column of the cell
      */
     VTable.prototype.getTd = function (row, col) {
-        if (this.cells) {
+        if (this.cells && row !== undefined && col !== undefined) {
             row = Math.min(this.cells.length - 1, row);
             col = this.cells[row] ? Math.min(this.cells[row].length - 1, col) : col;
             if (!isNaN(row) && !isNaN(col)) {
@@ -14467,13 +14966,17 @@ var VTable = /** @class */ (function () {
         return null;
     };
     VTable.prototype.forEachCellOfColumn = function (col, callback) {
-        for (var i = 0; i < this.cells.length; i++) {
-            callback(this.getCell(i, col), this.cells[i], i);
+        if (col !== undefined) {
+            for (var i = 0; this.cells && i < this.cells.length; i++) {
+                callback(this.getCell(i, col), this.cells[i], i);
+            }
         }
     };
     VTable.prototype.forEachCellOfRow = function (row, callback) {
-        for (var i = 0; i < this.cells[row].length; i++) {
-            callback(this.getCell(row, i), i);
+        if (row !== undefined) {
+            for (var i = 0; this.cells && i < this.cells[row].length; i++) {
+                callback(this.getCell(row, i), i);
+            }
         }
     };
     VTable.prototype.recalculateSpans = function (row, col) {
@@ -14491,7 +14994,7 @@ var VTable = /** @class */ (function () {
     };
     VTable.prototype.countSpanLeft = function (row, col) {
         var result = 1;
-        for (var i = col + 1; i < this.cells[row].length; i++) {
+        for (var i = col + 1; this.cells && i < this.cells[row].length; i++) {
             var cell = this.getCell(row, i);
             if (cell.td || !cell.spanLeft) {
                 break;
@@ -14502,7 +15005,7 @@ var VTable = /** @class */ (function () {
     };
     VTable.prototype.countSpanAbove = function (row, col) {
         var result = 1;
-        for (var i = row + 1; i < this.cells.length; i++) {
+        for (var i = row + 1; this.cells && i < this.cells.length; i++) {
             var cell = this.getCell(i, col);
             if (cell.td || !cell.spanAbove) {
                 break;
@@ -14527,17 +15030,19 @@ var VTable = /** @class */ (function () {
         // remove width/height for each row
         for (var i = 0, row = void 0; (row = this.table.rows[i]); i++) {
             row.removeAttribute('width');
-            row.style.width = null;
+            row.style.setProperty('width', null);
             row.removeAttribute('height');
-            row.style.height = null;
+            row.style.setProperty('height', null);
         }
         // set width/height for each cell
-        for (var i = 0; i < this.cells.length; i++) {
+        for (var i = 0; this.cells && i < this.cells.length; i++) {
             for (var j = 0; j < this.cells[i].length; j++) {
                 var cell = this.cells[i][j];
                 if (cell) {
                     var func = typeof zoomScale == 'number' ? function (n) { return n / zoomScale; } : zoomScale;
-                    setHTMLElementSizeInPx(cell.td, (func === null || func === void 0 ? void 0 : func(cell.width)) || cell.width, (func === null || func === void 0 ? void 0 : func(cell.height)) || cell.height);
+                    var width = cell.width || 0;
+                    var height = cell.height || 0;
+                    setHTMLElementSizeInPx(cell.td, (func === null || func === void 0 ? void 0 : func(width)) || width, (func === null || func === void 0 ? void 0 : func(height)) || height);
                 }
             }
         }
@@ -14881,6 +15386,40 @@ function getBorderStyle(style) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/table/isWholeTableSelected.ts":
+/*!*************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/table/isWholeTableSelected.ts ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Check if the whole table is selected
+ * @param vTable VTable to check whether all cells are selected
+ * @param selection Table selection with first cell selected and last cell selected coordinates.
+ * @returns
+ */
+function isWholeTableSelected(vTable, selection) {
+    if (!selection || !vTable.cells) {
+        return false;
+    }
+    var firstCell = selection.firstCell, lastCell = selection.lastCell;
+    var rowsLength = vTable.cells.length - 1;
+    var colIndex = vTable.cells[rowsLength].length - 1;
+    var firstX = firstCell.x;
+    var firstY = firstCell.y;
+    var lastX = lastCell.x;
+    var lastY = lastCell.y;
+    return firstX == 0 && firstY == 0 && lastX == colIndex && lastY == rowsLength;
+}
+exports.default = isWholeTableSelected;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts":
@@ -18110,11 +18649,14 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 var TabInTable = {
     keys: [9 /* TAB */],
-    shouldHandleEvent: cacheGetTableCell,
+    shouldHandleEvent: function (event, editor) {
+        return cacheGetTableCell(event, editor) && !cacheIsWholeTableSelected(event, editor);
+    },
     handleEvent: function (event, editor) {
         var shift = event.rawEvent.shiftKey;
         var td = cacheGetTableCell(event, editor);
-        for (var vtable = new roosterjs_editor_dom_1.VTable(td), step = shift ? -1 : 1, row = vtable.row, col = vtable.col + step;; col += step) {
+        var vtable = cacheVTable(event, td);
+        for (var step = shift ? -1 : 1, row = vtable.row, col = vtable.col + step;; col += step) {
             if (col < 0 || col >= vtable.cells[row].length) {
                 row += step;
                 if (row < 0) {
@@ -18136,13 +18678,40 @@ var TabInTable = {
         event.rawEvent.preventDefault();
     },
 };
+/**
+ * IndentTableOnTab edit feature, provides the ability to indent the table if it is all cells are selected.
+ */
+var IndentTableOnTab = {
+    keys: [9 /* TAB */],
+    shouldHandleEvent: function (event, editor) {
+        return cacheGetTableCell(event, editor) && cacheIsWholeTableSelected(event, editor);
+    },
+    handleEvent: function (event, editor) {
+        event.rawEvent.preventDefault();
+        editor.addUndoSnapshot(function () {
+            var shift = event.rawEvent.shiftKey;
+            var selection = editor.getSelectionRangeEx();
+            var td = cacheGetTableCell(event, editor);
+            var vtable = cacheVTable(event, td);
+            if (shift && editor.getElementAtCursor('blockquote', vtable.table, event)) {
+                (0, roosterjs_editor_api_1.setIndentation)(editor, 1 /* Decrease */);
+            }
+            else if (!shift) {
+                (0, roosterjs_editor_api_1.setIndentation)(editor, 0 /* Increase */);
+            }
+            editor.select(selection.table, selection.coordinates);
+        });
+    },
+};
 /**
  * UpDownInTable edit feature, provides the ability to jump to cell above/below when user press UP/DOWN
  * in table
  */
 var UpDownInTable = {
     keys: [38 /* UP */, 40 /* DOWN */],
-    shouldHandleEvent: cacheGetTableCell,
+    shouldHandleEvent: function (event, editor) {
+        return cacheGetTableCell(event, editor) && !cacheIsWholeTableSelected(event, editor);
+    },
     handleEvent: function (event, editor) {
         var _a;
         var td = cacheGetTableCell(event, editor);
@@ -18194,12 +18763,27 @@ function cacheGetTableCell(event, editor) {
         return (firstTd && ((0, roosterjs_editor_dom_1.getTagOfNode)(firstTd) == 'LI' ? null : firstTd));
     });
 }
+function cacheIsWholeTableSelected(event, editor) {
+    return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'WHOLE_TABLE_SELECTED_FOR_FEATURES', function () {
+        var td = cacheGetTableCell(event, editor);
+        var vtable = cacheVTable(event, td);
+        var selection = editor.getSelectionRangeEx();
+        return (selection.type == 1 /* TableSelection */ &&
+            (0, roosterjs_editor_dom_1.isWholeTableSelected)(vtable, selection.coordinates));
+    });
+}
+function cacheVTable(event, td) {
+    return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'VTABLE_FOR_TABLE_FEATURES', function () {
+        return new roosterjs_editor_dom_1.VTable(td);
+    });
+}
 /**
  * @internal
  */
 exports.TableFeatures = {
     tabInTable: TabInTable,
     upDownInTable: UpDownInTable,
+    indentTableOnTab: IndentTableOnTab,
 };
 
 
@@ -18320,17 +18904,27 @@ function insertTab(editor, event) {
     var searcher = editor.getContentSearcherOfCursor(event);
     var charsBefore = searcher.getSubStringBefore(Number.MAX_SAFE_INTEGER);
     var numberOfChars = TAB_SPACES - (charsBefore.length % TAB_SPACES);
+    var span2;
     var textContent = '';
     for (var index = 0; index < numberOfChars; index++) {
         textContent += '&ensp;';
     }
     editor.insertNode(span);
+    if (span.nextElementSibling && (0, roosterjs_editor_dom_1.getTagOfNode)(span.nextElementSibling) == 'A') {
+        span2 = editor.getDocument().createElement('span');
+        span2.textContent = ' ';
+        editor.insertNode(span2);
+        editor.select((0, roosterjs_editor_dom_1.createRange)(span2, -2 /* Before */));
+    }
     editor.insertContent(textContent, {
         position: 5 /* Range */,
         range: (0, roosterjs_editor_dom_1.createRange)(span, 0 /* Begin */),
         updateCursor: false,
     });
     editor.select((0, roosterjs_editor_dom_1.createRange)(span, -3 /* After */));
+    if (span2) {
+        editor.deleteNode(span2);
+    }
 }
 
 
@@ -22553,6 +23147,14 @@ var TableCellSelection = /** @class */ (function () {
                         this.handleScrollEvent();
                     }
                     break;
+                case 20 /* BeforeSetContent */:
+                    if (this.tableRange) {
+                        this.tableRange = null;
+                        this.firstTable = null;
+                        this.tableSelection = false;
+                        this.editor.select(null);
+                    }
+                    break;
             }
         }
     };
@@ -22586,10 +23188,12 @@ var TableCellSelection = /** @class */ (function () {
         if (selection.type == 1 /* TableSelection */) {
             var clonedTable = event.clonedRoot.querySelector('table#' + selection.table.id);
             if (clonedTable) {
+                this.tableRange = selection.coordinates;
                 var clonedVTable = new roosterjs_editor_dom_1.VTable(clonedTable);
                 clonedVTable.selection = this.tableRange;
                 (0, removeCellsOutsideSelection_1.removeCellsOutsideSelection)(clonedVTable);
                 clonedVTable.writeBack();
+                clonedVTable.table.id = '';
                 event.range.selectNode(clonedTable);
                 if (event.isCut) {
                     (0, forEachSelectedCell_1.forEachSelectedCell)(this.vTable, function (cell) {
@@ -22608,8 +23212,9 @@ var TableCellSelection = /** @class */ (function () {
      */
     TableCellSelection.prototype.handleKeyDownEvent = function (event) {
         var _this = this;
-        var _a = event.rawEvent, shiftKey = _a.shiftKey, ctrlKey = _a.ctrlKey, metaKey = _a.metaKey, which = _a.which;
-        if ((shiftKey && (ctrlKey || metaKey)) || which == 16 /* SHIFT */) {
+        var _a = event.rawEvent, shiftKey = _a.shiftKey, ctrlKey = _a.ctrlKey, metaKey = _a.metaKey, which = _a.which, defaultPrevented = _a.defaultPrevented;
+        if ((shiftKey && (ctrlKey || metaKey)) || which == 16 /* SHIFT */ || defaultPrevented) {
+            this.preventKeyUp = defaultPrevented;
             return;
         }
         if (shiftKey) {
@@ -22643,9 +23248,10 @@ var TableCellSelection = /** @class */ (function () {
     };
     TableCellSelection.prototype.handleKeyUpEvent = function (event) {
         var _a = event.rawEvent, shiftKey = _a.shiftKey, which = _a.which;
-        if (!shiftKey && which != 16 /* SHIFT */ && this.firstTarget) {
+        if (!shiftKey && which != 16 /* SHIFT */ && this.firstTarget && !this.preventKeyUp) {
             this.clearState();
         }
+        this.preventKeyUp = false;
     };
     TableCellSelection.prototype.handleKeySelectionInsideTable = function (event) {
         this.firstTarget = getCellAtCursor(this.editor, this.firstTarget);
@@ -22709,13 +23315,17 @@ var TableCellSelection = /** @class */ (function () {
                 }
             }
         }
-        this.editor.getDocument().addEventListener('mouseup', this.onMouseUp, true /*setCapture*/);
         if (which == LEFT_CLICK && !shiftKey) {
             this.clearState();
-            this.editor
-                .getDocument()
-                .addEventListener('mousemove', this.onMouseMove, true /*setCapture*/);
-            this.startedSelection = true;
+            if (getTableAtCursor(this.editor, event.rawEvent.target)) {
+                this.editor
+                    .getDocument()
+                    .addEventListener('mouseup', this.onMouseUp, true /*setCapture*/);
+                this.editor
+                    .getDocument()
+                    .addEventListener('mousemove', this.onMouseMove, true /*setCapture*/);
+                this.startedSelection = true;
+            }
         }
         if (which == LEFT_CLICK && shiftKey) {
             this.editor.runAsync(function (editor) {
@@ -23069,10 +23679,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * and the last cell always going to be last selected in the table.
  */
 function normalizeTableSelection(vTable) {
-    if (!vTable || !vTable.selection) {
+    var _a = (vTable === null || vTable === void 0 ? void 0 : vTable.selection) || {}, firstCell = _a.firstCell, lastCell = _a.lastCell;
+    if (!vTable || !vTable.selection || !firstCell || !lastCell) {
         return null;
     }
-    var _a = vTable.selection, firstCell = _a.firstCell, lastCell = _a.lastCell;
     var rows = vTable.table.rows;
     var newFirst = {
         x: Math.min(firstCell.x, lastCell.x),
@@ -23097,8 +23707,8 @@ function normalizeTableSelection(vTable) {
             coord.x = rowsCells - 1;
         }
     };
-    fixCoordinates(firstCell);
-    fixCoordinates(lastCell);
+    fixCoordinates(newFirst);
+    fixCoordinates(newLast);
     return { firstCell: newFirst, lastCell: newLast };
 }
 exports.default = normalizeTableSelection;
@@ -23117,24 +23727,22 @@ exports.default = normalizeTableSelection;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeCellsOutsideSelection = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * @internal
  * Remove the cells outside of the selection.
  * @param vTable VTable to remove selection
  */
 function removeCellsOutsideSelection(vTable) {
+    if ((0, roosterjs_editor_dom_1.isWholeTableSelected)(vTable, vTable.selection)) {
+        return;
+    }
     var _a = vTable.selection, firstCell = _a.firstCell, lastCell = _a.lastCell;
-    var rowsLength = vTable.cells.length - 1;
-    var colIndex = vTable.cells[rowsLength].length - 1;
     var resultCells = [];
     var firstX = firstCell.x;
     var firstY = firstCell.y;
     var lastX = lastCell.x;
     var lastY = lastCell.y;
-    var selectedAllTable = firstX == 0 && firstY == 0 && lastX == colIndex && lastY == rowsLength;
-    if (selectedAllTable) {
-        return;
-    }
     vTable.cells.forEach(function (row, y) {
         row = row.filter(function (_, x) { return y >= firstY && y <= lastY && x >= firstX && x <= lastX; });
         if (row.length > 0) {
@@ -23499,7 +24107,8 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableResizer();
             _this.onStartResize();
         };
-        this.onInserted = function () {
+        this.onInserted = function (table) {
+            _this.editor.transformToDarkColor(table);
             _this.disposeTableResizer();
             _this.onFinishEditing();
         };
@@ -23736,9 +24345,7 @@ var TableInsertHandler = /** @class */ (function () {
             }
             vtable.edit(_this.isHorizontal ? 1 /* InsertBelow */ : 3 /* InsertRight */);
             vtable.writeBack();
-            //Adding replaceNode to transform color when the theme is switched to dark.
-            _this.editor.replaceNode(vtable.table, vtable.table, true /**transformColorForDarkMode*/);
-            _this.onInsert();
+            _this.onInsert(vtable.table);
         };
         this.div.addEventListener('click', this.insertTd);
     }