roosterjs 9.1.0 → 9.3.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 = exports.formatInsertPointWithContentModel = 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");
@@ -2196,6 +2196,8 @@ var formatSegmentWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/
 Object.defineProperty(exports, "formatSegmentWithContentModel", ({ enumerable: true, get: function () { return formatSegmentWithContentModel_1.formatSegmentWithContentModel; } }));
 var formatTextSegmentBeforeSelectionMarker_1 = __webpack_require__(/*! ./publicApi/utils/formatTextSegmentBeforeSelectionMarker */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatTextSegmentBeforeSelectionMarker.ts");
 Object.defineProperty(exports, "formatTextSegmentBeforeSelectionMarker", ({ enumerable: true, get: function () { return formatTextSegmentBeforeSelectionMarker_1.formatTextSegmentBeforeSelectionMarker; } }));
+var formatInsertPointWithContentModel_1 = __webpack_require__(/*! ./publicApi/utils/formatInsertPointWithContentModel */ "./packages/roosterjs-content-model-api/lib/publicApi/utils/formatInsertPointWithContentModel.ts");
+Object.defineProperty(exports, "formatInsertPointWithContentModel", ({ enumerable: true, get: function () { return formatInsertPointWithContentModel_1.formatInsertPointWithContentModel; } }));
 var setListType_1 = __webpack_require__(/*! ./modelApi/list/setListType */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setListType.ts");
 Object.defineProperty(exports, "setListType", ({ enumerable: true, get: function () { return setListType_1.setListType; } }));
 var setModelListStyle_1 = __webpack_require__(/*! ./modelApi/list/setModelListStyle */ "./packages/roosterjs-content-model-api/lib/modelApi/list/setModelListStyle.ts");
@@ -2208,6 +2210,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 +2378,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 +2389,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 +2436,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 +3139,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 +3209,9 @@ function filterListItems(items, currentItem) {
                     break;
                 }
             }
-            else if (!isOrderedList || startNumberOverride) {
+            else if (!isOrderedList ||
+                startNumberOverride ||
+                item.levels.length < currentItem.levels.length) {
                 break;
             }
         }
@@ -3218,7 +3229,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 +3251,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 +5084,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 +6398,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 +6454,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,
+            });
+        }
+    }
+}
 
 
 /***/ }),
@@ -6555,7 +6666,11 @@ exports.formatInsertPointWithContentModel = 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
+ * Format content model at a given insert point with a callback function
+ * @param editor The editor object
+ * @param insertPoint The insert point to format
+ * @param callback The callback function to format the content model
+ * @param options Options to control the behavior of the formatting
  */
 function formatInsertPointWithContentModel(editor, insertPoint, callback, options) {
     var bundle = {
@@ -6740,7 +6855,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 +6958,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 +6971,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;
 
@@ -7417,16 +7537,7 @@ function isCssVariable(value) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.exportContent = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-/**
- * Export string content of editor
- * @param editor The editor to get content from
- * @param mode Mode of content to export. It supports:
- * - HTML: Export HTML content. If there are entities, this will cause EntityOperation event with option = 'replaceTemporaryContent' to get a dehydrated entity
- * - PlainText: Export plain text content
- * - PlainTextFast: Export plain text using editor's textContent property directly
- * @param options @optional Options for Model to DOM conversion
- */
-function exportContent(editor, mode, options) {
+function exportContent(editor, mode, optionsOrCallbacks) {
     if (mode === void 0) { mode = 'HTML'; }
     if (mode == 'PlainTextFast') {
         return editor.getDOMHelper().getTextContent();
@@ -7434,12 +7545,12 @@ function exportContent(editor, mode, options) {
     else {
         var model = editor.getContentModelCopy('clean');
         if (mode == 'PlainText') {
-            return (0, roosterjs_content_model_dom_1.contentModelToText)(model);
+            return (0, roosterjs_content_model_dom_1.contentModelToText)(model, undefined /*separator*/, optionsOrCallbacks);
         }
         else {
             var doc = editor.getDocument();
             var div = doc.createElement('div');
-            (0, roosterjs_content_model_dom_1.contentModelToDom)(doc, div, model, (0, roosterjs_content_model_dom_1.createModelToDomContext)(undefined /*editorContext*/, options));
+            (0, roosterjs_content_model_dom_1.contentModelToDom)(doc, div, model, (0, roosterjs_content_model_dom_1.createModelToDomContext)(undefined /*editorContext*/, optionsOrCallbacks));
             editor.triggerEvent('extractContentWithDom', { clonedRoot: div }, true /*broadcast*/);
             return div.innerHTML;
         }
@@ -7645,6 +7756,7 @@ function mergePasteContent(editor, eventResult, clipboardData) {
     }, {
         changeSource: roosterjs_content_model_dom_1.ChangeSource.Paste,
         getChangeData: function () { return clipboardData; },
+        scrollCaretIntoView: true,
         apiName: 'paste',
     });
 }
@@ -7692,7 +7804,10 @@ function paste(editor, clipboardData, pasteType) {
     editor.focus();
     var trustedHTMLHandler = editor.getTrustedHTMLHandler();
     if (!clipboardData.modelBeforePaste) {
-        clipboardData.modelBeforePaste = (0, mergePasteContent_1.cloneModelForPaste)(editor.getContentModelCopy('connected'));
+        editor.formatContentModel(function (model) {
+            clipboardData.modelBeforePaste = (0, mergePasteContent_1.cloneModelForPaste)(model);
+            return false;
+        });
     }
     // 1. Prepare variables
     var doc = createDOMFromHtml(clipboardData.rawHtml, trustedHTMLHandler);
@@ -8127,6 +8242,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 +8364,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 +8399,7 @@ exports.coreApiMap = {
     switchShadowEdit: switchShadowEdit_1.switchShadowEdit,
     getVisibleViewport: getVisibleViewport_1.getVisibleViewport,
     setEditorStyle: setEditorStyle_1.setEditorStyle,
+    announce: announce_1.announce,
 };
 
 
@@ -8248,34 +8428,33 @@ var createContentModel = function (core, option, selectionOverride) {
     var _a;
     // Flush all mutations if any, so that we can get an up-to-date Content Model
     (_a = core.cache.textMutationObserver) === null || _a === void 0 ? void 0 : _a.flushMutations();
-    var cachedModel = selectionOverride || (option && !option.tryGetFromCache) ? null : core.cache.cachedModel;
-    if (cachedModel && core.lifecycle.shadowEditFragment) {
-        // When in shadow edit, use a cloned model so we won't pollute the cached one
-        cachedModel = (0, roosterjs_content_model_dom_1.cloneModel)(cachedModel, { includeCachedElement: true });
+    if (!selectionOverride && (!option || option.tryGetFromCache)) {
+        var cachedModel = core.cache.cachedModel;
+        if (cachedModel) {
+            // When in shadow edit, use a cloned model so we won't pollute the cached one
+            return core.lifecycle.shadowEditFragment
+                ? (0, roosterjs_content_model_dom_1.cloneModel)(cachedModel, { includeCachedElement: true })
+                : cachedModel;
+        }
     }
-    if (cachedModel) {
-        return cachedModel;
+    var selection = selectionOverride == 'none'
+        ? undefined
+        : selectionOverride || core.api.getDOMSelection(core) || undefined;
+    var saveIndex = !option && !selectionOverride;
+    var editorContext = core.api.createEditorContext(core, saveIndex);
+    var settings = core.environment.domToModelSettings;
+    var domToModelContext = option
+        ? (0, roosterjs_content_model_dom_1.createDomToModelContext)(editorContext, settings.builtIn, settings.customized, option)
+        : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(settings.calculated, editorContext);
+    if (selection) {
+        domToModelContext.selection = selection;
     }
-    else {
-        var selection = selectionOverride == 'none'
-            ? undefined
-            : selectionOverride || core.api.getDOMSelection(core) || undefined;
-        var saveIndex = !option && !selectionOverride;
-        var editorContext = core.api.createEditorContext(core, saveIndex);
-        var settings = core.environment.domToModelSettings;
-        var domToModelContext = option
-            ? (0, roosterjs_content_model_dom_1.createDomToModelContext)(editorContext, settings.builtIn, settings.customized, option)
-            : (0, roosterjs_content_model_dom_1.createDomToModelContextWithConfig)(settings.calculated, editorContext);
-        if (selection) {
-            domToModelContext.selection = selection;
-        }
-        var model = (0, roosterjs_content_model_dom_1.domToContentModel)(core.logicalRoot, domToModelContext);
-        if (saveIndex) {
-            core.cache.cachedModel = model;
-            (0, updateCachedSelection_1.updateCachedSelection)(core.cache, selection);
-        }
-        return model;
+    var model = (0, roosterjs_content_model_dom_1.domToContentModel)(core.logicalRoot, domToModelContext);
+    if (saveIndex) {
+        core.cache.cachedModel = model;
+        (0, updateCachedSelection_1.updateCachedSelection)(core.cache, selection);
     }
+    return model;
 };
 exports.createContentModel = createContentModel;
 
@@ -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;
-    }
-}
 
 
 /***/ }),
@@ -8400,7 +8574,7 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  */
 var formatContentModel = function (core, formatter, options, domToModelOptions) {
     var _a;
-    var _b = options || {}, apiName = _b.apiName, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, changeSource = _b.changeSource, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride;
+    var _b = options || {}, apiName = _b.apiName, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, changeSource = _b.changeSource, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride, scrollCaretIntoView = _b.scrollCaretIntoView;
     var model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     var context = {
         newEntities: [],
@@ -8425,6 +8599,11 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
                 (_a = core.api.setContentModel(core, model, hasFocus ? undefined : { ignoreSelection: true }, // If editor did not have focus before format, do not set focus after format
                 onNodeCreated)) !== null && _a !== void 0 ? _a : undefined;
             handlePendingFormat(core, context, selection);
+            if (selection && scrollCaretIntoView) {
+                var selectionRoot = (0, roosterjs_content_model_dom_1.getSelectionRootNode)(selection);
+                var rootElement = selectionRoot && core.domHelper.findClosestElementAncestor(selectionRoot);
+                rootElement === null || rootElement === void 0 ? void 0 : rootElement.scrollIntoView();
+            }
             var eventData = {
                 eventType: 'contentChanged',
                 contentModel: clearModelCache ? undefined : model,
@@ -8461,19 +8640,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 +8872,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 +8923,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;
         }
@@ -9121,7 +9296,7 @@ var TABLE_ID = 'table';
 var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
 var TABLE_CSS_RULE = 'background-color:#C6C6C6!important;';
 var CARET_CSS_RULE = 'caret-color: transparent';
-var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important';
+var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important;';
 var SELECTION_SELECTOR = '*::selection';
 /**
  * @internal
@@ -9139,9 +9314,12 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     try {
         switch (selection === null || selection === void 0 ? void 0 : selection.type) {
             case 'image':
-                var image = selection.image;
-                core.selection.selection = selection;
-                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID)]);
+                var image = ensureImageHasSpanParent(selection.image);
+                core.selection.selection = {
+                    type: 'image',
+                    image: image,
+                };
+                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:auto!important; outline-color:" + (core.selection.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["span:has(>img#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID) + ")"]);
                 core.api.setEditorStyle(core, HIDE_SELECTION_CSS_KEY, TRANSPARENT_SELECTION_CSS_RULE, [SELECTION_SELECTOR]);
                 setRangeSelection(doc, image, false /* collapse */);
                 break;
@@ -9272,6 +9450,18 @@ function setRangeSelection(doc, element, collapse) {
         (0, addRangeToSelection_1.addRangeToSelection)(doc, range, isReverted);
     }
 }
+function ensureImageHasSpanParent(image) {
+    var parent = image.parentElement;
+    if (parent &&
+        (0, roosterjs_content_model_dom_1.isNodeOfType)(parent, 'ELEMENT_NODE') &&
+        (0, roosterjs_content_model_dom_1.isElementOfType)(parent, 'span') &&
+        parent.firstChild == image &&
+        parent.lastChild == image) {
+        return image;
+    }
+    (0, roosterjs_content_model_dom_1.wrap)(image.ownerDocument, image, 'span');
+    return image;
+}
 
 
 /***/ }),
@@ -9812,11 +10002,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 +10018,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 +10484,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 +11152,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 +11282,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 +11291,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 +11432,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 +12006,7 @@ var LifecyclePlugin = /** @class */ (function () {
             isDarkMode: !!options.inDarkMode,
             shadowEditFragment: null,
             styleElements: {},
+            announcerStringGetter: options.announcerStringGetter,
         };
     }
     /**
@@ -11695,7 +12034,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 +12042,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 +12430,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 +12445,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 +12483,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 +12492,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;
@@ -12659,6 +13012,11 @@ var UndoPlugin = /** @class */ (function () {
             case 'beforeKeyboardEditing':
                 this.onBeforeKeyboardEditing(event.rawEvent);
                 break;
+            case 'mouseDown':
+                if (this.state.snapshotsManager.hasNewContent) {
+                    this.addUndoSnapshot();
+                }
+                break;
         }
     };
     UndoPlugin.prototype.onKeyDown = function (editor, evt) {
@@ -12856,9 +13214,6 @@ var Editor = /** @class */ (function () {
     /**
      * Create Content Model from DOM tree in this editor
      * @param mode What kind of Content Model we want. Currently we support the following values:
-     * - connected: Returns a connect Content Model object. "Connected" means if there is any entity inside editor, the returned Content Model will
-     * contain the same wrapper element for entity. This option should only be used in some special cases. In most cases we should use "disconnected"
-     * to get a fully disconnected Content Model so that any change to the model will not impact editor content.
      * - disconnected: Returns a disconnected clone of Content Model from editor which you can do any change on it and it won't impact the editor content.
      * If there is any entity in editor, the returned object will contain cloned copy of entity wrapper element.
      * If editor is in dark mode, the cloned entity will be converted back to light mode.
@@ -12868,10 +13223,7 @@ var Editor = /** @class */ (function () {
     Editor.prototype.getContentModelCopy = function (mode) {
         var core = this.getCore();
         switch (mode) {
-            case 'connected':
-                return core.api.createContentModel(core, {
-                    tryGetFromCache: true, // Pass an option here to force disable save index
-                });
+            case 'connected': // Get a connected model is deprecated. Now we will always return disconnected model
             case 'disconnected':
                 return (0, roosterjs_content_model_dom_1.cloneModel)(core.api.createContentModel(core, {
                     processorOverride: {
@@ -13098,6 +13450,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 +13538,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,94 +13848,23 @@ 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;
+function getListStyleValue(listType, listStyleType, listNumber) {
+    if (listType == 'OL') {
+        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 roosterjs_content_model_dom_1.UnorderedListStyleMap[listStyleType];
     }
-    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;
-    if (listType == 'OL') {
-        return typeof orderedStyleType == 'number'
-            ? roosterjs_content_model_dom_1.OrderedListStyleMap[orderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultOrderedListStyles[depth % DefaultOrderedListStyles.length]
-                : undefined;
-    }
-    else {
-        return typeof unorderedStyleType == 'number'
-            ? roosterjs_content_model_dom_1.UnorderedListStyleMap[unorderedStyleType]
-            : applyListStyleFromLevel
-                ? DefaultUnorderedListStyles[depth % DefaultUnorderedListStyles.length]
-                : undefined;
-    }
+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 +13876,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 +13898,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,6 +14470,10 @@ exports.ChangeSource = {
      * Data of this event will be the key code number
      */
     Keyboard: 'Keyboard',
+    /**
+     * Content changed by auto format
+     */
+    AutoFormat: 'AutoFormat',
 };
 
 
@@ -14651,7 +14964,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 +16566,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 +16595,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 +16669,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 +19583,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 +19634,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 +19700,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 +22720,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 +23285,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 +23333,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 +23419,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 +23962,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;
 }
@@ -24632,7 +25154,8 @@ function removeUnnecessarySpan(root) {
     for (var child = root.firstChild; child;) {
         if ((0, isNodeOfType_1.isNodeOfType)(child, 'ELEMENT_NODE') &&
             child.tagName == 'SPAN' &&
-            child.attributes.length == 0) {
+            child.attributes.length == 0 &&
+            !isImageSpan(child)) {
             var node = child;
             var refNode = child.nextSibling;
             child = child.nextSibling;
@@ -24649,6 +25172,11 @@ function removeUnnecessarySpan(root) {
     }
 }
 exports.removeUnnecessarySpan = removeUnnecessarySpan;
+var isImageSpan = function (child) {
+    return ((0, isNodeOfType_1.isNodeOfType)(child.firstChild, 'ELEMENT_NODE') &&
+        child.firstChild.tagName == 'IMG' &&
+        child.firstChild == child.lastChild);
+};
 
 
 /***/ }),
@@ -24787,65 +25315,84 @@ exports.stackFormat = stackFormat;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.contentModelToText = void 0;
 var TextForHR = '________________________________________';
+var defaultCallbacks = {
+    onDivider: function (divider) { return (divider.tagName == 'hr' ? TextForHR : ''); },
+    onEntityBlock: function () { return ''; },
+    onEntitySegment: function (entity) { var _a; return (_a = entity.wrapper.textContent) !== null && _a !== void 0 ? _a : ''; },
+    onGeneralSegment: function (segment) { var _a; return (_a = segment.element.textContent) !== null && _a !== void 0 ? _a : ''; },
+    onImage: function () { return ' '; },
+    onText: function (text) { return text.text; },
+    onParagraph: function () { return true; },
+    onTable: function () { return true; },
+    onBlockGroup: function () { return true; },
+};
 /**
  * Convert Content Model to plain text
  * @param model The source Content Model
  * @param [separator='\r\n'] The separator string used for connect lines
+ * @param callbacks  Callbacks to customize the behavior of contentModelToText function
  */
-function contentModelToText(model, separator) {
+function contentModelToText(model, separator, callbacks) {
     if (separator === void 0) { separator = '\r\n'; }
     var textArray = [];
-    contentModelToTextArray(model, textArray);
+    var fullCallbacks = Object.assign({}, defaultCallbacks, callbacks);
+    contentModelToTextArray(model, textArray, fullCallbacks);
     return textArray.join(separator);
 }
 exports.contentModelToText = contentModelToText;
-function contentModelToTextArray(group, textArray) {
-    group.blocks.forEach(function (block) {
-        switch (block.blockType) {
-            case 'Paragraph':
-                var text_1 = '';
-                block.segments.forEach(function (segment) {
-                    switch (segment.segmentType) {
-                        case 'Br':
+function contentModelToTextArray(group, textArray, callbacks) {
+    if (callbacks.onBlockGroup(group)) {
+        group.blocks.forEach(function (block) {
+            switch (block.blockType) {
+                case 'Paragraph':
+                    if (callbacks.onParagraph(block)) {
+                        var text_1 = '';
+                        block.segments.forEach(function (segment) {
+                            switch (segment.segmentType) {
+                                case 'Br':
+                                    textArray.push(text_1);
+                                    text_1 = '';
+                                    break;
+                                case 'Entity':
+                                    text_1 += callbacks.onEntitySegment(segment);
+                                    break;
+                                case 'General':
+                                    text_1 += callbacks.onGeneralSegment(segment);
+                                    break;
+                                case 'Text':
+                                    text_1 += callbacks.onText(segment);
+                                    break;
+                                case 'Image':
+                                    text_1 += callbacks.onImage(segment);
+                                    break;
+                            }
+                        });
+                        if (text_1) {
                             textArray.push(text_1);
-                            text_1 = '';
-                            break;
-                        case 'Entity':
-                            text_1 += segment.wrapper.textContent || '';
-                            break;
-                        case 'General':
-                            text_1 += segment.element.textContent || '';
-                            break;
-                        case 'Text':
-                            text_1 += segment.text;
-                            break;
-                        case 'Image':
-                            text_1 += ' ';
-                            break;
+                        }
                     }
-                });
-                if (text_1) {
-                    textArray.push(text_1);
-                }
-                break;
-            case 'Divider':
-                textArray.push(block.tagName == 'hr' ? TextForHR : '');
-                break;
-            case 'Entity':
-                textArray.push('');
-                break;
-            case 'Table':
-                block.rows.forEach(function (row) {
-                    return row.cells.forEach(function (cell) {
-                        contentModelToTextArray(cell, textArray);
-                    });
-                });
-                break;
-            case 'BlockGroup':
-                contentModelToTextArray(block, textArray);
-                break;
-        }
-    });
+                    break;
+                case 'Divider':
+                    textArray.push(callbacks.onDivider(block));
+                    break;
+                case 'Entity':
+                    textArray.push(callbacks.onEntityBlock(block));
+                    break;
+                case 'Table':
+                    if (callbacks.onTable(block)) {
+                        block.rows.forEach(function (row) {
+                            return row.cells.forEach(function (cell) {
+                                contentModelToTextArray(cell, textArray, callbacks);
+                            });
+                        });
+                    }
+                    break;
+                case 'BlockGroup':
+                    contentModelToTextArray(block, textArray, callbacks);
+                    break;
+            }
+        });
+    }
 }
 
 
@@ -24861,11 +25408,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 +25426,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 +25441,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 +25503,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 +25562,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 +25650,8 @@ function createLink(editor) {
             return true;
         }
         return false;
+    }, {
+        changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoLink,
     });
 }
 exports.createLink = createLink;
@@ -25480,15 +26066,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 +26093,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":
@@ -25605,8 +26268,105 @@ exports.ContextMenuPluginBase = ContextMenuPluginBase;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts":
-/*!*************************************************************************!*\
+/***/ "./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":
+/*!*************************************************************************!*\
   !*** ./packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts ***!
   \*************************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -25687,11 +26447,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 +26475,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 +26504,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 +27044,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 +27091,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 +27122,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) {
@@ -26398,6 +27183,7 @@ function keyboardDelete(editor, rawEvent) {
             rawEvent: rawEvent,
             changeSource: roosterjs_content_model_dom_1.ChangeSource.Keyboard,
             getChangeData: function () { return rawEvent.which; },
+            scrollCaretIntoView: true,
             apiName: rawEvent.key == 'Delete' ? 'handleDeleteKey' : 'handleBackspaceKey',
         });
     }
@@ -26490,6 +27276,7 @@ function keyboardInput(editor, rawEvent) {
                 return false;
             }
         }, {
+            scrollCaretIntoView: true,
             rawEvent: rawEvent,
         });
         return true;
@@ -26543,8 +27330,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 +27353,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 +27365,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 +27393,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 +27449,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 +27461,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) {
@@ -26989,7 +27776,7 @@ var HyperlinkPlugin = /** @class */ (function () {
      */
     HyperlinkPlugin.prototype.onPluginEvent = function (event) {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c;
         var matchedLink;
         if (event.eventType == 'keyDown') {
             var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
@@ -27034,6 +27821,9 @@ var HyperlinkPlugin = /** @class */ (function () {
                 }
             });
         }
+        else if (event.eventType == 'contentChanged') {
+            (_c = this.domHelper) === null || _c === void 0 ? void 0 : _c.setDomAttribute('title', null /*value*/);
+        }
     };
     HyperlinkPlugin.prototype.runWithHyperlink = function (node, callback) {
         var _a;
@@ -27062,7 +27852,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 +27869,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 +27887,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 +28129,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 +29517,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 +30047,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 +30228,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 +30348,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 +30462,7 @@ exports.ShortcutRedo = {
     environment: 'nonMac',
 };
 /**
+ * @deprecated
  * Shortcut command for Redo 2
  * Windows: N/A
  * MacOS: Meta + Shift + Z
@@ -29271,6 +30476,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 +30593,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 +30631,14 @@ 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.
+     * @param disableFeatures An optional array of TableEditFeatures to disable
      */
-    function TableEditPlugin(anchorContainerSelector) {
+    function TableEditPlugin(anchorContainerSelector, onTableEditorCreated, disableFeatures) {
         var _this = this;
         this.anchorContainerSelector = anchorContainerSelector;
+        this.onTableEditorCreated = onTableEditorCreated;
+        this.disableFeatures = disableFeatures;
         this.editor = null;
         this.onMouseMoveDisposer = null;
         this.tableRectMap = null;
@@ -29494,6 +30716,7 @@ var TableEditPlugin = /** @class */ (function () {
         this.disposeTableEditor();
         this.editor = null;
         this.onMouseMoveDisposer = null;
+        this.onTableEditorCreated = undefined;
     };
     /**
      * Handle events triggered from editor
@@ -29524,7 +30747,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, this.disableFeatures);
         }
     };
     TableEditPlugin.prototype.disposeTableEditor = function () {
@@ -29609,7 +30832,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, disableFeatures) {
         var _this = this;
         var _a;
         this.editor = editor;
@@ -29617,6 +30840,8 @@ var TableEditor = /** @class */ (function () {
         this.onChanged = onChanged;
         this.anchorContainer = anchorContainer;
         this.contentDiv = contentDiv;
+        this.onTableEditorCreated = onTableEditorCreated;
+        this.disableFeatures = disableFeatures;
         // 1, 2 - Insert a column or a row
         this.horizontalInserter = null;
         this.verticalInserter = null;
@@ -29628,6 +30853,20 @@ var TableEditor = /** @class */ (function () {
         // 6 - Move as well as select whole table
         this.tableMover = null;
         this.range = null;
+        this.onEditorCreated = function (featureType, element) {
+            var _a;
+            var disposer = (_a = _this.onTableEditorCreated) === null || _a === void 0 ? void 0 : _a.call(_this, featureType, 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) {
@@ -29647,6 +30886,16 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableResizer();
             _this.onStartResize();
         };
+        this.onStartTableMove = function () {
+            _this.isCurrentlyEditing = true;
+            _this.disposeTableResizer();
+            _this.disposeTableInserter();
+            _this.disposeCellResizers();
+        };
+        this.onEndTableMove = function () {
+            _this.disposeTableMover();
+            return _this.onFinishEditing();
+        };
         this.onInserted = function () {
             _this.disposeTableResizer();
             _this.onFinishEditing();
@@ -29656,14 +30905,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);
@@ -29675,7 +30926,8 @@ var TableEditor = /** @class */ (function () {
                     ev.relatedTarget != feature &&
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(_this.contentDiv, 'ELEMENT_NODE') &&
                     (0, roosterjs_content_model_dom_1.isNodeOfType)(ev.relatedTarget, 'ELEMENT_NODE') &&
-                    !(_this.contentDiv == ev.relatedTarget)) {
+                    !(_this.contentDiv == ev.relatedTarget) &&
+                    !_this.isEditing()) {
                     _this.dispose();
                 }
             };
@@ -29709,7 +30961,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;
         }
@@ -29747,7 +30998,8 @@ var TableEditor = /** @class */ (function () {
                     if (i === 0 && topOrSide == 0 /* top */) {
                         var center = (tdRect.left + tdRect.right) / 2;
                         var isOnRightHalf = this.isRTL ? x < center : x > center;
-                        this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
+                        !this.isFeatureDisabled('VerticalTableInserter') &&
+                            this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
                     }
                     else if (j === 0 && topOrSide == 1 /* side */) {
                         var tdAbove = (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0];
@@ -29759,14 +31011,15 @@ var TableEditor = /** @class */ (function () {
                             : this.isRTL
                                 ? tdAboveRect.right === tdRect.right
                                 : tdAboveRect.left === tdRect.left;
-                        this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
-                            ? tdAbove
-                            : td, true /*isHorizontal*/);
+                        !this.isFeatureDisabled('HorizontalTableInserter') &&
+                            this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
+                                ? tdAbove
+                                : td, true /*isHorizontal*/);
                     }
                     else {
                         this.setInserterTd(null);
                     }
-                    this.setResizingTd(td);
+                    !this.isFeatureDisabled('CellResizer') && this.setResizingTd(td);
                     //Cell found
                     break;
                 }
@@ -29779,11 +31032,13 @@ var TableEditor = /** @class */ (function () {
         this.setEditorFeatures();
     };
     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);
+        var disableSelector = this.isFeatureDisabled('TableSelector');
+        var disableMovement = this.isFeatureDisabled('TableMover');
+        if (!this.tableMover && !(disableSelector && disableMovement)) {
+            this.tableMover = (0, TableMover_1.createTableMover)(this.table, this.editor, this.isRTL, disableSelector ? function () { } : this.onSelect, this.onStartTableMove, this.onEndTableMove, this.contentDiv, this.anchorContainer, this.onEditorCreated, disableMovement);
         }
-        if (!this.tableResizer) {
-            this.tableResizer = (0, TableResizer_1.createTableResizer)(this.table, this.editor, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.contentDiv, this.anchorContainer);
+        if (!this.tableResizer && !this.isFeatureDisabled('TableResizer')) {
+            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 +31060,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;
             }
@@ -29854,6 +31109,10 @@ var TableEditor = /** @class */ (function () {
         }
         this.editor.takeSnapshot();
     };
+    TableEditor.prototype.isFeatureDisabled = function (feature) {
+        var _a;
+        return (_a = this.disableFeatures) === null || _a === void 0 ? void 0 : _a.includes(feature);
+    };
     return TableEditor;
 }());
 exports.TableEditor = TableEditor;
@@ -29870,12 +31129,20 @@ exports.TableEditor = TableEditor;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createCellResizer = void 0;
+exports.createCellResizer = exports.VERTICAL_RESIZER_ID = exports.HORIZONTAL_RESIZER_ID = 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");
 var CELL_RESIZER_WIDTH = 4;
+/**
+ * @internal
+ */
+exports.HORIZONTAL_RESIZER_ID = 'horizontalResizer';
+/**
+ * @internal
+ */
+exports.VERTICAL_RESIZER_ID = 'verticalResizer';
 /**
  * @internal
  */
@@ -30017,7 +31284,7 @@ function setHorizontalPosition(context, trigger) {
     var td = context.td;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
-        trigger.id = 'horizontalResizer';
+        trigger.id = exports.HORIZONTAL_RESIZER_ID;
         trigger.style.top = rect.bottom - CELL_RESIZER_WIDTH + 'px';
         trigger.style.left = rect.left + 'px';
         trigger.style.width = rect.right - rect.left + 'px';
@@ -30028,7 +31295,7 @@ function setVerticalPosition(context, trigger) {
     var td = context.td, isRTL = context.isRTL;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     if (rect) {
-        trigger.id = 'verticalResizer';
+        trigger.id = exports.VERTICAL_RESIZER_ID;
         trigger.style.top = rect.top + 'px';
         trigger.style.left = (isRTL ? rect.left : rect.right) - CELL_RESIZER_WIDTH + 1 + 'px';
         trigger.style.width = CELL_RESIZER_WIDTH + 'px';
@@ -30052,13 +31319,13 @@ exports.disposeTableEditFeature = void 0;
 /**
  * @internal
  */
-function disposeTableEditFeature(resizer) {
+function disposeTableEditFeature(feature) {
     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();
-        resizer.featureHandler = null;
+    if (feature) {
+        (_a = feature.featureHandler) === null || _a === void 0 ? void 0 : _a.dispose();
+        feature.featureHandler = null;
+        (_c = (_b = feature.div) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(feature.div);
+        feature.div = null;
     }
 }
 exports.disposeTableEditFeature = disposeTableEditFeature;
@@ -30075,7 +31342,7 @@ exports.disposeTableEditFeature = disposeTableEditFeature;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createTableInserter = void 0;
+exports.createTableInserter = exports.VERTICAL_INSERTER_ID = exports.HORIZONTAL_INSERTER_ID = void 0;
 var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var getIntersectedRect_1 = __webpack_require__(/*! ../../../pluginUtils/Rect/getIntersectedRect */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/Rect/getIntersectedRect.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
@@ -30087,7 +31354,15 @@ var INSERTER_BORDER_SIZE = 1;
 /**
  * @internal
  */
-function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, getOnMouseOut, anchorContainer) {
+exports.HORIZONTAL_INSERTER_ID = 'horizontalInserter';
+/**
+ * @internal
+ */
+exports.VERTICAL_INSERTER_ID = 'verticalInserter';
+/**
+ * @internal
+ */
+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;
@@ -30098,7 +31373,7 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, g
         var div = (0, createElement_1.createElement)(createElementData, document_1);
         if (isHorizontal) {
             // tableRect.left/right is used because the Inserter is always intended to be on the side
-            div.id = 'horizontalInserter';
+            div.id = exports.HORIZONTAL_INSERTER_ID;
             div.style.left = (isRTL
                 ? tableRect.right
                 : tableRect.left - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE)) + "px";
@@ -30106,21 +31381,21 @@ function createTableInserter(editor, td, table, isRTL, isHorizontal, onInsert, g
             div.firstChild.style.width = tableRect.right - tableRect.left + "px";
         }
         else {
-            div.id = 'verticalInserter';
+            div.id = exports.VERTICAL_INSERTER_ID;
             div.style.left = (isRTL ? tdRect.left - 8 : tdRect.right - 8) + "px";
             // tableRect.top is used because the Inserter is always intended to be on top
             div.style.top = tableRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE) + "px";
             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 +31430,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;
 }());
@@ -30198,19 +31471,24 @@ function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createTableMover = void 0;
+exports.onDragEnd = exports.onDragging = exports.onDragStart = exports.createTableMover = exports.TABLE_MOVER_ID = 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_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");
 var TABLE_MOVER_LENGTH = 12;
-var TABLE_MOVER_ID = '_Table_Mover';
 /**
  * @internal
+ */
+exports.TABLE_MOVER_ID = '_Table_Mover';
+var TABLE_MOVER_STYLE_KEY = '_TableMoverCursorStyle';
+/**
+ * @internal
+ * Allows user to move table to another position
  * 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, onStart, onEnd, contentDiv, anchorContainer, onTableEditorCreated, disableMovement) {
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(table.getBoundingClientRect());
     if (!isTableTopVisible(editor, rect, contentDiv)) {
         return null;
@@ -30219,10 +31497,10 @@ function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut,
     var document = table.ownerDocument;
     var createElementData = {
         tag: 'div',
-        style: 'position: fixed; cursor: all-scroll; user-select: none; border: 1px solid #808080',
+        style: 'position: fixed; cursor: move; user-select: none; border: 1px solid #808080',
     };
     var div = (0, createElement_1.createElement)(createElementData, document);
-    div.id = TABLE_MOVER_ID;
+    div.id = exports.TABLE_MOVER_ID;
     div.style.width = TABLE_MOVER_LENGTH + "px";
     div.style.height = TABLE_MOVER_LENGTH + "px";
     (anchorContainer || document.body).appendChild(div);
@@ -30231,35 +31509,36 @@ function createTableMover(table, editor, isRTL, onFinishDragging, getOnMouseOut,
         zoomScale: zoomScale,
         rect: rect,
         isRTL: isRTL,
+        editor: editor,
+        div: div,
+        onFinishDragging: onFinishDragging,
+        onStart: onStart,
+        onEnd: onEnd,
+        disableMovement: disableMovement,
     };
     setDivPosition(context, div);
-    var onDragEnd = function (context, event) {
-        if (event.target == div) {
-            onFinishDragging(context.table);
-        }
-        return false;
-    };
-    var featureHandler = new TableMoverFeature(div, context, setDivPosition, {
-        onDragEnd: onDragEnd,
-    }, context.zoomScale, getOnMouseOut);
-    return { div: div, featureHandler: featureHandler, node: table };
+    var featureHandler = new TableMoverFeature(div, context, function () { }, disableMovement
+        ? { onDragEnd: onDragEnd }
+        : {
+            onDragStart: onDragStart,
+            onDragging: onDragging,
+            onDragEnd: onDragEnd,
+        }, context.zoomScale, onTableEditorCreated, editor.getEnvironment().isMobileOrTablet);
+    return { node: table, div: div, featureHandler: featureHandler };
 }
 exports.createTableMover = createTableMover;
 var TableMoverFeature = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(TableMoverFeature, _super);
-    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, getOnMouseOut, forceMobile, container) {
+    function TableMoverFeature(div, context, onSubmit, handler, zoomScale, onTableEditorCreated, forceMobile) {
         var _this = _super.call(this, div, context, onSubmit, handler, zoomScale, forceMobile) || this;
-        _this.div = div;
-        _this.onMouseOut = getOnMouseOut(div);
-        div.addEventListener('mouseout', _this.onMouseOut);
+        _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));
@@ -30278,6 +31557,188 @@ function isTableTopVisible(editor, rect, contentDiv) {
     }
     return true;
 }
+function setTableMoverCursor(editor, state, type) {
+    var _a;
+    editor === null || editor === void 0 ? void 0 : editor.setEditorStyle(TABLE_MOVER_STYLE_KEY, state ? (_a = 'cursor: ' + type) !== null && _a !== void 0 ? _a : 'move' : null);
+}
+// Get insertion point from coordinate.
+function getNodePositionFromEvent(editor, x, y) {
+    var doc = editor.getDocument();
+    var domHelper = editor.getDOMHelper();
+    if (doc.caretRangeFromPoint) {
+        // Chrome, Edge, Safari, Opera
+        var range = doc.caretRangeFromPoint(x, y);
+        if (range && domHelper.isNodeInEditor(range.startContainer)) {
+            return { node: range.startContainer, offset: range.startOffset };
+        }
+    }
+    if ('caretPositionFromPoint' in doc) {
+        // Firefox
+        var pos = doc.caretPositionFromPoint(x, y);
+        if (pos && domHelper.isNodeInEditor(pos.offsetNode)) {
+            return { node: pos.offsetNode, offset: pos.offset };
+        }
+    }
+    if (doc.elementFromPoint) {
+        // Fallback
+        var element = doc.elementFromPoint(x, y);
+        if (element && domHelper.isNodeInEditor(element)) {
+            return { node: element, offset: 0 };
+        }
+    }
+    return null;
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragStart(context) {
+    var _a;
+    context.onStart();
+    var editor = context.editor, table = context.table, div = context.div;
+    setTableMoverCursor(editor, true, 'move');
+    // Create table outline rectangle
+    var trect = table.getBoundingClientRect();
+    var createElementData = {
+        tag: 'div',
+        style: 'position: fixed; user-select: none; border: 1px solid #808080',
+    };
+    var tableRect = (0, createElement_1.createElement)(createElementData, document);
+    tableRect.style.width = trect.width + "px";
+    tableRect.style.height = trect.height + "px";
+    tableRect.style.top = trect.top + "px";
+    tableRect.style.left = trect.left + "px";
+    (_a = div.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(tableRect);
+    // Get current selection
+    var initialSelection = editor.getDOMSelection();
+    // Select first cell of the table
+    editor.setDOMSelection({
+        type: 'table',
+        firstColumn: 0,
+        firstRow: 0,
+        lastColumn: 0,
+        lastRow: 0,
+        table: table,
+    });
+    // Get the table content model
+    var _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(editor.getContentModelCopy('disconnected')), 1), cmTable = _b[0];
+    // Restore selection
+    editor.setDOMSelection(initialSelection);
+    return {
+        cmTable: cmTable,
+        initialSelection: initialSelection,
+        tableRect: tableRect,
+    };
+}
+exports.onDragStart = onDragStart;
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragging(context, event, initValue) {
+    var tableRect = initValue.tableRect;
+    var editor = context.editor;
+    // Move table outline rectangle
+    tableRect.style.top = event.clientY + TABLE_MOVER_LENGTH + "px";
+    tableRect.style.left = event.clientX + TABLE_MOVER_LENGTH + "px";
+    var pos = getNodePositionFromEvent(editor, event.clientX, event.clientY);
+    if (pos) {
+        var range = editor.getDocument().createRange();
+        range.setStart(pos.node, pos.offset);
+        range.collapse(true);
+        editor.setDOMSelection({ type: 'range', range: range, isReverted: false });
+        return true;
+    }
+    return false;
+}
+exports.onDragging = onDragging;
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragEnd(context, event, initValue) {
+    var _a, _b;
+    var editor = context.editor, table = context.table, selectWholeTable = context.onFinishDragging, disableMovement = context.disableMovement;
+    var element = event.target;
+    // Remove table outline rectangle
+    initValue === null || initValue === void 0 ? void 0 : initValue.tableRect.remove();
+    // Reset cursor
+    setTableMoverCursor(editor, false);
+    if (element == context.div) {
+        // Table mover was only clicked, select whole table
+        selectWholeTable(table);
+        context.onEnd();
+        return true;
+    }
+    else {
+        // Check if table was dragged on itself, element is not in editor, or movement is disabled
+        if (table.contains(element) ||
+            !editor.getDOMHelper().isNodeInEditor(element) ||
+            disableMovement) {
+            editor.setDOMSelection((_a = initValue === null || initValue === void 0 ? void 0 : initValue.initialSelection) !== null && _a !== void 0 ? _a : null);
+            context.onEnd();
+            return false;
+        }
+        var insertionSuccess_1 = false;
+        // Get position to insert table
+        var insertPosition = getNodePositionFromEvent(editor, event.clientX, event.clientY);
+        if (insertPosition) {
+            // Move table to new position
+            (0, roosterjs_content_model_api_1.formatInsertPointWithContentModel)(editor, insertPosition, function (model, context, ip) {
+                var _a;
+                // Remove old table
+                var _b = (0, tslib_1.__read)((0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model), 2), oldTable = _b[0], path = _b[1];
+                if (oldTable) {
+                    var index = path[0].blocks.indexOf(oldTable);
+                    path[0].blocks.splice(index, 1);
+                }
+                if (ip && (initValue === null || initValue === void 0 ? void 0 : initValue.cmTable)) {
+                    // Insert new table
+                    var doc = (0, roosterjs_content_model_dom_1.createContentModelDocument)();
+                    doc.blocks.push(initValue.cmTable);
+                    insertionSuccess_1 = !!(0, roosterjs_content_model_dom_1.mergeModel)(model, doc, context, {
+                        mergeFormat: 'none',
+                        insertPosition: ip,
+                    });
+                    if (insertionSuccess_1) {
+                        // After mergeModel, the new table should be selected
+                        var finalTable = (_a = (0, roosterjs_content_model_dom_1.getFirstSelectedTable)(model)[0]) !== null && _a !== void 0 ? _a : initValue.cmTable;
+                        if (finalTable) {
+                            // Add selection marker to the first cell of the table
+                            var FirstCell = finalTable.rows[0].cells[0];
+                            var markerParagraph = FirstCell === null || FirstCell === void 0 ? void 0 : FirstCell.blocks[0];
+                            if ((markerParagraph === null || markerParagraph === void 0 ? void 0 : markerParagraph.blockType) == 'Paragraph') {
+                                var marker = (0, roosterjs_content_model_dom_1.createSelectionMarker)(model.format);
+                                markerParagraph.segments.unshift(marker);
+                                (0, roosterjs_content_model_dom_1.setParagraphNotImplicit)(markerParagraph);
+                                (0, roosterjs_content_model_dom_1.setSelection)(FirstCell, marker);
+                            }
+                        }
+                    }
+                    return insertionSuccess_1;
+                }
+            }, {
+                // Select first cell of the old table
+                selectionOverride: {
+                    type: 'table',
+                    firstColumn: 0,
+                    firstRow: 0,
+                    lastColumn: 0,
+                    lastRow: 0,
+                    table: table,
+                },
+                apiName: 'TableMover',
+            });
+        }
+        else {
+            // No movement, restore initial selection
+            editor.setDOMSelection((_b = initValue === null || initValue === void 0 ? void 0 : initValue.initialSelection) !== null && _b !== void 0 ? _b : null);
+        }
+        context.onEnd();
+        return insertionSuccess_1;
+    }
+}
+exports.onDragEnd = onDragEnd;
 
 
 /***/ }),
@@ -30291,16 +31752,20 @@ function isTableTopVisible(editor, rect, contentDiv) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createTableResizer = void 0;
+exports.createTableResizer = exports.TABLE_RESIZER_ID = 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");
 var TABLE_RESIZER_LENGTH = 12;
-var TABLE_RESIZER_ID = '_Table_Resizer';
 /**
  * @internal
  */
-function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, anchorContainer) {
+exports.TABLE_RESIZER_ID = '_Table_Resizer';
+/**
+ * @internal
+ */
+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;
@@ -30312,7 +31777,7 @@ function createTableResizer(table, editor, isRTL, onStart, onEnd, contentDiv, an
         style: "position: fixed; cursor: " + (isRTL ? 'ne' : 'nw') + "-resize; user-select: none; border: 1px solid #808080",
     };
     var div = (0, createElement_1.createElement)(createElementData, document);
-    div.id = TABLE_RESIZER_ID;
+    div.id = exports.TABLE_RESIZER_ID;
     div.style.width = TABLE_RESIZER_LENGTH + "px";
     div.style.height = TABLE_RESIZER_LENGTH + "px";
     (anchorContainer || document.body).appendChild(div);
@@ -30327,15 +31792,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;
@@ -30521,7 +32001,8 @@ var WatermarkPlugin = /** @class */ (function () {
         if (!editor) {
             return;
         }
-        if (event.eventType == 'input' && event.rawEvent.inputType == 'insertText') {
+        if ((event.eventType == 'input' && event.rawEvent.inputType == 'insertText') ||
+            event.eventType == 'compositionEnd') {
             // When input text, editor must not be empty, so we can do hide watermark now without checking content model
             this.showHide(editor, false /*isEmpty*/);
         }
@@ -30602,6 +32083,10 @@ function isModelEmptyFast(model) {
     })) {
         return false; // Has meaningful segments, it is not empty
     }
+    else if ((firstBlock.format.marginRight && parseFloat(firstBlock.format.marginRight) > 0) ||
+        (firstBlock.format.marginLeft && parseFloat(firstBlock.format.marginLeft) > 0)) {
+        return false; // Has margin (indentation is changed), it is not empty
+    }
     else {
         return firstBlock.segments.filter(function (x) { return x.segmentType == 'Br'; }).length <= 1; // If there are more than one BR, it is not empty, otherwise it is empty
     }