roosterjs 8.22.1 → 8.24.0

package/dist/rooster-amd.js

@@ -2929,23 +2929,28 @@ exports.default = insertEntity;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-function insertImage(editor, imageFile) {
+function insertImage(editor, imageFile, attributes) {
     if (typeof imageFile == 'string') {
-        insertImageWithSrc(editor, imageFile);
+        insertImageWithSrc(editor, imageFile, attributes);
     }
     else {
         (0, roosterjs_editor_dom_1.readFile)(imageFile, function (dataUrl) {
             if (dataUrl && !editor.isDisposed()) {
-                insertImageWithSrc(editor, dataUrl);
+                insertImageWithSrc(editor, dataUrl, attributes);
             }
         });
     }
 }
 exports.default = insertImage;
-function insertImageWithSrc(editor, src) {
+function insertImageWithSrc(editor, src, attributes) {
     editor.addUndoSnapshot(function () {
         var image = editor.getDocument().createElement('img');
         image.src = src;
+        if (attributes) {
+            Object.keys(attributes).forEach(function (attribute) {
+                return image.setAttribute(attribute, attributes[attribute]);
+            });
+        }
         image.style.maxWidth = '100%';
         editor.insertNode(image);
     }, "Format" /* Format */);
@@ -3568,9 +3573,10 @@ var toggleListType_1 = __webpack_require__(/*! ../utils/toggleListType */ "./pac
  * If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding
  * browser execCommand API
  * @param editor The editor instance
+ * @param listStyle (Optional) the style of the bullet list. If not defined, the style will be set to disc.
  */
-function toggleBullet(editor) {
-    (0, toggleListType_1.default)(editor, 2 /* Unordered */);
+function toggleBullet(editor, listStyle) {
+    (0, toggleListType_1.default)(editor, 2 /* Unordered */, undefined /* startNumber */, false /* includeSiblingLists */, listStyle);
 }
 exports.default = toggleBullet;
 
@@ -3718,9 +3724,10 @@ var toggleListType_1 = __webpack_require__(/*! ../utils/toggleListType */ "./pac
  * realization of browser execCommand API
  * @param editor The editor instance
  * @param startNumber (Optional) Start number of the list
+ * @param listStyle (Optional) The style of the numbering list. If not defined, the style will be set to decimal.
  */
-function toggleNumbering(editor, startNumber) {
-    (0, toggleListType_1.default)(editor, 1 /* Ordered */, startNumber);
+function toggleNumbering(editor, startNumber, listStyle) {
+    (0, toggleListType_1.default)(editor, 1 /* Ordered */, startNumber, undefined /* includeSiblingLists */, listStyle);
 }
 exports.default = toggleNumbering;
 
@@ -4476,8 +4483,9 @@ 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.
  */
-function toggleListType(editor, listType, startNumber, includeSiblingLists) {
+function toggleListType(editor, listType, startNumber, includeSiblingLists, listStyle) {
     if (includeSiblingLists === void 0) { includeSiblingLists = true; }
     (0, blockFormat_1.default)(editor, function (region, start, end, chains) {
         var _a;
@@ -4487,6 +4495,9 @@ function toggleListType(editor, listType, startNumber, includeSiblingLists) {
             : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, includeSiblingLists);
         if (vList) {
             vList.changeListType(start, end, listType);
+            if (listStyle && editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
+                vList.setListStyleType(listStyle);
+            }
             vList.writeBack();
         }
     });
@@ -4713,11 +4724,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
@@ -4808,6 +4821,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
@@ -4837,6 +4853,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);
@@ -6152,12 +6188,14 @@ var CopyPastePlugin = /** @class */ (function () {
     function CopyPastePlugin(options) {
         var _this = this;
         this.onPaste = function (event) {
+            var _a;
             var range;
-            (0, roosterjs_editor_dom_1.extractClipboardEvent)(event, function (clipboardData) { return _this.editor.paste(clipboardData); }, {
-                allowLinkPreview: _this.editor.isFeatureEnabled("PasteWithLinkPreview" /* PasteWithLinkPreview */),
+            (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 */),
                 allowedCustomPasteType: _this.state.allowedCustomPasteType,
                 getTempDiv: function () {
-                    range = _this.editor.getSelectionRange();
+                    var _a;
+                    range = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getSelectionRange();
                     return _this.getTempDiv();
                 },
                 removeTempDiv: function (div) {
@@ -7321,6 +7359,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);
@@ -7337,7 +7376,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;
                     }
@@ -7345,16 +7384,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;
 }
@@ -7634,7 +7677,8 @@ var UndoPlugin = /** @class */ (function () {
     UndoPlugin.prototype.onKeyDown = function (evt) {
         // Handle backspace/delete when there is a selection to take a snapshot
         // since we want the state prior to deletion restorable
-        if (evt.which == 8 /* BACKSPACE */ || evt.which == 46 /* DELETE */) {
+        // Ignore if keycombo is ALT+BACKSPACE
+        if ((evt.which == 8 /* BACKSPACE */ && !evt.altKey) || evt.which == 46 /* DELETE */) {
             if (evt.which == 8 /* BACKSPACE */ && this.canUndoAutoComplete()) {
                 evt.preventDefault();
                 this.editor.undo();
@@ -9669,11 +9713,24 @@ var SelectionBlockScoper = /** @class */ (function () {
      * @param startFrom Where to start, can be Begin, End, SelectionStart
      */
     function SelectionBlockScoper(rootNode, position, startFrom) {
+        var _a;
         this.rootNode = rootNode;
         this.startFrom = startFrom;
-        position = (0, safeInstanceOf_1.default)(position, 'Range') ? Position_1.default.getStart(position) : position;
-        this.position = position.normalize();
-        this.block = (0, getBlockElementAtNode_1.default)(this.rootNode, this.position.node);
+        // Debugging info, will be removed later
+        var isPosition = false;
+        if ((0, safeInstanceOf_1.default)(position, 'Range')) {
+            position = Position_1.default.getStart(position);
+        }
+        else {
+            isPosition = true;
+        }
+        try {
+            this.position = position.normalize();
+            this.block = (0, getBlockElementAtNode_1.default)(this.rootNode, this.position.node);
+        }
+        catch (e) {
+            throw new Error(((_a = e) === null || _a === void 0 ? void 0 : _a.message) + "; isPosition: " + isPosition + "; actual type: " + typeof position + "; String name: " + (typeof (position === null || position === void 0 ? void 0 : position.toString) === 'function' ? position.toString() : 'No toString()'));
+        }
     }
     /**
      * Get the start block element
@@ -11231,7 +11288,8 @@ exports.default = getPredefinedCssForElement;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.toArray = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.arrayPush = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
-exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.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.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;
 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");
@@ -11419,6 +11477,18 @@ var deleteSelectedContent_1 = __webpack_require__(/*! ./edit/deleteSelectedConte
 Object.defineProperty(exports, "deleteSelectedContent", { enumerable: true, get: function () { return deleteSelectedContent_1.default; } });
 var getTextContent_1 = __webpack_require__(/*! ./edit/getTextContent */ "./packages/roosterjs-editor-dom/lib/edit/getTextContent.ts");
 Object.defineProperty(exports, "getTextContent", { enumerable: true, get: function () { return getTextContent_1.default; } });
+var validate_1 = __webpack_require__(/*! ./metadata/validate */ "./packages/roosterjs-editor-dom/lib/metadata/validate.ts");
+Object.defineProperty(exports, "validate", { enumerable: true, get: function () { return validate_1.default; } });
+var definitionCreators_1 = __webpack_require__(/*! ./metadata/definitionCreators */ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts");
+Object.defineProperty(exports, "createNumberDefinition", { enumerable: true, get: function () { return definitionCreators_1.createNumberDefinition; } });
+Object.defineProperty(exports, "createBooleanDefinition", { enumerable: true, get: function () { return definitionCreators_1.createBooleanDefinition; } });
+Object.defineProperty(exports, "createStringDefinition", { enumerable: true, get: function () { return definitionCreators_1.createStringDefinition; } });
+Object.defineProperty(exports, "createArrayDefinition", { enumerable: true, get: function () { return definitionCreators_1.createArrayDefinition; } });
+Object.defineProperty(exports, "createObjectDefinition", { enumerable: true, get: function () { return definitionCreators_1.createObjectDefinition; } });
+var metadata_1 = __webpack_require__(/*! ./metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
+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; } });
 
 
 /***/ }),
@@ -11825,7 +11895,7 @@ var splitTextNode_1 = __webpack_require__(/*! ../utils/splitTextNode */ "./packa
 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");
 var splitParentNode_1 = __webpack_require__(/*! ../utils/splitParentNode */ "./packages/roosterjs-editor-dom/lib/utils/splitParentNode.ts");
-var STYLET_AGS = 'SPAN,B,I,U,EM,STRONG,STRIKE,S,SMALL'.split(',');
+var STYLET_AGS = 'SPAN,B,I,U,EM,STRONG,STRIKE,S,SMALL,SUP,SUB'.split(',');
 /**
  * Apply style using a styler function to the given container node in the given range
  * @param container The container node to apply style to
@@ -12089,6 +12159,8 @@ var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterj
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 var 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
  *
@@ -12262,6 +12334,8 @@ var VList = /** @class */ (function () {
                     start++;
                 }
             }
+            var itemIndex = _this.getListItemIndex(item.getNode());
+            item.applyListStyle(_this.rootList, itemIndex);
             lastList = topList;
         });
         // Restore the content to the position of placeholder
@@ -12339,6 +12413,14 @@ var VList = /** @class */ (function () {
             return needChangeType ? item.changeListType(targetType) : item.outdent();
         });
     };
+    /**
+     * 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
+     */
+    VList.prototype.setListStyleType = function (targetStyle) {
+        (0, metadata_1.setMetadata)(this.rootList, targetStyle, (0, definitionCreators_1.createNumberDefinition)());
+    };
     /**
      * Append a new item to this VList
      * @param node node of the item to append. If it is not wrapped with LI tag, it will be wrapped
@@ -12678,10 +12760,13 @@ var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./package
 var isBlockElement_1 = __webpack_require__(/*! ../utils/isBlockElement */ "./packages/roosterjs-editor-dom/lib/utils/isBlockElement.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+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 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 metadata_1 = __webpack_require__(/*! ../metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
 var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
 var MARGIN_BASE = '0in 0in 0in 0.5in';
 var NEGATIVE_MARGIN = '-.25in';
@@ -12842,6 +12927,27 @@ var VListItem = /** @class */ (function () {
     VListItem.prototype.setNewListStart = function (startNumber) {
         this.newListStart = startNumber;
     };
+    /**
+     * Apply the list style type
+     * @param rootList the vList that receives the style
+     * @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;
+        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);
+                }
+            }
+            else {
+                this.node.style.removeProperty('list-style-type');
+            }
+        }
+    };
     /**
      * Write the change result back into DOM
      * @param listStack current stack of list elements
@@ -12971,6 +13077,111 @@ function getChildrenAndUnwrap(node) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/list/convertDecimalsToAlpha.ts":
+/*!**************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/list/convertDecimalsToAlpha.ts ***!
+  \**************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var ALPHABET = {
+    0: 'A',
+    1: 'B',
+    2: 'C',
+    3: 'D',
+    4: 'E',
+    5: 'F',
+    6: 'G',
+    7: 'H',
+    8: 'I',
+    9: 'J',
+    10: 'K',
+    11: 'L',
+    12: 'M',
+    13: 'N',
+    14: 'O',
+    15: 'P',
+    16: 'Q',
+    17: 'R',
+    18: 'S',
+    19: 'T',
+    20: 'U',
+    21: 'V',
+    22: 'W',
+    23: 'X',
+    24: 'Y',
+    25: 'Z',
+};
+/**
+ * @internal
+ * Convert decimal numbers into english alphabet letters
+ * @param decimal The decimal number that needs to be converted
+ * @param isLowerCase if true the roman value will appear in lower case
+ * @returns
+ */
+function convertDecimalsToAlpha(decimal, isLowerCase) {
+    var alpha = '';
+    while (decimal >= 0) {
+        alpha = ALPHABET[decimal % 26] + alpha;
+        decimal = Math.floor(decimal / 26) - 1;
+    }
+    return isLowerCase ? alpha.toLowerCase() : alpha;
+}
+exports.default = convertDecimalsToAlpha;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/list/convertDecimalsToRomans.ts":
+/*!***************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/list/convertDecimalsToRomans.ts ***!
+  \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var RomanValues = {
+    M: 1000,
+    CM: 900,
+    D: 500,
+    CD: 400,
+    C: 100,
+    XC: 90,
+    L: 50,
+    XL: 40,
+    X: 10,
+    IX: 9,
+    V: 5,
+    IV: 4,
+    I: 1,
+};
+/**
+ * @internal
+ * Convert decimal numbers into roman numbers
+ * @param decimal The decimal number that needs to be converted
+ * @param isLowerCase if true the roman value will appear in lower case
+ * @returns
+ */
+function convertDecimalsToRoman(decimal, isLowerCase) {
+    var romanValue = '';
+    for (var _i = 0, _a = Object.keys(RomanValues); _i < _a.length; _i++) {
+        var i = _a[_i];
+        var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
+        decimal = decimal - timesRomanCharAppear * RomanValues[i];
+        romanValue = romanValue + i.repeat(timesRomanCharAppear);
+    }
+    return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
+}
+exports.default = convertDecimalsToRoman;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/list/createVListFromRegion.ts":
@@ -13172,6 +13383,41 @@ function getRootListNode(region, selector, node) {
 exports.default = getRootListNode;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/list/setBulletListMarkers.ts":
+/*!************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/list/setBulletListMarkers.ts ***!
+  \************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @internal
+ * Set the marker of a bullet list
+ * @param li
+ * @param listStyleType
+ */
+function setBulletListMarkers(li, listStyleType) {
+    var marker = bulletListStyle[listStyleType];
+    var isDiscOrSquare = listStyleType === 0 /* Disc */ || listStyleType === 2 /* 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);
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/list/setListItemStyle.ts":
@@ -13231,6 +13477,388 @@ function getInlineChildElementsStyle(element) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/list/setNumberingListMarkers.ts":
+/*!***************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/list/setNumberingListMarkers.ts ***!
+  \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+var convertDecimalsToAlpha_1 = __webpack_require__(/*! ./convertDecimalsToAlpha */ "./packages/roosterjs-editor-dom/lib/list/convertDecimalsToAlpha.ts");
+var convertDecimalsToRomans_1 = __webpack_require__(/*! ./convertDecimalsToRomans */ "./packages/roosterjs-editor-dom/lib/list/convertDecimalsToRomans.ts");
+var MarkerTypes;
+(function (MarkerTypes) {
+    MarkerTypes[MarkerTypes["Decimal"] = 0] = "Decimal";
+    MarkerTypes[MarkerTypes["Roman"] = 1] = "Roman";
+    MarkerTypes[MarkerTypes["Alpha"] = 2] = "Alpha";
+})(MarkerTypes || (MarkerTypes = {}));
+/**
+ * @internal
+ * Set marker style of a numbering list
+ * @param listStyleType
+ * @param li
+ */
+function setNumberingListMarkers(li, listStyleType, level) {
+    var _a = numberingListStyle[listStyleType], markerSeparator = _a.markerSeparator, markerSecondSeparator = _a.markerSecondSeparator, markerType = _a.markerType, lowerCase = _a.lowerCase;
+    var markerNumber = level.toString();
+    if (markerType === MarkerTypes.Roman) {
+        markerNumber = (0, convertDecimalsToRomans_1.default)(level, lowerCase);
+    }
+    else if (markerType === MarkerTypes.Alpha) {
+        markerNumber = (0, convertDecimalsToAlpha_1.default)(level - 1, lowerCase);
+    }
+    var marker = markerSecondSeparator
+        ? markerSecondSeparator + markerNumber + markerSeparator
+        : markerNumber + markerSeparator;
+    li.style.listStyleType = "\"" + marker + "\"";
+}
+exports.default = setNumberingListMarkers;
+var numberingListStyle = (_a = {},
+    _a[0 /* Decimal */] = {
+        markerType: MarkerTypes.Decimal,
+        markerSeparator: '. ',
+    },
+    _a[1 /* DecimalDash */] = {
+        markerType: MarkerTypes.Decimal,
+        markerSeparator: '- ',
+    },
+    _a[2 /* DecimalParenthesis */] = {
+        markerType: MarkerTypes.Decimal,
+        markerSeparator: ') ',
+    },
+    _a[3 /* DecimalDoubleParenthesis */] = {
+        markerType: MarkerTypes.Decimal,
+        markerSeparator: ') ',
+        markerSecondSeparator: '(',
+    },
+    _a[4 /* LowerAlpha */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: '. ',
+        lowerCase: true,
+    },
+    _a[7 /* LowerAlphaDash */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: '- ',
+        lowerCase: true,
+    },
+    _a[5 /* LowerAlphaParenthesis */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: ') ',
+        lowerCase: true,
+    },
+    _a[6 /* LowerAlphaDoubleParenthesis */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: ') ',
+        markerSecondSeparator: '(',
+        lowerCase: true,
+    },
+    _a[8 /* UpperAlpha */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: '. ',
+    },
+    _a[11 /* UpperAlphaDash */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: '- ',
+    },
+    _a[9 /* UpperAlphaParenthesis */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: ') ',
+    },
+    _a[10 /* UpperAlphaDoubleParenthesis */] = {
+        markerType: MarkerTypes.Alpha,
+        markerSeparator: ') ',
+        markerSecondSeparator: '(',
+    },
+    _a[12 /* LowerRoman */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: '. ',
+        lowerCase: true,
+    },
+    _a[15 /* LowerRomanDash */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: '- ',
+        lowerCase: true,
+    },
+    _a[13 /* LowerRomanParenthesis */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: ') ',
+        lowerCase: true,
+    },
+    _a[14 /* LowerRomanDoubleParenthesis */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: ') ',
+        markerSecondSeparator: '(',
+        lowerCase: true,
+    },
+    _a[16 /* UpperRoman */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: '. ',
+    },
+    _a[19 /* UpperRomanDash */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: '- ',
+    },
+    _a[17 /* UpperRomanParenthesis */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: ') ',
+    },
+    _a[18 /* UpperRomanDoubleParenthesis */] = {
+        markerType: MarkerTypes.Roman,
+        markerSeparator: ') ',
+        markerSecondSeparator: '(',
+    },
+    _a);
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts":
+/*!**************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts ***!
+  \**************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = exports.createBooleanDefinition = exports.createNumberDefinition = void 0;
+/**
+ * Create a number definition
+ * @param isOptional Whether this property is optional
+ * @param value Optional value of the number
+ * @param minValue Optional minimum value
+ * @param maxValue Optional maximum value
+ * @param allowNull Allow the property to be null
+ * @returns The number definition object
+ */
+function createNumberDefinition(isOptional, value, minValue, maxValue, allowNull) {
+    return {
+        type: 1 /* Number */,
+        isOptional: isOptional,
+        value: value,
+        maxValue: maxValue,
+        minValue: minValue,
+        allowNull: allowNull,
+    };
+}
+exports.createNumberDefinition = createNumberDefinition;
+/**
+ * Create a boolean definition
+ * @param isOptional  Whether this property is optional
+ * @param value Optional expected boolean value
+ * @param allowNull Allow the property to be null
+ * @returns  The boolean definition object
+ */
+function createBooleanDefinition(isOptional, value, allowNull) {
+    return {
+        type: 0 /* Boolean */,
+        isOptional: isOptional,
+        value: value,
+        allowNull: allowNull,
+    };
+}
+exports.createBooleanDefinition = createBooleanDefinition;
+/**
+ * Create a string definition
+ * @param isOptional  Whether this property is optional
+ * @param value Optional expected string value
+ * @param allowNull Allow the property to be null
+ * @returns  The string definition object
+ */
+function createStringDefinition(isOptional, value, allowNull) {
+    return {
+        type: 2 /* String */,
+        isOptional: isOptional,
+        value: value,
+        allowNull: allowNull,
+    };
+}
+exports.createStringDefinition = createStringDefinition;
+/**
+ * Create an array definition
+ * @param itemDef Definition of each item of the related array
+ * @param isOptional  Whether this property is optional
+ * @param allowNull Allow the property to be null
+ * @returns  The array definition object
+ */
+function createArrayDefinition(itemDef, isOptional, minLength, maxLength, allowNull) {
+    return {
+        type: 3 /* Array */,
+        isOptional: isOptional,
+        itemDef: itemDef,
+        minLength: minLength,
+        maxLength: maxLength,
+        allowNull: allowNull,
+    };
+}
+exports.createArrayDefinition = createArrayDefinition;
+/**
+ * Create an object definition
+ * @param propertyDef Definition of each property of the related object
+ * @param isOptional  Whether this property is optional
+ * @param allowNull Allow the property to be null
+ * @returns  The object definition object
+ */
+function createObjectDefinition(propertyDef, isOptional, allowNull) {
+    return {
+        type: 4 /* Object */,
+        isOptional: isOptional,
+        propertyDef: propertyDef,
+        allowNull: allowNull,
+    };
+}
+exports.createObjectDefinition = createObjectDefinition;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts":
+/*!****************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/metadata/metadata.ts ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeMetadata = exports.setMetadata = exports.getMetadata = void 0;
+var validate_1 = __webpack_require__(/*! ./validate */ "./packages/roosterjs-editor-dom/lib/metadata/validate.ts");
+var MetadataDataSetName = 'editingInfo';
+/**
+ * Get metadata object from an HTML element
+ * @param element The HTML element to get metadata object from
+ * @param definition The type definition of this metadata used for validate this metadata object.
+ * If not specified, no validation will be performed and always return whatever we get from the element
+ * @param defaultValue The default value to return if the retrieved object cannot pass the validation,
+ * or there is no metadata object at all
+ * @returns The strong-type metadata object if it can be validated, or null
+ */
+function getMetadata(element, definition, defaultValue) {
+    var str = element.dataset[MetadataDataSetName];
+    var obj;
+    try {
+        obj = str ? JSON.parse(str) : null;
+    }
+    catch (_a) { }
+    if (typeof obj !== 'undefined') {
+        if (!definition) {
+            return obj;
+        }
+        else if ((0, validate_1.default)(obj, definition)) {
+            return obj;
+        }
+    }
+    if (defaultValue) {
+        return defaultValue;
+    }
+    else {
+        return null;
+    }
+}
+exports.getMetadata = getMetadata;
+/**
+ * Set metadata object into an HTML element
+ * @param element The HTML element to set metadata object to
+ * @param metadata The metadata object to set
+ * @param def An optional type definition object used for validate this metadata object.
+ * If not specified, metadata will be set without validation
+ * @returns True if metadata is set, otherwise false
+ */
+function setMetadata(element, metadata, def) {
+    if (!def || (0, validate_1.default)(metadata, def)) {
+        element.dataset[MetadataDataSetName] = JSON.stringify(metadata);
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+exports.setMetadata = setMetadata;
+/**
+ * Remove metadata from the given element if any
+ * @param element The element to remove metadata from
+ */
+function removeMetadata(element) {
+    delete element.dataset[MetadataDataSetName];
+}
+exports.removeMetadata = removeMetadata;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/metadata/validate.ts":
+/*!****************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/metadata/validate.ts ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Validate the given object with a type definition object
+ * @param input The object to validate
+ * @param def The type definition object used for validation
+ * @returns True if the object passed the validation, otherwise false
+ */
+function validate(input, def) {
+    var result = false;
+    if ((def.isOptional && typeof input === 'undefined') || (def.allowNull && input === null)) {
+        result = true;
+    }
+    else {
+        switch (def.type) {
+            case 2 /* String */:
+                result =
+                    typeof input === 'string' &&
+                        (typeof def.value === 'undefined' || input === def.value);
+                break;
+            case 1 /* Number */:
+                result =
+                    typeof input === 'number' &&
+                        (typeof def.value === 'undefined' || areSameNumbers(def.value, input)) &&
+                        (typeof def.minValue === 'undefined' || input >= def.minValue) &&
+                        (typeof def.maxValue === 'undefined' || input <= def.maxValue);
+                break;
+            case 0 /* Boolean */:
+                result =
+                    typeof input === 'boolean' &&
+                        (typeof def.value === 'undefined' || input === def.value);
+                break;
+            case 3 /* Array */:
+                result =
+                    Array.isArray(input) &&
+                        (typeof def.minLength === 'undefined' || input.length >= def.minLength) &&
+                        (typeof def.maxLength === 'undefined' || input.length <= def.maxLength) &&
+                        input.every(function (x) { return validate(x, def.itemDef); });
+                break;
+            case 4 /* Object */:
+                result =
+                    typeof input === 'object' &&
+                        Object.keys(def.propertyDef).every(function (x) { return validate(input[x], def.propertyDef[x]); });
+                break;
+            case 5 /* Customize */:
+                result = def.validator(input);
+                break;
+        }
+    }
+    return result;
+}
+exports.default = validate;
+function areSameNumbers(n1, n2) {
+    return Math.abs(n1 - n2) < 1e-3;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/region/collapseNodesInRegion.ts":
@@ -14209,6 +14837,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setHtmlWithMetadata = void 0;
 var createRange_1 = __webpack_require__(/*! ./createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+var validate_1 = __webpack_require__(/*! ../metadata/validate */ "./packages/roosterjs-editor-dom/lib/metadata/validate.ts");
+var definitionCreators_1 = __webpack_require__(/*! ../metadata/definitionCreators */ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts");
+var NumberArrayDefinition = (0, definitionCreators_1.createArrayDefinition)((0, definitionCreators_1.createNumberDefinition)());
+var CoordinatesDefinition = (0, definitionCreators_1.createObjectDefinition)({
+    x: (0, definitionCreators_1.createNumberDefinition)(),
+    y: (0, definitionCreators_1.createNumberDefinition)(),
+});
+var IsDarkModeDefinition = (0, definitionCreators_1.createBooleanDefinition)(true /*isOptional*/);
+var NormalContentMetadataDefinition = (0, definitionCreators_1.createObjectDefinition)({
+    type: (0, definitionCreators_1.createNumberDefinition)(true /*isOptional*/, 0 /* Normal */),
+    isDarkMode: IsDarkModeDefinition,
+    start: NumberArrayDefinition,
+    end: NumberArrayDefinition,
+});
+var TableContentMetadataDefinition = (0, definitionCreators_1.createObjectDefinition)({
+    type: (0, definitionCreators_1.createNumberDefinition)(false /*isOptional*/, 1 /* TableSelection */),
+    isDarkMode: IsDarkModeDefinition,
+    tableId: (0, definitionCreators_1.createStringDefinition)(),
+    firstCell: CoordinatesDefinition,
+    lastCell: CoordinatesDefinition,
+});
 /**
  * @deprecated Use setHtmlWithMetadata instead
  * Restore inner HTML of a root element from given html string. If the string contains selection path,
@@ -14243,8 +14892,11 @@ function setHtmlWithMetadata(rootNode, html, trustedHTMLHandler) {
     if ((0, safeInstanceOf_1.default)(potentialMetadataComment, 'Comment')) {
         try {
             var obj = JSON.parse(potentialMetadataComment.nodeValue || '');
-            if (isContentMetadata(obj)) {
+            if ((0, validate_1.default)(obj, NormalContentMetadataDefinition) ||
+                (0, validate_1.default)(obj, TableContentMetadataDefinition)) {
                 rootNode.removeChild(potentialMetadataComment);
+                obj.type = typeof obj.type === 'undefined' ? 0 /* Normal */ : obj.type;
+                obj.isDarkMode = obj.isDarkMode || false;
                 return obj;
             }
         }
@@ -14253,42 +14905,6 @@ function setHtmlWithMetadata(rootNode, html, trustedHTMLHandler) {
     return undefined;
 }
 exports.setHtmlWithMetadata = setHtmlWithMetadata;
-function isContentMetadata(obj) {
-    if (!obj || typeof obj != 'object') {
-        return false;
-    }
-    switch (obj.type || 0 /* Normal */) {
-        case 0 /* Normal */:
-            var regularMetadata = obj;
-            if (isNumberArray(regularMetadata.start) && isNumberArray(regularMetadata.end)) {
-                obj.type = 0 /* Normal */;
-                obj.isDarkMode = !!obj.isDarkMode;
-                return true;
-            }
-            break;
-        case 1 /* TableSelection */:
-            var tableMetadata = obj;
-            if (typeof tableMetadata.tableId == 'string' &&
-                !!tableMetadata.tableId &&
-                isCoordinates(tableMetadata.firstCell) &&
-                isCoordinates(tableMetadata.lastCell)) {
-                obj.isDarkMode = !!obj.isDarkMode;
-                return true;
-            }
-            break;
-    }
-    return false;
-}
-function isNumberArray(obj) {
-    return obj && Array.isArray(obj) && obj.every(function (o) { return typeof o == 'number'; });
-}
-function isCoordinates(obj) {
-    var coordinates = obj;
-    return (coordinates &&
-        typeof coordinates == 'object' &&
-        typeof coordinates.x == 'number' &&
-        typeof coordinates.y == 'number');
-}
 
 
 /***/ }),
@@ -15579,7 +16195,24 @@ exports.default = isWholeTableSelected;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveTableInfo = exports.getTableFormatInfo = void 0;
-var TABLE_STYLE_INFO = 'roosterTableInfo';
+var metadata_1 = __webpack_require__(/*! ../metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
+var definitionCreators_1 = __webpack_require__(/*! ../metadata/definitionCreators */ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts");
+var NullStringDefinition = (0, definitionCreators_1.createStringDefinition)(false /** isOptional */, undefined /** value */, true /** allowNull */);
+var BooleanDefinition = (0, definitionCreators_1.createBooleanDefinition)(false /** isOptional */);
+var TableFormatMetadata = (0, definitionCreators_1.createObjectDefinition)({
+    topBorderColor: NullStringDefinition,
+    bottomBorderColor: NullStringDefinition,
+    verticalBorderColor: NullStringDefinition,
+    hasHeaderRow: BooleanDefinition,
+    headerRowColor: NullStringDefinition,
+    hasFirstColumn: BooleanDefinition,
+    hasBandedColumns: BooleanDefinition,
+    hasBandedRows: BooleanDefinition,
+    bgColorEven: NullStringDefinition,
+    bgColorOdd: NullStringDefinition,
+    tableBorderFormat: (0, definitionCreators_1.createNumberDefinition)(false /** isOptional */, undefined /* value */, 0 /* first table border format */, 7 /* last table border format */),
+    keepCellShade: BooleanDefinition,
+}, false /* isOptional */, true /** allowNull */);
 /**
  * @internal
  * Get the format info of a table
@@ -15587,8 +16220,7 @@ var TABLE_STYLE_INFO = 'roosterTableInfo';
  * @param table The table that has the info
  */
 function getTableFormatInfo(table) {
-    var obj = safeParseJSON(table === null || table === void 0 ? void 0 : table.dataset[TABLE_STYLE_INFO]);
-    return checkIfTableFormatIsValid(obj) ? obj : null;
+    return (0, metadata_1.getMetadata)(table, TableFormatMetadata);
 }
 exports.getTableFormatInfo = getTableFormatInfo;
 /**
@@ -15599,59 +16231,10 @@ exports.getTableFormatInfo = getTableFormatInfo;
  */
 function saveTableInfo(table, format) {
     if (table && format) {
-        table.dataset[TABLE_STYLE_INFO] = JSON.stringify(format);
+        (0, metadata_1.setMetadata)(table, format, TableFormatMetadata);
     }
 }
 exports.saveTableInfo = saveTableInfo;
-function checkIfTableFormatIsValid(format) {
-    if (!format) {
-        return false;
-    }
-    var topBorderColor = format.topBorderColor, verticalBorderColor = format.verticalBorderColor, bottomBorderColor = format.bottomBorderColor, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven, hasBandedColumns = format.hasBandedColumns, hasBandedRows = format.hasBandedRows, hasFirstColumn = format.hasFirstColumn, hasHeaderRow = format.hasHeaderRow, tableBorderFormat = format.tableBorderFormat;
-    var colorsValues = [
-        topBorderColor,
-        verticalBorderColor,
-        bottomBorderColor,
-        bgColorOdd,
-        bgColorEven,
-    ];
-    var stateValues = [hasBandedColumns, hasBandedRows, hasFirstColumn, hasHeaderRow];
-    if (colorsValues.some(function (key) { return !isAValidColor(key); }) ||
-        stateValues.some(function (key) { return !isBoolean(key); }) ||
-        !isAValidTableBorderType(tableBorderFormat)) {
-        return false;
-    }
-    return true;
-}
-function isAValidColor(color) {
-    if (color === null || color === undefined || typeof color === 'string') {
-        return true;
-    }
-    return false;
-}
-function isBoolean(a) {
-    if (typeof a === 'boolean') {
-        return true;
-    }
-    return false;
-}
-function isAValidTableBorderType(border) {
-    if (-1 < border && border < 8) {
-        return true;
-    }
-    return false;
-}
-function safeParseJSON(json) {
-    if (!json) {
-        return null;
-    }
-    try {
-        return JSON.parse(json);
-    }
-    catch (_a) {
-        return null;
-    }
-}
 
 
 /***/ }),
@@ -15672,9 +16255,10 @@ var isAndroidRegex = /android/i;
  * Get current browser information from user agent string
  * @param userAgent The userAgent string of a browser
  * @param appVersion The appVersion string of a browser
+ * @param vendor The vendor string of a browser
  * @returns The BrowserInfo object calculated from the given userAgent and appVersion
  */
-function getBrowserInfo(userAgent, appVersion) {
+function getBrowserInfo(userAgent, appVersion, vendor) {
     // checks whether the browser is running in IE
     // IE11 will use rv in UA instead of MSIE. Unfortunately Firefox also uses this. We should also look for "Trident" to confirm this.
     // There have been cases where companies using older version of IE and custom UserAgents have broken this logic (e.g. IE 10 and KellyServices)
@@ -15687,6 +16271,16 @@ function getBrowserInfo(userAgent, appVersion) {
     var isSafari = false;
     var isEdge = false;
     var isWebKit = userAgent.indexOf('WebKit') != -1;
+    var isMobileOrTablet = false;
+    // Reference: http://detectmobilebrowsers.com/
+    // The default regex on the website doesn't consider tablet.
+    // To support tablet, add |android|ipad|playbook|silk to the first regex according to the info in /about page
+    (function (userAgentOrVendor) {
+        if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(userAgentOrVendor)
+            || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(userAgentOrVendor.substr(0, 4))) {
+            isMobileOrTablet = true;
+        }
+    })(userAgent || vendor || "");
     if (!isIE) {
         isChrome = userAgent.indexOf('Chrome') != -1;
         isFirefox = userAgent.indexOf('Firefox') != -1;
@@ -15716,6 +16310,7 @@ function getBrowserInfo(userAgent, appVersion) {
         isEdge: isEdge,
         isIEOrEdge: isIE || isEdge,
         isAndroid: isAndroid,
+        isMobileOrTablet: isMobileOrTablet,
     };
 }
 exports.getBrowserInfo = getBrowserInfo;
@@ -15723,7 +16318,7 @@ exports.getBrowserInfo = getBrowserInfo;
  * Browser object contains browser and operating system information of current environment
  */
 exports.Browser = window
-    ? getBrowserInfo(window.navigator.userAgent, window.navigator.appVersion)
+    ? getBrowserInfo(window.navigator.userAgent, window.navigator.appVersion, window.navigator.vendor)
     : {};
 
 
@@ -17095,7 +17690,7 @@ function getColorsFromRGB(color) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var getTagOfNode_1 = __webpack_require__(/*! ./getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
 var getComputedStyles_1 = __webpack_require__(/*! ./getComputedStyles */ "./packages/roosterjs-editor-dom/lib/utils/getComputedStyles.ts");
-var CRLF = /^[\r\n]+$/gm;
+var CRLF = /^[\r\n]+$/g;
 var CRLF_SPACE = /[\t\r\n\u0020\u200B]/gm; // We should only find new line, real space or ZeroWidthSpace (TAB, %20, but not &nbsp;)
 /**
  * @internal
@@ -17355,6 +17950,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":
@@ -17689,6 +18309,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);
 
 
 /***/ }),
@@ -17703,6 +18324,41 @@ __exportStar(__webpack_require__(/*! ./TableCellSelection */ "./packages/rooster
 "use strict";
 
 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 and getXY function based on different platforms to be compatible with desktop and mobile browsers
+ */
+var MOUSE_EVENT_INFO = (function () {
+    if (lib_1.Browser.isMobileOrTablet) {
+        return {
+            MOUSEDOWN: 'touchstart',
+            MOUSEMOVE: 'touchmove',
+            MOUSEUP: 'touchend',
+            getPageXY: getTouchEventPageXY,
+        };
+    }
+    else {
+        return {
+            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
@@ -17725,19 +18381,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);
             }
@@ -17750,30 +18407,136 @@ var DragAndDropHelper = /** @class */ (function () {
                 (_c = _this.onSubmit) === null || _c === void 0 ? void 0 : _c.call(_this, _this.context, _this.trigger);
             }
         };
-        trigger.addEventListener('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('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('mousemove', this.onMouseMove, true /*useCapture*/);
-        doc.addEventListener('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('mousemove', this.onMouseMove, true /*useCapture*/);
-        doc.removeEventListener('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":
@@ -18171,6 +18934,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 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");
 /**
@@ -18274,6 +19039,16 @@ var OutdentWhenEnterOnEmptyLine = {
     },
     defaultDisabled: !roosterjs_editor_dom_1.Browser.isIE && !roosterjs_editor_dom_1.Browser.isChrome,
 };
+/**
+ * Validate if a block of text is considered a list pattern
+ * The regex expression will look for patterns of the form:
+ * 1.  1>  1)  1-  (1)
+ * @returns if a text is considered a list pattern
+ */
+function isAListPattern(textBeforeCursor) {
+    var REGEX = /^(\*|-|[0-9]{1,2}\.|[0-9]{1,2}\>|[0-9]{1,2}\)|[0-9]{1,2}\-|\([0-9]{1,2}\))$/;
+    return REGEX.test(textBeforeCursor);
+}
 /**
  * AutoBullet edit feature, provides the ability to automatically convert current line into a list.
  * When user input "1. ", convert into a numbering list
@@ -18285,10 +19060,15 @@ 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 isAListPattern(textBeforeCursor) && !searcher.getNearestNonTextInlineElement();
+            return listTrigger(textBeforeCursor) && !searcher.getNearestNonTextInlineElement();
         }
         return false;
     },
@@ -18301,22 +19081,35 @@ 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 (textBeforeCursor.indexOf('*') == 0 ||
-                textBeforeCursor.indexOf('-') == 0) {
+            else if (listType === 2 /* Unordered */) {
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleBullet)(editor);
+                (0, roosterjs_editor_api_1.toggleBullet)(editor, listStyle);
             }
-            else if (isAListPattern(textBeforeCursor)) {
+            else if (listType === 1 /* Ordered */) {
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleNumbering)(editor);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor, undefined /* startNumber*/, listStyle);
             }
             else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
                 var num = parseInt(textBeforeCursor);
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleNumbering)(editor, num);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor, num, listStyle);
             }
             (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
         }, null /*changeSource*/, true /*canUndoByBackspace*/);
@@ -18339,16 +19132,6 @@ var MaintainListChain = {
         editor.runAsync(function (editor) { return (0, roosterjs_editor_api_1.experimentCommitListChains)(editor, chains); });
     },
 };
-/**
- * Validate if a block of text is considered a list pattern
- * The regex expression will look for patterns of the form:
- * 1.  1>  1)  1-  (1)
- * @returns if a text is considered a list pattern
- */
-function isAListPattern(textBeforeCursor) {
-    var REGEX = /^(\*|-|[0-9]{1,2}\.|[0-9]{1,2}\>|[0-9]{1,2}\)|[0-9]{1,2}\-|\([0-9]{1,2}\))$/;
-    return REGEX.test(textBeforeCursor);
-}
 function getListChains(editor) {
     return roosterjs_editor_dom_1.VListChain.createListChains(editor.getSelectedRegions());
 }
@@ -18654,7 +19437,9 @@ var commands = [
     createCommand(4096 /* Ctrl */ | 66 /* B */, 8192 /* Meta */ | 66 /* B */, roosterjs_editor_api_1.toggleBold),
     createCommand(4096 /* Ctrl */ | 73 /* I */, 8192 /* Meta */ | 73 /* I */, roosterjs_editor_api_1.toggleItalic),
     createCommand(4096 /* Ctrl */ | 85 /* U */, 8192 /* Meta */ | 85 /* U */, roosterjs_editor_api_1.toggleUnderline),
+    createCommand(4096 /* Ctrl */ | 32 /* SPACE */, 8192 /* Meta */ | 32 /* SPACE */, roosterjs_editor_api_1.clearFormat),
     createCommand(4096 /* Ctrl */ | 90 /* Z */, 8192 /* Meta */ | 90 /* Z */, function (editor) { return editor.undo(); }),
+    createCommand(18 /* ALT */ | 8 /* BACKSPACE */, 18 /* ALT */ | 8 /* BACKSPACE */, function (editor) { return editor.undo(); }),
     createCommand(4096 /* Ctrl */ | 89 /* Y */, 8192 /* Meta */ | 16384 /* Shift */ | 90 /* Z */, function (editor) { return editor.redo(); }),
     createCommand(4096 /* Ctrl */ | 190 /* PERIOD */, 8192 /* Meta */ | 190 /* PERIOD */, roosterjs_editor_api_1.toggleBullet),
     createCommand(4096 /* Ctrl */ | 191 /* FORWARD_SLASH */, 8192 /* Meta */ | 191 /* FORWARD_SLASH */, roosterjs_editor_api_1.toggleNumbering),
@@ -18666,6 +19451,8 @@ var commands = [
  * Ctrl/Meta+B: toggle bold style
  * Ctrl/Meta+I: toggle italic style
  * Ctrl/Meta+U: toggle underline style
+ * Ctrl/Meta+Space: clear formatting
+ * Alt+Backspace: undo
  * Ctrl/Meta+Z: undo
  * Ctrl+Y/Meta+Shift+Z: redo
  * Ctrl/Meta+PERIOD: toggle bullet list
@@ -18675,7 +19462,18 @@ var commands = [
  */
 var DefaultShortcut = {
     allowFunctionKeys: true,
-    keys: [66 /* B */, 73 /* I */, 85 /* U */, 89 /* Y */, 90 /* Z */, 188 /* COMMA */, 190 /* PERIOD */, 191 /* FORWARD_SLASH */],
+    keys: [
+        66 /* B */,
+        73 /* I */,
+        85 /* U */,
+        89 /* Y */,
+        90 /* Z */,
+        188 /* COMMA */,
+        190 /* PERIOD */,
+        191 /* FORWARD_SLASH */,
+        32 /* SPACE */,
+        8 /* BACKSPACE */,
+    ],
     shouldHandleEvent: cacheGetCommand,
     handleEvent: function (event, editor) {
         var command = cacheGetCommand(event);
@@ -18690,13 +19488,16 @@ function cacheGetCommand(event) {
     return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'DEFAULT_SHORT_COMMAND', function () {
         var e = event.rawEvent;
         var key = 
-        // Need to check ALT key to be false since in some language (e.g. Polski) uses AltGr to input some special characters
-        // In that case, ctrlKey and altKey are both true in Edge, but we should not trigger any shortcut function here
-        event.eventType == 0 /* KeyDown */ && !e.altKey
+        // Need to check AltGraph isn't being pressed since some languages (e.g. Polski) use AltGr
+        // to input some special characters. In that case, ctrlKey and altKey are both true in Edge,
+        // but we should not trigger any shortcut function here. However, we still want to capture
+        // the ALT+BACKSPACE combination.
+        event.eventType == 0 /* KeyDown */ && !e.getModifierState('AltGraph')
             ? e.which |
                 (e.metaKey && 8192 /* Meta */) |
                 (e.shiftKey && 16384 /* Shift */) |
-                (e.ctrlKey && 4096 /* Ctrl */)
+                (e.ctrlKey && 4096 /* Ctrl */) |
+                (e.altKey && 18 /* ALT */)
             : 0;
         return key && commands.filter(function (cmd) { return (roosterjs_editor_dom_1.Browser.isMac ? cmd.macKey : cmd.winKey) == key; })[0];
     });
@@ -19018,12 +19819,27 @@ var OutdentWhenTabText = {
         event.rawEvent.preventDefault();
     },
 };
+/**
+ * @deprecated
+ * Automatically transform -- into hyphen, if typed between two words.
+ */
+var AutoHyphen = {
+    keys: [],
+    shouldHandleEvent: function (event, editor) {
+        return false;
+    },
+    handleEvent: function (event, editor) {
+        return false;
+    },
+    defaultDisabled: true,
+};
 /**
  * @internal
  */
 exports.TextFeatures = {
     indentWhenTabText: IndentWhenTabText,
     outdentWhenTabText: OutdentWhenTabText,
+    autoHyphen: AutoHyphen,
 };
 function shouldSetIndentation(editor, range) {
     var result = false;
@@ -19031,6 +19847,9 @@ function shouldSetIndentation(editor, range) {
     var endPosition = roosterjs_editor_dom_1.Position.getEnd(range);
     var firstBlock = editor.getBlockElementAtNode(startPosition.node);
     var lastBlock = editor.getBlockElementAtNode(endPosition.node);
+    if (!firstBlock || !lastBlock) {
+        return false;
+    }
     if (!firstBlock.equals(lastBlock)) {
         //If the selections has more than one block, we indent all the blocks in the selection
         return true;
@@ -19142,6 +19961,161 @@ var getAllFeatures_1 = __webpack_require__(/*! ./getAllFeatures */ "./packages/r
 Object.defineProperty(exports, "getAllFeatures", { enumerable: true, get: function () { return getAllFeatures_1.default; } });
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListStyle.ts":
+/*!*****************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getListStyle.ts ***!
+  \*****************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var _a, _b, _c, _d, _e, _f;
+Object.defineProperty(exports, "__esModule", { value: true });
+var characters = {
+    '.': 0 /* Dot */,
+    '-': 1 /* Dash */,
+    ')': 2 /* Parenthesis */,
+    '(': 3 /* DoubleParenthesis */,
+};
+var identifyCharacter = function (text) {
+    var char = text[0] === '(' ? text[0] : text[text.length - 1];
+    return characters[char];
+};
+var identifyNumberingType = function (text) {
+    var char = text[0] === '(' ? text[1] : text[0];
+    if (!isNaN(parseInt(char))) {
+        return 0 /* Decimal */;
+    }
+    else if (/[a-z]+/g.test(char)) {
+        if (char === 'i') {
+            return 3 /* LowerRoman */;
+        }
+        else {
+            return 1 /* LowerAlpha */;
+        }
+    }
+    else if (/[A-Z]+/g.test(char)) {
+        if (char === 'I') {
+            return 4 /* UpperRoman */;
+        }
+        else {
+            return 2 /* 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);
+var UpperRomanTypes = (_b = {},
+    _b[0 /* Dot */] = 16 /* UpperRoman */,
+    _b[1 /* Dash */] = 19 /* UpperRomanDash */,
+    _b[2 /* Parenthesis */] = 17 /* UpperRomanParenthesis */,
+    _b[3 /* DoubleParenthesis */] = 18 /* 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);
+var UpperAlphaTypes = (_d = {},
+    _d[0 /* Dot */] = 8 /* UpperAlpha */,
+    _d[1 /* Dash */] = 11 /* UpperAlphaDash */,
+    _d[2 /* Parenthesis */] = 9 /* UpperAlphaParenthesis */,
+    _d[3 /* DoubleParenthesis */] = 10 /* 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);
+var DecimalsTypes = (_f = {},
+    _f[0 /* Dot */] = 0 /* Decimal */,
+    _f[1 /* Dash */] = 1 /* DecimalDash */,
+    _f[2 /* Parenthesis */] = 2 /* DecimalParenthesis */,
+    _f[3 /* DoubleParenthesis */] = 3 /* 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);
+    }
+    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, ''));
+}
+/**
+ * @internal
+ * @param textBeforeCursor The trigger character
+ * @returns If the list is ordered or unordered
+ */
+function getListType(textBeforeCursor) {
+    if (isABulletList(textBeforeCursor)) {
+        return 2 /* Unordered */;
+    }
+    else if (isANumberingList(textBeforeCursor)) {
+        return 1 /* Ordered */;
+    }
+}
+exports.default = getListType;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContextMenu/ContextMenu.ts":
@@ -19823,9 +20797,13 @@ var ImageEdit = /** @class */ (function () {
     /**
      * Create a new instance of ImageEdit
      * @param options Image editing options
+     * @param onShowResizeHandle An optional callback to allow customize resize handle element of image resizing.
+     * To customize the resize handle element, add this callback and change the attributes of elementData then it
+     * will be picked up by ImageEdit code
      */
-    function ImageEdit(options) {
+    function ImageEdit(options, onShowResizeHandle) {
         var _this = this;
+        this.onShowResizeHandle = onShowResizeHandle;
         // Allowed editing operations
         this.allowedOperations = 1 /* CornerResize */;
         /**
@@ -20078,7 +21056,7 @@ var ImageEdit = /** @class */ (function () {
         var htmlData = [(0, Resizer_1.getResizeBordersHTML)(options)];
         Object.keys(ImageEditHTMLMap).forEach(function (thisOperation) {
             if ((operation & thisOperation) == thisOperation) {
-                (0, roosterjs_editor_dom_1.arrayPush)(htmlData, ImageEditHTMLMap[thisOperation](options));
+                (0, roosterjs_editor_dom_1.arrayPush)(htmlData, ImageEditHTMLMap[thisOperation](options, _this.onShowResizeHandle));
             }
         });
         htmlData.forEach(function (data) {
@@ -20962,16 +21940,20 @@ exports.doubleCheckResize = doubleCheckResize;
  * @internal
  * Get HTML for resize handles at the corners
  */
-function getCornerResizeHTML(_a) {
+function getCornerResizeHTML(_a, onShowResizeHandle) {
     var resizeBorderColor = _a.borderColor, handlesExperimentalFeatures = _a.handlesExperimentalFeatures;
     var result = [];
     Xs.forEach(function (x) {
         return Ys.forEach(function (y) {
-            return result.push((x == '') == (y == '')
+            var elementData = (x == '') == (y == '')
                 ? getResizeHandleHTML(x, y, resizeBorderColor, handlesExperimentalFeatures
                     ? 1 /* CircularHandlesCorner */
                     : 0 /* SquareHandles */)
-                : null);
+                : null;
+            if (onShowResizeHandle) {
+                onShowResizeHandle(elementData, x, y);
+            }
+            result.push(elementData);
         });
     });
     return result;
@@ -20981,7 +21963,7 @@ exports.getCornerResizeHTML = getCornerResizeHTML;
  * @internal
  * Get HTML for resize handles on the sides
  */
-function getSideResizeHTML(_a) {
+function getSideResizeHTML(_a, onShowResizeHandle) {
     var resizeBorderColor = _a.borderColor, isSmallImage = _a.isSmallImage, handlesExperimentalFeatures = _a.handlesExperimentalFeatures;
     if (isSmallImage) {
         return null;
@@ -20989,11 +21971,15 @@ function getSideResizeHTML(_a) {
     var result = [];
     Xs.forEach(function (x) {
         return Ys.forEach(function (y) {
-            return result.push((x == '') != (y == '')
+            var elementData = (x == '') != (y == '')
                 ? getResizeHandleHTML(x, y, resizeBorderColor, handlesExperimentalFeatures
                     ? 1 /* CircularHandlesCorner */
                     : 0 /* SquareHandles */)
-                : null);
+                : null;
+            if (onShowResizeHandle) {
+                onShowResizeHandle(elementData, x, y);
+            }
+            result.push(elementData);
         });
     });
     return result;
@@ -21308,6 +22294,7 @@ var convertPastedContentFromExcel_1 = __webpack_require__(/*! ./excelConverter/c
 var convertPastedContentFromPowerPoint_1 = __webpack_require__(/*! ./pptConverter/convertPastedContentFromPowerPoint */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/pptConverter/convertPastedContentFromPowerPoint.ts");
 var convertPastedContentFromWord_1 = __webpack_require__(/*! ./wordConverter/convertPastedContentFromWord */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/convertPastedContentFromWord.ts");
 var handleLineMerge_1 = __webpack_require__(/*! ./lineMerge/handleLineMerge */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/lineMerge/handleLineMerge.ts");
+var sanitizeHtmlColorsFromPastedContent_1 = __webpack_require__(/*! ./sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var convertPastedContentFromWordOnline_1 = __webpack_require__(/*! ./officeOnlineConverter/convertPastedContentFromWordOnline */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts");
 var WORD_ATTRIBUTE_NAME = 'xmlns:w';
@@ -21402,6 +22389,7 @@ var Paste = /** @class */ (function () {
                 (0, convertPastedContentForLI_1.default)(fragment);
                 (0, handleLineMerge_1.default)(fragment);
             }
+            (0, sanitizeHtmlColorsFromPastedContent_1.default)(sanitizingOption);
             // Replace unknown tags with SPAN
             sanitizingOption.unknownTagReplacement = this.unknownTagReplacement;
         }
@@ -21999,6 +22987,77 @@ function convertPastedContentFromPowerPoint(event, trustedHTMLHandler) {
 exports.default = convertPastedContentFromPowerPoint;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/deprecatedColorList.ts":
+/*!************************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/deprecatedColorList.ts ***!
+  \************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+/**
+ * @internal
+ * List of deprecated colors that should be removed
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeprecatedColorList = void 0;
+exports.DeprecatedColorList = [
+    'activeborder',
+    'activecaption',
+    'appworkspace',
+    'background',
+    'buttonhighlight',
+    'buttonshadow',
+    'captiontext',
+    'inactiveborder',
+    'inactivecaption',
+    'inactivecaptiontext',
+    'infobackground',
+    'infotext',
+    'menu',
+    'menutext',
+    'scrollbar',
+    'threeddarkshadow',
+    'threedface',
+    'threedhighlight',
+    'threedlightshadow',
+    'threedfhadow',
+    'window',
+    'windowframe',
+    'windowtext',
+];
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent.ts":
+/*!****************************************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent.ts ***!
+  \****************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var deprecatedColorList_1 = __webpack_require__(/*! ./deprecatedColorList */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/deprecatedColorList.ts");
+/**
+ * @internal
+ * Remove the deprecated colors from pasted content
+ * @param sanitizingOption the sanitizingOption of BeforePasteEvent
+ * */
+function sanitizeHtmlColorsFromPastedContent(sanitizingOption) {
+    ['color', 'background-color'].forEach(function (property) {
+        (0, roosterjs_editor_dom_1.chainSanitizerCallback)(sanitizingOption.cssStyleCallbacks, property, function (value) { return deprecatedColorList_1.DeprecatedColorList.indexOf(value) < 0; });
+    });
+}
+exports.default = sanitizeHtmlColorsFromPastedContent;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/LevelLists.ts":
@@ -23535,7 +24594,7 @@ var TableCellSelection = /** @class */ (function () {
         if (shiftKey) {
             if (!this.firstTarget) {
                 var pos = this.editor.getFocusedPosition();
-                var cell = getCellAtCursor(this.editor, pos.node);
+                var cell = pos && getCellAtCursor(this.editor, pos.node);
                 this.firstTarget = this.firstTarget || cell;
             }
             //If first target is not a table cell, we should ignore this plugin
@@ -23544,7 +24603,10 @@ var TableCellSelection = /** @class */ (function () {
             }
             this.editor.runAsync(function (editor) {
                 var pos = editor.getFocusedPosition();
-                _this.setData(_this.tableSelection ? _this.lastTarget : pos.node);
+                var newTarget = _this.tableSelection ? _this.lastTarget : pos === null || pos === void 0 ? void 0 : pos.node;
+                if (newTarget) {
+                    _this.setData(newTarget);
+                }
                 if (_this.firstTable == _this.targetTable) {
                     if (!_this.shouldConvertToTableSelection() && !_this.tableSelection) {
                         return;
@@ -25101,6 +26163,51 @@ var CompatibleAlignment;
 })(CompatibleAlignment = exports.CompatibleAlignment || (exports.CompatibleAlignment = {}));
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/BulletListType.ts":
+/*!******************************************************************************!*\
+  !*** ./packages/roosterjs-editor-types/lib/compatibleEnum/BulletListType.ts ***!
+  \******************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompatibleBulletListType = void 0;
+/**
+ *  Enum used to control the different types of bullet list
+ */
+var CompatibleBulletListType;
+(function (CompatibleBulletListType) {
+    /**
+     * Bullet triggered by *
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Disc"] = 0] = "Disc";
+    /**
+     * Bullet triggered by -
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Dash"] = 1] = "Dash";
+    /**
+     * Bullet triggered by --
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Square"] = 2] = "Square";
+    /**
+     * Bullet triggered by >
+     */
+    CompatibleBulletListType[CompatibleBulletListType["ShortArrow"] = 3] = "ShortArrow";
+    /**
+     * Bullet triggered by -> or -->
+     */
+    CompatibleBulletListType[CompatibleBulletListType["LongArrow"] = 4] = "LongArrow";
+    /**
+     * Bullet triggered by =>
+     */
+    CompatibleBulletListType[CompatibleBulletListType["UnfilledArrow"] = 5] = "UnfilledArrow";
+})(CompatibleBulletListType = exports.CompatibleBulletListType || (exports.CompatibleBulletListType = {}));
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/Capitalization.ts":
@@ -25399,6 +26506,51 @@ var CompatibleDarkModeDatasetNames;
 })(CompatibleDarkModeDatasetNames = exports.CompatibleDarkModeDatasetNames || (exports.CompatibleDarkModeDatasetNames = {}));
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/DefinitionType.ts":
+/*!******************************************************************************!*\
+  !*** ./packages/roosterjs-editor-types/lib/compatibleEnum/DefinitionType.ts ***!
+  \******************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompatibleDefinitionType = void 0;
+/**
+ * Types of definitions, used by Definition type
+ */
+var CompatibleDefinitionType;
+(function (CompatibleDefinitionType) {
+    /**
+     * Boolean type definition, represents a boolean type value
+     */
+    CompatibleDefinitionType[CompatibleDefinitionType["Boolean"] = 0] = "Boolean";
+    /**
+     * Number type definition, represents a number type value
+     */
+    CompatibleDefinitionType[CompatibleDefinitionType["Number"] = 1] = "Number";
+    /**
+     * String type definition, represents a string type value
+     */
+    CompatibleDefinitionType[CompatibleDefinitionType["String"] = 2] = "String";
+    /**
+     * Array type definition, represents an array with a given item type
+     */
+    CompatibleDefinitionType[CompatibleDefinitionType["Array"] = 3] = "Array";
+    /**
+     * Object type definition, represents an object with the given property types
+     */
+    CompatibleDefinitionType[CompatibleDefinitionType["Object"] = 4] = "Object";
+    /**
+     * Customize type definition, represents a customized type with a validator function
+     */
+    CompatibleDefinitionType[CompatibleDefinitionType["Customize"] = 5] = "Customize";
+})(CompatibleDefinitionType = exports.CompatibleDefinitionType || (exports.CompatibleDefinitionType = {}));
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/Direction.ts":
@@ -25899,6 +27051,15 @@ var CompatibleExperimentalFeatures;
      * Align list elements elements to left, center and right using setAlignment API
      */
     CompatibleExperimentalFeatures["ListItemAlignment"] = "ListItemAlignment";
+    /**
+     * Trigger formatting by a especial characters. Ex: (A), 1. i).
+     */
+    CompatibleExperimentalFeatures["AutoFormatList"] = "AutoFormatList";
+    /**
+     * @deprecated this feature is always disabled
+     * Automatically transform -- into hyphen, if typed between two words.
+     */
+    CompatibleExperimentalFeatures["AutoHyphen"] = "AutoHyphen";
 })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));
 
 
@@ -26284,6 +27445,107 @@ var CompatibleNodeType;
 })(CompatibleNodeType = exports.CompatibleNodeType || (exports.CompatibleNodeType = {}));
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/NumberingListType.ts":
+/*!*********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-types/lib/compatibleEnum/NumberingListType.ts ***!
+  \*********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompatibleNumberingListType = void 0;
+/**
+ *  Enum used to control the different types of numbering list
+ */
+var CompatibleNumberingListType;
+(function (CompatibleNumberingListType) {
+    /**
+     * Numbering triggered by 1.
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["Decimal"] = 0] = "Decimal";
+    /**
+     * Numbering triggered by 1-
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["DecimalDash"] = 1] = "DecimalDash";
+    /**
+     * Numbering triggered by 1)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["DecimalParenthesis"] = 2] = "DecimalParenthesis";
+    /**
+     * Numbering triggered by (1)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["DecimalDoubleParenthesis"] = 3] = "DecimalDoubleParenthesis";
+    /**
+     * Numbering triggered by a.
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlpha"] = 4] = "LowerAlpha";
+    /**
+     * Numbering triggered by a)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaParenthesis"] = 5] = "LowerAlphaParenthesis";
+    /**
+     * Numbering triggered by (a)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaDoubleParenthesis"] = 6] = "LowerAlphaDoubleParenthesis";
+    /**
+     * Numbering triggered by a-
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerAlphaDash"] = 7] = "LowerAlphaDash";
+    /**
+     * Numbering triggered by A.
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlpha"] = 8] = "UpperAlpha";
+    /**
+     * Numbering triggered by A)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaParenthesis"] = 9] = "UpperAlphaParenthesis";
+    /**
+     * Numbering triggered by (A)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaDoubleParenthesis"] = 10] = "UpperAlphaDoubleParenthesis";
+    /**
+     * Numbering triggered by A-
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperAlphaDash"] = 11] = "UpperAlphaDash";
+    /**
+     * Numbering triggered by i.
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRoman"] = 12] = "LowerRoman";
+    /**
+     * Numbering triggered by i)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanParenthesis"] = 13] = "LowerRomanParenthesis";
+    /**
+     * Numbering triggered by (i)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanDoubleParenthesis"] = 14] = "LowerRomanDoubleParenthesis";
+    /**
+     * Numbering triggered by i-
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["LowerRomanDash"] = 15] = "LowerRomanDash";
+    /**
+     * Numbering triggered by I.
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRoman"] = 16] = "UpperRoman";
+    /**
+     * Numbering triggered by I)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanParenthesis"] = 17] = "UpperRomanParenthesis";
+    /**
+     * Numbering triggered by (I)
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanDoubleParenthesis"] = 18] = "UpperRomanDoubleParenthesis";
+    /**
+     * Numbering triggered by I-
+     */
+    CompatibleNumberingListType[CompatibleNumberingListType["UpperRomanDash"] = 19] = "UpperRomanDash";
+})(CompatibleNumberingListType = exports.CompatibleNumberingListType || (exports.CompatibleNumberingListType = {}));
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/PluginEventType.ts":
@@ -26732,9 +27994,11 @@ var CompatibleTableOperation;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompatibleTableOperation = exports.CompatibleTableBorderFormat = exports.CompatibleSelectionRangeTypes = exports.CompatibleRegionType = exports.CompatibleQueryScope = exports.CompatiblePositionType = exports.CompatiblePluginEventType = exports.CompatibleNodeType = exports.CompatibleListType = exports.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = exports.CompatibleDarkModeDatasetNames = exports.CompatibleContentType = exports.CompatibleContentTypePrefix = exports.CompatibleContentPosition = exports.CompatibleColorTransformDirection = exports.CompatibleClearFormatMode = exports.CompatibleChangeSource = exports.CompatibleCapitalization = exports.CompatibleAlignment = void 0;
+exports.CompatibleTableOperation = exports.CompatibleTableBorderFormat = exports.CompatibleSelectionRangeTypes = exports.CompatibleRegionType = exports.CompatibleQueryScope = exports.CompatiblePositionType = exports.CompatiblePluginEventType = exports.CompatibleNumberingListType = exports.CompatibleNodeType = exports.CompatibleListType = exports.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = exports.CompatibleDefinitionType = exports.CompatibleDarkModeDatasetNames = exports.CompatibleContentType = exports.CompatibleContentTypePrefix = exports.CompatibleContentPosition = exports.CompatibleColorTransformDirection = exports.CompatibleClearFormatMode = exports.CompatibleChangeSource = exports.CompatibleCapitalization = exports.CompatibleBulletListType = exports.CompatibleAlignment = void 0;
 var Alignment_1 = __webpack_require__(/*! ./Alignment */ "./packages/roosterjs-editor-types/lib/compatibleEnum/Alignment.ts");
 Object.defineProperty(exports, "CompatibleAlignment", { enumerable: true, get: function () { return Alignment_1.CompatibleAlignment; } });
+var BulletListType_1 = __webpack_require__(/*! ./BulletListType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/BulletListType.ts");
+Object.defineProperty(exports, "CompatibleBulletListType", { enumerable: true, get: function () { return BulletListType_1.CompatibleBulletListType; } });
 var Capitalization_1 = __webpack_require__(/*! ./Capitalization */ "./packages/roosterjs-editor-types/lib/compatibleEnum/Capitalization.ts");
 Object.defineProperty(exports, "CompatibleCapitalization", { enumerable: true, get: function () { return Capitalization_1.CompatibleCapitalization; } });
 var ChangeSource_1 = __webpack_require__(/*! ./ChangeSource */ "./packages/roosterjs-editor-types/lib/compatibleEnum/ChangeSource.ts");
@@ -26750,6 +28014,8 @@ Object.defineProperty(exports, "CompatibleContentTypePrefix", { enumerable: true
 Object.defineProperty(exports, "CompatibleContentType", { enumerable: true, get: function () { return ContentType_1.CompatibleContentType; } });
 var DarkModeDatasetNames_1 = __webpack_require__(/*! ./DarkModeDatasetNames */ "./packages/roosterjs-editor-types/lib/compatibleEnum/DarkModeDatasetNames.ts");
 Object.defineProperty(exports, "CompatibleDarkModeDatasetNames", { enumerable: true, get: function () { return DarkModeDatasetNames_1.CompatibleDarkModeDatasetNames; } });
+var DefinitionType_1 = __webpack_require__(/*! ./DefinitionType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/DefinitionType.ts");
+Object.defineProperty(exports, "CompatibleDefinitionType", { enumerable: true, get: function () { return DefinitionType_1.CompatibleDefinitionType; } });
 var Direction_1 = __webpack_require__(/*! ./Direction */ "./packages/roosterjs-editor-types/lib/compatibleEnum/Direction.ts");
 Object.defineProperty(exports, "CompatibleDirection", { enumerable: true, get: function () { return Direction_1.CompatibleDirection; } });
 var DocumentCommand_1 = __webpack_require__(/*! ./DocumentCommand */ "./packages/roosterjs-editor-types/lib/compatibleEnum/DocumentCommand.ts");
@@ -26778,6 +28044,8 @@ var ListType_1 = __webpack_require__(/*! ./ListType */ "./packages/roosterjs-edi
 Object.defineProperty(exports, "CompatibleListType", { enumerable: true, get: function () { return ListType_1.CompatibleListType; } });
 var NodeType_1 = __webpack_require__(/*! ./NodeType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/NodeType.ts");
 Object.defineProperty(exports, "CompatibleNodeType", { enumerable: true, get: function () { return NodeType_1.CompatibleNodeType; } });
+var NumberingListType_1 = __webpack_require__(/*! ./NumberingListType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/NumberingListType.ts");
+Object.defineProperty(exports, "CompatibleNumberingListType", { enumerable: true, get: function () { return NumberingListType_1.CompatibleNumberingListType; } });
 var PluginEventType_1 = __webpack_require__(/*! ./PluginEventType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PluginEventType.ts");
 Object.defineProperty(exports, "CompatiblePluginEventType", { enumerable: true, get: function () { return PluginEventType_1.CompatiblePluginEventType; } });
 var PositionType_1 = __webpack_require__(/*! ./PositionType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PositionType.ts");