roosterjs 8.25.0 → 8.26.0

package/dist/rooster.js

@@ -2248,7 +2248,7 @@ function changeCapitalization(editor, capitalization, language) {
                 }
             }
         }
-    });
+    }, 'changeCapitalization');
     function getCapitalizedText(originalText, language) {
         switch (capitalization) {
             case "lowercase" /* Lowercase */:
@@ -2318,7 +2318,7 @@ function changeFontSize(editor, change, fontSizes) {
         if (lineHeight != 'normal') {
             element.style.lineHeight = 'normal';
         }
-    });
+    }, 'changeFontSize');
 }
 exports.default = changeFontSize;
 /**
@@ -2397,6 +2397,7 @@ exports.default = clearBlockFormat;
 Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
 var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts");
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var setBackgroundColor_1 = __webpack_require__(/*! ./setBackgroundColor */ "./packages/roosterjs-editor-api/lib/format/setBackgroundColor.ts");
 var setFontName_1 = __webpack_require__(/*! ./setFontName */ "./packages/roosterjs-editor-api/lib/format/setFontName.ts");
 var setFontSize_1 = __webpack_require__(/*! ./setFontSize */ "./packages/roosterjs-editor-api/lib/format/setFontSize.ts");
@@ -2512,7 +2513,7 @@ function clearAutoDetectFormat(editor) {
  * @param editor The editor instance
  */
 function clearBlockFormat(editor) {
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         (0, blockFormat_1.default)(editor, function (region) {
             var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region);
             var nodes = (0, roosterjs_editor_dom_1.collapseNodesInRegion)(region, blocks);
@@ -2531,7 +2532,7 @@ function clearBlockFormat(editor) {
             nodes.forEach(clearNodeFormat);
         });
         setDefaultFormat(editor);
-    }, "Format" /* Format */);
+    }, 'clearBlockFormat');
 }
 function clearInlineFormat(editor) {
     editor.focus();
@@ -2541,6 +2542,7 @@ function clearInlineFormat(editor) {
             return node.removeAttribute('class');
         });
         setDefaultFormat(editor);
+        return 'clearInlineFormat';
     }, "Format" /* Format */);
 }
 function setDefaultFormat(editor) {
@@ -2724,11 +2726,13 @@ function createLink(editor, link, altText, displayText, target) {
                 editor.getDocument().execCommand("createLink" /* CreateLink */, false, normalizedUrl_1);
                 var traverser = editor.getSelectionTraverser();
                 var currentInline = traverser.getNextInlineElement();
+                // list for removing unwanted lines
+                var deletionInlineList = [];
                 while (currentInline) {
-                    var a = currentInline.getContainerNode();
-                    a.parentElement.removeChild(a);
+                    deletionInlineList.push(currentInline.getContainerNode());
                     currentInline = traverser.getNextInlineElement();
                 }
+                deletionInlineList.forEach(function (node) { return editor.deleteNode(node); });
                 anchor = getAnchorNodeAtCursor(editor);
                 updateAnchorDisplayText(anchor, displayText);
             }
@@ -2929,6 +2933,7 @@ exports.default = insertEntity;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 function insertImage(editor, imageFile, attributes) {
     if (typeof imageFile == 'string') {
@@ -2944,7 +2949,7 @@ function insertImage(editor, imageFile, attributes) {
 }
 exports.default = insertImage;
 function insertImageWithSrc(editor, src, attributes) {
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         var image = editor.getDocument().createElement('img');
         image.src = src;
         if (attributes) {
@@ -2954,7 +2959,7 @@ function insertImageWithSrc(editor, src, attributes) {
         }
         image.style.maxWidth = '100%';
         editor.insertNode(image);
-    }, "Format" /* Format */);
+    }, 'insertImage');
 }
 
 
@@ -2970,6 +2975,7 @@ function insertImageWithSrc(editor, src, attributes) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Remove link at selection. If no links at selection, do nothing.
@@ -2979,10 +2985,10 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function removeLink(editor) {
     editor.focus();
-    editor.addUndoSnapshot(function (start, end) {
+    (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
         editor.queryElements('a[href]', 1 /* OnSelection */, roosterjs_editor_dom_1.unwrap);
         editor.select(start, end);
-    }, "Format" /* Format */);
+    }, 'removeLink');
 }
 exports.default = removeLink;
 
@@ -3046,6 +3052,7 @@ exports.default = replaceWithNode;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 /**
  * Rotate an element visually
  * @param editor The editor instance
@@ -3054,9 +3061,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function rotateElement(editor, element, angle) {
     if (element) {
-        editor.addUndoSnapshot(function () {
+        (0, formatUndoSnapshot_1.default)(editor, function () {
             element.style.transform = "rotate(" + angle + "deg)";
-        }, "Format" /* Format */);
+        }, 'rotateElement');
     }
 }
 exports.default = rotateElement;
@@ -3076,6 +3083,7 @@ exports.default = rotateElement;
 Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
 var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts");
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set content alignment
@@ -3084,7 +3092,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * Alignment.Center, Alignment.Left, Alignment.Right
  */
 function setAlignment(editor, alignment) {
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         var selection = editor.getSelectionRangeEx();
         var isATable = selection && selection.type === 1 /* TableSelection */;
         var elementAtCursor = editor.getElementAtCursor();
@@ -3100,7 +3108,7 @@ function setAlignment(editor, alignment) {
         else {
             alignText(editor, alignment);
         }
-    }, "Format" /* Format */);
+    }, 'rotateElement');
 }
 exports.default = setAlignment;
 /**
@@ -3155,7 +3163,7 @@ function alignList(editor, alignment) {
         var startNode = blocks[0].getStartNode();
         var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, true /*includeSiblingLists*/, startNode);
         vList.setAlignment(start, end, alignment);
-    });
+    }, undefined /* beforeRunCallback */, 'alignList');
 }
 
 
@@ -3186,7 +3194,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function setBackgroundColor(editor, color) {
     (0, applyInlineStyle_1.default)(editor, function (element, isInnerNode) {
         (0, roosterjs_editor_dom_1.setColor)(element, isInnerNode ? '' : color, true /*isBackground*/, editor.isDarkMode());
-    });
+    }, 'setBackgroundColor');
 }
 exports.default = setBackgroundColor;
 
@@ -3204,6 +3212,7 @@ exports.default = setBackgroundColor;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var collapseSelectedBlocks_1 = __webpack_require__(/*! ../utils/collapseSelectedBlocks */ "./packages/roosterjs-editor-api/lib/utils/collapseSelectedBlocks.ts");
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 /**
  * Change direction for the blocks/paragraph at selection
  * @param editor The editor instance
@@ -3212,13 +3221,13 @@ var collapseSelectedBlocks_1 = __webpack_require__(/*! ../utils/collapseSelected
  */
 function setDirection(editor, direction) {
     editor.focus();
-    editor.addUndoSnapshot(function (start, end) {
+    (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
         (0, collapseSelectedBlocks_1.default)(editor, function (element) {
             element.setAttribute('dir', direction == 0 /* LeftToRight */ ? 'ltr' : 'rtl');
             element.style.textAlign = direction == 0 /* LeftToRight */ ? 'left' : 'right';
         });
         editor.select(start, end);
-    }, "Format" /* Format */);
+    }, 'setDirection');
 }
 exports.default = setDirection;
 
@@ -3247,7 +3256,7 @@ function setFontName(editor, fontName) {
     // (http://www.w3schools.com/tags/tag_font.asp).
     (0, applyListItemWrap_1.default)(editor, 'font-family', function (element, isInnerNode) {
         element.style.fontFamily = isInnerNode ? '' : fontName;
-    });
+    }, 'setFontName');
 }
 exports.default = setFontName;
 
@@ -3281,7 +3290,7 @@ function setFontSize(editor, fontSize) {
         if (lineHeight != 'normal') {
             element.style.lineHeight = 'normal';
         }
-    });
+    }, 'setFontSize');
 }
 exports.default = setFontSize;
 
@@ -3298,6 +3307,7 @@ exports.default = setFontSize;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 /**
  * Set image alt text for all selected images at selection. If no images is contained
  * in selection, do nothing.
@@ -3309,11 +3319,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function setImageAltText(editor, altText) {
     editor.focus();
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         editor.queryElements('img', 1 /* OnSelection */, function (node) {
             return node.setAttribute('alt', altText);
         });
-    }, "Format" /* Format */);
+    }, 'setImageAltText');
 }
 exports.default = setImageAltText;
 
@@ -3386,7 +3396,7 @@ function setIndentation(editor, indentation) {
             return false;
         }
         return true;
-    });
+    }, 'setIndentation');
 }
 exports.default = setIndentation;
 function indent(region, blocks) {
@@ -3432,6 +3442,7 @@ function shouldHandleWithBlockquotes(indentation, editor, startNode) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Resets Ordered List Numbering back to the value of the parameter startNumber
@@ -3441,7 +3452,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function setOrderedListNumbering(editor, separator, startNumber) {
     if (startNumber === void 0) { startNumber = 1; }
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         editor.focus();
         var regions = editor.getSelectedRegions();
         if (regions[0]) {
@@ -3451,7 +3462,7 @@ function setOrderedListNumbering(editor, separator, startNumber) {
                 vList.writeBack();
             }
         }
-    }, "Format" /* Format */);
+    }, 'setOrderedListNumbering');
 }
 exports.default = setOrderedListNumbering;
 
@@ -3486,7 +3497,7 @@ function setTextColor(editor, color, shouldApplyInlineStyle) {
         if (!shouldApplyInlineStyle || shouldApplyInlineStyle(element)) {
             (0, roosterjs_editor_dom_1.setColor)(element, isInnerNode ? '' : color, false /*isBackground*/, editor.isDarkMode());
         }
-    });
+    }, 'setTextColor');
 }
 exports.default = setTextColor;
 
@@ -3522,7 +3533,7 @@ function toggleBlockQuote(editor, styler) {
     (0, blockWrap_1.default)(editor, function (nodes) {
         var wrapper = (0, roosterjs_editor_dom_1.wrap)(nodes, BLOCKQUOTE_TAG);
         (styler || DEFAULT_STYLER)(wrapper);
-    }, function () { return editor.queryElements('blockquote', 1 /* OnSelection */, roosterjs_editor_dom_1.unwrap).length == 0; });
+    }, function () { return editor.queryElements('blockquote', 1 /* OnSelection */, roosterjs_editor_dom_1.unwrap).length == 0; }, 'toggleBlockQuote');
 }
 exports.default = toggleBlockQuote;
 
@@ -3549,7 +3560,7 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * @param editor The editor instance
  */
 function toggleBold(editor) {
-    (0, execCommand_1.default)(editor, "bold" /* Bold */);
+    (0, execCommand_1.default)(editor, "bold" /* Bold */, 'toggleBold');
 }
 exports.default = toggleBold;
 
@@ -3618,7 +3629,7 @@ function toggleCodeBlock(editor, styler) {
                 (0, roosterjs_editor_dom_1.unwrap)(parent_1);
             }
         }).length == 0;
-    });
+    }, 'toggleCodeBlock');
 }
 exports.default = toggleCodeBlock;
 
@@ -3635,6 +3646,7 @@ exports.default = toggleCodeBlock;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Toggle header at selection
@@ -3645,7 +3657,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function toggleHeader(editor, level) {
     level = Math.min(Math.max(Math.round(level), 0), 6);
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         editor.focus();
         var wrapped = false;
         editor.queryElements('H1,H2,H3,H4,H5,H6', 1 /* OnSelection */, function (header) {
@@ -3672,7 +3684,7 @@ function toggleHeader(editor, level) {
             }
             editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, "<H" + level + ">");
         }
-    }, "Format" /* Format */);
+    }, 'toggleHeader');
 }
 exports.default = toggleHeader;
 
@@ -3699,7 +3711,7 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * @param editor The editor instance
  */
 function toggleItalic(editor) {
-    (0, execCommand_1.default)(editor, "italic" /* Italic */);
+    (0, execCommand_1.default)(editor, "italic" /* Italic */, 'toggleItalic');
 }
 exports.default = toggleItalic;
 
@@ -3755,7 +3767,7 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * @param editor The editor instance
  */
 function toggleStrikethrough(editor) {
-    (0, execCommand_1.default)(editor, "strikeThrough" /* StrikeThrough */);
+    (0, execCommand_1.default)(editor, "strikeThrough" /* StrikeThrough */, 'toggleStrikethrough');
 }
 exports.default = toggleStrikethrough;
 
@@ -3784,7 +3796,7 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * @param editor The editor instance
  */
 function toggleSubscript(editor) {
-    (0, execCommand_1.default)(editor, "subscript" /* Subscript */);
+    (0, execCommand_1.default)(editor, "subscript" /* Subscript */, 'toggleSubscript');
 }
 exports.default = toggleSubscript;
 
@@ -3813,7 +3825,7 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * @param editor The editor instance
  */
 function toggleSuperscript(editor) {
-    (0, execCommand_1.default)(editor, "superscript" /* Superscript */);
+    (0, execCommand_1.default)(editor, "superscript" /* Superscript */, 'toggleSuperscript');
 }
 exports.default = toggleSuperscript;
 
@@ -3840,7 +3852,7 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * @param editor The editor instance
  */
 function toggleUnderline(editor) {
-    (0, execCommand_1.default)(editor, "underline" /* Underline */);
+    (0, execCommand_1.default)(editor, "underline" /* Underline */, 'toggleUnderline');
 }
 exports.default = toggleUnderline;
 
@@ -3950,6 +3962,7 @@ Object.defineProperty(exports, "experimentCommitListChains", { enumerable: true,
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 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';
@@ -3960,7 +3973,7 @@ var CELL_SHADE = 'cellShade';
  **/
 function applyCellShading(editor, color) {
     editor.focus();
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         var regions = editor.getSelectedRegions();
         regions.forEach(function (region) {
             if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
@@ -3970,7 +3983,7 @@ function applyCellShading(editor, color) {
                     region.rootNode.style.backgroundColor;
             }
         });
-    });
+    }, 'applyCellShading');
 }
 exports.default = applyCellShading;
 
@@ -3987,6 +4000,7 @@ exports.default = applyCellShading;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Edit table with given operation. If there is no table at cursor then no op.
@@ -3996,7 +4010,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function editTable(editor, operation) {
     var td = editor.getElementAtCursor('TD,TH');
     if (td) {
-        editor.addUndoSnapshot(function () {
+        (0, formatUndoSnapshot_1.default)(editor, function () {
             var vtable = new roosterjs_editor_dom_1.VTable(td);
             saveTableSelection(editor, vtable);
             vtable.edit(operation);
@@ -4005,7 +4019,7 @@ function editTable(editor, operation) {
             editor.focus();
             var cellToSelect = calculateCellToSelect(operation, vtable.row, vtable.col);
             editor.select(vtable.getCell(cellToSelect.newRow, cellToSelect.newCol).td, 0 /* Begin */);
-        }, "Format" /* Format */);
+        }, 'editTable');
     }
 }
 exports.default = editTable;
@@ -4053,6 +4067,7 @@ function saveTableSelection(editor, vtable) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Format table
@@ -4063,14 +4078,14 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function formatTable(editor, format, table) {
     table = table || editor.getElementAtCursor('TABLE');
     if (table) {
-        editor.addUndoSnapshot(function (start, end) {
+        (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
             var vtable = new roosterjs_editor_dom_1.VTable(table);
             vtable.applyFormat(format);
             vtable.writeBack();
             editor.transformToDarkColor(vtable.table);
             editor.focus();
             editor.select(start, end);
-        }, "Format" /* Format */);
+        }, 'formatTable');
     }
 }
 exports.default = formatTable;
@@ -4088,6 +4103,7 @@ exports.default = formatTable;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Insert table into editor at current selection
@@ -4116,7 +4132,7 @@ function insertTable(editor, columns, rows, format) {
         }
     }
     editor.focus();
-    editor.addUndoSnapshot(function () {
+    (0, formatUndoSnapshot_1.default)(editor, function () {
         var vtable = new roosterjs_editor_dom_1.VTable(table);
         vtable.applyFormat(format);
         vtable.writeBack();
@@ -4124,7 +4140,7 @@ function insertTable(editor, columns, rows, format) {
         editor.runAsync(function (editor) {
             return editor.select(new roosterjs_editor_dom_1.Position(table, 0 /* Begin */).normalize());
         });
-    }, "Format" /* Format */);
+    }, 'insertTable');
 }
 exports.default = insertTable;
 function getTableCellWidth(columns) {
@@ -4152,6 +4168,7 @@ function getTableCellWidth(columns) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ./formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var ZERO_WIDTH_SPACE = '\u200B';
 /**
@@ -4160,7 +4177,7 @@ var ZERO_WIDTH_SPACE = '\u200B';
  * @param editor The editor instance
  * @param callback The callback function to apply style
  */
-function applyInlineStyle(editor, callback) {
+function applyInlineStyle(editor, callback, apiName) {
     editor.focus();
     var selection = editor.getSelectionRangeEx();
     if (selection && selection.areAllCollapsed) {
@@ -4193,7 +4210,7 @@ function applyInlineStyle(editor, callback) {
     else {
         // This is start and end node that get the style. The start and end needs to be recorded so that selection
         // can be re-applied post-applying style
-        editor.addUndoSnapshot(function () {
+        (0, formatUndoSnapshot_1.default)(editor, function () {
             var firstNode;
             var lastNode;
             selection.ranges.forEach(function (range) {
@@ -4212,7 +4229,7 @@ function applyInlineStyle(editor, callback) {
             if (firstNode && lastNode && selection.type == 0 /* Normal */) {
                 editor.select(firstNode, -2 /* Before */, lastNode, -3 /* After */);
             }
-        }, "Format" /* Format */);
+        }, apiName);
     }
 }
 exports.default = applyInlineStyle;
@@ -4239,7 +4256,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param styleName Name of the style to apply to the list item
  * @param formatCallback callback to apply the style to each element
  */
-function applyListItemStyleWrap(editor, styleName, formatCallback) {
+function applyListItemStyleWrap(editor, styleName, formatCallback, apiName) {
     var parentNodes = [];
     (0, applyInlineStyle_1.default)(editor, function (element, isInnerNode) {
         formatCallback(element, isInnerNode);
@@ -4247,7 +4264,7 @@ function applyListItemStyleWrap(editor, styleName, formatCallback) {
         if (parent && parentNodes.indexOf(parent) === -1) {
             parentNodes.push(parent);
         }
-    });
+    }, apiName);
     applyStyleToListItems(parentNodes, [styleName]);
 }
 exports.default = applyListItemStyleWrap;
@@ -4279,14 +4296,15 @@ function applyStyleToListItems(parentNodes, styles) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var experimentCommitListChains_1 = __webpack_require__(/*! ../experiment/experimentCommitListChains */ "./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts");
+var formatUndoSnapshot_1 = __webpack_require__(/*! ./formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Split selection into regions, and perform a block-wise formatting action for each region.
  */
-function blockFormat(editor, callback, beforeRunCallback) {
+function blockFormat(editor, callback, beforeRunCallback, apiName) {
     editor.focus();
     var selection = editor.getSelectionRangeEx();
-    editor.addUndoSnapshot(function (start, end) {
+    (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
         if (!beforeRunCallback || beforeRunCallback()) {
             var regions = editor.getSelectedRegions();
             var chains_1 = roosterjs_editor_dom_1.VListChain.createListChains(regions, start === null || start === void 0 ? void 0 : start.node);
@@ -4299,7 +4317,7 @@ function blockFormat(editor, callback, beforeRunCallback) {
         else if (selection.type == 1 /* TableSelection */) {
             editor.select(selection.table, selection.coordinates);
         }
-    }, "Format" /* Format */);
+    }, apiName);
 }
 exports.default = blockFormat;
 
@@ -4327,7 +4345,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param beforeRunCallback A callback function to run before looping all regions. If it returns false,
  * the loop for regions will be skipped
  */
-function blockWrap(editor, wrapFunction, beforeRunCallback) {
+function blockWrap(editor, wrapFunction, beforeRunCallback, apiName) {
     (0, blockFormat_1.default)(editor, function (region) {
         var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/);
         var nodes = (0, roosterjs_editor_dom_1.collapseNodesInRegion)(region, blocks);
@@ -4348,7 +4366,7 @@ function blockWrap(editor, wrapFunction, beforeRunCallback) {
             }
             wrapFunction(nodes);
         }
-    }, beforeRunCallback);
+    }, beforeRunCallback, apiName);
 }
 exports.default = blockWrap;
 
@@ -4408,6 +4426,7 @@ function isEmptyBlockUnderTR(block) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var formatUndoSnapshot_1 = __webpack_require__(/*! ./formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * @internal
@@ -4419,7 +4438,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param doWorkaroundForList Optional, set to true to do workaround for list in order to keep current format.
  * Default value is false.
  */
-function execCommand(editor, command) {
+function execCommand(editor, command, apiName) {
     editor.focus();
     var formatter = function () { return editor.getDocument().execCommand(command, false, null); };
     var selection = editor.getSelectionRangeEx();
@@ -4436,7 +4455,7 @@ function execCommand(editor, command) {
         }
     }
     else {
-        editor.addUndoSnapshot(function () {
+        (0, formatUndoSnapshot_1.default)(editor, function () {
             var tempRange;
             selection.ranges.forEach(function (range) {
                 if (selection.type == 1 /* TableSelection */) {
@@ -4448,12 +4467,40 @@ function execCommand(editor, command) {
             if (tempRange && selection.type == 1 /* TableSelection */) {
                 editor.select(selection.table, selection.coordinates);
             }
-        }, "Format" /* Format */);
+        }, apiName);
     }
 }
 exports.default = execCommand;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts":
+/*!***********************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts ***!
+  \***********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @internal
+ * Execute add undo snapshot for the Format APIs
+ * @param editor The editor instance
+ * @param command Optional, The callback function to perform formatting, returns a data object which will be used as the data field in ContentChangedEvent if changeSource is not null.
+ * @param apiName Optional, name of the API that was is going to be executed.
+ * Default value is false.
+ */
+function formatUndoSnapshot(editor, callback, apiName) {
+    editor.addUndoSnapshot(callback, "Format" /* Format */, undefined /* canUndoByBackspace */, apiName && {
+        formatApiName: apiName,
+    });
+}
+exports.default = formatUndoSnapshot;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/utils/toggleListType.ts":
@@ -4502,7 +4549,7 @@ function toggleListType(editor, listType, startNumber, includeSiblingLists, orde
             }
             vList.writeBack();
         }
-    });
+    }, undefined /* beforeRunCallback */, 'toggleListType');
 }
 exports.default = toggleListType;
 
@@ -4540,8 +4587,10 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param callback The editing callback, accepting current selection start and end position, returns an optional object used as the data field of ContentChangedEvent.
  * @param changeSource The ChangeSource string of ContentChangedEvent. @default ChangeSource.Format. Set to null to avoid triggering ContentChangedEvent
  * @param canUndoByBackspace True if this action can be undone when user press Backspace key (aka Auto Complete).
+ * @param formatApiName Optional parameter to provide the ContentChangeEvent which FormatApi was invoked.
  */
-var addUndoSnapshot = function (core, callback, changeSource, canUndoByBackspace) {
+var addUndoSnapshot = function (core, callback, changeSource, canUndoByBackspace, additionalData) {
+    if (additionalData === void 0) { additionalData = undefined; }
     var undoState = core.undo;
     var isNested = undoState.isNested;
     var data;
@@ -4568,6 +4617,7 @@ var addUndoSnapshot = function (core, callback, changeSource, canUndoByBackspace
             eventType: 7 /* ContentChanged */,
             source: changeSource,
             data: data,
+            additionalData: additionalData,
         };
         core.api.triggerEvent(core, event_1, true /*broadcast*/);
     }
@@ -6195,7 +6245,7 @@ var CopyPastePlugin = /** @class */ (function () {
     function CopyPastePlugin(options) {
         var _this = this;
         this.onPaste = function (event) {
-            var _a;
+            var _a, _b;
             var range;
             (0, roosterjs_editor_dom_1.extractClipboardEvent)(event, function (clipboardData) { var _a; return (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.paste(clipboardData); }, {
                 allowLinkPreview: (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled("PasteWithLinkPreview" /* PasteWithLinkPreview */),
@@ -6208,7 +6258,7 @@ var CopyPastePlugin = /** @class */ (function () {
                 removeTempDiv: function (div) {
                     _this.cleanUpAndRestoreSelection(div, range, false /* isCopy */);
                 },
-            });
+            }, (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getSelectionRange());
         };
         this.state = {
             allowedCustomPasteType: options.allowedCustomPasteType || [],
@@ -8968,12 +9018,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var extractClipboardItems_1 = __webpack_require__(/*! ./extractClipboardItems */ "./packages/roosterjs-editor-dom/lib/clipboard/extractClipboardItems.ts");
 var extractClipboardItemsForIE_1 = __webpack_require__(/*! ./extractClipboardItemsForIE */ "./packages/roosterjs-editor-dom/lib/clipboard/extractClipboardItemsForIE.ts");
 var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
+var Browser_1 = __webpack_require__(/*! ../utils/Browser */ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts");
 /**
  * @deprecated Use extractClipboardItems and extractClipboardItemsForIE instead
  * Extract a Clipboard event
  * @param event The paste event
  * @param callback Callback function when data is ready
  * @param options Options to retrieve more items from the event, including HTML string and other customized items
+ * @param rangeBeforePaste Optional range to be removed when pasting in Android
  * @returns An object with the following properties:
  *  types: Available types from the clipboard event
  *  text: Plain text from the clipboard event
@@ -8982,19 +9034,27 @@ var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/rooste
  *   When set to undefined, it means can't retrieve HTML string, there may be HTML string but direct retrieving is
  *   not supported by browser.
  */
-function extractClipboardEvent(event, callback, options) {
+function extractClipboardEvent(event, callback, options, rangeBeforePaste) {
     var _a;
     var dataTransfer = event.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);
+        (0, extractClipboardItems_1.default)((0, toArray_1.default)(dataTransfer.items), options).then(function (clipboardData) {
+            removeContents(rangeBeforePaste);
+            callback(clipboardData);
+        });
     }
     else {
         (0, extractClipboardItemsForIE_1.default)(dataTransfer, callback, options);
     }
 }
 exports.default = extractClipboardEvent;
+function removeContents(range) {
+    if (Browser_1.Browser.isAndroid && range) {
+        range.deleteContents();
+    }
+}
 
 
 /***/ }),
@@ -9953,12 +10013,14 @@ var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-
 var VTable_1 = __webpack_require__(/*! ../table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
 var splitParentNode_1 = __webpack_require__(/*! ../utils/splitParentNode */ "./packages/roosterjs-editor-dom/lib/utils/splitParentNode.ts");
+var NOT_EDITABLE_SELECTOR = '[contenteditable=false]';
 var adjustSteps = [
     adjustInsertPositionForHyperLink,
     adjustInsertPositionForStructuredNode,
     adjustInsertPositionForParagraph,
     adjustInsertPositionForVoidElement,
     adjustInsertPositionForMoveCursorOutOfALink,
+    adjustInsertPositionForNotEditableNode,
 ];
 /**
  * Adjust position for A tag don't be nested inside another A tag.
@@ -10098,6 +10160,26 @@ function adjustInsertPositionForMoveCursorOutOfALink(root, nodeToInsert, positio
     }
     return position;
 }
+/**
+ * Adjust the position cursor out of a not contenteditable element.
+ */
+function adjustInsertPositionForNotEditableNode(root, nodeToInsert, position, range) {
+    if (!position.element.isContentEditable) {
+        var nonEditableElement = void 0;
+        var lastNonEditableElement = (0, findClosestElementAncestor_1.default)(position.node, root, NOT_EDITABLE_SELECTOR);
+        while (lastNonEditableElement) {
+            nonEditableElement = lastNonEditableElement;
+            lastNonEditableElement = (nonEditableElement === null || nonEditableElement === void 0 ? void 0 : nonEditableElement.parentElement)
+                ? (0, findClosestElementAncestor_1.default)(nonEditableElement.parentElement, root, NOT_EDITABLE_SELECTOR)
+                : null;
+        }
+        if (nonEditableElement) {
+            position = new Position_1.default(nonEditableElement, -3 /* After */);
+            return adjustInsertPositionForNotEditableNode(root, nodeToInsert, position, range);
+        }
+    }
+    return position;
+}
 /**
  *
  * @param root the contentDiv of the ditor
@@ -17610,10 +17692,9 @@ exports.getTargetWindow = void 0;
 /**
  * @internal Export for test only
  * Try get window from the given node or range
- * @param source Source node or range
+ * @param node Source node to get window from
  */
-function getTargetWindow(source) {
-    var node = source && (source.commonAncestorContainer || source);
+function getTargetWindow(node) {
     var document = node &&
         (node.ownerDocument ||
             (Object.prototype.toString.apply(node) == '[object HTMLDocument]'
@@ -17630,6 +17711,11 @@ exports.getTargetWindow = getTargetWindow;
  * @param typeName Target type name
  */
 function safeInstanceOf(obj, typeName) {
+    var _a;
+    if (typeName == 'Range') {
+        return (Object.prototype.toString.apply(obj) == '[object Range]' &&
+            !!((_a = obj) === null || _a === void 0 ? void 0 : _a.commonAncestorContainer));
+    }
     var targetWindow = getTargetWindow(obj);
     var targetType = targetWindow && targetWindow[typeName];
     var mainWindow = window;
@@ -21129,14 +21215,13 @@ var ImageEdit = /** @class */ (function () {
             // When there is image in editing, clean up any cached objects and elements
             this.clearDndHelpers();
             // Apply the changes, and add undo snapshot if necessary
-            if ((0, applyChange_1.default)(this.editor, this.image, this.editInfo, this.lastSrc, this.wasResized)) {
-                this.editor.addUndoSnapshot(function () { return _this.image; }, "ImageResize" /* ImageResize */);
-            }
+            (0, applyChange_1.default)(this.editor, this.image, this.editInfo, this.lastSrc, this.wasResized);
             // Remove editing wrapper
             var wrapper = this.getImageWrapper(this.image);
             if (wrapper) {
                 this.removeWrapper(wrapper);
             }
+            this.editor.addUndoSnapshot(function () { return _this.image; }, "ImageResize" /* ImageResize */);
             if (selectImage) {
                 this.editor.select(this.image);
             }
@@ -21499,7 +21584,6 @@ var editInfo_1 = __webpack_require__(/*! ./editInfo */ "./packages/roosterjs-edi
  * @param image The image to apply the change
  * @param editInfo Edit info that contains the changed information of the image
  * @param previousSrc Last src value of the image before the change was made
- * @returns True if the image is changed, otherwise false
  */
 function applyChange(editor, image, editInfo, previousSrc, wasResized) {
     var newSrc = '';
@@ -21546,9 +21630,6 @@ function applyChange(editor, image, editInfo, previousSrc, wasResized) {
     var _a = (0, getGeneratedImageSize_1.default)(editInfo), targetWidth = _a.targetWidth, targetHeight = _a.targetHeight;
     image.src = newSrc;
     setImageSize(image, wasResized, targetWidth, targetHeight);
-    return (srcChanged ||
-        editInfo.widthPx != initEditInfo.widthPx ||
-        editInfo.heightPx != initEditInfo.heightPx);
 }
 exports.default = applyChange;
 /**
@@ -23346,7 +23427,9 @@ function getAndSetNodeId(wordCustomData, element) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var MSO_COMMENT_PARENT = 'mso-comment-parent';
 var MSO_COMMENT_REFERENCE = 'mso-comment-reference';
+var MSO_COMMENT_DATE = 'mso-comment-date';
 var MSO_COMMENT_ANCHOR_HREF_REGEX = /#_msocom_/;
 var MSO_SPECIAL_CHARACTER = 'mso-special-character';
 var MSO_SPECIAL_CHARACTER_COMMENT = 'comment';
@@ -23357,7 +23440,7 @@ var MSO_ELEMENT_COMMENT_LIST = 'comment-list';
  * @internal
  * Removes comments when pasting Word content.
  */
-function commentsRemoval(elementCallbacks) {
+function commentsRemoval(elementCallbacks, styleCallbacks) {
     // 1st Step, Remove SPAN elements added after each comment.
     // Word adds multiple elements for comments as SPAN elements.
     // In this step we remove these elements:
@@ -23389,11 +23472,7 @@ function commentsRemoval(elementCallbacks) {
     //      In this step we remove this Anchor elements.
     (0, roosterjs_editor_dom_1.chainSanitizerCallback)(elementCallbacks, 'A', function (element) {
         var _a;
-        var styles = (0, roosterjs_editor_dom_1.getStyles)(element);
-        if (!!styles[MSO_COMMENT_REFERENCE]) {
-            (0, roosterjs_editor_dom_1.changeElementTag)(element, 'span');
-        }
-        else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLAnchorElement') &&
+        if ((0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLAnchorElement') &&
             MSO_COMMENT_ANCHOR_HREF_REGEX.test(element.href)) {
             (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(element);
         }
@@ -23418,6 +23497,13 @@ function commentsRemoval(elementCallbacks) {
         }
         return true;
     });
+    /**
+     * Remove styles related to Office Comments that can cause unwanted behaviors
+     * depending on the user client
+     */
+    (0, roosterjs_editor_dom_1.chainSanitizerCallback)(styleCallbacks, MSO_COMMENT_REFERENCE, function () { return false; });
+    (0, roosterjs_editor_dom_1.chainSanitizerCallback)(styleCallbacks, MSO_COMMENT_DATE, function () { return false; });
+    (0, roosterjs_editor_dom_1.chainSanitizerCallback)(styleCallbacks, MSO_COMMENT_PARENT, function () { return false; });
 }
 exports.default = commentsRemoval;
 
@@ -23484,7 +23570,7 @@ function convertPastedContentFromWord(event) {
         }
         return true;
     });
-    (0, commentsRemoval_1.default)(sanitizingOption.elementCallbacks);
+    (0, commentsRemoval_1.default)(sanitizingOption.elementCallbacks, sanitizingOption.cssStyleCallbacks);
 }
 exports.default = convertPastedContentFromWord;
 
@@ -24035,8 +24121,6 @@ var UNIDENTIFIED_CODE = [0, 229];
  * - Apply selected item in picker
  *
  * PickerPlugin doesn't provide any UI, it just wraps related DOM events and invoke callback functions.
- * To show a picker UI, you need to build your own UI component. Please reference to
- * https://github.com/microsoft/roosterjs/tree/master/demo/scripts/controls/samplepicker
  */
 var PickerPlugin = /** @class */ (function () {
     function PickerPlugin(dataProvider, pickerOptions) {
@@ -25336,7 +25420,7 @@ var TableResize = /** @class */ (function () {
                     break;
                 }
             }
-            _this.setTableEditor(currentTable);
+            _this.setTableEditor(currentTable, e);
             (_a = _this.tableEditor) === null || _a === void 0 ? void 0 : _a.onMouseMove(x, y);
         };
         this.invalidateTableRects = function () {
@@ -25381,13 +25465,13 @@ var TableResize = /** @class */ (function () {
                 break;
         }
     };
-    TableResize.prototype.setTableEditor = function (table) {
+    TableResize.prototype.setTableEditor = function (table, e) {
         if (this.tableEditor && table != this.tableEditor.table) {
             this.tableEditor.dispose();
             this.tableEditor = null;
         }
         if (!this.tableEditor && table) {
-            this.tableEditor = new TableEditor_1.default(this.editor, table, this.invalidateTableRects, this.onShowHelperElement);
+            this.tableEditor = new TableEditor_1.default(this.editor, table, this.invalidateTableRects, this.onShowHelperElement, e.currentTarget);
         }
     };
     TableResize.prototype.ensureTableRects = function () {
@@ -25631,7 +25715,7 @@ var INSERTER_HOVER_OFFSET = 5;
  * When set a different current table or change current TD, we need to update these areas
  */
 var TableEditor = /** @class */ (function () {
-    function TableEditor(editor, table, onChanged, onShowHelperElement) {
+    function TableEditor(editor, table, onChanged, onShowHelperElement, eventTarget) {
         var _this = this;
         this.editor = editor;
         this.table = table;
@@ -25660,29 +25744,31 @@ var TableEditor = /** @class */ (function () {
             _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);
+                if (vTable.cells) {
+                    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, editor.getZoomScale(), this.isRTL, this.onStartTableResize, this.onFinishEditing, this.onShowHelperElement);
-        this.tableSelector = (0, TableSelector_1.default)(table, editor.getZoomScale(), this.onSelect, this.onShowHelperElement);
+        this.tableSelector = (0, TableSelector_1.default)(table, editor.getZoomScale(), this.onSelect, this.onShowHelperElement, this.getShouldShowTableSelectorHandler(this.editor.getScrollContainer(), eventTarget));
     }
     TableEditor.prototype.dispose = function () {
         this.disposeTableResizer();
@@ -25794,6 +25880,21 @@ var TableEditor = /** @class */ (function () {
         }
         this.editor.addUndoSnapshot();
     };
+    TableEditor.prototype.getShouldShowTableSelectorHandler = function (scrollContainer, eventTarget) {
+        if (eventTarget && (0, roosterjs_editor_dom_1.safeInstanceOf)(eventTarget, 'HTMLElement') && scrollContainer) {
+            var scrollContainerRect_1 = (0, roosterjs_editor_dom_1.normalizeRect)(scrollContainer.getBoundingClientRect());
+            var containerRect_1 = (0, roosterjs_editor_dom_1.normalizeRect)(eventTarget.getBoundingClientRect());
+            if (scrollContainerRect_1 && containerRect_1) {
+                var scrollContainerVisibleTop_1 = scrollContainer.scrollTop - scrollContainerRect_1.top;
+                return function (rect) {
+                    return containerRect_1.top <= rect.top &&
+                        scrollContainerVisibleTop_1 <= rect.top &&
+                        scrollContainerRect_1.top <= rect.top;
+                };
+            }
+        }
+        return function () { return true; };
+    };
     return TableEditor;
 }());
 exports.default = TableEditor;
@@ -25816,10 +25917,10 @@ exports.disposeTableEditFeature = void 0;
  * @internal
  */
 function disposeTableEditFeature(resizer) {
-    var _a;
-    (_a = resizer.div.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(resizer.div);
+    var _a, _b, _c;
+    (_b = (_a = resizer.div) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(resizer.div);
     resizer.div = null;
-    resizer.featureHandler.dispose();
+    (_c = resizer.featureHandler) === null || _c === void 0 ? void 0 : _c.dispose();
     resizer.featureHandler = null;
 }
 exports.disposeTableEditFeature = disposeTableEditFeature;
@@ -26053,7 +26154,11 @@ var TABLE_SELECTOR_ID = '_Table_Selector';
 /**
  * @internal
  */
-function createTableSelector(table, zoomScale, onFinishDragging, onShowHelperElement) {
+function createTableSelector(table, zoomScale, onFinishDragging, onShowHelperElement, shouldShow) {
+    var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
+    if (rect && shouldShow && !shouldShow(rect)) {
+        return { div: null, featureHandler: null, node: table };
+    }
     var document = table.ownerDocument;
     var createElementData = {
         tag: 'div',
@@ -26068,6 +26173,7 @@ function createTableSelector(table, zoomScale, onFinishDragging, onShowHelperEle
     var context = {
         table: table,
         zoomScale: zoomScale,
+        rect: rect,
     };
     setSelectorDivPosition(context, div);
     var onDragEnd = function (context, event) {
@@ -26083,8 +26189,7 @@ function createTableSelector(table, zoomScale, onFinishDragging, onShowHelperEle
 }
 exports.default = createTableSelector;
 function setSelectorDivPosition(context, trigger) {
-    var table = context.table;
-    var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
+    var rect = context.rect;
     if (rect) {
         trigger.style.top = rect.top - TABLE_SELECTOR_LENGTH + "px";
         trigger.style.left = rect.left - TABLE_SELECTOR_LENGTH - 2 + "px";