roosterjs 8.23.1 → 8.26.0

package/dist/rooster-amd.js

@@ -2247,7 +2247,7 @@ function changeCapitalization(editor, capitalization, language) {
                 }
             }
         }
-    });
+    }, 'changeCapitalization');
     function getCapitalizedText(originalText, language) {
         switch (capitalization) {
             case "lowercase" /* Lowercase */:
@@ -2317,7 +2317,7 @@ function changeFontSize(editor, change, fontSizes) {
         if (lineHeight != 'normal') {
             element.style.lineHeight = 'normal';
         }
-    });
+    }, 'changeFontSize');
 }
 exports.default = changeFontSize;
 /**
@@ -2396,6 +2396,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");
@@ -2466,7 +2467,7 @@ function clearAttribute(element) {
 function updateStyles(element, callbackfn) {
     var styles = (0, roosterjs_editor_dom_1.getStyles)(element);
     var result = {};
-    Object.keys(styles).forEach(function (style) { return callbackfn(style, styles, result); });
+    (0, roosterjs_editor_dom_1.getObjectKeys)(styles).forEach(function (style) { return callbackfn(style, styles, result); });
     (0, roosterjs_editor_dom_1.setStyles)(element, styles);
     return result;
 }
@@ -2511,7 +2512,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);
@@ -2519,7 +2520,7 @@ function clearBlockFormat(editor) {
                 // If there are styles on table cell, wrap all its children and move down all non-border styles.
                 // So that we can preserve styles for unselected blocks as well as border styles for table
                 var nonborderStyles = removeNonBorderStyles(region.rootNode);
-                if (Object.keys(nonborderStyles).length > 0) {
+                if ((0, roosterjs_editor_dom_1.getObjectKeys)(nonborderStyles).length > 0) {
                     var wrapper = (0, roosterjs_editor_dom_1.wrap)((0, roosterjs_editor_dom_1.toArray)(region.rootNode.childNodes));
                     (0, roosterjs_editor_dom_1.setStyles)(wrapper, nonborderStyles);
                 }
@@ -2530,7 +2531,7 @@ function clearBlockFormat(editor) {
             nodes.forEach(clearNodeFormat);
         });
         setDefaultFormat(editor);
-    }, "Format" /* Format */);
+    }, 'clearBlockFormat');
 }
 function clearInlineFormat(editor) {
     editor.focus();
@@ -2540,11 +2541,12 @@ function clearInlineFormat(editor) {
             return node.removeAttribute('class');
         });
         setDefaultFormat(editor);
+        return 'clearInlineFormat';
     }, "Format" /* Format */);
 }
 function setDefaultFormat(editor) {
     var defaultFormat = editor.getDefaultFormat();
-    var isDefaultFormatEmpty = Object.keys(defaultFormat).length === 0;
+    var isDefaultFormatEmpty = (0, roosterjs_editor_dom_1.getObjectKeys)(defaultFormat).length === 0;
     editor.queryElements('[style]', 2 /* InSelection */, function (node) {
         var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(node);
         if (TAGS_TO_STOP_UNWRAP.indexOf(tag) == -1) {
@@ -2723,11 +2725,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);
             }
@@ -2928,6 +2932,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') {
@@ -2943,17 +2948,17 @@ 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) {
-            Object.keys(attributes).forEach(function (attribute) {
+            (0, roosterjs_editor_dom_1.getObjectKeys)(attributes).forEach(function (attribute) {
                 return image.setAttribute(attribute, attributes[attribute]);
             });
         }
         image.style.maxWidth = '100%';
         editor.insertNode(image);
-    }, "Format" /* Format */);
+    }, 'insertImage');
 }
 
 
@@ -2969,6 +2974,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.
@@ -2978,10 +2984,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;
 
@@ -3045,6 +3051,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
@@ -3053,9 +3060,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;
@@ -3075,6 +3082,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
@@ -3083,7 +3091,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();
@@ -3099,7 +3107,7 @@ function setAlignment(editor, alignment) {
         else {
             alignText(editor, alignment);
         }
-    }, "Format" /* Format */);
+    }, 'rotateElement');
 }
 exports.default = setAlignment;
 /**
@@ -3154,7 +3162,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');
 }
 
 
@@ -3185,7 +3193,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;
 
@@ -3203,6 +3211,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
@@ -3211,13 +3220,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;
 
@@ -3246,7 +3255,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;
 
@@ -3280,7 +3289,7 @@ function setFontSize(editor, fontSize) {
         if (lineHeight != 'normal') {
             element.style.lineHeight = 'normal';
         }
-    });
+    }, 'setFontSize');
 }
 exports.default = setFontSize;
 
@@ -3297,6 +3306,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.
@@ -3308,11 +3318,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;
 
@@ -3385,7 +3395,7 @@ function setIndentation(editor, indentation) {
             return false;
         }
         return true;
-    });
+    }, 'setIndentation');
 }
 exports.default = setIndentation;
 function indent(region, blocks) {
@@ -3431,6 +3441,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
@@ -3440,7 +3451,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]) {
@@ -3450,7 +3461,7 @@ function setOrderedListNumbering(editor, separator, startNumber) {
                 vList.writeBack();
             }
         }
-    }, "Format" /* Format */);
+    }, 'setOrderedListNumbering');
 }
 exports.default = setOrderedListNumbering;
 
@@ -3485,7 +3496,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;
 
@@ -3521,7 +3532,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;
 
@@ -3548,7 +3559,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;
 
@@ -3576,7 +3587,7 @@ var toggleListType_1 = __webpack_require__(/*! ../utils/toggleListType */ "./pac
  * @param listStyle (Optional) the style of the bullet list. If not defined, the style will be set to disc.
  */
 function toggleBullet(editor, listStyle) {
-    (0, toggleListType_1.default)(editor, 2 /* Unordered */, undefined /* startNumber */, false /* includeSiblingLists */, listStyle);
+    (0, toggleListType_1.default)(editor, 2 /* Unordered */, undefined /* startNumber */, false /* includeSiblingLists */, undefined /** orderedStyle  */, listStyle);
 }
 exports.default = toggleBullet;
 
@@ -3617,7 +3628,7 @@ function toggleCodeBlock(editor, styler) {
                 (0, roosterjs_editor_dom_1.unwrap)(parent_1);
             }
         }).length == 0;
-    });
+    }, 'toggleCodeBlock');
 }
 exports.default = toggleCodeBlock;
 
@@ -3634,6 +3645,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
@@ -3644,7 +3656,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) {
@@ -3671,7 +3683,7 @@ function toggleHeader(editor, level) {
             }
             editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, "<H" + level + ">");
         }
-    }, "Format" /* Format */);
+    }, 'toggleHeader');
 }
 exports.default = toggleHeader;
 
@@ -3698,7 +3710,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;
 
@@ -3754,7 +3766,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;
 
@@ -3783,7 +3795,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;
 
@@ -3812,7 +3824,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;
 
@@ -3839,7 +3851,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;
 
@@ -3949,6 +3961,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';
@@ -3959,7 +3972,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')) {
@@ -3969,7 +3982,7 @@ function applyCellShading(editor, color) {
                     region.rootNode.style.backgroundColor;
             }
         });
-    });
+    }, 'applyCellShading');
 }
 exports.default = applyCellShading;
 
@@ -3986,6 +3999,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.
@@ -3995,7 +4009,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);
@@ -4004,7 +4018,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;
@@ -4052,6 +4066,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
@@ -4062,14 +4077,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;
@@ -4087,6 +4102,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
@@ -4115,7 +4131,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();
@@ -4123,7 +4139,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) {
@@ -4151,6 +4167,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';
 /**
@@ -4159,7 +4176,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) {
@@ -4192,7 +4209,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) {
@@ -4211,7 +4228,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;
@@ -4238,7 +4255,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);
@@ -4246,7 +4263,7 @@ function applyListItemStyleWrap(editor, styleName, formatCallback) {
         if (parent && parentNodes.indexOf(parent) === -1) {
             parentNodes.push(parent);
         }
-    });
+    }, apiName);
     applyStyleToListItems(parentNodes, [styleName]);
 }
 exports.default = applyListItemStyleWrap;
@@ -4278,14 +4295,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);
@@ -4298,7 +4316,7 @@ function blockFormat(editor, callback, beforeRunCallback) {
         else if (selection.type == 1 /* TableSelection */) {
             editor.select(selection.table, selection.coordinates);
         }
-    }, "Format" /* Format */);
+    }, apiName);
 }
 exports.default = blockFormat;
 
@@ -4326,7 +4344,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);
@@ -4347,7 +4365,7 @@ function blockWrap(editor, wrapFunction, beforeRunCallback) {
             }
             wrapFunction(nodes);
         }
-    }, beforeRunCallback);
+    }, beforeRunCallback, apiName);
 }
 exports.default = blockWrap;
 
@@ -4407,6 +4425,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
@@ -4418,7 +4437,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();
@@ -4426,7 +4445,7 @@ function execCommand(editor, command) {
         editor.addUndoSnapshot();
         var formatState = editor.getPendableFormatState(false /* forceGetStateFromDom */);
         formatter();
-        var formatName = Object.keys(roosterjs_editor_dom_1.PendableFormatCommandMap).filter(function (x) { return roosterjs_editor_dom_1.PendableFormatCommandMap[x] == command; })[0];
+        var formatName = (0, roosterjs_editor_dom_1.getObjectKeys)(roosterjs_editor_dom_1.PendableFormatCommandMap).filter(function (x) { return roosterjs_editor_dom_1.PendableFormatCommandMap[x] == command; })[0];
         if (formatName) {
             formatState[formatName] = !formatState[formatName];
             editor.triggerPluginEvent(13 /* PendingFormatStateChanged */, {
@@ -4435,7 +4454,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 */) {
@@ -4447,12 +4466,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":
@@ -4483,9 +4530,10 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param listType The list type to toggle
  * @param startNumber (Optional) Start number of the list
  * @param includeSiblingLists Sets wether the operation should include Sibling Lists, by default true
- * @param listStyle (Optional) the style of an ordered or unordered list. If If not defined, the style will be set to disc or decimal.
+ * @param orderedStyle (Optional) the style of an ordered. If not defined, the style will be set to decimal.
+ * @param unorderedStyle (Optional) the style of an unordered list. If not defined, the style will be set to disc.
  */
-function toggleListType(editor, listType, startNumber, includeSiblingLists, listStyle) {
+function toggleListType(editor, listType, startNumber, includeSiblingLists, orderedStyle, unorderedStyle) {
     if (includeSiblingLists === void 0) { includeSiblingLists = true; }
     (0, blockFormat_1.default)(editor, function (region, start, end, chains) {
         var _a;
@@ -4495,12 +4543,12 @@ function toggleListType(editor, listType, startNumber, includeSiblingLists, list
             : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, includeSiblingLists);
         if (vList) {
             vList.changeListType(start, end, listType);
-            if (listStyle && editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
-                vList.setListStyleType(listStyle);
+            if (editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
+                vList.setListStyleType(orderedStyle, unorderedStyle);
             }
             vList.writeBack();
         }
-    });
+    }, undefined /* beforeRunCallback */, 'toggleListType');
 }
 exports.default = toggleListType;
 
@@ -4538,8 +4586,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;
@@ -4566,6 +4616,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*/);
     }
@@ -4606,6 +4657,7 @@ function addUndoSnapshotInternal(core, canUndoByBackspace) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.attachDomEvent = void 0;
+var lib_1 = __webpack_require__(/*! roosterjs-editor-dom/lib */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * @internal
  * Attach a DOM event to the editor content DIV
@@ -4615,7 +4667,7 @@ exports.attachDomEvent = void 0;
  * @param beforeDispatch Optional callback function to be invoked when the DOM event is triggered before trigger plugin event
  */
 var attachDomEvent = function (core, eventMap) {
-    var disposers = Object.keys(eventMap || {}).map(function (eventName) {
+    var disposers = (0, lib_1.getObjectKeys)(eventMap || {}).map(function (eventName) {
         var _a = extractHandler(eventMap[eventName]), pluginEventType = _a.pluginEventType, beforeDispatch = _a.beforeDispatch;
         var onEvent = function (event) {
             if (beforeDispatch) {
@@ -4724,11 +4776,13 @@ exports.coreApiMap = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPasteFragment = void 0;
+exports.transformTabCharacters = exports.createPasteFragment = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var START_FRAGMENT = '<!--StartFragment-->';
 var END_FRAGMENT = '<!--EndFragment-->';
 var NBSP_HTML = '\u00A0';
+var ENSP_HTML = '\u2002';
+var TAB_SPACES = 6;
 /**
  * @internal
  * Create a DocumentFragment for paste from a ClipboardData
@@ -4819,6 +4873,9 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
                 .replace(/^ /g, NBSP_HTML)
                 .replace(/\r/g, '')
                 .replace(/ {2}/g, ' ' + NBSP_HTML);
+            if (line.includes('\t')) {
+                line = transformTabCharacters(line, index === 0 ? position.offset : 0);
+            }
             var textNode = document.createTextNode(line);
             // There are 3 scenarios:
             // 1. Single line: Paste as it is
@@ -4848,6 +4905,26 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
     return fragment;
 };
 exports.createPasteFragment = createPasteFragment;
+/**
+ * @internal
+ * Transform \t characters into EN SPACE characters
+ * @param input string NOT containing \n characters
+ * @example t("\thello", 2) => "&ensp;&ensp;&ensp;&ensp;hello"
+ */
+function transformTabCharacters(input, initialOffset) {
+    if (initialOffset === void 0) { initialOffset = 0; }
+    var line = input;
+    var tIndex;
+    while ((tIndex = line.indexOf('\t')) != -1) {
+        var lineBefore = line.slice(0, tIndex);
+        var lineAfter = line.slice(tIndex + 1);
+        var tabCount = TAB_SPACES - ((lineBefore.length + initialOffset) % TAB_SPACES);
+        var tabStr = Array(tabCount).fill(ENSP_HTML).join('');
+        line = lineBefore + tabStr + lineAfter;
+    }
+    return line;
+}
+exports.transformTabCharacters = transformTabCharacters;
 function getCurrentFormat(core, node) {
     var pendableFormat = core.api.getPendableFormatState(core, true /** forceGetStateFromDOM*/);
     var styleBasedFormat = core.api.getStyleBasedFormatState(core, node);
@@ -4909,6 +4986,10 @@ var ensureTypeInContainer = function (core, position, keyboardEvent) {
     var formatNode;
     if (block) {
         formatNode = block.collapseToSingleElement();
+        if ((0, roosterjs_editor_dom_1.isNodeEmpty)(formatNode, false /* trimContent */, true /* shouldCountBrAsVisible */)) {
+            var brEl = formatNode.ownerDocument.createElement('br');
+            formatNode.append(brEl);
+        }
         // if the block is empty, apply default format
         // Otherwise, leave it as it is as we don't want to change the style for existing data
         // unless the block was just created by the keyboard event (e.g. ctrl+a & start typing)
@@ -5152,7 +5233,7 @@ function queryCommandStateFromDOM(core, currentPosition) {
         var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(node);
         var style = node.nodeType == 1 /* Element */ && node.style;
         if (tag && style) {
-            Object.keys(PendableStyleCheckers).forEach(function (key) {
+            (0, roosterjs_editor_dom_1.getObjectKeys)(PendableStyleCheckers).forEach(function (key) {
                 if (!(pendableKeys.indexOf(key) >= 0)) {
                     formatState[key] = formatState[key] || PendableStyleCheckers[key](tag, style);
                     if (CssFalsyCheckers[key](style)) {
@@ -5599,7 +5680,7 @@ function restorePendingFormatState(core) {
     if (pendingFormatState.pendableFormatState) {
         var document_1 = contentDiv.ownerDocument;
         var formatState_1 = (0, roosterjs_editor_dom_1.getPendableFormatState)(document_1);
-        Object.keys(roosterjs_editor_dom_1.PendableFormatCommandMap).forEach(function (key) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(roosterjs_editor_dom_1.PendableFormatCommandMap).forEach(function (key) {
             if (!!pendingFormatState.pendableFormatState[key] != formatState_1[key]) {
                 document_1.execCommand(roosterjs_editor_dom_1.PendableFormatCommandMap[key], false, null);
             }
@@ -6163,7 +6244,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 */),
@@ -6176,7 +6257,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 || [],
@@ -6785,7 +6866,7 @@ var EntityPlugin = /** @class */ (function () {
             (0, roosterjs_editor_dom_1.commitEntity)(wrapper, type, isReadonly, entity.id); // Use entity.id here because it is newly updated
             _this.handleNewEntity(entity);
         });
-        Object.keys(this.state.shadowEntityCache).forEach(function (id) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(this.state.shadowEntityCache).forEach(function (id) {
             _this.triggerEvent(_this.state.shadowEntityCache[id], 6 /* Overwrite */);
             delete _this.state.shadowEntityCache[id];
         });
@@ -7072,7 +7153,7 @@ var LifecyclePlugin = /** @class */ (function () {
     LifecyclePlugin.prototype.dispose = function () {
         var _this = this;
         this.editor.triggerPluginEvent(12 /* BeforeDispose */, {}, true /*broadcast*/);
-        Object.keys(this.state.customData).forEach(function (key) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(this.state.customData).forEach(function (key) {
             var data = _this.state.customData[key];
             if (data && data.disposer) {
                 data.disposer(data.value);
@@ -7107,7 +7188,7 @@ var LifecyclePlugin = /** @class */ (function () {
     };
     LifecyclePlugin.prototype.adjustBrowserBehavior = function () {
         var _this = this;
-        Object.keys(COMMANDS).forEach(function (command) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(COMMANDS).forEach(function (command) {
             // Catch any possible exception since this should not block the initialization of editor
             try {
                 _this.editor.getDocument().execCommand(command, false, COMMANDS[command]);
@@ -7125,7 +7206,7 @@ var LifecyclePlugin = /** @class */ (function () {
                 baseFormat.textColors = DARK_MODE_DEFAULT_FORMAT.textColors;
             }
         }
-        if (baseFormat && Object.keys(baseFormat).length === 0) {
+        if (baseFormat && (0, roosterjs_editor_dom_1.getObjectKeys)(baseFormat).length === 0) {
             return;
         }
         var _b = baseFormat || {}, fontFamily = _b.fontFamily, fontSize = _b.fontSize, textColor = _b.textColor, textColors = _b.textColors, backgroundColor = _b.backgroundColor, backgroundColors = _b.backgroundColors, bold = _b.bold, italic = _b.italic, underline = _b.underline;
@@ -7334,6 +7415,7 @@ exports.default = NormalizeTablePlugin;
 function normalizeTables(tables) {
     var isDOMChanged = false;
     tables.forEach(function (table) {
+        var _a;
         var tbody = null;
         for (var child = table.firstChild; child; child = child.nextSibling) {
             var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(child);
@@ -7350,7 +7432,7 @@ function normalizeTables(tables) {
                 case 'TBODY':
                     if (tbody) {
                         (0, roosterjs_editor_dom_1.moveChildNodes)(tbody, child, true /*keepExistingChildren*/);
-                        child.parentNode.removeChild(child);
+                        (_a = child.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(child);
                         child = tbody;
                         isDOMChanged = true;
                     }
@@ -7358,16 +7440,20 @@ function normalizeTables(tables) {
                         tbody = child;
                     }
                     break;
-                case 'COLGROUP':
-                    if (table.tHead) {
-                        table.tHead.prepend(child);
-                    }
-                    break;
                 default:
                     tbody = null;
                     break;
             }
         }
+        var colgroups = table.querySelectorAll('colgroup');
+        var thead = table.querySelector('thead');
+        if (thead) {
+            colgroups.forEach(function (colgroup) {
+                if (!thead.contains(colgroup)) {
+                    thead.appendChild(colgroup);
+                }
+            });
+        }
     });
     return isDOMChanged;
 }
@@ -7838,8 +7924,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
 var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugins */ "./packages/roosterjs-editor-core/lib/corePlugins/createCorePlugins.ts");
+var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * RoosterJs core editor class
@@ -7861,7 +7947,7 @@ var Editor = /** @class */ (function () {
         // 2. Store options values to local variables
         var corePlugins = (0, createCorePlugins_1.default)(contentDiv, options);
         var plugins = [];
-        Object.keys(corePlugins).forEach(function (name) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(corePlugins).forEach(function (name) {
             if (name == '_placeholder') {
                 (0, roosterjs_editor_dom_1.arrayPush)(plugins, options.plugins);
             }
@@ -8930,13 +9016,15 @@ exports.default = getFirstLastBlockElement;
 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__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.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
@@ -8945,19 +9033,27 @@ var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterj
  *   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();
+    }
+}
 
 
 /***/ }),
@@ -9118,7 +9214,7 @@ function getAllowedCustomType(type, allowedCustomPasteType) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var readFile_1 = __webpack_require__(/*! ../utils/readFile */ "./packages/roosterjs-editor-dom/lib/utils/readFile.ts");
-var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 /**
  * Extract clipboard items to be a ClipboardData object for IE
  * @param dataTransfer The clipboard items retrieve from a DataTransfer object
@@ -9911,17 +10007,19 @@ var Position_1 = __webpack_require__(/*! ../selection/Position */ "./packages/ro
 var PositionContentSearcher_1 = __webpack_require__(/*! ../contentTraverser/PositionContentSearcher */ "./packages/roosterjs-editor-dom/lib/contentTraverser/PositionContentSearcher.ts");
 var queryElements_1 = __webpack_require__(/*! ../utils/queryElements */ "./packages/roosterjs-editor-dom/lib/utils/queryElements.ts");
 var splitTextNode_1 = __webpack_require__(/*! ../utils/splitTextNode */ "./packages/roosterjs-editor-dom/lib/utils/splitTextNode.ts");
-var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 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.
@@ -10061,6 +10159,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
@@ -10094,7 +10212,7 @@ function safeRemove(node) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var arrayPush_1 = __webpack_require__(/*! ../utils/arrayPush */ "./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts");
+var arrayPush_1 = __webpack_require__(/*! ../jsUtils/arrayPush */ "./packages/roosterjs-editor-dom/lib/jsUtils/arrayPush.ts");
 var collapseNodesInRegion_1 = __webpack_require__(/*! ../region/collapseNodesInRegion */ "./packages/roosterjs-editor-dom/lib/region/collapseNodesInRegion.ts");
 var getRegionsFromRange_1 = __webpack_require__(/*! ../region/getRegionsFromRange */ "./packages/roosterjs-editor-dom/lib/region/getRegionsFromRange.ts");
 var getSelectionRangeInRegion_1 = __webpack_require__(/*! ../region/getSelectionRangeInRegion */ "./packages/roosterjs-editor-dom/lib/region/getSelectionRangeInRegion.ts");
@@ -10487,12 +10605,13 @@ exports.default = isModifierKey;
 Object.defineProperty(exports, "__esModule", { value: true });
 var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
 var getInheritableStyles_1 = __webpack_require__(/*! ./getInheritableStyles */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/getInheritableStyles.ts");
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 var getPredefinedCssForElement_1 = __webpack_require__(/*! ./getPredefinedCssForElement */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/getPredefinedCssForElement.ts");
 var getStyles_1 = __webpack_require__(/*! ../style/getStyles */ "./packages/roosterjs-editor-dom/lib/style/getStyles.ts");
 var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var setStyles_1 = __webpack_require__(/*! ../style/setStyles */ "./packages/roosterjs-editor-dom/lib/style/setStyles.ts");
-var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var cloneObject_1 = __webpack_require__(/*! ./cloneObject */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/cloneObject.ts");
 var getAllowedValues_1 = __webpack_require__(/*! ./getAllowedValues */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/getAllowedValues.ts");
 /**
@@ -10699,7 +10818,7 @@ var HtmlSanitizer = /** @class */ (function () {
     HtmlSanitizer.prototype.preprocessCss = function (element, thisStyle) {
         var predefinedStyles = (0, getPredefinedCssForElement_1.default)(element, this.additionalPredefinedCssForElement);
         if (predefinedStyles) {
-            Object.keys(predefinedStyles).forEach(function (name) {
+            (0, getObjectKeys_1.default)(predefinedStyles).forEach(function (name) {
                 thisStyle[name] = predefinedStyles[name];
             });
         }
@@ -10707,7 +10826,7 @@ var HtmlSanitizer = /** @class */ (function () {
     HtmlSanitizer.prototype.processCss = function (element, thisStyle, context) {
         var _this = this;
         var styles = (0, getStyles_1.default)(element);
-        Object.keys(styles).forEach(function (name) {
+        (0, getObjectKeys_1.default)(styles).forEach(function (name) {
             var value = styles[name];
             var callback = _this.styleCallbacks[name];
             var isInheritable = thisStyle[name] != undefined;
@@ -10822,13 +10941,14 @@ exports.default = chainSanitizerCallback;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cloneObject = void 0;
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 function nativeClone(source, existingObj) {
     return Object.assign(existingObj || {}, source);
 }
 function customClone(source, existingObj) {
     var result = existingObj || {};
     if (source) {
-        for (var _i = 0, _a = Object.keys(source); _i < _a.length; _i++) {
+        for (var _i = 0, _a = (0, getObjectKeys_1.default)(source); _i < _a.length; _i++) {
             var key = _a[_i];
             result[key] = source[key];
         }
@@ -10903,6 +11023,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyleCallbacks = exports.getDefaultStyleValues = exports.getAllowedCssClassesRegex = exports.getAllowedAttributes = exports.getTagReplacement = void 0;
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 var cloneObject_1 = __webpack_require__(/*! ./cloneObject */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/cloneObject.ts");
 var HTML_TAG_REPLACEMENT = {
     // Allowed tags
@@ -11087,7 +11208,7 @@ var ALLOWED_CSS_CLASSES = [];
 function getTagReplacement(additionalReplacements) {
     var result = __assign({}, HTML_TAG_REPLACEMENT);
     var replacements = additionalReplacements || {};
-    Object.keys(replacements).forEach(function (key) {
+    (0, getObjectKeys_1.default)(replacements).forEach(function (key) {
         if (key) {
             result[key.toLowerCase()] = replacements[key];
         }
@@ -11257,9 +11378,9 @@ exports.default = getPredefinedCssForElement;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.toArray = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.arrayPush = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
-exports.validate = exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = exports.VTable = exports.moveChildNodes = void 0;
-exports.removeMetadata = exports.setMetadata = exports.getMetadata = exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = exports.createBooleanDefinition = exports.createNumberDefinition = void 0;
+exports.VTable = exports.moveChildNodes = exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
+exports.createBooleanDefinition = exports.createNumberDefinition = exports.validate = exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = void 0;
+exports.toArray = exports.getObjectKeys = exports.arrayPush = exports.removeMetadata = exports.setMetadata = exports.getMetadata = exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = void 0;
 var getBlockElementAtNode_1 = __webpack_require__(/*! ./blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
 Object.defineProperty(exports, "getBlockElementAtNode", { enumerable: true, get: function () { return getBlockElementAtNode_1.default; } });
 var getFirstLastBlockElement_1 = __webpack_require__(/*! ./blockElements/getFirstLastBlockElement */ "./packages/roosterjs-editor-dom/lib/blockElements/getFirstLastBlockElement.ts");
@@ -11286,8 +11407,6 @@ var extractClipboardItems_1 = __webpack_require__(/*! ./clipboard/extractClipboa
 Object.defineProperty(exports, "extractClipboardItems", { enumerable: true, get: function () { return extractClipboardItems_1.default; } });
 var extractClipboardItemsForIE_1 = __webpack_require__(/*! ./clipboard/extractClipboardItemsForIE */ "./packages/roosterjs-editor-dom/lib/clipboard/extractClipboardItemsForIE.ts");
 Object.defineProperty(exports, "extractClipboardItemsForIE", { enumerable: true, get: function () { return extractClipboardItemsForIE_1.default; } });
-var arrayPush_1 = __webpack_require__(/*! ./utils/arrayPush */ "./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts");
-Object.defineProperty(exports, "arrayPush", { enumerable: true, get: function () { return arrayPush_1.default; } });
 var Browser_1 = __webpack_require__(/*! ./utils/Browser */ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts");
 Object.defineProperty(exports, "Browser", { enumerable: true, get: function () { return Browser_1.Browser; } });
 Object.defineProperty(exports, "getBrowserInfo", { enumerable: true, get: function () { return Browser_1.getBrowserInfo; } });
@@ -11338,8 +11457,6 @@ var splitTextNode_1 = __webpack_require__(/*! ./utils/splitTextNode */ "./packag
 Object.defineProperty(exports, "splitTextNode", { enumerable: true, get: function () { return splitTextNode_1.default; } });
 var normalizeRect_1 = __webpack_require__(/*! ./utils/normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 Object.defineProperty(exports, "normalizeRect", { enumerable: true, get: function () { return normalizeRect_1.default; } });
-var toArray_1 = __webpack_require__(/*! ./utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
-Object.defineProperty(exports, "toArray", { enumerable: true, get: function () { return toArray_1.default; } });
 var safeInstanceOf_1 = __webpack_require__(/*! ./utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 Object.defineProperty(exports, "safeInstanceOf", { enumerable: true, get: function () { return safeInstanceOf_1.default; } });
 var readFile_1 = __webpack_require__(/*! ./utils/readFile */ "./packages/roosterjs-editor-dom/lib/utils/readFile.ts");
@@ -11459,6 +11576,12 @@ var metadata_1 = __webpack_require__(/*! ./metadata/metadata */ "./packages/roos
 Object.defineProperty(exports, "getMetadata", { enumerable: true, get: function () { return metadata_1.getMetadata; } });
 Object.defineProperty(exports, "setMetadata", { enumerable: true, get: function () { return metadata_1.setMetadata; } });
 Object.defineProperty(exports, "removeMetadata", { enumerable: true, get: function () { return metadata_1.removeMetadata; } });
+var arrayPush_1 = __webpack_require__(/*! ./jsUtils/arrayPush */ "./packages/roosterjs-editor-dom/lib/jsUtils/arrayPush.ts");
+Object.defineProperty(exports, "arrayPush", { enumerable: true, get: function () { return arrayPush_1.default; } });
+var getObjectKeys_1 = __webpack_require__(/*! ./jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
+Object.defineProperty(exports, "getObjectKeys", { enumerable: true, get: function () { return getObjectKeys_1.default; } });
+var toArray_1 = __webpack_require__(/*! ./jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
+Object.defineProperty(exports, "toArray", { enumerable: true, get: function () { return toArray_1.default; } });
 
 
 /***/ }),
@@ -12095,6 +12218,70 @@ function getInlineElementBeforeAfter(root, position, isAfter) {
 exports.getInlineElementBeforeAfter = getInlineElementBeforeAfter;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/jsUtils/arrayPush.ts":
+/*!****************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/jsUtils/arrayPush.ts ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * A type-safe wrapper for Array.prototype.push.apply()
+ * @param mainArray The main array to push items into
+ * @param itemsArray The items to push to main array
+ */
+function arrayPush(mainArray, itemsArray) {
+    Array.prototype.push.apply(mainArray, itemsArray);
+}
+exports.default = arrayPush;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts":
+/*!********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts ***!
+  \********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Provide a strong-typed version of Object.keys()
+ * @param obj The source object
+ * @returns Array of keys
+ */
+function getObjectKeys(obj) {
+    return Object.keys(obj);
+}
+exports.default = getObjectKeys;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts":
+/*!**************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts ***!
+  \**************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+function toArray(collection) {
+    return [].slice.call(collection);
+}
+exports.default = toArray;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/list/VList.ts":
@@ -12125,11 +12312,10 @@ var Position_1 = __webpack_require__(/*! ../selection/Position */ "./packages/ro
 var queryElements_1 = __webpack_require__(/*! ../utils/queryElements */ "./packages/roosterjs-editor-dom/lib/utils/queryElements.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var splitParentNode_1 = __webpack_require__(/*! ../utils/splitParentNode */ "./packages/roosterjs-editor-dom/lib/utils/splitParentNode.ts");
-var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 var VListItem_1 = __webpack_require__(/*! ./VListItem */ "./packages/roosterjs-editor-dom/lib/list/VListItem.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
-var definitionCreators_1 = __webpack_require__(/*! ../metadata/definitionCreators */ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts");
 var metadata_1 = __webpack_require__(/*! ../metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
 /**
  * Represent a bullet or a numbering list
@@ -12386,10 +12572,13 @@ var VList = /** @class */ (function () {
     /**
      * Change list style of the given range of this list.
      * If some of the items are not real list item yet, this will make them to be list item with given style
-     * @param targetStyle Target list style
+     * @param orderedStyle The style of ordered list
+     * @param unorderedStyle The style of unordered list
      */
-    VList.prototype.setListStyleType = function (targetStyle) {
-        (0, metadata_1.setMetadata)(this.rootList, targetStyle, (0, definitionCreators_1.createNumberDefinition)());
+    VList.prototype.setListStyleType = function (orderedStyle, unorderedStyle) {
+        var style = (0, metadata_1.getMetadata)(this.rootList, VListItem_1.ListStyleDefinitionMetadata);
+        var styleMetadata = createListStyleMetadata(style, orderedStyle, unorderedStyle);
+        (0, metadata_1.setMetadata)(this.rootList, styleMetadata, VListItem_1.ListStyleDefinitionMetadata);
     };
     /**
      * Append a new item to this VList
@@ -12545,6 +12734,19 @@ function moveLiToList(li) {
         (0, unwrap_1.default)(li.parentNode);
     }
 }
+function getValidValue() {
+    var values = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        values[_i] = arguments[_i];
+    }
+    return values.filter(function (x) { return x !== undefined; })[0];
+}
+function createListStyleMetadata(style, orderedStyle, unorderedStyle) {
+    return {
+        orderedStyleType: getValidValue(orderedStyle, style === null || style === void 0 ? void 0 : style.orderedStyleType, 1 /* Decimal */),
+        unorderedStyleType: getValidValue(unorderedStyle, style === null || style === void 0 ? void 0 : style.unorderedStyleType, 1 /* Disc */),
+    };
+}
 
 
 /***/ }),
@@ -12559,7 +12761,7 @@ function moveLiToList(li) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var arrayPush_1 = __webpack_require__(/*! ../utils/arrayPush */ "./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts");
+var arrayPush_1 = __webpack_require__(/*! ../jsUtils/arrayPush */ "./packages/roosterjs-editor-dom/lib/jsUtils/arrayPush.ts");
 var getRootListNode_1 = __webpack_require__(/*! ./getRootListNode */ "./packages/roosterjs-editor-dom/lib/list/getRootListNode.ts");
 var isNodeAfter_1 = __webpack_require__(/*! ../utils/isNodeAfter */ "./packages/roosterjs-editor-dom/lib/utils/isNodeAfter.ts");
 var isNodeInRegion_1 = __webpack_require__(/*! ../region/isNodeInRegion */ "./packages/roosterjs-editor-dom/lib/region/isNodeInRegion.ts");
@@ -12724,6 +12926,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListStyleDefinitionMetadata = void 0;
 var contains_1 = __webpack_require__(/*! ../utils/contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
 var getListTypeFromNode_1 = __webpack_require__(/*! ./getListTypeFromNode */ "./packages/roosterjs-editor-dom/lib/list/getListTypeFromNode.ts");
 var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
@@ -12733,13 +12936,23 @@ var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./pac
 var setBulletListMarkers_1 = __webpack_require__(/*! ./setBulletListMarkers */ "./packages/roosterjs-editor-dom/lib/list/setBulletListMarkers.ts");
 var setListItemStyle_1 = __webpack_require__(/*! ./setListItemStyle */ "./packages/roosterjs-editor-dom/lib/list/setListItemStyle.ts");
 var setNumberingListMarkers_1 = __webpack_require__(/*! ./setNumberingListMarkers */ "./packages/roosterjs-editor-dom/lib/list/setNumberingListMarkers.ts");
-var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
+var definitionCreators_1 = __webpack_require__(/*! ../metadata/definitionCreators */ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts");
 var metadata_1 = __webpack_require__(/*! ../metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
 var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
+var unorderedListStyles = ['disc', 'circle', 'square'];
 var MARGIN_BASE = '0in 0in 0in 0.5in';
 var NEGATIVE_MARGIN = '-.25in';
+/**
+ * @internal
+ * The definition for the number of BulletListType or NumberingListType
+ */
+exports.ListStyleDefinitionMetadata = (0, definitionCreators_1.createObjectDefinition)({
+    orderedStyleType: (0, definitionCreators_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 20 /* Max */),
+    unorderedStyleType: (0, definitionCreators_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 7 /* Max */),
+}, true /** isOptional */, true /** allowNull */);
 /**
  * !!! Never directly create instance of this class. It should be created within VList class !!!
  *
@@ -12903,15 +13116,19 @@ var VListItem = /** @class */ (function () {
      * @param index the list item index
      */
     VListItem.prototype.applyListStyle = function (rootList, index) {
-        var style = (0, metadata_1.getMetadata)(rootList) ? (0, metadata_1.getMetadata)(rootList) : undefined;
+        var style = (0, metadata_1.getMetadata)(rootList, exports.ListStyleDefinitionMetadata);
+        // The list just need to be styled if it is at top level, so the listType length for this Vlist must be 2.
+        var isFirstLevel = this.listTypes.length < 3;
         if (style) {
-            if (this.listTypes.length < 3) {
-                if (this.listTypes[1] === 2 /* Unordered */) {
-                    (0, setBulletListMarkers_1.default)(this.node, style);
-                }
-                else if (this.listTypes[1] === 1 /* Ordered */) {
-                    (0, setNumberingListMarkers_1.default)(this.node, style, index);
-                }
+            if (isFirstLevel &&
+                this.listTypes[1] === 2 /* Unordered */ &&
+                style.unorderedStyleType) {
+                (0, setBulletListMarkers_1.default)(this.node, style.unorderedStyleType);
+            }
+            else if (isFirstLevel &&
+                this.listTypes[1] === 1 /* Ordered */ &&
+                style.orderedStyleType) {
+                (0, setNumberingListMarkers_1.default)(this.node, style.orderedStyleType, index);
             }
             else {
                 this.node.style.removeProperty('list-style-type');
@@ -13027,9 +13244,19 @@ function createListElement(newRoot, listType, nextLevel, originalRoot) {
         // Can't be reused, can't clone, let's create a new one
         result = doc.createElement(listType == 1 /* Ordered */ ? 'ol' : 'ul');
     }
+    // Always maintain the metadata saved in the list
+    if (originalRoot && nextLevel == 1 && listType != (0, getListTypeFromNode_1.default)(originalRoot)) {
+        var style = (0, metadata_1.getMetadata)(originalRoot, exports.ListStyleDefinitionMetadata);
+        if (style) {
+            (0, metadata_1.setMetadata)(result, style, exports.ListStyleDefinitionMetadata);
+        }
+    }
     if (listType == 1 /* Ordered */ && nextLevel > 1) {
         result.style.setProperty('list-style-type', orderListStyles[(nextLevel - 1) % orderListStyles.length]);
     }
+    if (listType == 2 /* Unordered */ && nextLevel > 1) {
+        result.style.setProperty('list-style-type', unorderedListStyles[(nextLevel - 1) % unorderedListStyles.length]);
+    }
     return result;
 }
 function wrapIfNotBlockNode(nodes, checkFirst, checkLast) {
@@ -13117,6 +13344,7 @@ exports.default = convertDecimalsToAlpha;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 var RomanValues = {
     M: 1000,
     CM: 900,
@@ -13141,7 +13369,7 @@ var RomanValues = {
  */
 function convertDecimalsToRoman(decimal, isLowerCase) {
     var romanValue = '';
-    for (var _i = 0, _a = Object.keys(RomanValues); _i < _a.length; _i++) {
+    for (var _i = 0, _a = (0, getObjectKeys_1.default)(RomanValues); _i < _a.length; _i++) {
         var i = _a[_i];
         var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
         decimal = decimal - timesRomanCharAppear * RomanValues[i];
@@ -13171,7 +13399,7 @@ var isNodeInRegion_1 = __webpack_require__(/*! ../region/isNodeInRegion */ "./pa
 var Position_1 = __webpack_require__(/*! ../selection/Position */ "./packages/roosterjs-editor-dom/lib/selection/Position.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var shouldSkipNode_1 = __webpack_require__(/*! ../utils/shouldSkipNode */ "./packages/roosterjs-editor-dom/lib/utils/shouldSkipNode.ts");
-var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var VList_1 = __webpack_require__(/*! ./VList */ "./packages/roosterjs-editor-dom/lib/list/VList.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
 var getLeafSibling_1 = __webpack_require__(/*! ../utils/getLeafSibling */ "./packages/roosterjs-editor-dom/lib/utils/getLeafSibling.ts");
@@ -13374,17 +13602,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function setBulletListMarkers(li, listStyleType) {
     var marker = bulletListStyle[listStyleType];
-    var isDiscOrSquare = listStyleType === 0 /* Disc */ || listStyleType === 2 /* Square */;
+    var isDiscOrSquare = listStyleType === 1 /* Disc */ || listStyleType === 3 /* Square */;
     li.style.listStyleType = isDiscOrSquare ? marker : "\"" + marker + "\"";
 }
 exports.default = setBulletListMarkers;
 var bulletListStyle = (_a = {},
-    _a[0 /* Disc */] = 'disc',
-    _a[2 /* Square */] = 'square',
-    _a[1 /* Dash */] = '- ',
-    _a[4 /* LongArrow */] = '→ ',
-    _a[3 /* ShortArrow */] = '➢ ',
-    _a[5 /* UnfilledArrow */] = '➪ ',
+    _a[1 /* Disc */] = 'disc',
+    _a[3 /* Square */] = 'square',
+    _a[2 /* Dash */] = '- ',
+    _a[5 /* LongArrow */] = '→ ',
+    _a[4 /* ShortArrow */] = '➢ ',
+    _a[6 /* UnfilledArrow */] = '➪ ',
+    _a[7 /* Hyphen */] = '— ',
     _a);
 
 
@@ -13490,95 +13719,95 @@ function setNumberingListMarkers(li, listStyleType, level) {
 }
 exports.default = setNumberingListMarkers;
 var numberingListStyle = (_a = {},
-    _a[0 /* Decimal */] = {
+    _a[1 /* Decimal */] = {
         markerType: MarkerTypes.Decimal,
         markerSeparator: '. ',
     },
-    _a[1 /* DecimalDash */] = {
+    _a[2 /* DecimalDash */] = {
         markerType: MarkerTypes.Decimal,
         markerSeparator: '- ',
     },
-    _a[2 /* DecimalParenthesis */] = {
+    _a[3 /* DecimalParenthesis */] = {
         markerType: MarkerTypes.Decimal,
         markerSeparator: ') ',
     },
-    _a[3 /* DecimalDoubleParenthesis */] = {
+    _a[4 /* DecimalDoubleParenthesis */] = {
         markerType: MarkerTypes.Decimal,
         markerSeparator: ') ',
         markerSecondSeparator: '(',
     },
-    _a[4 /* LowerAlpha */] = {
+    _a[5 /* LowerAlpha */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: '. ',
         lowerCase: true,
     },
-    _a[7 /* LowerAlphaDash */] = {
+    _a[8 /* LowerAlphaDash */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: '- ',
         lowerCase: true,
     },
-    _a[5 /* LowerAlphaParenthesis */] = {
+    _a[6 /* LowerAlphaParenthesis */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: ') ',
         lowerCase: true,
     },
-    _a[6 /* LowerAlphaDoubleParenthesis */] = {
+    _a[7 /* LowerAlphaDoubleParenthesis */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: ') ',
         markerSecondSeparator: '(',
         lowerCase: true,
     },
-    _a[8 /* UpperAlpha */] = {
+    _a[9 /* UpperAlpha */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: '. ',
     },
-    _a[11 /* UpperAlphaDash */] = {
+    _a[12 /* UpperAlphaDash */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: '- ',
     },
-    _a[9 /* UpperAlphaParenthesis */] = {
+    _a[10 /* UpperAlphaParenthesis */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: ') ',
     },
-    _a[10 /* UpperAlphaDoubleParenthesis */] = {
+    _a[11 /* UpperAlphaDoubleParenthesis */] = {
         markerType: MarkerTypes.Alpha,
         markerSeparator: ') ',
         markerSecondSeparator: '(',
     },
-    _a[12 /* LowerRoman */] = {
+    _a[13 /* LowerRoman */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: '. ',
         lowerCase: true,
     },
-    _a[15 /* LowerRomanDash */] = {
+    _a[16 /* LowerRomanDash */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: '- ',
         lowerCase: true,
     },
-    _a[13 /* LowerRomanParenthesis */] = {
+    _a[14 /* LowerRomanParenthesis */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: ') ',
         lowerCase: true,
     },
-    _a[14 /* LowerRomanDoubleParenthesis */] = {
+    _a[15 /* LowerRomanDoubleParenthesis */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: ') ',
         markerSecondSeparator: '(',
         lowerCase: true,
     },
-    _a[16 /* UpperRoman */] = {
+    _a[17 /* UpperRoman */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: '. ',
     },
-    _a[19 /* UpperRomanDash */] = {
+    _a[20 /* UpperRomanDash */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: '- ',
     },
-    _a[17 /* UpperRomanParenthesis */] = {
+    _a[18 /* UpperRomanParenthesis */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: ') ',
     },
-    _a[18 /* UpperRomanDoubleParenthesis */] = {
+    _a[19 /* UpperRomanDoubleParenthesis */] = {
         markerType: MarkerTypes.Roman,
         markerSeparator: ') ',
         markerSecondSeparator: '(',
@@ -13774,6 +14003,7 @@ exports.removeMetadata = removeMetadata;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 /**
  * Validate the given object with a type definition object
  * @param input The object to validate
@@ -13814,7 +14044,9 @@ function validate(input, def) {
             case 4 /* Object */:
                 result =
                     typeof input === 'object' &&
-                        Object.keys(def.propertyDef).every(function (x) { return validate(input[x], def.propertyDef[x]); });
+                        (0, getObjectKeys_1.default)(def.propertyDef).every(function (x) {
+                            return validate(input[x], def.propertyDef[x]);
+                        });
                 break;
             case 5 /* Customize */:
                 result = def.validator(input);
@@ -15133,6 +15365,7 @@ exports.default = getStyles;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 /**
  * Set styles to an HTML element. If styles are empty, remove 'style' attribute
  * @param element The element to set styles
@@ -15140,7 +15373,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function setStyles(element, styles) {
     if (element) {
-        var style = Object.keys(styles || {})
+        var style = (0, getObjectKeys_1.default)(styles || {})
             .map(function (name) {
             var value = styles[name];
             var trimmedName = name ? name.trim() : null;
@@ -15187,7 +15420,7 @@ var applyTableFormat_1 = __webpack_require__(/*! ./applyTableFormat */ "./packag
 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 toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var tableFormatInfo_1 = __webpack_require__(/*! ./tableFormatInfo */ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts");
 var CELL_SHADE = 'cellShade';
 var DEFAULT_FORMAT = {
@@ -16346,29 +16579,6 @@ function applyFormat(element, format, isDarkMode) {
 exports.default = applyFormat;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts":
-/*!**************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts ***!
-  \**************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * A type-safe wrapper for Array.prototype.push.apply()
- * @param mainArray The main array to push items into
- * @param itemsArray The items to push to main array
- */
-function arrayPush(mainArray, itemsArray) {
-    Array.prototype.push.apply(mainArray, itemsArray);
-}
-exports.default = arrayPush;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts":
@@ -16429,7 +16639,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.collapse = void 0;
 var contains_1 = __webpack_require__(/*! ./contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
 var splitParentNode_1 = __webpack_require__(/*! ./splitParentNode */ "./packages/roosterjs-editor-dom/lib/utils/splitParentNode.ts");
-var toArray_1 = __webpack_require__(/*! ./toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 /**
  * Collapse nodes within the given start and end nodes to their common ancestor node,
  * split parent nodes if necessary
@@ -16559,6 +16769,7 @@ function internalContains(container, contained) {
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnownCreateElementData = void 0;
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ./safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var Browser_1 = __webpack_require__(/*! ./Browser */ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts");
 /**
@@ -16636,12 +16847,12 @@ function createElement(elementData, document) {
         result.className = className;
     }
     if (dataset && (0, safeInstanceOf_1.default)(result, 'HTMLElement')) {
-        Object.keys(dataset).forEach(function (datasetName) {
+        (0, getObjectKeys_1.default)(dataset).forEach(function (datasetName) {
             result.dataset[datasetName] = dataset[datasetName];
         });
     }
     if (attributes) {
-        Object.keys(attributes).forEach(function (attrName) {
+        (0, getObjectKeys_1.default)(attributes).forEach(function (attrName) {
             result.setAttribute(attrName, attributes[attrName]);
         });
     }
@@ -16715,7 +16926,7 @@ exports.default = findClosestElementAncestor;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var toArray_1 = __webpack_require__(/*! ./toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 /**
  * @deprecated
  * Creates an HTML node array from html
@@ -16971,6 +17182,7 @@ exports.getPreviousLeafSibling = getPreviousLeafSibling;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PendableFormatCommandMap = void 0;
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 /**
  * A map from pendable format name to document command
  */
@@ -17006,7 +17218,7 @@ exports.PendableFormatCommandMap = {
  * @returns A PendableFormatState object which contains the values of pendable format states
  */
 function getPendableFormatState(document) {
-    var keys = Object.keys(exports.PendableFormatCommandMap);
+    var keys = (0, getObjectKeys_1.default)(exports.PendableFormatCommandMap);
     return keys.reduce(function (state, key) {
         state[key] = document.queryCommandState(exports.PendableFormatCommandMap[key]);
         return state;
@@ -17118,7 +17330,7 @@ var ZERO_WIDTH_SPACE = /\u200b/g;
  * Default value is false
  * @returns True if there isn't any visible element inside node, otherwise false
  */
-function isNodeEmpty(node, trimContent) {
+function isNodeEmpty(node, trimContent, shouldCountBrAsVisible) {
     if (!node) {
         return false;
     }
@@ -17128,9 +17340,12 @@ function isNodeEmpty(node, trimContent) {
     else if (node.nodeType == 1 /* Element */) {
         var element = node;
         var textContent = trim(element.textContent || '', trimContent);
+        var visibleSelector = shouldCountBrAsVisible
+            ? VISIBLE_CHILD_ELEMENT_SELECTOR + ",BR"
+            : VISIBLE_CHILD_ELEMENT_SELECTOR;
         if (textContent != '' ||
             VISIBLE_ELEMENT_TAGS.indexOf((0, getTagOfNode_1.default)(element)) >= 0 ||
-            element.querySelectorAll(VISIBLE_CHILD_ELEMENT_SELECTOR)[0]) {
+            element.querySelectorAll(visibleSelector)[0]) {
             return false;
         }
     }
@@ -17185,6 +17400,7 @@ exports.default = isVoidHtmlElement;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 // http exclude matching regex
 // invalid URL example (in particular on IE and Edge):
 // - http://www.bing.com%00, %00 before ? (question mark) is considered invalid. IE/Edge throws invalid argument exception
@@ -17247,7 +17463,7 @@ var linkMatchRules = {
  */
 function matchLink(url) {
     if (url) {
-        for (var _i = 0, _a = Object.keys(linkMatchRules); _i < _a.length; _i++) {
+        for (var _i = 0, _a = (0, getObjectKeys_1.default)(linkMatchRules); _i < _a.length; _i++) {
             var schema = _a[_i];
             var rule = linkMatchRules[schema];
             var matches = url.match(rule.match);
@@ -17364,7 +17580,7 @@ exports.default = normalizeRect;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var toArray_1 = __webpack_require__(/*! ./toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 /**
  * Query HTML elements in the container by a selector string
  * @param container Container element to query from
@@ -17475,10 +17691,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]'
@@ -17495,6 +17710,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;
@@ -17824,24 +18044,6 @@ function splitTextNode(textNode, offset, returnFirstPart) {
 exports.default = splitTextNode;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts":
-/*!************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/toArray.ts ***!
-  \************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-function toArray(collection) {
-    return [].slice.call(collection);
-}
-exports.default = toArray;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts":
@@ -17920,6 +18122,31 @@ function wrap(nodes, wrapper) {
 exports.default = wrap;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/AutoFormat.ts":
+/*!*************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/AutoFormat.ts ***!
+  \*************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./plugins/AutoFormat/index */ "./packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/index.ts"), exports);
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/ContentEdit.ts":
@@ -18254,6 +18481,7 @@ __exportStar(__webpack_require__(/*! ./Picker */ "./packages/roosterjs-editor-pl
 __exportStar(__webpack_require__(/*! ./TableResize */ "./packages/roosterjs-editor-plugins/lib/TableResize.ts"), exports);
 __exportStar(__webpack_require__(/*! ./Watermark */ "./packages/roosterjs-editor-plugins/lib/Watermark.ts"), exports);
 __exportStar(__webpack_require__(/*! ./TableCellSelection */ "./packages/roosterjs-editor-plugins/lib/TableCellSelection.ts"), exports);
+__exportStar(__webpack_require__(/*! ./AutoFormat */ "./packages/roosterjs-editor-plugins/lib/AutoFormat.ts"), exports);
 
 
 /***/ }),
@@ -18270,14 +18498,15 @@ __exportStar(__webpack_require__(/*! ./TableCellSelection */ "./packages/rooster
 Object.defineProperty(exports, "__esModule", { value: true });
 var lib_1 = __webpack_require__(/*! roosterjs-editor-dom/lib */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
- * Generate event names based on different platforms to be compatible with desktop and mobile browsers
+ * Generate event names and getXY function based on different platforms to be compatible with desktop and mobile browsers
  */
-var MOUSE_EVENT_NAMES = (function () {
+var MOUSE_EVENT_INFO = (function () {
     if (lib_1.Browser.isMobileOrTablet) {
         return {
             MOUSEDOWN: 'touchstart',
             MOUSEMOVE: 'touchmove',
             MOUSEUP: 'touchend',
+            getPageXY: getTouchEventPageXY,
         };
     }
     else {
@@ -18285,9 +18514,23 @@ var MOUSE_EVENT_NAMES = (function () {
             MOUSEDOWN: 'mousedown',
             MOUSEMOVE: 'mousemove',
             MOUSEUP: 'mouseup',
+            getPageXY: getMouseEventPageXY,
         };
     }
 })();
+function getMouseEventPageXY(e) {
+    return [e.pageX, e.pageY];
+}
+function getTouchEventPageXY(e) {
+    var pageX = 0;
+    var pageY = 0;
+    if (e.targetTouches && e.targetTouches.length > 0) {
+        var touch = e.targetTouches[0];
+        pageX = touch.pageX;
+        pageY = touch.pageY;
+    }
+    return [pageX, pageY];
+}
 /**
  * @internal
  * A helper class to help manage drag and drop to an HTML element
@@ -18310,19 +18553,20 @@ var DragAndDropHelper = /** @class */ (function () {
         this.handler = handler;
         this.zoomScale = zoomScale;
         this.onMouseDown = function (e) {
-            var _a, _b;
+            var _a;
+            var _b, _c;
             e.preventDefault();
             e.stopPropagation();
             _this.addDocumentEvents();
-            _this.initX = e.pageX;
-            _this.initY = e.pageY;
-            _this.initValue = (_b = (_a = _this.handler).onDragStart) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e);
+            _a = MOUSE_EVENT_INFO.getPageXY(e), _this.initX = _a[0], _this.initY = _a[1];
+            _this.initValue = (_c = (_b = _this.handler).onDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, _this.context, e);
         };
         this.onMouseMove = function (e) {
             var _a, _b, _c;
             e.preventDefault();
-            var deltaX = (e.pageX - _this.initX) / _this.zoomScale;
-            var deltaY = (e.pageY - _this.initY) / _this.zoomScale;
+            var _d = MOUSE_EVENT_INFO.getPageXY(e), pageX = _d[0], pageY = _d[1];
+            var deltaX = (pageX - _this.initX) / _this.zoomScale;
+            var deltaY = (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);
             }
@@ -18335,30 +18579,136 @@ var DragAndDropHelper = /** @class */ (function () {
                 (_c = _this.onSubmit) === null || _c === void 0 ? void 0 : _c.call(_this, _this.context, _this.trigger);
             }
         };
-        trigger.addEventListener(MOUSE_EVENT_NAMES.MOUSEDOWN, this.onMouseDown);
+        trigger.addEventListener(MOUSE_EVENT_INFO.MOUSEDOWN, this.onMouseDown);
     }
     /**
      * Dispose this object, remove all event listeners that has been attached
      */
     DragAndDropHelper.prototype.dispose = function () {
-        this.trigger.removeEventListener(MOUSE_EVENT_NAMES.MOUSEDOWN, this.onMouseDown);
+        this.trigger.removeEventListener(MOUSE_EVENT_INFO.MOUSEDOWN, this.onMouseDown);
         this.removeDocumentEvents();
     };
     DragAndDropHelper.prototype.addDocumentEvents = function () {
         var doc = this.trigger.ownerDocument;
-        doc.addEventListener(MOUSE_EVENT_NAMES.MOUSEMOVE, this.onMouseMove, true /*useCapture*/);
-        doc.addEventListener(MOUSE_EVENT_NAMES.MOUSEUP, this.onMouseUp, true /*useCapture*/);
+        doc.addEventListener(MOUSE_EVENT_INFO.MOUSEMOVE, this.onMouseMove, true /*useCapture*/);
+        doc.addEventListener(MOUSE_EVENT_INFO.MOUSEUP, this.onMouseUp, true /*useCapture*/);
     };
     DragAndDropHelper.prototype.removeDocumentEvents = function () {
         var doc = this.trigger.ownerDocument;
-        doc.removeEventListener(MOUSE_EVENT_NAMES.MOUSEMOVE, this.onMouseMove, true /*useCapture*/);
-        doc.removeEventListener(MOUSE_EVENT_NAMES.MOUSEUP, this.onMouseUp, true /*useCapture*/);
+        doc.removeEventListener(MOUSE_EVENT_INFO.MOUSEMOVE, this.onMouseMove, true /*useCapture*/);
+        doc.removeEventListener(MOUSE_EVENT_INFO.MOUSEUP, this.onMouseUp, true /*useCapture*/);
     };
     return DragAndDropHelper;
 }());
 exports.default = DragAndDropHelper;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/AutoFormat.ts":
+/*!********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/AutoFormat.ts ***!
+  \********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var specialCharacters = /[`!@#$%^&*()_+\=\[\]{};':"\\|,.<>\/?~]/;
+/**
+ * Automatically transform -- into hyphen, if typed between two words.
+ */
+var AutoFormat = /** @class */ (function () {
+    function AutoFormat() {
+    }
+    /**
+     * Get a friendly name of this plugin
+     */
+    AutoFormat.prototype.getName = function () {
+        return 'AutoFormat';
+    };
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    AutoFormat.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
+    /**
+     * Dispose this plugin
+     */
+    AutoFormat.prototype.dispose = function () {
+        this.editor = null;
+    };
+    /**
+     * Handle events triggered from editor
+     * @param event PluginEvent object
+     */
+    AutoFormat.prototype.onPluginEvent = function (event) {
+        var _this = this;
+        if (event.eventType === 7 /* ContentChanged */ ||
+            event.eventType === 5 /* MouseDown */ ||
+            event.eventType === 6 /* MouseUp */) {
+            this.lastKeyTyped = '';
+        }
+        if (event.eventType === 0 /* KeyDown */) {
+            var keyTyped = event.rawEvent.key;
+            if (keyTyped.length > 1) {
+                this.lastKeyTyped = '';
+            }
+            if (this.lastKeyTyped === '-' &&
+                !specialCharacters.test(keyTyped) &&
+                keyTyped !== ' ' &&
+                keyTyped !== '-') {
+                var searcher = this.editor.getContentSearcherOfCursor(event);
+                var textBeforeCursor = searcher.getSubStringBefore(3);
+                var dashes = searcher.getSubStringBefore(2);
+                var isPrecededByADash = textBeforeCursor[0] === '-';
+                var isPrecededByASpace = textBeforeCursor[0] === ' ';
+                if (isPrecededByADash ||
+                    isPrecededByASpace ||
+                    specialCharacters.test(textBeforeCursor[0]) ||
+                    dashes !== '--') {
+                    return;
+                }
+                var textRange_1 = searcher.getRangeFromText(dashes, true /* exactMatch */);
+                var nodeHyphen_1 = document.createTextNode('—');
+                this.editor.addUndoSnapshot(function () {
+                    textRange_1.deleteContents();
+                    textRange_1.insertNode(nodeHyphen_1);
+                    _this.editor.select(nodeHyphen_1, -1 /* End */);
+                }, null /*changeSource*/, true /*canUndoByBackspace*/);
+                //After the substitution the last key typed needs to be cleaned
+                this.lastKeyTyped = '';
+            }
+            else {
+                this.lastKeyTyped = keyTyped;
+            }
+        }
+    };
+    return AutoFormat;
+}());
+exports.default = AutoFormat;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/index.ts":
+/*!***************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/index.ts ***!
+  \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoFormat = void 0;
+var AutoFormat_1 = __webpack_require__(/*! ./AutoFormat */ "./packages/roosterjs-editor-plugins/lib/plugins/AutoFormat/AutoFormat.ts");
+Object.defineProperty(exports, "AutoFormat", { enumerable: true, get: function () { return AutoFormat_1.default; } });
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/ContentEdit.ts":
@@ -18372,6 +18722,7 @@ exports.default = DragAndDropHelper;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var getAllFeatures_1 = __webpack_require__(/*! ./getAllFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/getAllFeatures.ts");
+var lib_1 = __webpack_require__(/*! roosterjs-editor-dom/lib */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * An editor plugin to handle content edit event.
  * The following cases are included:
@@ -18408,7 +18759,7 @@ var ContentEdit = /** @class */ (function () {
         var _this = this;
         var features = [];
         var allFeatures = (0, getAllFeatures_1.default)();
-        Object.keys(allFeatures).forEach(function (key) {
+        (0, lib_1.getObjectKeys)(allFeatures).forEach(function (key) {
             var feature = allFeatures[key];
             var hasSettingForKey = _this.settingsOverride && _this.settingsOverride[key] !== undefined;
             if ((hasSettingForKey && _this.settingsOverride[key]) ||
@@ -18756,8 +19107,8 @@ exports.EntityFeatures = {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListFeatures = void 0;
-var getListStyle_1 = __webpack_require__(/*! ../utils/getListStyle */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListStyle.ts");
-var getListType_1 = __webpack_require__(/*! ../utils/getListType */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListType.ts");
+var getAutoBulletListStyle_1 = __webpack_require__(/*! ../utils/getAutoBulletListStyle */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoBulletListStyle.ts");
+var getAutoNumberingListStyle_1 = __webpack_require__(/*! ../utils/getAutoNumberingListStyle */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoNumberingListStyle.ts");
 var roosterjs_editor_api_1 = __webpack_require__(/*! roosterjs-editor-api */ "./packages/roosterjs-editor-api/lib/index.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
@@ -18882,15 +19233,10 @@ var AutoBullet = {
         if (!cacheGetListElement(event, editor)) {
             var searcher = editor.getContentSearcherOfCursor(event);
             var textBeforeCursor = searcher.getSubStringBefore(4);
-            var listTrigger = function (text) {
-                return editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)
-                    ? (0, getListType_1.default)(text)
-                    : isAListPattern(text);
-            };
             // Auto list is triggered if:
             // 1. Text before cursor exactly matches '*', '-' or '1.'
             // 2. There's no non-text inline entities before cursor
-            return listTrigger(textBeforeCursor) && !searcher.getNearestNonTextInlineElement();
+            return isAListPattern(textBeforeCursor) && !searcher.getNearestNonTextInlineElement();
         }
         return false;
     },
@@ -18903,36 +19249,92 @@ var AutoBullet = {
             var searcher = editor.getContentSearcherOfCursor();
             var textBeforeCursor = searcher.getSubStringBefore(4);
             var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
-            var listType = 0 /* None */;
-            var listStyle;
-            if (editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
-                listType = (0, getListType_1.default)(textBeforeCursor);
-                listStyle = (0, getListStyle_1.default)(textBeforeCursor, listType);
-            }
-            else {
-                listType =
-                    textBeforeCursor.indexOf('*') == 0 || textBeforeCursor.indexOf('-') == 0
-                        ? 2 /* Unordered */
-                        : isAListPattern(textBeforeCursor)
-                            ? 1 /* Ordered */
-                            : 0 /* None */;
-            }
             if (!textRange) {
                 // no op if the range can't be found
             }
-            else if (listType === 2 /* Unordered */) {
+            else if (textBeforeCursor.indexOf('*') == 0 ||
+                textBeforeCursor.indexOf('-') == 0) {
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleBullet)(editor, listStyle);
+                (0, roosterjs_editor_api_1.toggleBullet)(editor);
             }
-            else if (listType === 1 /* Ordered */) {
+            else if (isAListPattern(textBeforeCursor)) {
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleNumbering)(editor, undefined /* startNumber*/, listStyle);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor);
+            }
+            else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
+                var num = parseInt(textBeforeCursor);
+                prepareAutoBullet(editor, textRange);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor, num);
+            }
+            (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
+        }, null /*changeSource*/, true /*canUndoByBackspace*/);
+    },
+};
+/**
+ * Requires @see ExperimentalFeatures.AutoFormatList to be enabled
+ * AutoBulletList edit feature, provides the ability to automatically convert current line into a bullet list.
+ */
+var AutoBulletList = {
+    keys: [32 /* SPACE */],
+    shouldHandleEvent: function (event, editor) {
+        if (!cacheGetListElement(event, editor) &&
+            editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
+            return shouldTriggerList(event, editor, getAutoBulletListStyle_1.default);
+        }
+        return false;
+    },
+    handleEvent: function (event, editor) {
+        editor.insertContent('&nbsp;');
+        event.rawEvent.preventDefault();
+        editor.addUndoSnapshot(function () {
+            var _a;
+            var searcher = editor.getContentSearcherOfCursor();
+            var textBeforeCursor = searcher.getSubStringBefore(5);
+            var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
+            var listStyle = (0, getAutoBulletListStyle_1.default)(textBeforeCursor);
+            if (textRange) {
+                prepareAutoBullet(editor, textRange);
+                (0, roosterjs_editor_api_1.toggleBullet)(editor, listStyle);
+            }
+            (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
+        }, null /*changeSource*/, true /*canUndoByBackspace*/);
+    },
+};
+/**
+ * Requires @see ExperimentalFeatures.AutoFormatList to be enabled
+ * AutoNumberingList edit feature, provides the ability to automatically convert current line into a numbering list.
+ */
+var AutoNumberingList = {
+    keys: [32 /* SPACE */],
+    shouldHandleEvent: function (event, editor) {
+        if (!cacheGetListElement(event, editor) &&
+            editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
+            return shouldTriggerList(event, editor, getAutoNumberingListStyle_1.default);
+        }
+        return false;
+    },
+    handleEvent: function (event, editor) {
+        editor.insertContent('&nbsp;');
+        event.rawEvent.preventDefault();
+        editor.addUndoSnapshot(function () {
+            var _a;
+            var regions;
+            var searcher = editor.getContentSearcherOfCursor();
+            var textBeforeCursor = searcher.getSubStringBefore(5);
+            var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
+            var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor);
+            if (!textRange) {
+                // no op if the range can't be found
             }
             else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
                 var num = parseInt(textBeforeCursor);
                 prepareAutoBullet(editor, textRange);
                 (0, roosterjs_editor_api_1.toggleNumbering)(editor, num, listStyle);
             }
+            else {
+                prepareAutoBullet(editor, textRange);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor, undefined /* startNumber*/, listStyle);
+            }
             (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
         }, null /*changeSource*/, true /*canUndoByBackspace*/);
     },
@@ -18999,6 +19401,11 @@ function cacheGetListElement(event, editor) {
     var listElement = li && (0, roosterjs_editor_dom_1.getTagOfNode)(li) == 'LI' && editor.getElementAtCursor('UL,OL', li);
     return listElement ? [listElement, li] : null;
 }
+function shouldTriggerList(event, editor, getListStyle) {
+    var searcher = editor.getContentSearcherOfCursor(event);
+    var textBeforeCursor = searcher.getSubStringBefore(5);
+    return !searcher.getNearestNonTextInlineElement() && getListStyle(textBeforeCursor);
+}
 /**
  * @internal
  */
@@ -19011,6 +19418,8 @@ exports.ListFeatures = {
     mergeInNewLineWhenBackspaceOnFirstChar: MergeInNewLine,
     maintainListChain: MaintainListChain,
     maintainListChainWhenDelete: MaintainListChainWhenDelete,
+    autoNumberingList: AutoNumberingList,
+    autoBulletList: AutoBulletList,
 };
 
 
@@ -19351,7 +19760,7 @@ var CHILD_PARENT_TAG_MAP = {
     TH: 'TABLE',
     LI: 'OL,UL',
 };
-var CHILD_SELECTOR = Object.keys(CHILD_PARENT_TAG_MAP).join(',');
+var CHILD_SELECTOR = (0, roosterjs_editor_dom_1.getObjectKeys)(CHILD_PARENT_TAG_MAP).join(',');
 /**
  * InsertLineBeforeStructuredNode edit feature, provides the ability to insert an empty line before
  * a structured element (bullet/numbering list, blockquote, table) if the element is at beginning of
@@ -19567,15 +19976,6 @@ exports.TableFeatures = {
 
 "use strict";
 
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextFeatures = void 0;
 var roosterjs_editor_api_1 = __webpack_require__(/*! roosterjs-editor-api */ "./packages/roosterjs-editor-api/lib/index.ts");
@@ -19651,29 +20051,18 @@ var OutdentWhenTabText = {
     },
 };
 /**
- * Requires @see ExperimentalFeatures.AutoHyphen to be enabled
+ * @deprecated
  * Automatically transform -- into hyphen, if typed between two words.
  */
 var AutoHyphen = {
-    keys: __spreadArray(__spreadArray([], createNumberSequenceArray(48, 57), true), createNumberSequenceArray(65, 90), true),
+    keys: [],
     shouldHandleEvent: function (event, editor) {
-        var searcher = editor.getContentSearcherOfCursor(event);
-        var textBeforeCursor = searcher.getSubStringBefore(3);
-        var hasDashes = textBeforeCursor[2] === '-' && textBeforeCursor[1] === '-';
-        var noSpace = textBeforeCursor[0] !== ' ';
-        return hasDashes && noSpace && editor.isFeatureEnabled("AutoHyphen" /* AutoHyphen */);
+        return false;
     },
     handleEvent: function (event, editor) {
-        var searcher = editor.getContentSearcherOfCursor(event);
-        var dashes = searcher.getSubStringBefore(2);
-        var textRange = searcher.getRangeFromText(dashes, true /* exactMatch */);
-        var nodeHyphen = document.createTextNode('—');
-        editor.addUndoSnapshot(function () {
-            textRange.deleteContents();
-            textRange.insertNode(nodeHyphen);
-            editor.select(nodeHyphen, -1 /* End */);
-        }, null /*changeSource*/, true /*canUndoByBackspace*/);
+        return false;
     },
+    defaultDisabled: true,
 };
 /**
  * @internal
@@ -19739,9 +20128,6 @@ function insertTab(editor, event) {
         editor.deleteNode(span2);
     }
 }
-function createNumberSequenceArray(start, end) {
-    return new Array(end - start).fill(start).map(function (keyCodeValue, i) { return i + start; });
-}
 
 
 /***/ }),
@@ -19808,10 +20194,48 @@ Object.defineProperty(exports, "getAllFeatures", { enumerable: true, get: functi
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListStyle.ts":
-/*!*****************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListStyle.ts ***!
-  \*****************************************************************************************/
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoBulletListStyle.ts":
+/*!***************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoBulletListStyle.ts ***!
+  \***************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var bulletListType = {
+    '*': 1 /* Disc */,
+    '-': 2 /* Dash */,
+    '--': 3 /* Square */,
+    '->': 5 /* LongArrow */,
+    '-->': 5 /* LongArrow */,
+    '=>': 6 /* UnfilledArrow */,
+    '>': 4 /* ShortArrow */,
+    '—': 7 /* Hyphen */,
+};
+var identifyBulletListType = function (bullet) {
+    return bulletListType[bullet] || null;
+};
+/**
+ * @internal
+ * @param textBeforeCursor The trigger character
+ * @returns The style of a bullet list triggered by a string
+ */
+function getAutoBulletListStyle(textBeforeCursor) {
+    var trigger = textBeforeCursor.trim();
+    var bulletType = identifyBulletListType(trigger);
+    return bulletType;
+}
+exports.default = getAutoBulletListStyle;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoNumberingListStyle.ts":
+/*!******************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoNumberingListStyle.ts ***!
+  \******************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -19820,145 +20244,100 @@ Object.defineProperty(exports, "getAllFeatures", { enumerable: true, get: functi
 var _a, _b, _c, _d, _e, _f;
 Object.defineProperty(exports, "__esModule", { value: true });
 var characters = {
-    '.': 0 /* Dot */,
-    '-': 1 /* Dash */,
-    ')': 2 /* Parenthesis */,
-    '(': 3 /* DoubleParenthesis */,
+    '.': 1 /* Dot */,
+    '-': 2 /* Dash */,
+    ')': 3 /* Parenthesis */,
+    '(': 4 /* DoubleParenthesis */,
 };
-var identifyCharacter = function (text) {
-    var char = text[0] === '(' ? text[0] : text[text.length - 1];
-    return characters[char];
+var identifyCharacter = function (text, secondSeparator) {
+    var charType = characters[text];
+    return charType === 4 /* DoubleParenthesis */ && secondSeparator !== ')'
+        ? undefined
+        : charType;
 };
 var identifyNumberingType = function (text) {
-    var char = text[0] === '(' ? text[1] : text[0];
-    if (!isNaN(parseInt(char))) {
-        return 0 /* Decimal */;
+    if (!isNaN(parseInt(text))) {
+        return 1 /* Decimal */;
     }
-    else if (/[a-z]+/g.test(char)) {
-        if (char === 'i') {
-            return 3 /* LowerRoman */;
+    else if (/[a-z]+/g.test(text)) {
+        if (text === 'i') {
+            return 4 /* LowerRoman */;
         }
         else {
-            return 1 /* LowerAlpha */;
+            return 2 /* LowerAlpha */;
         }
     }
-    else if (/[A-Z]+/g.test(char)) {
-        if (char === 'I') {
-            return 4 /* UpperRoman */;
+    else if (/[A-Z]+/g.test(text)) {
+        if (text === 'I') {
+            return 5 /* UpperRoman */;
         }
         else {
-            return 2 /* UpperAlpha */;
+            return 3 /* UpperAlpha */;
         }
     }
 };
 var numberingListTypes = (_a = {},
-    _a[0 /* Decimal */] = function (char) { return DecimalsTypes[char]; },
-    _a[1 /* LowerAlpha */] = function (char) { return LowerAlphaTypes[char]; },
-    _a[2 /* UpperAlpha */] = function (char) { return UpperAlphaTypes[char]; },
-    _a[3 /* LowerRoman */] = function (char) { return LowerRomanTypes[char]; },
-    _a[4 /* UpperRoman */] = function (char) { return UpperRomanTypes[char]; },
+    _a[1 /* Decimal */] = function (char) { return DecimalsTypes[char] || null; },
+    _a[2 /* LowerAlpha */] = function (char) { return LowerAlphaTypes[char] || null; },
+    _a[3 /* UpperAlpha */] = function (char) { return UpperAlphaTypes[char] || null; },
+    _a[4 /* LowerRoman */] = function (char) { return LowerRomanTypes[char] || null; },
+    _a[5 /* UpperRoman */] = function (char) { return UpperRomanTypes[char] || null; },
     _a);
 var UpperRomanTypes = (_b = {},
-    _b[0 /* Dot */] = 16 /* UpperRoman */,
-    _b[1 /* Dash */] = 19 /* UpperRomanDash */,
-    _b[2 /* Parenthesis */] = 17 /* UpperRomanParenthesis */,
-    _b[3 /* DoubleParenthesis */] = 18 /* UpperRomanDoubleParenthesis */,
+    _b[1 /* Dot */] = 17 /* UpperRoman */,
+    _b[2 /* Dash */] = 20 /* UpperRomanDash */,
+    _b[3 /* Parenthesis */] = 18 /* UpperRomanParenthesis */,
+    _b[4 /* DoubleParenthesis */] = 19 /* UpperRomanDoubleParenthesis */,
     _b);
 var LowerRomanTypes = (_c = {},
-    _c[0 /* Dot */] = 12 /* LowerRoman */,
-    _c[1 /* Dash */] = 15 /* LowerRomanDash */,
-    _c[2 /* Parenthesis */] = 13 /* LowerRomanParenthesis */,
-    _c[3 /* DoubleParenthesis */] = 14 /* LowerRomanDoubleParenthesis */,
+    _c[1 /* Dot */] = 13 /* LowerRoman */,
+    _c[2 /* Dash */] = 16 /* LowerRomanDash */,
+    _c[3 /* Parenthesis */] = 14 /* LowerRomanParenthesis */,
+    _c[4 /* DoubleParenthesis */] = 15 /* LowerRomanDoubleParenthesis */,
     _c);
 var UpperAlphaTypes = (_d = {},
-    _d[0 /* Dot */] = 8 /* UpperAlpha */,
-    _d[1 /* Dash */] = 11 /* UpperAlphaDash */,
-    _d[2 /* Parenthesis */] = 9 /* UpperAlphaParenthesis */,
-    _d[3 /* DoubleParenthesis */] = 10 /* UpperAlphaDoubleParenthesis */,
+    _d[1 /* Dot */] = 9 /* UpperAlpha */,
+    _d[2 /* Dash */] = 12 /* UpperAlphaDash */,
+    _d[3 /* Parenthesis */] = 10 /* UpperAlphaParenthesis */,
+    _d[4 /* DoubleParenthesis */] = 11 /* UpperAlphaDoubleParenthesis */,
     _d);
 var LowerAlphaTypes = (_e = {},
-    _e[0 /* Dot */] = 4 /* LowerAlpha */,
-    _e[1 /* Dash */] = 7 /* LowerAlphaDash */,
-    _e[2 /* Parenthesis */] = 5 /* LowerAlphaParenthesis */,
-    _e[3 /* DoubleParenthesis */] = 6 /* LowerAlphaDoubleParenthesis */,
+    _e[1 /* Dot */] = 5 /* LowerAlpha */,
+    _e[2 /* Dash */] = 8 /* LowerAlphaDash */,
+    _e[3 /* Parenthesis */] = 6 /* LowerAlphaParenthesis */,
+    _e[4 /* DoubleParenthesis */] = 7 /* LowerAlphaDoubleParenthesis */,
     _e);
 var DecimalsTypes = (_f = {},
-    _f[0 /* Dot */] = 0 /* Decimal */,
-    _f[1 /* Dash */] = 1 /* DecimalDash */,
-    _f[2 /* Parenthesis */] = 2 /* DecimalParenthesis */,
-    _f[3 /* DoubleParenthesis */] = 3 /* DecimalDoubleParenthesis */,
+    _f[1 /* Dot */] = 1 /* Decimal */,
+    _f[2 /* Dash */] = 2 /* DecimalDash */,
+    _f[3 /* Parenthesis */] = 3 /* DecimalParenthesis */,
+    _f[4 /* DoubleParenthesis */] = 4 /* DecimalDoubleParenthesis */,
     _f);
-var bulletListType = {
-    '*': 0 /* Disc */,
-    '-': 1 /* Dash */,
-    '--': 2 /* Square */,
-    '->': 4 /* LongArrow */,
-    '-->': 4 /* LongArrow */,
-    '=>': 5 /* UnfilledArrow */,
-    '>': 3 /* ShortArrow */,
-};
-var identifyNumberingListType = function (textBeforeCursor) {
-    var numbering = textBeforeCursor.replace(/\s/g, '');
-    var char = identifyCharacter(numbering);
-    var numberingType = identifyNumberingType(numbering);
-    return numberingListTypes[numberingType](char);
-};
-var identifyBulletListType = function (textBeforeCursor) {
-    var bullet = textBeforeCursor.replace(/\s/g, '');
-    return bulletListType[bullet];
-};
-/**
- * @internal
- * @param textBeforeCursor The trigger character
- * @param listType The type of the list (ordered or unordered)
- * @returns the style of the list
- */
-function getListStyle(textBeforeCursor, listType) {
-    if (listType === 1 /* Ordered */) {
-        return identifyNumberingListType(textBeforeCursor);
+var identifyNumberingListType = function (numbering) {
+    // If the marker length is 3, the marker style is double parenthis such as (1), (A). Then the number is second character of the string and the separator is first character and last character.
+    var separator = numbering.length === 3 ? numbering[0] : numbering[1];
+    var secondSeparator = numbering.length === 3 ? numbering[2] : undefined;
+    var char = identifyCharacter(separator, secondSeparator);
+    // if separator is not valid, no need to check if the number is valid.
+    if (char) {
+        var number = numbering.length === 3 ? numbering[1] : numbering[0];
+        var numberingType = identifyNumberingType(number);
+        return numberingType ? numberingListTypes[numberingType](char) : null;
     }
-    else {
-        return identifyBulletListType(textBeforeCursor);
-    }
-}
-exports.default = getListStyle;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListType.ts":
-/*!****************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListType.ts ***!
-  \****************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-function isABulletList(textBeforeCursor) {
-    var hasTriggers = ['*', '-', '>'].indexOf(textBeforeCursor[0]) > -1;
-    var REGEX = /^(.*?)=>|^(.*?)->|^(.*?)-->|^(.*?)=>|^(.*?)--/;
-    return hasTriggers || REGEX.test(textBeforeCursor);
-}
-function isANumberingList(textBeforeCursor) {
-    var REGEX = /^([1-9,a-z, i,A-Z,I]{1,2}\.|[1-9,a-z, i,A-Z,I]{1,2}\)|[1-9,a-z, i,A-Z,I]{1,2}\-|\([1-9,a-z, i,A-Z,I]{1,2}\))$/;
-    return REGEX.test(textBeforeCursor.replace(/\s/g, ''));
-}
+    return null;
+};
 /**
  * @internal
  * @param textBeforeCursor The trigger character
- * @returns If the list is ordered or unordered
+ * @returns The style of a numbering list triggered by a string
  */
-function getListType(textBeforeCursor) {
-    if (isABulletList(textBeforeCursor)) {
-        return 2 /* Unordered */;
-    }
-    else if (isANumberingList(textBeforeCursor)) {
-        return 1 /* Ordered */;
-    }
+function getAutoNumberingListStyle(textBeforeCursor) {
+    var trigger = textBeforeCursor.trim();
+    // the marker must be a combination of 2 or 3 characters, so if the length is less than 2, no need to check
+    var numberingType = trigger.length > 1 ? identifyNumberingListType(trigger) : null;
+    return numberingType;
 }
-exports.default = getListType;
+exports.default = getAutoNumberingListStyle;
 
 
 /***/ }),
@@ -20750,7 +21129,7 @@ var ImageEdit = /** @class */ (function () {
         this.editor = editor;
         this.disposer = editor.addDomEventHandler('blur', this.onBlur);
         // Read current enabled features from editor to determine which editing operations are allowed
-        Object.keys(FeatureToOperationMap).forEach(function (key) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(FeatureToOperationMap).forEach(function (key) {
             _this.allowedOperations |= _this.editor.isFeatureEnabled(key)
                 ? FeatureToOperationMap[key]
                 : 0;
@@ -20835,14 +21214,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);
             }
@@ -20890,7 +21268,7 @@ var ImageEdit = /** @class */ (function () {
         var isExperimentalHandlesEnabled = this.editor.isFeatureEnabled("AdaptiveHandlesResizer" /* AdaptiveHandlesResizer */);
         // Get HTML for all edit elements (resize handle, rotate handle, crop handle and overlay, ...) and create HTML element
         var options = {
-            borderColor: this.options.borderColor,
+            borderColor: getColorString(this.options.borderColor, this.editor.isDarkMode()),
             rotateIconHTML: this.options.rotateIconHTML,
             rotateHandleBackColor: this.editor.isDarkMode()
                 ? DARK_MODE_BGCOLOR
@@ -20899,7 +21277,7 @@ var ImageEdit = /** @class */ (function () {
             handlesExperimentalFeatures: isExperimentalHandlesEnabled,
         };
         var htmlData = [(0, Resizer_1.getResizeBordersHTML)(options)];
-        Object.keys(ImageEditHTMLMap).forEach(function (thisOperation) {
+        (0, roosterjs_editor_dom_1.getObjectKeys)(ImageEditHTMLMap).forEach(function (thisOperation) {
             if ((operation & thisOperation) == thisOperation) {
                 (0, roosterjs_editor_dom_1.arrayPush)(htmlData, ImageEditHTMLMap[thisOperation](options, _this.onShowResizeHandle));
             }
@@ -21020,6 +21398,12 @@ function isASmallImage(editInfo, isFeatureEnabled) {
     var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx;
     return widthPx && heightPx && widthPx * widthPx < MAX_SMALL_SIZE_IMAGE && isFeatureEnabled;
 }
+function getColorString(color, isDarkMode) {
+    if (typeof color === 'string') {
+        return color.trim();
+    }
+    return isDarkMode ? color.darkModeColor.trim() : color.lightModeColor.trim();
+}
 
 
 /***/ }),
@@ -21199,7 +21583,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 = '';
@@ -21246,9 +21629,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;
 /**
@@ -23046,7 +23426,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';
@@ -23057,7 +23439,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:
@@ -23089,11 +23471,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);
         }
@@ -23118,6 +23496,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;
 
@@ -23184,7 +23569,7 @@ function convertPastedContentFromWord(event) {
         }
         return true;
     });
-    (0, commentsRemoval_1.default)(sanitizingOption.elementCallbacks);
+    (0, commentsRemoval_1.default)(sanitizingOption.elementCallbacks, sanitizingOption.cssStyleCallbacks);
 }
 exports.default = convertPastedContentFromWord;
 
@@ -23735,8 +24120,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) {
@@ -25036,7 +25419,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 () {
@@ -25081,13 +25464,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 () {
@@ -25331,7 +25714,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;
@@ -25360,29 +25743,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();
@@ -25494,6 +25879,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;
@@ -25516,10 +25916,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;
@@ -25753,7 +26153,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',
@@ -25768,6 +26172,7 @@ function createTableSelector(table, zoomScale, onFinishDragging, onShowHelperEle
     var context = {
         table: table,
         zoomScale: zoomScale,
+        rect: rect,
     };
     setSelectorDivPosition(context, div);
     var onDragEnd = function (context, event) {
@@ -25783,8 +26188,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";
@@ -26026,30 +26430,42 @@ exports.CompatibleBulletListType = void 0;
  */
 var CompatibleBulletListType;
 (function (CompatibleBulletListType) {
+    /**
+     * Minimum value of the enum
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Min"] = 1] = "Min";
     /**
      * Bullet triggered by *
      */
-    CompatibleBulletListType[CompatibleBulletListType["Disc"] = 0] = "Disc";
+    CompatibleBulletListType[CompatibleBulletListType["Disc"] = 1] = "Disc";
     /**
      * Bullet triggered by -
      */
-    CompatibleBulletListType[CompatibleBulletListType["Dash"] = 1] = "Dash";
+    CompatibleBulletListType[CompatibleBulletListType["Dash"] = 2] = "Dash";
     /**
      * Bullet triggered by --
      */
-    CompatibleBulletListType[CompatibleBulletListType["Square"] = 2] = "Square";
+    CompatibleBulletListType[CompatibleBulletListType["Square"] = 3] = "Square";
     /**
      * Bullet triggered by >
      */
-    CompatibleBulletListType[CompatibleBulletListType["ShortArrow"] = 3] = "ShortArrow";
+    CompatibleBulletListType[CompatibleBulletListType["ShortArrow"] = 4] = "ShortArrow";
     /**
      * Bullet triggered by -> or -->
      */
-    CompatibleBulletListType[CompatibleBulletListType["LongArrow"] = 4] = "LongArrow";
+    CompatibleBulletListType[CompatibleBulletListType["LongArrow"] = 5] = "LongArrow";
     /**
      * Bullet triggered by =>
      */
-    CompatibleBulletListType[CompatibleBulletListType["UnfilledArrow"] = 5] = "UnfilledArrow";
+    CompatibleBulletListType[CompatibleBulletListType["UnfilledArrow"] = 6] = "UnfilledArrow";
+    /**
+     * Bullet triggered by —
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Hyphen"] = 7] = "Hyphen";
+    /**
+     * Maximum value of the enum
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Max"] = 7] = "Max";
 })(CompatibleBulletListType = exports.CompatibleBulletListType || (exports.CompatibleBulletListType = {}));
 
 
@@ -26901,6 +27317,7 @@ var CompatibleExperimentalFeatures;
      */
     CompatibleExperimentalFeatures["AutoFormatList"] = "AutoFormatList";
     /**
+     * @deprecated this feature is always disabled
      * Automatically transform -- into hyphen, if typed between two words.
      */
     CompatibleExperimentalFeatures["AutoHyphen"] = "AutoHyphen";
@@ -27307,86 +27724,94 @@ exports.CompatibleNumberingListType = void 0;
  */
 var CompatibleNumberingListType;
 (function (CompatibleNumberingListType) {
+    /**
+     * Minimum value of the enum
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["Min"] = 1] = "Min";
     /**
      * Numbering triggered by 1.
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["Decimal"] = 0] = "Decimal";
+    CompatibleNumberingListType[CompatibleNumberingListType["Decimal"] = 1] = "Decimal";
     /**
      * Numbering triggered by 1-
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["DecimalDash"] = 1] = "DecimalDash";
+    CompatibleNumberingListType[CompatibleNumberingListType["DecimalDash"] = 2] = "DecimalDash";
     /**
      * Numbering triggered by 1)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["DecimalParenthesis"] = 2] = "DecimalParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["DecimalParenthesis"] = 3] = "DecimalParenthesis";
     /**
      * Numbering triggered by (1)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["DecimalDoubleParenthesis"] = 3] = "DecimalDoubleParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["DecimalDoubleParenthesis"] = 4] = "DecimalDoubleParenthesis";
     /**
      * Numbering triggered by a.
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlpha"] = 4] = "LowerAlpha";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlpha"] = 5] = "LowerAlpha";
     /**
      * Numbering triggered by a)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaParenthesis"] = 5] = "LowerAlphaParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaParenthesis"] = 6] = "LowerAlphaParenthesis";
     /**
      * Numbering triggered by (a)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaDoubleParenthesis"] = 6] = "LowerAlphaDoubleParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaDoubleParenthesis"] = 7] = "LowerAlphaDoubleParenthesis";
     /**
      * Numbering triggered by a-
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaDash"] = 7] = "LowerAlphaDash";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaDash"] = 8] = "LowerAlphaDash";
     /**
      * Numbering triggered by A.
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlpha"] = 8] = "UpperAlpha";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlpha"] = 9] = "UpperAlpha";
     /**
      * Numbering triggered by A)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaParenthesis"] = 9] = "UpperAlphaParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaParenthesis"] = 10] = "UpperAlphaParenthesis";
     /**
      * Numbering triggered by (A)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaDoubleParenthesis"] = 10] = "UpperAlphaDoubleParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaDoubleParenthesis"] = 11] = "UpperAlphaDoubleParenthesis";
     /**
      * Numbering triggered by A-
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaDash"] = 11] = "UpperAlphaDash";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaDash"] = 12] = "UpperAlphaDash";
     /**
      * Numbering triggered by i.
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerRoman"] = 12] = "LowerRoman";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRoman"] = 13] = "LowerRoman";
     /**
      * Numbering triggered by i)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanParenthesis"] = 13] = "LowerRomanParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanParenthesis"] = 14] = "LowerRomanParenthesis";
     /**
      * Numbering triggered by (i)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanDoubleParenthesis"] = 14] = "LowerRomanDoubleParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanDoubleParenthesis"] = 15] = "LowerRomanDoubleParenthesis";
     /**
      * Numbering triggered by i-
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanDash"] = 15] = "LowerRomanDash";
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanDash"] = 16] = "LowerRomanDash";
     /**
      * Numbering triggered by I.
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperRoman"] = 16] = "UpperRoman";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRoman"] = 17] = "UpperRoman";
     /**
      * Numbering triggered by I)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanParenthesis"] = 17] = "UpperRomanParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanParenthesis"] = 18] = "UpperRomanParenthesis";
     /**
      * Numbering triggered by (I)
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanDoubleParenthesis"] = 18] = "UpperRomanDoubleParenthesis";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanDoubleParenthesis"] = 19] = "UpperRomanDoubleParenthesis";
     /**
      * Numbering triggered by I-
      */
-    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanDash"] = 19] = "UpperRomanDash";
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanDash"] = 20] = "UpperRomanDash";
+    /**
+     * Maximum value of the enum
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["Max"] = 20] = "Max";
 })(CompatibleNumberingListType = exports.CompatibleNumberingListType || (exports.CompatibleNumberingListType = {}));