roosterjs 8.14.0 → 8.16.0

package/dist/rooster-amd.js

@@ -2681,6 +2681,13 @@ function createLink(editor, link, altText, displayText) {
             else {
                 // the selection is not collapsed, use browser execCommand
                 editor.getDocument().execCommand("createLink" /* CreateLink */, false, normalizedUrl_1);
+                var traverser = editor.getSelectionTraverser();
+                var currentInline = traverser.getNextInlineElement();
+                while (currentInline) {
+                    var a = currentInline.getContainerNode();
+                    a.parentElement.removeChild(a);
+                    currentInline = traverser.getNextInlineElement();
+                }
                 anchor = getAnchorNodeAtCursor(editor);
                 updateAnchorDisplayText(anchor, displayText);
             }
@@ -3793,6 +3800,7 @@ Object.defineProperty(exports, "experimentCommitListChains", { enumerable: true,
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var TEMP_BACKGROUND_COLOR = 'originalBackgroundColor';
+var CELL_SHADE = 'cellShade';
 /**
  * Set background color of cells.
  * @param editor The editor instance
@@ -3805,6 +3813,7 @@ function applyCellShading(editor, color) {
         regions.forEach(function (region) {
             if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
                 (0, roosterjs_editor_dom_1.setColor)(region.rootNode, color, true /* isBackgroundColor */, editor.isDarkMode());
+                region.rootNode.dataset[CELL_SHADE] = 'true';
                 region.rootNode.dataset[TEMP_BACKGROUND_COLOR] =
                     region.rootNode.style.backgroundColor;
             }
@@ -4115,6 +4124,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function blockFormat(editor, callback, beforeRunCallback) {
     editor.focus();
+    var selection = editor.getSelectionRangeEx();
     editor.addUndoSnapshot(function (start, end) {
         if (!beforeRunCallback || beforeRunCallback()) {
             var regions = editor.getSelectedRegions();
@@ -4122,7 +4132,12 @@ function blockFormat(editor, callback, beforeRunCallback) {
             regions.forEach(function (region) { return callback(region, start, end, chains_1); });
             (0, experimentCommitListChains_1.default)(editor, chains_1);
         }
-        editor.select(start, end);
+        if (selection.type == 0 /* Normal */) {
+            editor.select(start, end);
+        }
+        else {
+            editor.select(selection.table, selection.coordinates);
+        }
     }, "Format" /* Format */);
 }
 exports.default = blockFormat;
@@ -4270,8 +4285,7 @@ function execCommand(editor, command) {
                 tempRange = range;
             });
             if (tempRange && selection.type == 1 /* TableSelection */) {
-                tempRange.collapse();
-                editor.select(tempRange);
+                editor.select(selection.table, selection.coordinates);
             }
         }, "Format" /* Format */);
     }
@@ -4484,6 +4498,7 @@ var hasFocus_1 = __webpack_require__(/*! ./hasFocus */ "./packages/roosterjs-edi
 var insertNode_1 = __webpack_require__(/*! ./insertNode */ "./packages/roosterjs-editor-core/lib/coreApi/insertNode.ts");
 var restoreUndoSnapshot_1 = __webpack_require__(/*! ./restoreUndoSnapshot */ "./packages/roosterjs-editor-core/lib/coreApi/restoreUndoSnapshot.ts");
 var selectRange_1 = __webpack_require__(/*! ./selectRange */ "./packages/roosterjs-editor-core/lib/coreApi/selectRange.ts");
+var selectTable_1 = __webpack_require__(/*! ./selectTable */ "./packages/roosterjs-editor-core/lib/coreApi/selectTable.ts");
 var setContent_1 = __webpack_require__(/*! ./setContent */ "./packages/roosterjs-editor-core/lib/coreApi/setContent.ts");
 var switchShadowEdit_1 = __webpack_require__(/*! ./switchShadowEdit */ "./packages/roosterjs-editor-core/lib/coreApi/switchShadowEdit.ts");
 var transformColor_1 = __webpack_require__(/*! ./transformColor */ "./packages/roosterjs-editor-core/lib/coreApi/transformColor.ts");
@@ -4510,6 +4525,7 @@ exports.coreApiMap = {
     switchShadowEdit: switchShadowEdit_1.switchShadowEdit,
     transformColor: transformColor_1.transformColor,
     triggerEvent: triggerEvent_1.triggerEvent,
+    selectTable: selectTable_1.selectTable,
 };
 
 
@@ -5028,9 +5044,6 @@ exports.getSelectionRange = getSelectionRange;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSelectionRangeEx = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var TABLE_SELECTED = '_tableSelected';
-var TABLE_CELL_SELECTED_CLASS = '_tableCellSelected';
-var TABLE_CELL_SELECTOR = "td." + TABLE_CELL_SELECTED_CLASS + ",th." + TABLE_CELL_SELECTED_CLASS;
 /**
  * @internal
  * Get current or cached selection range
@@ -5038,22 +5051,32 @@ var TABLE_CELL_SELECTOR = "td." + TABLE_CELL_SELECTED_CLASS + ",th." + TABLE_CEL
  * @returns A Range object of the selection range
  */
 var getSelectionRangeEx = function (core) {
-    var _a;
+    var _a, _b;
     var result = null;
     if (core.lifecycle.shadowEditFragment) {
-        var shadowRange = core.lifecycle.shadowEditSelectionPath &&
-            (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, core.lifecycle.shadowEditSelectionPath.start, core.lifecycle.shadowEditSelectionPath.end);
-        var tableSelected = getTableSelected(core.contentDiv);
-        if (tableSelected) {
-            return createTableSelectionEx(tableSelected);
+        var _c = core.lifecycle, shadowEditTableSelectionPath = _c.shadowEditTableSelectionPath, shadowEditSelectionPath = _c.shadowEditSelectionPath;
+        if ((shadowEditTableSelectionPath === null || shadowEditTableSelectionPath === void 0 ? void 0 : shadowEditTableSelectionPath.length) > 0) {
+            var ranges = core.lifecycle.shadowEditTableSelectionPath.map(function (path) {
+                return (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, path.start, path.end);
+            });
+            return {
+                type: 1 /* TableSelection */,
+                ranges: ranges,
+                areAllCollapsed: checkAllCollapsed(ranges),
+                table: (0, roosterjs_editor_dom_1.findClosestElementAncestor)(ranges[0].startContainer, core.contentDiv, 'table'),
+                coordinates: null,
+            };
+        }
+        else {
+            var shadowRange = shadowEditSelectionPath &&
+                (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, shadowEditSelectionPath.start, shadowEditSelectionPath.end);
+            return createNormalSelectionEx(shadowRange ? [shadowRange] : []);
         }
-        return createNormalSelectionEx([shadowRange]);
     }
     else {
         if (core.api.hasFocus(core)) {
-            var tableSelected = getTableSelected(core.contentDiv);
-            if (tableSelected) {
-                return createTableSelectionEx(tableSelected);
+            if (core.domEvent.tableSelectionRange) {
+                return core.domEvent.tableSelectionRange;
             }
             var selection = (_a = core.contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
             if (!result && selection && selection.rangeCount > 0) {
@@ -5063,7 +5086,7 @@ var getSelectionRangeEx = function (core) {
                 }
             }
         }
-        return createNormalSelectionEx([core.domEvent.selectionRange]);
+        return ((_b = core.domEvent.tableSelectionRange) !== null && _b !== void 0 ? _b : createNormalSelectionEx(core.domEvent.selectionRange ? [core.domEvent.selectionRange] : []));
     }
 };
 exports.getSelectionRangeEx = getSelectionRangeEx;
@@ -5074,45 +5097,9 @@ function createNormalSelectionEx(ranges) {
         areAllCollapsed: checkAllCollapsed(ranges),
     };
 }
-function createTableSelectionEx(table) {
-    var ranges = getRangesFromTable(table);
-    return {
-        type: 1 /* TableSelection */,
-        ranges: ranges,
-        table: table,
-        areAllCollapsed: checkAllCollapsed(ranges),
-    };
-}
-function getRangesFromTable(table) {
-    var ranges = [];
-    table.querySelectorAll('tr').forEach(function (row) {
-        var rowRange = new Range();
-        var firstSelected = null;
-        var lastSelected = null;
-        row.querySelectorAll(TABLE_CELL_SELECTOR).forEach(function (cell) {
-            if ((0, roosterjs_editor_dom_1.safeInstanceOf)(cell, 'HTMLTableCellElement')) {
-                firstSelected = firstSelected || cell;
-                lastSelected = cell;
-            }
-        });
-        if (firstSelected) {
-            rowRange.setStartBefore(firstSelected);
-            rowRange.setEndAfter(lastSelected);
-            ranges.push(rowRange);
-        }
-    });
-    return ranges;
-}
 function checkAllCollapsed(ranges) {
     return ranges.filter(function (range) { return range === null || range === void 0 ? void 0 : range.collapsed; }).length == ranges.length;
 }
-function getTableSelected(container) {
-    var table = container.querySelector('table.' + TABLE_SELECTED);
-    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(table, 'HTMLTableElement')) {
-        return table;
-    }
-    return null;
-}
 
 
 /***/ }),
@@ -5434,6 +5421,188 @@ function restorePendingFormatState(core) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/coreApi/selectTable.ts":
+/*!*******************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/coreApi/selectTable.ts ***!
+  \*******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectTable = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var TABLE_ID = 'tableSelected';
+var CONTENT_DIV_ID = 'contentDiv_';
+var STYLE_ID = 'tableStyle';
+/**
+ * @internal
+ * Select a table and save data of the selected range
+ * @param core The EditorCore object
+ * @param table table to select
+ * @param coordinates first and last cell of the selection, if this parameter is null, instead of
+ * selecting, will unselect the table.
+ * @returns true if successful
+ */
+var selectTable = function (core, table, coordinates) {
+    unselect(core);
+    if (coordinates && table) {
+        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 */)));
+        return {
+            type: 1 /* TableSelection */,
+            ranges: ranges,
+            table: table,
+            areAllCollapsed: ranges.filter(function (range) { return range === null || range === void 0 ? void 0 : range.collapsed; }).length == ranges.length,
+            coordinates: coordinates,
+        };
+    }
+    return null;
+};
+exports.selectTable = selectTable;
+function buildCss(table, coordinates, contentDivSelector) {
+    var tr1 = coordinates.firstCell.y;
+    var td1 = coordinates.firstCell.x;
+    var tr2 = coordinates.lastCell.y;
+    var td2 = coordinates.lastCell.x;
+    var ranges = [];
+    var firstSelected = null;
+    var lastSelected = null;
+    var css = '';
+    var isFirst = true;
+    var vTable = new roosterjs_editor_dom_1.VTable(table);
+    // Get whether table has thead, tbody or tfoot.
+    var tableChildren = (0, roosterjs_editor_dom_1.toArray)(table.childNodes).filter(function (node) { return ['THEAD', 'TBODY', 'TFOOT'].indexOf((0, roosterjs_editor_dom_1.getTagOfNode)(node)) > -1; });
+    // Set the start and end of each of the table childs, so we can build the selector according the element between the table and the row.
+    var cont = 0;
+    var indexes = tableChildren.map(function (node) {
+        var result = {
+            el: (0, roosterjs_editor_dom_1.getTagOfNode)(node),
+            start: cont,
+            end: node.childNodes.length + cont,
+        };
+        cont = result.end;
+        return result;
+    });
+    vTable.cells.forEach(function (row, rowIndex) {
+        var tdCount = 0;
+        var thCount = 0;
+        firstSelected = null;
+        lastSelected = null;
+        //Get current TBODY/THEAD/TFOOT
+        var midElement = indexes.filter(function (ind) { return ind.start <= rowIndex && ind.end > rowIndex; })[0];
+        var middleElSelector = midElement ? '>' + midElement.el + '>' : '>';
+        var currentRow = midElement && rowIndex + 1 >= midElement.start
+            ? rowIndex + 1 - midElement.start
+            : rowIndex + 1;
+        for (var cellIndex = 0; cellIndex < row.length; cellIndex++) {
+            if (row[cellIndex].td) {
+                var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(row[cellIndex].td);
+                if (tag == 'TD') {
+                    tdCount++;
+                }
+                if (tag == 'TH') {
+                    thCount++;
+                }
+                if (rowIndex >= tr1 && rowIndex <= tr2 && cellIndex >= td1 && cellIndex <= td2) {
+                    if (isFirst) {
+                        isFirst = false;
+                    }
+                    else if (!css.endsWith(',')) {
+                        css += ',';
+                    }
+                    removeImportant(row[cellIndex].td);
+                    var selector = generateCssFromCell(contentDivSelector, table.id, middleElSelector, currentRow, tag, tag == 'TD' ? tdCount : thCount);
+                    css += selector;
+                    firstSelected = firstSelected || table.querySelector(selector);
+                    lastSelected = table.querySelector(selector);
+                }
+            }
+        }
+        if (firstSelected && lastSelected) {
+            var rowRange = new Range();
+            rowRange.setStartBefore(firstSelected);
+            rowRange.setEndAfter(lastSelected);
+            ranges.push(rowRange);
+        }
+    });
+    css += '{background-color: rgba(198,198,198,0.7) !important;}';
+    return { css: css, ranges: ranges };
+}
+function select(core, table, coordinates) {
+    var doc = core.contentDiv.ownerDocument;
+    var contentDivSelector = '#' + core.contentDiv.id;
+    var _a = buildCss(table, coordinates, contentDivSelector), css = _a.css, ranges = _a.ranges;
+    var styleElement = doc.getElementById(STYLE_ID + core.contentDiv.id);
+    if (!styleElement) {
+        styleElement = doc.createElement('style');
+        doc.head.appendChild(styleElement);
+        styleElement.id = STYLE_ID + core.contentDiv.id;
+    }
+    styleElement.sheet.insertRule(css);
+    return ranges;
+}
+function unselect(core) {
+    var _a;
+    var div = core.contentDiv;
+    var styleElement = div.ownerDocument.getElementById(STYLE_ID + div.id);
+    if ((_a = styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
+        while (styleElement.sheet.cssRules.length > 0) {
+            styleElement.sheet.deleteRule(0);
+        }
+    }
+}
+function ensureUniqueId(el, idPrefix) {
+    if (el && !el.id) {
+        var doc = el.ownerDocument;
+        var getElement = function (doc) { return doc.getElementById(idPrefix + cont_1); };
+        var cont_1 = 0;
+        //Ensure that there are no elements with the same ID
+        var element = getElement(doc);
+        while (element) {
+            element = getElement(doc);
+            cont_1++;
+        }
+        el.id = idPrefix + cont_1;
+    }
+}
+function generateCssFromCell(contentDivSelector, tableId, middleElSelector, rowIndex, cellTag, index) {
+    return (contentDivSelector +
+        ' #' +
+        tableId +
+        middleElSelector +
+        ' tr:nth-child(' +
+        rowIndex +
+        ')>' +
+        cellTag +
+        ':nth-child(' +
+        index +
+        ')');
+}
+function removeImportant(cell) {
+    if (cell) {
+        var styles_1 = (0, roosterjs_editor_dom_1.getStyles)(cell);
+        var modifiedStyles_1 = 0;
+        ['background-color', 'background'].forEach(function (style) {
+            var _a;
+            if (((_a = styles_1[style]) === null || _a === void 0 ? void 0 : _a.indexOf('!important')) > -1) {
+                var index = styles_1[style].indexOf('!');
+                styles_1[style] = styles_1[style].substring(0, index);
+                modifiedStyles_1++;
+            }
+        });
+        if (modifiedStyles_1 > 0) {
+            (0, roosterjs_editor_dom_1.setStyles)(cell, styles_1);
+        }
+    }
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/coreApi/setContent.ts":
@@ -5498,12 +5667,15 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 var switchShadowEdit = function (core, isOn) {
     var lifecycle = core.lifecycle, contentDiv = core.contentDiv;
-    var shadowEditFragment = lifecycle.shadowEditFragment, shadowEditSelectionPath = lifecycle.shadowEditSelectionPath;
+    var shadowEditFragment = lifecycle.shadowEditFragment, shadowEditSelectionPath = lifecycle.shadowEditSelectionPath, shadowEditTableSelectionPath = lifecycle.shadowEditTableSelectionPath;
     var wasInShadowEdit = !!shadowEditFragment;
     if (isOn) {
         if (!wasInShadowEdit) {
+            var selection = core.api.getSelectionRangeEx(core);
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             shadowEditSelectionPath = range && (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range);
+            shadowEditTableSelectionPath =
+                selection && selection.ranges.map(function (range) { return (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range); });
             shadowEditFragment = core.contentDiv.ownerDocument.createDocumentFragment();
             (0, roosterjs_editor_dom_1.moveChildNodes)(shadowEditFragment, contentDiv);
             shadowEditFragment.normalize();
@@ -5514,6 +5686,7 @@ var switchShadowEdit = function (core, isOn) {
             }, false /*broadcast*/);
             lifecycle.shadowEditFragment = shadowEditFragment;
             lifecycle.shadowEditSelectionPath = shadowEditSelectionPath;
+            lifecycle.shadowEditTableSelectionPath = shadowEditTableSelectionPath;
         }
         (0, roosterjs_editor_dom_1.moveChildNodes)(contentDiv);
         contentDiv.appendChild(lifecycle.shadowEditFragment.cloneNode(true /*deep*/));
@@ -5531,6 +5704,14 @@ var switchShadowEdit = function (core, isOn) {
             if (shadowEditSelectionPath) {
                 core.api.selectRange(core, (0, roosterjs_editor_dom_1.createRange)(contentDiv, shadowEditSelectionPath.start, shadowEditSelectionPath.end));
             }
+            if (core.domEvent.tableSelectionRange) {
+                var _a = core.domEvent.tableSelectionRange, table = _a.table, coordinates = _a.coordinates;
+                var tableId = table.id;
+                var tableElement = core.contentDiv.querySelector('#' + tableId);
+                if (table) {
+                    core.domEvent.tableSelectionRange = core.api.selectTable(core, tableElement, coordinates);
+                }
+            }
         }
     }
 };
@@ -5655,6 +5836,12 @@ function getAll(rootNode, includeSelf) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.triggerEvent = void 0;
+var allowedEventsInShadowEdit = [
+    11 /* EditorReady */,
+    12 /* BeforeDispose */,
+    8 /* ExtractContentWithDom */,
+    21 /* ZoomChanged */,
+];
 /**
  * @internal
  * Trigger a plugin event
@@ -5664,7 +5851,7 @@ exports.triggerEvent = void 0;
  */
 var triggerEvent = function (core, pluginEvent, broadcast) {
     if ((!core.lifecycle.shadowEditFragment ||
-        pluginEvent.eventType == 12 /* BeforeDispose */) &&
+        allowedEventsInShadowEdit.indexOf(pluginEvent.eventType) >= 0) &&
         (broadcast || !core.plugins.some(function (plugin) { return handledExclusively(pluginEvent, plugin); }))) {
         core.plugins.forEach(function (plugin) {
             if (plugin.onPluginEvent) {
@@ -5860,7 +6047,13 @@ var DOMEventPlugin = /** @class */ (function () {
             });
         };
         this.onFocus = function () {
-            _this.editor.select(_this.state.selectionRange);
+            var _a = _this.state.tableSelectionRange || {}, table = _a.table, coordinates = _a.coordinates;
+            if (table && coordinates) {
+                _this.editor.select(table, coordinates);
+            }
+            else {
+                _this.editor.select(_this.state.selectionRange);
+            }
             _this.state.selectionRange = null;
         };
         this.onKeyDownDocument = function (event) {
@@ -5920,6 +6113,7 @@ var DOMEventPlugin = /** @class */ (function () {
             selectionRange: null,
             stopPrintableKeyboardEventPropagation: !options.allowKeyboardEventPropagation,
             contextMenuProviders: ((_a = options.plugins) === null || _a === void 0 ? void 0 : _a.filter(isContextMenuProvider)) || [],
+            tableSelectionRange: null,
         };
     }
     /**
@@ -6555,6 +6749,7 @@ var LifecyclePlugin = /** @class */ (function () {
             experimentalFeatures: options.experimentalFeatures || [],
             shadowEditFragment: null,
             shadowEditSelectionPath: null,
+            shadowEditTableSelectionPath: null,
         };
     }
     /**
@@ -7227,7 +7422,8 @@ var Editor = /** @class */ (function () {
                 plugins.push(corePlugins[name]);
             }
         });
-        this.core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), plugins: plugins.filter(function (x) { return !!x; }) }, (0, createCorePlugins_1.getPluginState)(corePlugins)), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), sizeTransformer: options.sizeTransformer || (function (size) { return size; }) });
+        var zoomScale = options.zoomScale > 0 ? options.zoomScale : 1;
+        this.core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), plugins: plugins.filter(function (x) { return !!x; }) }, (0, createCorePlugins_1.getPluginState)(corePlugins)), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }) });
         // 3. Initialize plugins
         this.core.plugins.forEach(function (plugin) { return plugin.initialize(_this); });
         // 4. Ensure user will type in a container node, not the editor content DIV
@@ -7468,6 +7664,16 @@ var Editor = /** @class */ (function () {
         this.core.api.focus(this.core);
     };
     Editor.prototype.select = function (arg1, arg2, arg3, arg4) {
+        var _a;
+        if (!!((_a = arg1) === null || _a === void 0 ? void 0 : _a.rows)) {
+            var selection = this.core.api.selectTable(this.core, arg1, arg2);
+            this.core.domEvent.tableSelectionRange = selection;
+            return !!selection;
+        }
+        else {
+            this.core.api.selectTable(this.core, null);
+            this.core.domEvent.tableSelectionRange = null;
+        }
         var range = !arg1
             ? null
             : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
@@ -7849,11 +8055,38 @@ var Editor = /** @class */ (function () {
         return this.core.trustedHTMLHandler;
     };
     /**
-     * Get a transformer function. It transform the size changes according to current situation.
+     * @deprecated Use getZoomScale() instead
      */
     Editor.prototype.getSizeTransformer = function () {
         return this.core.sizeTransformer;
     };
+    /**
+     * Get current zoom scale, default value is 1
+     * When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale
+     * to let editor behave correctly especially for those mouse drag/drop behaviors
+     * @returns current zoom scale number
+     */
+    Editor.prototype.getZoomScale = function () {
+        return this.core.zoomScale;
+    };
+    /**
+     * Set current zoom scale, default value is 1
+     * When editor is put under a zoomed container, need to pass the zoom scale number using EditorOptions.zoomScale
+     * to let editor behave correctly especially for those mouse drag/drop behaviors
+     * @param scale The new scale number to set. It should be positive number and no greater than 10, otherwise it will be ignored.
+     */
+    Editor.prototype.setZoomScale = function (scale) {
+        if (scale > 0 && scale <= 10) {
+            var oldValue = this.core.zoomScale;
+            this.core.zoomScale = scale;
+            if (oldValue != scale) {
+                this.triggerPluginEvent(21 /* ZoomChanged */, {
+                    oldZoomScale: oldValue,
+                    newZoomScale: scale,
+                }, true /*broadcast*/);
+            }
+        }
+    };
     return Editor;
 }());
 exports.default = Editor;
@@ -8250,8 +8483,9 @@ var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterj
  *   not supported by browser.
  */
 function extractClipboardEvent(event, callback, options) {
+    var _a;
     var dataTransfer = event.clipboardData ||
-        event.target.ownerDocument.defaultView.clipboardData;
+        ((_a = event.target.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView).clipboardData;
     if (dataTransfer.items) {
         event.preventDefault();
         (0, extractClipboardItems_1.default)((0, toArray_1.default)(dataTransfer.items), options).then(callback);
@@ -8306,7 +8540,7 @@ var ContentHandlers = (_a = {},
         return (data.rawHtml = Browser_1.Browser.isEdge ? workaroundForEdge(value) : value);
     },
     _a["text/plain" /* PlainText */] = function (data, value) { return (data.text = value); },
-    _a[OTHER_TEXT_TYPE] = function (data, value, type) { return (data.customValues[type] = value); },
+    _a[OTHER_TEXT_TYPE] = function (data, value, type) { return !!type && (data.customValues[type] = value); },
     _a);
 /**
  * Extract clipboard items to be a ClipboardData object for IE
@@ -8338,10 +8572,15 @@ function extractClipboardItems(items, options) {
             data.types.push(type);
             data.image = item.getAsFile();
             return new Promise(function (resolve) {
-                (0, readFile_1.default)(data.image, function (dataUrl) {
-                    data.imageDataUri = dataUrl;
+                if (data.image) {
+                    (0, readFile_1.default)(data.image, function (dataUrl) {
+                        data.imageDataUri = dataUrl;
+                        resolve();
+                    });
+                }
+                else {
                     resolve();
-                });
+                }
             });
         }
         else {
@@ -8385,9 +8624,10 @@ function tryParseLinkPreview(data, value) {
 }
 function getAllowedCustomType(type, allowedCustomPasteType) {
     var textType = type.indexOf("text/" /* Text */) == 0
-        ? type.substr("text/" /* Text */.length)
+        ? type.substring("text/" /* Text */.length)
         : null;
-    return textType && (allowedCustomPasteType === null || allowedCustomPasteType === void 0 ? void 0 : allowedCustomPasteType.indexOf(textType)) >= 0 ? textType : null;
+    var index = allowedCustomPasteType && textType ? allowedCustomPasteType.indexOf(textType) : -1;
+    return textType && index >= 0 ? textType : undefined;
 }
 
 
@@ -8418,7 +8658,7 @@ var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterj
  *   not supported by browser.
  */
 function extractClipboardItemsForIE(dataTransfer, callback, options) {
-    var _a;
+    var _a, _b, _c;
     var clipboardData = {
         types: dataTransfer.types ? (0, toArray_1.default)(dataTransfer.types) : [],
         text: dataTransfer.getData('text'),
@@ -8428,7 +8668,7 @@ function extractClipboardItemsForIE(dataTransfer, callback, options) {
     };
     for (var i = 0; i < (dataTransfer.files ? dataTransfer.files.length : 0); i++) {
         var file = dataTransfer.files.item(i);
-        if (((_a = file.type) === null || _a === void 0 ? void 0 : _a.indexOf("image/" /* Image */)) == 0) {
+        if (((_a = file === null || file === void 0 ? void 0 : file.type) === null || _a === void 0 ? void 0 : _a.indexOf("image/" /* Image */)) == 0) {
             clipboardData.image = file;
             break;
         }
@@ -8449,9 +8689,10 @@ function extractClipboardItemsForIE(dataTransfer, callback, options) {
         div_1.contentEditable = 'true';
         div_1.innerHTML = '';
         div_1.focus();
-        div_1.ownerDocument.defaultView.setTimeout(function () {
+        (_c = (_b = div_1.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView) === null || _c === void 0 ? void 0 : _c.setTimeout(function () {
+            var _a;
             clipboardData.rawHtml = div_1.innerHTML;
-            options.removeTempDiv(div_1);
+            (_a = options.removeTempDiv) === null || _a === void 0 ? void 0 : _a.call(options, div_1);
             nextStep();
         }, 0);
     }
@@ -9663,7 +9904,7 @@ var isModifierKey_1 = __webpack_require__(/*! ./isModifierKey */ "./packages/roo
  * @param event The keyboard event object
  */
 function isCharacterValue(event) {
-    return !(0, isModifierKey_1.default)(event) && event.key && event.key.length == 1;
+    return !(0, isModifierKey_1.default)(event) && !!event.key && event.key.length == 1;
 }
 exports.default = isCharacterValue;
 
@@ -9764,10 +10005,10 @@ var HtmlSanitizer = /** @class */ (function () {
         this.allowedAttributes = (0, getAllowedValues_1.getAllowedAttributes)(options.additionalAllowedAttributes);
         this.allowedCssClassesRegex = (0, getAllowedValues_1.getAllowedCssClassesRegex)(options.additionalAllowedCssClasses);
         this.defaultStyleValues = (0, getAllowedValues_1.getDefaultStyleValues)(options.additionalDefaultStyleValues);
-        this.additionalPredefinedCssForElement = options.additionalPredefinedCssForElement;
+        this.additionalPredefinedCssForElement = options.additionalPredefinedCssForElement || null;
         this.additionalGlobalStyleNodes = options.additionalGlobalStyleNodes || [];
-        this.preserveHtmlComments = options.preserveHtmlComments;
-        this.unknownTagReplacement = options.unknownTagReplacement;
+        this.preserveHtmlComments = options.preserveHtmlComments || false;
+        this.unknownTagReplacement = options.unknownTagReplacement || null;
     }
     /**
      * @deprecated Use new HtmlSanitizer().convertGlobalCssToInlineCss() instead
@@ -9876,6 +10117,7 @@ var HtmlSanitizer = /** @class */ (function () {
         });
     };
     HtmlSanitizer.prototype.processNode = function (node, currentStyle, context) {
+        var _a;
         var nodeType = node.nodeType;
         var isElement = nodeType == 1 /* Element */;
         var isText = nodeType == 3 /* Text */;
@@ -9909,7 +10151,7 @@ var HtmlSanitizer = /** @class */ (function () {
                 whiteSpace == 'pre' ||
                     whiteSpace == 'pre-line' ||
                     whiteSpace == 'pre-wrap' ||
-                    !/^[\r\n]*$/g.test(node.nodeValue);
+                    !/^[\r\n]*$/g.test(node.nodeValue || '');
         }
         else if (isFragment) {
             shouldKeep = true;
@@ -9921,11 +10163,13 @@ var HtmlSanitizer = /** @class */ (function () {
             shouldKeep = false;
         }
         if (!shouldKeep) {
-            node.parentNode.removeChild(node);
+            (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
         }
         else if (isText &&
             (currentStyle['white-space'] == 'pre' || currentStyle['white-space'] == 'pre-wrap')) {
-            node.nodeValue = node.nodeValue.replace(/^ /gm, '\u00A0').replace(/ {2}/g, ' \u00A0');
+            node.nodeValue = (node.nodeValue || '')
+                .replace(/^ /gm, '\u00A0')
+                .replace(/ {2}/g, ' \u00A0');
         }
         else if (isElement || isFragment) {
             var thisStyle = (0, cloneObject_1.cloneObject)(currentStyle);
@@ -10004,12 +10248,13 @@ var HtmlSanitizer = /** @class */ (function () {
         var originalClasses = originalValue ? originalValue.split(' ') : [];
         var calculatedClasses = calculatedValue ? calculatedValue.split(' ') : [];
         originalClasses.forEach(function (className) {
-            if (_this.allowedCssClassesRegex.test(className) &&
+            var _a;
+            if (((_a = _this.allowedCssClassesRegex) === null || _a === void 0 ? void 0 : _a.test(className)) &&
                 calculatedClasses.indexOf(className) < 0) {
                 calculatedClasses.push(className);
             }
         });
-        return calculatedClasses.length > 0 ? calculatedClasses.join(' ') : null;
+        return (calculatedClasses === null || calculatedClasses === void 0 ? void 0 : calculatedClasses.length) > 0 ? calculatedClasses.join(' ') : null;
     };
     return HtmlSanitizer;
 }());
@@ -10081,6 +10326,7 @@ function customClone(source, existingObj) {
     }
     return result;
 }
+// @ts-ignore Ignore this error for IE compatibility
 var cloneObjectImpl = Object.assign ? nativeClone : customClone;
 /**
  * @internal
@@ -10423,7 +10669,7 @@ var INHERITABLE_PROPERTIES = ('border-spacing,caption-side,color,' +
  */
 function getInheritableStyles(element) {
     var win = element && element.ownerDocument && element.ownerDocument.defaultView;
-    var styles = win && win.getComputedStyle(element);
+    var styles = win && element && win.getComputedStyle(element);
     var result = {};
     INHERITABLE_PROPERTIES.forEach(function (name) { return (result[name] = (styles && styles.getPropertyValue(name)) || ''); });
     return result;
@@ -13675,16 +13921,38 @@ exports.default = setStyles;
 
 "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 });
-var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
+var applyTableFormat_1 = __webpack_require__(/*! ../utils/applyTableFormat */ "./packages/roosterjs-editor-dom/lib/utils/applyTableFormat.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 var normalizeRect_1 = __webpack_require__(/*! ../utils/normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
-var tableFormatInfo_1 = __webpack_require__(/*! ../utils/tableFormatInfo */ "./packages/roosterjs-editor-dom/lib/utils/tableFormatInfo.ts");
-var TRANSPARENT = 'transparent';
-var TABLE_CELL_TAG_NAME = 'TD';
-var TABLE_HEADER_TAG_NAME = 'TH';
+var tableFormatInfo_1 = __webpack_require__(/*! ./tableFormatInfo */ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts");
+var CELL_SHADE = 'cellShade';
+var DEFAULT_FORMAT = {
+    topBorderColor: '#ABABAB',
+    bottomBorderColor: '#ABABAB',
+    verticalBorderColor: '#ABABAB',
+    hasHeaderRow: false,
+    hasFirstColumn: false,
+    hasBandedRows: false,
+    hasBandedColumns: false,
+    bgColorEven: null,
+    bgColorOdd: '#ABABAB20',
+    headerRowColor: '#ABABAB',
+    tableBorderFormat: 0 /* DEFAULT */,
+};
 /**
  * A virtual table class, represent an HTML table, by expand all merged cells to each separated cells
  */
@@ -13693,9 +13961,9 @@ var VTable = /** @class */ (function () {
      * Create a new instance of VTable object using HTML TABLE or TD node
      * @param node The HTML Table or TD node
      * @param normalizeSize Whether table size needs to be normalized
-     * @param sizeTransformer A size transformer function used for normalize table size
+     * @param zoomScale When the table is under a zoomed container, pass in the zoom scale here
      */
-    function VTable(node, normalizeSize, sizeTransformer) {
+    function VTable(node, normalizeSize, zoomScale) {
         var _this = this;
         this.trs = [];
         this.table = (0, safeInstanceOf_1.default)(node, 'HTMLTableElement') ? node : getTableFromTd(node);
@@ -13730,7 +13998,7 @@ var VTable = /** @class */ (function () {
             });
             this.formatInfo = (0, tableFormatInfo_1.getTableFormatInfo)(this.table);
             if (normalizeSize) {
-                this.normalizeSize(sizeTransformer);
+                this.normalizeSize(typeof zoomScale == 'number' ? function (n) { return n / zoomScale; } : zoomScale);
             }
         }
     }
@@ -13752,8 +14020,8 @@ var VTable = /** @class */ (function () {
                 });
             });
             if (this.formatInfo) {
-                this.applyFormat(this.formatInfo);
                 (0, tableFormatInfo_1.saveTableInfo)(this.table, this.formatInfo);
+                (0, applyTableFormat_1.default)(this.table, this.cells, this.formatInfo);
             }
         }
         else if (this.table) {
@@ -13768,242 +14036,20 @@ var VTable = /** @class */ (function () {
         if (!this.table) {
             return;
         }
-        this.formatInfo = format ? format : this.formatInfo;
-        this.table.style.borderCollapse = 'collapse';
-        this.setBordersType(this.formatInfo);
-        this.setColor(this.formatInfo);
-        this.setFirstColumnFormat(this.formatInfo);
-        this.setHeaderRowFormat(this.formatInfo);
+        this.formatInfo = __assign(__assign(__assign({}, DEFAULT_FORMAT), (this.formatInfo || {})), (format || {}));
+        this.deleteCellShadeDataset(this.cells);
     };
     /**
-     * Set color to the table
-     * @param format
+     * Remove the cellshade dataset to apply a new style format at the cell.
+     * @param cells
      */
-    VTable.prototype.setColor = function (format) {
-        var color = function (index) { return (index % 2 === 0 ? format.bgColorEven : format.bgColorOdd); };
-        var hasBandedRows = format.hasBandedRows, hasBandedColumns = format.hasBandedColumns, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven;
-        var shouldColorWholeTable = !hasBandedRows && bgColorOdd === bgColorEven ? true : false;
-        this.cells.forEach(function (row, index) {
+    VTable.prototype.deleteCellShadeDataset = function (cells) {
+        cells.forEach(function (row) {
             row.forEach(function (cell) {
-                if (cell.td) {
-                    if (hasBandedRows) {
-                        var backgroundColor = color(index);
-                        cell.td.style.backgroundColor = backgroundColor;
-                    }
-                    else if (shouldColorWholeTable) {
-                        cell.td.style.backgroundColor = format.bgColorOdd;
-                    }
-                    else {
-                        cell.td.style.backgroundColor = null;
-                    }
-                }
-            });
-        });
-        if (hasBandedColumns) {
-            this.cells.forEach(function (row) {
-                row.forEach(function (cell, index) {
-                    var backgroundColor = color(index);
-                    if (cell.td && backgroundColor) {
-                        cell.td.style.backgroundColor = backgroundColor;
-                    }
-                });
-            });
-        }
-    };
-    /**
-     * Set color to borders of an table
-     * @param format
-     * @returns
-     */
-    VTable.prototype.setBorderColors = function (td, format) {
-        td.style.borderTop = getBorderStyle(format.topBorderColor);
-        td.style.borderLeft = getBorderStyle(format.verticalBorderColor);
-        td.style.borderRight = getBorderStyle(format.verticalBorderColor);
-        td.style.borderBottom = getBorderStyle(format.bottomBorderColor);
-    };
-    /**
-     * Format the border type
-     * @returns
-     */
-    VTable.prototype.formatBorders = function (format, td, isFirstRow, isLastRow, isFirstColumn, isLastColumn) {
-        this.setBorderColors(td, format);
-        switch (format.tableBorderFormat) {
-            case 0 /* DEFAULT */:
-                return;
-            case 1 /* LIST_WITH_SIDE_BORDERS */:
-                if (!isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (!isLastColumn) {
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                break;
-            case 4 /* FIRST_COLUMN_HEADER_EXTERNAL */:
-                if (!isFirstRow) {
-                    td.style.borderTopColor = TRANSPARENT;
-                }
-                if (!isLastRow && !isFirstRow) {
-                    td.style.borderBottomColor = TRANSPARENT;
-                }
-                if (!isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (!isLastColumn && !isFirstColumn) {
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                if (isFirstColumn && isFirstRow) {
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                break;
-            case 2 /* NO_HEADER_BORDERS */:
-                if (isFirstRow) {
-                    td.style.borderTopColor = TRANSPARENT;
-                    td.style.borderRightColor = TRANSPARENT;
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (isLastColumn) {
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                break;
-            case 3 /* NO_SIDE_BORDERS */:
-                if (isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (isLastColumn) {
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                break;
-            case 5 /* ESPECIAL_TYPE_1 */:
-                if (isFirstRow) {
-                    td.style.borderRightColor = TRANSPARENT;
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (isFirstColumn) {
-                    td.style.borderBottomColor = TRANSPARENT;
-                    td.style.borderTopColor = TRANSPARENT;
-                }
-                if (isFirstRow && isFirstColumn) {
-                    td.style.borderLeftColor = format.verticalBorderColor;
-                    td.style.borderBottomColor = format.bottomBorderColor;
-                    td.style.borderTopColor = format.topBorderColor;
-                }
-                break;
-            case 6 /* ESPECIAL_TYPE_2 */:
-                if (isFirstRow) {
-                    td.style.borderRightColor = TRANSPARENT;
-                    td.style.borderLeftColor = TRANSPARENT;
-                }
-                if (isFirstColumn) {
-                    td.style.borderBottomColor = TRANSPARENT;
-                    td.style.borderTopColor = TRANSPARENT;
-                }
-                if (isFirstRow && isFirstColumn) {
-                    td.style.borderLeftColor = format.verticalBorderColor;
-                    td.style.borderBottomColor = format.bottomBorderColor;
-                    td.style.borderTopColor = format.topBorderColor;
-                }
-                if (!isFirstRow && !isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                    td.style.borderBottomColor = TRANSPARENT;
-                    td.style.borderTopColor = TRANSPARENT;
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                break;
-            case 7 /* ESPECIAL_TYPE_3 */:
-                if (isFirstRow) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                    td.style.borderTopColor = TRANSPARENT;
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                if (isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                    td.style.borderTopColor = TRANSPARENT;
-                    td.style.borderBottomColor = TRANSPARENT;
-                }
-                if (!isFirstRow && !isFirstColumn) {
-                    td.style.borderLeftColor = TRANSPARENT;
-                    td.style.borderBottomColor = TRANSPARENT;
-                    td.style.borderTopColor = TRANSPARENT;
-                    td.style.borderRightColor = TRANSPARENT;
-                }
-                if (isFirstRow && isFirstColumn) {
-                    td.style.borderBottomColor = format.bottomBorderColor;
-                }
-                break;
-        }
-    };
-    /**
-     * Organize the borders of table according to a border type
-     * @param format
-     * @returns
-     */
-    VTable.prototype.setBordersType = function (format) {
-        var _this = this;
-        this.cells.forEach(function (row, rowIndex) {
-            row.forEach(function (cell, cellIndex) {
-                if (cell.td) {
-                    _this.formatBorders(format, cell.td, rowIndex === 0, rowIndex === _this.cells.length - 1, cellIndex === 0, cellIndex === row.length - 1);
-                }
-            });
-        });
-    };
-    /**
-     * Apply custom design to the first table column
-     * @param format
-     * @returns
-     */
-    VTable.prototype.setFirstColumnFormat = function (format) {
-        var _this = this;
-        if (!format.hasFirstColumn) {
-            this.forEachCellOfColumn(0, function (cell, row, i) {
-                if (cell.td) {
-                    cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_CELL_TAG_NAME);
-                    cell.td.scope = '';
-                }
-            });
-            return;
-        }
-        this.forEachCellOfColumn(0, function (cell, row, i) {
-            if (cell.td) {
-                if (i !== 0) {
-                    cell.td.style.borderTopColor = TRANSPARENT;
-                    cell.td.style.backgroundColor = TRANSPARENT;
-                }
-                if (i !== _this.cells.length - 1 && i !== 0) {
-                    cell.td.style.borderBottomColor = TRANSPARENT;
-                }
-                cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_HEADER_TAG_NAME);
-                cell.td.scope = 'col';
-            }
-        });
-    };
-    /**
-     * Apply custom design to the Header Row
-     * @param format
-     * @returns
-     */
-    VTable.prototype.setHeaderRowFormat = function (format) {
-        if (!format.hasHeaderRow) {
-            this.forEachCellOfRow(0, function (cell, i) {
-                if (cell.td) {
-                    cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_CELL_TAG_NAME);
-                    cell.td.scope = '';
+                if (cell.td && cell.td.dataset[CELL_SHADE]) {
+                    delete cell.td.dataset[CELL_SHADE];
                 }
             });
-            return;
-        }
-        this.forEachCellOfRow(0, function (cell, i) {
-            if (cell.td) {
-                cell.td.style.backgroundColor = format.headerRowColor;
-                cell.td.style.borderRightColor = format.headerRowColor;
-                cell.td.style.borderLeftColor = format.headerRowColor;
-                cell.td.style.borderTopColor = format.headerRowColor;
-                cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_HEADER_TAG_NAME);
-                cell.td.scope = 'row';
-            }
         });
     };
     /**
@@ -14354,7 +14400,7 @@ var VTable = /** @class */ (function () {
         }
     };
     /* normalize width/height for each cell in the table */
-    VTable.prototype.normalizeTableCellSize = function (sizeTransformer) {
+    VTable.prototype.normalizeTableCellSize = function (zoomScale) {
         // remove width/height for each row
         for (var i = 0, row = void 0; (row = this.table.rows[i]); i++) {
             row.removeAttribute('width');
@@ -14367,7 +14413,8 @@ var VTable = /** @class */ (function () {
             for (var j = 0; j < this.cells[i].length; j++) {
                 var cell = this.cells[i][j];
                 if (cell) {
-                    setHTMLElementSizeInPx(cell.td, (sizeTransformer === null || sizeTransformer === void 0 ? void 0 : sizeTransformer(cell.width)) || cell.width, (sizeTransformer === null || sizeTransformer === void 0 ? void 0 : sizeTransformer(cell.height)) || cell.height);
+                    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);
                 }
             }
         }
@@ -14396,9 +14443,6 @@ function getTableFromTd(td) {
     for (; result && result.tagName != 'TABLE'; result = result.parentElement) { }
     return result;
 }
-function getBorderStyle(style) {
-    return 'solid 1px ' + (style || 'transparent');
-}
 /**
  * Clone a table cell
  * @param cell The cell to clone
@@ -14428,31 +14472,119 @@ function cloneNode(node) {
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts":
-/*!************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/Browser.ts ***!
-  \************************************************************/
+/***/ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts":
+/*!********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts ***!
+  \********************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Browser = exports.getBrowserInfo = void 0;
-var isAndroidRegex = /android/i;
+exports.saveTableInfo = exports.getTableFormatInfo = void 0;
+var TABLE_STYLE_INFO = 'roosterTableInfo';
 /**
- * Get current browser information from user agent string
- * @param userAgent The userAgent string of a browser
- * @param appVersion The appVersion string of a browser
- * @returns The BrowserInfo object calculated from the given userAgent and appVersion
+ * @internal
+ * Get the format info of a table
+ * If the table does not have a info saved, it will be retrieved from the css styles
+ * @param table The table that has the info
  */
-function getBrowserInfo(userAgent, appVersion) {
-    // checks whether the browser is running in IE
-    // IE11 will use rv in UA instead of MSIE. Unfortunately Firefox also uses this. We should also look for "Trident" to confirm this.
-    // There have been cases where companies using older version of IE and custom UserAgents have broken this logic (e.g. IE 10 and KellyServices)
-    // therefore we should check that the Trident/rv combo is not just from an older IE browser
-    var isIE11OrGreater = userAgent.indexOf('rv:') != -1 && userAgent.indexOf('Trident') != -1;
-    var isIE = userAgent.indexOf('MSIE') != -1 || isIE11OrGreater;
+function getTableFormatInfo(table) {
+    var obj = safeParseJSON(table === null || table === void 0 ? void 0 : table.dataset[TABLE_STYLE_INFO]);
+    return checkIfTableFormatIsValid(obj) ? obj : null;
+}
+exports.getTableFormatInfo = getTableFormatInfo;
+/**
+ * @internal
+ * Save the format info of a table
+ * @param table The table the info will be saved
+ * @param format The format of the table
+ */
+function saveTableInfo(table, format) {
+    if (table && format) {
+        table.dataset[TABLE_STYLE_INFO] = JSON.stringify(format);
+    }
+}
+exports.saveTableInfo = saveTableInfo;
+function checkIfTableFormatIsValid(format) {
+    if (!format) {
+        return false;
+    }
+    var topBorderColor = format.topBorderColor, verticalBorderColor = format.verticalBorderColor, bottomBorderColor = format.bottomBorderColor, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven, hasBandedColumns = format.hasBandedColumns, hasBandedRows = format.hasBandedRows, hasFirstColumn = format.hasFirstColumn, hasHeaderRow = format.hasHeaderRow, tableBorderFormat = format.tableBorderFormat;
+    var colorsValues = [
+        topBorderColor,
+        verticalBorderColor,
+        bottomBorderColor,
+        bgColorOdd,
+        bgColorEven,
+    ];
+    var stateValues = [hasBandedColumns, hasBandedRows, hasFirstColumn, hasHeaderRow];
+    if (colorsValues.some(function (key) { return !isAValidColor(key); }) ||
+        stateValues.some(function (key) { return !isBoolean(key); }) ||
+        !isAValidTableBorderType(tableBorderFormat)) {
+        return false;
+    }
+    return true;
+}
+function isAValidColor(color) {
+    if (color === null || color === undefined || typeof color === 'string') {
+        return true;
+    }
+    return false;
+}
+function isBoolean(a) {
+    if (typeof a === 'boolean') {
+        return true;
+    }
+    return false;
+}
+function isAValidTableBorderType(border) {
+    if (-1 < border && border < 8) {
+        return true;
+    }
+    return false;
+}
+function safeParseJSON(json) {
+    if (!json) {
+        return null;
+    }
+    try {
+        return JSON.parse(json);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts":
+/*!************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/Browser.ts ***!
+  \************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Browser = exports.getBrowserInfo = void 0;
+var isAndroidRegex = /android/i;
+/**
+ * Get current browser information from user agent string
+ * @param userAgent The userAgent string of a browser
+ * @param appVersion The appVersion string of a browser
+ * @returns The BrowserInfo object calculated from the given userAgent and appVersion
+ */
+function getBrowserInfo(userAgent, appVersion) {
+    // checks whether the browser is running in IE
+    // IE11 will use rv in UA instead of MSIE. Unfortunately Firefox also uses this. We should also look for "Trident" to confirm this.
+    // There have been cases where companies using older version of IE and custom UserAgents have broken this logic (e.g. IE 10 and KellyServices)
+    // therefore we should check that the Trident/rv combo is not just from an older IE browser
+    var isIE11OrGreater = userAgent.indexOf('rv:') != -1 && userAgent.indexOf('Trident') != -1;
+    var isIE = userAgent.indexOf('MSIE') != -1 || isIE11OrGreater;
     // IE11+ may also have 'Chrome', 'Firefox' and 'Safari' in user agent. But it will have 'trident' as well
     var isChrome = false;
     var isFirefox = false;
@@ -14553,6 +14685,291 @@ function applyFormat(element, format, isDarkMode) {
 exports.default = applyFormat;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/applyTableFormat.ts":
+/*!*********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/applyTableFormat.ts ***!
+  \*********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var changeElementTag_1 = __webpack_require__(/*! ./changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
+var TRANSPARENT = 'transparent';
+var TABLE_CELL_TAG_NAME = 'TD';
+var TABLE_HEADER_TAG_NAME = 'TH';
+var CELL_SHADE = 'cellShade';
+/**
+ * @internal
+ * Apply the given table format to this virtual table
+ * @param format Table format to apply
+ */
+function applyTableFormat(table, cells, format) {
+    if (!format) {
+        return;
+    }
+    table.style.borderCollapse = 'collapse';
+    setBordersType(cells, format);
+    setColor(cells, format);
+    setFirstColumnFormat(cells, format);
+    setHeaderRowFormat(cells, format);
+}
+exports.default = applyTableFormat;
+/**
+ * Check if the cell has shade
+ * @param cell
+ * @returns
+ */
+function hasCellShade(cell) {
+    if (!cell.td) {
+        return false;
+    }
+    var colorShade = cell.td.dataset[CELL_SHADE];
+    return colorShade ? true : false;
+}
+/**
+ * Set color to the table
+ * @param format the format that must be applied
+ */
+function setColor(cells, format) {
+    var color = function (index) { return (index % 2 === 0 ? format.bgColorEven : format.bgColorOdd); };
+    var hasBandedRows = format.hasBandedRows, hasBandedColumns = format.hasBandedColumns, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven;
+    var shouldColorWholeTable = !hasBandedRows && bgColorOdd === bgColorEven ? true : false;
+    cells.forEach(function (row, index) {
+        row.forEach(function (cell) {
+            if (cell.td && !hasCellShade(cell)) {
+                if (hasBandedRows) {
+                    var backgroundColor = color(index);
+                    cell.td.style.backgroundColor = backgroundColor || TRANSPARENT;
+                }
+                else if (shouldColorWholeTable) {
+                    cell.td.style.backgroundColor = format.bgColorOdd || TRANSPARENT;
+                }
+                else {
+                    cell.td.style.backgroundColor = TRANSPARENT;
+                }
+            }
+        });
+    });
+    if (hasBandedColumns) {
+        cells.forEach(function (row) {
+            row.forEach(function (cell, index) {
+                var backgroundColor = color(index);
+                if (cell.td && backgroundColor && !hasCellShade(cell)) {
+                    cell.td.style.backgroundColor = backgroundColor;
+                }
+            });
+        });
+    }
+}
+/**
+ * Set color to borders of an table
+ * @param format
+ * @returns
+ */
+function setBorderColors(td, format) {
+    td.style.borderTop = getBorderStyle(format.topBorderColor);
+    td.style.borderLeft = getBorderStyle(format.verticalBorderColor);
+    td.style.borderRight = getBorderStyle(format.verticalBorderColor);
+    td.style.borderBottom = getBorderStyle(format.bottomBorderColor);
+}
+/**
+ * Format the border type
+ * @returns
+ */
+function formatBorders(format, td, isFirstRow, isLastRow, isFirstColumn, isLastColumn) {
+    setBorderColors(td, format);
+    switch (format.tableBorderFormat) {
+        case 0 /* DEFAULT */:
+            return;
+        case 1 /* LIST_WITH_SIDE_BORDERS */:
+            if (!isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (!isLastColumn) {
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            break;
+        case 4 /* FIRST_COLUMN_HEADER_EXTERNAL */:
+            if (!isFirstRow) {
+                td.style.borderTopColor = TRANSPARENT;
+            }
+            if (!isLastRow && !isFirstRow) {
+                td.style.borderBottomColor = TRANSPARENT;
+            }
+            if (!isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (!isLastColumn && !isFirstColumn) {
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            if (isFirstColumn && isFirstRow) {
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            break;
+        case 2 /* NO_HEADER_BORDERS */:
+            if (isFirstRow) {
+                td.style.borderTopColor = TRANSPARENT;
+                td.style.borderRightColor = TRANSPARENT;
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (isLastColumn) {
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            break;
+        case 3 /* NO_SIDE_BORDERS */:
+            if (isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (isLastColumn) {
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            break;
+        case 5 /* ESPECIAL_TYPE_1 */:
+            if (isFirstRow) {
+                td.style.borderRightColor = TRANSPARENT;
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (isFirstColumn) {
+                td.style.borderBottomColor = TRANSPARENT;
+                td.style.borderTopColor = TRANSPARENT;
+            }
+            if (isFirstRow && isFirstColumn) {
+                td.style.borderLeftColor = format.verticalBorderColor || TRANSPARENT;
+                td.style.borderBottomColor = format.bottomBorderColor || TRANSPARENT;
+                td.style.borderTopColor = format.topBorderColor || TRANSPARENT;
+            }
+            break;
+        case 6 /* ESPECIAL_TYPE_2 */:
+            if (isFirstRow) {
+                td.style.borderRightColor = TRANSPARENT;
+                td.style.borderLeftColor = TRANSPARENT;
+            }
+            if (isFirstColumn) {
+                td.style.borderBottomColor = TRANSPARENT;
+                td.style.borderTopColor = TRANSPARENT;
+            }
+            if (isFirstRow && isFirstColumn) {
+                td.style.borderLeftColor = format.verticalBorderColor || TRANSPARENT;
+                td.style.borderBottomColor = format.bottomBorderColor || TRANSPARENT;
+                td.style.borderTopColor = format.topBorderColor || TRANSPARENT;
+            }
+            if (!isFirstRow && !isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+                td.style.borderBottomColor = TRANSPARENT;
+                td.style.borderTopColor = TRANSPARENT;
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            break;
+        case 7 /* ESPECIAL_TYPE_3 */:
+            if (isFirstRow) {
+                td.style.borderLeftColor = TRANSPARENT;
+                td.style.borderTopColor = TRANSPARENT;
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            if (isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+                td.style.borderTopColor = TRANSPARENT;
+                td.style.borderBottomColor = TRANSPARENT;
+            }
+            if (!isFirstRow && !isFirstColumn) {
+                td.style.borderLeftColor = TRANSPARENT;
+                td.style.borderBottomColor = TRANSPARENT;
+                td.style.borderTopColor = TRANSPARENT;
+                td.style.borderRightColor = TRANSPARENT;
+            }
+            if (isFirstRow && isFirstColumn) {
+                td.style.borderBottomColor = format.bottomBorderColor || TRANSPARENT;
+            }
+            break;
+    }
+}
+/**
+ * Organize the borders of table according to a border type
+ * @param format
+ * @returns
+ */
+function setBordersType(cells, format) {
+    cells.forEach(function (row, rowIndex) {
+        row.forEach(function (cell, cellIndex) {
+            if (cell.td) {
+                formatBorders(format, cell.td, rowIndex === 0, rowIndex === cells.length - 1, cellIndex === 0, cellIndex === row.length - 1);
+            }
+        });
+    });
+}
+/**
+ * Apply custom design to the first table column
+ * @param format
+ * @returns
+ */
+function setFirstColumnFormat(cells, format) {
+    if (!format.hasFirstColumn) {
+        cells.forEach(function (row) {
+            row.forEach(function (cell, cellIndex) {
+                if (cell.td && cellIndex === 0) {
+                    cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_CELL_TAG_NAME);
+                    cell.td.scope = '';
+                }
+            });
+        });
+        return;
+    }
+    cells.forEach(function (row, rowIndex) {
+        row.forEach(function (cell, cellIndex) {
+            if (cell.td && cellIndex === 0) {
+                if (rowIndex !== 0) {
+                    cell.td.style.borderTopColor = TRANSPARENT;
+                    cell.td.style.backgroundColor = TRANSPARENT;
+                }
+                if (rowIndex !== cells.length - 1 && rowIndex !== 0) {
+                    cell.td.style.borderBottomColor = TRANSPARENT;
+                }
+                cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_HEADER_TAG_NAME);
+                cell.td.scope = 'col';
+            }
+        });
+    });
+}
+/**
+ * Apply custom design to the Header Row
+ * @param format
+ * @returns
+ */
+function setHeaderRowFormat(cells, format) {
+    var _a, _b;
+    if (!format.hasHeaderRow) {
+        (_a = cells[0]) === null || _a === void 0 ? void 0 : _a.forEach(function (cell) {
+            if (cell.td) {
+                cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_CELL_TAG_NAME);
+                cell.td.scope = '';
+            }
+        });
+        return;
+    }
+    (_b = cells[0]) === null || _b === void 0 ? void 0 : _b.forEach(function (cell) {
+        if (cell.td && format.headerRowColor) {
+            cell.td.style.backgroundColor = format.headerRowColor;
+            cell.td.style.borderRightColor = format.headerRowColor;
+            cell.td.style.borderLeftColor = format.headerRowColor;
+            cell.td.style.borderTopColor = format.headerRowColor;
+            cell.td = (0, changeElementTag_1.default)(cell.td, TABLE_HEADER_TAG_NAME);
+            cell.td.scope = 'row';
+        }
+    });
+}
+function getBorderStyle(style) {
+    var color = style ? style : 'transparent';
+    return 'solid 1px ' + color;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts":
@@ -14596,13 +15013,18 @@ function changeElementTag(element, newTag) {
     if (!element || !newTag) {
         return null;
     }
+    var origianlTag = (0, getTagOfNode_1.default)(element);
+    if (origianlTag == newTag.toUpperCase()) {
+        // Already in the target tag, no need to change
+        return element;
+    }
     var newElement = element.ownerDocument.createElement(newTag);
     for (var i = 0; i < element.attributes.length; i++) {
         var attr = element.attributes[i];
         newElement.setAttribute(attr.name, attr.value);
     }
     (0, moveChildNodes_1.default)(newElement, element);
-    if ((0, getTagOfNode_1.default)(element) == 'P' || (0, getTagOfNode_1.default)(newElement) == 'P') {
+    if (origianlTag == 'P' || (0, getTagOfNode_1.default)(newElement) == 'P') {
         _a = (0, getComputedStyles_1.default)(element, [
             'margin-top',
             'margin-bottom',
@@ -15883,156 +16305,48 @@ function splitBalancedNodeRange(nodes) {
     var end = Array.isArray(nodes) ? nodes[nodes.length - 1] : nodes;
     var parentNode = start && end && start.parentNode == end.parentNode ? start.parentNode : null;
     if (parentNode) {
-        if ((0, isNodeAfter_1.default)(start, end)) {
-            var temp = end;
-            end = start;
-            start = temp;
-        }
-        splitParentNode(start, true /*splitBefore*/);
-        splitParentNode(end, false /*splitBefore*/);
-    }
-    return parentNode;
-}
-exports.splitBalancedNodeRange = splitBalancedNodeRange;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/splitTextNode.ts":
-/*!******************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/splitTextNode.ts ***!
-  \******************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Split a text node into two parts by an offset number, and return one of them
- * @param textNode The text node to split
- * @param offset The offset number to split at
- * @param returnFirstPart True to return the first part, then the passed in textNode will become the second part.
- * Otherwise return the second part, and the passed in textNode will become the first part
- */
-function splitTextNode(textNode, offset, returnFirstPart) {
-    var _a, _b, _c;
-    var firstPart = ((_a = textNode.nodeValue) === null || _a === void 0 ? void 0 : _a.substring(0, offset)) || '';
-    var secondPart = ((_b = textNode.nodeValue) === null || _b === void 0 ? void 0 : _b.substring(offset)) || '';
-    var newNode = textNode.ownerDocument.createTextNode(returnFirstPart ? firstPart : secondPart);
-    textNode.nodeValue = returnFirstPart ? secondPart : firstPart;
-    (_c = textNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(newNode, returnFirstPart ? textNode : textNode.nextSibling);
-    return newNode;
-}
-exports.default = splitTextNode;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/tableFormatInfo.ts":
-/*!********************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/tableFormatInfo.ts ***!
-  \********************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveTableInfo = exports.getTableFormatInfo = void 0;
-var TABLE_STYLE_INFO = 'roosterTableInfo';
-var DEFAULT_FORMAT = {
-    topBorderColor: '#ABABAB',
-    bottomBorderColor: '#ABABAB',
-    verticalBorderColor: '#ABABAB',
-    hasHeaderRow: false,
-    hasFirstColumn: false,
-    hasBandedRows: false,
-    hasBandedColumns: false,
-    bgColorEven: null,
-    bgColorOdd: '#ABABAB20',
-    headerRowColor: '#ABABAB',
-    tableBorderFormat: 0 /* DEFAULT */,
-};
-/**
- * @internal
- * Get the format info of a table
- * If the table does not have a info saved, it will be retrieved from the css styles
- * @param table The table that has the info
- */
-function getTableFormatInfo(table) {
-    var obj = safeParseJSON(table === null || table === void 0 ? void 0 : table.dataset[TABLE_STYLE_INFO]);
-    return checkIfTableFormatIsValid(obj) ? obj : DEFAULT_FORMAT;
-}
-exports.getTableFormatInfo = getTableFormatInfo;
-function checkIfTableFormatIsValid(format) {
-    if (!format) {
-        return false;
-    }
-    var topBorderColor = format.topBorderColor, verticalBorderColor = format.verticalBorderColor, bottomBorderColor = format.bottomBorderColor, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven, hasBandedColumns = format.hasBandedColumns, hasBandedRows = format.hasBandedRows, hasFirstColumn = format.hasFirstColumn, hasHeaderRow = format.hasHeaderRow, tableBorderFormat = format.tableBorderFormat;
-    var colorsValues = [
-        topBorderColor,
-        verticalBorderColor,
-        bottomBorderColor,
-        bgColorOdd,
-        bgColorEven,
-    ];
-    var stateValues = [hasBandedColumns, hasBandedRows, hasFirstColumn, hasHeaderRow];
-    if (colorsValues.some(function (key) { return !isAValidColor(key); }) ||
-        stateValues.some(function (key) { return !isBoolean(key); }) ||
-        !isAValidTableBorderType(tableBorderFormat)) {
-        return false;
-    }
-    return true;
-}
-function isAValidColor(color) {
-    if (color === null || color === undefined || typeof color === 'string') {
-        return true;
-    }
-    return false;
-}
-function isBoolean(a) {
-    if (typeof a === 'boolean') {
-        return true;
-    }
-    return false;
-}
-function isAValidTableBorderType(border) {
-    if (-1 < border && border < 8) {
-        return true;
-    }
-    return false;
-}
-function safeParseJSON(json) {
-    if (!json) {
-        return null;
-    }
-    try {
-        return JSON.parse(json);
-    }
-    catch (_a) {
-        return null;
-    }
-}
-/**
- * @internal
- * Save the format info of a table
- * @param table The table the info will be saved
- * @param format The format of the table
- */
-function saveTableInfo(table, format) {
-    if (checkIfItIsDefault(format)) {
-        return;
-    }
-    if (table && format) {
-        table.dataset[TABLE_STYLE_INFO] = JSON.stringify(format);
+        if ((0, isNodeAfter_1.default)(start, end)) {
+            var temp = end;
+            end = start;
+            start = temp;
+        }
+        splitParentNode(start, true /*splitBefore*/);
+        splitParentNode(end, false /*splitBefore*/);
     }
+    return parentNode;
 }
-exports.saveTableInfo = saveTableInfo;
-function checkIfItIsDefault(format) {
-    var formatKeys = Object.keys(DEFAULT_FORMAT);
-    return formatKeys.every(function (key) { return format[key] === DEFAULT_FORMAT[key]; });
+exports.splitBalancedNodeRange = splitBalancedNodeRange;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/splitTextNode.ts":
+/*!******************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/splitTextNode.ts ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Split a text node into two parts by an offset number, and return one of them
+ * @param textNode The text node to split
+ * @param offset The offset number to split at
+ * @param returnFirstPart True to return the first part, then the passed in textNode will become the second part.
+ * Otherwise return the second part, and the passed in textNode will become the first part
+ */
+function splitTextNode(textNode, offset, returnFirstPart) {
+    var _a, _b, _c;
+    var firstPart = ((_a = textNode.nodeValue) === null || _a === void 0 ? void 0 : _a.substring(0, offset)) || '';
+    var secondPart = ((_b = textNode.nodeValue) === null || _b === void 0 ? void 0 : _b.substring(offset)) || '';
+    var newNode = textNode.ownerDocument.createTextNode(returnFirstPart ? firstPart : secondPart);
+    textNode.nodeValue = returnFirstPart ? secondPart : firstPart;
+    (_c = textNode.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(newNode, returnFirstPart ? textNode : textNode.nextSibling);
+    return newNode;
 }
+exports.default = splitTextNode;
 
 
 /***/ }),
@@ -16493,13 +16807,13 @@ var DragAndDropHelper = /** @class */ (function () {
      * @param onSubmit A callback that will be invoked when event handler in handler object returns true
      * @param handler The event handler object, see DragAndDropHandler interface for more information
      */
-    function DragAndDropHelper(trigger, context, onSubmit, handler, sizeTransformer) {
+    function DragAndDropHelper(trigger, context, onSubmit, handler, zoomScale) {
         var _this = this;
         this.trigger = trigger;
         this.context = context;
         this.onSubmit = onSubmit;
         this.handler = handler;
-        this.sizeTransformer = sizeTransformer;
+        this.zoomScale = zoomScale;
         this.onMouseDown = function (e) {
             var _a, _b;
             e.preventDefault();
@@ -16512,9 +16826,8 @@ var DragAndDropHelper = /** @class */ (function () {
         this.onMouseMove = function (e) {
             var _a, _b, _c;
             e.preventDefault();
-            var sizeTransformer = _this.sizeTransformer;
-            var deltaX = sizeTransformer(e.pageX - _this.initX);
-            var deltaY = sizeTransformer(e.pageY - _this.initY);
+            var deltaX = (e.pageX - _this.initX) / _this.zoomScale;
+            var deltaY = (e.pageY - _this.initY) / _this.zoomScale;
             if ((_b = (_a = _this.handler).onDragging) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue, deltaX, deltaY)) {
                 (_c = _this.onSubmit) === null || _c === void 0 ? void 0 : _c.call(_this, _this.context, _this.trigger);
             }
@@ -16528,7 +16841,6 @@ var DragAndDropHelper = /** @class */ (function () {
             }
         };
         trigger.addEventListener('mousedown', this.onMouseDown);
-        this.sizeTransformer = sizeTransformer;
     }
     /**
      * Dispose this object, remove all event listeners that has been attached
@@ -18693,7 +19005,7 @@ var ImageEdit = /** @class */ (function () {
         var wrapper = this.getImageWrapper(this.image);
         return wrapper
             ? getEditElements(wrapper, elementClass).map(function (element) {
-                return new DragAndDropHelper_1.default(element, __assign(__assign({}, commonContext), { x: element.dataset.x, y: element.dataset.y }), _this.updateWrapper, dragAndDrop, _this.editor.getSizeTransformer());
+                return new DragAndDropHelper_1.default(element, __assign(__assign({}, commonContext), { x: element.dataset.x, y: element.dataset.y }), _this.updateWrapper, dragAndDrop, _this.editor.getZoomScale());
             })
             : [];
     };
@@ -21709,16 +22021,12 @@ Object.defineProperty(exports, "PickerPlugin", { enumerable: true, get: function
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var deSelectAll_1 = __webpack_require__(/*! ./utils/deSelectAll */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deSelectAll.ts");
+var normalizeTableSelection_1 = __webpack_require__(/*! ./utils/normalizeTableSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/normalizeTableSelection.ts");
 var forEachSelectedCell_1 = __webpack_require__(/*! ./utils/forEachSelectedCell */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachSelectedCell.ts");
 var getCellCoordinates_1 = __webpack_require__(/*! ./utils/getCellCoordinates */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/getCellCoordinates.ts");
-var highlight_1 = __webpack_require__(/*! ./utils/highlight */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlight.ts");
-var highlightAll_1 = __webpack_require__(/*! ./utils/highlightAll */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightAll.ts");
 var removeCellsOutsideSelection_1 = __webpack_require__(/*! ./utils/removeCellsOutsideSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/removeCellsOutsideSelection.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var TABLE_CELL_SELECTOR = 'td,th';
-var TABLE_SELECTED = "_tableSelected" /* TABLE_SELECTED */;
-var TABLE_CELL_SELECTED = "_tableCellSelected" /* TABLE_CELL_SELECTED */;
 var LEFT_CLICK = 1;
 var RIGHT_CLICK = 3;
 /**
@@ -21830,6 +22138,7 @@ var TableCellSelection = /** @class */ (function () {
      * Dispose this plugin
      */
     TableCellSelection.prototype.dispose = function () {
+        this.editor.select(null);
         this.removeMouseUpEventListener();
         this.editor = null;
     };
@@ -21840,8 +22149,22 @@ var TableCellSelection = /** @class */ (function () {
     TableCellSelection.prototype.onPluginEvent = function (event) {
         if (this.editor) {
             switch (event.eventType) {
-                case 8 /* ExtractContentWithDom */:
-                    clearSelectedTables(event.clonedRoot);
+                case 17 /* EnteredShadowEdit */:
+                    var selection = this.editor.getSelectionRangeEx();
+                    if (selection.type == 1 /* TableSelection */) {
+                        this.tableRange = selection.coordinates;
+                        this.firstTable = selection.table;
+                        this.editor.select(selection.table, null);
+                    }
+                    break;
+                case 18 /* LeavingShadowEdit */:
+                    if (this.firstTable && this.tableRange) {
+                        var table = this.editor.queryElements('#' + this.firstTable.id);
+                        if (table.length == 1) {
+                            this.firstTable = table[0];
+                            this.editor.select(this.firstTable, this.tableRange);
+                        }
+                    }
                     break;
                 case 9 /* BeforeCutCopy */:
                     this.handleBeforeCutCopy(event);
@@ -21885,12 +22208,12 @@ var TableCellSelection = /** @class */ (function () {
         if (this.firstTable == this.targetTable) {
             if (this.tableSelection) {
                 this.vTable.selection.lastCell = (0, getCellCoordinates_1.getCellCoordinates)(this.vTable, this.lastTarget);
-                (0, highlight_1.highlight)(this.vTable);
+                this.selectTable();
                 this.tableRange.lastCell = this.vTable.selection.lastCell;
                 updateSelection(this.editor, this.firstTarget, 0);
             }
         }
-        else if (this.tableRange) {
+        else if (this.tableSelection) {
             this.restoreSelection();
         }
     };
@@ -21901,21 +22224,23 @@ var TableCellSelection = /** @class */ (function () {
      */
     TableCellSelection.prototype.handleBeforeCutCopy = function (event) {
         var _this = this;
-        var clonedTable = event.clonedRoot.querySelector('table.' + TABLE_SELECTED);
-        if (clonedTable) {
-            var clonedVTable = new roosterjs_editor_dom_1.VTable(clonedTable);
-            clonedVTable.selection = this.tableRange;
-            (0, removeCellsOutsideSelection_1.removeCellsOutsideSelection)(clonedVTable);
-            clonedVTable.writeBack();
-            event.range.selectNode(clonedTable);
-            if (event.isCut) {
-                (0, forEachSelectedCell_1.forEachSelectedCell)(this.vTable, function (cell) {
-                    if (cell === null || cell === void 0 ? void 0 : cell.td) {
-                        deleteNodeContents(cell.td, _this.editor);
-                    }
-                });
+        var selection = this.editor.getSelectionRangeEx();
+        if (selection.type == 1 /* TableSelection */) {
+            var clonedTable = event.clonedRoot.querySelector('table#' + selection.table.id);
+            if (clonedTable) {
+                var clonedVTable = new roosterjs_editor_dom_1.VTable(clonedTable);
+                clonedVTable.selection = this.tableRange;
+                (0, removeCellsOutsideSelection_1.removeCellsOutsideSelection)(clonedVTable);
+                clonedVTable.writeBack();
+                event.range.selectNode(clonedTable);
+                if (event.isCut) {
+                    (0, forEachSelectedCell_1.forEachSelectedCell)(this.vTable, function (cell) {
+                        if (cell === null || cell === void 0 ? void 0 : cell.td) {
+                            deleteNodeContents(cell.td, _this.editor);
+                        }
+                    });
+                }
             }
-            clearSelectedTables(event.clonedRoot);
         }
     };
     //#region Key events
@@ -21950,7 +22275,9 @@ var TableCellSelection = /** @class */ (function () {
                     _this.handleKeySelectionInsideTable(event);
                 }
                 else if (_this.tableSelection) {
-                    clearSelectedTableCells(_this.editor);
+                    if (_this.firstTable) {
+                        _this.editor.select(_this.firstTable, null);
+                    }
                     _this.tableSelection = false;
                 }
             });
@@ -21990,7 +22317,7 @@ var TableCellSelection = /** @class */ (function () {
             }
         }
         this.vTable.selection = this.tableRange;
-        (0, highlight_1.highlight)(this.vTable);
+        this.selectTable();
         var isBeginAboveEnd = this.isAfter(this.firstTarget, this.lastTarget);
         var targetPosition = new roosterjs_editor_dom_1.Position(this.lastTarget, isBeginAboveEnd ? 0 /* Begin */ : -1 /* End */);
         updateSelection(this.editor, targetPosition.node, targetPosition.offset);
@@ -22005,17 +22332,22 @@ var TableCellSelection = /** @class */ (function () {
         if (which == RIGHT_CLICK && this.tableSelection) {
             //If the user is right clicking To open context menu
             var td = this.editor.getElementAtCursor(TABLE_CELL_SELECTOR);
-            if (td === null || td === void 0 ? void 0 : td.classList.contains(TABLE_CELL_SELECTED)) {
-                this.firstTarget = null;
-                this.lastTarget = null;
-                this.editor.queryElements('td.' + TABLE_CELL_SELECTED, function (node) {
-                    _this.firstTarget = _this.firstTarget || node;
-                    _this.lastTarget = node;
-                });
-                var selection = this.editor.getDocument().defaultView.getSelection();
-                selection.setBaseAndExtent(this.firstTarget, 0, this.lastTarget, 0);
-                (0, highlight_1.highlight)(this.vTable);
-                return;
+            var coord = (0, getCellCoordinates_1.getCellCoordinates)(this.vTable, td);
+            if (coord) {
+                var _b = (0, normalizeTableSelection_1.default)(this.vTable), firstCell = _b.firstCell, lastCell = _b.lastCell;
+                if (coord.y >= firstCell.y &&
+                    coord.y <= lastCell.y &&
+                    coord.x >= firstCell.x &&
+                    coord.x <= lastCell.x) {
+                    this.firstTarget = this.vTable.getCell(firstCell.y, firstCell.x).td;
+                    this.lastTarget = this.vTable.getCell(lastCell.y, lastCell.x).td;
+                    if (this.firstTarget && this.lastTarget) {
+                        var selection = this.editor.getDocument().defaultView.getSelection();
+                        selection.setBaseAndExtent(this.firstTarget, 0, this.lastTarget, 0);
+                        this.selectTable();
+                    }
+                    return;
+                }
             }
         }
         this.editor.getDocument().addEventListener('mouseup', this.onMouseUp, true /*setCapture*/);
@@ -22045,7 +22377,7 @@ var TableCellSelection = /** @class */ (function () {
                     };
                     _this.firstTarget = first;
                     _this.lastTarget = last;
-                    (0, highlight_1.highlight)(_this.vTable);
+                    _this.selectTable();
                     _this.tableRange = _this.vTable.selection;
                     _this.tableSelection = true;
                     _this.firstTable = firstTable;
@@ -22056,7 +22388,9 @@ var TableCellSelection = /** @class */ (function () {
         }
     };
     TableCellSelection.prototype.restoreSelection = function () {
-        clearSelectedTableCells(this.editor);
+        if (this.firstTable) {
+            this.editor.select(this.firstTable, null);
+        }
         this.tableSelection = false;
         var isBeginAboveEnd = this.isAfter(this.firstTarget, this.lastTarget);
         var targetPosition = new roosterjs_editor_dom_1.Position(this.lastTarget, isBeginAboveEnd ? -1 /* End */ : 0 /* Begin */);
@@ -22074,7 +22408,7 @@ var TableCellSelection = /** @class */ (function () {
      * @param event mouse event
      */
     TableCellSelection.prototype.selectionInsideTableMouseMove = function (event) {
-        var _a, _b;
+        var _a;
         if (this.lastTarget != this.firstTarget) {
             updateSelection(this.editor, this.firstTarget, 0);
             if (this.firstTable != this.targetTable &&
@@ -22082,21 +22416,14 @@ var TableCellSelection = /** @class */ (function () {
                 //If selection started in a table that is inside of another table and moves to parent table
                 //Make the firstTarget the TD of the parent table.
                 this.firstTarget = this.editor.getElementAtCursor(TABLE_CELL_SELECTOR, this.lastTarget);
-                this.firstTarget.querySelectorAll('table').forEach(function (table) {
-                    var vTable = new roosterjs_editor_dom_1.VTable(table);
-                    (0, highlightAll_1.highlightAll)(vTable);
-                });
             }
             if (this.firstTable) {
                 this.tableSelection = true;
-                if (((_b = this.vTable) === null || _b === void 0 ? void 0 : _b.table) != this.firstTable &&
-                    (0, roosterjs_editor_dom_1.safeInstanceOf)(this.firstTarget, 'HTMLTableCellElement')) {
-                    this.vTable = new roosterjs_editor_dom_1.VTable(this.firstTarget);
-                }
+                this.vTable = this.vTable || new roosterjs_editor_dom_1.VTable(this.firstTable);
                 this.tableRange.firstCell = (0, getCellCoordinates_1.getCellCoordinates)(this.vTable, this.firstTarget);
                 this.tableRange.lastCell = (0, getCellCoordinates_1.getCellCoordinates)(this.vTable, this.lastTarget);
                 this.vTable.selection = this.tableRange;
-                (0, highlight_1.highlight)(this.vTable);
+                this.selectTable();
             }
             event.preventDefault();
         }
@@ -22105,8 +22432,7 @@ var TableCellSelection = /** @class */ (function () {
             this.tableRange.firstCell = (0, getCellCoordinates_1.getCellCoordinates)(this.vTable, this.firstTarget);
             this.tableRange.lastCell = this.tableRange.firstCell;
             this.vTable.selection = this.tableRange;
-            (0, highlight_1.highlight)(this.vTable);
-            this.tableRange = this.vTable.selection;
+            this.selectTable();
         }
     };
     TableCellSelection.prototype.removeMouseUpEventListener = function () {
@@ -22118,14 +22444,8 @@ var TableCellSelection = /** @class */ (function () {
     };
     //#endregion
     //#region utils
-    TableCellSelection.prototype.clearTableCellSelection = function () {
-        var _a;
-        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.hasFocus()) {
-            clearSelectedTableCells(this.editor);
-        }
-    };
     TableCellSelection.prototype.clearState = function () {
-        this.clearTableCellSelection();
+        this.editor.select(null);
         this.vTable = null;
         this.firstTarget = null;
         this.lastTarget = null;
@@ -22247,6 +22567,12 @@ var TableCellSelection = /** @class */ (function () {
         });
         return result;
     };
+    TableCellSelection.prototype.selectTable = function () {
+        var _a;
+        if (this.editor && this.vTable) {
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(this.vTable.table, (0, normalizeTableSelection_1.default)(this.vTable));
+        }
+    };
     return TableCellSelection;
 }());
 exports.default = TableCellSelection;
@@ -22274,18 +22600,6 @@ function getTableAtCursor(editor, node) {
     }
     return null;
 }
-function clearSelectedTableCells(input) {
-    input.queryElements('table.' + TABLE_SELECTED, deselectTable);
-}
-function clearSelectedTables(element) {
-    element.querySelectorAll('table.' + TABLE_SELECTED).forEach(deselectTable);
-}
-function deselectTable(element) {
-    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLTableElement')) {
-        var vTable = new roosterjs_editor_dom_1.VTable(element);
-        (0, deSelectAll_1.deSelectAll)(vTable);
-    }
-}
 
 
 /***/ }),
@@ -22305,105 +22619,6 @@ var TableCellSelection_1 = __webpack_require__(/*! ./TableCellSelection */ "./pa
 Object.defineProperty(exports, "TableCellSelection", { enumerable: true, get: function () { return TableCellSelection_1.default; } });
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deSelectAll.ts":
-/*!***********************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deSelectAll.ts ***!
-  \***********************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deSelectAll = void 0;
-var deselectCellHandler_1 = __webpack_require__(/*! ./deselectCellHandler */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deselectCellHandler.ts");
-var forEachCell_1 = __webpack_require__(/*! ./forEachCell */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachCell.ts");
-/**
- * @internal
- * Removes the selection of all the tables
- */
-function deSelectAll(vTable) {
-    var _a;
-    (0, forEachCell_1.forEachCell)(vTable, function (cell) {
-        if (cell.td) {
-            (0, deselectCellHandler_1.deselectCellHandler)(cell.td);
-        }
-    });
-    if ((_a = vTable.table) === null || _a === void 0 ? void 0 : _a.classList.contains("_tableSelected" /* TABLE_SELECTED */)) {
-        vTable.table.classList.remove("_tableSelected" /* TABLE_SELECTED */);
-    }
-}
-exports.deSelectAll = deSelectAll;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deselectCellHandler.ts":
-/*!*******************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deselectCellHandler.ts ***!
-  \*******************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deselectCellHandler = void 0;
-var forEachCell_1 = __webpack_require__(/*! ./forEachCell */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachCell.ts");
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-/**
- * @internal
- * Handler to remove the selected style
- * @param cell element to apply the style
- */
-function deselectCellHandler(cell) {
-    var _a;
-    if (cell &&
-        (0, roosterjs_editor_dom_1.safeInstanceOf)(cell, 'HTMLTableCellElement') &&
-        cell.classList.contains("_tableCellSelected" /* TABLE_CELL_SELECTED */)) {
-        cell.classList.remove("_tableCellSelected" /* TABLE_CELL_SELECTED */);
-        cell.style.backgroundColor =
-            (_a = cell.dataset["originalBackgroundColor" /* TEMP_BACKGROUND_COLOR */]) !== null && _a !== void 0 ? _a : '';
-        delete cell.dataset["originalBackgroundColor" /* TEMP_BACKGROUND_COLOR */];
-        cell.querySelectorAll('table').forEach(function (table) {
-            var vTable2 = new roosterjs_editor_dom_1.VTable(table);
-            (0, forEachCell_1.forEachCell)(vTable2, function (cell) { return deselectCellHandler(cell.td); });
-        });
-    }
-}
-exports.deselectCellHandler = deselectCellHandler;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachCell.ts":
-/*!***********************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachCell.ts ***!
-  \***********************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.forEachCell = void 0;
-/**
- * @internal
- * Execute an action on all the cells
- * @param callback action to apply on all the cells.
- */
-function forEachCell(vTable, callback) {
-    for (var indexY = 0; indexY < vTable.cells.length; indexY++) {
-        for (var indexX = 0; indexX < vTable.cells[indexY].length; indexX++) {
-            callback(vTable.cells[indexY][indexX], indexX, indexY);
-        }
-    }
-}
-exports.forEachCell = forEachCell;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachSelectedCell.ts":
@@ -22424,21 +22639,15 @@ exports.forEachSelectedCell = void 0;
  * @returns the amount of cells modified
  */
 function forEachSelectedCell(vTable, callback) {
-    var selectedCells = 0;
-    var _a = vTable.selection, lastCell = _a.lastCell, firstCell = _a.firstCell;
-    for (var y = 0; y < vTable.cells.length; y++) {
-        for (var x = 0; x < vTable.cells[y].length; x++) {
-            var element = vTable.cells[y][x].td;
-            if ((element === null || element === void 0 ? void 0 : element.classList.contains("_tableCellSelected" /* TABLE_CELL_SELECTED */)) ||
-                (((y >= firstCell.y && y <= lastCell.y) || (y <= firstCell.y && y >= lastCell.y)) &&
-                    ((x >= firstCell.x && x <= lastCell.x) ||
-                        (x <= firstCell.x && x >= lastCell.x)))) {
-                selectedCells += 1;
+    var _a;
+    var _b = vTable.selection, lastCell = _b.lastCell, firstCell = _b.firstCell;
+    for (var y = firstCell.y; y <= lastCell.y; y++) {
+        for (var x = firstCell.x; x <= lastCell.x; x++) {
+            if ((_a = vTable.cells[y][x]) === null || _a === void 0 ? void 0 : _a.td) {
                 callback(vTable.cells[y][x]);
             }
         }
     }
-    return selectedCells;
 }
 exports.forEachSelectedCell = forEachSelectedCell;
 
@@ -22464,7 +22673,7 @@ exports.getCellCoordinates = void 0;
  */
 function getCellCoordinates(vTable, cellInput) {
     var result;
-    if (vTable.cells) {
+    if (vTable === null || vTable === void 0 ? void 0 : vTable.cells) {
         for (var indexY = 0; indexY < vTable.cells.length; indexY++) {
             for (var indexX = 0; indexX < vTable.cells[indexY].length; indexX++) {
                 if (cellInput == vTable.cells[indexY][indexX].td) {
@@ -22481,166 +22690,6 @@ function getCellCoordinates(vTable, cellInput) {
 exports.getCellCoordinates = getCellCoordinates;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlight.ts":
-/*!*********************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlight.ts ***!
-  \*********************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.highlight = void 0;
-var deselectCellHandler_1 = __webpack_require__(/*! ./deselectCellHandler */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/deselectCellHandler.ts");
-var highlightCellHandler_1 = __webpack_require__(/*! ./highlightCellHandler */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightCellHandler.ts");
-var normalizeTableSelection_1 = __webpack_require__(/*! ./normalizeTableSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/normalizeTableSelection.ts");
-/**
- * @internal
- * Highlights a range of cells, used in the TableSelection Plugin
- */
-function highlight(vTable) {
-    if (vTable.selection && vTable.cells && vTable) {
-        if (!vTable.table.classList.contains("_tableSelected" /* TABLE_SELECTED */)) {
-            vTable.table.classList.add("_tableSelected" /* TABLE_SELECTED */);
-        }
-        var _a = (0, normalizeTableSelection_1.normalizeTableSelection)(vTable.selection), firstCell = _a.firstCell, lastCell = _a.lastCell;
-        var colIndex = vTable.cells[vTable.cells.length - 1].length - 1;
-        var selectedAllTable = firstCell.x == 0 &&
-            firstCell.y == 0 &&
-            lastCell.x == colIndex &&
-            lastCell.y == vTable.cells.length - 1;
-        for (var indexY = 0; indexY < vTable.cells.length; indexY++) {
-            for (var indexX = 0; indexX < vTable.cells[indexY].length; indexX++) {
-                var element = getMergedCell(vTable, indexX, indexY);
-                if (element) {
-                    if (selectedAllTable ||
-                        (((indexY >= firstCell.y && indexY <= lastCell.y) ||
-                            (indexY <= firstCell.y && indexY >= lastCell.y)) &&
-                            ((indexX >= firstCell.x && indexX <= lastCell.x) ||
-                                (indexX <= firstCell.x && indexX >= lastCell.x)))) {
-                        (0, highlightCellHandler_1.highlightCellHandler)(element);
-                    }
-                    else {
-                        (0, deselectCellHandler_1.deselectCellHandler)(element);
-                    }
-                }
-            }
-        }
-    }
-}
-exports.highlight = highlight;
-function getMergedCell(vTable, x, y) {
-    var element = vTable.cells[y][x].td;
-    if (vTable.cells[y][x].spanLeft) {
-        for (var cellX = x; cellX > 0; cellX--) {
-            var cell = vTable.cells[y][cellX];
-            if (cell.spanAbove) {
-                element = null;
-                break;
-            }
-            if (cell.td) {
-                element = cell.td;
-                x = cellX;
-                break;
-            }
-        }
-    }
-    return element;
-}
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightAll.ts":
-/*!************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightAll.ts ***!
-  \************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.highlightAll = void 0;
-var forEachCell_1 = __webpack_require__(/*! ./forEachCell */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachCell.ts");
-var highlightCellHandler_1 = __webpack_require__(/*! ./highlightCellHandler */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightCellHandler.ts");
-/**
- * @internal
- * Highlights all the cells in the table.
- */
-function highlightAll(vTable) {
-    var firstCol = null;
-    var firstRow = null;
-    var lastCol;
-    var lastRow;
-    if (!vTable.table.classList.contains("_tableSelected" /* TABLE_SELECTED */)) {
-        vTable.table.classList.add("_tableSelected" /* TABLE_SELECTED */);
-    }
-    (0, forEachCell_1.forEachCell)(vTable, function (cell, x, y) {
-        if (cell.td) {
-            (0, highlightCellHandler_1.highlightCellHandler)(cell.td);
-            firstCol = firstCol !== null && firstCol !== void 0 ? firstCol : x;
-            firstRow = firstRow !== null && firstRow !== void 0 ? firstRow : y;
-            lastCol = x;
-            lastRow = y;
-        }
-    });
-    vTable.selection = {
-        firstCell: {
-            x: firstCol,
-            y: firstRow,
-        },
-        lastCell: {
-            x: lastCol,
-            y: lastRow,
-        },
-    };
-}
-exports.highlightAll = highlightAll;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightCellHandler.ts":
-/*!********************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/highlightCellHandler.ts ***!
-  \********************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.highlightCellHandler = void 0;
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-/**
- * @internal
- * Handler to apply te selected styles on the cell
- * @param element element to apply the style
- */
-function highlightCellHandler(element) {
-    var _a, _b;
-    if (!element.classList.contains("_tableCellSelected" /* TABLE_CELL_SELECTED */) &&
-        element.style.backgroundColor != "rgba(198,198,198,0.7)" /* HIGHLIGHT_COLOR */ &&
-        (!element.dataset["originalBackgroundColor" /* TEMP_BACKGROUND_COLOR */] ||
-            element.dataset["originalBackgroundColor" /* TEMP_BACKGROUND_COLOR */] == '')) {
-        element.dataset["originalBackgroundColor" /* TEMP_BACKGROUND_COLOR */] =
-            (_b = (_a = element.style.backgroundColor) !== null && _a !== void 0 ? _a : element.style.background) !== null && _b !== void 0 ? _b : '';
-    }
-    element.style.backgroundColor = "rgba(198,198,198,0.7)" /* HIGHLIGHT_COLOR */;
-    element.classList.add("_tableCellSelected" /* TABLE_CELL_SELECTED */);
-    element.querySelectorAll('td, th').forEach(function (cell) {
-        if ((0, roosterjs_editor_dom_1.safeInstanceOf)(cell, 'HTMLTableCellElement')) {
-            highlightCellHandler(cell);
-        }
-    });
-}
-exports.highlightCellHandler = highlightCellHandler;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/normalizeTableSelection.ts":
@@ -22653,7 +22702,6 @@ exports.highlightCellHandler = highlightCellHandler;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeTableSelection = void 0;
 /**
  * @internal
  * Make the first Cell of a table selection always be on top of the last cell.
@@ -22661,25 +22709,40 @@ exports.normalizeTableSelection = void 0;
  * @returns Table Selection where the first cell is always going to be first selected in the table
  * and the last cell always going to be last selected in the table.
  */
-function normalizeTableSelection(input) {
-    var firstCell = input.firstCell, lastCell = input.lastCell;
+function normalizeTableSelection(vTable) {
+    if (!vTable || !vTable.selection) {
+        return null;
+    }
+    var _a = vTable.selection, firstCell = _a.firstCell, lastCell = _a.lastCell;
+    var rows = vTable.table.rows;
     var newFirst = {
-        x: min(firstCell.x, lastCell.x),
-        y: min(firstCell.y, lastCell.y),
+        x: Math.min(firstCell.x, lastCell.x),
+        y: Math.min(firstCell.y, lastCell.y),
     };
     var newLast = {
-        x: max(firstCell.x, lastCell.x),
-        y: max(firstCell.y, lastCell.y),
+        x: Math.max(firstCell.x, lastCell.x),
+        y: Math.max(firstCell.y, lastCell.y),
+    };
+    var fixCoordinates = function (coord) {
+        if (coord.x < 0) {
+            coord.x = 0;
+        }
+        if (coord.y < 0) {
+            coord.y = 0;
+        }
+        if (coord.y >= rows.length) {
+            coord.y = rows.length - 1;
+        }
+        var rowsCells = rows.item(coord.y).cells.length;
+        if (coord.x >= rowsCells) {
+            coord.x = rowsCells - 1;
+        }
     };
+    fixCoordinates(firstCell);
+    fixCoordinates(lastCell);
     return { firstCell: newFirst, lastCell: newLast };
 }
-exports.normalizeTableSelection = normalizeTableSelection;
-function min(input1, input2) {
-    return input1 > input2 ? input2 : input1;
-}
-function max(input1, input2) {
-    return input1 < input2 ? input2 : input1;
-}
+exports.default = normalizeTableSelection;
 
 
 /***/ }),
@@ -22695,13 +22758,13 @@ function max(input1, input2) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeCellsOutsideSelection = void 0;
-var normalizeTableSelection_1 = __webpack_require__(/*! ./normalizeTableSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/normalizeTableSelection.ts");
 /**
  * @internal
  * Remove the cells outside of the selection.
+ * @param vTable VTable to remove selection
  */
 function removeCellsOutsideSelection(vTable) {
-    var _a = (0, normalizeTableSelection_1.normalizeTableSelection)(vTable.selection), firstCell = _a.firstCell, lastCell = _a.lastCell;
+    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 = [];
@@ -22714,10 +22777,7 @@ function removeCellsOutsideSelection(vTable) {
         return;
     }
     vTable.cells.forEach(function (row, y) {
-        row = row.filter(function (_, x) {
-            return ((y >= firstY && y <= lastY) || (y <= firstY && y >= lastY)) &&
-                ((x >= firstX && x <= lastX) || (x <= firstX && x >= lastX));
-        });
+        row = row.filter(function (_, x) { return y >= firstY && y <= lastY && x >= firstX && x <= lastX; });
         if (row.length > 0) {
             resultCells.push(row);
         }
@@ -22755,7 +22815,9 @@ var TableResize = /** @class */ (function () {
                 return;
             }
             _this.ensureTableRects();
-            var x = e.pageX, y = e.pageY;
+            var editorWindow = _this.editor.getDocument().defaultView;
+            var x = e.pageX - editorWindow.scrollX;
+            var y = e.pageY - editorWindow.scrollY;
             var currentTable = null;
             for (var i = _this.tableRectMap.length - 1; i >= 0; i--) {
                 var _b = _this.tableRectMap[i], table = _b.table, rect = _b.rect;
@@ -22806,6 +22868,7 @@ var TableResize = /** @class */ (function () {
             case 3 /* Input */:
             case 7 /* ContentChanged */:
             case 14 /* Scroll */:
+            case 21 /* ZoomChanged */:
                 this.setTableEditor(null);
                 this.invalidateTableRects();
                 break;
@@ -22861,13 +22924,13 @@ var MIN_CELL_WIDTH = 30;
 /**
  * @internal
  */
-function createCellResizer(td, sizeTransformer, isRTL, isHorizontal, onStart, onEnd) {
+function createCellResizer(td, zoomScale, isRTL, isHorizontal, onStart, onEnd) {
     var document = td.ownerDocument;
     var div = (0, roosterjs_editor_dom_1.createElement)(isHorizontal
         ? 7 /* TableHorizontalResizer */
         : 8 /* TableVerticalResizer */, document);
     document.body.appendChild(div);
-    var context = { td: td, isRTL: isRTL, sizeTransformer: sizeTransformer, onStart: onStart };
+    var context = { td: td, isRTL: isRTL, zoomScale: zoomScale, onStart: onStart };
     var setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;
     setPosition(context, div);
     var handler = {
@@ -22875,13 +22938,13 @@ function createCellResizer(td, sizeTransformer, isRTL, isHorizontal, onStart, on
         onDragging: isHorizontal ? onDraggingHorizontal : onDraggingVertical,
         onDragEnd: onEnd,
     };
-    var featureHandler = new DragAndDropHelper_1.default(div, context, setPosition, handler, sizeTransformer);
+    var featureHandler = new DragAndDropHelper_1.default(div, context, setPosition, handler, zoomScale);
     return { node: td, div: div, featureHandler: featureHandler };
 }
 exports.default = createCellResizer;
 function onDragStart(context, event) {
-    var td = context.td, isRTL = context.isRTL, sizeTransformer = context.sizeTransformer, onStart = context.onStart;
-    var vTable = new roosterjs_editor_dom_1.VTable(td, true /*normalizeSize*/, sizeTransformer);
+    var td = context.td, isRTL = context.isRTL, zoomScale = context.zoomScale, onStart = context.onStart;
+    var vTable = new roosterjs_editor_dom_1.VTable(td, true /*normalizeSize*/, zoomScale);
     var rect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
         onStart();
@@ -22899,23 +22962,22 @@ function onDragStart(context, event) {
     }
 }
 function onDraggingHorizontal(context, event, initValue, deltaX, deltaY) {
-    var td = context.td, sizeTransformer = context.sizeTransformer;
+    var td = context.td, zoomScale = context.zoomScale;
     var vTable = initValue.vTable;
     vTable.table.removeAttribute('height');
     vTable.table.style.height = null;
     vTable.forEachCellOfCurrentRow(function (cell) {
         if (cell.td) {
-            cell.td.style.height =
-                cell.td == td ? sizeTransformer(cell.height) + deltaY + "px" : null;
+            cell.td.style.height = cell.td == td ? cell.height / zoomScale + deltaY + "px" : null;
         }
     });
     vTable.writeBack();
     return true;
 }
 function onDraggingVertical(context, event, initValue, deltaX, deltaY) {
-    var isRTL = context.isRTL, sizeTransformer = context.sizeTransformer;
+    var isRTL = context.isRTL, zoomScale = context.zoomScale;
     var vTable = initValue.vTable, nextCells = initValue.nextCells, currentCells = initValue.currentCells;
-    if (!canResizeColumns(event.pageX, currentCells, nextCells, isRTL, sizeTransformer)) {
+    if (!canResizeColumns(event.pageX, currentCells, nextCells, isRTL, zoomScale)) {
         return false;
     }
     // Since we allow the user to resize the table width on adjusting the border of the last cell,
@@ -22933,7 +22995,7 @@ function onDraggingVertical(context, event, initValue, deltaX, deltaY) {
             td.style.wordBreak = 'break-word';
             td.style.whiteSpace = 'normal';
             td.style.boxSizing = 'border-box';
-            var newWidth = sizeTransformer(getHorizontalDistance(rect, event.pageX, !isRTL));
+            var newWidth = getHorizontalDistance(rect, event.pageX, !isRTL) / zoomScale;
             newWidthList.set(td, newWidth);
         }
     });
@@ -22980,12 +23042,12 @@ function setVerticalPosition(context, trigger) {
  * @returns if the move is allowed, or, if any of the cells on either side of the vertical border is smaller than
  * the minimum width, such move is not allowed
  */
-function canResizeColumns(newPos, currentCells, nextCells, isRTL, sizeTransformer) {
+function canResizeColumns(newPos, currentCells, nextCells, isRTL, zoomScale) {
     for (var i = 0; i < currentCells.length; i++) {
         var td = currentCells[i];
         var rect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
         if (rect) {
-            var width = sizeTransformer(getHorizontalDistance(rect, newPos, !isRTL));
+            var width = getHorizontalDistance(rect, newPos, !isRTL) / zoomScale;
             if (width < MIN_CELL_WIDTH) {
                 return false;
             }
@@ -22997,7 +23059,7 @@ function canResizeColumns(newPos, currentCells, nextCells, isRTL, sizeTransforme
         if (td) {
             var rect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
             if (rect) {
-                width = sizeTransformer(getHorizontalDistance(rect, newPos, isRTL));
+                width = getHorizontalDistance(rect, newPos, isRTL) / zoomScale;
             }
         }
         if (width < MIN_CELL_WIDTH) {
@@ -23023,6 +23085,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var CellResizer_1 = __webpack_require__(/*! ./CellResizer */ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/CellResizer.ts");
 var TableInserter_1 = __webpack_require__(/*! ./TableInserter */ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableInserter.ts");
 var TableResizer_1 = __webpack_require__(/*! ./TableResizer */ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableResizer.ts");
+var TableSelector_1 = __webpack_require__(/*! ./TableSelector */ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts");
 var TableEditorFeature_1 = __webpack_require__(/*! ./TableEditorFeature */ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableEditorFeature.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var INSERTER_HOVER_OFFSET = 5;
@@ -23030,26 +23093,28 @@ var INSERTER_HOVER_OFFSET = 5;
  * @internal
  *
  * A table has 5 hot areas to be resized/edited (take LTR example):
- *   [                ]
- *  +[      1         ]+--------------------+
- *  |[                ]|                    |
- * [ ]               [ ]                    |
- * [ ]               [ ]                    |
- * [2]               [3]                    |
- * [ ]               [ ]                    |
- * [ ][       4       ]|                    |
- *  +------------------+--------------------+
- *  |                  |                    |
- *  |                  |                    |
- *  |                  |                    |
- *  +------------------+--------------------+
- *                                           [5]
+ *
+ *   [6]  [                ]
+ *       +[      1         ]+--------------------+
+ *       |[                ]|                    |
+ *      [ ]               [ ]                    |
+ *      [ ]               [ ]                    |
+ *      [2]               [3]                    |
+ *      [ ]               [ ]                    |
+ *      [ ][       4       ]|                    |
+ *       +------------------+--------------------+
+ *       |                  |                    |
+ *       |                  |                    |
+ *       |                  |                    |
+ *       +------------------+--------------------+
+ *                                                [5]
  *
  * 1 - Hover area to show insert column button
  * 2 - Hover area to show insert row button
  * 3 - Hover area to show vertical resizing bar
  * 4 - Hover area to show horizontal resizing bar
  * 5 - Hover area to show whole table resize button
+ * 6 - Hover area to show whole table selector button
  *
  * When set a different current table or change current TD, we need to update these areas
  */
@@ -23073,9 +23138,33 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableResizer();
             _this.onFinishEditing();
         };
-        var sizeTransformer = editor.getSizeTransformer();
+        this.onSelect = function (table) {
+            _this.editor.focus();
+            if (table) {
+                var vTable = new roosterjs_editor_dom_1.VTable(table);
+                var rows = vTable.cells.length - 1;
+                var lastCellIndex_1 = 0;
+                vTable.cells[rows].forEach(function (cell, index) {
+                    if (cell.td) {
+                        lastCellIndex_1 = index;
+                    }
+                });
+                var selection = {
+                    firstCell: {
+                        x: 0,
+                        y: 0,
+                    },
+                    lastCell: {
+                        y: rows,
+                        x: lastCellIndex_1,
+                    },
+                };
+                _this.editor.select(table, selection);
+            }
+        };
         this.isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(table, 'direction') == 'rtl';
-        this.tableResizer = (0, TableResizer_1.default)(table, sizeTransformer, this.isRTL, this.onFinishEditing);
+        this.tableResizer = (0, TableResizer_1.default)(table, editor.getZoomScale(), this.isRTL, this.onFinishEditing);
+        this.tableSelector = (0, TableSelector_1.default)(table, editor.getZoomScale(), this.onSelect);
         this.editor.addUndoSnapshot(function (start, end) {
             _this.start = start;
             _this.end = end;
@@ -23085,6 +23174,7 @@ var TableEditor = /** @class */ (function () {
         this.disposeTableResizer();
         this.disposeCellResizers();
         this.disposeTableInserter();
+        this.disposeTableSelector();
     };
     TableEditor.prototype.onMouseMove = function (x, y) {
         var _a;
@@ -23130,9 +23220,9 @@ var TableEditor = /** @class */ (function () {
             this.disposeCellResizers();
         }
         if (!this.horizontalResizer && td) {
-            var sizeTransformer = this.editor.getSizeTransformer();
-            this.horizontalResizer = (0, CellResizer_1.default)(td, sizeTransformer, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing);
-            this.verticalResizer = (0, CellResizer_1.default)(td, sizeTransformer, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing);
+            var zoomScale = this.editor.getZoomScale();
+            this.horizontalResizer = (0, CellResizer_1.default)(td, zoomScale, this.isRTL, true /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing);
+            this.verticalResizer = (0, CellResizer_1.default)(td, zoomScale, this.isRTL, false /*isHorizontal*/, this.onStartCellResize, this.onFinishEditing);
         }
     };
     TableEditor.prototype.setInserterTd = function (td, isHorizontal) {
@@ -23176,6 +23266,12 @@ var TableEditor = /** @class */ (function () {
             this.verticalResizer = null;
         }
     };
+    TableEditor.prototype.disposeTableSelector = function () {
+        if (this.tableSelector) {
+            (0, TableEditorFeature_1.disposeTableEditFeature)(this.tableSelector);
+            this.tableSelector = null;
+        }
+    };
     return TableEditor;
 }());
 exports.default = TableEditor;
@@ -23248,23 +23344,23 @@ function createTableInserter(editor, td, isRTL, isHorizontal, onInsert) {
             div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
         }
         document_1.body.appendChild(div);
-        var handler = new TableInsertHandler(div, td, isHorizontal, editor.getSizeTransformer(), onInsert);
+        var handler = new TableInsertHandler(div, td, isHorizontal, editor.getZoomScale(), onInsert);
         return { div: div, featureHandler: handler, node: td };
     }
 }
 exports.default = createTableInserter;
 var TableInsertHandler = /** @class */ (function () {
-    function TableInsertHandler(div, td, isHorizontal, sizeTransformer, onInsert) {
+    function TableInsertHandler(div, td, isHorizontal, zoomScale, onInsert) {
         var _this = this;
         this.div = div;
         this.td = td;
         this.isHorizontal = isHorizontal;
-        this.sizeTransformer = sizeTransformer;
+        this.zoomScale = zoomScale;
         this.onInsert = onInsert;
         this.insertTd = function () {
             var vtable = new roosterjs_editor_dom_1.VTable(_this.td);
             if (!_this.isHorizontal) {
-                vtable.normalizeTableCellSize(_this.sizeTransformer);
+                vtable.normalizeTableCellSize(_this.zoomScale);
                 // Since adding new column will cause table width to change, we need to remove width properties
                 vtable.table.removeAttribute('width');
                 vtable.table.style.width = null;
@@ -23321,7 +23417,7 @@ var MIN_CELL_HEIGHT = 20;
 /**
  * @internal
  */
-function createTableResizer(table, sizeTransformer, isRTL, onDragEnd) {
+function createTableResizer(table, zoomScale, isRTL, onDragEnd) {
     var document = table.ownerDocument;
     var div = (0, roosterjs_editor_dom_1.createElement)(isRTL
         ? 10 /* TableResizerRTL */
@@ -23332,28 +23428,28 @@ function createTableResizer(table, sizeTransformer, isRTL, onDragEnd) {
     var context = {
         isRTL: isRTL,
         table: table,
-        sizeTransformer: sizeTransformer,
+        zoomScale: zoomScale,
     };
     setResizeDivPosition(context, div);
     var featureHandler = new DragAndDropHelper_1.default(div, context, setResizeDivPosition, {
         onDragStart: onDragStart,
         onDragging: onDragging,
         onDragEnd: onDragEnd,
-    }, sizeTransformer);
+    }, zoomScale);
     return { node: table, div: div, featureHandler: featureHandler };
 }
 exports.default = createTableResizer;
 function onDragStart(context, event) {
     return {
         originalRect: context.table.getBoundingClientRect(),
-        vTable: new roosterjs_editor_dom_1.VTable(context.table, true /*normalizeTable*/, context.sizeTransformer),
+        vTable: new roosterjs_editor_dom_1.VTable(context.table, true /*normalizeTable*/, context.zoomScale),
     };
 }
 function onDragging(context, event, initValue, deltaX, deltaY) {
-    var isRTL = context.isRTL, sizeTransformer = context.sizeTransformer;
+    var isRTL = context.isRTL, zoomScale = context.zoomScale;
     var originalRect = initValue.originalRect, vTable = initValue.vTable;
-    var ratioX = 1.0 + (deltaX / sizeTransformer(originalRect.width)) * (isRTL ? -1 : 1);
-    var ratioY = 1.0 + deltaY / sizeTransformer(originalRect.height);
+    var ratioX = 1.0 + (deltaX / originalRect.width) * zoomScale * (isRTL ? -1 : 1);
+    var ratioY = 1.0 + (deltaY / originalRect.height) * zoomScale;
     var shouldResizeX = Math.abs(ratioX - 1.0) > 1e-3;
     var shouldResizeY = Math.abs(ratioY - 1.0) > 1e-3;
     if (shouldResizeX || shouldResizeY) {
@@ -23364,7 +23460,7 @@ function onDragging(context, event, initValue, deltaX, deltaY) {
                     if (shouldResizeX) {
                         // the width of some external table is fixed, we need to make it resizable
                         vTable.table.style.width = null;
-                        var newWidth = sizeTransformer(cell.width * ratioX);
+                        var newWidth = (cell.width * ratioX) / zoomScale;
                         cell.td.style.boxSizing = 'border-box';
                         if (newWidth >= MIN_CELL_WIDTH) {
                             cell.td.style.wordBreak = 'break-word';
@@ -23376,7 +23472,7 @@ function onDragging(context, event, initValue, deltaX, deltaY) {
                         // the height of some external table is fixed, we need to make it resizable
                         vTable.table.style.height = null;
                         if (j == 0) {
-                            var newHeight = sizeTransformer(cell.height * ratioY);
+                            var newHeight = (cell.height * ratioY) / zoomScale;
                             if (newHeight >= MIN_CELL_HEIGHT) {
                                 cell.td.style.height = newHeight + "px";
                             }
@@ -23407,6 +23503,59 @@ function setResizeDivPosition(context, trigger) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableResize/editors/TableSelector.ts ***!
+  \********************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDropHelper */ "./packages/roosterjs-editor-plugins/lib/pluginUtils/DragAndDropHelper.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var TABLE_SELECTOR_LENGTH = 12;
+var TABLE_SELECTOR_ID = '_Table_Selector';
+/**
+ * @internal
+ */
+function createTableSelector(table, zoomScale, onFinishDragging) {
+    var document = table.ownerDocument;
+    var div = (0, roosterjs_editor_dom_1.createElement)(11 /* TableSelector */, document);
+    div.id = TABLE_SELECTOR_ID;
+    div.style.width = TABLE_SELECTOR_LENGTH + "px";
+    div.style.height = TABLE_SELECTOR_LENGTH + "px";
+    document.body.appendChild(div);
+    var context = {
+        table: table,
+        zoomScale: zoomScale,
+    };
+    setSelectorDivPosition(context, div);
+    var onDragEnd = function (context, event) {
+        if (event.target == div) {
+            onFinishDragging(context.table);
+        }
+        return false;
+    };
+    var featureHandler = new DragAndDropHelper_1.default(div, context, setSelectorDivPosition, {
+        onDragEnd: onDragEnd,
+    }, zoomScale);
+    return { div: div, featureHandler: featureHandler, node: table };
+}
+exports.default = createTableSelector;
+function setSelectorDivPosition(context, trigger) {
+    var table = context.table;
+    var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
+    if (rect) {
+        trigger.style.top = rect.top - TABLE_SELECTOR_LENGTH + "px";
+        trigger.style.left = rect.left - TABLE_SELECTOR_LENGTH - 2 + "px";
+    }
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/index.ts":