roosterjs 9.5.1 → 9.7.0

package/dist/rooster-amd.js

@@ -2093,8 +2093,8 @@ exports["default"] = getDarkColor;
 "use strict";
 
 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.getListAnnounceData = exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = exports.formatInsertPointWithContentModel = void 0;
+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.splitTextSegment = exports.changeCapitalization = exports.applySegmentFormat = exports.changeFontSize = exports.setTextColor = exports.setFontSize = exports.setFontName = exports.setBackgroundColor = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleUnderline = exports.toggleItalic = exports.toggleBold = exports.toggleNumbering = exports.toggleBullet = exports.applyTableBorderFormat = exports.editTable = exports.setTableCellShade = exports.formatTable = exports.insertTable = void 0;
+exports.getListAnnounceData = exports.matchLink = exports.setModelIndentation = exports.findListItemsInSameThread = exports.setModelListStartNumber = exports.setModelListStyle = exports.setListType = exports.formatInsertPointWithContentModel = exports.formatTextSegmentBeforeSelectionMarker = 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");
@@ -2135,6 +2135,8 @@ var applySegmentFormat_1 = __webpack_require__(/*! ./publicApi/segment/applySegm
 Object.defineProperty(exports, "applySegmentFormat", ({ enumerable: true, get: function () { return applySegmentFormat_1.applySegmentFormat; } }));
 var changeCapitalization_1 = __webpack_require__(/*! ./publicApi/segment/changeCapitalization */ "./packages/roosterjs-content-model-api/lib/publicApi/segment/changeCapitalization.ts");
 Object.defineProperty(exports, "changeCapitalization", ({ enumerable: true, get: function () { return changeCapitalization_1.changeCapitalization; } }));
+var splitTextSegment_1 = __webpack_require__(/*! ./publicApi/segment/splitTextSegment */ "./packages/roosterjs-content-model-api/lib/publicApi/segment/splitTextSegment.ts");
+Object.defineProperty(exports, "splitTextSegment", ({ enumerable: true, get: function () { return splitTextSegment_1.splitTextSegment; } }));
 var insertImage_1 = __webpack_require__(/*! ./publicApi/image/insertImage */ "./packages/roosterjs-content-model-api/lib/publicApi/image/insertImage.ts");
 Object.defineProperty(exports, "insertImage", ({ enumerable: true, get: function () { return insertImage_1.insertImage; } }));
 var setListStyle_1 = __webpack_require__(/*! ./publicApi/list/setListStyle */ "./packages/roosterjs-content-model-api/lib/publicApi/list/setListStyle.ts");
@@ -2952,7 +2954,24 @@ function insertEntityModel(model, entityModel, position, isBlock, focusAfterEnti
 exports.insertEntityModel = insertEntityModel;
 function getInsertPoint(model, insertPointOverride, context) {
     if (insertPointOverride) {
-        return insertPointOverride;
+        var paragraph = insertPointOverride.paragraph, marker = insertPointOverride.marker, tableContext = insertPointOverride.tableContext, path = insertPointOverride.path;
+        var index = paragraph.segments.indexOf(marker);
+        var previousSegment = index > 0 ? paragraph.segments[index - 1] : null;
+        // It is possible that the real selection is right before the override selection marker.
+        // This happens when:
+        // [Override marker][Entity node to wrap][Real marker]
+        // Then we will move the entity node into entity wrapper, causes the override marker and real marker are at the same place
+        // And recreating content model causes real marker to appear before override marker.
+        // Once that happens, we need to use the real marker instead so that after insert entity, real marker can be placed
+        // after new entity (if insertPointOverride==true)
+        return (previousSegment === null || previousSegment === void 0 ? void 0 : previousSegment.segmentType) == 'SelectionMarker' && previousSegment.isSelected
+            ? {
+                marker: previousSegment,
+                paragraph: paragraph,
+                tableContext: tableContext,
+                path: path,
+            }
+            : insertPointOverride;
     }
     else {
         var deleteResult = (0, roosterjs_content_model_dom_1.deleteSelection)(model, [], context);
@@ -5860,6 +5879,47 @@ function setTextColor(editor, textColor) {
 exports.setTextColor = setTextColor;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-api/lib/publicApi/segment/splitTextSegment.ts":
+/*!****************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-api/lib/publicApi/segment/splitTextSegment.ts ***!
+  \****************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.splitTextSegment = 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");
+/**
+ * Split given text segments from the given range
+ * @param textSegment segment to split
+ * @param parent parent paragraph the text segment exist in
+ * @param start starting point of the split
+ * @param end ending point of the split
+ * @returns text segment from the indicated split.
+ */
+function splitTextSegment(textSegment, parent, start, end) {
+    var _a;
+    var text = textSegment.text;
+    var index = parent.segments.indexOf(textSegment);
+    var middleSegment = (0, roosterjs_content_model_dom_1.createText)(text.substring(start, end), textSegment.format, textSegment.link, textSegment.code);
+    var newSegments = [middleSegment];
+    if (start > 0) {
+        newSegments.unshift((0, roosterjs_content_model_dom_1.createText)(text.substring(0, start), textSegment.format, textSegment.link, textSegment.code));
+    }
+    if (end < text.length) {
+        newSegments.push((0, roosterjs_content_model_dom_1.createText)(text.substring(end), textSegment.format, textSegment.link, textSegment.code));
+    }
+    newSegments.forEach(function (segment) { return (segment.isSelected = textSegment.isSelected); });
+    (_a = parent.segments).splice.apply(_a, (0, tslib_1.__spreadArray)([index, 1], (0, tslib_1.__read)(newSegments), false));
+    return middleSegment;
+}
+exports.splitTextSegment = splitTextSegment;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-api/lib/publicApi/segment/toggleBold.ts":
@@ -6857,8 +6917,8 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
 function formatSegmentWithContentModel(editor, apiName, toggleStyleCallback, segmentHasStyleCallback, includingFormatHolder, afterFormatCallback) {
     editor.formatContentModel(function (model, context) {
         var segmentAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, !!includingFormatHolder, false /*includingEntity*/, true /*mutate*/);
-        var isCollapsedSelection = segmentAndParagraphs.length == 1 &&
-            segmentAndParagraphs[0][0].segmentType == 'SelectionMarker';
+        var isCollapsedSelection = segmentAndParagraphs.length >= 1 &&
+            segmentAndParagraphs.every(function (x) { return x[0].segmentType == 'SelectionMarker'; });
         if (isCollapsedSelection) {
             var para_1 = segmentAndParagraphs[0][1];
             var path_1 = segmentAndParagraphs[0][2];
@@ -7710,19 +7770,6 @@ exports.mergePasteContent = exports.cloneModelForPaste = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createDomToModelContextForSanitizing_1 = __webpack_require__(/*! ../createModelFromHtml/createDomToModelContextForSanitizing */ "./packages/roosterjs-content-model-core/lib/command/createModelFromHtml/createDomToModelContextForSanitizing.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var EmptySegmentFormat = {
-    backgroundColor: '',
-    fontFamily: '',
-    fontSize: '',
-    fontWeight: '',
-    italic: false,
-    letterSpacing: '',
-    lineHeight: '',
-    strikethrough: false,
-    superOrSubScriptSequence: '',
-    textColor: '',
-    underline: false,
-};
 var CloneOption = {
     includeCachedElement: function (node, type) { return (type == 'cache' ? undefined : node); },
 };
@@ -7757,7 +7804,7 @@ function mergePasteContent(editor, eventResult, clipboardData) {
             ? customizedMerge(model, pasteModel)
             : (0, roosterjs_content_model_dom_1.mergeModel)(model, pasteModel, context, mergeOption);
         if (insertPoint) {
-            context.newPendingFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, EmptySegmentFormat), model.format), insertPoint.marker.format);
+            context.newPendingFormat = (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, roosterjs_content_model_dom_1.EmptySegmentFormat), model.format), insertPoint.marker.format);
         }
         return true;
     }, {
@@ -8422,7 +8469,7 @@ exports.coreApiMap = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createContentModel = void 0;
-var updateCachedSelection_1 = __webpack_require__(/*! ../../corePlugin/cache/updateCachedSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCachedSelection.ts");
+var updateCache_1 = __webpack_require__(/*! ../../corePlugin/cache/updateCache */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCache.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
@@ -8458,8 +8505,7 @@ var createContentModel = function (core, option, selectionOverride) {
     }
     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);
+        (0, updateCache_1.updateCache)(core.cache, model, selection);
     }
     return model;
 };
@@ -9161,7 +9207,7 @@ exports.restoreUndoSnapshot = restoreUndoSnapshot;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setContentModel = void 0;
-var updateCachedSelection_1 = __webpack_require__(/*! ../../corePlugin/cache/updateCachedSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCachedSelection.ts");
+var updateCache_1 = __webpack_require__(/*! ../../corePlugin/cache/updateCache */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCache.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
@@ -9179,16 +9225,15 @@ var setContentModel = function (core, model, option, onNodeCreated) {
     modelToDomContext.onNodeCreated = onNodeCreated;
     var selection = (0, roosterjs_content_model_dom_1.contentModelToDom)(core.logicalRoot.ownerDocument, core.logicalRoot, model, modelToDomContext);
     if (!core.lifecycle.shadowEditFragment) {
-        (0, updateCachedSelection_1.updateCachedSelection)(core.cache, selection || undefined);
+        // Clear pending mutations since we will use our latest model object to replace existing cache
+        (_a = core.cache.textMutationObserver) === null || _a === void 0 ? void 0 : _a.flushMutations(true /*ignoreMutations*/);
+        (0, updateCache_1.updateCache)(core.cache, model, selection);
         if (!(option === null || option === void 0 ? void 0 : option.ignoreSelection) && selection) {
             core.api.setDOMSelection(core, selection);
         }
         else {
             core.selection.selection = selection;
         }
-        // Clear pending mutations since we will use our latest model object to replace existing cache
-        (_a = core.cache.textMutationObserver) === null || _a === void 0 ? void 0 : _a.flushMutations();
-        core.cache.cachedModel = model;
     }
     return selection;
 };
@@ -9201,12 +9246,13 @@ exports.setContentModel = setContentModel;
 /*!**************************************************************************************************!*\
   !*** ./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/addRangeToSelection.ts ***!
   \**************************************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.addRangeToSelection = void 0;
+var areSameSelections_1 = __webpack_require__(/*! ../../corePlugin/cache/areSameSelections */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelections.ts");
 /**
  * @internal
  */
@@ -9216,11 +9262,7 @@ function addRangeToSelection(doc, range, isReverted) {
     var selection = (_a = doc.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
     if (selection) {
         var currentRange = selection.rangeCount > 0 && selection.getRangeAt(0);
-        if (currentRange &&
-            currentRange.startContainer == range.startContainer &&
-            currentRange.endContainer == range.endContainer &&
-            currentRange.startOffset == range.startOffset &&
-            currentRange.endOffset == range.endOffset) {
+        if (currentRange && (0, areSameSelections_1.areSameRanges)(currentRange, range)) {
             return;
         }
         selection.removeAllRanges();
@@ -9235,40 +9277,6 @@ function addRangeToSelection(doc, range, isReverted) {
 exports.addRangeToSelection = addRangeToSelection;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/ensureImageHasSpanParent.ts":
-/*!*******************************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/ensureImageHasSpanParent.ts ***!
-  \*******************************************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.ensureImageHasSpanParent = void 0;
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-/**
- * @internal
- * Ensure image is wrapped by a span element
- * @param image
- * @returns the image
- */
-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;
-}
-exports.ensureImageHasSpanParent = ensureImageHasSpanParent;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/findLastedCoInMergedCell.ts":
@@ -9371,7 +9379,7 @@ exports.findTableCellElement = findTableCellElement;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setDOMSelection = void 0;
 var addRangeToSelection_1 = __webpack_require__(/*! ./addRangeToSelection */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/addRangeToSelection.ts");
-var ensureImageHasSpanParent_1 = __webpack_require__(/*! ./ensureImageHasSpanParent */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/ensureImageHasSpanParent.ts");
+var areSameSelections_1 = __webpack_require__(/*! ../../corePlugin/cache/areSameSelections */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelections.ts");
 var ensureUniqueId_1 = __webpack_require__(/*! ../setEditorStyle/ensureUniqueId */ "./packages/roosterjs-content-model-core/lib/coreApi/setEditorStyle/ensureUniqueId.ts");
 var findLastedCoInMergedCell_1 = __webpack_require__(/*! ./findLastedCoInMergedCell */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/findLastedCoInMergedCell.ts");
 var findTableCellElement_1 = __webpack_require__(/*! ./findTableCellElement */ "./packages/roosterjs-content-model-core/lib/coreApi/setDOMSelection/findTableCellElement.ts");
@@ -9384,11 +9392,16 @@ var TABLE_ID = 'table';
 var CARET_CSS_RULE = 'caret-color: transparent';
 var TRANSPARENT_SELECTION_CSS_RULE = 'background-color: transparent !important;';
 var SELECTION_SELECTOR = '*::selection';
+var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
 /**
  * @internal
  */
 var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     var _a, _b, _c;
+    var existingSelection = core.api.getDOMSelection(core);
+    if (existingSelection && selection && (0, areSameSelections_1.areSameSelections)(existingSelection, selection)) {
+        return;
+    }
     // We are applying a new selection, so we don't need to apply cached selection in DOMEventPlugin.
     // Set skipReselectOnFocus to skip this behavior
     var skipReselectOnFocus = core.selection.skipReselectOnFocus;
@@ -9401,15 +9414,12 @@ var setDOMSelection = function (core, selection, skipSelectionChangedEvent) {
     try {
         switch (selection === null || selection === void 0 ? void 0 : selection.type) {
             case 'image':
-                var image = (0, ensureImageHasSpanParent_1.ensureImageHasSpanParent)(selection.image);
-                core.selection.selection = {
-                    type: 'image',
-                    image: image,
-                };
+                var image = selection.image;
+                core.selection.selection = selection;
                 var imageSelectionColor = isDarkMode
                     ? core.selection.imageSelectionBorderColorDark
                     : core.selection.imageSelectionBorderColor;
-                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:solid!important; outline-color:" + imageSelectionColor + "!important;display: " + (core.environment.isSafari ? '-webkit-inline-flex' : 'inline-flex') + ";", ["span:has(>img#" + (0, ensureUniqueId_1.ensureUniqueId)(image, IMAGE_ID) + ")"]);
+                core.api.setEditorStyle(core, DOM_SELECTION_CSS_KEY, "outline-style:solid!important; outline-color:" + (imageSelectionColor || DEFAULT_SELECTION_BORDER_COLOR) + "!important;", ["#" + (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;
@@ -9804,10 +9814,10 @@ function handledExclusively(event, plugin) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createCachePlugin = void 0;
-var areSameSelection_1 = __webpack_require__(/*! ./areSameSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelection.ts");
+var areSameSelections_1 = __webpack_require__(/*! ./areSameSelections */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelections.ts");
 var textMutationObserver_1 = __webpack_require__(/*! ./textMutationObserver */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/textMutationObserver.ts");
 var domIndexerImpl_1 = __webpack_require__(/*! ./domIndexerImpl */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/domIndexerImpl.ts");
-var updateCachedSelection_1 = __webpack_require__(/*! ./updateCachedSelection */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCachedSelection.ts");
+var updateCache_1 = __webpack_require__(/*! ./updateCache */ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCache.ts");
 /**
  * ContentModel cache plugin manages cached Content Model, and refresh the cache when necessary
  */
@@ -9820,13 +9830,21 @@ var CachePlugin = /** @class */ (function () {
     function CachePlugin(option, contentDiv) {
         var _this = this;
         this.editor = null;
-        this.onMutation = function (isTextChangeOnly) {
+        this.onMutation = function (mutation) {
+            var _a;
             if (_this.editor) {
-                if (isTextChangeOnly) {
-                    _this.updateCachedModel(_this.editor, true /*forceUpdate*/);
-                }
-                else {
-                    _this.invalidateCache();
+                switch (mutation.type) {
+                    case 'childList':
+                        if (!((_a = _this.state.domIndexer) === null || _a === void 0 ? void 0 : _a.reconcileChildList(mutation.addedNodes, mutation.removedNodes))) {
+                            _this.invalidateCache();
+                        }
+                        break;
+                    case 'text':
+                        _this.updateCachedModel(_this.editor, true /*forceUpdate*/);
+                        break;
+                    case 'unknown':
+                        _this.invalidateCache();
+                        break;
                 }
             }
         };
@@ -9907,8 +9925,7 @@ var CachePlugin = /** @class */ (function () {
             case 'contentChanged':
                 var contentModel = event.contentModel, selection = event.selection;
                 if (contentModel && this.state.domIndexer) {
-                    this.state.cachedModel = contentModel;
-                    (0, updateCachedSelection_1.updateCachedSelection)(this.state, selection);
+                    (0, updateCache_1.updateCache)(this.state, contentModel, selection);
                 }
                 else {
                     this.invalidateCache();
@@ -9925,6 +9942,9 @@ var CachePlugin = /** @class */ (function () {
     };
     CachePlugin.prototype.updateCachedModel = function (editor, forceUpdate) {
         var _a;
+        if (editor.isInShadowEdit()) {
+            return;
+        }
         var cachedSelection = this.state.cachedSelection;
         this.state.cachedSelection = undefined; // Clear it to force getDOMSelection() retrieve the latest selection range
         var newRangeEx = editor.getDOMSelection() || undefined;
@@ -9932,7 +9952,7 @@ var CachePlugin = /** @class */ (function () {
         var isSelectionChanged = forceUpdate ||
             !cachedSelection ||
             !newRangeEx ||
-            !(0, areSameSelection_1.areSameSelection)(newRangeEx, cachedSelection);
+            !(0, areSameSelections_1.areSameSelections)(newRangeEx, cachedSelection);
         if (isSelectionChanged) {
             if (!model ||
                 !newRangeEx ||
@@ -9940,7 +9960,7 @@ var CachePlugin = /** @class */ (function () {
                 this.invalidateCache();
             }
             else {
-                (0, updateCachedSelection_1.updateCachedSelection)(this.state, newRangeEx);
+                (0, updateCache_1.updateCache)(this.state, model, newRangeEx);
             }
         }
         else {
@@ -9963,21 +9983,21 @@ exports.createCachePlugin = createCachePlugin;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelection.ts":
-/*!****************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelection.ts ***!
-  \****************************************************************************************/
+/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelections.ts":
+/*!*****************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/cache/areSameSelections.ts ***!
+  \*****************************************************************************************/
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.areSameSelection = void 0;
+exports.areSameRanges = exports.areSameTableSelections = exports.areSameSelections = void 0;
 /**
  * @internal
  * Check if the given selections are the same
  */
-function areSameSelection(sel1, sel2) {
+function areSameSelections(sel1, sel2) {
     if (sel1 == sel2) {
         return true;
     }
@@ -9985,22 +10005,56 @@ function areSameSelection(sel1, sel2) {
         case 'image':
             return sel2.type == 'image' && sel2.image == sel1.image;
         case 'table':
-            return (sel2.type == 'table' &&
-                sel2.table == sel1.table &&
-                sel2.firstColumn == sel1.firstColumn &&
-                sel2.lastColumn == sel1.lastColumn &&
-                sel2.firstRow == sel1.firstRow &&
-                sel2.lastRow == sel1.lastRow);
+            return sel2.type == 'table' && areSameTableSelections(sel1, sel2);
         case 'range':
         default:
-            return (sel2.type == 'range' &&
-                sel1.range.startContainer == sel2.start.node &&
-                sel1.range.endContainer == sel2.end.node &&
-                sel1.range.startOffset == sel2.start.offset &&
-                sel1.range.endOffset == sel2.end.offset);
+            if (sel2.type == 'range') {
+                var range1 = sel1.range;
+                if (isCacheSelection(sel2)) {
+                    var start = sel2.start, end = sel2.end;
+                    return (range1.startContainer == start.node &&
+                        range1.endContainer == end.node &&
+                        range1.startOffset == start.offset &&
+                        range1.endOffset == end.offset);
+                }
+                else {
+                    return areSameRanges(range1, sel2.range);
+                }
+            }
+            else {
+                return false;
+            }
     }
 }
-exports.areSameSelection = areSameSelection;
+exports.areSameSelections = areSameSelections;
+function areSame(o1, o2, keys) {
+    return keys.every(function (k) { return o1[k] == o2[k]; });
+}
+var TableSelectionKeys = [
+    'table',
+    'firstColumn',
+    'lastColumn',
+    'firstRow',
+    'lastRow',
+];
+var RangeKeys = ['startContainer', 'endContainer', 'startOffset', 'endOffset'];
+/**
+ * @internal
+ */
+function areSameTableSelections(t1, t2) {
+    return areSame(t1, t2, TableSelectionKeys);
+}
+exports.areSameTableSelections = areSameTableSelections;
+/**
+ * @internal
+ */
+function areSameRanges(r1, r2) {
+    return areSame(r1, r2, RangeKeys);
+}
+exports.areSameRanges = areSameRanges;
+function isCacheSelection(sel) {
+    return !!sel.start;
+}
 
 
 /***/ }),
@@ -10025,6 +10079,9 @@ function isIndexedSegment(node) {
         Array.isArray(paragraph.segments) &&
         Array.isArray(segments));
 }
+function getIndexedSegmentItem(node) {
+    return node && isIndexedSegment(node) ? node.__roosterjsContentModel : null;
+}
 /**
  * @internal
  * Implementation of DomIndexer
@@ -10048,9 +10105,7 @@ var DomIndexerImpl = /** @class */ (function () {
                     previousText = child;
                 }
                 else {
-                    var item = isIndexedSegment(previousText)
-                        ? previousText.__roosterjsContentModel
-                        : undefined;
+                    var item = getIndexedSegmentItem(previousText);
                     if (item && isIndexedSegment(child)) {
                         item.segments = item.segments.concat(child.__roosterjsContentModel.segments);
                         child.__roosterjsContentModel.segments = [];
@@ -10123,6 +10178,32 @@ var DomIndexerImpl = /** @class */ (function () {
         }
         return false;
     };
+    DomIndexerImpl.prototype.reconcileChildList = function (addedNodes, removedNodes) {
+        if (!this.persistCache) {
+            return false;
+        }
+        var canHandle = true;
+        var context = {
+            segIndex: -1,
+        };
+        // First process added nodes
+        var addedNode = addedNodes[0];
+        if (addedNodes.length == 1 && (0, roosterjs_content_model_dom_1.isNodeOfType)(addedNode, 'TEXT_NODE')) {
+            canHandle = this.reconcileAddedNode(addedNode, context);
+        }
+        else if (addedNodes.length > 0) {
+            canHandle = false;
+        }
+        // Second, process removed nodes
+        var removedNode = removedNodes[0];
+        if (canHandle && removedNodes.length == 1) {
+            canHandle = this.reconcileRemovedNode(removedNode, context);
+        }
+        else if (removedNodes.length > 0) {
+            canHandle = false;
+        }
+        return canHandle && !context.pendingTextNode;
+    };
     DomIndexerImpl.prototype.isCollapsed = function (selection) {
         var start = selection.start, end = selection.end;
         return start.node == end.node && start.offset == end.offset;
@@ -10140,8 +10221,9 @@ var DomIndexerImpl = /** @class */ (function () {
     };
     DomIndexerImpl.prototype.insertMarker = function (node, isAfter) {
         var marker;
-        if (node && isIndexedSegment(node)) {
-            var _a = node.__roosterjsContentModel, paragraph = _a.paragraph, segments = _a.segments;
+        var segmentItem = node && getIndexedSegmentItem(node);
+        if (segmentItem) {
+            var paragraph = segmentItem.paragraph, segments = segmentItem.segments;
             var index = paragraph.segments.indexOf(segments[0]);
             if (index >= 0) {
                 var formatSegment = (!isAfter && paragraph.segments[index - 1]) || paragraph.segments[index];
@@ -10211,6 +10293,88 @@ var DomIndexerImpl = /** @class */ (function () {
         }
         return selectable;
     };
+    DomIndexerImpl.prototype.reconcileAddedNode = function (node, context) {
+        var segmentItem = null;
+        var index = -1;
+        var existingSegment;
+        var previousSibling = node.previousSibling, nextSibling = node.nextSibling;
+        if ((segmentItem = getIndexedSegmentItem(previousSibling)) &&
+            (existingSegment = segmentItem.segments[segmentItem.segments.length - 1]) &&
+            (index = segmentItem.paragraph.segments.indexOf(existingSegment)) >= 0) {
+            // When we can find indexed segment before current one, use it as the insert index
+            this.indexNode(segmentItem.paragraph, index + 1, node, existingSegment.format);
+        }
+        else if ((segmentItem = getIndexedSegmentItem(nextSibling)) &&
+            (existingSegment = segmentItem.segments[0]) &&
+            (index = segmentItem.paragraph.segments.indexOf(existingSegment)) >= 0) {
+            // When we can find indexed segment after current one, use it as the insert index
+            this.indexNode(segmentItem.paragraph, index, node, existingSegment.format);
+        }
+        else if (context.paragraph && context.segIndex >= 0) {
+            // When there is indexed paragraph from removed nodes, we can use it as the insert index
+            this.indexNode(context.paragraph, context.segIndex, node, context.format);
+        }
+        else if (context.pendingTextNode === undefined) {
+            // When we can't find the insert index, set current node as pending node
+            // so later we can pick it up when we have enough info when processing removed node
+            // Only do this when pendingTextNode is undefined. If it is null it means there was already a pending node before
+            // and in that case we should return false since we can't handle two pending text node
+            context.pendingTextNode = node;
+        }
+        else {
+            return false;
+        }
+        return true;
+    };
+    DomIndexerImpl.prototype.reconcileRemovedNode = function (node, context) {
+        var segmentItem = null;
+        var removingSegment;
+        if (context.segIndex < 0 &&
+            !context.paragraph && // No previous removed segment or related paragraph found, and
+            (segmentItem = getIndexedSegmentItem(node)) && // The removed node is indexed, and
+            (removingSegment = segmentItem.segments[0]) // There is at least one related segment
+        ) {
+            // Now we can remove the indexed segment from the paragraph, and remember it, later we may need to use it
+            context.format = removingSegment.format;
+            context.paragraph = segmentItem.paragraph;
+            context.segIndex = segmentItem.paragraph.segments.indexOf(segmentItem.segments[0]);
+            if (context.segIndex < 0) {
+                // Indexed segment is not under paragraph, something wrong happens, we cannot keep handling
+                return false;
+            }
+            for (var i = 0; i < segmentItem.segments.length; i++) {
+                var index = segmentItem.paragraph.segments.indexOf(segmentItem.segments[i]);
+                if (index >= 0) {
+                    segmentItem.paragraph.segments.splice(index, 1);
+                }
+            }
+            if (context.pendingTextNode) {
+                // If we have pending text node added but not indexed, do it now
+                this.indexNode(context.paragraph, context.segIndex, context.pendingTextNode, segmentItem.segments[0].format);
+                // Set to null since we have processed it.
+                // Next time we see a pending node we know we have already processed one so it is a situation we cannot handle
+                context.pendingTextNode = null;
+            }
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    DomIndexerImpl.prototype.indexNode = function (paragraph, index, textNode, format) {
+        var _a;
+        var copiedFormat = format ? (0, tslib_1.__assign)({}, format) : undefined;
+        if (copiedFormat) {
+            (0, roosterjs_content_model_dom_1.getObjectKeys)(copiedFormat).forEach(function (key) {
+                if (roosterjs_content_model_dom_1.EmptySegmentFormat[key] === undefined) {
+                    delete copiedFormat[key];
+                }
+            });
+        }
+        var text = (0, roosterjs_content_model_dom_1.createText)((_a = textNode.textContent) !== null && _a !== void 0 ? _a : '', copiedFormat);
+        paragraph.segments.splice(index, 0, text);
+        this.onSegment(textNode, paragraph, [text]);
+    };
     return DomIndexerImpl;
 }());
 exports.DomIndexerImpl = DomIndexerImpl;
@@ -10234,11 +10398,59 @@ var TextMutationObserverImpl = /** @class */ (function () {
         this.contentDiv = contentDiv;
         this.onMutation = onMutation;
         this.onMutationInternal = function (mutations) {
-            var _a;
-            var firstTarget = (_a = mutations[0]) === null || _a === void 0 ? void 0 : _a.target;
-            if (firstTarget) {
-                var isTextChangeOnly = mutations.every(function (mutation) { return mutation.type == 'characterData' && mutation.target == firstTarget; });
-                _this.onMutation(isTextChangeOnly);
+            var canHandle = true;
+            var firstTarget = null;
+            var lastTextChangeNode = null;
+            var addedNodes = [];
+            var removedNodes = [];
+            var reconcileText = false;
+            for (var i = 0; i < mutations.length && canHandle; i++) {
+                var mutation = mutations[i];
+                switch (mutation.type) {
+                    case 'attributes':
+                        if (mutation.target != _this.contentDiv) {
+                            // We cannot handle attributes changes on editor content for now
+                            canHandle = false;
+                        }
+                        break;
+                    case 'characterData':
+                        if (lastTextChangeNode && lastTextChangeNode != mutation.target) {
+                            // Multiple text nodes got changed, we don't know how to handle it
+                            canHandle = false;
+                        }
+                        else {
+                            lastTextChangeNode = mutation.target;
+                            reconcileText = true;
+                        }
+                        break;
+                    case 'childList':
+                        if (!firstTarget) {
+                            firstTarget = mutation.target;
+                        }
+                        else if (firstTarget != mutation.target) {
+                            canHandle = false;
+                        }
+                        if (canHandle) {
+                            addedNodes = addedNodes.concat(Array.from(mutation.addedNodes));
+                            removedNodes = removedNodes.concat(Array.from(mutation.removedNodes));
+                        }
+                        break;
+                }
+            }
+            if (canHandle) {
+                if (addedNodes.length > 0 || removedNodes.length > 0) {
+                    _this.onMutation({
+                        type: 'childList',
+                        addedNodes: addedNodes,
+                        removedNodes: removedNodes,
+                    });
+                }
+                if (reconcileText) {
+                    _this.onMutation({ type: 'text' });
+                }
+            }
+            else {
+                _this.onMutation({ type: 'unknown' });
             }
         };
         this.observer = new MutationObserver(this.onMutationInternal);
@@ -10254,9 +10466,11 @@ var TextMutationObserverImpl = /** @class */ (function () {
     TextMutationObserverImpl.prototype.stopObserving = function () {
         this.observer.disconnect();
     };
-    TextMutationObserverImpl.prototype.flushMutations = function () {
+    TextMutationObserverImpl.prototype.flushMutations = function (ignoreMutations) {
         var mutations = this.observer.takeRecords();
-        this.onMutationInternal(mutations);
+        if (!ignoreMutations) {
+            this.onMutationInternal(mutations);
+        }
     };
     return TextMutationObserverImpl;
 }());
@@ -10271,20 +10485,21 @@ exports.createTextMutationObserver = createTextMutationObserver;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCachedSelection.ts":
-/*!*********************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCachedSelection.ts ***!
-  \*********************************************************************************************/
+/***/ "./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCache.ts":
+/*!***********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-core/lib/corePlugin/cache/updateCache.ts ***!
+  \***********************************************************************************/
 /***/ ((__unused_webpack_module, exports) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.updateCachedSelection = void 0;
+exports.updateCache = void 0;
 /**
  * @internal
  */
-function updateCachedSelection(state, selection) {
+function updateCache(state, model, selection) {
+    state.cachedModel = model;
     if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
         var _a = selection.range, startContainer = _a.startContainer, startOffset = _a.startOffset, endContainer = _a.endContainer, endOffset = _a.endOffset, isReverted = selection.isReverted;
         state.cachedSelection = {
@@ -10301,10 +10516,10 @@ function updateCachedSelection(state, selection) {
         };
     }
     else {
-        state.cachedSelection = selection;
+        state.cachedSelection = selection !== null && selection !== void 0 ? selection : undefined;
     }
 }
-exports.updateCachedSelection = updateCachedSelection;
+exports.updateCache = updateCache;
 
 
 /***/ }),
@@ -12204,7 +12419,6 @@ var isSingleImageInSelection_1 = __webpack_require__(/*! ./isSingleImageInSelect
 var normalizePos_1 = __webpack_require__(/*! ./normalizePos */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var MouseLeftButton = 0;
-var MouseMiddleButton = 1;
 var MouseRightButton = 2;
 var Up = 'ArrowUp';
 var Down = 'ArrowDown';
@@ -12319,16 +12533,17 @@ var SelectionPlugin = /** @class */ (function () {
                 var newSelection = _this.editor.getDOMSelection();
                 //If am image selection changed to a wider range due a keyboard event, we should update the selection
                 var selection = _this.editor.getDocument().getSelection();
-                if ((newSelection === null || newSelection === void 0 ? void 0 : newSelection.type) == 'image' && selection) {
-                    if (selection && !(0, isSingleImageInSelection_1.isSingleImageInSelection)(selection)) {
-                        var range = selection.getRangeAt(0);
-                        _this.editor.setDOMSelection({
-                            type: 'range',
-                            range: range,
-                            isReverted: selection.focusNode != range.endContainer ||
-                                selection.focusOffset != range.endOffset,
-                        });
-                    }
+                if ((newSelection === null || newSelection === void 0 ? void 0 : newSelection.type) == 'image' &&
+                    selection &&
+                    selection.focusNode &&
+                    !(0, isSingleImageInSelection_1.isSingleImageInSelection)(selection)) {
+                    var range = selection.getRangeAt(0);
+                    _this.editor.setDOMSelection({
+                        type: 'range',
+                        range: range,
+                        isReverted: selection.focusNode != range.endContainer ||
+                            selection.focusOffset != range.endOffset,
+                    });
                 }
                 // Safari has problem to handle onBlur event. When blur, we cannot get the original selection from editor.
                 // So we always save a selection whenever editor has focus. Then after blur, we can still use this cached selection.
@@ -12410,7 +12625,7 @@ var SelectionPlugin = /** @class */ (function () {
                 this.onMouseDown(this.editor, event.rawEvent);
                 break;
             case 'mouseUp':
-                this.onMouseUp(event);
+                this.onMouseUp();
                 break;
             case 'keyDown':
                 this.onKeyDown(this.editor, event.rawEvent);
@@ -12430,15 +12645,20 @@ var SelectionPlugin = /** @class */ (function () {
         var selection = editor.getDOMSelection();
         var image;
         // Image selection
-        if (rawEvent.button === MouseRightButton &&
-            (image =
-                (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
-            image.isContentEditable) {
-            this.selectImageWithRange(image, rawEvent);
-            return;
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+            (rawEvent.button == MouseLeftButton ||
+                (rawEvent.button == MouseRightButton &&
+                    !this.getClickingImage(rawEvent) &&
+                    !this.getContainedTargetImage(rawEvent, selection)))) {
+            this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/);
         }
-        else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== rawEvent.target) {
-            this.selectBeforeOrAfterElement(editor, selection.image);
+        if ((image =
+            (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
+            image.isContentEditable) {
+            this.setDOMSelection({
+                type: 'image',
+                image: image,
+            }, null);
             return;
         }
         // Table selection
@@ -12467,32 +12687,7 @@ var SelectionPlugin = /** @class */ (function () {
             });
         }
     };
-    SelectionPlugin.prototype.selectImageWithRange = function (image, event) {
-        var _a;
-        var range = image.ownerDocument.createRange();
-        range.selectNode(image);
-        var domSelection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-        if ((domSelection === null || domSelection === void 0 ? void 0 : domSelection.type) == 'image' && image == domSelection.image) {
-            event.preventDefault();
-        }
-        else {
-            this.setDOMSelection({
-                type: 'range',
-                isReverted: false,
-                range: range,
-            }, null);
-        }
-    };
-    SelectionPlugin.prototype.onMouseUp = function (event) {
-        var image;
-        if ((image = this.getClickingImage(event.rawEvent)) &&
-            image.isContentEditable &&
-            event.rawEvent.button != MouseMiddleButton &&
-            (event.rawEvent.button ==
-                MouseRightButton /* it's not possible to drag using right click */ ||
-                event.isClicking)) {
-            this.selectImageWithRange(image, event.rawEvent);
-        }
+    SelectionPlugin.prototype.onMouseUp = function () {
         this.detachMouseEvent();
     };
     SelectionPlugin.prototype.onKeyDown = function (editor, rawEvent) {
@@ -12570,6 +12765,7 @@ var SelectionPlugin = /** @class */ (function () {
                 return;
             }
             var lastCo = (0, findCoordinate_1.findCoordinate)(tableSel === null || tableSel === void 0 ? void 0 : tableSel.parsedTable, end, domHelper);
+            var tabMove = false;
             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)) {
@@ -12607,7 +12803,8 @@ var SelectionPlugin = /** @class */ (function () {
                         }
                         var cell = parsedTable[row][col];
                         if (typeof cell != 'string') {
-                            this.setRangeSelectionInTable(cell, 0, this.editor);
+                            tabMove = true;
+                            this.setRangeSelectionInTable(cell, 0, this.editor, true /* selectAll */);
                             lastCo.row = row;
                             lastCo.col = col;
                             break;
@@ -12625,18 +12822,23 @@ var SelectionPlugin = /** @class */ (function () {
                     (_f = this.editor) === null || _f === void 0 ? void 0 : _f.announce({ defaultStrings: 'announceOnFocusLastCell' });
                 }
             }
-            if (!collapsed && lastCo) {
+            if (!collapsed && lastCo && !tabMove) {
                 this.state.tableSelection = tableSel;
                 this.updateTableSelection(lastCo);
             }
         }
     };
-    SelectionPlugin.prototype.setRangeSelectionInTable = function (cell, nodeOffset, editor) {
-        // Get deepest editable position in the cell
-        var _a = (0, normalizePos_1.normalizePos)(cell, nodeOffset), node = _a.node, offset = _a.offset;
+    SelectionPlugin.prototype.setRangeSelectionInTable = function (cell, nodeOffset, editor, selectAll) {
         var range = editor.getDocument().createRange();
-        range.setStart(node, offset);
-        range.collapse(true /*toStart*/);
+        if (selectAll) {
+            range.selectNodeContents(cell);
+        }
+        else {
+            // Get deepest editable position in the cell
+            var _a = (0, normalizePos_1.normalizePos)(cell, nodeOffset), node = _a.node, offset = _a.offset;
+            range.setStart(node, offset);
+            range.collapse(true /* toStart */);
+        }
         this.setDOMSelection({
             type: 'range',
             range: range,
@@ -14613,6 +14815,36 @@ exports.ChangeSource = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/constants/EmptySegmentFormat.ts":
+/*!**********************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/constants/EmptySegmentFormat.ts ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.EmptySegmentFormat = void 0;
+/**
+ * Provide a default empty instance of segment format with all its properties
+ */
+exports.EmptySegmentFormat = {
+    backgroundColor: '',
+    fontFamily: '',
+    fontSize: '',
+    fontWeight: '',
+    italic: false,
+    letterSpacing: '',
+    lineHeight: '',
+    strikethrough: false,
+    superOrSubScriptSequence: '',
+    textColor: '',
+    underline: false,
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/constants/NumberingListType.ts":
@@ -17338,16 +17570,14 @@ var normalizeRect_1 = __webpack_require__(/*! ../normalizeRect */ "./packages/ro
  * @param pos The input DOM insert point
  */
 function getDOMInsertPointRect(doc, pos) {
-    var _a;
-    var node = pos.node, offset = pos.offset;
+    var _a, _b;
     var range = doc.createRange();
-    range.setStart(node, offset);
-    // 1) try to get rect using range.getBoundingClientRect()
-    var rect = (0, normalizeRect_1.normalizeRect)(range.getBoundingClientRect());
-    if (rect) {
-        return rect;
-    }
-    // 2) try to get rect using range.getClientRects
+    return ((_b = (_a = tryGetRectFromPos(pos, range)) !== null && _a !== void 0 ? _a : tryGetRectFromPos((pos = normalizeInsertPoint(pos)), range)) !== null && _b !== void 0 ? _b : tryGetRectFromNode(pos.node) // 3. fallback to node rect using getBoundingClientRect
+    );
+}
+exports.getDOMInsertPointRect = getDOMInsertPointRect;
+function normalizeInsertPoint(pos) {
+    var node = pos.node, offset = pos.offset;
     while (node.lastChild) {
         if (offset == node.childNodes.length) {
             node = node.lastChild;
@@ -17358,32 +17588,26 @@ function getDOMInsertPointRect(doc, pos) {
             offset = 0;
         }
     }
-    var rects = range.getClientRects && range.getClientRects();
-    rect = rects && rects.length == 1 ? (0, normalizeRect_1.normalizeRect)(rects[0]) : null;
+    return { node: node, offset: offset };
+}
+function tryGetRectFromPos(pos, range) {
+    var node = pos.node, offset = pos.offset;
+    range.setStart(node, offset);
+    range.setEnd(node, offset);
+    var rect = (0, normalizeRect_1.normalizeRect)(range.getBoundingClientRect());
     if (rect) {
         return rect;
     }
-    // 3) if node is text node, try inserting a SPAN and get the rect of SPAN for others
-    if ((0, isNodeOfType_1.isNodeOfType)(node, 'TEXT_NODE')) {
-        var span = node.ownerDocument.createElement('span');
-        span.textContent = '\u200b';
-        range.insertNode(span);
-        rect = (0, normalizeRect_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, isNodeOfType_1.isNodeOfType)(node, 'ELEMENT_NODE') && node.getBoundingClientRect) {
-        rect = (0, normalizeRect_1.normalizeRect)(node.getBoundingClientRect());
-        if (rect) {
-            return rect;
-        }
+    else {
+        var rects = range.getClientRects && range.getClientRects();
+        return rects && rects.length == 1 ? (0, normalizeRect_1.normalizeRect)(rects[0]) : null;
     }
-    return null;
 }
-exports.getDOMInsertPointRect = getDOMInsertPointRect;
+function tryGetRectFromNode(node) {
+    return (0, isNodeOfType_1.isNodeOfType)(node, 'ELEMENT_NODE') && node.getBoundingClientRect
+        ? (0, normalizeRect_1.normalizeRect)(node.getBoundingClientRect())
+        : null;
+}
 
 
 /***/ }),
@@ -19803,7 +20027,7 @@ exports.shouldSetValue = shouldSetValue;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 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.unwrap = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = 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.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.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = 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.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = void 0;
-exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = void 0;
+exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = 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");
@@ -20051,6 +20275,8 @@ var OrderedListStyleMap_1 = __webpack_require__(/*! ./constants/OrderedListStyle
 Object.defineProperty(exports, "OrderedListStyleMap", ({ enumerable: true, get: function () { return OrderedListStyleMap_1.OrderedListStyleMap; } }));
 var UnorderedListStyleMap_1 = __webpack_require__(/*! ./constants/UnorderedListStyleMap */ "./packages/roosterjs-content-model-dom/lib/constants/UnorderedListStyleMap.ts");
 Object.defineProperty(exports, "UnorderedListStyleMap", ({ enumerable: true, get: function () { return UnorderedListStyleMap_1.UnorderedListStyleMap; } }));
+var EmptySegmentFormat_1 = __webpack_require__(/*! ./constants/EmptySegmentFormat */ "./packages/roosterjs-content-model-dom/lib/constants/EmptySegmentFormat.ts");
+Object.defineProperty(exports, "EmptySegmentFormat", ({ enumerable: true, get: function () { return EmptySegmentFormat_1.EmptySegmentFormat; } }));
 
 
 /***/ }),
@@ -22374,27 +22600,14 @@ var createParagraph_1 = __webpack_require__(/*! ../creators/createParagraph */ "
 var createSelectionMarker_1 = __webpack_require__(/*! ../creators/createSelectionMarker */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createSelectionMarker.ts");
 var createTableCell_1 = __webpack_require__(/*! ../creators/createTableCell */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createTableCell.ts");
 var deleteSelection_1 = __webpack_require__(/*! ./deleteSelection */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/deleteSelection.ts");
+var EmptySegmentFormat_1 = __webpack_require__(/*! ../../constants/EmptySegmentFormat */ "./packages/roosterjs-content-model-dom/lib/constants/EmptySegmentFormat.ts");
 var getClosestAncestorBlockGroupIndex_1 = __webpack_require__(/*! ./getClosestAncestorBlockGroupIndex */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/getClosestAncestorBlockGroupIndex.ts");
 var getObjectKeys_1 = __webpack_require__(/*! ../..//domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
 var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var normalizeContentModel_1 = __webpack_require__(/*! ../common/normalizeContentModel */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeContentModel.ts");
 var normalizeTable_1 = __webpack_require__(/*! ./normalizeTable */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/normalizeTable.ts");
 var HeadingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-// An object to provide keys of required properties of segment format, do NOT use any of its values
-var RequiredEmptySegmentFormat = {
-    backgroundColor: null,
-    fontFamily: null,
-    fontSize: null,
-    fontWeight: null,
-    italic: null,
-    letterSpacing: null,
-    lineHeight: null,
-    strikethrough: null,
-    superOrSubScriptSequence: null,
-    textColor: null,
-    underline: null,
-};
-var KeysOfSegmentFormat = (0, getObjectKeys_1.getObjectKeys)(RequiredEmptySegmentFormat);
+var KeysOfSegmentFormat = (0, getObjectKeys_1.getObjectKeys)(EmptySegmentFormat_1.EmptySegmentFormat);
 /**
  * Merge source model into target mode
  * @param target Target Content Model that will merge content into
@@ -25688,8 +25901,7 @@ function removeUnnecessarySpan(root) {
     for (var child = root.firstChild; child;) {
         if ((0, isNodeOfType_1.isNodeOfType)(child, 'ELEMENT_NODE') &&
             child.tagName == 'SPAN' &&
-            child.attributes.length == 0 &&
-            !isImageSpan(child)) {
+            child.attributes.length == 0) {
             var node = child;
             var refNode = child.nextSibling;
             child = child.nextSibling;
@@ -25706,11 +25918,6 @@ 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);
-};
 
 
 /***/ }),
@@ -26120,7 +26327,7 @@ var getChangeSource = function (shouldList, shouldHyphen, shouldLink) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.transformHyphen = void 0;
-var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
@@ -26129,7 +26336,7 @@ function transformHyphen(previousSegment, paragraph, context) {
     var dashes = segments[segments.length - 2];
     if (dashes === '--') {
         var textIndex = previousSegment.text.lastIndexOf('--');
-        var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + 2);
+        var textSegment = (0, roosterjs_content_model_api_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + 2);
         textSegment.text = textSegment.text.replace('--', '—');
         context.canUndoByBackspace = true;
         return true;
@@ -26139,7 +26346,7 @@ function transformHyphen(previousSegment, paragraph, context) {
         var hasDashes = text && (text === null || text === void 0 ? void 0 : text.indexOf('--')) > -1;
         if (hasDashes && text.trim() !== '--') {
             var textIndex = previousSegment.text.indexOf(text);
-            var textSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + text.length - 1);
+            var textSegment = (0, roosterjs_content_model_api_1.splitTextSegment)(previousSegment, paragraph, textIndex, textIndex + text.length - 1);
             var textLength = textSegment.text.length;
             if (textSegment.text[0] !== '-' && textSegment.text[textLength - 1] !== '-') {
                 textSegment.text = textSegment.text.replace('--', '—');
@@ -26172,8 +26379,10 @@ var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-mo
  */
 function createLink(editor) {
     var anchorNode = null;
+    var links = [];
     (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (_model, linkSegment, _paragraph) {
         if (linkSegment.link) {
+            links.push(linkSegment.link);
             return true;
         }
         var linkData = null;
@@ -26185,13 +26394,16 @@ function createLink(editor) {
                 },
                 dataset: {},
             });
+            if (linkSegment.link) {
+                links.push(linkSegment.link);
+            }
             return true;
         }
         return false;
     }, {
         changeSource: roosterjs_content_model_dom_1.ChangeSource.AutoLink,
-        onNodeCreated: function (_modelElement, node) {
-            if (!anchorNode) {
+        onNodeCreated: function (modelElement, node) {
+            if (!anchorNode && links.indexOf(modelElement) >= 0) {
                 anchorNode = node;
             }
         },
@@ -26214,7 +26426,6 @@ exports.createLink = createLink;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createLinkAfterSpace = void 0;
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
-var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
@@ -26223,7 +26434,7 @@ function createLinkAfterSpace(previousSegment, paragraph, context) {
     var url = link === null || link === void 0 ? void 0 : link.trim();
     var linkData = null;
     if (url && link && (linkData = (0, roosterjs_content_model_api_1.matchLink)(url))) {
-        var linkSegment = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, previousSegment.text.length - link.trimLeft().length, previousSegment.text.trimRight().length);
+        var linkSegment = (0, roosterjs_content_model_api_1.splitTextSegment)(previousSegment, paragraph, previousSegment.text.length - link.trimLeft().length, previousSegment.text.trimRight().length);
         linkSegment.link = {
             format: {
                 href: linkData.normalizedUrl,
@@ -26358,7 +26569,7 @@ function getListTypeStyle(model, shouldSearchForBullet, shouldSearchForNumbering
         listMarkerSegment &&
         listMarkerSegment.segmentType == 'Text') {
         var listMarker = listMarkerSegment.text.trim();
-        var bulletType = bulletListType[listMarker];
+        var bulletType = bulletListType.get(listMarker);
         if (bulletType && shouldSearchForBullet) {
             return { listType: 'UL', styleType: bulletType };
         }
@@ -26409,16 +26620,16 @@ var getPreviousListStyle = function (list) {
         return (_a = (0, roosterjs_content_model_dom_1.updateListMetadata)(list.levels[0])) === null || _a === void 0 ? void 0 : _a.orderedStyleType;
     }
 };
-var bulletListType = {
-    '*': roosterjs_content_model_dom_1.BulletListType.Disc,
-    '-': roosterjs_content_model_dom_1.BulletListType.Dash,
-    '--': roosterjs_content_model_dom_1.BulletListType.Square,
-    '->': roosterjs_content_model_dom_1.BulletListType.LongArrow,
-    '-->': roosterjs_content_model_dom_1.BulletListType.DoubleLongArrow,
-    '=>': roosterjs_content_model_dom_1.BulletListType.UnfilledArrow,
-    '>': roosterjs_content_model_dom_1.BulletListType.ShortArrow,
-    '—': roosterjs_content_model_dom_1.BulletListType.Hyphen,
-};
+var bulletListType = new Map([
+    ['*', roosterjs_content_model_dom_1.BulletListType.Disc],
+    ['-', roosterjs_content_model_dom_1.BulletListType.Dash],
+    ['--', roosterjs_content_model_dom_1.BulletListType.Square],
+    ['->', roosterjs_content_model_dom_1.BulletListType.LongArrow],
+    ['-->', roosterjs_content_model_dom_1.BulletListType.DoubleLongArrow],
+    ['=>', roosterjs_content_model_dom_1.BulletListType.UnfilledArrow],
+    ['>', roosterjs_content_model_dom_1.BulletListType.ShortArrow],
+    ['—', roosterjs_content_model_dom_1.BulletListType.Hyphen],
+]);
 var isNewList = function (listMarker) {
     var marker = listMarker.replace(/[^\w\s]/g, '');
     var pattern = /^[1aAiI]$/;
@@ -26649,23 +26860,24 @@ var triggerList = function (model, listType, styleType, index) {
 
 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': '¾',
-};
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
+var FRACTIONS = new Map([
+    ['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 text = fraction ? FRACTIONS.get(fraction) : undefined;
+    if (fraction && text) {
         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];
+        var textSegment = (0, roosterjs_content_model_api_1.splitTextSegment)(previousSegment, paragraph, textIndex, textLength);
+        textSegment.text = text;
         context.canUndoByBackspace = true;
         return true;
     }
@@ -26686,7 +26898,7 @@ exports.transformFraction = transformFraction;
 
 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 roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var getOrdinal = function (value) {
     var ORDINALS = {
         1: 'st',
@@ -26705,7 +26917,7 @@ function transformOrdinals(previousSegment, paragraph, context) {
         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);
+            var ordinalSegment = (0, roosterjs_content_model_api_1.splitTextSegment)(previousSegment, paragraph, previousSegment.text.length - 3, previousSegment.text.length - 1);
             ordinalSegment.format.superOrSubScriptSequence = 'super';
             context.canUndoByBackspace = true;
             return true;
@@ -26926,6 +27138,9 @@ var keyboardTab_1 = __webpack_require__(/*! ./keyboardTab */ "./packages/rooster
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var BACKSPACE_KEY = 8;
 var DELETE_KEY = 46;
+var DefaultOptions = {
+    handleTabKey: true,
+};
 /**
  * Edit plugins helps editor to do editing operation on top of content model.
  * This includes:
@@ -26934,7 +27149,13 @@ var DELETE_KEY = 46;
  * 3. Tab Key
  */
 var EditPlugin = /** @class */ (function () {
-    function EditPlugin() {
+    /**
+     * @param options An optional parameter that takes in an object of type EditOptions, which includes the following properties:
+     * handleTabKey: A boolean that enables or disables Tab key handling. Defaults to true.
+     */
+    function EditPlugin(options) {
+        if (options === void 0) { options = DefaultOptions; }
+        this.options = options;
         this.editor = null;
         this.disposer = null;
         this.shouldHandleNextInputEvent = false;
@@ -27007,6 +27228,7 @@ var EditPlugin = /** @class */ (function () {
      */
     EditPlugin.prototype.willHandleEventExclusively = function (event) {
         if (this.editor &&
+            this.options.handleTabKey &&
             event.eventType == 'keyDown' &&
             event.rawEvent.key == 'Tab' &&
             !event.rawEvent.shiftKey) {
@@ -27048,7 +27270,9 @@ var EditPlugin = /** @class */ (function () {
                     }
                     break;
                 case 'Tab':
-                    (0, keyboardTab_1.keyboardTab)(editor, rawEvent);
+                    if (this.options.handleTabKey) {
+                        (0, keyboardTab_1.keyboardTab)(editor, rawEvent);
+                    }
                     break;
                 case 'Unidentified':
                     if (editor.getEnvironment().isAndroid) {
@@ -28707,8 +28931,10 @@ var canRegenerateImage_1 = __webpack_require__(/*! ./utils/canRegenerateImage */
 var imageEditUtils_1 = __webpack_require__(/*! ./utils/imageEditUtils */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/imageEditUtils.ts");
 var createImageWrapper_1 = __webpack_require__(/*! ./utils/createImageWrapper */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts");
 var cropperContext_1 = __webpack_require__(/*! ./Cropper/cropperContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Cropper/cropperContext.ts");
+var findEditingImage_1 = __webpack_require__(/*! ./utils/findEditingImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/findEditingImage.ts");
 var getDropAndDragHelpers_1 = __webpack_require__(/*! ./utils/getDropAndDragHelpers */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getDropAndDragHelpers.ts");
 var getHTMLImageOptions_1 = __webpack_require__(/*! ./utils/getHTMLImageOptions */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getHTMLImageOptions.ts");
+var getSelectedImage_1 = __webpack_require__(/*! ./utils/getSelectedImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedImage.ts");
 var updateImageEditInfo_1 = __webpack_require__(/*! ./utils/updateImageEditInfo */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateImageEditInfo.ts");
 var ImageEditElementClass_1 = __webpack_require__(/*! ./types/ImageEditElementClass */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageEditElementClass.ts");
 var resizerContext_1 = __webpack_require__(/*! ./Resizer/resizerContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/resizerContext.ts");
@@ -28723,9 +28949,9 @@ var DefaultOptions = {
     preserveRatio: true,
     disableRotate: false,
     disableSideResize: false,
-    onSelectState: 'resize',
+    onSelectState: ['resize', 'rotate'],
 };
-var IMAGE_EDIT_CHANGE_SOURCE = 'ImageEdit';
+var MouseRightButton = 2;
 /**
  * ImageEdit plugin handles the following image editing features:
  * - Resize image
@@ -28753,6 +28979,8 @@ var ImageEditPlugin = /** @class */ (function () {
         this.croppers = [];
         this.zoomScale = 1;
         this.disposer = null;
+        //EXPOSED FOR TEST ONLY
+        this.isEditing = false;
     }
     /**
      * Get name of this plugin
@@ -28772,7 +29000,9 @@ var ImageEditPlugin = /** @class */ (function () {
         this.disposer = editor.attachDomEvent({
             blur: {
                 beforeDispatch: function () {
-                    _this.formatImageWithContentModel(editor, true /* shouldSelectImage */, true /* shouldSelectAsImageSelection*/);
+                    if (_this.editor) {
+                        _this.applyFormatWithContentModel(_this.editor, _this.isCropMode, true /* shouldSelectImage */);
+                    }
                 },
             },
         });
@@ -28784,6 +29014,7 @@ var ImageEditPlugin = /** @class */ (function () {
      */
     ImageEditPlugin.prototype.dispose = function () {
         this.editor = null;
+        this.isEditing = false;
         this.cleanInfo();
         if (this.disposer) {
             this.disposer();
@@ -28796,16 +29027,145 @@ var ImageEditPlugin = /** @class */ (function () {
      * exclusively by another plugin.
      * @param event The event to handle:
      */
-    ImageEditPlugin.prototype.onPluginEvent = function (_event) { };
-    ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
-        var imageSpan = image.parentElement;
-        if (!imageSpan || (imageSpan && !(0, roosterjs_content_model_dom_1.isElementOfType)(imageSpan, 'span'))) {
+    ImageEditPlugin.prototype.onPluginEvent = function (event) {
+        if (!this.editor) {
             return;
         }
-        this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+        switch (event.eventType) {
+            case 'mouseUp':
+                this.mouseUpHandler(this.editor, event);
+                break;
+            case 'keyDown':
+                this.keyDownHandler(this.editor, event);
+                break;
+        }
+    };
+    ImageEditPlugin.prototype.isImageSelection = function (target) {
+        return ((0, roosterjs_content_model_dom_1.isNodeOfType)(target, 'ELEMENT_NODE') &&
+            ((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'img') ||
+                !!((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'span') &&
+                    target.firstElementChild &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(target.firstElementChild, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isElementOfType)(target.firstElementChild, 'img'))));
+    };
+    ImageEditPlugin.prototype.mouseUpHandler = function (editor, event) {
+        var selection = editor.getDOMSelection();
+        if ((selection && selection.type == 'image') || this.isEditing) {
+            var shouldSelectImage = this.isImageSelection(event.rawEvent.target) &&
+                event.rawEvent.button === MouseRightButton;
+            this.applyFormatWithContentModel(editor, this.isCropMode, shouldSelectImage);
+        }
+    };
+    //Sometimes the cursor can be inside the editing image and inside shadow dom, then the cursor need to moved out of shadow dom
+    ImageEditPlugin.prototype.selectBeforeEditingImage = function (editor, element) {
+        var parent = element.parentNode;
+        if (parent && (0, roosterjs_content_model_dom_1.isNodeOfType)(parent, 'ELEMENT_NODE') && parent.shadowRoot) {
+            element = parent;
+            parent = parent.parentNode;
+        }
+        var index = parent && (0, roosterjs_content_model_dom_1.toArray)(parent.childNodes).indexOf(element);
+        if (index !== null && index >= 0 && parent) {
+            var doc = editor.getDocument();
+            var range = doc.createRange();
+            range.setStart(parent, index);
+            range.collapse();
+            editor.setDOMSelection({
+                type: 'range',
+                range: range,
+                isReverted: false,
+            });
+        }
+    };
+    ImageEditPlugin.prototype.keyDownHandler = function (editor, event) {
+        if (this.isEditing) {
+            if (event.rawEvent.key === 'Escape') {
+                this.removeImageWrapper();
+            }
+            else {
+                var selection = editor.getDOMSelection();
+                var isImageSelection = (selection === null || selection === void 0 ? void 0 : selection.type) == 'image';
+                if (isImageSelection) {
+                    this.selectBeforeEditingImage(editor, selection.image);
+                }
+                this.applyFormatWithContentModel(editor, this.isCropMode, ((0, roosterjs_content_model_dom_1.isModifierKey)(event.rawEvent) || event.rawEvent.shiftKey) && isImageSelection //if it's a modifier key over a image, the image should select the image
+                );
+            }
+        }
+    };
+    ImageEditPlugin.prototype.applyFormatWithContentModel = function (editor, isCropMode, shouldSelectImage, isApiOperation) {
+        var _this = this;
+        var editingImageModel;
+        var selection = editor.getDOMSelection();
+        editor.formatContentModel(function (model) {
+            var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
+            var previousSelectedImage = isApiOperation
+                ? editingImage
+                : (0, findEditingImage_1.findEditingImage)(model);
+            var result = false;
+            if (shouldSelectImage ||
+                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) != (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image) ||
+                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.dataset.isEditing) ||
+                isApiOperation) {
+                var _a = _this, lastSrc_1 = _a.lastSrc, selectedImage_1 = _a.selectedImage, imageEditInfo_1 = _a.imageEditInfo, clonedImage_1 = _a.clonedImage;
+                if ((_this.isEditing || isApiOperation) &&
+                    previousSelectedImage &&
+                    lastSrc_1 &&
+                    selectedImage_1 &&
+                    imageEditInfo_1 &&
+                    clonedImage_1) {
+                    (0, roosterjs_content_model_dom_1.mutateSegment)(previousSelectedImage.paragraph, previousSelectedImage.image, function (image) {
+                        (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
+                        delete image.dataset.isEditing;
+                        image.isSelected = shouldSelectImage;
+                        image.isSelectedAsImageSelection = shouldSelectImage;
+                    });
+                    _this.cleanInfo();
+                    result = true;
+                }
+                _this.isEditing = false;
+                _this.isCropMode = false;
+                if (editingImage &&
+                    (selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                    !shouldSelectImage &&
+                    !isApiOperation) {
+                    _this.isEditing = true;
+                    _this.isCropMode = isCropMode;
+                    (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
+                        editingImageModel = image;
+                        _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
+                        image.dataset.isEditing = 'true';
+                    });
+                    result = true;
+                }
+            }
+            return result;
+        }, {
+            onNodeCreated: function (model, node) {
+                if (!isApiOperation &&
+                    editingImageModel &&
+                    editingImageModel == model &&
+                    editingImageModel.dataset.isEditing &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
+                    if (isCropMode) {
+                        _this.startCropMode(editor, node);
+                    }
+                    else {
+                        _this.startRotateAndResize(editor, node);
+                    }
+                }
+            },
+        }, {
+            tryGetFromCache: true,
+        });
+    };
+    ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
+        if (!this.imageEditInfo) {
+            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+        }
         this.lastSrc = image.getAttribute('src');
         this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
-        var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, imageSpan, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation || this.options.onSelectState), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
+        var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
         this.shadowSpan = shadowSpan;
         this.selectedImage = image;
         this.wrapper = wrapper;
@@ -28819,34 +29179,33 @@ var ImageEditPlugin = /** @class */ (function () {
             "span:has(>img#" + this.selectedImage.id + ")",
         ]);
     };
-    ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, apiOperation) {
+    ImageEditPlugin.prototype.startRotateAndResize = function (editor, image) {
         var _this = this;
         var _a;
-        if (this.wrapper && this.selectedImage && this.shadowSpan) {
-            this.removeImageWrapper();
-        }
-        this.startEditing(editor, image, apiOperation);
-        if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
-            this.dndHelpers = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.ResizeHandle, resizerContext_1.Resizer, function () {
-                if (_this.imageEditInfo &&
-                    _this.selectedImage &&
-                    _this.wrapper &&
-                    _this.clonedImage) {
-                    (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers);
-                    _this.wasImageResized = true;
-                }
-            }, this.zoomScale)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
-                var _a;
-                if (_this.imageEditInfo &&
-                    _this.selectedImage &&
-                    _this.wrapper &&
-                    _this.clonedImage) {
-                    (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.rotators);
-                    _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
-                }
-            }, this.zoomScale)), false);
-            (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
-            this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+        if (this.imageEditInfo) {
+            this.startEditing(editor, image, ['resize', 'rotate']);
+            if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
+                this.dndHelpers = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.ResizeHandle, resizerContext_1.Resizer, function () {
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers);
+                        _this.wasImageResized = true;
+                    }
+                }, this.zoomScale)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
+                    var _a;
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper);
+                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+                    }
+                }, this.zoomScale)), false);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
+                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+            }
         }
     };
     ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad) {
@@ -28862,49 +29221,52 @@ var ImageEditPlugin = /** @class */ (function () {
         }
     };
     ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
-        return operation === 'resize' || operation === 'rotate' || operation === 'flip';
+        return (operation === 'resize' ||
+            operation === 'rotate' ||
+            operation === 'flip' ||
+            operation === 'crop');
     };
     ImageEditPlugin.prototype.canRegenerateImage = function (image) {
         return (0, canRegenerateImage_1.canRegenerateImage)(image);
     };
-    ImageEditPlugin.prototype.cropImage = function () {
+    ImageEditPlugin.prototype.startCropMode = function (editor, image) {
         var _this = this;
-        var _a, _b;
-        var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-        if (!this.editor || !selection || selection.type !== 'image') {
+        if (this.imageEditInfo) {
+            this.startEditing(editor, image, ['crop']);
+            if (this.imageEditInfo && this.selectedImage && this.wrapper && this.clonedImage) {
+                this.dndHelpers = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.CropHandle, cropperContext_1.Cropper, function () {
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined, _this.croppers);
+                        _this.isCropMode = true;
+                    }
+                }, this.zoomScale)), false);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined, this.croppers);
+            }
+        }
+    };
+    ImageEditPlugin.prototype.cropImage = function () {
+        if (!this.editor) {
             return;
         }
-        var image = selection.image;
-        if (this.wrapper && this.selectedImage && this.shadowSpan) {
-            image = (_b = this.removeImageWrapper()) !== null && _b !== void 0 ? _b : image;
+        if (!this.editor.getEnvironment().isSafari) {
+            this.editor.focus(); // Safari will keep the selection when click crop, then the focus() call should not be called
         }
-        this.startEditing(this.editor, image, 'crop');
-        if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
-            return;
+        var selection = this.editor.getDOMSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+            this.applyFormatWithContentModel(this.editor, true /* isCropMode */, false /* shouldSelectImage */);
         }
-        this.dndHelpers = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.CropHandle, cropperContext_1.Cropper, function () {
-            if (_this.imageEditInfo &&
-                _this.selectedImage &&
-                _this.wrapper &&
-                _this.clonedImage) {
-                (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined, _this.croppers);
-                _this.isCropMode = true;
-            }
-        }, this.zoomScale)), false);
-        (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined, this.croppers);
     };
     ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
-        var _a;
-        if (this.wrapper && this.selectedImage && this.shadowSpan) {
-            image = (_a = this.removeImageWrapper()) !== null && _a !== void 0 ? _a : image;
-        }
         this.startEditing(editor, image, apiOperation);
         if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
             return;
         }
         operation(this.imageEditInfo);
         (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper);
-        this.formatImageWithContentModel(editor, true /* shouldSelect*/, true /* shouldSelectAsImageSelection*/);
+        this.applyFormatWithContentModel(editor, false /* isCrop */, true /* shouldSelect*/, true /* isApiOperation */);
     };
     ImageEditPlugin.prototype.cleanInfo = function () {
         var _a;
@@ -28924,42 +29286,6 @@ var ImageEditPlugin = /** @class */ (function () {
         this.rotators = [];
         this.croppers = [];
     };
-    ImageEditPlugin.prototype.formatImageWithContentModel = function (editor, shouldSelectImage, shouldSelectAsImageSelection) {
-        var _this = this;
-        if (this.lastSrc &&
-            this.selectedImage &&
-            this.imageEditInfo &&
-            this.clonedImage &&
-            this.shadowSpan) {
-            editor.formatContentModel(function (model) {
-                var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false);
-                if (!selectedSegmentsAndParagraphs[0]) {
-                    return false;
-                }
-                var segment = selectedSegmentsAndParagraphs[0][0];
-                var paragraph = selectedSegmentsAndParagraphs[0][1];
-                if (paragraph && segment.segmentType == 'Image') {
-                    (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
-                        if (_this.lastSrc &&
-                            _this.selectedImage &&
-                            _this.imageEditInfo &&
-                            _this.clonedImage) {
-                            (0, applyChange_1.applyChange)(editor, _this.selectedImage, image, _this.imageEditInfo, _this.lastSrc, _this.wasImageResized || _this.isCropMode, _this.clonedImage);
-                            image.isSelected = shouldSelectImage;
-                            image.isSelectedAsImageSelection = shouldSelectAsImageSelection;
-                        }
-                    });
-                    return true;
-                }
-                return false;
-            }, {
-                changeSource: IMAGE_EDIT_CHANGE_SOURCE,
-                onNodeCreated: function () {
-                    _this.cleanInfo();
-                },
-            });
-        }
-    };
     ImageEditPlugin.prototype.removeImageWrapper = function () {
         var image = null;
         if (this.shadowSpan && this.shadowSpan.parentElement) {
@@ -28982,7 +29308,7 @@ var ImageEditPlugin = /** @class */ (function () {
         }
         var image = selection.image;
         if (this.editor) {
-            this.editImage(this.editor, image, 'flip', function (imageEditInfo) {
+            this.editImage(this.editor, image, ['flip'], function (imageEditInfo) {
                 var angleRad = imageEditInfo.angleRad || 0;
                 var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
                     (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
@@ -29013,15 +29339,19 @@ var ImageEditPlugin = /** @class */ (function () {
         }
         var image = selection.image;
         if (this.editor) {
-            this.editImage(this.editor, image, 'rotate', function (imageEditInfo) {
+            this.editImage(this.editor, image, [], function (imageEditInfo) {
                 imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
             });
         }
     };
-    //EXPOSED FOR TEST ONLY
-    ImageEditPlugin.prototype.getWrapper = function () {
-        return this.wrapper;
-    };
+    Object.defineProperty(ImageEditPlugin.prototype, "isEditingImage", {
+        //EXPOSED FOR TEST ONLY
+        get: function () {
+            return this.isEditing;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return ImageEditPlugin;
 }());
 exports.ImageEditPlugin = ImageEditPlugin;
@@ -29586,7 +29916,8 @@ var updateImageEditInfo_1 = __webpack_require__(/*! ./updateImageEditInfo */ "./
 function applyChange(editor, image, contentModelImage, editInfo, previousSrc, wasResizedOrCropped, editingImage) {
     var _a;
     var newSrc = '';
-    var initEditInfo = (_a = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, editingImage !== null && editingImage !== void 0 ? editingImage : image)) !== null && _a !== void 0 ? _a : undefined;
+    var imageEditing = editingImage !== null && editingImage !== void 0 ? editingImage : image;
+    var initEditInfo = (_a = (0, updateImageEditInfo_1.updateImageEditInfo)(contentModelImage, imageEditing)) !== null && _a !== void 0 ? _a : undefined;
     var state = (0, checkEditInfoState_1.checkEditInfoState)(editInfo, initEditInfo);
     switch (state) {
         case 'ResizeOnly':
@@ -29618,12 +29949,12 @@ function applyChange(editor, image, contentModelImage, editInfo, previousSrc, wa
     if (newSrc == editInfo.src) {
         // If newSrc is the same with original one, it means there is only size change, but no rotation, no cropping,
         // so we don't need to keep edit info, we can delete it
-        (0, updateImageEditInfo_1.updateImageEditInfo)(contentModelImage, null);
+        (0, updateImageEditInfo_1.updateImageEditInfo)(contentModelImage, imageEditing, null);
     }
     else {
         // Otherwise, save the new edit info to the image so that next time when we edit the same image, we know
         // the edit info
-        (0, updateImageEditInfo_1.updateImageEditInfo)(contentModelImage, editInfo);
+        (0, updateImageEditInfo_1.updateImageEditInfo)(contentModelImage, imageEditing, editInfo);
     }
     // Write back the change to image, and set its new size
     var generatedImageSize = (0, generateImageSize_1.getGeneratedImageSize)(editInfo);
@@ -29634,11 +29965,6 @@ function applyChange(editor, image, contentModelImage, editInfo, previousSrc, wa
     if (wasResizedOrCropped || state == 'FullyChanged') {
         contentModelImage.format.width = generatedImageSize.targetWidth + 'px';
         contentModelImage.format.height = generatedImageSize.targetHeight + 'px';
-        // Remove width/height style so that it won't affect the image size, since style width/height has higher priority
-        image.style.removeProperty('width');
-        image.style.removeProperty('height');
-        image.style.removeProperty('max-width');
-        image.style.removeProperty('max-height');
     }
 }
 exports.applyChange = applyChange;
@@ -29765,25 +30091,27 @@ exports.createImageWrapper = void 0;
 var createImageCropper_1 = __webpack_require__(/*! ../Cropper/createImageCropper */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Cropper/createImageCropper.ts");
 var createImageResizer_1 = __webpack_require__(/*! ../Resizer/createImageResizer */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/createImageResizer.ts");
 var createImageRotator_1 = __webpack_require__(/*! ../Rotator/createImageRotator */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/createImageRotator.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
  */
-function createImageWrapper(editor, image, imageSpan, options, editInfo, htmlOptions, operation) {
+function createImageWrapper(editor, image, options, editInfo, htmlOptions, operation) {
     var imageClone = cloneImage(image, editInfo);
     var doc = editor.getDocument();
     var rotators = [];
-    if (!options.disableRotate && operation === 'rotate') {
+    if (!options.disableRotate && operation.indexOf('rotate') > -1) {
         rotators = (0, createImageRotator_1.createImageRotator)(doc, htmlOptions);
     }
     var resizers = [];
-    if (operation === 'resize') {
+    if (operation.indexOf('resize') > -1) {
         resizers = (0, createImageResizer_1.createImageResizer)(doc);
     }
     var croppers = [];
-    if (operation === 'crop') {
+    if (operation.indexOf('crop') > -1) {
         croppers = (0, createImageCropper_1.createImageCropper)(doc);
     }
     var wrapper = createWrapper(editor, imageClone, options, editInfo, resizers, rotators, croppers);
+    var imageSpan = (0, roosterjs_content_model_dom_1.wrap)(doc, image, 'span');
     var shadowSpan = createShadowSpan(wrapper, imageSpan);
     return { wrapper: wrapper, shadowSpan: shadowSpan, imageClone: imageClone, resizers: resizers, rotators: rotators, croppers: croppers };
 }
@@ -29803,8 +30131,10 @@ var createWrapper = function (editor, image, options, editInfo, resizers, rotato
     var imageBox = doc.createElement('div');
     imageBox.setAttribute("style", "position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);");
     imageBox.appendChild(image);
-    wrapper.setAttribute('style', "max-width: 100%; position: relative; display: inline-flex; font-size: 24px; margin: 0px; transform: rotate(" + ((_a = editInfo.angleRad) !== null && _a !== void 0 ? _a : 0) + "rad); text-align: left;");
-    wrapper.style.display = editor.getEnvironment().isSafari ? 'inline-block' : 'inline-flex';
+    wrapper.setAttribute('style', "font-size: 24px; margin: 0px; transform: rotate(" + ((_a = editInfo.angleRad) !== null && _a !== void 0 ? _a : 0) + "rad);");
+    wrapper.style.display = editor.getEnvironment().isSafari
+        ? '-webkit-inline-flex'
+        : 'inline-flex';
     var border = createBorder(editor, options.borderColor);
     wrapper.appendChild(imageBox);
     wrapper.appendChild(border);
@@ -29893,6 +30223,59 @@ function doubleCheckResize(editInfo, preserveRatio, actualWidth, actualHeight) {
 exports.doubleCheckResize = doubleCheckResize;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/findEditingImage.ts":
+/*!******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/findEditingImage.ts ***!
+  \******************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.findEditingImage = void 0;
+/**
+ * @internal
+ */
+function findEditingImage(group) {
+    for (var i = 0; i < group.blocks.length; i++) {
+        var block = group.blocks[i];
+        switch (block.blockType) {
+            case 'BlockGroup':
+                var result = findEditingImage(block);
+                if (result) {
+                    return result;
+                }
+                break;
+            case 'Paragraph':
+                for (var j = 0; j < block.segments.length; j++) {
+                    var segment = block.segments[j];
+                    switch (segment.segmentType) {
+                        case 'Image':
+                            if (segment.dataset.isEditing) {
+                                return {
+                                    paragraph: block,
+                                    image: segment,
+                                };
+                            }
+                            break;
+                        case 'General':
+                            var result_1 = findEditingImage(segment);
+                            if (result_1) {
+                                return result_1;
+                            }
+                            break;
+                    }
+                }
+                break;
+        }
+    }
+    return null;
+}
+exports.findEditingImage = findEditingImage;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateDataURL.ts":
@@ -30077,28 +30460,33 @@ exports.getHTMLImageOptions = getHTMLImageOptions;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedContentModelImage.ts":
-/*!******************************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedContentModelImage.ts ***!
-  \******************************************************************************************************/
+/***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedImage.ts":
+/*!******************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedImage.ts ***!
+  \******************************************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.getSelectedContentModelImage = void 0;
+exports.getSelectedImage = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
  */
-function getSelectedContentModelImage(model) {
-    var selectedSegments = (0, roosterjs_content_model_dom_1.getSelectedSegments)(model, false /*includeFormatHolder*/);
-    if (selectedSegments.length == 1 && selectedSegments[0].segmentType == 'Image') {
-        return selectedSegments[0];
+function getSelectedImage(model) {
+    var selections = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false);
+    if (selections.length == 1 && selections[0][0].segmentType == 'Image' && selections[0][1]) {
+        return {
+            image: selections[0][0],
+            paragraph: selections[0][1],
+        };
+    }
+    else {
+        return null;
     }
-    return null;
 }
-exports.getSelectedContentModelImage = getSelectedContentModelImage;
+exports.getSelectedImage = getSelectedImage;
 
 
 /***/ }),
@@ -30270,18 +30658,19 @@ exports.updateHandleCursor = updateHandleCursor;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getSelectedImageMetadata = exports.updateImageEditInfo = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var getSelectedContentModelImage_1 = __webpack_require__(/*! ./getSelectedContentModelImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedContentModelImage.ts");
+var getSelectedImage_1 = __webpack_require__(/*! ./getSelectedImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedImage.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
  * @internal
  */
-function updateImageEditInfo(contentModelImage, newImageMetadata) {
-    (0, roosterjs_content_model_dom_1.updateImageMetadata)(contentModelImage, newImageMetadata !== undefined
+function updateImageEditInfo(contentModelImage, image, newImageMetadata) {
+    var contentModelMetadata = (0, roosterjs_content_model_dom_1.updateImageMetadata)(contentModelImage, newImageMetadata !== undefined
         ? function (format) {
             format = newImageMetadata;
             return format;
         }
         : undefined);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, getInitialEditInfo(image)), contentModelMetadata);
 }
 exports.updateImageEditInfo = updateImageEditInfo;
 function getInitialEditInfo(image) {
@@ -30305,9 +30694,12 @@ function getInitialEditInfo(image) {
 function getSelectedImageMetadata(editor, image) {
     var imageMetadata = getInitialEditInfo(image);
     editor.formatContentModel(function (model) {
-        var selectedImage = (0, getSelectedContentModelImage_1.getSelectedContentModelImage)(model);
-        if (selectedImage) {
-            imageMetadata = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, imageMetadata), selectedImage.dataset);
+        var selectedImage = (0, getSelectedImage_1.getSelectedImage)(model);
+        if (selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.image) {
+            (0, roosterjs_content_model_dom_1.mutateSegment)(selectedImage.paragraph, selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.image, function (modelImage) {
+                imageMetadata = updateImageEditInfo(modelImage, image);
+            });
+            return true;
         }
         return false;
     });
@@ -30387,7 +30779,7 @@ function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers,
         (0, imageEditUtils_1.setSize)(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);
         (0, imageEditUtils_1.setSize)(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);
         (0, imageEditUtils_1.setSize)(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);
-        if (angleRad) {
+        if (angleRad !== undefined) {
             (0, updateHandleCursor_1.updateHandleCursor)(croppers, angleRad);
         }
     }
@@ -30404,7 +30796,7 @@ function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers,
             }
         })
             .filter(function (handle) { return !!handle; });
-        if (angleRad) {
+        if (angleRad !== undefined) {
             (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
         }
         (0, updateSideHandlesVisibility_1.updateSideHandlesVisibility)(resizeHandles, smallImage);
@@ -30687,7 +31079,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setFormat = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
-var splitTextSegment_1 = __webpack_require__(/*! ../../pluginUtils/splitTextSegment */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts");
 /**
  * @internal
  */
@@ -30702,7 +31093,7 @@ function setFormat(editor, character, format, codeFormat) {
                     .substring(0, lastCharIndex - 1)
                     .lastIndexOf(character);
                 if (lastCharIndex - firstCharIndex > 2) {
-                    var formattedText = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, firstCharIndex, lastCharIndex);
+                    var formattedText = (0, roosterjs_content_model_api_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) {
@@ -32511,7 +32902,7 @@ exports.PickerPlugin = PickerPlugin;
 
 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");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 /**
  * @internal
  */
@@ -32528,7 +32919,7 @@ function getQueryString(triggerCharacter, paragraph, previousSegment, splittedSe
         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)
+                ? (0, roosterjs_content_model_api_1.splitTextSegment)(segment, paragraph, index, segment.text.length)
                 : segment);
             break;
         }
@@ -32794,42 +33185,6 @@ function getIntersectedRect(elements, additionalRects) {
 exports.getIntersectedRect = getIntersectedRect;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts":
-/*!**************************************************************************************!*\
-  !*** ./packages/roosterjs-content-model-plugins/lib/pluginUtils/splitTextSegment.ts ***!
-  \**************************************************************************************/
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.splitTextSegment = 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 splitTextSegment(textSegment, parent, start, end) {
-    var _a;
-    var text = textSegment.text;
-    var index = parent.segments.indexOf(textSegment);
-    var middleSegment = (0, roosterjs_content_model_dom_1.createText)(text.substring(start, end), textSegment.format, textSegment.link, textSegment.code);
-    var newSegments = [middleSegment];
-    if (start > 0) {
-        newSegments.unshift((0, roosterjs_content_model_dom_1.createText)(text.substring(0, start), textSegment.format, textSegment.link, textSegment.code));
-    }
-    if (end < text.length) {
-        newSegments.push((0, roosterjs_content_model_dom_1.createText)(text.substring(end), textSegment.format, textSegment.link, textSegment.code));
-    }
-    newSegments.forEach(function (segment) { return (segment.isSelected = textSegment.isSelected); });
-    (_a = parent.segments).splice.apply(_a, (0, tslib_1.__spreadArray)([index, 1], (0, tslib_1.__read)(newSegments), false));
-    return middleSegment;
-}
-exports.splitTextSegment = splitTextSegment;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/shortcut/ShortcutPlugin.ts":
@@ -33517,8 +33872,10 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableInserter();
             _this.disposeCellResizers();
         };
-        this.onEndTableMove = function () {
-            _this.disposeTableMover();
+        this.onEndTableMove = function (disposeHandler) {
+            if (disposeHandler) {
+                _this.disposeTableMover();
+            }
             return _this.onFinishEditing();
         };
         this.onInserted = function () {
@@ -34292,9 +34649,9 @@ function onDragEnd(context, event, initValue) {
     // Reset cursor
     setTableMoverCursor(editor, false);
     if (element == context.div) {
-        // Table mover was only clicked, select whole table
+        // Table mover was only clicked, select whole table and do not dismiss the handler element.
         selectWholeTable(table);
-        context.onEnd();
+        context.onEnd(false /* disposeHandler */);
         return true;
     }
     else {
@@ -34303,7 +34660,7 @@ function onDragEnd(context, event, initValue) {
             !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();
+            context.onEnd(true /* disposeHandler */);
             return false;
         }
         var insertionSuccess_1 = false;
@@ -34361,7 +34718,7 @@ function onDragEnd(context, event, initValue) {
             // 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();
+        context.onEnd(true /* disposeHandler */);
         return insertionSuccess_1;
     }
 }
@@ -34619,6 +34976,7 @@ exports.getCMTableFromTable = getCMTableFromTable;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.WatermarkPlugin = 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 isModelEmptyFast_1 = __webpack_require__(/*! ./isModelEmptyFast */ "./packages/roosterjs-content-model-plugins/lib/watermark/isModelEmptyFast.ts");
 var WATERMARK_CONTENT_KEY = '_WatermarkContent';
@@ -34639,6 +34997,7 @@ var WatermarkPlugin = /** @class */ (function () {
         this.watermark = watermark;
         this.editor = null;
         this.isShowing = false;
+        this.darkTextColor = null;
         this.format = format || {
             fontSize: '14px',
             textColor: '#AAAAAA',
@@ -34678,6 +35037,21 @@ var WatermarkPlugin = /** @class */ (function () {
             // When input text, editor must not be empty, so we can do hide watermark now without checking content model
             this.showHide(editor, false /*isEmpty*/);
         }
+        else if (event.eventType == 'contentChanged' &&
+            (event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToDarkMode ||
+                event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToLightMode) &&
+            this.isShowing) {
+            // When the placeholder is shown and user switches the mode, we need to update watermark style
+            if (event.source == roosterjs_content_model_dom_1.ChangeSource.SwitchToDarkMode &&
+                !this.darkTextColor &&
+                this.format.textColor) {
+                // Get the dark color only once when dark mode is enabled for the first time
+                this.darkTextColor = editor
+                    .getColorManager()
+                    .getDarkColor(this.format.textColor, undefined, 'text');
+            }
+            this.applyWatermarkStyle(editor);
+        }
         else if (event.eventType == 'editorReady' ||
             event.eventType == 'contentChanged' ||
             event.eventType == 'input' ||
@@ -34698,15 +35072,18 @@ var WatermarkPlugin = /** @class */ (function () {
         }
     };
     WatermarkPlugin.prototype.show = function (editor) {
-        var _this = this;
+        this.applyWatermarkStyle(editor);
+        this.isShowing = true;
+    };
+    WatermarkPlugin.prototype.applyWatermarkStyle = function (editor) {
         var rule = "position: absolute; pointer-events: none; content: \"" + this.watermark + "\";";
+        var format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this.format), { textColor: editor.isDarkMode() ? this.darkTextColor : this.format.textColor });
         (0, roosterjs_content_model_dom_1.getObjectKeys)(styleMap).forEach(function (x) {
-            if (_this.format[x]) {
-                rule += styleMap[x] + ": " + _this.format[x] + "!important;";
+            if (format[x]) {
+                rule += styleMap[x] + ": " + format[x] + "!important;";
             }
         });
         editor.setEditorStyle(WATERMARK_CONTENT_KEY, rule, 'before');
-        this.isShowing = true;
     };
     WatermarkPlugin.prototype.hide = function (editor) {
         editor.setEditorStyle(WATERMARK_CONTENT_KEY, null);