roosterjs 9.1.0 → 9.2.0

package/dist/rooster.js

@@ -2095,7 +2095,7 @@ exports["default"] = getDarkColor;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 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.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = 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");
@@ -2208,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; } }));
 
 
 /***/ }),
@@ -2374,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;
 /**
@@ -2383,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';
@@ -2430,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) {
@@ -3130,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;
@@ -3200,7 +3207,9 @@ function filterListItems(items, currentItem) {
                     break;
                 }
             }
-            else if (!isOrderedList || startNumberOverride) {
+            else if (!isOrderedList ||
+                startNumberOverride ||
+                item.levels.length < currentItem.levels.length) {
                 break;
             }
         }
@@ -3218,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;
             }
         }
@@ -3238,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":
@@ -4992,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',
@@ -6304,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':
@@ -6359,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,
+            });
+        }
+    }
+}
 
 
 /***/ }),
@@ -6740,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;
             }
@@ -6842,8 +6952,10 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  * 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) {
+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]) {
@@ -6853,12 +6965,14 @@ function formatTextSegmentBeforeSelectionMarker(editor, callback) {
             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;
 
@@ -8127,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":
@@ -8186,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");
@@ -8220,6 +8398,7 @@ exports.coreApiMap = {
     switchShadowEdit: switchShadowEdit_1.switchShadowEdit,
     getVisibleViewport: getVisibleViewport_1.getVisibleViewport,
     setEditorStyle: setEditorStyle_1.setEditorStyle,
+    announce: announce_1.announce,
 };
 
 
@@ -8303,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;
-    }
-}
 
 
 /***/ }),
@@ -8461,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) {
@@ -8693,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
  */
@@ -8745,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;
         }
@@ -9812,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));
                 }
@@ -9824,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;
                     }
@@ -10287,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)
@@ -10955,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":
@@ -10968,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';
@@ -10976,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
  */
@@ -11119,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
@@ -11668,6 +11986,7 @@ var LifecyclePlugin = /** @class */ (function () {
             isDarkMode: !!options.inDarkMode,
             shadowEditFragment: null,
             styleElements: {},
+            announcerStringGetter: options.announcerStringGetter,
         };
     }
     /**
@@ -11695,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;
@@ -11703,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;
@@ -12086,14 +12410,14 @@ var SelectionPlugin = /** @class */ (function () {
         return rawEvent.shiftKey ? 'TabLeft' : 'TabRight';
     };
     SelectionPlugin.prototype.handleSelectionInTable = function (key) {
-        var _a, _b, _c, _d;
+        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 _e = selection.range, collapsed = _e.collapsed, startContainer = _e.startContainer, endContainer = _e.endContainer, commonAncestorContainer = _e.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);
@@ -12101,7 +12425,7 @@ var SelectionPlugin = /** @class */ (function () {
                 return;
             }
             var lastCo = (0, findCoordinate_1.findCoordinate)(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
-            var _f = this.state.tableSelection, parsedTable = _f.parsedTable, oldCo = _f.firstCo, table = _f.table;
+            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;
@@ -12139,6 +12463,8 @@ var SelectionPlugin = /** @class */ (function () {
                         var cell = parsedTable[row][col];
                         if (typeof cell != 'string') {
                             this.setRangeSelectionInTable(cell, 0, this.editor);
+                            lastCo.row = row;
+                            lastCo.col = col;
                             break;
                         }
                     }
@@ -12146,6 +12472,13 @@ var SelectionPlugin = /** @class */ (function () {
                 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;
@@ -13098,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
@@ -13178,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;
 }());
 /**
@@ -13468,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
  */
@@ -13567,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;
@@ -13592,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;
@@ -14161,7 +14451,11 @@ exports.ChangeSource = {
      * Data of this event will be the key code number
      */
     Keyboard: 'Keyboard',
-};
+    /**
+     * Content changed by auto format
+     */
+    AutoFormat: 'AutoFormat',
+};
 
 
 /***/ }),
@@ -14651,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;
@@ -16249,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
  */
@@ -16275,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
@@ -16339,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
@@ -19241,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");
@@ -19292,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");
@@ -19356,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");
@@ -22372,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":
@@ -22768,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]);
                 }
             });
         }
@@ -22814,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
     });
@@ -22900,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,
@@ -23443,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;
 }
@@ -24861,11 +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
@@ -24876,6 +25382,8 @@ var DefaultOptions = {
     autoUnlink: false,
     autoLink: false,
     autoHyphen: false,
+    autoFraction: false,
+    autoOrdinals: false,
 };
 /**
  * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -24889,6 +25397,8 @@ var AutoFormatPlugin = /** @class */ (function () {
      *  - 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; }
@@ -24949,20 +25459,40 @@ var AutoFormatPlugin = /** @class */ (function () {
             selection.range.collapsed) {
             switch (rawEvent.data) {
                 case ' ':
+                    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;
+                        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);
                         }
-                        return ((0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering) ||
+                        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);
-                    });
+                            shouldLink ||
+                            shouldFraction ||
+                            shouldOrdinals);
+                    }, formatOptions_1);
                     break;
             }
         }
@@ -24988,6 +25518,16 @@ 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
+            : '';
+};
 
 
 /***/ }),
@@ -25066,6 +25606,8 @@ function createLink(editor) {
             return true;
         }
         return false;
+    }, {
+        changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoLink,
     });
 }
 exports.createLink = createLink;
@@ -25480,15 +26022,13 @@ var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-mo
 function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, shouldSearchForNumbering) {
     if (shouldSearchForBullet === void 0) { shouldSearchForBullet = true; }
     if (shouldSearchForNumbering === void 0) { shouldSearchForNumbering = true; }
-    if (shouldSearchForBullet || shouldSearchForNumbering) {
-        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;
-        }
+    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;
 }
@@ -25509,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":
@@ -25603,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":
@@ -25687,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;
@@ -25708,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 ||
@@ -25735,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;
@@ -26266,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
@@ -26312,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();
@@ -26338,6 +27078,7 @@ 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) {
@@ -26543,8 +27284,8 @@ function keyboardTab(editor, rawEvent) {
     var selection = editor.getDOMSelection();
     switch (selection === null || selection === void 0 ? void 0 : selection.type) {
         case 'range':
-            editor.formatContentModel(function (model) {
-                return handleTab(model, rawEvent);
+            editor.formatContentModel(function (model, context) {
+                return handleTab(model, rawEvent, context);
             }, {
                 apiName: 'handleTabKey',
             });
@@ -26566,7 +27307,7 @@ exports.keyboardTab = keyboardTab;
  * - 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) {
+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) {
@@ -26578,10 +27319,10 @@ function handleTab(model, rawEvent) {
         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;
 }
@@ -26606,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;
     }
@@ -26662,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; });
@@ -26674,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) {
@@ -27062,7 +27803,7 @@ exports.HyperlinkPlugin = HyperlinkPlugin;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-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.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");
@@ -27079,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; } }));
@@ -27096,6 +27838,12 @@ var MarkdownPlugin_1 = __webpack_require__(/*! ./markdown/MarkdownPlugin */ "./p
 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; } }));
 
 
 /***/ }),
@@ -27332,16 +28080,18 @@ function setFormat(editor, character, format, codeFormat) {
                 var firstCharIndex = previousSegment.text
                     .substring(0, lastCharIndex - 1)
                     .lastIndexOf(character);
-                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,
-                    };
+                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;
                 }
-                context.canUndoByBackspace = true;
-                return true;
             }
         }
         return false;
@@ -28718,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":
@@ -28911,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":
@@ -29025,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,
@@ -29144,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");
@@ -29258,6 +30413,7 @@ exports.ShortcutRedo = {
     environment: 'nonMac',
 };
 /**
+ * @deprecated
  * Shortcut command for Redo 2
  * Windows: N/A
  * MacOS: Meta + Shift + Z
@@ -29271,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)
@@ -29375,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;
@@ -29413,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;
@@ -29494,6 +30665,7 @@ var TableEditPlugin = /** @class */ (function () {
         this.disposeTableEditor();
         this.editor = null;
         this.onMouseMoveDisposer = null;
+        this.onTableEditorCreated = undefined;
     };
     /**
      * Handle events triggered from editor
@@ -29524,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 () {
@@ -29609,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;
@@ -29617,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;
@@ -29628,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) {
@@ -29656,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);
@@ -29709,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;
         }
@@ -29780,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) {
@@ -29805,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;
             }
@@ -30055,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;
@@ -30087,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;
@@ -30113,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;
@@ -30155,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;
 }());
@@ -30210,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;
@@ -30241,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));
@@ -30292,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");
@@ -30300,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;
@@ -30327,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;