roosterjs 9.0.0 → 9.2.0

package/dist/rooster.js

@@ -2094,8 +2094,8 @@ exports["default"] = getDarkColor;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.setModelListStyle = exports.setListType = exports.formatSegmentWithContentModel = exports.formatParagraphWithContentModel = exports.formatImageWithContentModel = exports.formatTableWithContentModel = exports.insertTableColumn = exports.insertTableRow = exports.insertEntity = exports.toggleCode = exports.setParagraphMargin = exports.adjustImageSelection = exports.setImageAltText = exports.adjustLinkSelection = exports.removeLink = exports.insertLink = exports.clearFormat = exports.getFormatState = exports.changeImage = exports.setImageBoxShadow = exports.setImageBorder = exports.setSpacing = exports.toggleBlockQuote = exports.setHeadingLevel = exports.setDirection = exports.setAlignment = exports.setIndentation = exports.setListStartNumber = exports.setListStyle = exports.insertImage = exports.changeCapitalization = exports.applySegmentFormat = exports.changeFontSize = exports.setTextColor = exports.setFontSize = exports.setFontName = exports.setBackgroundColor = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleUnderline = exports.toggleItalic = exports.toggleBold = exports.toggleNumbering = exports.toggleBullet = exports.applyTableBorderFormat = exports.editTable = exports.setTableCellShade = exports.formatTable = exports.insertTable = void 0;
-exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = void 0;
+exports.formatTextSegmentBeforeSelectionMarker = exports.formatSegmentWithContentModel = exports.formatParagraphWithContentModel = exports.formatImageWithContentModel = exports.formatTableWithContentModel = exports.clearSelectedCells = exports.insertTableColumn = exports.insertTableRow = exports.insertEntity = exports.toggleCode = exports.setParagraphMargin = exports.adjustImageSelection = exports.setImageAltText = exports.adjustLinkSelection = exports.removeLink = exports.insertLink = exports.clearFormat = exports.getFormatState = exports.changeImage = exports.setImageBoxShadow = exports.setImageBorder = exports.setSpacing = exports.toggleBlockQuote = exports.setHeadingLevel = exports.setDirection = exports.setAlignment = exports.setIndentation = exports.setListStartNumber = exports.setListStyle = exports.insertImage = exports.changeCapitalization = exports.applySegmentFormat = exports.changeFontSize = exports.setTextColor = exports.setFontSize = exports.setFontName = exports.setBackgroundColor = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleUnderline = exports.toggleItalic = exports.toggleBold = exports.toggleNumbering = exports.toggleBullet = exports.applyTableBorderFormat = exports.editTable = exports.setTableCellShade = exports.formatTable = exports.insertTable = void 0;
+exports.getListAnnounceData = exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = void 0;
 var insertTable_1 = __webpack_require__(/*! ./publicApi/table/insertTable */ "./packages/roosterjs-content-model-api/lib/publicApi/table/insertTable.ts");
 Object.defineProperty(exports, "insertTable", ({ enumerable: true, get: function () { return insertTable_1.insertTable; } }));
 var formatTable_1 = __webpack_require__(/*! ./publicApi/table/formatTable */ "./packages/roosterjs-content-model-api/lib/publicApi/table/formatTable.ts");
@@ -2184,6 +2184,8 @@ var insertTableRow_1 = __webpack_require__(/*! ./modelApi/table/insertTableRow *
 Object.defineProperty(exports, "insertTableRow", ({ enumerable: true, get: function () { return insertTableRow_1.insertTableRow; } }));
 var insertTableColumn_1 = __webpack_require__(/*! ./modelApi/table/insertTableColumn */ "./packages/roosterjs-content-model-api/lib/modelApi/table/insertTableColumn.ts");
 Object.defineProperty(exports, "insertTableColumn", ({ enumerable: true, get: function () { return insertTableColumn_1.insertTableColumn; } }));
+var clearSelectedCells_1 = __webpack_require__(/*! ./modelApi/table/clearSelectedCells */ "./packages/roosterjs-content-model-api/lib/modelApi/table/clearSelectedCells.ts");
+Object.defineProperty(exports, "clearSelectedCells", ({ enumerable: true, get: function () { return clearSelectedCells_1.clearSelectedCells; } }));
 var formatTableWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatTableWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTableWithContentModel.ts");
 Object.defineProperty(exports, "formatTableWithContentModel", ({ enumerable: true, get: function () { return formatTableWithContentModel_1.formatTableWithContentModel; } }));
 var formatImageWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatImageWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatImageWithContentModel.ts");
@@ -2192,6 +2194,8 @@ var formatParagraphWithContentModel_1 = __webpack_require__(/*! ./publicApi/util
 Object.defineProperty(exports, "formatParagraphWithContentModel", ({ enumerable: true, get: function () { return formatParagraphWithContentModel_1.formatParagraphWithContentModel; } }));
 var formatSegmentWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatSegmentWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatSegmentWithContentModel.ts");
 Object.defineProperty(exports, "formatSegmentWithContentModel", ({ enumerable: true, get: function () { return formatSegmentWithContentModel_1.formatSegmentWithContentModel; } }));
+var formatTextSegmentBeforeSelectionMarker_1 = __webpack_require__(/*! ./publicApi/utils/formatTextSegmentBeforeSelectionMarker */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts");
+Object.defineProperty(exports, "formatTextSegmentBeforeSelectionMarker", ({ enumerable: true, get: function () { return formatTextSegmentBeforeSelectionMarker_1.formatTextSegmentBeforeSelectionMarker; } }));
 var setListType_1 = __webpack_require__(/*! ./modelApi/list/setListType */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setListType.ts");
 Object.defineProperty(exports, "setListType", ({ enumerable: true, get: function () { return setListType_1.setListType; } }));
 var setModelListStyle_1 = __webpack_require__(/*! ./modelApi/list/setModelListStyle */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setModelListStyle.ts");
@@ -2204,6 +2208,8 @@ var setModelIndentation_1 = __webpack_require__(/*! ./modelApi/block/setModelInd
 Object.defineProperty(exports, "setModelIndentation", ({ enumerable: true, get: function () { return setModelIndentation_1.setModelIndentation; } }));
 var matchLink_1 = __webpack_require__(/*! ./modelApi/link/matchLink */ "./packages/roosterjs-content-model-api/lib/modelApi/link/matchLink.ts");
 Object.defineProperty(exports, "matchLink", ({ enumerable: true, get: function () { return matchLink_1.matchLink; } }));
+var getListAnnounceData_1 = __webpack_require__(/*! ./modelApi/list/getListAnnounceData */ "./packages/roosterjs-content-model-api/lib/modelApi/list/getListAnnounceData.ts");
+Object.defineProperty(exports, "getListAnnounceData", ({ enumerable: true, get: function () { return getListAnnounceData_1.getListAnnounceData; } }));
 
 
 /***/ }),
@@ -2370,7 +2376,9 @@ function setProperty(format, key, value) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setModelIndentation = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var findListItemsInSameThread_1 = __webpack_require__(/*! ../list/findListItemsInSameThread */ "./packages/roosterjs-content-model-api/lib/modelApi/list/findListItemsInSameThread.ts");
+var getListAnnounceData_1 = __webpack_require__(/*! ../list/getListAnnounceData */ "./packages/roosterjs-content-model-api/lib/modelApi/list/getListAnnounceData.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var IndentStepInPixel = 40;
 /**
@@ -2379,7 +2387,7 @@ var IndentStepInPixel = 40;
  * @param length The length of indentation in pixel, default value is 40
  * Set indentation for selected list items or paragraphs
  */
-function setModelIndentation(model, indentation, length) {
+function setModelIndentation(model, indentation, length, context) {
     if (length === void 0) { length = IndentStepInPixel; }
     var paragraphOrListItem = (0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem'], ['TableCell']);
     var isIndent = indentation == 'indent';
@@ -2426,6 +2434,9 @@ function setModelIndentation(model, indentation, length) {
                 else {
                     block.levels.pop();
                 }
+                if (block.levels.length > 0 && context) {
+                    context.announceData = (0, getListAnnounceData_1.getListAnnounceData)((0, tslib_1.__spreadArray)([block], (0, tslib_1.__read)(path), false));
+                }
             }
         }
         else if (block) {
@@ -3126,9 +3137,9 @@ exports.findListItemsInSameThread = void 0;
  * @param currentItem The current list item
  * Search for all list items in the same thread as the current list item
  */
-function findListItemsInSameThread(model, currentItem) {
+function findListItemsInSameThread(group, currentItem) {
     var items = [];
-    findListItems(model, items);
+    findListItems(group, items);
     return filterListItems(items, currentItem);
 }
 exports.findListItemsInSameThread = findListItemsInSameThread;
@@ -3196,7 +3207,9 @@ function filterListItems(items, currentItem) {
                     break;
                 }
             }
-            else if (!isOrderedList || startNumberOverride) {
+            else if (!isOrderedList ||
+                startNumberOverride ||
+                item.levels.length < currentItem.levels.length) {
                 break;
             }
         }
@@ -3214,7 +3227,9 @@ function filterListItems(items, currentItem) {
             if (areListTypesCompatible(items, currentIndex, i) && !startNumberOverride) {
                 result.push(item);
             }
-            else if (!isOrderedList || startNumberOverride) {
+            else if (!isOrderedList ||
+                startNumberOverride ||
+                item.levels.length < currentItem.levels.length) {
                 break;
             }
         }
@@ -3234,6 +3249,85 @@ function hasStartNumberOverride(item, levelLength) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-api/lib/modelApi/list/getListAnnounceData.ts":
+/*!***************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-api/lib/modelApi/list/getListAnnounceData.ts ***!
+  \***************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getListAnnounceData = void 0;
+var findListItemsInSameThread_1 = __webpack_require__(/*! ./findListItemsInSameThread */ "./packages/roosterjs-content-model-api/lib/modelApi/list/findListItemsInSameThread.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * Get announce data for list item
+ * @param path Content model path that include the list item
+ * @returns Announce data of current list item if any, or null
+ */
+function getListAnnounceData(path) {
+    var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem'], ['TableCell']);
+    if (index >= 0) {
+        var listItem = path[index];
+        var level = listItem.levels[listItem.levels.length - 1];
+        if (level.format.displayForDummyItem) {
+            return null;
+        }
+        else if (level.listType == 'OL') {
+            var listNumber = getListNumber(path, listItem);
+            var metadata = (0, roosterjs_content_model_dom_1.updateListMetadata)(level);
+            var listStyle = (0, roosterjs_content_model_dom_1.getAutoListStyleType)('OL', metadata !== null && metadata !== void 0 ? metadata : {}, listItem.levels.length - 1, level.format.listStyleType);
+            return listStyle === undefined
+                ? null
+                : {
+                    defaultStrings: 'announceListItemNumbering',
+                    formatStrings: [(0, roosterjs_content_model_dom_1.getOrderedListNumberStr)(listStyle, listNumber)],
+                };
+        }
+        else {
+            return {
+                defaultStrings: 'announceListItemBullet',
+            };
+        }
+    }
+    else {
+        return null;
+    }
+}
+exports.getListAnnounceData = getListAnnounceData;
+function getListNumber(path, listItem) {
+    var _a, _b;
+    var items = (0, findListItemsInSameThread_1.findListItemsInSameThread)(path[path.length - 1], listItem);
+    var listNumber = 0;
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        if (listNumber == 0 && item.levels.length == listItem.levels.length) {
+            listNumber = (_b = (_a = item.levels[item.levels.length - 1]) === null || _a === void 0 ? void 0 : _a.format.startNumberOverride) !== null && _b !== void 0 ? _b : 1;
+        }
+        if (item == listItem) {
+            // Found current item, so break and return
+            break;
+        }
+        else if (item.levels.length < listItem.levels.length) {
+            // Found upper level item, reset list number
+            listNumber = 0;
+        }
+        else if (item.levels.length > listItem.levels.length) {
+            // Found deeper level item, skip
+            continue;
+        }
+        else if (!item.levels[item.levels.length - 1].format.displayForDummyItem) {
+            // Save level, and is not dummy, number plus one
+            listNumber++;
+        }
+    }
+    return listNumber;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-api/lib/modelApi/list/setListType.ts":
@@ -3882,7 +3976,6 @@ exports.clearSelectedCells = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * Clear selection of a table.
- * @internal
  * @param table The table model where the selection is to be cleared
  * @param sel The selection coordinates to be cleared
  */
@@ -4989,6 +5082,8 @@ function insertImageWithSrc(editor, src) {
         (0, roosterjs_content_model_dom_1.mergeModel)(model, doc, context, {
             mergeFormat: 'mergeAll',
         });
+        image.isSelected = true;
+        (0, roosterjs_content_model_dom_1.setSelection)(model, image);
         return true;
     }, {
         apiName: 'insertImage',
@@ -6301,6 +6396,7 @@ var alignTableCell_1 = __webpack_require__(/*! ../../modelApi/table/alignTableCe
  */
 function editTable(editor, operation) {
     editor.focus();
+    fixUpSafariSelection(editor);
     (0, formatTableWithContentModel_1.formatTableWithContentModel)(editor, 'editTable', function (tableModel) {
         switch (operation) {
             case 'alignCellLeft':
@@ -6356,6 +6452,22 @@ function editTable(editor, operation) {
     });
 }
 exports.editTable = editTable;
+// In safari, when open context menu under a table, it may expand the range selection to the beginning of next table cell.
+// So we make a workaround here to collapse the selection when need, to avoid unexpected table editing behavior
+// (e.g. insert two columns but actually need one only)
+function fixUpSafariSelection(editor) {
+    if (editor.getEnvironment().isSafari) {
+        var selection = editor.getDOMSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && !selection.range.collapsed) {
+            selection.range.collapse(true /*toStart*/);
+            editor.setDOMSelection({
+                type: 'range',
+                range: selection.range,
+                isReverted: false,
+            });
+        }
+    }
+}
 
 
 /***/ }),
@@ -6737,7 +6849,8 @@ function formatSegmentWithContentModel(editor, apiName, toggleStyleCallback, seg
             segmentAndParagraphs[0][0].segmentType == 'SelectionMarker';
         if (isCollapsedSelection) {
             var para_1 = segmentAndParagraphs[0][1];
-            segmentAndParagraphs = (0, adjustWordSelection_1.adjustWordSelection)(model, segmentAndParagraphs[0][0]).map(function (x) { return [x, para_1]; });
+            var path_1 = segmentAndParagraphs[0][2];
+            segmentAndParagraphs = (0, adjustWordSelection_1.adjustWordSelection)(model, segmentAndParagraphs[0][0]).map(function (x) { return [x, para_1, path_1]; });
             if (segmentAndParagraphs.length > 1) {
                 isCollapsedSelection = false;
             }
@@ -6822,6 +6935,48 @@ function formatTableWithContentModel(editor, apiName, callback, selectionOverrid
 exports.formatTableWithContentModel = formatTableWithContentModel;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts":
+/*!************************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts ***!
+  \************************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.formatTextSegmentBeforeSelectionMarker = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * Invoke a callback to format the text segment before the selection marker using Content Model
+ * @param editor The editor object
+ * @param callback The callback to format the text segment.
+ * @returns True if the segment before cursor is found and callback is called, otherwise false
+ */
+function formatTextSegmentBeforeSelectionMarker(editor, callback, options) {
+    var result = false;
+    editor.formatContentModel(function (model, context) {
+        var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /*includeFormatHolder*/);
+        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
+            var marker = selectedSegmentsAndParagraphs[0][0];
+            var paragraph = selectedSegmentsAndParagraphs[0][1];
+            var markerIndex = paragraph.segments.indexOf(marker);
+            if (marker.segmentType === 'SelectionMarker' && markerIndex > 0) {
+                var previousSegment = paragraph.segments[markerIndex - 1];
+                if (previousSegment && previousSegment.segmentType === 'Text') {
+                    result = true;
+                    return callback(model, previousSegment, paragraph, marker.format, context);
+                }
+            }
+        }
+        return false;
+    }, options);
+    return result;
+}
+exports.formatTextSegmentBeforeSelectionMarker = formatTextSegmentBeforeSelectionMarker;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/command/createModelFromHtml/convertInlineCss.ts":
@@ -8086,6 +8241,69 @@ function getPath(node, offset, rootNode) {
 exports.getPath = getPath;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/coreApi/announce/announce.ts":
+/*!********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/coreApi/announce/announce.ts ***!
+  \********************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.announce = void 0;
+/**
+ * @internal
+ * Announce the given data
+ * @param core The EditorCore object
+ * @param announceData Data to announce
+ */
+var announce = function (core, announceData) {
+    var _a;
+    var text = announceData.text, defaultStrings = announceData.defaultStrings, _b = announceData.formatStrings, formatStrings = _b === void 0 ? [] : _b;
+    var announcerStringGetter = core.lifecycle.announcerStringGetter;
+    var template = defaultStrings && (announcerStringGetter === null || announcerStringGetter === void 0 ? void 0 : announcerStringGetter(defaultStrings));
+    var textToAnnounce = formatString(template || text, formatStrings);
+    if (textToAnnounce) {
+        var announceContainer = core.lifecycle.announceContainer;
+        if (!announceContainer || textToAnnounce == announceContainer.textContent) {
+            (_a = announceContainer === null || announceContainer === void 0 ? void 0 : announceContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(announceContainer);
+            announceContainer = createAriaLiveElement(core.physicalRoot.ownerDocument);
+            core.lifecycle.announceContainer = announceContainer;
+        }
+        if (announceContainer) {
+            announceContainer.textContent = textToAnnounce;
+        }
+    }
+};
+exports.announce = announce;
+function formatString(text, formatStrings) {
+    if (text == undefined) {
+        return text;
+    }
+    text = text.replace(/\{(\d+)\}/g, function (_, sub) {
+        var index = parseInt(sub);
+        var replace = formatStrings[index];
+        return replace !== null && replace !== void 0 ? replace : '';
+    });
+    return text;
+}
+function createAriaLiveElement(document) {
+    var div = document.createElement('div');
+    div.style.clip = 'rect(0px, 0px, 0px, 0px)';
+    div.style.clipPath = 'inset(100%)';
+    div.style.height = '1px';
+    div.style.overflow = 'hidden';
+    div.style.position = 'absolute';
+    div.style.whiteSpace = 'nowrap';
+    div.style.width = '1px';
+    div.ariaLive = 'assertive';
+    document.body.appendChild(div);
+    return div;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/coreApi/attachDomEvent/attachDomEvent.ts":
@@ -8145,6 +8363,7 @@ exports.attachDomEvent = attachDomEvent;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.coreApiMap = void 0;
 var addUndoSnapshot_1 = __webpack_require__(/*! ./addUndoSnapshot/addUndoSnapshot */ "./packages/roosterjs-content-model-core/lib/coreApi/addUndoSnapshot/addUndoSnapshot.ts");
+var announce_1 = __webpack_require__(/*! ./announce/announce */ "./packages/roosterjs-content-model-core/lib/coreApi/announce/announce.ts");
 var attachDomEvent_1 = __webpack_require__(/*! ./attachDomEvent/attachDomEvent */ "./packages/roosterjs-content-model-core/lib/coreApi/attachDomEvent/attachDomEvent.ts");
 var createContentModel_1 = __webpack_require__(/*! ./createContentModel/createContentModel */ "./packages/roosterjs-content-model-core/lib/coreApi/createContentModel/createContentModel.ts");
 var createEditorContext_1 = __webpack_require__(/*! ./createEditorContext/createEditorContext */ "./packages/roosterjs-content-model-core/lib/coreApi/createEditorContext/createEditorContext.ts");
@@ -8179,6 +8398,7 @@ exports.coreApiMap = {
     switchShadowEdit: switchShadowEdit_1.switchShadowEdit,
     getVisibleViewport: getVisibleViewport_1.getVisibleViewport,
     setEditorStyle: setEditorStyle_1.setEditorStyle,
+    announce: announce_1.announce,
 };
 
 
@@ -8262,17 +8482,12 @@ var createEditorContext = function (core, saveIndex) {
     var lifecycle = core.lifecycle, format = core.format, darkColorHandler = core.darkColorHandler, logicalRoot = core.logicalRoot, cache = core.cache, domHelper = core.domHelper;
     saveIndex = saveIndex && !core.lifecycle.shadowEditFragment;
     var context = (0, tslib_1.__assign)({ isDarkMode: lifecycle.isDarkMode, defaultFormat: format.defaultFormat, pendingFormat: (_a = format.pendingFormat) !== null && _a !== void 0 ? _a : undefined, darkColorHandler: darkColorHandler, addDelimiterForEntity: true, allowCacheElement: true, domIndexer: saveIndex ? cache.domIndexer : undefined, zoomScale: domHelper.calculateZoomScale() }, (0, getRootComputedStyleForContext_1.getRootComputedStyleForContext)(logicalRoot.ownerDocument));
-    checkRootRtl(logicalRoot, context);
+    if (core.domHelper.isRightToLeft()) {
+        context.isRootRtl = true;
+    }
     return context;
 };
 exports.createEditorContext = createEditorContext;
-function checkRootRtl(element, context) {
-    var _a;
-    var style = (_a = element === null || element === void 0 ? void 0 : element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(element);
-    if ((style === null || style === void 0 ? void 0 : style.direction) == 'rtl') {
-        context.isRootRtl = true;
-    }
-}
 
 
 /***/ }),
@@ -8420,19 +8635,19 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
         }
         handlePendingFormat(core, context, core.api.getDOMSelection(core));
     }
+    if (context.announceData) {
+        core.api.announce(core, context.announceData);
+    }
 };
 exports.formatContentModel = formatContentModel;
 function handleImages(core, context) {
     if (context.newImages.length > 0) {
-        var viewport = core.api.getVisibleViewport(core);
-        if (viewport) {
-            var left = viewport.left, right = viewport.right;
-            var minMaxImageSize = 10;
-            var maxWidth_1 = Math.max(right - left, minMaxImageSize);
-            context.newImages.forEach(function (image) {
-                image.format.maxWidth = maxWidth_1 + "px";
-            });
-        }
+        var width = core.domHelper.getClientWidth();
+        var minMaxImageSize = 10;
+        var maxWidth_1 = Math.max(width, minMaxImageSize);
+        context.newImages.forEach(function (image) {
+            image.format.maxWidth = maxWidth_1 + "px";
+        });
     }
 }
 function handlePendingFormat(core, context, selection) {
@@ -8652,7 +8867,6 @@ exports.restoreSnapshotColors = restoreSnapshotColors;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.restoreSnapshotHTML = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var BlockEntityContainer = '_E_EBlockEntityContainer';
 /**
  * @internal
  */
@@ -8704,22 +8918,19 @@ function tryGetEntityElement(entityMap, node) {
             var format = (0, roosterjs_content_model_dom_1.parseEntityFormat)(node);
             result = getEntityWrapperForReuse(entityMap, format.id);
         }
-        else if (isBlockEntityContainer(node)) {
+        else if ((0, roosterjs_content_model_dom_1.isBlockEntityContainer)(node)) {
             result = tryGetEntityFromContainer(node, entityMap);
         }
     }
     return result;
 }
-function isBlockEntityContainer(node) {
-    return node.classList.contains(BlockEntityContainer);
-}
 function tryGetEntityFromContainer(element, entityMap) {
     var _a;
     for (var node = element.firstChild; node; node = node.nextSibling) {
         if ((0, roosterjs_content_model_dom_1.isEntityElement)(node) && (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE')) {
             var format = (0, roosterjs_content_model_dom_1.parseEntityFormat)(node);
             var parent_1 = (_a = getEntityWrapperForReuse(entityMap, format.id)) === null || _a === void 0 ? void 0 : _a.parentElement;
-            return (0, roosterjs_content_model_dom_1.isNodeOfType)(parent_1, 'ELEMENT_NODE') && isBlockEntityContainer(parent_1)
+            return (0, roosterjs_content_model_dom_1.isNodeOfType)(parent_1, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isBlockEntityContainer)(parent_1)
                 ? parent_1
                 : null;
         }
@@ -8946,6 +9157,14 @@ function addRangeToSelection(doc, range, isReverted) {
     if (isReverted === void 0) { isReverted = false; }
     var selection = (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
     if (selection) {
+        var currentRange = selection.rangeCount > 0 && selection.getRangeAt(0);
+        if (currentRange &&
+            currentRange.startContainer == range.startContainer &&
+            currentRange.endContainer == range.endContainer &&
+            currentRange.startOffset == range.startOffset &&
+            currentRange.endOffset == range.endOffset) {
+            return;
+        }
         selection.removeAllRanges();
         if (!isReverted) {
             selection.addRange(range);
@@ -9066,11 +9285,14 @@ var findTableCellElement_1 = __webpack_require__(/*! ./findTableCellElement */ "
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var DOM_SELECTION_CSS_KEY = '_DOMSelection';
 var HIDE_CURSOR_CSS_KEY = '_DOMSelectionHideCursor';
+var HIDE_SELECTION_CSS_KEY = '_DOMSelectionHideSelection';
 var IMAGE_ID = 'image';
 var TABLE_ID = 'table';
 var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
 var TABLE_CSS_RULE = 'background-color:#C6C6C6!important;';
 var CARET_CSS_RULE = 'caret-color: transparent';
+var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important';
+var SELECTION_SELECTOR = '*::selection';
 /**
  * @internal
  */
@@ -9083,14 +9305,15 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     core.selection.skipReselectOnFocus = true;
     core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, null /*cssRule*/);
     core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, null /*cssRule*/);
+    core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, null /*cssRule*/);
     try {
         switch (selection === null || selection === void 0 ? void 0 : selection.type) {
             case 'image':
                 var image = selection.image;
                 core.selection.selection = selection;
                 core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID)]);
-                core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
-                setRangeSelection(doc, image);
+                core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, TRANSPARENT_SELECTION_CSS_RULE, [SELECTION_SELECTOR]);
+                setRangeSelection(doc, image, false /* collapse */);
                 break;
             case 'table':
                 var table = selection.table, firstColumn = selection.firstColumn, firstRow = selection.firstRow, lastColumn = selection.lastColumn, lastRow = selection.lastRow;
@@ -9132,7 +9355,7 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
                 core.api.setEditorStyle(core, HIDE_CURSOR_CSS_KEY, CARET_CSS_RULE);
                 var nodeToSelect = ((_c = firstCell.cell) === null || _c === void 0 ? void 0 : _c.firstElementChild) || firstCell.cell;
                 if (nodeToSelect) {
-                    setRangeSelection(doc, nodeToSelect || undefined);
+                    setRangeSelection(doc, nodeToSelect || undefined, true /* collapse */);
                 }
                 break;
             case 'range':
@@ -9198,12 +9421,25 @@ function handleTableSelected(parsedTable, tableId, table, firstCell, lastCell) {
     });
     return selectors;
 }
-function setRangeSelection(doc, element) {
+function setRangeSelection(doc, element, collapse) {
+    var _a;
     if (element && doc.contains(element)) {
         var range = doc.createRange();
+        var isReverted = undefined;
         range.selectNode(element);
-        range.collapse();
-        (0, addRangeToSelection_1.addRangeToSelection)(doc, range);
+        if (collapse) {
+            range.collapse();
+        }
+        else {
+            var selection = (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
+            var range_1 = selection && selection.rangeCount > 0 && selection.getRangeAt(0);
+            if (selection && range_1) {
+                isReverted =
+                    selection.focusNode != range_1.endContainer ||
+                        selection.focusOffset != range_1.endOffset;
+            }
+        }
+        (0, addRangeToSelection_1.addRangeToSelection)(doc, range, isReverted);
     }
 }
 
@@ -9746,11 +9982,15 @@ function reconcileSelection(model, newSelection, oldSelection) {
             var newRange = newSelection.range;
             if (newRange) {
                 var startContainer = newRange.startContainer, startOffset = newRange.startOffset, endContainer = newRange.endContainer, endOffset = newRange.endOffset, collapsed = newRange.collapsed;
+                delete model.hasRevertedRangeSelection;
                 if (collapsed) {
                     return !!reconcileNodeSelection(startContainer, startOffset);
                 }
                 else if (startContainer == endContainer &&
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(startContainer, 'TEXT_NODE')) {
+                    if (newSelection.isReverted) {
+                        model.hasRevertedRangeSelection = true;
+                    }
                     return (isIndexedSegment(startContainer) &&
                         !!reconcileTextSelection(startContainer, startOffset, endOffset));
                 }
@@ -9758,6 +9998,9 @@ function reconcileSelection(model, newSelection, oldSelection) {
                     var marker1 = reconcileNodeSelection(startContainer, startOffset);
                     var marker2 = reconcileNodeSelection(endContainer, endOffset);
                     if (marker1 && marker2) {
+                        if (newSelection.isReverted) {
+                            model.hasRevertedRangeSelection = true;
+                        }
                         (0, roosterjs_content_model_dom_1.setSelection)(model, marker1, marker2);
                         return true;
                     }
@@ -10221,8 +10464,8 @@ var CopyPastePlugin = /** @class */ (function () {
                         return;
                     }
                     cleanUpAndRestoreSelection(tempDiv_1);
-                    _this.editor.focus();
                     _this.editor.setDOMSelection(selection);
+                    _this.editor.focus();
                     if (isCut) {
                         _this.editor.formatContentModel(function (model, context) {
                             if ((0, roosterjs_content_model_dom_1.deleteSelection)(model, [deleteEmptyList_1.deleteEmptyList], context)
@@ -10889,6 +11132,123 @@ function createEntityPlugin() {
 exports.createEntityPlugin = createEntityPlugin;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/entity/adjustSelectionAroundEntity.ts":
+/*!****************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/entity/adjustSelectionAroundEntity.ts ***!
+  \****************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.adjustSelectionAroundEntity = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ */
+function adjustSelectionAroundEntity(editor, key, shiftKey) {
+    var _a;
+    var selection = editor.isDisposed() ? null : editor.getDOMSelection();
+    if (!selection || selection.type != 'range') {
+        return;
+    }
+    var range = selection.range, isReverted = selection.isReverted;
+    var anchorNode = isReverted ? range.startContainer : range.endContainer;
+    var offset = isReverted ? range.startOffset : range.endOffset;
+    var delimiter = (0, roosterjs_content_model_dom_1.isNodeOfType)(anchorNode, 'ELEMENT_NODE')
+        ? anchorNode
+        : anchorNode.parentElement;
+    var isRtl = delimiter &&
+        ((_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(delimiter).direction) == 'rtl';
+    var movingBefore = (key == 'ArrowLeft') != !!isRtl;
+    if (delimiter &&
+        (((0, roosterjs_content_model_dom_1.isEntityDelimiter)(delimiter, !movingBefore) &&
+            ((movingBefore && offset == 0) || (!movingBefore && offset == 1))) ||
+            (0, roosterjs_content_model_dom_1.isBlockEntityContainer)(delimiter))) {
+        editor.formatContentModel(function (model) {
+            var _a, _b;
+            var allSel = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /*includingFormatHolder*/, true /*includingEntity*/);
+            var sel = allSel[isReverted ? 0 : allSel.length - 1];
+            var index = (_b = (_a = sel === null || sel === void 0 ? void 0 : sel[1]) === null || _a === void 0 ? void 0 : _a.segments.indexOf(sel[0])) !== null && _b !== void 0 ? _b : -1;
+            if (sel && sel[1] && index >= 0) {
+                var _c = (0, tslib_1.__read)(sel, 3), segment = _c[0], paragraph = _c[1], path = _c[2];
+                var isShrinking = shiftKey && !range.collapsed && movingBefore != !!isReverted;
+                var entitySegment = isShrinking
+                    ? segment
+                    : paragraph.segments[movingBefore ? index - 1 : index + 1];
+                var pairedDelimiter = findPairedDelimiter(entitySegment, path, paragraph, movingBefore);
+                if (pairedDelimiter) {
+                    var newRange = getNewRange(range, isShrinking, movingBefore, pairedDelimiter, shiftKey);
+                    editor.setDOMSelection({
+                        type: 'range',
+                        range: newRange,
+                        isReverted: newRange.collapsed ? false : isReverted,
+                    });
+                }
+            }
+            return false;
+        });
+    }
+}
+exports.adjustSelectionAroundEntity = adjustSelectionAroundEntity;
+function getNewRange(originalRange, isShrinking, movingBefore, pairedDelimiter, shiftKey) {
+    var newRange = originalRange.cloneRange();
+    if (isShrinking) {
+        if (movingBefore) {
+            newRange.setEndBefore(pairedDelimiter);
+        }
+        else {
+            newRange.setStartAfter(pairedDelimiter);
+        }
+    }
+    else {
+        if (movingBefore) {
+            newRange.setStartBefore(pairedDelimiter);
+        }
+        else {
+            newRange.setEndAfter(pairedDelimiter);
+        }
+        if (!shiftKey) {
+            if (movingBefore) {
+                newRange.setEndBefore(pairedDelimiter);
+            }
+            else {
+                newRange.setStartAfter(pairedDelimiter);
+            }
+        }
+    }
+    return newRange;
+}
+function findPairedDelimiter(entitySegment, path, paragraph, movingBefore) {
+    var entity = null;
+    if ((entitySegment === null || entitySegment === void 0 ? void 0 : entitySegment.segmentType) == 'Entity') {
+        // Inline entity
+        entity = entitySegment;
+    }
+    else {
+        // Block entity
+        var blocks = path[0].blocks;
+        var paraIndex = blocks.indexOf(paragraph);
+        var entityBlock = paraIndex >= 0 ? blocks[movingBefore ? paraIndex - 1 : paraIndex + 1] : null;
+        if ((entityBlock === null || entityBlock === void 0 ? void 0 : entityBlock.blockType) == 'Entity') {
+            entity = entityBlock;
+        }
+    }
+    var pairedDelimiter = entity
+        ? movingBefore
+            ? entity.wrapper.previousElementSibling
+            : entity.wrapper.nextElementSibling
+        : null;
+    return (0, roosterjs_content_model_dom_1.isNodeOfType)(pairedDelimiter, 'ELEMENT_NODE') &&
+        (0, roosterjs_content_model_dom_1.isEntityDelimiter)(pairedDelimiter, movingBefore)
+        ? pairedDelimiter
+        : null;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/corePlugin/entity/entityDelimiterUtils.ts":
@@ -10902,6 +11262,7 @@ exports.createEntityPlugin = createEntityPlugin;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.handleEnterInlineEntity = exports.handleKeyDownInBlockDelimiter = exports.handleDelimiterKeyDownEvent = exports.handleCompositionEndEvent = exports.handleDelimiterContentChangedEvent = exports.preventTypeInDelimiter = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var adjustSelectionAroundEntity_1 = __webpack_require__(/*! ./adjustSelectionAroundEntity */ "./packages/roosterjs-content-model-core/lib/corePlugin/entity/adjustSelectionAroundEntity.ts");
 var normalizePos_1 = __webpack_require__(/*! ../selection/normalizePos */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var DelimiterBefore = 'entityDelimiterBefore';
@@ -10910,8 +11271,6 @@ var DelimiterSelector = '.' + DelimiterAfter + ',.' + DelimiterBefore;
 var ZeroWidthSpace = '\u200B';
 var EntityInfoName = '_Entity';
 var InlineEntitySelector = 'span.' + EntityInfoName;
-var BlockEntityContainer = '_E_EBlockEntityContainer';
-var BlockEntityContainerSelector = '.' + BlockEntityContainer;
 /**
  * @internal exported only for unit test
  */
@@ -11053,61 +11412,86 @@ exports.handleCompositionEndEvent = handleCompositionEndEvent;
 function handleDelimiterKeyDownEvent(editor, event) {
     var _a;
     var selection = editor.getDOMSelection();
-    var rawEvent = event.rawEvent;
     if (!selection || selection.type != 'range') {
         return;
     }
-    var isEnter = rawEvent.key === 'Enter';
-    var helper = editor.getDOMHelper();
-    if (selection.range.collapsed && ((0, roosterjs_content_model_dom_1.isCharacterValue)(rawEvent) || isEnter)) {
-        var helper_1 = editor.getDOMHelper();
-        var node_1 = getFocusedElement(selection);
-        if (node_1 && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(node_1) && helper_1.isNodeInEditor(node_1)) {
-            var blockEntityContainer = node_1.closest(BlockEntityContainerSelector);
-            if (blockEntityContainer && helper_1.isNodeInEditor(blockEntityContainer)) {
-                var isAfter = node_1.classList.contains(DelimiterAfter);
-                if (isAfter) {
-                    selection.range.setStartAfter(blockEntityContainer);
-                }
-                else {
-                    selection.range.setStartBefore(blockEntityContainer);
-                }
-                selection.range.collapse(true /* toStart */);
-                if (isEnter) {
-                    event.rawEvent.preventDefault();
+    var rawEvent = event.rawEvent;
+    var range = selection.range;
+    var key = rawEvent.key;
+    switch (key) {
+        case 'Enter':
+            if (range.collapsed) {
+                handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+            }
+            else {
+                var helper = editor.getDOMHelper();
+                var entity = (0, roosterjs_content_model_dom_1.findClosestEntityWrapper)(range.startContainer, helper);
+                if (entity &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(entity, 'ELEMENT_NODE') &&
+                    helper.isNodeInEditor(entity)) {
+                    triggerEntityEventOnEnter(editor, entity, rawEvent);
                 }
-                editor.formatContentModel(exports.handleKeyDownInBlockDelimiter, {
-                    selectionOverride: {
-                        type: 'range',
-                        isReverted: false,
-                        range: selection.range,
-                    },
+            }
+            break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+            if (!rawEvent.altKey && !rawEvent.ctrlKey && !rawEvent.metaKey) {
+                // Handle in async so focus is already moved, this makes us easier to check if we should adjust the selection
+                (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    (0, adjustSelectionAroundEntity_1.adjustSelectionAroundEntity)(editor, key, rawEvent.shiftKey);
                 });
             }
+            break;
+        default:
+            if ((0, roosterjs_content_model_dom_1.isCharacterValue)(rawEvent) && range.collapsed) {
+                handleInputOnDelimiter(editor, range, getFocusedElement(selection), rawEvent);
+            }
+            break;
+    }
+}
+exports.handleDelimiterKeyDownEvent = handleDelimiterKeyDownEvent;
+function handleInputOnDelimiter(editor, range, focusedNode, rawEvent) {
+    var _a;
+    var helper = editor.getDOMHelper();
+    if (focusedNode && (0, roosterjs_content_model_dom_1.isEntityDelimiter)(focusedNode) && helper.isNodeInEditor(focusedNode)) {
+        var blockEntityContainer = (0, roosterjs_content_model_dom_1.findClosestBlockEntityContainer)(focusedNode, helper);
+        var isEnter = rawEvent.key === 'Enter';
+        if (blockEntityContainer && helper.isNodeInEditor(blockEntityContainer)) {
+            var isAfter = focusedNode.classList.contains(DelimiterAfter);
+            if (isAfter) {
+                range.setStartAfter(blockEntityContainer);
+            }
             else {
-                if (isEnter) {
-                    event.rawEvent.preventDefault();
-                    editor.formatContentModel(exports.handleEnterInlineEntity);
-                }
-                else {
-                    editor.takeSnapshot();
-                    (_a = editor
-                        .getDocument()
-                        .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
-                        return preventTypeInDelimiter(node_1, editor);
-                    });
-                }
+                range.setStartBefore(blockEntityContainer);
+            }
+            range.collapse(true /* toStart */);
+            if (isEnter) {
+                rawEvent.preventDefault();
             }
+            editor.formatContentModel(exports.handleKeyDownInBlockDelimiter, {
+                selectionOverride: {
+                    type: 'range',
+                    isReverted: false,
+                    range: range,
+                },
+            });
         }
-    }
-    else if (isEnter) {
-        var entity = (0, roosterjs_content_model_dom_1.findClosestEntityWrapper)(selection.range.startContainer, helper);
-        if (entity && (0, roosterjs_content_model_dom_1.isNodeOfType)(entity, 'ELEMENT_NODE') && helper.isNodeInEditor(entity)) {
-            triggerEntityEventOnEnter(editor, entity, rawEvent);
+        else {
+            if (isEnter) {
+                rawEvent.preventDefault();
+                editor.formatContentModel(exports.handleEnterInlineEntity);
+            }
+            else {
+                editor.takeSnapshot();
+                (_a = editor
+                    .getDocument()
+                    .defaultView) === null || _a === void 0 ? void 0 : _a.requestAnimationFrame(function () {
+                    return preventTypeInDelimiter(focusedNode, editor);
+                });
+            }
         }
     }
 }
-exports.handleDelimiterKeyDownEvent = handleDelimiterKeyDownEvent;
 /**
  * @internal Exported Only for unit test
  * @returns
@@ -11602,6 +11986,7 @@ var LifecyclePlugin = /** @class */ (function () {
             isDarkMode: !!options.inDarkMode,
             shadowEditFragment: null,
             styleElements: {},
+            announcerStringGetter: options.announcerStringGetter,
         };
     }
     /**
@@ -11629,7 +12014,7 @@ var LifecyclePlugin = /** @class */ (function () {
      */
     LifecyclePlugin.prototype.dispose = function () {
         var _this = this;
-        var _a;
+        var _a, _b;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.triggerEvent('beforeDispose', {}, true /*broadcast*/);
         (0, roosterjs_content_model_dom_1.getObjectKeys)(this.state.styleElements).forEach(function (key) {
             var _a;
@@ -11637,6 +12022,11 @@ var LifecyclePlugin = /** @class */ (function () {
             (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(element);
             delete _this.state.styleElements[key];
         });
+        var announceContainer = this.state.announceContainer;
+        if (announceContainer) {
+            (_b = announceContainer.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(announceContainer);
+            delete this.state.announceContainer;
+        }
         if (this.disposer) {
             this.disposer();
             this.disposer = null;
@@ -11697,6 +12087,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createSelectionPlugin = void 0;
 var findCoordinate_1 = __webpack_require__(/*! ./findCoordinate */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/findCoordinate.ts");
 var findTableCellElement_1 = __webpack_require__(/*! ../../coreApi/setDOMSelection/findTableCellElement */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/findTableCellElement.ts");
+var isSingleImageInSelection_1 = __webpack_require__(/*! ./isSingleImageInSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts");
 var normalizePos_1 = __webpack_require__(/*! ./normalizePos */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var MouseLeftButton = 0;
@@ -11706,6 +12097,7 @@ var Up = 'ArrowUp';
 var Down = 'ArrowDown';
 var Left = 'ArrowLeft';
 var Right = 'ArrowRight';
+var Tab = 'Tab';
 var SelectionPlugin = /** @class */ (function () {
     function SelectionPlugin(options) {
         var _this = this;
@@ -11713,6 +12105,7 @@ var SelectionPlugin = /** @class */ (function () {
         this.disposer = null;
         this.isSafari = false;
         this.isMac = false;
+        this.scrollTopCache = 0;
         this.onMouseMove = function (event) {
             var _a, _b, _c;
             if (_this.editor && _this.state.tableSelection) {
@@ -11783,20 +12176,45 @@ var SelectionPlugin = /** @class */ (function () {
                 // Editor is focused, now we can get live selection. So no need to keep a selection if the selection type is range.
                 _this.state.selection = null;
             }
+            if (_this.scrollTopCache && _this.editor) {
+                var sc = _this.editor.getScrollContainer();
+                sc.scrollTop = _this.scrollTopCache;
+                _this.scrollTopCache = 0;
+            }
         };
         this.onBlur = function () {
-            if (!_this.state.selection && _this.editor) {
-                _this.state.selection = _this.editor.getDOMSelection();
+            if (_this.editor) {
+                if (!_this.state.selection) {
+                    _this.state.selection = _this.editor.getDOMSelection();
+                }
+                var sc = _this.editor.getScrollContainer();
+                _this.scrollTopCache = sc.scrollTop;
             }
         };
-        this.onSelectionChangeSafari = function () {
+        this.onSelectionChange = function () {
             var _a;
             if (((_a = _this.editor) === null || _a === void 0 ? void 0 : _a.hasFocus()) && !_this.editor.isInShadowEdit()) {
+                var newSelection = _this.editor.getDOMSelection();
+                //If am image selection changed to a wider range due a keyboard event, we should update the selection
+                var selection = _this.editor.getDocument().getSelection();
+                if ((newSelection === null || newSelection === void 0 ? void 0 : newSelection.type) == 'image' && selection) {
+                    if (selection && !(0, isSingleImageInSelection_1.isSingleImageInSelection)(selection)) {
+                        var range = selection.getRangeAt(0);
+                        _this.editor.setDOMSelection({
+                            type: 'range',
+                            range: range,
+                            isReverted: selection.focusNode != range.endContainer ||
+                                selection.focusOffset != range.endOffset,
+                        });
+                    }
+                }
                 // Safari has problem to handle onBlur event. When blur, we cannot get the original selection from editor.
                 // So we always save a selection whenever editor has focus. Then after blur, we can still use this cached selection.
-                var newSelection = _this.editor.getDOMSelection();
                 if ((newSelection === null || newSelection === void 0 ? void 0 : newSelection.type) == 'range') {
-                    _this.state.selection = newSelection;
+                    if (_this.isSafari) {
+                        _this.state.selection = newSelection;
+                    }
+                    _this.trySelectSingleImage(newSelection);
                 }
             }
         };
@@ -11815,8 +12233,8 @@ var SelectionPlugin = /** @class */ (function () {
         var document = this.editor.getDocument();
         this.isSafari = !!env.isSafari;
         this.isMac = !!env.isMac;
+        document.addEventListener('selectionchange', this.onSelectionChange);
         if (this.isSafari) {
-            document.addEventListener('selectionchange', this.onSelectionChangeSafari);
             this.disposer = this.editor.attachDomEvent({
                 focus: { beforeDispatch: this.onFocus },
                 drop: { beforeDispatch: this.onDrop },
@@ -11832,7 +12250,7 @@ var SelectionPlugin = /** @class */ (function () {
     };
     SelectionPlugin.prototype.dispose = function () {
         var _a;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDocument().removeEventListener('selectionchange', this.onSelectionChangeSafari);
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDocument().removeEventListener('selectionchange', this.onSelectionChange);
         if (this.disposer) {
             this.disposer();
             this.disposer = null;
@@ -11860,6 +12278,11 @@ var SelectionPlugin = /** @class */ (function () {
             case 'contentChanged':
                 this.state.tableSelection = null;
                 break;
+            case 'scroll':
+                if (!this.editor.hasFocus()) {
+                    this.scrollTopCache = event.scrollContainer.scrollTop;
+                }
+                break;
         }
     };
     SelectionPlugin.prototype.onMouseDown = function (editor, rawEvent) {
@@ -11871,11 +12294,11 @@ var SelectionPlugin = /** @class */ (function () {
             (image =
                 (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
             image.isContentEditable) {
-            this.selectImage(image);
+            this.selectImageWithRange(image, rawEvent);
             return;
         }
         else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== rawEvent.target) {
-            this.selectBeforeImage(editor, selection.image);
+            this.selectBeforeOrAfterElement(editor, selection.image);
             return;
         }
         // Table selection
@@ -11904,6 +12327,22 @@ var SelectionPlugin = /** @class */ (function () {
             });
         }
     };
+    SelectionPlugin.prototype.selectImageWithRange = function (image, event) {
+        var _a;
+        var range = image.ownerDocument.createRange();
+        range.selectNode(image);
+        var domSelection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+        if ((domSelection === null || domSelection === void 0 ? void 0 : domSelection.type) == 'image' && image == domSelection.image) {
+            event.preventDefault();
+        }
+        else {
+            this.setDOMSelection({
+                type: 'range',
+                isReverted: false,
+                range: range,
+            }, null);
+        }
+    };
     SelectionPlugin.prototype.onMouseUp = function (event) {
         var image;
         if ((image = this.getClickingImage(event.rawEvent)) &&
@@ -11912,7 +12351,7 @@ var SelectionPlugin = /** @class */ (function () {
             (event.rawEvent.button ==
                 MouseRightButton /* it's not possible to drag using right click */ ||
                 event.isClicking)) {
-            this.selectImage(image);
+            this.selectImageWithRange(image, event.rawEvent);
         }
         this.detachMouseEvent();
     };
@@ -11926,20 +12365,21 @@ var SelectionPlugin = /** @class */ (function () {
             case 'image':
                 if (!(0, roosterjs_content_model_dom_1.isModifierKey)(rawEvent) && !rawEvent.shiftKey && selection.image.parentNode) {
                     if (key === 'Escape') {
-                        this.selectBeforeImage(editor, selection.image);
+                        this.selectBeforeOrAfterElement(editor, selection.image);
                         rawEvent.stopPropagation();
                     }
                     else if (key !== 'Delete' && key !== 'Backspace') {
-                        this.selectBeforeImage(editor, selection.image);
+                        this.selectBeforeOrAfterElement(editor, selection.image);
                     }
                 }
                 break;
             case 'range':
-                if (key == Up || key == Down || key == Left || key == Right) {
+                if (key == Up || key == Down || key == Left || key == Right || key == Tab) {
                     var start = selection.range.startContainer;
                     this.state.tableSelection = this.parseTableSelection(start, start, editor.getDOMHelper());
+                    var rangeKey_1 = key == Tab ? this.getTabKey(rawEvent) : key;
                     if (this.state.tableSelection) {
-                        win === null || win === void 0 ? void 0 : win.requestAnimationFrame(function () { return _this.handleSelectionInTable(key); });
+                        win === null || win === void 0 ? void 0 : win.requestAnimationFrame(function () { return _this.handleSelectionInTable(rangeKey_1); });
                     }
                 }
                 break;
@@ -11966,15 +12406,18 @@ var SelectionPlugin = /** @class */ (function () {
                 break;
         }
     };
+    SelectionPlugin.prototype.getTabKey = function (rawEvent) {
+        return rawEvent.shiftKey ? 'TabLeft' : 'TabRight';
+    };
     SelectionPlugin.prototype.handleSelectionInTable = function (key) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         if (!this.editor || !this.state.tableSelection) {
             return;
         }
         var selection = this.editor.getDOMSelection();
         var domHelper = this.editor.getDOMHelper();
         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-            var _c = selection.range, collapsed = _c.collapsed, startContainer = _c.startContainer, endContainer = _c.endContainer, commonAncestorContainer = _c.commonAncestorContainer, isReverted = selection.isReverted;
+            var _g = selection.range, collapsed = _g.collapsed, startContainer = _g.startContainer, endContainer = _g.endContainer, commonAncestorContainer = _g.commonAncestorContainer, isReverted = selection.isReverted;
             var start = isReverted ? endContainer : startContainer;
             var end = isReverted ? startContainer : endContainer;
             var tableSel = this.parseTableSelection(commonAncestorContainer, start, domHelper);
@@ -11982,9 +12425,9 @@ var SelectionPlugin = /** @class */ (function () {
                 return;
             }
             var lastCo = (0, findCoordinate_1.findCoordinate)(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
-            var _d = this.state.tableSelection, parsedTable = _d.parsedTable, oldCo = _d.firstCo, table = _d.table;
-            if (lastCo && tableSel.table == table && lastCo.col != oldCo.col) {
-                if (key == Up || key == Down) {
+            var _h = this.state.tableSelection, parsedTable = _h.parsedTable, oldCo = _h.firstCo, table = _h.table;
+            if (lastCo && tableSel.table == table) {
+                if (lastCo.col != oldCo.col && (key == Up || key == Down)) {
                     var change = key == Up ? -1 : 1;
                     var originalTd = (_a = (0, findTableCellElement_1.findTableCellElement)(parsedTable, oldCo)) === null || _a === void 0 ? void 0 : _a.cell;
                     var td = null;
@@ -11999,20 +12442,43 @@ var SelectionPlugin = /** @class */ (function () {
                         }
                     }
                     if (collapsed && td) {
-                        var _e = (0, normalizePos_1.normalizePos)(td, key == Up ? td.childNodes.length : 0), node = _e.node, offset = _e.offset;
-                        var range = this.editor.getDocument().createRange();
-                        range.setStart(node, offset);
-                        range.collapse(true /*toStart*/);
-                        this.setDOMSelection({
-                            type: 'range',
-                            range: range,
-                            isReverted: false,
-                        }, null /*tableSelection*/);
+                        this.setRangeSelectionInTable(td, key == Up ? td.childNodes.length : 0, this.editor);
+                    }
+                }
+                else if (key == 'TabLeft' || key == 'TabRight') {
+                    var reverse = key == 'TabLeft';
+                    for (var step = reverse ? -1 : 1, row = (_c = lastCo.row) !== null && _c !== void 0 ? _c : 0, col = ((_d = lastCo.col) !== null && _d !== void 0 ? _d : 0) + step;; col += step) {
+                        if (col < 0 || col >= parsedTable[row].length) {
+                            row += step;
+                            if (row < 0) {
+                                this.selectBeforeOrAfterElement(this.editor, tableSel.table);
+                                break;
+                            }
+                            else if (row >= parsedTable.length) {
+                                this.selectBeforeOrAfterElement(this.editor, tableSel.table, true /*after*/);
+                                break;
+                            }
+                            col = reverse ? parsedTable[row].length - 1 : 0;
+                        }
+                        var cell = parsedTable[row][col];
+                        if (typeof cell != 'string') {
+                            this.setRangeSelectionInTable(cell, 0, this.editor);
+                            lastCo.row = row;
+                            lastCo.col = col;
+                            break;
+                        }
                     }
                 }
                 else {
                     this.state.tableSelection = null;
                 }
+                if (collapsed &&
+                    (lastCo.col != oldCo.col || lastCo.row != oldCo.row) &&
+                    lastCo.row >= 0 &&
+                    lastCo.row == parsedTable.length - 1 &&
+                    lastCo.col == ((_e = parsedTable[lastCo.row]) === null || _e === void 0 ? void 0 : _e.length) - 1) {
+                    (_f = this.editor) === null || _f === void 0 ? void 0 : _f.announce({ defaultStrings: 'announceOnFocusLastCell' });
+                }
             }
             if (!collapsed && lastCo) {
                 this.state.tableSelection = tableSel;
@@ -12020,9 +12486,21 @@ var SelectionPlugin = /** @class */ (function () {
             }
         }
     };
-    SelectionPlugin.prototype.updateTableSelectionFromKeyboard = function (rowChange, colChange) {
-        var _a;
-        if (((_a = this.state.tableSelection) === null || _a === void 0 ? void 0 : _a.lastCo) && this.editor) {
+    SelectionPlugin.prototype.setRangeSelectionInTable = function (cell, nodeOffset, editor) {
+        // Get deepest editable position in the cell
+        var _a = (0, normalizePos_1.normalizePos)(cell, nodeOffset), node = _a.node, offset = _a.offset;
+        var range = editor.getDocument().createRange();
+        range.setStart(node, offset);
+        range.collapse(true /*toStart*/);
+        this.setDOMSelection({
+            type: 'range',
+            range: range,
+            isReverted: false,
+        }, null /*tableSelection*/);
+    };
+    SelectionPlugin.prototype.updateTableSelectionFromKeyboard = function (rowChange, colChange) {
+        var _a;
+        if (((_a = this.state.tableSelection) === null || _a === void 0 ? void 0 : _a.lastCo) && this.editor) {
             var _b = this.state.tableSelection, lastCo = _b.lastCo, parsedTable = _b.parsedTable;
             var row = lastCo.row + rowChange;
             var col = lastCo.col + colChange;
@@ -12031,19 +12509,13 @@ var SelectionPlugin = /** @class */ (function () {
             }
         }
     };
-    SelectionPlugin.prototype.selectImage = function (image) {
-        this.setDOMSelection({
-            type: 'image',
-            image: image,
-        }, null /*tableSelection*/);
-    };
-    SelectionPlugin.prototype.selectBeforeImage = function (editor, image) {
+    SelectionPlugin.prototype.selectBeforeOrAfterElement = function (editor, element, after) {
         var doc = editor.getDocument();
-        var parent = image.parentNode;
-        var index = parent && (0, roosterjs_content_model_dom_1.toArray)(parent.childNodes).indexOf(image);
+        var parent = element.parentNode;
+        var index = parent && (0, roosterjs_content_model_dom_1.toArray)(parent.childNodes).indexOf(element);
         if (parent && index !== null && index >= 0) {
             var range = doc.createRange();
-            range.setStart(parent, index);
+            range.setStart(parent, index + (after ? 1 : 0));
             range.collapse();
             this.setDOMSelection({
                 type: 'range',
@@ -12100,6 +12572,17 @@ var SelectionPlugin = /** @class */ (function () {
             this.state.mouseDisposer = undefined;
         }
     };
+    SelectionPlugin.prototype.trySelectSingleImage = function (selection) {
+        if (!selection.range.collapsed) {
+            var image = (0, isSingleImageInSelection_1.isSingleImageInSelection)(selection.range);
+            if (image) {
+                this.setDOMSelection({
+                    type: 'image',
+                    image: image,
+                }, null /*tableSelection*/);
+            }
+        }
+    };
     return SelectionPlugin;
 }());
 /**
@@ -12152,6 +12635,58 @@ function findCoordinate(parsedTable, element, domHelper) {
 exports.findCoordinate = findCoordinate;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts":
+/*!****************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/selection/isSingleImageInSelection.ts ***!
+  \****************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.isSingleImageInSelection = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ */
+function isSingleImageInSelection(selection) {
+    var _a = getProps(selection), startNode = _a.startNode, endNode = _a.endNode, startOffset = _a.startOffset, endOffset = _a.endOffset;
+    var max = Math.max(startOffset, endOffset);
+    var min = Math.min(startOffset, endOffset);
+    if (startNode && endNode && startNode == endNode && max - min == 1) {
+        var node = startNode === null || startNode === void 0 ? void 0 : startNode.childNodes.item(min);
+        if ((0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
+            return node;
+        }
+    }
+    return null;
+}
+exports.isSingleImageInSelection = isSingleImageInSelection;
+function getProps(selection) {
+    if (isSelection(selection)) {
+        return {
+            startNode: selection.anchorNode,
+            endNode: selection.focusNode,
+            startOffset: selection.anchorOffset,
+            endOffset: selection.focusOffset,
+        };
+    }
+    else {
+        return {
+            startNode: selection.startContainer,
+            endNode: selection.endContainer,
+            startOffset: selection.startOffset,
+            endOffset: selection.endOffset,
+        };
+    }
+}
+function isSelection(selection) {
+    return !!selection.getRangeAt;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts":
@@ -12165,6 +12700,30 @@ exports.findCoordinate = findCoordinate;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.normalizePos = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * HTML void elements
+ * Per https://www.w3.org/TR/html/syntax.html#syntax-elements, cannot have child nodes
+ * This regex is used when we move focus to very begin of editor. We should avoid putting focus inside
+ * void elements so users don't accidentally create child nodes in them
+ */
+var HTML_VOID_ELEMENTS = [
+    'AREA',
+    'BASE',
+    'BR',
+    'COL',
+    'COMMAND',
+    'EMBED',
+    'HR',
+    'IMG',
+    'INPUT',
+    'KEYGEN',
+    'LINK',
+    'META',
+    'PARAM',
+    'SOURCE',
+    'TRACK',
+    'WBR',
+];
 /**
  * @internal
  */
@@ -12182,8 +12741,15 @@ function normalizePos(node, offset) {
                 : node.childNodes.length;
         }
         else {
-            node = node.childNodes[offset];
-            offset = 0;
+            var nextNode = node.childNodes[offset];
+            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(nextNode, 'ELEMENT_NODE') &&
+                HTML_VOID_ELEMENTS.indexOf(nextNode.tagName) >= 0) {
+                break;
+            }
+            else {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
         }
     }
     return { node: node, offset: offset };
@@ -12865,6 +13431,14 @@ var Editor = /** @class */ (function () {
         var core = this.getCore();
         core.api.setEditorStyle(core, key, cssRule, subSelectors);
     };
+    /**
+     * Announce the given data
+     * @param announceData Data to announce
+     */
+    Editor.prototype.announce = function (announceData) {
+        var core = this.getCore();
+        core.api.announce(core, announceData);
+    };
     /**
      * @returns the current EditorCore object
      * @throws a standard Error if there's no core object
@@ -12945,6 +13519,26 @@ var DOMHelperImpl = /** @class */ (function () {
         var activeElement = this.contentDiv.ownerDocument.activeElement;
         return !!(activeElement && this.contentDiv.contains(activeElement));
     };
+    /**
+     * Check if the root element is in RTL mode
+     */
+    DOMHelperImpl.prototype.isRightToLeft = function () {
+        var _a;
+        var contentDiv = this.contentDiv;
+        var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+        return (style === null || style === void 0 ? void 0 : style.direction) == 'rtl';
+    };
+    /**
+     * Get the width of the editable area of the editor content div
+     */
+    DOMHelperImpl.prototype.getClientWidth = function () {
+        var _a;
+        var contentDiv = this.contentDiv;
+        var style = (_a = contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(contentDiv);
+        var paddingLeft = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(style === null || style === void 0 ? void 0 : style.paddingLeft);
+        var paddingRight = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(style === null || style === void 0 ? void 0 : style.paddingRight);
+        return this.contentDiv.clientWidth - (paddingLeft + paddingRight);
+    };
     return DOMHelperImpl;
 }());
 /**
@@ -13235,95 +13829,24 @@ exports.containerSizeFormatParser = containerSizeFormatParser;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.listLevelMetadataApplier = exports.listItemMetadataApplier = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var DefaultOrderedListStyles = ['decimal', 'lower-alpha', 'lower-roman'];
-var DefaultUnorderedListStyles = ['disc', 'circle', 'square'];
 var OrderedMapPlaceholderRegex = /\$\{(\w+)\}/;
-var CharCodeOfA = 65;
-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,
-};
-function getOrderedListStyleValue(template, listNumber) {
-    return template
-        ? template.replace(OrderedMapPlaceholderRegex, function (_, subStr) {
-            switch (subStr) {
-                case 'Number':
-                    return listNumber + '';
-                case 'LowerAlpha':
-                    return convertDecimalsToAlpha(listNumber, true /*isLowerCase*/);
-                case 'UpperAlpha':
-                    return convertDecimalsToAlpha(listNumber, false /*isLowerCase*/);
-                case 'LowerRoman':
-                    return convertDecimalsToRoman(listNumber, true /*isLowerCase*/);
-                case 'UpperRoman':
-                    return convertDecimalsToRoman(listNumber, false /*isLowerCase*/);
-            }
-            return '';
-        })
-        : undefined;
-}
-function convertDecimalsToAlpha(decimal, isLowerCase) {
-    var alpha = '';
-    decimal--;
-    while (decimal >= 0) {
-        alpha = String.fromCharCode((decimal % 26) + CharCodeOfA) + alpha;
-        decimal = Math.floor(decimal / 26) - 1;
-    }
-    return isLowerCase ? alpha.toLowerCase() : alpha;
-}
-function convertDecimalsToRoman(decimal, isLowerCase) {
-    var e_1, _a;
-    var romanValue = '';
-    try {
-        for (var _b = (0, tslib_1.__values)((0, roosterjs_content_model_dom_1.getObjectKeys)(RomanValues)), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var i = _c.value;
-            var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
-            decimal = decimal - timesRomanCharAppear * RomanValues[i];
-            romanValue = romanValue + i.repeat(timesRomanCharAppear);
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-    return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
-}
-function shouldApplyToItem(listStyleType) {
-    return listStyleType.indexOf('"') >= 0;
-}
-function getRawListStyleType(listType, metadata, depth) {
-    var orderedStyleType = metadata.orderedStyleType, unorderedStyleType = metadata.unorderedStyleType, applyListStyleFromLevel = metadata.applyListStyleFromLevel;
+function getListStyleValue(listType, listStyleType, listNumber) {
     if (listType == 'OL') {
-        return typeof orderedStyleType == 'number'
-            ? roosterjs_content_model_dom_1.OrderedListStyleMap[orderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultOrderedListStyles[depth % DefaultOrderedListStyles.length]
-                : undefined;
+        var numberStr = (0, roosterjs_content_model_dom_1.getOrderedListNumberStr)(listStyleType, listNumber !== null && listNumber !== void 0 ? listNumber : 1);
+        var template = roosterjs_content_model_dom_1.OrderedListStyleMap[listStyleType];
+        return template ? template.replace(OrderedMapPlaceholderRegex, numberStr) : undefined;
     }
     else {
-        return typeof unorderedStyleType == 'number'
-            ? roosterjs_content_model_dom_1.UnorderedListStyleMap[unorderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultUnorderedListStyles[depth % DefaultUnorderedListStyles.length]
-                : undefined;
+        return roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
     }
 }
+function shouldApplyToItem(listStyleType, listType) {
+    var style = listType == 'OL'
+        ? roosterjs_content_model_dom_1.OrderedListStyleMap[listStyleType]
+        : roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
+    return (style === null || style === void 0 ? void 0 : style.indexOf('"')) >= 0;
+}
 /**
  * @internal
  */
@@ -13334,13 +13857,10 @@ exports.listItemMetadataApplier = {
         var depth = context.listFormat.nodeStack.length - 2; // Minus two for the parent element and convert length to index
         if (depth >= 0) {
             var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-            var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-            if (listStyleType) {
-                if (shouldApplyToItem(listStyleType)) {
-                    format.listStyleType =
-                        listType == 'OL'
-                            ? getOrderedListStyleValue(listStyleType, context.listFormat.threadItemCounts[depth])
-                            : listStyleType;
+            var listStyleType = (0, roosterjs_content_model_dom_1.getAutoListStyleType)(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+            if (listStyleType !== undefined) {
+                if (shouldApplyToItem(listStyleType, listType)) {
+                    format.listStyleType = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
                 }
                 else {
                     delete format.listStyleType;
@@ -13359,10 +13879,13 @@ exports.listLevelMetadataApplier = {
         var depth = context.listFormat.nodeStack.length - 2; // Minus two for the parent element and convert length to index
         if (depth >= 0) {
             var listType = (_a = context.listFormat.nodeStack[depth + 1].listType) !== null && _a !== void 0 ? _a : 'OL';
-            var listStyleType = getRawListStyleType(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
-            if (listStyleType) {
-                if (!shouldApplyToItem(listStyleType)) {
-                    format.listStyleType = listStyleType;
+            var listStyleType = (0, roosterjs_content_model_dom_1.getAutoListStyleType)(listType, metadata !== null && metadata !== void 0 ? metadata : {}, depth);
+            if (listStyleType !== undefined) {
+                if (!shouldApplyToItem(listStyleType, listType)) {
+                    var listStyleTypeFormat = getListStyleValue(listType, listStyleType, context.listFormat.threadItemCounts[depth]);
+                    if (listStyleTypeFormat) {
+                        format.listStyleType = listStyleTypeFormat;
+                    }
                 }
                 else {
                     delete format.listStyleType;
@@ -13610,6 +14133,7 @@ exports.defaultContentModelFormatMap = void 0;
 exports.defaultContentModelFormatMap = {
     a: {
         underline: true,
+        textColor: undefined, // Set to undefined to force override color from parent element so we can write correct link color if any, because browser will assign a default color for link if it doesn't have one
     },
     blockquote: {
         marginTop: '1em',
@@ -13927,6 +14451,10 @@ exports.ChangeSource = {
      * Data of this event will be the key code number
      */
     Keyboard: 'Keyboard',
+    /**
+     * Content changed by auto format
+     */
+    AutoFormat: 'AutoFormat',
 };
 
 
@@ -14417,7 +14945,11 @@ var normalizeContentModel_1 = __webpack_require__(/*! ../modelApi/common/normali
  * @returns A ContentModelDocument object that contains all the models created from the give root element
  */
 function domToContentModel(root, context) {
+    var _a;
     var model = (0, createContentModelDocument_1.createContentModelDocument)(context.defaultFormat);
+    if (((_a = context.selection) === null || _a === void 0 ? void 0 : _a.type) == 'range' && context.selection.isReverted) {
+        model.hasRevertedRangeSelection = true;
+    }
     context.elementProcessors.child(model, root, context);
     (0, normalizeContentModel_1.normalizeContentModel)(model);
     return model;
@@ -16015,19 +16547,22 @@ function stackFormatInternal(format, processType) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.addDelimiters = exports.isEntityDelimiter = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = void 0;
+exports.addDelimiters = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestBlockEntityContainer = exports.findClosestEntityWrapper = exports.isEntityElement = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var applyFormat_1 = __webpack_require__(/*! ../modelToDom/utils/applyFormat */ "./packages/roosterjs-content-model-dom/lib/modelToDom/utils/applyFormat.ts");
 var isElementOfType_1 = __webpack_require__(/*! ./isElementOfType */ "./packages/roosterjs-content-model-dom/lib/domUtils/isElementOfType.ts");
 var isNodeOfType_1 = __webpack_require__(/*! ./isNodeOfType */ "./packages/roosterjs-content-model-dom/lib/domUtils/isNodeOfType.ts");
 var toArray_1 = __webpack_require__(/*! ./toArray */ "./packages/roosterjs-content-model-dom/lib/domUtils/toArray.ts");
 var ENTITY_INFO_NAME = '_Entity';
+var ENTITY_INFO_SELECTOR = '.' + ENTITY_INFO_NAME;
 var ENTITY_TYPE_PREFIX = '_EType_';
 var ENTITY_ID_PREFIX = '_EId_';
 var ENTITY_READONLY_PREFIX = '_EReadonly_';
 var ZERO_WIDTH_SPACE = '\u200B';
 var DELIMITER_BEFORE = 'entityDelimiterBefore';
 var DELIMITER_AFTER = 'entityDelimiterAfter';
+var BLOCK_ENTITY_CONTAINER = '_E_EBlockEntityContainer';
+var BLOCK_ENTITY_CONTAINER_SELECTOR = '.' + BLOCK_ENTITY_CONTAINER;
 /**
  * Check if the given DOM Node is an entity wrapper element
  */
@@ -16041,9 +16576,19 @@ exports.isEntityElement = isEntityElement;
  * @param domHelper The DOM helper to use
  */
 function findClosestEntityWrapper(startNode, domHelper) {
-    return domHelper.findClosestElementAncestor(startNode, "." + ENTITY_INFO_NAME);
+    return domHelper.findClosestElementAncestor(startNode, ENTITY_INFO_SELECTOR);
 }
 exports.findClosestEntityWrapper = findClosestEntityWrapper;
+/**
+ * Find the closest block entity wrapper element from a given DOM node
+ * @param node The node to start looking for entity container
+ * @param domHelper The DOM helper
+ * @returns
+ */
+function findClosestBlockEntityContainer(node, domHelper) {
+    return domHelper.findClosestElementAncestor(node, BLOCK_ENTITY_CONTAINER_SELECTOR);
+}
+exports.findClosestBlockEntityContainer = findClosestBlockEntityContainer;
 /**
  * Get all entity wrapper elements under the given root element
  * @param root The root element to query from
@@ -16105,15 +16650,27 @@ exports.generateEntityClassNames = generateEntityClassNames;
 /**
  * Checks whether the node provided is a Entity delimiter
  * @param node the node to check
+ * @param isBefore True to match delimiter before entity only, false to match delimiter after entity, or undefined means match both
  * @return true if it is a delimiter
  */
-function isEntityDelimiter(element) {
+function isEntityDelimiter(element, isBefore) {
+    var matchBefore = isBefore === undefined || isBefore;
+    var matchAfter = isBefore === undefined || !isBefore;
     return ((0, isElementOfType_1.isElementOfType)(element, 'span') &&
-        (element.classList.contains(DELIMITER_AFTER) ||
-            element.classList.contains(DELIMITER_BEFORE)) &&
+        ((matchAfter && element.classList.contains(DELIMITER_AFTER)) ||
+            (matchBefore && element.classList.contains(DELIMITER_BEFORE))) &&
         element.textContent === ZERO_WIDTH_SPACE);
 }
 exports.isEntityDelimiter = isEntityDelimiter;
+/**
+ * Check if the given element is a container element of block entity
+ * @param element The element to check
+ * @returns True if the element is a block entity container, otherwise false
+ */
+function isBlockEntityContainer(element) {
+    return (0, isElementOfType_1.isElementOfType)(element, 'div') && element.classList.contains(BLOCK_ENTITY_CONTAINER);
+}
+exports.isBlockEntityContainer = isBlockEntityContainer;
 /**
  * Adds delimiters to the element provided. If the delimiters already exists, will not be added
  * @param element the node to add the delimiters
@@ -19007,9 +19564,9 @@ exports.shouldSetValue = shouldSetValue;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.addBlock = exports.createEmptyModel = exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
-exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.setParagraphNotImplicit = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = void 0;
-exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = void 0;
+exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
+exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.getClosestAncestorBlockGroupIndex = exports.isBlockGroupOfType = exports.cacheGetEventData = exports.extractClipboardItems = exports.transformColor = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = exports.isCharacterValue = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.setParagraphNotImplicit = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.createEmptyModel = void 0;
+exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.updateListMetadata = exports.updateTableMetadata = exports.updateTableCellMetadata = exports.updateImageMetadata = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = void 0;
 var domToContentModel_1 = __webpack_require__(/*! ./domToModel/domToContentModel */ "./packages/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts");
 Object.defineProperty(exports, "domToContentModel", ({ enumerable: true, get: function () { return domToContentModel_1.domToContentModel; } }));
 var contentModelToDom_1 = __webpack_require__(/*! ./modelToDom/contentModelToDom */ "./packages/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts");
@@ -19058,6 +19615,8 @@ Object.defineProperty(exports, "parseEntityFormat", ({ enumerable: true, get: fu
 Object.defineProperty(exports, "generateEntityClassNames", ({ enumerable: true, get: function () { return entityUtils_1.generateEntityClassNames; } }));
 Object.defineProperty(exports, "addDelimiters", ({ enumerable: true, get: function () { return entityUtils_1.addDelimiters; } }));
 Object.defineProperty(exports, "isEntityDelimiter", ({ enumerable: true, get: function () { return entityUtils_1.isEntityDelimiter; } }));
+Object.defineProperty(exports, "isBlockEntityContainer", ({ enumerable: true, get: function () { return entityUtils_1.isBlockEntityContainer; } }));
+Object.defineProperty(exports, "findClosestBlockEntityContainer", ({ enumerable: true, get: function () { return entityUtils_1.findClosestBlockEntityContainer; } }));
 var reuseCachedElement_1 = __webpack_require__(/*! ./domUtils/reuseCachedElement */ "./packages/roosterjs-content-model-dom/lib/domUtils/reuseCachedElement.ts");
 Object.defineProperty(exports, "reuseCachedElement", ({ enumerable: true, get: function () { return reuseCachedElement_1.reuseCachedElement; } }));
 var isWhiteSpacePreserved_1 = __webpack_require__(/*! ./domUtils/isWhiteSpacePreserved */ "./packages/roosterjs-content-model-dom/lib/domUtils/isWhiteSpacePreserved.ts");
@@ -19122,6 +19681,10 @@ var normalizeSegment_1 = __webpack_require__(/*! ./modelApi/common/normalizeSegm
 Object.defineProperty(exports, "normalizeSingleSegment", ({ enumerable: true, get: function () { return normalizeSegment_1.normalizeSingleSegment; } }));
 var setParagraphNotImplicit_1 = __webpack_require__(/*! ./modelApi/block/setParagraphNotImplicit */ "./packages/roosterjs-content-model-dom/lib/modelApi/block/setParagraphNotImplicit.ts");
 Object.defineProperty(exports, "setParagraphNotImplicit", ({ enumerable: true, get: function () { return setParagraphNotImplicit_1.setParagraphNotImplicit; } }));
+var getOrderedListNumberStr_1 = __webpack_require__(/*! ./modelApi/list/getOrderedListNumberStr */ "./packages/roosterjs-content-model-dom/lib/modelApi/list/getOrderedListNumberStr.ts");
+Object.defineProperty(exports, "getOrderedListNumberStr", ({ enumerable: true, get: function () { return getOrderedListNumberStr_1.getOrderedListNumberStr; } }));
+var getAutoListStyleType_1 = __webpack_require__(/*! ./modelApi/list/getAutoListStyleType */ "./packages/roosterjs-content-model-dom/lib/modelApi/list/getAutoListStyleType.ts");
+Object.defineProperty(exports, "getAutoListStyleType", ({ enumerable: true, get: function () { return getAutoListStyleType_1.getAutoListStyleType; } }));
 var parseValueWithUnit_1 = __webpack_require__(/*! ./formatHandlers/utils/parseValueWithUnit */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/parseValueWithUnit.ts");
 Object.defineProperty(exports, "parseValueWithUnit", ({ enumerable: true, get: function () { return parseValueWithUnit_1.parseValueWithUnit; } }));
 var borderFormatHandler_1 = __webpack_require__(/*! ./formatHandlers/common/borderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts");
@@ -22138,6 +22701,175 @@ function calculateLightness(color) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/modelApi/list/getAutoListStyleType.ts":
+/*!****************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/modelApi/list/getAutoListStyleType.ts ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getAutoListStyleType = void 0;
+var BulletListType_1 = __webpack_require__(/*! ../../constants/BulletListType */ "./packages/roosterjs-content-model-dom/lib/constants/BulletListType.ts");
+var NumberingListType_1 = __webpack_require__(/*! ../../constants/NumberingListType */ "./packages/roosterjs-content-model-dom/lib/constants/NumberingListType.ts");
+var DefaultOrderedListStyles = [
+    NumberingListType_1.NumberingListType.Decimal,
+    NumberingListType_1.NumberingListType.LowerAlpha,
+    NumberingListType_1.NumberingListType.LowerRoman,
+];
+var DefaultUnorderedListStyles = [
+    BulletListType_1.BulletListType.Disc,
+    BulletListType_1.BulletListType.Circle,
+    BulletListType_1.BulletListType.Square,
+];
+var OrderedListStyleRevertMap = {
+    'lower-alpha': NumberingListType_1.NumberingListType.LowerAlpha,
+    'lower-latin': NumberingListType_1.NumberingListType.LowerAlpha,
+    'upper-alpha': NumberingListType_1.NumberingListType.UpperAlpha,
+    'upper-latin': NumberingListType_1.NumberingListType.UpperAlpha,
+    'lower-roman': NumberingListType_1.NumberingListType.LowerRoman,
+    'upper-roman': NumberingListType_1.NumberingListType.UpperRoman,
+};
+var UnorderedListStyleRevertMap = {
+    disc: BulletListType_1.BulletListType.Disc,
+    circle: BulletListType_1.BulletListType.Circle,
+    square: BulletListType_1.BulletListType.Square,
+};
+/**
+ * Get automatic list style of a list item according to its lis type and metadata.
+ * @param listType The list type, either OL or UL
+ * @param metadata Metadata of this list item from list item model
+ * @param depth Depth of list level, start from 0
+ * @param existingStyleType Existing list style type in format, if any
+ * @returns A number to represent list style type.
+ * This will be the value of either NumberingListType (when listType is OL) or BulletListType (when listType is UL).
+ * When there is a specified list style in its metadata, return this value, otherwise
+ * When specified "applyListStyleFromLevel" in metadata, calculate auto list type from its depth, otherwise
+ * When there is already listStyleType in list level format, find a related style type index, otherwise
+ * return undefined
+ */
+function getAutoListStyleType(listType, metadata, depth, existingStyleType) {
+    var orderedStyleType = metadata.orderedStyleType, unorderedStyleType = metadata.unorderedStyleType, applyListStyleFromLevel = metadata.applyListStyleFromLevel;
+    if (listType == 'OL') {
+        return typeof orderedStyleType == 'number'
+            ? orderedStyleType
+            : applyListStyleFromLevel
+                ? DefaultOrderedListStyles[depth % DefaultOrderedListStyles.length]
+                : existingStyleType
+                    ? OrderedListStyleRevertMap[existingStyleType]
+                    : undefined;
+    }
+    else {
+        return typeof unorderedStyleType == 'number'
+            ? unorderedStyleType
+            : applyListStyleFromLevel
+                ? DefaultUnorderedListStyles[depth % DefaultUnorderedListStyles.length]
+                : existingStyleType
+                    ? UnorderedListStyleRevertMap[existingStyleType]
+                    : undefined;
+    }
+}
+exports.getAutoListStyleType = getAutoListStyleType;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/modelApi/list/getOrderedListNumberStr.ts":
+/*!*******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/modelApi/list/getOrderedListNumberStr.ts ***!
+  \*******************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getOrderedListNumberStr = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var getObjectKeys_1 = __webpack_require__(/*! ../../domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
+var NumberingListType_1 = __webpack_require__(/*! ../../constants/NumberingListType */ "./packages/roosterjs-content-model-dom/lib/constants/NumberingListType.ts");
+var CharCodeOfA = 65;
+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,
+};
+/**
+ * Get the list number for a list item according to list style type and its index number
+ * @param styleType The list style number, should be a value of NumberingListType type
+ * @param listNumber List number, start from 1
+ * @returns A string for this list item. For example, when pass in NumberingListType.LowerAlpha and 2, it returns "b"
+ */
+function getOrderedListNumberStr(styleType, listNumber) {
+    switch (styleType) {
+        case NumberingListType_1.NumberingListType.LowerAlpha:
+        case NumberingListType_1.NumberingListType.LowerAlphaDash:
+        case NumberingListType_1.NumberingListType.LowerAlphaDoubleParenthesis:
+        case NumberingListType_1.NumberingListType.LowerAlphaParenthesis:
+            return convertDecimalsToAlpha(listNumber, true /*isLowerCase*/);
+        case NumberingListType_1.NumberingListType.UpperAlpha:
+        case NumberingListType_1.NumberingListType.UpperAlphaDash:
+        case NumberingListType_1.NumberingListType.UpperAlphaDoubleParenthesis:
+        case NumberingListType_1.NumberingListType.UpperAlphaParenthesis:
+            return convertDecimalsToAlpha(listNumber, false /*isLowerCase*/);
+        case NumberingListType_1.NumberingListType.LowerRoman:
+        case NumberingListType_1.NumberingListType.LowerRomanDash:
+        case NumberingListType_1.NumberingListType.LowerRomanDoubleParenthesis:
+        case NumberingListType_1.NumberingListType.LowerRomanParenthesis:
+            return convertDecimalsToRoman(listNumber, true /*isLowerCase*/);
+        case NumberingListType_1.NumberingListType.UpperRoman:
+        case NumberingListType_1.NumberingListType.UpperRomanDash:
+        case NumberingListType_1.NumberingListType.UpperRomanDoubleParenthesis:
+        case NumberingListType_1.NumberingListType.UpperRomanParenthesis:
+            return convertDecimalsToRoman(listNumber, false /*isLowerCase*/);
+        default:
+            return listNumber + '';
+    }
+}
+exports.getOrderedListNumberStr = getOrderedListNumberStr;
+function convertDecimalsToAlpha(decimal, isLowerCase) {
+    var alpha = '';
+    decimal--;
+    while (decimal >= 0) {
+        alpha = String.fromCharCode((decimal % 26) + CharCodeOfA) + alpha;
+        decimal = Math.floor(decimal / 26) - 1;
+    }
+    return isLowerCase ? alpha.toLowerCase() : alpha;
+}
+function convertDecimalsToRoman(decimal, isLowerCase) {
+    var e_1, _a;
+    var romanValue = '';
+    try {
+        for (var _b = (0, tslib_1.__values)((0, getObjectKeys_1.getObjectKeys)(RomanValues)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var i = _c.value;
+            var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
+            decimal = decimal - timesRomanCharAppear * RomanValues[i];
+            romanValue = romanValue + i.repeat(timesRomanCharAppear);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/modelApi/metadata/definitionCreators.ts":
@@ -22534,17 +23266,19 @@ var iterateSelections_1 = __webpack_require__(/*! ./iterateSelections */ "./pack
  * @param model The Content Model to get selection from
  * @param includingFormatHolder True means also include format holder as segment from list item, in that case paragraph will be null
  */
-function getSelectedSegmentsAndParagraphs(model, includingFormatHolder) {
+function getSelectedSegmentsAndParagraphs(model, includingFormatHolder, includingEntity) {
     var selections = collectSelections(model, {
         includeListFormatHolder: includingFormatHolder ? 'allSegments' : 'never',
     });
     var result = [];
     selections.forEach(function (_a) {
-        var segments = _a.segments, block = _a.block;
+        var segments = _a.segments, block = _a.block, path = _a.path;
         if (segments && ((includingFormatHolder && !block) || (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph')) {
             segments.forEach(function (segment) {
-                if (segment.segmentType != 'Entity' || !segment.entityFormat.isReadonly) {
-                    result.push([segment, (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph' ? block : null]);
+                if (includingEntity ||
+                    segment.segmentType != 'Entity' ||
+                    !segment.entityFormat.isReadonly) {
+                    result.push([segment, (block === null || block === void 0 ? void 0 : block.blockType) == 'Paragraph' ? block : null, path]);
                 }
             });
         }
@@ -22580,15 +23314,15 @@ function getSelectedParagraphs(model) {
 exports.getSelectedParagraphs = getSelectedParagraphs;
 /**
  * Get an array of block group - block pair that is of the expected block group type from selection
- * @param model The Content Model to get selection from
+ * @param group The root block group to search
  * @param blockGroupTypes The expected block group types
  * @param stopTypes Block group types that will stop searching when hit
  * @param deepFirst True means search in deep first, otherwise wide first
  */
-function getOperationalBlocks(model, blockGroupTypes, stopTypes, deepFirst) {
+function getOperationalBlocks(group, blockGroupTypes, stopTypes, deepFirst) {
     var result = [];
     var findSequence = deepFirst ? blockGroupTypes.map(function (type) { return [type]; }) : [blockGroupTypes];
-    var selections = collectSelections(model, {
+    var selections = collectSelections(group, {
         includeListFormatHolder: 'never',
         contentUnderSelectedTableCell: 'ignoreForTable', // When whole table is selected, we treat the table as a single block
     });
@@ -22666,9 +23400,9 @@ function getFirstSelectedListItem(model) {
     return listItem;
 }
 exports.getFirstSelectedListItem = getFirstSelectedListItem;
-function collectSelections(model, option) {
+function collectSelections(group, option) {
     var selections = [];
-    (0, iterateSelections_1.iterateSelections)(model, function (path, tableContext, block, segments) {
+    (0, iterateSelections_1.iterateSelections)(group, function (path, tableContext, block, segments) {
         selections.push({
             path: path,
             tableContext: tableContext,
@@ -23209,6 +23943,9 @@ var toArray_1 = __webpack_require__(/*! ../domUtils/toArray */ "./packages/roost
 function contentModelToDom(doc, root, model, context) {
     context.modelHandlers.blockGroupChildren(doc, root, model, context);
     var range = extractSelectionRange(doc, context);
+    if (model.hasRevertedRangeSelection && (range === null || range === void 0 ? void 0 : range.type) == 'range') {
+        range.isReverted = true;
+    }
     root.normalize();
     return range;
 }
@@ -24552,6 +25289,7 @@ exports.stackFormat = stackFormat;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.contentModelToText = void 0;
+var TextForHR = '________________________________________';
 /**
  * Convert Content Model to plain text
  * @param model The source Content Model
@@ -24589,9 +25327,13 @@ function contentModelToTextArray(group, textArray) {
                             break;
                     }
                 });
-                textArray.push(text_1);
+                if (text_1) {
+                    textArray.push(text_1);
+                }
                 break;
             case 'Divider':
+                textArray.push(block.tagName == 'hr' ? TextForHR : '');
+                break;
             case 'Entity':
                 textArray.push('');
                 break;
@@ -24622,9 +25364,14 @@ function contentModelToTextArray(group, textArray) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.AutoFormatPlugin = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var createLink_1 = __webpack_require__(/*! ./link/createLink */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts");
 var createLinkAfterSpace_1 = __webpack_require__(/*! ./link/createLinkAfterSpace */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLinkAfterSpace.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var keyboardListTrigger_1 = __webpack_require__(/*! ./list/keyboardListTrigger */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/list/keyboardListTrigger.ts");
+var transformFraction_1 = __webpack_require__(/*! ./numbers/transformFraction */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/numbers/transformFraction.ts");
+var transformHyphen_1 = __webpack_require__(/*! ./hyphen/transformHyphen */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/hyphen/transformHyphen.ts");
+var transformOrdinals_1 = __webpack_require__(/*! ./numbers/transformOrdinals */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/numbers/transformOrdinals.ts");
 var unlink_1 = __webpack_require__(/*! ./link/unlink */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/unlink.ts");
 /**
  * @internal
@@ -24634,6 +25381,9 @@ var DefaultOptions = {
     autoNumbering: false,
     autoUnlink: false,
     autoLink: false,
+    autoHyphen: false,
+    autoFraction: false,
+    autoOrdinals: false,
 };
 /**
  * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -24646,6 +25396,9 @@ var AutoFormatPlugin = /** @class */ (function () {
      *  - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to false.
      *  - autoLink: A boolean that enables or disables automatic hyperlink creation when pasting or typing content. Defaults to false.
      *  - autoUnlink: A boolean that enables or disables automatic hyperlink removal when pressing backspace. Defaults to false.
+     *  - autoHyphen: A boolean that enables or disables automatic hyphen transformation. Defaults to false.
+     *  - autoFraction: A boolean that enables or disables automatic fraction transformation. Defaults to false.
+     *  - autoOrdinals: A boolean that enables or disables automatic ordinal number transformation. Defaults to false.
      */
     function AutoFormatPlugin(options) {
         if (options === void 0) { options = DefaultOptions; }
@@ -24697,15 +25450,49 @@ var AutoFormatPlugin = /** @class */ (function () {
         }
     };
     AutoFormatPlugin.prototype.handleEditorInputEvent = function (editor, event) {
+        var _this = this;
         var rawEvent = event.rawEvent;
-        if (rawEvent.inputType === 'insertText') {
+        var selection = editor.getDOMSelection();
+        if (rawEvent.inputType === 'insertText' &&
+            selection &&
+            selection.type === 'range' &&
+            selection.range.collapsed) {
             switch (rawEvent.data) {
                 case ' ':
-                    var _a = this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, autoLink = _a.autoLink;
-                    (0, keyboardListTrigger_1.keyboardListTrigger)(editor, autoBullet, autoNumbering);
-                    if (autoLink) {
-                        (0, createLinkAfterSpace_1.createLinkAfterSpace)(editor);
-                    }
+                    var formatOptions_1 = {
+                        changeSource: '',
+                        apiName: '',
+                    };
+                    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, previousSegment, paragraph, _markerFormat, context) {
+                        var _a = _this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, autoLink = _a.autoLink, autoHyphen = _a.autoHyphen, autoFraction = _a.autoFraction, autoOrdinals = _a.autoOrdinals;
+                        var shouldHyphen = false;
+                        var shouldLink = false;
+                        var shouldList = false;
+                        var shouldFraction = false;
+                        var shouldOrdinals = false;
+                        if (autoBullet || autoNumbering) {
+                            shouldList = (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering);
+                        }
+                        if (autoLink) {
+                            shouldLink = (0, createLinkAfterSpace_1.createLinkAfterSpace)(previousSegment, paragraph, context);
+                        }
+                        if (autoHyphen) {
+                            shouldHyphen = (0, transformHyphen_1.transformHyphen)(previousSegment, paragraph, context);
+                        }
+                        if (autoFraction) {
+                            shouldFraction = (0, transformFraction_1.transformFraction)(previousSegment, paragraph, context);
+                        }
+                        if (autoOrdinals) {
+                            shouldOrdinals = (0, transformOrdinals_1.transformOrdinals)(previousSegment, paragraph, context);
+                        }
+                        formatOptions_1.apiName = getApiName(shouldList, shouldHyphen);
+                        formatOptions_1.changeSource = getChangeSource(shouldList, shouldHyphen, shouldLink);
+                        return (shouldList ||
+                            shouldHyphen ||
+                            shouldLink ||
+                            shouldFraction ||
+                            shouldOrdinals);
+                    }, formatOptions_1);
                     break;
             }
         }
@@ -24731,134 +25518,137 @@ var AutoFormatPlugin = /** @class */ (function () {
     return AutoFormatPlugin;
 }());
 exports.AutoFormatPlugin = AutoFormatPlugin;
+var getApiName = function (shouldList, shouldHyphen) {
+    return shouldList ? 'autoToggleList' : shouldHyphen ? 'autoHyphen' : '';
+};
+var getChangeSource = function (shouldList, shouldHyphen, shouldLink) {
+    return shouldList || shouldHyphen
+        ? roosterjs_content_model_dom_1.ChangeSource.AutoFormat
+        : shouldLink
+            ? roosterjs_content_model_dom_1.ChangeSource.AutoLink
+            : '';
+};
 
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts":
-/*!************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts ***!
-  \************************************************************************************/
+/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/hyphen/transformHyphen.ts":
+/*!*******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/hyphen/transformHyphen.ts ***!
+  \*******************************************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createLink = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var getLinkSegment_1 = __webpack_require__(/*! ./getLinkSegment */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts");
+exports.transformHyphen = void 0;
+var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
-function createLink(editor) {
-    editor.formatContentModel(function (model) {
-        var link = (0, getLinkSegment_1.getLinkSegment)(model);
-        if (link && !link.link) {
-            (0, roosterjs_content_model_dom_1.addLink)(link, {
-                format: {
-                    href: link.text,
-                    underline: true,
-                },
-                dataset: {},
-            });
-            return true;
+function transformHyphen(previousSegment, paragraph, context) {
+    var segments = previousSegment.text.split(' ');
+    var dashes = segments[segments.length - 2];
+    if (dashes === '--') {
+        var textIndex = previousSegment.text.lastIndexOf('--');
+        var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + 2);
+        textSegment.text = textSegment.text.replace('--', '—');
+        context.canUndoByBackspace = true;
+        return true;
+    }
+    else {
+        var text = segments.pop();
+        var hasDashes = text && (text === null || text === void 0 ? void 0 : text.indexOf('--')) > -1;
+        if (hasDashes && text.trim() !== '--') {
+            var textIndex = previousSegment.text.indexOf(text);
+            var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + text.length - 1);
+            var textLength = textSegment.text.length;
+            if (textSegment.text[0] !== '-' && textSegment.text[textLength - 1] !== '-') {
+                textSegment.text = textSegment.text.replace('--', '—');
+                context.canUndoByBackspace = true;
+                return true;
+            }
         }
-        return false;
-    });
+    }
+    return false;
 }
-exports.createLink = createLink;
+exports.transformHyphen = transformHyphen;
 
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLinkAfterSpace.ts":
-/*!**********************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLinkAfterSpace.ts ***!
-  \**********************************************************************************************/
+/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts":
+/*!************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts ***!
+  \************************************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createLinkAfterSpace = void 0;
+exports.createLink = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
-var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
-function createLinkAfterSpace(editor) {
-    editor.formatContentModel(function (model, context) {
-        var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /* includingFormatHolder */);
-        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
-            var markerIndex = selectedSegmentsAndParagraphs[0][1].segments.findIndex(function (segment) { return segment.segmentType == 'SelectionMarker'; });
-            var paragraph = selectedSegmentsAndParagraphs[0][1];
-            if (markerIndex > 0) {
-                var textSegment = paragraph.segments[markerIndex - 1];
-                var marker = paragraph.segments[markerIndex];
-                if (marker.segmentType == 'SelectionMarker' &&
-                    textSegment &&
-                    textSegment.segmentType == 'Text' &&
-                    !textSegment.link) {
-                    var link = textSegment.text.split(' ').pop();
-                    var url = link === null || link === void 0 ? void 0 : link.trim();
-                    var linkData = null;
-                    if (url && link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(url))) {
-                        var linkSegment = (0, splitTextSegment_1.splitTextSegment)(textSegment, paragraph, textSegment.text.length - link.trimLeft().length, textSegment.text.trimRight().length);
-                        linkSegment.link = {
-                            format: {
-                                href: linkData.normalizedUrl,
-                                underline: true,
-                            },
-                            dataset: {},
-                        };
-                        context.canUndoByBackspace = true;
-                        return true;
-                    }
-                }
-            }
+function createLink(editor) {
+    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, linkSegment, _paragraph) {
+        var linkData = null;
+        if (!linkSegment.link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(linkSegment.text))) {
+            (0, roosterjs_content_model_dom_1.addLink)(linkSegment, {
+                format: {
+                    href: linkData.normalizedUrl,
+                    underline: true,
+                },
+                dataset: {},
+            });
+            return true;
         }
         return false;
+    }, {
+        changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoLink,
     });
 }
-exports.createLinkAfterSpace = createLinkAfterSpace;
+exports.createLink = createLink;
 
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts":
-/*!****************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts ***!
-  \****************************************************************************************/
+/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLinkAfterSpace.ts":
+/*!**********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLinkAfterSpace.ts ***!
+  \**********************************************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getLinkSegment = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+exports.createLinkAfterSpace = void 0;
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
-function getLinkSegment(model) {
-    var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /* includingFormatHolder */);
-    if (selectedSegmentsAndParagraphs.length == 1 && selectedSegmentsAndParagraphs[0][1]) {
-        var selectedParagraph = selectedSegmentsAndParagraphs[0][1];
-        var marker = selectedParagraph.segments[selectedParagraph.segments.length - 1];
-        var link = selectedParagraph.segments[selectedParagraph.segments.length - 2];
-        if (marker &&
-            link &&
-            marker.segmentType === 'SelectionMarker' &&
-            marker.isSelected &&
-            link.segmentType === 'Text' &&
-            ((0, roosterjs_content_model_api_1.matchLink)(link.text) || link.link)) {
-            return link;
-        }
+function createLinkAfterSpace(previousSegment, paragraph, context) {
+    var link = previousSegment.text.split(' ').pop();
+    var url = link === null || link === void 0 ? void 0 : link.trim();
+    var linkData = null;
+    if (url && link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(url))) {
+        var linkSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, previousSegment.text.length - link.trimLeft().length, previousSegment.text.trimRight().length);
+        linkSegment.link = {
+            format: {
+                href: linkData.normalizedUrl,
+                underline: true,
+            },
+            dataset: {},
+        };
+        context.canUndoByBackspace = true;
+        return true;
     }
-    return undefined;
+    return false;
 }
-exports.getLinkSegment = getLinkSegment;
+exports.createLinkAfterSpace = createLinkAfterSpace;
 
 
 /***/ }),
@@ -24873,15 +25663,14 @@ exports.getLinkSegment = getLinkSegment;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.unlink = void 0;
-var getLinkSegment_1 = __webpack_require__(/*! ./getLinkSegment */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
 function unlink(editor, rawEvent) {
-    editor.formatContentModel(function (model) {
-        var link = (0, getLinkSegment_1.getLinkSegment)(model);
-        if (link === null || link === void 0 ? void 0 : link.link) {
-            link.link = undefined;
+    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, linkSegment, _paragraph) {
+        if (linkSegment === null || linkSegment === void 0 ? void 0 : linkSegment.link) {
+            linkSegment.link = undefined;
             rawEvent.preventDefault();
             return true;
         }
@@ -24980,7 +25769,7 @@ function getListTypeStyle(model, shouldSearchForBullet, shouldSearchForNumbering
         marker.segmentType == 'SelectionMarker' &&
         listMarkerSegment &&
         listMarkerSegment.segmentType == 'Text') {
-        var listMarker = listMarkerSegment.text;
+        var listMarker = listMarkerSegment.text.trim();
         var bulletType = bulletListType[listMarker];
         if (bulletType && shouldSearchForBullet) {
             return { listType: 'UL', styleType: bulletType };
@@ -25043,7 +25832,7 @@ var bulletListType = {
     '—': roosterjs_content_model_dom_1.BulletListType.Hyphen,
 };
 var isNewList = function (listMarker) {
-    var marker = listMarker.replace(/[^\w\s]/g, '').trim();
+    var marker = listMarker.replace(/[^\w\s]/g, '');
     var pattern = /^[1aAiI]$/;
     return pattern.test(marker);
 };
@@ -25226,32 +26015,22 @@ function canAppendList(index, previousListIndex) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.keyboardListTrigger = void 0;
 var getListTypeStyle_1 = __webpack_require__(/*! ./getListTypeStyle */ "./packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
-function keyboardListTrigger(editor, shouldSearchForBullet, shouldSearchForNumbering) {
+function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, shouldSearchForNumbering) {
     if (shouldSearchForBullet === void 0) { shouldSearchForBullet = true; }
     if (shouldSearchForNumbering === void 0) { shouldSearchForNumbering = true; }
-    if (shouldSearchForBullet || shouldSearchForNumbering) {
-        editor.formatContentModel(function (model, context) {
-            var listStyleType = (0, getListTypeStyle_1.getListTypeStyle)(model, shouldSearchForBullet, shouldSearchForNumbering);
-            if (listStyleType) {
-                var segmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false);
-                if (segmentsAndParagraphs[0] && segmentsAndParagraphs[0][1]) {
-                    segmentsAndParagraphs[0][1].segments.splice(0, 1);
-                }
-                var listType = listStyleType.listType, styleType = listStyleType.styleType, index = listStyleType.index;
-                triggerList(model, listType, styleType, index);
-                context.canUndoByBackspace = true;
-                return true;
-            }
-            return false;
-        }, {
-            apiName: 'autoToggleList',
-        });
+    var listStyleType = (0, getListTypeStyle_1.getListTypeStyle)(model, shouldSearchForBullet, shouldSearchForNumbering);
+    if (listStyleType) {
+        paragraph.segments.splice(0, 1);
+        var listType = listStyleType.listType, styleType = listStyleType.styleType, index = listStyleType.index;
+        triggerList(model, listType, styleType, index);
+        context.canUndoByBackspace = true;
+        return true;
     }
+    return false;
 }
 exports.keyboardListTrigger = keyboardListTrigger;
 var triggerList = function (model, listType, styleType, index) {
@@ -25270,6 +26049,85 @@ var triggerList = function (model, listType, styleType, index) {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/numbers/transformFraction.ts":
+/*!**********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/numbers/transformFraction.ts ***!
+  \**********************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.transformFraction = void 0;
+var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
+var FRACTIONS = {
+    '1/2': '½',
+    '1/4': '¼',
+    '3/4': '¾',
+};
+/**
+ * @internal
+ */
+function transformFraction(previousSegment, paragraph, context) {
+    var _a;
+    var fraction = (_a = previousSegment.text.split(' ').pop()) === null || _a === void 0 ? void 0 : _a.trim();
+    if (fraction && FRACTIONS[fraction]) {
+        var textLength = previousSegment.text.length - 1;
+        var textIndex = textLength - fraction.length;
+        var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textLength);
+        textSegment.text = FRACTIONS[fraction];
+        context.canUndoByBackspace = true;
+        return true;
+    }
+    return false;
+}
+exports.transformFraction = transformFraction;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/autoFormat/numbers/transformOrdinals.ts":
+/*!**********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/autoFormat/numbers/transformOrdinals.ts ***!
+  \**********************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.transformOrdinals = void 0;
+var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
+var getOrdinal = function (value) {
+    var ORDINALS = {
+        1: 'st',
+        2: 'nd',
+        3: 'rd',
+    };
+    return ORDINALS[value] || 'th';
+};
+/**
+ * @internal
+ */
+function transformOrdinals(previousSegment, paragraph, context) {
+    var _a;
+    var value = (_a = previousSegment.text.split(' ').pop()) === null || _a === void 0 ? void 0 : _a.trim();
+    if (value) {
+        var ordinal = value.substring(value.length - 2);
+        var ordinalValue = parseInt(value);
+        if (ordinalValue && getOrdinal(ordinalValue) === ordinal) {
+            var ordinalSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, previousSegment.text.length - 3, previousSegment.text.length - 1);
+            ordinalSegment.format.superOrSubScriptSequence = 'super';
+            context.canUndoByBackspace = true;
+            return true;
+        }
+    }
+    return false;
+}
+exports.transformOrdinals = transformOrdinals;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/contextMenuBase/ContextMenuPluginBase.ts":
@@ -25364,6 +26222,103 @@ var ContextMenuPluginBase = /** @class */ (function () {
 exports.ContextMenuPluginBase = ContextMenuPluginBase;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/customReplace/CustomReplacePlugin.ts":
+/*!*******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/customReplace/CustomReplacePlugin.ts ***!
+  \*******************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.CustomReplacePlugin = void 0;
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+/**
+ * CustomReplacePlugin is a plugin that allows you to replace a string with another string in the editor.
+ */
+var CustomReplacePlugin = /** @class */ (function () {
+    /**
+     * @param customReplacements Custom replacement rules.
+     * Ex: [{ stringToReplace: ':)', replacementString: '🙂', replacementHandler: replaceEmojis }]
+     */
+    function CustomReplacePlugin(customReplacements) {
+        this.customReplacements = customReplacements;
+        this.editor = null;
+        this.triggerKeys = [];
+    }
+    /**
+     * Get name of this plugin
+     */
+    CustomReplacePlugin.prototype.getName = function () {
+        return 'CustomReplace';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    CustomReplacePlugin.prototype.initialize = function (editor) {
+        this.editor = editor;
+        this.triggerKeys = this.customReplacements.map(function (replacement) {
+            return replacement.stringToReplace.slice(-1);
+        });
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    CustomReplacePlugin.prototype.dispose = function () {
+        this.editor = null;
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    CustomReplacePlugin.prototype.onPluginEvent = function (event) {
+        if (this.editor) {
+            switch (event.eventType) {
+                case 'input':
+                    this.handleEditorInputEvent(this.editor, event);
+                    break;
+            }
+        }
+    };
+    CustomReplacePlugin.prototype.handleEditorInputEvent = function (editor, event) {
+        var _this = this;
+        var rawEvent = event.rawEvent;
+        var selection = editor.getDOMSelection();
+        var key = rawEvent.data;
+        if (this.customReplacements.length > 0 &&
+            rawEvent.inputType === 'insertText' &&
+            selection &&
+            selection.type === 'range' &&
+            selection.range.collapsed &&
+            key &&
+            this.triggerKeys.indexOf(key) > -1) {
+            (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, previousSegment, paragraph, _markerFormat, context) {
+                var replaced = _this.customReplacements.some(function (_a) {
+                    var stringToReplace = _a.stringToReplace, replacementString = _a.replacementString, replacementHandler = _a.replacementHandler;
+                    return replacementHandler(previousSegment, stringToReplace, replacementString, paragraph);
+                });
+                if (replaced) {
+                    context.canUndoByBackspace = true;
+                    return true;
+                }
+                return false;
+            });
+        }
+    };
+    return CustomReplacePlugin;
+}());
+exports.CustomReplacePlugin = CustomReplacePlugin;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts":
@@ -25448,11 +26403,18 @@ var EditPlugin = /** @class */ (function () {
         if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {
             switch (rawEvent.key) {
                 case 'Backspace':
-                case 'Delete':
                     // Use our API to handle BACKSPACE/DELETE key.
                     // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache
                     (0, keyboardDelete_1.keyboardDelete)(editor, rawEvent);
                     break;
+                case 'Delete':
+                    // Use our API to handle BACKSPACE/DELETE key.
+                    // No need to clear cache here since if we rely on browser's behavior, there will be Input event and its handler will reconcile cache
+                    // And leave it to browser when shift key is pressed so that browser will trigger cut event
+                    if (!event.rawEvent.shiftKey) {
+                        (0, keyboardDelete_1.keyboardDelete)(editor, rawEvent);
+                    }
+                    break;
                 case 'Tab':
                     (0, keyboardTab_1.keyboardTab)(editor, rawEvent);
                     break;
@@ -25469,6 +26431,8 @@ var EditPlugin = /** @class */ (function () {
         }
     };
     EditPlugin.prototype.handleBeforeInputEvent = function (editor, rawEvent) {
+        var _this = this;
+        var _a, _b;
         // Some Android IMEs doesn't fire correct keydown event for BACKSPACE/DELETE key
         // Here we translate input event to BACKSPACE/DELETE keydown event to be compatible with existing logic
         if (!this.shouldHandleNextInputEvent ||
@@ -25496,6 +26460,15 @@ var EditPlugin = /** @class */ (function () {
         }
         if (handled) {
             rawEvent.preventDefault();
+            // Restore the selection to avoid the cursor jump issue
+            // See: https://issues.chromium.org/issues/330596261
+            var selection_1 = editor.getDOMSelection();
+            var doc = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDocument();
+            (_b = doc === null || doc === void 0 ? void 0 : doc.defaultView) === null || _b === void 0 ? void 0 : _b.requestAnimationFrame(function () {
+                if (_this.editor) {
+                    _this.editor.setDOMSelection(selection_1);
+                }
+            });
         }
     };
     return EditPlugin;
@@ -25744,15 +26717,21 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  * @internal
  */
 var deleteList = function (context) {
+    if (context.deleteResult != 'notDeleted') {
+        return;
+    }
     var _a = context.insertPoint, paragraph = _a.paragraph, marker = _a.marker, path = _a.path;
-    if (context.deleteResult == 'nothingToDelete' || context.deleteResult == 'notDeleted') {
-        var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem', 'TableCell']);
+    if (paragraph.segments[0] == marker) {
+        var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem'], ['TableCell', 'FormatContainer']);
         var item = path[index];
-        if (item &&
-            index >= 0 &&
-            paragraph.segments[0] == marker &&
-            item.blockGroupType == 'ListItem') {
-            item.levels = [];
+        var lastLevel = item === null || item === void 0 ? void 0 : item.levels[item.levels.length - 1];
+        if (lastLevel && (item === null || item === void 0 ? void 0 : item.blocks[0]) == paragraph) {
+            if (lastLevel.format.displayForDummyItem == 'block') {
+                item.levels.pop();
+            }
+            else {
+                lastLevel.format.displayForDummyItem = 'block';
+            }
             context.deleteResult = 'range';
         }
     }
@@ -26021,6 +27000,7 @@ exports.shouldDeleteAllSegmentsBefore = shouldDeleteAllSegmentsBefore;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.handleEnterOnList = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
@@ -26067,7 +27047,12 @@ var handleEnterOnList = function (context) {
                     listItem_1.levels.pop();
                 }
                 else {
-                    createNewListItem(context, listItem_1, listParent);
+                    var newListItem = createNewListItem(context, listItem_1, listParent);
+                    if (context.formatContext) {
+                        context.formatContext.announceData = (0, roosterjs_content_model_api_1.getListAnnounceData)((0, tslib_1.__spreadArray)([
+                            newListItem
+                        ], (0, tslib_1.__read)(path.slice(index + 1)), false));
+                    }
                 }
             }
             rawEvent === null || rawEvent === void 0 ? void 0 : rawEvent.preventDefault();
@@ -26093,10 +27078,11 @@ var createNewListItem = function (context, listItem, listParent) {
     insertPoint.paragraph = newParagraph;
     context.lastParagraph = newParagraph;
     listParent.blocks.splice(listIndex + 1, 0, newListItem);
+    return newListItem;
 };
 var createNewListLevel = function (listItem) {
     return listItem.levels.map(function (level) {
-        return (0, roosterjs_content_model_dom_1.createListLevel)(level.listType, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, level.format), { startNumberOverride: undefined }), level.dataset);
+        return (0, roosterjs_content_model_dom_1.createListLevel)(level.listType, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, level.format), { startNumberOverride: undefined, displayForDummyItem: undefined }), level.dataset);
     });
 };
 var createNewParagraph = function (insertPoint) {
@@ -26127,10 +27113,10 @@ var createNewParagraph = function (insertPoint) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.keyboardDelete = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var deleteAllSegmentBefore_1 = __webpack_require__(/*! ./deleteSteps/deleteAllSegmentBefore */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteAllSegmentBefore.ts");
 var deleteEmptyQuote_1 = __webpack_require__(/*! ./deleteSteps/deleteEmptyQuote */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteEmptyQuote.ts");
 var deleteList_1 = __webpack_require__(/*! ./deleteSteps/deleteList */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteList.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var handleKeyboardEventCommon_1 = __webpack_require__(/*! ./handleKeyboardEventCommon */ "./packages/roosterjs-content-model-plugins/lib/edit/handleKeyboardEventCommon.ts");
 var deleteWordSelection_1 = __webpack_require__(/*! ./deleteSteps/deleteWordSelection */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteWordSelection.ts");
 var deleteCollapsedSelection_1 = __webpack_require__(/*! ./deleteSteps/deleteCollapsedSelection */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteCollapsedSelection.ts");
@@ -26174,8 +27160,8 @@ function getDeleteSteps(rawEvent, isMac) {
     return [
         deleteAllSegmentBeforeStep,
         deleteWordSelection,
+        isForward ? null : deleteList_1.deleteList,
         deleteCollapsedSelection,
-        deleteList_1.deleteList,
         deleteQuote,
     ];
 }
@@ -26288,39 +27274,55 @@ exports.keyboardTab = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var handleTabOnList_1 = __webpack_require__(/*! ./tabUtils/handleTabOnList */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnList.ts");
 var handleTabOnParagraph_1 = __webpack_require__(/*! ./tabUtils/handleTabOnParagraph */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnParagraph.ts");
+var handleTabOnTable_1 = __webpack_require__(/*! ./tabUtils/handleTabOnTable */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts");
+var handleTabOnTableCell_1 = __webpack_require__(/*! ./tabUtils/handleTabOnTableCell */ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
 function keyboardTab(editor, rawEvent) {
     var selection = editor.getDOMSelection();
-    if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
-        editor.formatContentModel(function (model) {
-            return handleTab(model, rawEvent);
-        }, {
-            apiName: 'handleTabKey',
-        });
-        return true;
+    switch (selection === null || selection === void 0 ? void 0 : selection.type) {
+        case 'range':
+            editor.formatContentModel(function (model, context) {
+                return handleTab(model, rawEvent, context);
+            }, {
+                apiName: 'handleTabKey',
+            });
+            return true;
+        case 'table':
+            editor.formatContentModel(function (model) {
+                return (0, handleTabOnTable_1.handleTabOnTable)(model, rawEvent);
+            }, {
+                apiName: 'handleTabKey',
+            });
+            return true;
     }
 }
 exports.keyboardTab = keyboardTab;
 /**
  * If multiple blocks are selected, indent or outdent the selected blocks with setModelIndentation.
- * If only one block is selected, call handleTabOnParagraph or handleTabOnList to handle the tab key.
+ * If only one block is selected:
+ * - If it is a table cell, call handleTabOnTableCell to handle the tab key.
+ * - If it is a paragraph, call handleTabOnParagraph to handle the tab key.
+ * - If it is a list item, call handleTabOnList to handle the tab key.
  */
-function handleTab(model, rawEvent) {
-    var blocks = (0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem'], ['TableCell']);
+function handleTab(model, rawEvent, context) {
+    var blocks = (0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem', 'TableCell'], []);
     var block = blocks.length > 0 ? blocks[0].block : undefined;
     if (blocks.length > 1) {
         (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent');
         rawEvent.preventDefault();
         return true;
     }
+    else if ((0, roosterjs_content_model_dom_1.isBlockGroupOfType)(block, 'TableCell')) {
+        return (0, handleTabOnTableCell_1.handleTabOnTableCell)(model, block, rawEvent);
+    }
     else if ((block === null || block === void 0 ? void 0 : block.blockType) === 'Paragraph') {
-        return (0, handleTabOnParagraph_1.handleTabOnParagraph)(model, block, rawEvent);
+        return (0, handleTabOnParagraph_1.handleTabOnParagraph)(model, block, rawEvent, context);
     }
     else if ((0, roosterjs_content_model_dom_1.isBlockGroupOfType)(block, 'ListItem')) {
-        return (0, handleTabOnList_1.handleTabOnList)(model, block, rawEvent);
+        return (0, handleTabOnList_1.handleTabOnList)(model, block, rawEvent, context);
     }
     return false;
 }
@@ -26345,15 +27347,15 @@ var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-mo
  * 2. Otherwise call handleTabOnParagraph.
  * @internal
  */
-function handleTabOnList(model, listItem, rawEvent) {
+function handleTabOnList(model, listItem, rawEvent, context) {
     var selectedParagraph = findSelectedParagraph(listItem);
     if (!isMarkerAtStartOfBlock(listItem) &&
         selectedParagraph.length == 1 &&
         selectedParagraph[0].blockType === 'Paragraph') {
-        return (0, handleTabOnParagraph_1.handleTabOnParagraph)(model, selectedParagraph[0], rawEvent);
+        return (0, handleTabOnParagraph_1.handleTabOnParagraph)(model, selectedParagraph[0], rawEvent, context);
     }
     else {
-        (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent');
+        (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent', undefined /*length*/, context);
         rawEvent.preventDefault();
         return true;
     }
@@ -26401,7 +27403,7 @@ var space = ' ';
  * 4. When the selection is not collapsed, replace the selected range with a 4 space.
  * 5. When the selection is not collapsed, but all segments are selected, call setModelIndention function to outdent the whole paragraph
  */
-function handleTabOnParagraph(model, paragraph, rawEvent) {
+function handleTabOnParagraph(model, paragraph, rawEvent, context) {
     var selectedSegments = paragraph.segments.filter(function (segment) { return segment.isSelected; });
     var isCollapsed = selectedSegments.length === 1 && selectedSegments[0].segmentType === 'SelectionMarker';
     var isAllSelected = paragraph.segments.every(function (segment) { return segment.isSelected; });
@@ -26413,7 +27415,7 @@ function handleTabOnParagraph(model, paragraph, rawEvent) {
                 (isRtl && (!marginRight || marginRight == '0px')))) {
             return false;
         }
-        (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent');
+        (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent', undefined /*length*/, context);
     }
     else {
         if (!isCollapsed) {
@@ -26468,6 +27470,91 @@ function handleTabOnParagraph(model, paragraph, rawEvent) {
 exports.handleTabOnParagraph = handleTabOnParagraph;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts":
+/*!****************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTable.ts ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.handleTabOnTable = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+/**
+ * When the whole table is selected, indent or outdent the whole table with setModelIndentation.
+ * @internal
+ */
+function handleTabOnTable(model, rawEvent) {
+    var tableModel = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0];
+    if (tableModel && isWholeTableSelected(tableModel)) {
+        (0, roosterjs_content_model_api_1.setModelIndentation)(model, rawEvent.shiftKey ? 'outdent' : 'indent');
+        rawEvent.preventDefault();
+        return true;
+    }
+    return false;
+}
+exports.handleTabOnTable = handleTabOnTable;
+function isWholeTableSelected(tableModel) {
+    var _a, _b, _c, _d;
+    return (((_b = (_a = tableModel.rows[0]) === null || _a === void 0 ? void 0 : _a.cells[0]) === null || _b === void 0 ? void 0 : _b.isSelected) &&
+        ((_d = (_c = tableModel.rows[tableModel.rows.length - 1]) === null || _c === void 0 ? void 0 : _c.cells[tableModel.widths.length - 1]) === null || _d === void 0 ? void 0 : _d.isSelected));
+}
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/edit/tabUtils/handleTabOnTableCell.ts ***!
+  \********************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.handleTabOnTableCell = void 0;
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * When the cursor is on the last cell of a table, add new row and focus first new cell.
+ * @internal
+ */
+function handleTabOnTableCell(model, cell, rawEvent) {
+    var _a, _b, _c;
+    var tableModel = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0];
+    // Check if cursor is on last cell of the table
+    if (!rawEvent.shiftKey &&
+        tableModel &&
+        ((_a = tableModel.rows[tableModel.rows.length - 1]) === null || _a === void 0 ? void 0 : _a.cells[tableModel.widths.length - 1]) === cell) {
+        (0, roosterjs_content_model_api_1.insertTableRow)(tableModel, 'insertBelow');
+        // Clear Table selection
+        (0, roosterjs_content_model_api_1.clearSelectedCells)(tableModel, {
+            firstRow: tableModel.rows.length - 1,
+            firstColumn: 0,
+            lastRow: tableModel.rows.length - 1,
+            lastColumn: tableModel.widths.length - 1,
+        });
+        (0, roosterjs_content_model_dom_1.normalizeTable)(tableModel, model.format);
+        // Add selection marker to the first cell of the new row
+        var markerParagraph = (_c = (_b = tableModel.rows[tableModel.rows.length - 1]) === null || _b === void 0 ? void 0 : _b.cells[0]) === null || _c === void 0 ? void 0 : _c.blocks[0];
+        if (markerParagraph.blockType == 'Paragraph') {
+            var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(model.format);
+            markerParagraph.segments.unshift(marker);
+            (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(markerParagraph);
+            (0, roosterjs_content_model_dom_1.setSelection)(tableModel.rows[tableModel.rows.length - 1].cells[0], marker);
+        }
+        rawEvent.preventDefault();
+        return true;
+    }
+    return false;
+}
+exports.handleTabOnTableCell = handleTabOnTableCell;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/edit/utils/getLeafSiblingBlock.ts":
@@ -26554,6 +27641,157 @@ function getLeafSiblingBlock(path, block, isNext) {
 exports.getLeafSiblingBlock = getLeafSiblingBlock;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/hyperlink/HyperlinkPlugin.ts":
+/*!***********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/hyperlink/HyperlinkPlugin.ts ***!
+  \***********************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.HyperlinkPlugin = void 0;
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var defaultToolTipCallback = function (url) { return url; };
+/**
+ * Hyperlink plugin does the following jobs for a hyperlink in editor:
+ * 1. When hover on a link, show a tool tip
+ * 2. When Ctrl+Click on a link, open a new window with the link
+ * 3. When type directly on a link whose text matches its link url, update the link url with the link text
+ */
+var HyperlinkPlugin = /** @class */ (function () {
+    /**
+     * Create a new instance of HyperLink class
+     * @param tooltip Tooltip to show when mouse hover over a link
+     * Default value is to return the href itself. If null, there will be no tooltip text.
+     * @param target (Optional) Target window name for hyperlink. If null, will use "_blank"
+     * @param onLinkClick (Optional) Open link callback (return false to use default behavior)
+     */
+    function HyperlinkPlugin(tooltip, target, onLinkClick) {
+        var _this = this;
+        if (tooltip === void 0) { tooltip = defaultToolTipCallback; }
+        this.tooltip = tooltip;
+        this.target = target;
+        this.onLinkClick = onLinkClick;
+        this.editor = null;
+        this.domHelper = null;
+        this.isMac = false;
+        this.disposer = null;
+        this.currentNode = null;
+        this.currentLink = null;
+        this.onMouse = function (e) {
+            _this.runWithHyperlink(e.target, function (href, a) {
+                var _a;
+                var tooltip = e.type == 'mouseover'
+                    ? typeof _this.tooltip == 'function'
+                        ? _this.tooltip(href, a)
+                        : _this.tooltip
+                    : null;
+                (_a = _this.domHelper) === null || _a === void 0 ? void 0 : _a.setDomAttribute('title', tooltip);
+            });
+        };
+    }
+    /**
+     * Get a friendly name of this plugin
+     */
+    HyperlinkPlugin.prototype.getName = function () {
+        return 'Hyperlink';
+    };
+    /**
+     * Initialize this plugin
+     * @param editor The editor instance
+     */
+    HyperlinkPlugin.prototype.initialize = function (editor) {
+        this.editor = editor;
+        this.domHelper = editor.getDOMHelper();
+        this.isMac = !!editor.getEnvironment().isMac;
+        this.disposer = editor.attachDomEvent({
+            mouseover: { beforeDispatch: this.onMouse },
+            mouseout: { beforeDispatch: this.onMouse },
+        });
+    };
+    /**
+     * Dispose this plugin
+     */
+    HyperlinkPlugin.prototype.dispose = function () {
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+        this.currentNode = null;
+        this.currentLink = null;
+        this.editor = null;
+    };
+    /**
+     * Handle events triggered from editor
+     * @param event PluginEvent object
+     */
+    HyperlinkPlugin.prototype.onPluginEvent = function (event) {
+        var _this = this;
+        var _a, _b;
+        var matchedLink;
+        if (event.eventType == 'keyDown') {
+            var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+            var node_1 = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' ? selection.range.commonAncestorContainer : null;
+            if (node_1 && node_1 != this.currentNode) {
+                this.currentNode = node_1;
+                this.currentLink = null;
+                this.runWithHyperlink(node_1, function (href, a) {
+                    if (node_1.textContent &&
+                        (matchedLink = (0, roosterjs_content_model_api_1.matchLink)(node_1.textContent)) &&
+                        matchedLink.normalizedUrl == href) {
+                        _this.currentLink = a;
+                    }
+                });
+            }
+        }
+        else if (event.eventType == 'keyUp') {
+            var selection = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.getDOMSelection();
+            var node = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' ? selection.range.commonAncestorContainer : null;
+            if (node &&
+                node == this.currentNode &&
+                this.currentLink &&
+                this.currentLink.contains(node) &&
+                node.textContent &&
+                (matchedLink = (0, roosterjs_content_model_api_1.matchLink)(node.textContent))) {
+                this.currentLink.setAttribute('href', matchedLink.normalizedUrl);
+            }
+        }
+        else if (event.eventType == 'mouseUp' && event.isClicking) {
+            this.runWithHyperlink(event.rawEvent.target, function (href, anchor) {
+                var _a, _b;
+                if (!((_a = _this.onLinkClick) === null || _a === void 0 ? void 0 : _a.call(_this, anchor, event.rawEvent)) &&
+                    _this.isCtrlOrMetaPressed(event.rawEvent) &&
+                    event.rawEvent.button === 0) {
+                    event.rawEvent.preventDefault();
+                    var target = _this.target || '_blank';
+                    var window_1 = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getDocument().defaultView;
+                    try {
+                        window_1 === null || window_1 === void 0 ? void 0 : window_1.open(href, target);
+                    }
+                    catch (_c) { }
+                }
+            });
+        }
+    };
+    HyperlinkPlugin.prototype.runWithHyperlink = function (node, callback) {
+        var _a;
+        var a = (_a = this.domHelper) === null || _a === void 0 ? void 0 : _a.findClosestElementAncestor(node, 'a[href]');
+        var href = a === null || a === void 0 ? void 0 : a.getAttribute('href');
+        if (href && a) {
+            callback(href, a);
+        }
+    };
+    HyperlinkPlugin.prototype.isCtrlOrMetaPressed = function (event) {
+        return this.isMac ? event.metaKey : event.ctrlKey;
+    };
+    return HyperlinkPlugin;
+}());
+exports.HyperlinkPlugin = HyperlinkPlugin;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/index.ts":
@@ -26565,7 +27803,7 @@ exports.getLeafSiblingBlock = getLeafSiblingBlock;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
+exports.getDOMInsertPointRect = exports.CustomReplacePlugin = exports.PickerPlugin = exports.HyperlinkPlugin = exports.MarkdownPlugin = exports.WatermarkPlugin = exports.ContextMenuPluginBase = exports.ShortcutPlugin = exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedoAlt = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = exports.AutoFormatPlugin = exports.EditPlugin = exports.PastePlugin = exports.TableEditPlugin = void 0;
 var TableEditPlugin_1 = __webpack_require__(/*! ./tableEdit/TableEditPlugin */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/TableEditPlugin.ts");
 Object.defineProperty(exports, "TableEditPlugin", ({ enumerable: true, get: function () { return TableEditPlugin_1.TableEditPlugin; } }));
 var PastePlugin_1 = __webpack_require__(/*! ./paste/PastePlugin */ "./packages/roosterjs-content-model-plugins/lib/paste/PastePlugin.ts");
@@ -26582,6 +27820,7 @@ Object.defineProperty(exports, "ShortcutClearFormat", ({ enumerable: true, get:
 Object.defineProperty(exports, "ShortcutUndo", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutUndo; } }));
 Object.defineProperty(exports, "ShortcutUndo2", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutUndo2; } }));
 Object.defineProperty(exports, "ShortcutRedo", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutRedo; } }));
+Object.defineProperty(exports, "ShortcutRedoAlt", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutRedoAlt; } }));
 Object.defineProperty(exports, "ShortcutRedoMacOS", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutRedoMacOS; } }));
 Object.defineProperty(exports, "ShortcutBullet", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutBullet; } }));
 Object.defineProperty(exports, "ShortcutNumbering", ({ enumerable: true, get: function () { return shortcuts_1.ShortcutNumbering; } }));
@@ -26597,6 +27836,14 @@ var WatermarkPlugin_1 = __webpack_require__(/*! ./watermark/WatermarkPlugin */ "
 Object.defineProperty(exports, "WatermarkPlugin", ({ enumerable: true, get: function () { return WatermarkPlugin_1.WatermarkPlugin; } }));
 var MarkdownPlugin_1 = __webpack_require__(/*! ./markdown/MarkdownPlugin */ "./packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts");
 Object.defineProperty(exports, "MarkdownPlugin", ({ enumerable: true, get: function () { return MarkdownPlugin_1.MarkdownPlugin; } }));
+var HyperlinkPlugin_1 = __webpack_require__(/*! ./hyperlink/HyperlinkPlugin */ "./packages/roosterjs-content-model-plugins/lib/hyperlink/HyperlinkPlugin.ts");
+Object.defineProperty(exports, "HyperlinkPlugin", ({ enumerable: true, get: function () { return HyperlinkPlugin_1.HyperlinkPlugin; } }));
+var PickerPlugin_1 = __webpack_require__(/*! ./picker/PickerPlugin */ "./packages/roosterjs-content-model-plugins/lib/picker/PickerPlugin.ts");
+Object.defineProperty(exports, "PickerPlugin", ({ enumerable: true, get: function () { return PickerPlugin_1.PickerPlugin; } }));
+var CustomReplacePlugin_1 = __webpack_require__(/*! ./customReplace/CustomReplacePlugin */ "./packages/roosterjs-content-model-plugins/lib/customReplace/CustomReplacePlugin.ts");
+Object.defineProperty(exports, "CustomReplacePlugin", ({ enumerable: true, get: function () { return CustomReplacePlugin_1.CustomReplacePlugin; } }));
+var getDOMInsertPointRect_1 = __webpack_require__(/*! ./pluginUtils/Rect/getDOMInsertPointRect */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/Rect/getDOMInsertPointRect.ts");
+Object.defineProperty(exports, "getDOMInsertPointRect", ({ enumerable: true, get: function () { return getDOMInsertPointRect_1.getDOMInsertPointRect; } }));
 
 
 /***/ }),
@@ -26626,9 +27873,10 @@ var DefaultOptions = {
 var MarkdownPlugin = /** @class */ (function () {
     /**
      * @param options An optional parameter that takes in an object of type MarkdownOptions, which includes the following properties:
-     *  - strikethrough: If true text between ~ will receive strikethrough format. Defaults to true.
-     *  - bold: If true text between * will receive bold format. Defaults to true.
-     *  - italic: If true text between _ will receive italic format. Defaults to true.
+     *  - strikethrough: If true text between ~ will receive strikethrough format. Defaults to false.
+     *  - bold: If true text between * will receive bold format. Defaults to false.
+     *  - italic: If true text between _ will receive italic format. Defaults to false.
+     *  - codeFormat: If provided, text between ` will receive code format. Defaults to undefined.
      */
     function MarkdownPlugin(options) {
         if (options === void 0) { options = DefaultOptions; }
@@ -26637,6 +27885,7 @@ var MarkdownPlugin = /** @class */ (function () {
         this.shouldBold = false;
         this.shouldItalic = false;
         this.shouldStrikethrough = false;
+        this.shouldCode = false;
         this.lastKeyTyped = null;
     }
     /**
@@ -26660,10 +27909,8 @@ var MarkdownPlugin = /** @class */ (function () {
      * called, plugin should not call to any editor method since it will result in error.
      */
     MarkdownPlugin.prototype.dispose = function () {
-        this.editor = null;
-        this.shouldBold = false;
-        this.shouldItalic = false;
-        this.shouldStrikethrough = false;
+        this.editor = null;
+        this.disableAllFeatures();
         this.lastKeyTyped = null;
     };
     /**
@@ -26729,6 +27976,17 @@ var MarkdownPlugin = /** @class */ (function () {
                         }
                     }
                     break;
+                case '`':
+                    if (this.options.codeFormat) {
+                        if (this.shouldCode) {
+                            (0, setFormat_1.setFormat)(editor, '`', {} /* format */, this.options.codeFormat);
+                            this.shouldCode = false;
+                        }
+                        else {
+                            this.shouldCode = true;
+                        }
+                    }
+                    break;
             }
         }
     };
@@ -26737,9 +27995,7 @@ var MarkdownPlugin = /** @class */ (function () {
         if (!event.handledByEditFeature && !rawEvent.defaultPrevented) {
             switch (rawEvent.key) {
                 case 'Enter':
-                    this.shouldBold = false;
-                    this.shouldItalic = false;
-                    this.shouldStrikethrough = false;
+                    this.disableAllFeatures();
                     this.lastKeyTyped = null;
                     break;
                 case ' ':
@@ -26752,6 +28008,9 @@ var MarkdownPlugin = /** @class */ (function () {
                     else if (this.lastKeyTyped === '_' && this.shouldItalic) {
                         this.shouldItalic = false;
                     }
+                    else if (this.lastKeyTyped === '`' && this.shouldCode) {
+                        this.shouldCode = false;
+                    }
                     this.lastKeyTyped = null;
                     break;
                 default:
@@ -26771,16 +28030,23 @@ var MarkdownPlugin = /** @class */ (function () {
             else if (this.lastKeyTyped === '_' && this.shouldItalic) {
                 this.shouldItalic = false;
             }
+            else if (this.lastKeyTyped === '`' && this.shouldCode) {
+                this.shouldCode = false;
+            }
             this.lastKeyTyped = null;
         }
     };
     MarkdownPlugin.prototype.handleContentChangedEvent = function (event) {
         if (event.source == 'Format') {
-            this.shouldBold = false;
-            this.shouldItalic = false;
-            this.shouldStrikethrough = false;
+            this.disableAllFeatures();
         }
     };
+    MarkdownPlugin.prototype.disableAllFeatures = function () {
+        this.shouldBold = false;
+        this.shouldItalic = false;
+        this.shouldStrikethrough = false;
+        this.shouldCode = false;
+    };
     return MarkdownPlugin;
 }());
 exports.MarkdownPlugin = MarkdownPlugin;
@@ -26799,40 +28065,32 @@ exports.MarkdownPlugin = MarkdownPlugin;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setFormat = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
-function setFormat(editor, character, format) {
-    editor.formatContentModel(function (model, context) {
-        var _a;
-        var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false /*includeFormatHolder*/);
-        if (selectedSegmentsAndParagraphs.length > 0 && selectedSegmentsAndParagraphs[0][1]) {
-            var marker = selectedSegmentsAndParagraphs[0][0];
-            context.newPendingFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, marker.format), { strikethrough: !!marker.format.strikethrough, italic: !!marker.format.italic, fontWeight: ((_a = marker.format) === null || _a === void 0 ? void 0 : _a.fontWeight) ? 'bold' : undefined });
-            var paragraph = selectedSegmentsAndParagraphs[0][1];
-            if (marker.segmentType == 'SelectionMarker') {
-                var markerIndex = paragraph.segments.indexOf(marker);
-                if (markerIndex > 0 && paragraph.segments[markerIndex - 1]) {
-                    var segmentBeforeMarker = paragraph.segments[markerIndex - 1];
-                    if (segmentBeforeMarker.segmentType == 'Text' &&
-                        segmentBeforeMarker.text[segmentBeforeMarker.text.length - 1] == character) {
-                        var textBeforeMarker = segmentBeforeMarker.text.slice(0, -1);
-                        if (textBeforeMarker.indexOf(character) > -1) {
-                            var lastCharIndex = segmentBeforeMarker.text.length;
-                            var firstCharIndex = segmentBeforeMarker.text
-                                .substring(0, lastCharIndex - 1)
-                                .lastIndexOf(character);
-                            var formattedText = (0, splitTextSegment_1.splitTextSegment)(segmentBeforeMarker, paragraph, firstCharIndex, lastCharIndex);
-                            formattedText.text = formattedText.text
-                                .replace(character, '')
-                                .slice(0, -1);
-                            formattedText.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, formattedText.format), format);
-                            context.canUndoByBackspace = true;
-                            return true;
-                        }
+function setFormat(editor, character, format, codeFormat) {
+    (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, previousSegment, paragraph, markerFormat, context) {
+        if (previousSegment.text[previousSegment.text.length - 1] == character) {
+            var textBeforeMarker = previousSegment.text.slice(0, -1);
+            context.newPendingFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, markerFormat), { strikethrough: !!markerFormat.strikethrough, italic: !!markerFormat.italic, fontWeight: (markerFormat === null || markerFormat === void 0 ? void 0 : markerFormat.fontWeight) ? 'bold' : undefined });
+            if (textBeforeMarker.indexOf(character) > -1) {
+                var lastCharIndex = previousSegment.text.length;
+                var firstCharIndex = previousSegment.text
+                    .substring(0, lastCharIndex - 1)
+                    .lastIndexOf(character);
+                if (lastCharIndex - firstCharIndex > 2) {
+                    var formattedText = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, firstCharIndex, lastCharIndex);
+                    formattedText.text = formattedText.text.replace(character, '').slice(0, -1);
+                    formattedText.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, formattedText.format), format);
+                    if (codeFormat) {
+                        formattedText.code = {
+                            format: codeFormat,
+                        };
                     }
+                    context.canUndoByBackspace = true;
+                    return true;
                 }
             }
         }
@@ -28210,6 +29468,343 @@ function setProcessor(domToModelOption, entry, processorOverride) {
 exports.setProcessor = setProcessor;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/picker/PickerHelperImpl.ts":
+/*!*********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/picker/PickerHelperImpl.ts ***!
+  \*********************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.PickerHelperImpl = void 0;
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var getQueryString_1 = __webpack_require__(/*! ./getQueryString */ "./packages/roosterjs-content-model-plugins/lib/picker/getQueryString.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ */
+var PickerHelperImpl = /** @class */ (function () {
+    function PickerHelperImpl(editor, handler, triggerCharacter) {
+        this.editor = editor;
+        this.handler = handler;
+        this.triggerCharacter = triggerCharacter;
+        this.direction = null;
+    }
+    /**
+     * Replace the query string with a given Content Model.
+     * This is used for commit a change from picker and insert the committed content into editor.
+     * @param model The Content Model to insert
+     * @param options Options for formatting content model
+     * @param canUndoByBackspace Whether this change can be undone using Backspace key
+     */
+    PickerHelperImpl.prototype.replaceQueryString = function (model, options, canUndoByBackspace) {
+        var _this = this;
+        this.editor.focus();
+        (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(this.editor, function (target, previousSegment, paragraph, _, context) {
+            var potentialSegments = [];
+            var queryString = (0, getQueryString_1.getQueryString)(_this.triggerCharacter, paragraph, previousSegment, potentialSegments);
+            if (queryString) {
+                potentialSegments.forEach(function (x) { return (x.isSelected = true); });
+                (0, roosterjs_content_model_dom_1.mergeModel)(target, model, context);
+                context.canUndoByBackspace = canUndoByBackspace;
+                return true;
+            }
+            else {
+                return false;
+            }
+        }, options);
+    };
+    /**
+     * Notify Picker Plugin that picker is closed from the handler code, so picker plugin can quit the suggesting state
+     */
+    PickerHelperImpl.prototype.closePicker = function () {
+        var _a, _b;
+        if (this.direction) {
+            this.direction = null;
+            (_b = (_a = this.handler).onClosePicker) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    };
+    return PickerHelperImpl;
+}());
+exports.PickerHelperImpl = PickerHelperImpl;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/picker/PickerPlugin.ts":
+/*!*****************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/picker/PickerPlugin.ts ***!
+  \*****************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.PickerPlugin = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var getQueryString_1 = __webpack_require__(/*! ./getQueryString */ "./packages/roosterjs-content-model-plugins/lib/picker/getQueryString.ts");
+var PickerHelperImpl_1 = __webpack_require__(/*! ./PickerHelperImpl */ "./packages/roosterjs-content-model-plugins/lib/picker/PickerHelperImpl.ts");
+/**
+ * PickerPlugin represents a plugin of editor which can handle picker related behaviors, including
+ * - Show picker when special trigger key is pressed
+ * - Hide picker
+ * - Change selection in picker by Up/Down/Left/Right
+ * - Apply selected item in picker
+ *
+ * PickerPlugin doesn't provide any UI, it just wraps related DOM events and invoke callback functions.
+ */
+var PickerPlugin = /** @class */ (function () {
+    /**
+     * Construct a new instance of PickerPlugin class
+     * @param triggerCharacter The character to trigger a picker to be shown
+     * @param handler Picker handler for receiving picker state change events
+     */
+    function PickerPlugin(triggerCharacter, handler) {
+        this.triggerCharacter = triggerCharacter;
+        this.handler = handler;
+        this.isMac = false;
+        this.lastQueryString = '';
+        this.helper = null;
+    }
+    /**
+     * Get a friendly name
+     */
+    PickerPlugin.prototype.getName = function () {
+        return 'Picker';
+    };
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    PickerPlugin.prototype.initialize = function (editor) {
+        this.isMac = !!editor.getEnvironment().isMac;
+        this.helper = new PickerHelperImpl_1.PickerHelperImpl(editor, this.handler, this.triggerCharacter);
+        this.handler.onInitialize(this.helper);
+    };
+    /**
+     * Dispose this plugin
+     */
+    PickerPlugin.prototype.dispose = function () {
+        this.handler.onDispose();
+        this.helper = null;
+    };
+    /**
+     * Check if the plugin should handle the given event exclusively.
+     * Handle an event exclusively means other plugin will not receive this event in
+     * onPluginEvent method.
+     * If two plugins will return true in willHandleEventExclusively() for the same event,
+     * the final result depends on the order of the plugins are added into editor
+     * @param event The event to check
+     */
+    PickerPlugin.prototype.willHandleEventExclusively = function (event) {
+        var _a;
+        return (!!((_a = this.helper) === null || _a === void 0 ? void 0 : _a.direction) &&
+            event.eventType == 'keyDown' &&
+            ((0, roosterjs_content_model_dom_1.isCursorMovingKey)(event.rawEvent) ||
+                event.rawEvent.key == 'Enter' ||
+                event.rawEvent.key == 'Tab' ||
+                event.rawEvent.key == 'Escape'));
+    };
+    /**
+     * Handle events triggered from editor
+     * @param event PluginEvent object
+     */
+    PickerPlugin.prototype.onPluginEvent = function (event) {
+        if (!this.helper) {
+            return;
+        }
+        switch (event.eventType) {
+            case 'contentChanged':
+                if (this.helper.direction) {
+                    if (event.source == roosterjs_content_model_dom_1.ChangeSource.SetContent) {
+                        this.helper.closePicker();
+                    }
+                    else {
+                        this.onSuggestingInput(this.helper);
+                    }
+                }
+                break;
+            case 'keyDown':
+                if (this.helper.direction) {
+                    this.onSuggestingKeyDown(this.helper, event.rawEvent);
+                }
+                break;
+            case 'input':
+                if (this.helper.direction) {
+                    this.onSuggestingInput(this.helper);
+                }
+                else {
+                    this.onInput(this.helper, event.rawEvent);
+                }
+                break;
+            case 'mouseUp':
+                if (this.helper.direction) {
+                    this.helper.closePicker();
+                }
+                break;
+        }
+    };
+    PickerPlugin.prototype.onSuggestingKeyDown = function (helper, event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                if (helper.direction == 'horizontal' || helper.direction == 'both') {
+                    var isIncrement = event.key == 'ArrowRight';
+                    if (helper.editor.getDOMHelper().isRightToLeft()) {
+                        isIncrement = !isIncrement;
+                    }
+                    (_b = (_a = this.handler).onSelectionChanged) === null || _b === void 0 ? void 0 : _b.call(_a, isIncrement ? 'next' : 'previous');
+                }
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                {
+                    var isIncrement = event.key == 'ArrowDown';
+                    if (helper.direction != 'horizontal') {
+                        (_d = (_c = this.handler).onSelectionChanged) === null || _d === void 0 ? void 0 : _d.call(_c, helper.direction == 'both'
+                            ? isIncrement
+                                ? 'nextRow'
+                                : 'previousRow'
+                            : isIncrement
+                                ? 'next'
+                                : 'previous');
+                    }
+                }
+                event.preventDefault();
+                break;
+            case 'PageUp':
+            case 'PageDown':
+                (_f = (_e = this.handler).onSelectionChanged) === null || _f === void 0 ? void 0 : _f.call(_e, event.key == 'PageDown' ? 'nextPage' : 'previousPage');
+                event.preventDefault();
+                break;
+            case 'Home':
+            case 'End':
+                var hasCtrl = this.isMac ? event.metaKey : event.ctrlKey;
+                (_h = (_g = this.handler).onSelectionChanged) === null || _h === void 0 ? void 0 : _h.call(_g, event.key == 'Home'
+                    ? hasCtrl
+                        ? 'first'
+                        : 'firstInRow'
+                    : hasCtrl
+                        ? 'last'
+                        : 'lastInRow');
+                event.preventDefault();
+                break;
+            case 'Escape':
+                helper.closePicker();
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case 'Tab':
+                (_k = (_j = this.handler).onSelect) === null || _k === void 0 ? void 0 : _k.call(_j);
+                event.preventDefault();
+                break;
+        }
+    };
+    PickerPlugin.prototype.onSuggestingInput = function (helper) {
+        var _this = this;
+        if (!(0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(helper.editor, function (_, segment, paragraph) {
+            var _a, _b;
+            var newQueryString = (0, getQueryString_1.getQueryString)(_this.triggerCharacter, paragraph, segment).replace(/[\u0020\u00A0]/g, ' ');
+            var oldQueryString = _this.lastQueryString;
+            if (newQueryString &&
+                ((newQueryString.length >= oldQueryString.length &&
+                    newQueryString.indexOf(oldQueryString) == 0) ||
+                    (newQueryString.length < oldQueryString.length &&
+                        oldQueryString.indexOf(newQueryString) == 0))) {
+                _this.lastQueryString = newQueryString;
+                (_b = (_a = _this.handler).onQueryStringChanged) === null || _b === void 0 ? void 0 : _b.call(_a, newQueryString);
+            }
+            else {
+                helper.closePicker();
+            }
+            return false;
+        })) {
+            helper.closePicker();
+        }
+    };
+    PickerPlugin.prototype.onInput = function (helper, event) {
+        var _this = this;
+        if (event.inputType == 'insertText' && event.data == this.triggerCharacter) {
+            (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(helper.editor, function (_, segment) {
+                if (segment.text.endsWith(_this.triggerCharacter)) {
+                    var charBeforeTrigger = segment.text[segment.text.length - 2];
+                    if (!charBeforeTrigger ||
+                        !charBeforeTrigger.trim() ||
+                        (0, roosterjs_content_model_dom_1.isPunctuation)(charBeforeTrigger)) {
+                        var selection = helper.editor.getDOMSelection();
+                        var pos = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && selection.range.collapsed
+                            ? {
+                                node: selection.range.startContainer,
+                                offset: selection.range.startOffset,
+                            }
+                            : null;
+                        if (pos) {
+                            _this.lastQueryString = _this.triggerCharacter;
+                            helper.direction = _this.handler.onTrigger(_this.lastQueryString, pos);
+                        }
+                    }
+                }
+                return false;
+            });
+        }
+    };
+    return PickerPlugin;
+}());
+exports.PickerPlugin = PickerPlugin;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/picker/getQueryString.ts":
+/*!*******************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/picker/getQueryString.ts ***!
+  \*******************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getQueryString = void 0;
+var splitTextSegment_1 = __webpack_require__(/*! ../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
+/**
+ * @internal
+ */
+function getQueryString(triggerCharacter, paragraph, previousSegment, splittedSegmentResult) {
+    var result = '';
+    var i = paragraph.segments.indexOf(previousSegment);
+    for (; i >= 0; i--) {
+        var segment = paragraph.segments[i];
+        if (segment.segmentType != 'Text') {
+            result = '';
+            break;
+        }
+        var index = segment.text.lastIndexOf(triggerCharacter);
+        if (index >= 0) {
+            result = segment.text.substring(index) + result;
+            splittedSegmentResult === null || splittedSegmentResult === void 0 ? void 0 : splittedSegmentResult.unshift(index > 0
+                ? (0, splitTextSegment_1.splitTextSegment)(segment, paragraph, index, segment.text.length)
+                : segment);
+            break;
+        }
+        else {
+            result = segment.text + result;
+            splittedSegmentResult === null || splittedSegmentResult === void 0 ? void 0 : splittedSegmentResult.unshift(segment);
+        }
+    }
+    if (i < 0) {
+        result = '';
+    }
+    return result;
+}
+exports.getQueryString = getQueryString;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts":
@@ -28403,6 +29998,73 @@ var DragAndDropHelper = /** @class */ (function () {
 exports.DragAndDropHelper = DragAndDropHelper;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/Rect/getDOMInsertPointRect.ts":
+/*!************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/pluginUtils/Rect/getDOMInsertPointRect.ts ***!
+  \************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.getDOMInsertPointRect = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * Get bounding rect of the given DOM insert point
+ * @param doc The document object
+ * @param pos The input DOM insert point
+ */
+function getDOMInsertPointRect(doc, pos) {
+    var _a;
+    var node = pos.node, offset = pos.offset;
+    var range = doc.createRange();
+    range.setStart(node, offset);
+    // 1) try to get rect using range.getBoundingClientRect()
+    var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(range.getBoundingClientRect());
+    if (rect) {
+        return rect;
+    }
+    // 2) try to get rect using range.getClientRects
+    while (node.lastChild) {
+        if (offset == node.childNodes.length) {
+            node = node.lastChild;
+            offset = node.childNodes.length;
+        }
+        else {
+            node = node.childNodes[offset];
+            offset = 0;
+        }
+    }
+    var rects = range.getClientRects && range.getClientRects();
+    rect = rects && rects.length == 1 ? (0, roosterjs_content_model_dom_1.normalizeRect)(rects[0]) : null;
+    if (rect) {
+        return rect;
+    }
+    // 3) if node is text node, try inserting a SPAN and get the rect of SPAN for others
+    if ((0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'TEXT_NODE')) {
+        var span = node.ownerDocument.createElement('span');
+        span.textContent = '\u200b';
+        range.insertNode(span);
+        rect = (0, roosterjs_content_model_dom_1.normalizeRect)(span.getBoundingClientRect());
+        (_a = span.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(span);
+        if (rect) {
+            return rect;
+        }
+    }
+    // 4) try getBoundingClientRect on element
+    if ((0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') && node.getBoundingClientRect) {
+        rect = (0, roosterjs_content_model_dom_1.normalizeRect)(node.getBoundingClientRect());
+        if (rect) {
+            return rect;
+        }
+    }
+    return null;
+}
+exports.getDOMInsertPointRect = getDOMInsertPointRect;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/Rect/getIntersectedRect.ts":
@@ -28517,6 +30179,7 @@ var defaultShortcuts = [
     shortcuts_1.ShortcutUndo,
     shortcuts_1.ShortcutUndo2,
     shortcuts_1.ShortcutRedo,
+    shortcuts_1.ShortcutRedoAlt,
     shortcuts_1.ShortcutRedoMacOS,
     shortcuts_1.ShortcutBullet,
     shortcuts_1.ShortcutNumbering,
@@ -28636,7 +30299,7 @@ exports.ShortcutPlugin = ShortcutPlugin;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoMacOS = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = void 0;
+exports.ShortcutOutdentList = exports.ShortcutIndentList = exports.ShortcutDecreaseFont = exports.ShortcutIncreaseFont = exports.ShortcutNumbering = exports.ShortcutBullet = exports.ShortcutRedoAlt = exports.ShortcutRedoMacOS = exports.ShortcutRedo = exports.ShortcutUndo2 = exports.ShortcutUndo = exports.ShortcutClearFormat = exports.ShortcutUnderline = exports.ShortcutItalic = exports.ShortcutBold = void 0;
 var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "./packages/roosterjs-content-model-core/lib/index.ts");
 var setShortcutIndentationCommand_1 = __webpack_require__(/*! ./utils/setShortcutIndentationCommand */ "./packages/roosterjs-content-model-plugins/lib/shortcut/utils/setShortcutIndentationCommand.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
@@ -28697,7 +30360,7 @@ exports.ShortcutUnderline = {
 /**
  * Shortcut command for Clear Format
  * Windows: Ctrl + Space
- * MacOS: Meta + Space
+ * MacOS: N/A
  */
 exports.ShortcutClearFormat = {
     shortcutKey: {
@@ -28706,6 +30369,7 @@ exports.ShortcutClearFormat = {
         which: 32 /* SPACE */,
     },
     onClick: function (editor) { return (0, roosterjs_content_model_api_1.clearFormat)(editor); },
+    environment: 'nonMac',
 };
 /**
  * Shortcut command for Undo 1
@@ -28749,6 +30413,7 @@ exports.ShortcutRedo = {
     environment: 'nonMac',
 };
 /**
+ * @deprecated
  * Shortcut command for Redo 2
  * Windows: N/A
  * MacOS: Meta + Shift + Z
@@ -28762,6 +30427,19 @@ exports.ShortcutRedoMacOS = {
     onClick: function (editor) { return (0, roosterjs_content_model_core_1.redo)(editor); },
     environment: 'mac',
 };
+/**
+ * Shortcut command for Redo 3
+ * Windows: Ctrl + Shift + Z
+ * MacOS: Meta + Shift + Z
+ */
+exports.ShortcutRedoAlt = {
+    shortcutKey: {
+        modifierKey: 'ctrl',
+        shiftKey: true,
+        which: 90 /* Z */,
+    },
+    onClick: function (editor) { return (0, roosterjs_content_model_core_1.redo)(editor); },
+};
 /**
  * Shortcut command for Bullet List
  * Windows: Ctrl + . (Period)
@@ -28817,7 +30495,7 @@ exports.ShortcutDecreaseFont = {
 /**
  * Shortcut command for Intent list
  * Windows: Alt + Shift + Arrow Right
- * MacOS: Option + Shift+ Arrow Right
+ * MacOS: N/A
  */
 exports.ShortcutIndentList = {
     shortcutKey: {
@@ -28828,11 +30506,12 @@ exports.ShortcutIndentList = {
     onClick: function (editor) {
         (0, setShortcutIndentationCommand_1.setShortcutIndentationCommand)(editor, 'indent');
     },
+    environment: 'nonMac',
 };
 /**
  * Shortcut command for Outdent list
  * Windows: Alt + Shift + Arrow Left
- * MacOS: Option + Shift+ Arrow Left
+ * MacOS: N/A
  */
 exports.ShortcutOutdentList = {
     shortcutKey: {
@@ -28843,6 +30522,7 @@ exports.ShortcutOutdentList = {
     onClick: function (editor) {
         (0, setShortcutIndentationCommand_1.setShortcutIndentationCommand)(editor, 'outdent');
     },
+    environment: 'nonMac',
 };
 
 
@@ -28864,12 +30544,12 @@ var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-mo
  * @internal
  */
 function setShortcutIndentationCommand(editor, operation) {
-    editor.formatContentModel(function (model) {
+    editor.formatContentModel(function (model, context) {
         var listItem = (0, roosterjs_content_model_dom_1.getFirstSelectedListItem)(model);
         if (listItem &&
             listItem.blocks[0].blockType == 'Paragraph' &&
             listItem.blocks[0].segments[0].segmentType == 'SelectionMarker') {
-            (0, roosterjs_content_model_api_1.setModelIndentation)(model, operation);
+            (0, roosterjs_content_model_api_1.setModelIndentation)(model, operation, undefined /*length*/, context);
             return true;
         }
         return false;
@@ -28902,10 +30582,12 @@ var TableEditPlugin = /** @class */ (function () {
      * @param anchorContainerSelector An optional selector string to specify the container to host the plugin.
      * The container must not be affected by transform: scale(), otherwise the position calculation will be wrong.
      * If not specified, the plugin will be inserted in document.body
+     * @param onTableEditorCreated An optional callback to customize the Table Editors elements when created.
      */
-    function TableEditPlugin(anchorContainerSelector) {
+    function TableEditPlugin(anchorContainerSelector, onTableEditorCreated) {
         var _this = this;
         this.anchorContainerSelector = anchorContainerSelector;
+        this.onTableEditorCreated = onTableEditorCreated;
         this.editor = null;
         this.onMouseMoveDisposer = null;
         this.tableRectMap = null;
@@ -28983,6 +30665,7 @@ var TableEditPlugin = /** @class */ (function () {
         this.disposeTableEditor();
         this.editor = null;
         this.onMouseMoveDisposer = null;
+        this.onTableEditorCreated = undefined;
     };
     /**
      * Handle events triggered from editor
@@ -29013,7 +30696,7 @@ var TableEditPlugin = /** @class */ (function () {
             var container = this.anchorContainerSelector
                 ? this.editor.getDocument().querySelector(this.anchorContainerSelector)
                 : undefined;
-            this.tableEditor = new TableEditor_1.TableEditor(this.editor, table, this.invalidateTableRects, (0, roosterjs_content_model_dom_1.isNodeOfType)(container, 'ELEMENT_NODE') ? container : undefined, event === null || event === void 0 ? void 0 : event.currentTarget);
+            this.tableEditor = new TableEditor_1.TableEditor(this.editor, table, this.invalidateTableRects, (0, roosterjs_content_model_dom_1.isNodeOfType)(container, 'ELEMENT_NODE') ? container : undefined, event === null || event === void 0 ? void 0 : event.currentTarget, this.onTableEditorCreated);
         }
     };
     TableEditPlugin.prototype.disposeTableEditor = function () {
@@ -29098,7 +30781,7 @@ var TOP_OR_SIDE;
  * When set a different current table or change current TD, we need to update these areas
  */
 var TableEditor = /** @class */ (function () {
-    function TableEditor(editor, table, onChanged, anchorContainer, contentDiv) {
+    function TableEditor(editor, table, onChanged, anchorContainer, contentDiv, onTableEditorCreated) {
         var _this = this;
         var _a;
         this.editor = editor;
@@ -29106,6 +30789,7 @@ var TableEditor = /** @class */ (function () {
         this.onChanged = onChanged;
         this.anchorContainer = anchorContainer;
         this.contentDiv = contentDiv;
+        this.onTableEditorCreated = onTableEditorCreated;
         // 1, 2 - Insert a column or a row
         this.horizontalInserter = null;
         this.verticalInserter = null;
@@ -29117,6 +30801,20 @@ var TableEditor = /** @class */ (function () {
         // 6 - Move as well as select whole table
         this.tableMover = null;
         this.range = null;
+        this.onEditorCreated = function (editorType, element) {
+            var _a;
+            var disposer = (_a = _this.onTableEditorCreated) === null || _a === void 0 ? void 0 : _a.call(_this, editorType, element);
+            var onMouseOut = element && _this.getOnMouseOut(element);
+            if (onMouseOut) {
+                element.addEventListener('mouseout', onMouseOut);
+            }
+            return function () {
+                disposer === null || disposer === void 0 ? void 0 : disposer();
+                if (onMouseOut) {
+                    element.removeEventListener('mouseout', onMouseOut);
+                }
+            };
+        };
         this.onFinishEditing = function () {
             _this.editor.focus();
             if (_this.range) {
@@ -29145,14 +30843,16 @@ var TableEditor = /** @class */ (function () {
          * @param table the table to select
          */
         this.onSelect = function (table) {
+            var _a, _b;
             _this.editor.focus();
             if (table) {
+                var parsedTable = (0, roosterjs_content_model_dom_1.parseTableCells)(table);
                 var selection = {
                     table: table,
                     firstRow: 0,
                     firstColumn: 0,
-                    lastRow: table.rows.length - 1,
-                    lastColumn: table.rows[table.rows.length - 1].cells.length - 1,
+                    lastRow: parsedTable.length - 1,
+                    lastColumn: ((_b = (_a = parsedTable[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1,
                     type: 'table',
                 };
                 _this.editor.setDOMSelection(selection);
@@ -29198,7 +30898,6 @@ var TableEditor = /** @class */ (function () {
         var _a;
         // Get whole table rect
         var tableRect = (0, roosterjs_content_model_dom_1.normalizeRect)(this.table.getBoundingClientRect());
-        //console.log('>>>tableRect', tableRect);
         if (!tableRect) {
             return;
         }
@@ -29269,10 +30968,10 @@ var TableEditor = /** @class */ (function () {
     };
     TableEditor.prototype.setEditorFeatures = function () {
         if (!this.tableMover) {
-            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, this.onSelect, this.getOnMouseOut, this.contentDiv, this.anchorContainer);
+            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, this.onSelect, this.contentDiv, this.anchorContainer, this.onEditorCreated);
         }
         if (!this.tableResizer) {
-            this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer);
+            this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer, this.onTableEditorCreated);
         }
     };
     TableEditor.prototype.setResizingTd = function (td) {
@@ -29294,7 +30993,7 @@ var TableEditor = /** @class */ (function () {
             this.disposeTableInserter();
         }
         if (!this.horizontalInserter && !this.verticalInserter && td) {
-            var newInserter = (0, TableInserter_1.createTableInserter)(this.editor, td, this.table, this.isRTL, !!isHorizontal, this.onInserted, this.getOnMouseOut, this.anchorContainer);
+            var newInserter = (0, TableInserter_1.createTableInserter)(this.editor, td, this.table, this.isRTL, !!isHorizontal, this.onInserted, this.anchorContainer, this.onEditorCreated);
             if (isHorizontal) {
                 this.horizontalInserter = newInserter;
             }
@@ -29544,10 +31243,10 @@ exports.disposeTableEditFeature = void 0;
 function disposeTableEditFeature(resizer) {
     var _a, _b, _c;
     if (resizer) {
-        (_b = (_a = resizer.div) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(resizer.div);
-        resizer.div = null;
-        (_c = resizer.featureHandler) === null || _c === void 0 ? void 0 : _c.dispose();
+        (_a = resizer.featureHandler) === null || _a === void 0 ? void 0 : _a.dispose();
         resizer.featureHandler = null;
+        (_c = (_b = resizer.div) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(resizer.div);
+        resizer.div = null;
     }
 }
 exports.disposeTableEditFeature = disposeTableEditFeature;
@@ -29576,7 +31275,7 @@ var INSERTER_BORDER_SIZE = 1;
 /**
  * @internal
  */
-function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, getOnMouseOut, anchorContainer) {
+function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, anchorContainer, onTableEditorCreated) {
     var tdRect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     var viewPort = editor.getVisibleViewport();
     var tableRect = table && viewPort ? (0, getIntersectedRect_1.getIntersectedRect)([table], [viewPort]) : null;
@@ -29602,14 +31301,14 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, g
             div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
         }
         (anchorContainer || document_1.body).appendChild(div);
-        var handler = new TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut);
+        var handler = new TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, onTableEditorCreated);
         return { div: div, featureHandler: handler, node: td };
     }
     return null;
 }
 exports.createTableInserter = createTableInserter;
 var TableInsertHandler = /** @class */ (function () {
-    function TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, getOnMouseOut) {
+    function TableInsertHandler(div, td, table, isHorizontal, editor, onInsert, onTableEditorCreated) {
         var _this = this;
         this.div = div;
         this.td = td;
@@ -29644,15 +31343,13 @@ var TableInsertHandler = /** @class */ (function () {
             _this.onInsert();
         };
         this.div.addEventListener('click', this.insertTd);
-        this.onMouseOutEvent = getOnMouseOut(div);
-        this.div.addEventListener('mouseout', this.onMouseOutEvent);
+        this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated(isHorizontal ? 'HorizontalTableInserter' : 'VerticalTableInserter', div);
     }
     TableInsertHandler.prototype.dispose = function () {
+        var _a;
         this.div.removeEventListener('click', this.insertTd);
-        if (this.onMouseOutEvent) {
-            this.div.removeEventListener('mouseout', this.onMouseOutEvent);
-        }
-        this.onMouseOutEvent = null;
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposer = undefined;
     };
     return TableInsertHandler;
 }());
@@ -29699,7 +31396,7 @@ var TABLE_MOVER_ID = '_Table_Mover';
  * Contains the function to select whole table
  * Moving behavior not implemented yet
  */
-function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut, contentDiv, anchorContainer) {
+function createTableMover(table, editor, isRTL, onFinishDragging, contentDiv, anchorContainer, onTableEditorCreated) {
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
     if (!isTableTopVisible(editor, rect, contentDiv)) {
         return null;
@@ -29730,25 +31427,22 @@ function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut,
     };
     var featureHandler = new TableMoverFeature(div, context, setDivPosition, {
         onDragEnd: onDragEnd,
-    }, context.zoomScale, getOnMouseOut);
+    }, context.zoomScale, onTableEditorCreated);
     return { div: div, featureHandler: featureHandler, node: table };
 }
 exports.createTableMover = createTableMover;
 var TableMoverFeature = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(TableMoverFeature, _super);
-    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile, container) {
-        var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
-        _this.div = div;
-        _this.onMouseOut = getOnMouseOut(div);
-        div.addEventListener('mouseout', _this.onMouseOut);
+    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, onTableEditorCreated) {
+        var _this = _super.call(this, div, context, onSubmit, handler, zoomScale) || this;
+        _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated('TableMover', div);
         return _this;
     }
     TableMoverFeature.prototype.dispose = function () {
+        var _a;
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposer = undefined;
         _super.prototype.dispose.call(this);
-        if (this.onMouseOut) {
-            this.div.removeEventListener('mouseout', this.onMouseOut);
-        }
-        this.onMouseOut = null;
     };
     return TableMoverFeature;
 }(DragAndDropHelper_1.DragAndDropHelper));
@@ -29781,6 +31475,7 @@ function isTableTopVisible(editor, rect, contentDiv) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createTableResizer = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
@@ -29789,7 +31484,7 @@ var TABLE_RESIZER_ID = '_Table_Resizer';
 /**
  * @internal
  */
-function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer) {
+function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer, onTableEditorCreated) {
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
     if (!isTableBottomVisible(editor, rect, contentDiv)) {
         return null;
@@ -29816,15 +31511,30 @@ function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, an
         contentDiv: contentDiv,
     };
     setDivPosition(context, div);
-    var featureHandler = new DragAndDropHelper_1.DragAndDropHelper(div, context, hideResizer, // Resizer is hidden while dragging only
+    var featureHandler = new TableResizer(div, context, hideResizer, // Resizer is hidden while dragging only
     {
         onDragStart: onDragStart,
         onDragging: onDragging,
         onDragEnd: onDragEnd,
-    }, zoomScale, editor.getEnvironment().isMobileOrTablet);
+    }, zoomScale, editor.getEnvironment().isMobileOrTablet, onTableEditorCreated);
     return { node: table, div: div, featureHandler: featureHandler };
 }
 exports.createTableResizer = createTableResizer;
+var TableResizer = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(TableResizer, _super);
+    function TableResizer(trigger, context, onSubmit, handler, zoomScale, forceMobile, onTableEditorCreated) {
+        var _this = _super.call(this, trigger, context, onSubmit, handler, zoomScale, forceMobile) || this;
+        _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated('TableResizer', trigger);
+        return _this;
+    }
+    TableResizer.prototype.dispose = function () {
+        var _a;
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposer = undefined;
+        _super.prototype.dispose.call(this);
+    };
+    return TableResizer;
+}(DragAndDropHelper_1.DragAndDropHelper));
 function onDragStart(context, event) {
     context.onStart();
     var editor = context.editor, table = context.table;