roosterjs 8.35.2 → 8.37.0

package/dist/rooster.js

@@ -2155,12 +2155,14 @@ Object.defineProperty(exports, "getDarkColor", { enumerable: true, get: function
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var Color = __webpack_require__(/*! color */ "./node_modules/color/index.js");
-var baseLValue = 21.247; // L-value of #333333
+var DefaultBaseLValue = 21.247; // L-value of #333333
 /**
  * Get dark mode color for a given color
  * @param color The color to calculate from
+ * @param baseLValue The Light value for base dark color in LAB format. @default the Light value for #333333
  */
-function getDarkColor(color) {
+function getDarkColor(color, baseLValue) {
+    if (baseLValue === void 0) { baseLValue = DefaultBaseLValue; }
     try {
         var computedColor = Color(color || undefined);
         var colorLab = computedColor.lab().array();
@@ -3084,8 +3086,7 @@ function setAlignment(editor, alignment) {
         var selection = editor.getSelectionRangeEx();
         var isATable = selection && selection.type === 1 /* TableSelection */;
         var elementAtCursor = editor.getElementAtCursor();
-        if (editor.isFeatureEnabled("TableAlignment" /* TableAlignment */) &&
-            isATable &&
+        if (isATable &&
             (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
             alignTable(selection, alignment);
         }
@@ -4196,7 +4197,9 @@ function applyInlineStyle(editor, callback, apiName) {
         else if (editor.isFeatureEnabled("PendingStyleBasedFormat" /* PendingStyleBasedFormat */)) {
             editor.triggerPluginEvent(13 /* PendingFormatStateChanged */, {
                 formatState: {},
-                formatCallback: safeCallback,
+                // Here we use callback instead of safeCallback because we know it's contentEditable.
+                // In addition, for elements that are not added to the DOM tree, isContentEditable always returns false on Safari.
+                formatCallback: callback,
             });
             editor.triggerContentChangedEvent("Format" /* Format */);
         }
@@ -5097,7 +5100,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * When typing goes directly under content div, many things can go wrong
  * We fix it by wrapping it with a div and reposition cursor within the div
  */
-var ensureTypeInContainer = function (core, position, keyboardEvent) {
+var ensureTypeInContainer = function (core, position, keyboardEvent, applyFormatToSpan) {
     var table = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(position.node, core.contentDiv, 'table');
     var td;
     if (table && (td = table.querySelector('td,th'))) {
@@ -5118,20 +5121,28 @@ var ensureTypeInContainer = function (core, position, keyboardEvent) {
         var shouldSetNodeStyles = (0, roosterjs_editor_dom_1.isNodeEmpty)(formatNode) ||
             (keyboardEvent && wasNodeJustCreatedByKeyboardEvent(keyboardEvent, formatNode));
         formatNode = formatNode && shouldSetNodeStyles ? formatNode : null;
+        if (formatNode && core.lifecycle.defaultFormat && applyFormatToSpan) {
+            var firstChild = formatNode.firstChild;
+            formatNode = (0, roosterjs_editor_dom_1.safeInstanceOf)(firstChild, 'HTMLSpanElement')
+                ? firstChild
+                : (0, roosterjs_editor_dom_1.wrap)((0, roosterjs_editor_dom_1.toArray)(formatNode.childNodes), 'span');
+            position = new roosterjs_editor_dom_1.Position(formatNode, 0 /* Begin */);
+        }
     }
     else {
         // Only reason we don't get the selection block is that we have an empty content div
         // which can happen when users removes everything (i.e. select all and DEL, or backspace from very end to begin)
         // The fix is to add a DIV wrapping, apply default format and move cursor over
-        formatNode = (0, roosterjs_editor_dom_1.createElement)(1 /* EmptyLine */, core.contentDiv.ownerDocument);
-        core.api.insertNode(core, formatNode, {
+        var newNode = (0, roosterjs_editor_dom_1.createElement)(1 /* EmptyLine */, core.contentDiv.ownerDocument);
+        core.api.insertNode(core, newNode, {
             position: 1 /* End */,
             updateCursor: false,
             replaceSelection: false,
             insertOnNewLine: false,
         });
+        formatNode = newNode.firstChild;
         // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
-        position = new roosterjs_editor_dom_1.Position(formatNode.firstChild, 0 /* Begin */);
+        position = new roosterjs_editor_dom_1.Position(formatNode, 0 /* Begin */);
     }
     if (formatNode && core.lifecycle.defaultFormat) {
         (0, roosterjs_editor_dom_1.applyFormat)(formatNode, core.lifecycle.defaultFormat, core.lifecycle.isDarkMode);
@@ -5850,7 +5861,6 @@ exports.restoreUndoSnapshot = restoreUndoSnapshot;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectImage = void 0;
-var addSelectionStyle_1 = __webpack_require__(/*! ./utils/addSelectionStyle */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts");
 var addUniqueId_1 = __webpack_require__(/*! ./utils/addUniqueId */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var IMAGE_ID = 'imageSelected';
@@ -5885,7 +5895,7 @@ exports.selectImage = selectImage;
 var select = function (core, image) {
     (0, roosterjs_editor_dom_1.removeImportantStyleRule)(image, ['border', 'margin']);
     var borderCSS = buildBorderCSS(core, image.id);
-    (0, addSelectionStyle_1.default)(core, borderCSS, STYLE_ID);
+    (0, roosterjs_editor_dom_1.setGlobalCssStyles)(core.contentDiv.ownerDocument, borderCSS, STYLE_ID + core.contentDiv.id);
 };
 var buildBorderCSS = function (core, imageId) {
     var divId = core.contentDiv.id;
@@ -5894,10 +5904,7 @@ var buildBorderCSS = function (core, imageId) {
 };
 var unselect = function (core) {
     var doc = core.contentDiv.ownerDocument;
-    var styleTag = doc.getElementById(STYLE_ID + core.contentDiv.id);
-    if (styleTag) {
-        doc.head.removeChild(styleTag);
-    }
+    (0, roosterjs_editor_dom_1.removeGlobalCssStyle)(doc, STYLE_ID + core.contentDiv.id);
 };
 
 
@@ -5979,7 +5986,6 @@ function restorePendingFormatState(core) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectTable = void 0;
-var addSelectionStyle_1 = __webpack_require__(/*! ./utils/addSelectionStyle */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts");
 var addUniqueId_1 = __webpack_require__(/*! ./utils/addUniqueId */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var TABLE_ID = 'tableSelected';
@@ -6080,19 +6086,13 @@ function buildCss(table, coordinates, contentDivSelector) {
 function select(core, table, coordinates) {
     var contentDivSelector = '#' + core.contentDiv.id;
     var _a = buildCss(table, coordinates, contentDivSelector), css = _a.css, ranges = _a.ranges;
-    (0, addSelectionStyle_1.default)(core, css, STYLE_ID);
+    (0, roosterjs_editor_dom_1.setGlobalCssStyles)(core.contentDiv.ownerDocument, css, STYLE_ID + core.contentDiv.id);
     return ranges;
 }
-function unselect(core) {
-    var _a;
-    var div = core.contentDiv;
-    var styleElement = div.ownerDocument.getElementById(STYLE_ID + div.id);
-    if ((_a = styleElement === null || styleElement === void 0 ? void 0 : styleElement.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
-        while (styleElement.sheet.cssRules.length > 0) {
-            styleElement.sheet.deleteRule(0);
-        }
-    }
-}
+var unselect = function (core) {
+    var doc = core.contentDiv.ownerDocument;
+    (0, roosterjs_editor_dom_1.removeGlobalCssStyle)(doc, STYLE_ID + core.contentDiv.id);
+};
 function generateCssFromCell(contentDivSelector, tableId, middleElSelector, rowIndex, cellTag, index) {
     return (contentDivSelector +
         ' #' +
@@ -6229,7 +6229,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 var switchShadowEdit = function (core, isOn) {
     var lifecycle = core.lifecycle, contentDiv = core.contentDiv;
-    var shadowEditFragment = lifecycle.shadowEditFragment, shadowEditSelectionPath = lifecycle.shadowEditSelectionPath, shadowEditTableSelectionPath = lifecycle.shadowEditTableSelectionPath, shadowEditImageSelectionPath = lifecycle.shadowEditImageSelectionPath;
+    var shadowEditEntities = lifecycle.shadowEditEntities, shadowEditFragment = lifecycle.shadowEditFragment, shadowEditSelectionPath = lifecycle.shadowEditSelectionPath, shadowEditTableSelectionPath = lifecycle.shadowEditTableSelectionPath, shadowEditImageSelectionPath = lifecycle.shadowEditImageSelectionPath;
     var wasInShadowEdit = !!shadowEditFragment;
     var getShadowEditSelectionPath = function (selectionType, shadowEditSelection) {
         return (((shadowEditSelection === null || shadowEditSelection === void 0 ? void 0 : shadowEditSelection.type) == selectionType &&
@@ -6244,10 +6244,9 @@ var switchShadowEdit = function (core, isOn) {
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             shadowEditSelectionPath = range && (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range);
             shadowEditTableSelectionPath = getShadowEditSelectionPath(1 /* TableSelection */, selection);
-            shadowEditFragment = core.contentDiv.ownerDocument.createDocumentFragment();
             shadowEditImageSelectionPath = getShadowEditSelectionPath(2 /* ImageSelection */, selection);
-            (0, roosterjs_editor_dom_1.moveChildNodes)(shadowEditFragment, contentDiv);
-            shadowEditFragment.normalize();
+            shadowEditEntities = {};
+            shadowEditFragment = (0, roosterjs_editor_dom_1.moveContentWithEntityPlaceholders)(contentDiv, shadowEditEntities);
             core.api.triggerEvent(core, {
                 eventType: 17 /* EnteredShadowEdit */,
                 fragment: shadowEditFragment,
@@ -6257,22 +6256,22 @@ var switchShadowEdit = function (core, isOn) {
             lifecycle.shadowEditSelectionPath = shadowEditSelectionPath;
             lifecycle.shadowEditTableSelectionPath = shadowEditTableSelectionPath;
             lifecycle.shadowEditImageSelectionPath = shadowEditImageSelectionPath;
+            lifecycle.shadowEditEntities = shadowEditEntities;
         }
-        (0, roosterjs_editor_dom_1.moveChildNodes)(contentDiv);
         if (lifecycle.shadowEditFragment) {
-            contentDiv.appendChild(lifecycle.shadowEditFragment.cloneNode(true /*deep*/));
+            (0, roosterjs_editor_dom_1.restoreContentWithEntityPlaceholder)(lifecycle.shadowEditFragment, contentDiv, lifecycle.shadowEditEntities, true /*insertClonedNode*/);
         }
     }
     else {
         lifecycle.shadowEditFragment = null;
         lifecycle.shadowEditSelectionPath = null;
+        lifecycle.shadowEditEntities = null;
         if (wasInShadowEdit) {
             core.api.triggerEvent(core, {
                 eventType: 18 /* LeavingShadowEdit */,
             }, false /*broadcast*/);
-            (0, roosterjs_editor_dom_1.moveChildNodes)(contentDiv);
             if (shadowEditFragment) {
-                contentDiv.appendChild(shadowEditFragment);
+                (0, roosterjs_editor_dom_1.restoreContentWithEntityPlaceholder)(shadowEditFragment, contentDiv, shadowEditEntities);
             }
             core.api.focus(core);
             if (shadowEditSelectionPath) {
@@ -6487,39 +6486,6 @@ function handledExclusively(event, plugin) {
 }
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts":
-/*!*******************************************************************************!*\
-  !*** ./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts ***!
-  \*******************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Add style to selected elements
- * @param core The Editor core object
- * @param cssRule The css rule that must added to the selection
- * @param styleId the ID of the style tag
- */
-function addSelectionStyle(core, cssRule, styleId) {
-    var _a;
-    var styleTagId = styleId + core.contentDiv.id;
-    var doc = core.contentDiv.ownerDocument;
-    var styleTag = doc.getElementById(styleTagId);
-    if (!styleTag) {
-        styleTag = doc.createElement('style');
-        styleTag.id = styleTagId;
-        doc.head.appendChild(styleTag);
-    }
-    (_a = styleTag.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(cssRule);
-}
-exports.default = addSelectionStyle;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts":
@@ -6672,6 +6638,9 @@ var CopyPastePlugin = /** @class */ (function () {
                     var image = tempDiv_1.querySelector('#' + selection_1.image.id);
                     if (image) {
                         newRange = (0, roosterjs_editor_dom_1.createRange)(image);
+                        if (isCut) {
+                            this.deleteImage(this.editor, selection_1.image.id);
+                        }
                     }
                 }
                 else {
@@ -6781,6 +6750,11 @@ var CopyPastePlugin = /** @class */ (function () {
             table.style.removeProperty('height');
         }
     };
+    CopyPastePlugin.prototype.deleteImage = function (editor, imageId) {
+        editor.queryElements('#' + imageId, function (node) {
+            editor.deleteNode(node);
+        });
+    };
     return CopyPastePlugin;
 }());
 exports.default = CopyPastePlugin;
@@ -7480,6 +7454,95 @@ var workaroundSelectionIssueForIE = roosterjs_editor_dom_1.Browser.isIE
     : function () { };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts":
+/*!**************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts ***!
+  \**************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var Escape = 'Escape';
+var mouseRightButton = 2;
+var mouseLeftButton = 0;
+/**
+ * Detect image selection and help highlight the image
+ */
+var ImageSelection = /** @class */ (function () {
+    function ImageSelection() {
+        this.editor = null;
+    }
+    /**
+     * Get a friendly name of  this plugin
+     */
+    ImageSelection.prototype.getName = function () {
+        return 'ImageSelection';
+    };
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    ImageSelection.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
+    /**
+     * Dispose this plugin
+     */
+    ImageSelection.prototype.dispose = function () {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(null);
+        this.editor = null;
+    };
+    ImageSelection.prototype.onPluginEvent = function (event) {
+        var _a;
+        if (this.editor) {
+            switch (event.eventType) {
+                case 17 /* EnteredShadowEdit */:
+                case 18 /* LeavingShadowEdit */:
+                    var selection = this.editor.getSelectionRangeEx();
+                    if (selection.type == 2 /* ImageSelection */) {
+                        this.editor.select(selection.image);
+                    }
+                    break;
+                case 6 /* MouseUp */:
+                    var target = event.rawEvent.target;
+                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement')) {
+                        if (event.rawEvent.button === mouseRightButton) {
+                            var imageRange = (0, roosterjs_editor_dom_1.createRange)(target);
+                            this.editor.select(imageRange);
+                        }
+                        else if (event.rawEvent.button === mouseLeftButton) {
+                            this.editor.select(target);
+                        }
+                    }
+                    break;
+                case 2 /* KeyUp */:
+                    var key = event.rawEvent.key;
+                    var keyDownSelection = this.editor.getSelectionRangeEx();
+                    if (keyDownSelection.type === 2 /* ImageSelection */) {
+                        if (key === Escape) {
+                            this.editor.select(keyDownSelection.image, -2 /* Before */);
+                            (_a = this.editor.getSelectionRange()) === null || _a === void 0 ? void 0 : _a.collapse();
+                            event.rawEvent.stopPropagation();
+                        }
+                        else {
+                            this.editor.select(keyDownSelection.ranges[0]);
+                        }
+                    }
+                    break;
+            }
+        }
+    };
+    return ImageSelection;
+}());
+exports.default = ImageSelection;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts":
@@ -7570,6 +7633,7 @@ var LifecyclePlugin = /** @class */ (function () {
             onExternalContentTransform: (_c = options.onExternalContentTransform) !== null && _c !== void 0 ? _c : null,
             experimentalFeatures: options.experimentalFeatures || [],
             shadowEditFragment: null,
+            shadowEditEntities: null,
             shadowEditSelectionPath: null,
             shadowEditTableSelectionPath: null,
             shadowEditImageSelectionPath: null,
@@ -8422,6 +8486,7 @@ var CopyPastePlugin_1 = __webpack_require__(/*! ./CopyPastePlugin */ "./packages
 var DOMEventPlugin_1 = __webpack_require__(/*! ./DOMEventPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts");
 var EditPlugin_1 = __webpack_require__(/*! ./EditPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/EditPlugin.ts");
 var EntityPlugin_1 = __webpack_require__(/*! ./EntityPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/EntityPlugin.ts");
+var ImageSelection_1 = __webpack_require__(/*! ./ImageSelection */ "./packages/roosterjs-editor-core/lib/corePlugins/ImageSelection.ts");
 var LifecyclePlugin_1 = __webpack_require__(/*! ./LifecyclePlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts");
 var MouseUpPlugin_1 = __webpack_require__(/*! ./MouseUpPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/MouseUpPlugin.ts");
 var NormalizeTablePlugin_1 = __webpack_require__(/*! ./NormalizeTablePlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/NormalizeTablePlugin.ts");
@@ -8449,6 +8514,7 @@ function createCorePlugins(contentDiv, options) {
         mouseUp: map.mouseUp || new MouseUpPlugin_1.default(),
         copyPaste: map.copyPaste || new CopyPastePlugin_1.default(options),
         entity: map.entity || new EntityPlugin_1.default(),
+        imageSelection: map.imageSelection || new ImageSelection_1.default(),
         normalizeTable: map.normalizeTable || new NormalizeTablePlugin_1.default(),
         lifecycle: map.lifecycle || new LifecyclePlugin_1.default(options, contentDiv),
     };
@@ -8894,9 +8960,7 @@ var Editor = /** @class */ (function () {
                 coordinates: arg2,
             };
         }
-        else if (this.isFeatureEnabled("ImageSelection" /* ImageSelection */) &&
-            (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLImageElement') &&
-            typeof arg2 == 'undefined') {
+        else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLImageElement') && typeof arg2 == 'undefined') {
             rangeEx = {
                 type: 2 /* ImageSelection */,
                 ranges: [],
@@ -11211,6 +11275,143 @@ function commitEntity(wrapper, type, isReadonly, id) {
 exports.default = commitEntity;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/entity/entityPlaceholderUtils.ts":
+/*!****************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/entity/entityPlaceholderUtils.ts ***!
+  \****************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.restoreContentWithEntityPlaceholder = exports.moveContentWithEntityPlaceholders = exports.createEntityPlaceholder = void 0;
+var getEntityFromElement_1 = __webpack_require__(/*! ./getEntityFromElement */ "./packages/roosterjs-editor-dom/lib/entity/getEntityFromElement.ts");
+var getEntitySelector_1 = __webpack_require__(/*! ./getEntitySelector */ "./packages/roosterjs-editor-dom/lib/entity/getEntitySelector.ts");
+var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
+var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+var EntityPlaceHolderTagName = 'ENTITY-PLACEHOLDER';
+/**
+ * Create a placeholder comment node for entity
+ * @param entity The entity to create placeholder from
+ * @returns A placeholder comment node as
+ */
+function createEntityPlaceholder(entity) {
+    var placeholder = entity.wrapper.ownerDocument.createElement(EntityPlaceHolderTagName);
+    placeholder.id = entity.id;
+    return placeholder;
+}
+exports.createEntityPlaceholder = createEntityPlaceholder;
+/**
+ * Move content from a container into a new Document fragment, and try keep entities to be reusable by creating placeholder
+ * for them in the document fragment.
+ * If an entity is directly under root container, the whole entity can be reused and no need to move it at all.
+ * If an entity is not directly under root container, it is still reusable, but it may need some movement.
+ * In any case, entities will be replaced with a placeholder in the target document fragment.
+ * We will use an entity map (the "entities" parameter) to save the map from entity id to its wrapper element.
+ * @param root The root element
+ * @param entities A map from entity id to entity wrapper element
+ * @returns A new document fragment contains all the content and entity placeholders
+ */
+function moveContentWithEntityPlaceholders(root, entities) {
+    var entitySelector = (0, getEntitySelector_1.default)();
+    var fragment = root.ownerDocument.createDocumentFragment();
+    var next = null;
+    var _loop_1 = function (child) {
+        var entity;
+        var nodeToAppend = child;
+        next = child.nextSibling;
+        if ((0, safeInstanceOf_1.default)(child, 'HTMLElement')) {
+            if ((entity = (0, getEntityFromElement_1.default)(child))) {
+                nodeToAppend = getPlaceholder(entity, entities);
+            }
+            else {
+                child.querySelectorAll(entitySelector).forEach(function (wrapper) {
+                    var _a;
+                    if ((entity = (0, getEntityFromElement_1.default)(wrapper))) {
+                        var placeholder = getPlaceholder(entity, entities);
+                        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(placeholder, wrapper);
+                    }
+                });
+            }
+        }
+        fragment.appendChild(nodeToAppend);
+    };
+    for (var child = root.firstChild; child; child = next) {
+        _loop_1(child);
+    }
+    fragment.normalize();
+    return fragment;
+}
+exports.moveContentWithEntityPlaceholders = moveContentWithEntityPlaceholders;
+/**
+ * Restore HTML content from a document fragment that may contain entity placeholders.
+ * @param source Source document fragment that contains HTML content and entity placeholders
+ * @param target Target container, usually to be editor root container
+ * @param entities A map from entity id to entity wrapper, used for reusing existing DOM structure for entity
+ * @param insertClonedNode When pass true, merge with a cloned copy of the nodes from source fragment rather than the nodes themselves @default false
+ */
+function restoreContentWithEntityPlaceholder(source, target, entities, insertClonedNode) {
+    var anchor = target.firstChild;
+    entities = entities || {};
+    var _loop_2 = function (current) {
+        var wrapper = null;
+        var next = current.nextSibling;
+        var id = tryGetIdFromEntityPlaceholder(current);
+        if (id && (wrapper = entities[current.id])) {
+            anchor = removeUntil(anchor, wrapper);
+            if (anchor) {
+                anchor = anchor.nextSibling;
+            }
+            else {
+                target.appendChild(wrapper);
+            }
+        }
+        else {
+            var nodeToInsert = insertClonedNode ? current.cloneNode(true /*deep*/) : current;
+            target.insertBefore(nodeToInsert, anchor);
+            if ((0, safeInstanceOf_1.default)(nodeToInsert, 'HTMLElement')) {
+                nodeToInsert.querySelectorAll(EntityPlaceHolderTagName).forEach(function (placeholder) {
+                    var _a;
+                    wrapper = entities[placeholder.id];
+                    if (wrapper) {
+                        (_a = placeholder.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(wrapper, placeholder);
+                    }
+                });
+            }
+        }
+        current = next;
+        out_current_1 = current;
+    };
+    var out_current_1;
+    for (var current = source.firstChild; current;) {
+        _loop_2(current);
+        current = out_current_1;
+    }
+    removeUntil(anchor);
+}
+exports.restoreContentWithEntityPlaceholder = restoreContentWithEntityPlaceholder;
+function removeUntil(anchor, nodeToStop) {
+    var _a;
+    while (anchor && (!nodeToStop || anchor != nodeToStop)) {
+        var nodeToRemove = anchor;
+        anchor = anchor.nextSibling;
+        (_a = nodeToRemove.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(nodeToRemove);
+    }
+    return anchor;
+}
+function tryGetIdFromEntityPlaceholder(node) {
+    return (0, getTagOfNode_1.default)(node) == EntityPlaceHolderTagName ? node.id : null;
+}
+function getPlaceholder(entity, entities) {
+    var placeholder = createEntityPlaceholder(entity);
+    entities[entity.id] = entity.wrapper;
+    return placeholder;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/entity/getEntityFromElement.ts":
@@ -12262,8 +12463,8 @@ exports.isCssVariable = isCssVariable;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getIntersectedRect = exports.moveChildNodes = exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
-exports.adjustInsertPosition = exports.removeImportantStyleRule = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.saveTableCellMetadata = exports.getTableFormatInfo = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = exports.VTable = exports.isNodeAfter = void 0;
-exports.toArray = exports.getObjectKeys = exports.arrayPush = exports.removeMetadata = exports.setMetadata = exports.getMetadata = exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = exports.createBooleanDefinition = exports.createNumberDefinition = exports.validate = exports.getTextContent = exports.deleteSelectedContent = void 0;
+exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.restoreContentWithEntityPlaceholder = exports.moveContentWithEntityPlaceholders = exports.createEntityPlaceholder = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.saveTableCellMetadata = exports.getTableFormatInfo = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = exports.VTable = exports.isNodeAfter = void 0;
+exports.toArray = exports.getObjectKeys = exports.arrayPush = exports.removeMetadata = exports.setMetadata = exports.getMetadata = exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = exports.createBooleanDefinition = exports.createNumberDefinition = exports.validate = exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.removeGlobalCssStyle = exports.setGlobalCssStyles = exports.removeImportantStyleRule = exports.setStyles = void 0;
 var getBlockElementAtNode_1 = __webpack_require__(/*! ./blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
 Object.defineProperty(exports, "getBlockElementAtNode", { enumerable: true, get: function () { return getBlockElementAtNode_1.default; } });
 var getFirstLastBlockElement_1 = __webpack_require__(/*! ./blockElements/getFirstLastBlockElement */ "./packages/roosterjs-editor-dom/lib/blockElements/getFirstLastBlockElement.ts");
@@ -12435,6 +12636,10 @@ var getEntityFromElement_1 = __webpack_require__(/*! ./entity/getEntityFromEleme
 Object.defineProperty(exports, "getEntityFromElement", { enumerable: true, get: function () { return getEntityFromElement_1.default; } });
 var getEntitySelector_1 = __webpack_require__(/*! ./entity/getEntitySelector */ "./packages/roosterjs-editor-dom/lib/entity/getEntitySelector.ts");
 Object.defineProperty(exports, "getEntitySelector", { enumerable: true, get: function () { return getEntitySelector_1.default; } });
+var entityPlaceholderUtils_1 = __webpack_require__(/*! ./entity/entityPlaceholderUtils */ "./packages/roosterjs-editor-dom/lib/entity/entityPlaceholderUtils.ts");
+Object.defineProperty(exports, "createEntityPlaceholder", { enumerable: true, get: function () { return entityPlaceholderUtils_1.createEntityPlaceholder; } });
+Object.defineProperty(exports, "moveContentWithEntityPlaceholders", { enumerable: true, get: function () { return entityPlaceholderUtils_1.moveContentWithEntityPlaceholders; } });
+Object.defineProperty(exports, "restoreContentWithEntityPlaceholder", { enumerable: true, get: function () { return entityPlaceholderUtils_1.restoreContentWithEntityPlaceholder; } });
 var cacheGetEventData_1 = __webpack_require__(/*! ./event/cacheGetEventData */ "./packages/roosterjs-editor-dom/lib/event/cacheGetEventData.ts");
 Object.defineProperty(exports, "cacheGetEventData", { enumerable: true, get: function () { return cacheGetEventData_1.default; } });
 var clearEventDataCache_1 = __webpack_require__(/*! ./event/clearEventDataCache */ "./packages/roosterjs-editor-dom/lib/event/clearEventDataCache.ts");
@@ -12451,6 +12656,10 @@ var setStyles_1 = __webpack_require__(/*! ./style/setStyles */ "./packages/roost
 Object.defineProperty(exports, "setStyles", { enumerable: true, get: function () { return setStyles_1.default; } });
 var removeImportantStyleRule_1 = __webpack_require__(/*! ./style/removeImportantStyleRule */ "./packages/roosterjs-editor-dom/lib/style/removeImportantStyleRule.ts");
 Object.defineProperty(exports, "removeImportantStyleRule", { enumerable: true, get: function () { return removeImportantStyleRule_1.default; } });
+var setGlobalCssStyles_1 = __webpack_require__(/*! ./style/setGlobalCssStyles */ "./packages/roosterjs-editor-dom/lib/style/setGlobalCssStyles.ts");
+Object.defineProperty(exports, "setGlobalCssStyles", { enumerable: true, get: function () { return setGlobalCssStyles_1.default; } });
+var removeGlobalCssStyle_1 = __webpack_require__(/*! ./style/removeGlobalCssStyle */ "./packages/roosterjs-editor-dom/lib/style/removeGlobalCssStyle.ts");
+Object.defineProperty(exports, "removeGlobalCssStyle", { enumerable: true, get: function () { return removeGlobalCssStyle_1.default; } });
 var adjustInsertPosition_1 = __webpack_require__(/*! ./edit/adjustInsertPosition */ "./packages/roosterjs-editor-dom/lib/edit/adjustInsertPosition.ts");
 Object.defineProperty(exports, "adjustInsertPosition", { enumerable: true, get: function () { return adjustInsertPosition_1.default; } });
 var deleteSelectedContent_1 = __webpack_require__(/*! ./edit/deleteSelectedContent */ "./packages/roosterjs-editor-dom/lib/edit/deleteSelectedContent.ts");
@@ -13811,6 +14020,17 @@ function createListChainName() {
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -13824,6 +14044,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListStyleDefinitionMetadata = void 0;
 var contains_1 = __webpack_require__(/*! ../utils/contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
 var getListTypeFromNode_1 = __webpack_require__(/*! ./getListTypeFromNode */ "./packages/roosterjs-editor-dom/lib/list/getListTypeFromNode.ts");
+var getStyles_1 = __webpack_require__(/*! ../style/getStyles */ "./packages/roosterjs-editor-dom/lib/style/getStyles.ts");
 var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
 var isBlockElement_1 = __webpack_require__(/*! ../utils/isBlockElement */ "./packages/roosterjs-editor-dom/lib/utils/isBlockElement.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
@@ -13831,6 +14052,7 @@ var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./pac
 var setBulletListMarkers_1 = __webpack_require__(/*! ./setBulletListMarkers */ "./packages/roosterjs-editor-dom/lib/list/setBulletListMarkers.ts");
 var setListItemStyle_1 = __webpack_require__(/*! ./setListItemStyle */ "./packages/roosterjs-editor-dom/lib/list/setListItemStyle.ts");
 var setNumberingListMarkers_1 = __webpack_require__(/*! ./setNumberingListMarkers */ "./packages/roosterjs-editor-dom/lib/list/setNumberingListMarkers.ts");
+var setStyles_1 = __webpack_require__(/*! ../style/setStyles */ "./packages/roosterjs-editor-dom/lib/style/setStyles.ts");
 var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
@@ -13840,6 +14062,8 @@ var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
 var unorderedListStyles = ['disc', 'circle', 'square'];
 var MARGIN_BASE = '0in 0in 0in 0.5in';
 var NEGATIVE_MARGIN = '-.25in';
+var stylesToInherit = ['font-size', 'font-family', 'color'];
+var attrsToInherit = ['data-ogsc', 'data-ogsb', 'data-ogac', 'data-ogab'];
 /**
  * @internal
  * The definition for the number of BulletListType or NumberingListType
@@ -14038,6 +14262,7 @@ var VListItem = /** @class */ (function () {
      *              sure the direct parent of this list matches the list types when writing back.
      */
     VListItem.prototype.writeBack = function (listStack, originalRoot, shouldReuseAllAncestorListElements) {
+        var _this = this;
         var _a;
         if (shouldReuseAllAncestorListElements === void 0) { shouldReuseAllAncestorListElements = false; }
         var nextLevel = 1;
@@ -14096,12 +14321,43 @@ var VListItem = /** @class */ (function () {
         this.node.style.setProperty('display', this.dummy ? 'block' : null);
         // 4. Inherit styles of the child element to the li, so we are able to apply the styles to the ::marker
         if (this.listTypes.length > 1) {
-            var stylesToInherit = ['font-size', 'font-family', 'color'];
-            (0, setListItemStyle_1.default)(this.node, stylesToInherit);
+            (0, setListItemStyle_1.default)(this.node, stylesToInherit, true /*isCssStyle*/);
+            (0, setListItemStyle_1.default)(this.node, attrsToInherit, false /*isCssStyle*/);
         }
         // 5. If this is not a list item now, need to unwrap the LI node and do proper handling
         if (this.listTypes.length <= 1) {
-            wrapIfNotBlockNode((0, getTagOfNode_1.default)(this.node) == 'LI' ? getChildrenAndUnwrap(this.node) : [this.node], true /*checkFirst*/, true /*checkLast*/);
+            // If original <LI> node has styles for font and color, we need to apply it to new parent
+            var isLi = (0, getTagOfNode_1.default)(this.node) == 'LI';
+            var stylesToApply = isLi
+                ? {
+                    'font-family': this.node.style.fontFamily,
+                    'font-size': this.node.style.fontSize,
+                    color: this.node.style.color,
+                }
+                : undefined;
+            var childNodes = isLi ? getChildrenAndUnwrap(this.node) : [this.node];
+            if (stylesToApply) {
+                var _loop_1 = function (i) {
+                    if ((0, safeInstanceOf_1.default)(childNodes[i], 'Text')) {
+                        childNodes[i] = (0, wrap_1.default)(childNodes[i], 'span');
+                    }
+                    var node = childNodes[i];
+                    if ((0, safeInstanceOf_1.default)(node, 'HTMLElement')) {
+                        var styles = __assign(__assign({}, stylesToApply), (0, getStyles_1.default)(node));
+                        (0, setStyles_1.default)(node, styles);
+                        attrsToInherit.forEach(function (attr) {
+                            var attrValue = _this.node.getAttribute(attr);
+                            if (attrValue) {
+                                node.setAttribute(attr, attrValue);
+                            }
+                        });
+                    }
+                };
+                for (var i = 0; i < childNodes.length; i++) {
+                    _loop_1(i);
+                }
+            }
+            wrapIfNotBlockNode(childNodes, true /*checkFirst*/, true /*checkLast*/);
         }
     };
     /**
@@ -14548,18 +14804,17 @@ var bulletListStyle = (_a = {},
 Object.defineProperty(exports, "__esModule", { value: true });
 var ContentTraverser_1 = __webpack_require__(/*! ../contentTraverser/ContentTraverser */ "./packages/roosterjs-editor-dom/lib/contentTraverser/ContentTraverser.ts");
 var findClosestElementAncestor_1 = __webpack_require__(/*! ../utils/findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
-var getStyles_1 = __webpack_require__(/*! ../style/getStyles */ "./packages/roosterjs-editor-dom/lib/style/getStyles.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
-var setStyles_1 = __webpack_require__(/*! ../style/setStyles */ "./packages/roosterjs-editor-dom/lib/style/setStyles.ts");
 /**
  * Set the Style of a List Item provided, with the styles that the inline child elements have
  * If the child inline elements have different styles, it will not modify the styles of the list item
  * @param element the LI Element to set the styles
  * @param styles The styles that should be applied to the element.
+ * @param isCssStyle True means the given styles are CSS style names, false means they are HTML attributes @default true
  */
-function setListItemStyle(element, styles) {
-    var elementsStyles = getInlineChildElementsStyle(element, styles);
-    var stylesToApply = (0, getStyles_1.default)(element);
+function setListItemStyle(element, styles, isCssStyle) {
+    if (isCssStyle === void 0) { isCssStyle = true; }
+    var elementsStyles = getInlineChildElementsStyle(element, styles, isCssStyle);
     styles.forEach(function (styleName) {
         var styleValues = elementsStyles.map(function (style) {
             return style[styleName] !== undefined ? style[styleName] : '';
@@ -14567,39 +14822,53 @@ function setListItemStyle(element, styles) {
         if (styleValues &&
             (styleValues.length == 1 || new Set(styleValues).size == 1) &&
             styleValues[0]) {
-            stylesToApply[styleName] = styleValues[0];
+            if (isCssStyle) {
+                element.style.setProperty(styleName, styleValues[0]);
+            }
+            else {
+                element.setAttribute(styleName, styleValues[0]);
+            }
         }
     });
-    (0, setStyles_1.default)(element, stylesToApply);
 }
 exports.default = setListItemStyle;
-function getInlineChildElementsStyle(element, styles) {
-    var _a;
+function getInlineChildElementsStyle(element, styles, isCssStyle) {
+    var _a, _b;
     var result = [];
     var contentTraverser = ContentTraverser_1.default.createBodyTraverser(element);
     var currentInlineElement = null;
     var _loop_1 = function () {
         currentInlineElement = contentTraverser.currentInlineElement;
         var currentNode = (currentInlineElement === null || currentInlineElement === void 0 ? void 0 : currentInlineElement.getContainerNode()) || null;
-        var currentStyle = {};
+        var currentStyle = null;
         currentNode = currentNode ? (0, findClosestElementAncestor_1.default)(currentNode) : null;
-        // we should consider of when it is the single childnode of element, the parentNode's style should add
-        // such as the "i", "b", "span" node in <li><span><b><i>aa</i></b></span></li>
-        while (currentNode &&
-            currentNode !== element &&
-            (0, safeInstanceOf_1.default)(currentNode, 'HTMLElement')) {
+        var _loop_2 = function () {
+            var element_1 = currentNode;
             styles.forEach(function (styleName) {
-                var styleValue = currentNode.style.getPropertyValue(styleName);
+                var styleValue = isCssStyle
+                    ? element_1.style.getPropertyValue(styleName)
+                    : element_1.getAttribute(styleName);
+                if (!currentStyle) {
+                    currentStyle = {};
+                }
                 if (styleValue && !currentStyle[styleName]) {
                     currentStyle[styleName] = styleValue;
                 }
             });
-            if (((_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.childNodes.length) === 1) {
+            if (((_b = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _b === void 0 ? void 0 : _b.childNodes.length) === 1) {
                 currentNode = currentNode.parentNode;
             }
             else {
                 currentNode = null;
             }
+        };
+        // we should consider of when it is the single child node of element, the parentNode's style should add
+        // such as the "i", "b", "span" node in <li><span><b><i>aa</i></b></span></li>
+        while (currentNode &&
+            currentNode !== element &&
+            (0, safeInstanceOf_1.default)(currentNode, 'HTMLElement') &&
+            (result.length == 0 || (((_a = currentNode.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) || 0) > 0)) {
+            _loop_2();
         }
         if (currentStyle) {
             result.push(currentStyle);
@@ -16304,6 +16573,33 @@ function getStyles(element) {
 exports.default = getStyles;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/style/removeGlobalCssStyle.ts":
+/*!*************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/style/removeGlobalCssStyle.ts ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+/**
+ * Remove a css rule style from a style sheet
+ * @param doc The document object
+ * @param styleId the ID of the style tag
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+function removeGlobalCssStyle(doc, styleId) {
+    var _a;
+    var styleTag = doc.getElementById(styleId);
+    if (styleTag) {
+        (_a = styleTag.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(styleTag);
+    }
+}
+exports.default = removeGlobalCssStyle;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/style/removeImportantStyleRule.ts":
@@ -16341,6 +16637,38 @@ function removeImportantStyleRule(element, styleProperties) {
 exports.default = removeImportantStyleRule;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/style/setGlobalCssStyles.ts":
+/*!***********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/style/setGlobalCssStyles.ts ***!
+  \***********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+/**
+ * Add global css styles
+ * @param doc The document object
+ * @param cssRule The css rule that must added to the selection
+ * @param editorId Te id of the editor
+ * @param styleId the ID of the style tag
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+function setGlobalCssStyles(doc, cssRule, styleId) {
+    var _a;
+    var styleTag = doc.getElementById(styleId);
+    if (!styleTag) {
+        styleTag = doc.createElement('style');
+        styleTag.id = styleId;
+        doc.head.appendChild(styleTag);
+    }
+    (_a = styleTag.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(cssRule);
+}
+exports.default = setGlobalCssStyles;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/style/setStyles.ts":
@@ -17908,7 +18236,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnownCreateElementData = void 0;
 var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ./safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
-var Browser_1 = __webpack_require__(/*! ./Browser */ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts");
 /**
  * All known CreateElementData used by roosterjs to create elements
  */
@@ -17916,9 +18243,10 @@ exports.KnownCreateElementData = (_a = {},
     _a[0 /* None */] = { tag: '' },
     // Edge can sometimes lose current format when Enter to new line.
     // So here we add an extra SPAN for Edge to workaround this bug
-    _a[1 /* EmptyLine */] = Browser_1.Browser.isEdge
-        ? { tag: 'div', children: [{ tag: 'span', children: [{ tag: 'br' }] }] }
-        : { tag: 'div', children: [{ tag: 'br' }] },
+    _a[1 /* EmptyLine */] = {
+        tag: 'div',
+        children: [{ tag: 'span', children: [{ tag: 'br' }] }],
+    },
     _a[2 /* BlockquoteWrapper */] = {
         tag: 'blockquote',
         style: 'margin-top:0;margin-bottom:0',
@@ -17936,8 +18264,14 @@ exports.KnownCreateElementData = (_a = {},
         style: 'position: fixed; width: 0; height: 0',
     },
     _a[6 /* ImageEditWrapper */] = {
-        tag: 'div',
-        style: 'width:100%;height:100%;position:relative;overflow:hidden',
+        tag: 'span',
+        style: 'max-width:100%;position:fixed',
+        children: [
+            {
+                tag: 'div',
+                style: 'width:100%;height:100%;position:relative;overflow:hidden',
+            },
+        ],
     },
     _a[7 /* TableHorizontalResizer */] = {
         tag: 'div',
@@ -19514,31 +19848,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./plugins/ImageResize/index */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/index.ts"), exports);
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/ImageSelection.ts":
-/*!*****************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/ImageSelection.ts ***!
-  \*****************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(__webpack_require__(/*! ./plugins/ImageSelection/index */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/index.ts"), exports);
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/Paste.ts":
@@ -19699,7 +20008,6 @@ __exportStar(__webpack_require__(/*! ./TableResize */ "./packages/roosterjs-edit
 __exportStar(__webpack_require__(/*! ./Watermark */ "./packages/roosterjs-editor-plugins/lib/Watermark.ts"), exports);
 __exportStar(__webpack_require__(/*! ./TableCellSelection */ "./packages/roosterjs-editor-plugins/lib/TableCellSelection.ts"), exports);
 __exportStar(__webpack_require__(/*! ./AutoFormat */ "./packages/roosterjs-editor-plugins/lib/AutoFormat.ts"), exports);
-__exportStar(__webpack_require__(/*! ./ImageSelection */ "./packages/roosterjs-editor-plugins/lib/ImageSelection.ts"), exports);
 
 
 /***/ }),
@@ -20360,6 +20668,8 @@ var getAutoBulletListStyle_1 = __webpack_require__(/*! ../utils/getAutoBulletLis
 var getAutoNumberingListStyle_1 = __webpack_require__(/*! ../utils/getAutoNumberingListStyle */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoNumberingListStyle.ts");
 var roosterjs_editor_api_1 = __webpack_require__(/*! roosterjs-editor-api */ "./packages/roosterjs-editor-api/lib/index.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var PREVIOUS_BLOCK_CACHE_KEY = 'previousBlock';
+var NEXT_BLOCK_CACHE_KEY = 'nextBlock';
 var ListStyleDefinitionMetadata = (0, roosterjs_editor_dom_1.createObjectDefinition)({
     orderedStyleType: (0, roosterjs_editor_dom_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 20 /* Max */),
     unorderedStyleType: (0, roosterjs_editor_dom_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 9 /* Max */),
@@ -20589,10 +20899,10 @@ var AutoNumberingList = {
     },
 };
 var getPreviousListItem = function (editor, textRange) {
-    var _a;
-    var previousNode = (_a = editor
+    var blockElement = editor
         .getBodyTraverser(textRange === null || textRange === void 0 ? void 0 : textRange.startContainer)
-        .getPreviousBlockElement()) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement();
+        .getPreviousBlockElement();
+    var previousNode = blockElement === null || blockElement === void 0 ? void 0 : blockElement.getEndNode();
     return (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode) === 'LI' ? previousNode : undefined;
 };
 var getPreviousListType = function (editor, textRange, listType) {
@@ -20694,6 +21004,57 @@ function shouldTriggerList(event, editor, getListStyle, listType) {
         listStyle &&
         shouldTriggerNewListStyle);
 }
+/**
+ * MergeListOnBackspaceAfterList edit feature, provides the ability to merge list on backspace on block after a list.
+ */
+var MergeListOnBackspaceAfterList = {
+    keys: [8 /* BACKSPACE */],
+    shouldHandleEvent: function (event, editor) {
+        var _a, _b;
+        var target = editor.getElementAtCursor();
+        if (target) {
+            var cursorBlock = (_a = editor.getBlockElementAtNode(target)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+            var previousBlock_1 = (_b = cursorBlock === null || cursorBlock === void 0 ? void 0 : cursorBlock.previousElementSibling) !== null && _b !== void 0 ? _b : null;
+            if (isList(previousBlock_1)) {
+                var range = editor.getSelectionRange();
+                var searcher = editor.getContentSearcherOfCursor(event);
+                var textBeforeCursor = searcher === null || searcher === void 0 ? void 0 : searcher.getSubStringBefore(4);
+                var nearestInline = searcher === null || searcher === void 0 ? void 0 : searcher.getNearestNonTextInlineElement();
+                if (range && range.collapsed && textBeforeCursor === '' && !nearestInline) {
+                    var tempBlock = cursorBlock === null || cursorBlock === void 0 ? void 0 : cursorBlock.nextElementSibling;
+                    var nextBlock_1 = isList(tempBlock) ? tempBlock : tempBlock === null || tempBlock === void 0 ? void 0 : tempBlock.firstChild;
+                    if (isList(nextBlock_1) &&
+                        (0, roosterjs_editor_dom_1.getTagOfNode)(previousBlock_1) == (0, roosterjs_editor_dom_1.getTagOfNode)(nextBlock_1)) {
+                        var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, PREVIOUS_BLOCK_CACHE_KEY, function () { return previousBlock_1; });
+                        var nextElement = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, NEXT_BLOCK_CACHE_KEY, function () { return nextBlock_1; });
+                        return !!element && !!nextElement;
+                    }
+                }
+            }
+        }
+        return false;
+    },
+    handleEvent: function (event, editor) {
+        editor.runAsync(function (editor) {
+            var previousList = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, PREVIOUS_BLOCK_CACHE_KEY, function () { return null; });
+            var targetBlock = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, NEXT_BLOCK_CACHE_KEY, function () { return null; });
+            var rangeBeforeWriteBack = editor.getSelectionRange();
+            if (previousList && targetBlock && rangeBeforeWriteBack) {
+                var fvList = new roosterjs_editor_dom_1.VList(previousList);
+                fvList.mergeVList(new roosterjs_editor_dom_1.VList(targetBlock));
+                var span = editor.getDocument().createElement('span');
+                span.id = 'restoreRange';
+                rangeBeforeWriteBack.insertNode(span);
+                fvList.writeBack();
+                span = editor.queryElements('#restoreRange')[0];
+                if (span.parentElement) {
+                    editor.select(new roosterjs_editor_dom_1.Position(span, -3 /* After */));
+                    span.parentElement.removeChild(span);
+                }
+            }
+        });
+    },
+};
 /**
  * @internal
  */
@@ -20708,7 +21069,12 @@ exports.ListFeatures = {
     maintainListChainWhenDelete: MaintainListChainWhenDelete,
     autoNumberingList: AutoNumberingList,
     autoBulletList: AutoBulletList,
+    mergeListOnBackspaceAfterList: MergeListOnBackspaceAfterList,
 };
+function isList(element) {
+    return (!!element &&
+        ((0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLOListElement') || (0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLUListElement')));
+}
 
 
 /***/ }),
@@ -21656,10 +22022,24 @@ function getAutoNumberingListStyle(textBeforeCursor, previousListChain, previous
         }
     }
     var isDoubleParenthesis = trigger[0] === '(' && trigger[trigger.length - 1] === ')';
-    var numberingType = identifyNumberingListType(trigger, isDoubleParenthesis, previousListStyle);
+    var numberingType = isValidNumbering(trigger, isDoubleParenthesis)
+        ? identifyNumberingListType(trigger, isDoubleParenthesis, previousListStyle)
+        : null;
     return numberingType;
 }
 exports.default = getAutoNumberingListStyle;
+/**
+ * Check if index has only numbers or only letters to avoid sequence of character such 1:1. trigger a list.
+ * @param textBeforeCursor
+ * @param isDoubleParenthesis
+ * @returns
+ */
+function isValidNumbering(textBeforeCursor, isDoubleParenthesis) {
+    var index = isDoubleParenthesis
+        ? textBeforeCursor.slice(1, -1)
+        : textBeforeCursor.slice(0, -1);
+    return Number(index) || /^[A-Za-z\s]*$/.test(index);
+}
 
 
 /***/ }),
@@ -22313,12 +22693,8 @@ var getGeneratedImageSize_1 = __webpack_require__(/*! ./editInfoUtils/getGenerat
 var Cropper_1 = __webpack_require__(/*! ./imageEditors/Cropper */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Cropper.ts");
 var editInfo_1 = __webpack_require__(/*! ./editInfoUtils/editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 var Rotator_1 = __webpack_require__(/*! ./imageEditors/Rotator */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Rotator.ts");
-var roosterjs_editor_api_1 = __webpack_require__(/*! roosterjs-editor-api */ "./packages/roosterjs-editor-api/lib/index.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var Resizer_1 = __webpack_require__(/*! ./imageEditors/Resizer */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Resizer.ts");
-var SHIFT_KEYCODE = 16;
-var CTRL_KEYCODE = 17;
-var ALT_KEYCODE = 18;
 var DIRECTIONS = 8;
 var DirectionRad = (Math.PI * 2) / DIRECTIONS;
 var DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
@@ -22347,10 +22723,6 @@ var ImageEditHTMLMap = (_a = {},
     _a[4 /* Rotate */] = Rotator_1.getRotateHTML,
     _a[8 /* Crop */] = Cropper_1.getCropHTML,
     _a);
-/**
- * Image edit entity name
- */
-var IMAGE_EDIT_WRAPPER_ENTITY_TYPE = 'IMAGE_EDIT_WRAPPER';
 /**
  * Default background colors for rotate handle
  */
@@ -22378,35 +22750,31 @@ var ImageEdit = /** @class */ (function () {
          * quit editing mode when editor lose focus
          */
         this.onBlur = function () {
-            _this.setEditingImage(null);
+            _this.setEditingImage(null, true);
         };
         /**
          * Remove the temp wrapper of the image
-         * @param wrapper The wrapper object to remove. If not specified, remove all existing wrappers.
          */
-        this.removeWrapper = function (wrapper) {
-            var parent = wrapper === null || wrapper === void 0 ? void 0 : wrapper.parentNode;
-            var img = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector('img');
-            if (img && parent) {
-                img.style.position = '';
-                img.style.margin = null;
-                img.style.textAlign = null;
-                parent.insertBefore(img, wrapper);
-                parent.removeChild(wrapper);
+        this.removeWrapper = function () {
+            var _a, _b;
+            var doc = _this.editor.getDocument();
+            if (_this.zoomWrapper && ((_a = doc.body) === null || _a === void 0 ? void 0 : _a.contains(_this.zoomWrapper))) {
+                (_b = doc.body) === null || _b === void 0 ? void 0 : _b.removeChild(_this.zoomWrapper);
+                _this.toggleImageVisibility(_this.image, true /** showImage */);
             }
+            _this.wrapper = null;
+            _this.zoomWrapper = null;
         };
         /**
          * Update image edit elements to reflect current editing result
          * @param context
          */
         this.updateWrapper = function (context) {
-            var wrapper = _this.getImageWrapper(_this.image);
+            var wrapper = _this.wrapper;
             if (wrapper) {
                 // Prepare: get related editing elements
                 var cropContainers = getEditElements(wrapper, "r_cropC" /* CropContainer */);
                 var cropOverlays = getEditElements(wrapper, "r_cropO" /* CropOverlay */);
-                var rotateCenter = getEditElements(wrapper, "r_rotateC" /* RotateCenter */)[0];
-                var rotateHandle = getEditElements(wrapper, "r_rotateH" /* RotateHandle */)[0];
                 var resizeHandles = getEditElements(wrapper, "r_resizeH" /* ResizeHandle */);
                 var cropHandles = getEditElements(wrapper, "r_cropH" /* CropHandle */);
                 // Cropping and resizing will show different UI, so check if it is cropping here first
@@ -22425,12 +22793,14 @@ var ImageEdit = /** @class */ (function () {
                 wrapper.style.height = getPx(visibleHeight);
                 wrapper.style.margin = marginVertical + "px " + marginHorizontal + "px";
                 wrapper.style.transform = "rotate(" + angleRad + "rad)";
+                _this.zoomWrapper.style.width = getPx(visibleWidth);
+                _this.zoomWrapper.style.height = getPx(visibleHeight);
                 // Update the text-alignment to avoid the image to overflow if the parent element have align center or right
                 // or if the direction is Right To Left
                 wrapper.style.textAlign = isRtl(wrapper.parentNode) ? 'right' : 'left';
                 // Update size of the image
-                _this.image.style.width = getPx(originalWidth);
-                _this.image.style.height = getPx(originalHeight);
+                _this.clonedImage.style.width = getPx(originalWidth);
+                _this.clonedImage.style.height = getPx(originalHeight);
                 if (isCropping) {
                     // For crop, we also need to set position of the overlays
                     setSize(cropContainers[0], cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
@@ -22442,7 +22812,7 @@ var ImageEdit = /** @class */ (function () {
                 }
                 else {
                     // For rotate/resize, set the margin of the image so that cropped part won't be visible
-                    _this.image.style.margin = -cropTopPx + "px 0 0 " + -cropLeftPx + "px";
+                    _this.clonedImage.style.margin = -cropTopPx + "px 0 0 " + -cropLeftPx + "px";
                     // Double check resize
                     if ((context === null || context === void 0 ? void 0 : context.elementClass) == "r_resizeH" /* ResizeHandle */) {
                         var clientWidth = wrapper.clientWidth;
@@ -22451,7 +22821,6 @@ var ImageEdit = /** @class */ (function () {
                         (0, Resizer_1.doubleCheckResize)(_this.editInfo, _this.options.preserveRatio, clientWidth, clientHeight);
                         _this.updateWrapper();
                     }
-                    (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, _this.editor.getRelativeDistanceToEditor(wrapper, true /*addScroll*/), marginVertical, rotateCenter, rotateHandle);
                     updateHandleCursor(resizeHandles, angleRad);
                 }
             }
@@ -22488,56 +22857,26 @@ var ImageEdit = /** @class */ (function () {
     };
     /**
      * Handle events triggered from editor
-     * @param event PluginEvent object
+     * @param e PluginEvent object
      */
     ImageEdit.prototype.onPluginEvent = function (e) {
         switch (e.eventType) {
+            case 22 /* SelectionChanged */:
+                if (e.selectionRangeEx &&
+                    e.selectionRangeEx.type === 2 /* ImageSelection */) {
+                    this.setEditingImage(e.selectionRangeEx.image, 7 /* ResizeAndRotate */);
+                }
+                break;
             case 5 /* MouseDown */:
                 this.setEditingImage(null);
                 break;
-            case 6 /* MouseUp */:
-                var target = e.rawEvent.target;
-                if (e.isClicking &&
-                    e.rawEvent.button == 0 &&
-                    (0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement') &&
-                    target.isContentEditable &&
-                    (0, roosterjs_editor_dom_1.matchesSelector)(target, this.options.imageSelector)) {
-                    this.setEditingImage(target, 7 /* ResizeAndRotate */);
-                }
-                break;
             case 0 /* KeyDown */:
-                var key = e.rawEvent.which;
-                if (key == 46 /* DELETE */ || key == 8 /* BACKSPACE */) {
-                    // Set current editing image to null and select the image if any, and do not prevent default of the event
-                    // so that browser will delete the selected image for us
-                    this.setEditingImage(null, true /*selectImage*/);
-                }
-                else if (key == 27 /* ESCAPE */ && this.image) {
-                    // Press ESC should cancel current editing operation, resume back to original edit info
-                    this.editInfo = (0, editInfo_1.getEditInfoFromImage)(this.image);
-                    this.setEditingImage(null);
-                    e.rawEvent.preventDefault();
-                }
-                else if (key != SHIFT_KEYCODE && key != CTRL_KEYCODE && key != ALT_KEYCODE) {
-                    // For other key, just unselect current image and select it. If this is an input key, the image will be replaced
-                    this.setEditingImage(null, true /*selectImage*/);
-                }
+                this.setEditingImage(null);
                 break;
             case 7 /* ContentChanged */:
-                if (e.source != "InsertEntity" /* InsertEntity */ ||
-                    e.data.type != IMAGE_EDIT_WRAPPER_ENTITY_TYPE) {
+                if (e.source !== "Format" /* Format */) {
                     // After contentChanged event, the current image wrapper may not be valid any more, remove all of them if any
-                    this.editor.queryElements((0, roosterjs_editor_dom_1.getEntitySelector)(IMAGE_EDIT_WRAPPER_ENTITY_TYPE), this.removeWrapper);
-                }
-                break;
-            case 15 /* EntityOperation */:
-                if (e.entity.type == IMAGE_EDIT_WRAPPER_ENTITY_TYPE) {
-                    if (e.operation == 8 /* ReplaceTemporaryContent */) {
-                        this.removeWrapper(e.entity.wrapper);
-                    }
-                    else if (e.operation == 1 /* Click */) {
-                        e.rawEvent.preventDefault();
-                    }
+                    this.removeWrapper();
                 }
                 break;
             case 8 /* ExtractContentWithDom */:
@@ -22546,10 +22885,13 @@ var ImageEdit = /** @class */ (function () {
                     (0, editInfo_1.deleteEditInfo)(img);
                 });
                 break;
+            case 14 /* Scroll */:
+                this.setEditingImage(null);
+                break;
         }
     };
     /**
-     * Check if the given image edit operation is allowed by this pluign
+     * Check if the given image edit operation is allowed by this plugin
      * @param operation The image edit operation to check
      * @returns True means it is allowed, otherwise false
      */
@@ -22560,16 +22902,13 @@ var ImageEdit = /** @class */ (function () {
         var _this = this;
         var operation = typeof operationOrSelect === 'number' ? operationOrSelect : 0 /* None */;
         var selectImage = typeof operationOrSelect === 'number' ? false : !!operationOrSelect;
-        if (this.image) {
+        if (!image && this.image) {
             // When there is image in editing, clean up any cached objects and elements
             this.clearDndHelpers();
             // Apply the changes, and add undo snapshot if necessary
-            (0, applyChange_1.default)(this.editor, this.image, this.editInfo, this.lastSrc, this.wasResized);
+            (0, applyChange_1.default)(this.editor, this.image, this.editInfo, this.lastSrc, this.wasResized, this.clonedImage);
             // Remove editing wrapper
-            var wrapper = this.getImageWrapper(this.image);
-            if (wrapper) {
-                this.removeWrapper(wrapper);
-            }
+            this.removeWrapper();
             this.editor.addUndoSnapshot(function () { return _this.image; }, "ImageResize" /* ImageResize */);
             if (selectImage) {
                 this.editor.select(this.image);
@@ -22577,6 +22916,7 @@ var ImageEdit = /** @class */ (function () {
             this.image = null;
             this.editInfo = null;
             this.lastSrc = null;
+            this.clonedImage = null;
         }
         if (!this.image && (image === null || image === void 0 ? void 0 : image.isContentEditable)) {
             // If there is new image to edit, enter editing mode for this image
@@ -22590,12 +22930,12 @@ var ImageEdit = /** @class */ (function () {
                 ((0, canRegenerateImage_1.default)(image) ? operation : 3 /* Resize */) &
                     this.allowedOperations;
             // Create and update editing wrapper and elements
-            var wrapper = this.createWrapper(operation);
+            this.createWrapper(operation);
             this.updateWrapper();
             // Init drag and drop
             this.dndHelpers = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], this.createDndHelpers("r_resizeH" /* ResizeHandle */, Resizer_1.Resizer), true), this.createDndHelpers("r_rotateH" /* RotateHandle */, Rotator_1.Rotator), true), this.createDndHelpers("r_cropH" /* CropHandle */, Cropper_1.Cropper), true), this.createDndHelpers("r_cropC" /* CropContainer */, Cropper_1.Cropper), true);
-            // Put cursor next to the image
-            this.editor.select(wrapper, -3 /* After */);
+            this.editor.select(this.image);
+            this.toggleImageVisibility(this.image, false /** showImage */);
         }
     };
     /**
@@ -22603,25 +22943,22 @@ var ImageEdit = /** @class */ (function () {
      */
     ImageEdit.prototype.createWrapper = function (operation) {
         var _this = this;
-        // Wrap the image with an entity so that we can easily retrieve it later
-        var wrapper = (0, roosterjs_editor_api_1.insertEntity)(this.editor, IMAGE_EDIT_WRAPPER_ENTITY_TYPE, (0, roosterjs_editor_dom_1.wrap)(this.image, 6 /* ImageEditWrapper */), false /*isBlock*/, true /*isReadonly*/).wrapper;
-        wrapper.style.position = 'relative';
-        wrapper.style.maxWidth = '100%';
+        //Clone the image and insert the clone in a entity
+        this.clonedImage = this.image.cloneNode(true);
+        this.wrapper = (0, roosterjs_editor_dom_1.createElement)(6 /* ImageEditWrapper */, this.image.ownerDocument);
+        this.wrapper.firstChild.appendChild(this.clonedImage);
         // keep the same vertical align
-        var originalVerticalAlign = this.image.ownerDocument.defaultView
-            .getComputedStyle(this.image)
-            .getPropertyValue('vertical-align');
+        var originalVerticalAlign = this.getStylePropertyValue(this.image, 'vertical-align');
         if (originalVerticalAlign) {
-            wrapper.style.verticalAlign = originalVerticalAlign;
+            this.wrapper.style.verticalAlign = originalVerticalAlign;
         }
-        wrapper.style.display = roosterjs_editor_dom_1.Browser.isSafari ? 'inline-block' : 'inline-flex';
+        this.wrapper.style.display = roosterjs_editor_dom_1.Browser.isSafari ? 'inline-block' : 'inline-flex';
         // Cache current src so that we can compare it after edit see if src is changed
         this.lastSrc = this.image.getAttribute('src');
         // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
-        this.image.src = this.editInfo.src;
-        this.image.style.position = 'absolute';
-        this.image.style.maxWidth = null;
-        var isExperimentalHandlesEnabled = this.editor.isFeatureEnabled("AdaptiveHandlesResizer" /* AdaptiveHandlesResizer */);
+        this.clonedImage.src = this.editInfo.src;
+        this.clonedImage.style.position = 'absolute';
+        this.clonedImage.style.maxWidth = null;
         // Get HTML for all edit elements (resize handle, rotate handle, crop handle and overlay, ...) and create HTML element
         var options = {
             borderColor: getColorString(this.options.borderColor, this.editor.isDarkMode()),
@@ -22629,8 +22966,7 @@ var ImageEdit = /** @class */ (function () {
             rotateHandleBackColor: this.editor.isDarkMode()
                 ? DARK_MODE_BGCOLOR
                 : LIGHT_MODE_BGCOLOR,
-            isSmallImage: isASmallImage(this.editInfo, isExperimentalHandlesEnabled),
-            handlesExperimentalFeatures: isExperimentalHandlesEnabled,
+            isSmallImage: isASmallImage(this.editInfo),
         };
         var htmlData = [(0, Resizer_1.getResizeBordersHTML)(options)];
         (0, roosterjs_editor_dom_1.getObjectKeys)(ImageEditHTMLMap).forEach(function (thisOperation) {
@@ -22641,20 +22977,47 @@ var ImageEdit = /** @class */ (function () {
         htmlData.forEach(function (data) {
             var element = (0, roosterjs_editor_dom_1.createElement)(data, _this.image.ownerDocument);
             if (element) {
-                wrapper.appendChild(element);
+                _this.wrapper.appendChild(element);
             }
         });
-        return wrapper;
+        this.insertImageWrapper(this.image, this.wrapper, this.editor.getZoomScale());
     };
-    /**
-     * Get image wrapper from image
-     * @param image The image to get wrapper from
-     */
-    ImageEdit.prototype.getImageWrapper = function (image) {
-        var _a;
-        // Get the image wrapper from image using Entity API
-        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)((_a = image === null || image === void 0 ? void 0 : image.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode);
-        return (entity === null || entity === void 0 ? void 0 : entity.type) == IMAGE_EDIT_WRAPPER_ENTITY_TYPE ? entity.wrapper : null;
+    ImageEdit.prototype.toggleImageVisibility = function (image, showImage) {
+        var editorId = this.editor.getEditorDomAttribute('id');
+        var doc = this.editor.getDocument();
+        var editingId = 'editingId' + editorId;
+        if (showImage) {
+            (0, roosterjs_editor_dom_1.removeGlobalCssStyle)(doc, editingId);
+        }
+        else {
+            var cssRule = "#" + editorId + " #" + image.id + " {visibility: hidden}";
+            (0, roosterjs_editor_dom_1.setGlobalCssStyles)(doc, cssRule, editingId);
+        }
+    };
+    ImageEdit.prototype.createZoomWrapper = function (wrapper, scale) {
+        var zoomWrapper = this.editor.getDocument().createElement('div');
+        zoomWrapper.style.transform = "scale(" + (scale || 1) + ")";
+        zoomWrapper.style.transformOrigin = 'top left';
+        zoomWrapper.style.position = 'fixed';
+        zoomWrapper.appendChild(wrapper);
+        return zoomWrapper;
+    };
+    ImageEdit.prototype.copyImageSize = function (image, element) {
+        var _a = image.getBoundingClientRect(), top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom;
+        element.style.top = top + "px";
+        element.style.bottom = bottom + "px";
+        element.style.right = right + "px";
+        element.style.left = left + "px";
+        return element;
+    };
+    ImageEdit.prototype.insertImageWrapper = function (image, wrapper, scale) {
+        this.zoomWrapper = this.copyImageSize(image, this.createZoomWrapper(wrapper, scale));
+        this.editor.getDocument().body.appendChild(this.zoomWrapper);
+    };
+    ImageEdit.prototype.getStylePropertyValue = function (element, property) {
+        return element.ownerDocument.defaultView
+            .getComputedStyle(this.image)
+            .getPropertyValue(property);
     };
     /**
      * Create drag and drop helpers
@@ -22669,7 +23032,7 @@ var ImageEdit = /** @class */ (function () {
             options: this.options,
             elementClass: elementClass,
         };
-        var wrapper = this.getImageWrapper(this.image);
+        var wrapper = this.wrapper;
         return wrapper
             ? getEditElements(wrapper, elementClass).map(function (element) {
                 return new DragAndDropHelper_1.default(element, __assign(__assign({}, commonContext), { x: element.dataset.x, y: element.dataset.y }), _this.updateWrapper, dragAndDrop, _this.editor.getZoomScale());
@@ -22750,9 +23113,9 @@ function isFixedNumberValue(value) {
     var numberValue = typeof value === 'string' ? parseInt(value) : value;
     return !isNaN(numberValue);
 }
-function isASmallImage(editInfo, isFeatureEnabled) {
+function isASmallImage(editInfo) {
     var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx;
-    return widthPx && heightPx && widthPx * widthPx < MAX_SMALL_SIZE_IMAGE && isFeatureEnabled;
+    return widthPx && heightPx && widthPx * widthPx < MAX_SMALL_SIZE_IMAGE;
 }
 function getColorString(color, isDarkMode) {
     if (typeof color === 'string') {
@@ -22939,10 +23302,11 @@ var editInfo_1 = __webpack_require__(/*! ./editInfo */ "./packages/roosterjs-edi
  * @param image The image to apply the change
  * @param editInfo Edit info that contains the changed information of the image
  * @param previousSrc Last src value of the image before the change was made
+ * @param editingImage (optional) Image in editing state
  */
-function applyChange(editor, image, editInfo, previousSrc, wasResized) {
+function applyChange(editor, image, editInfo, previousSrc, wasResized, editingImage) {
     var newSrc = '';
-    var initEditInfo = (0, editInfo_1.getEditInfoFromImage)(image);
+    var initEditInfo = (0, editInfo_1.getEditInfoFromImage)(editingImage !== null && editingImage !== void 0 ? editingImage : image);
     var state = (0, checkEditInfoState_1.default)(editInfo, initEditInfo);
     switch (state) {
         case 1 /* ResizeOnly */:
@@ -22956,7 +23320,7 @@ function applyChange(editor, image, editInfo, previousSrc, wasResized) {
             break;
         case 3 /* FullyChanged */:
             // For other cases (cropped, rotated, ...) we need to create a new image to reflect the change
-            newSrc = (0, generateDataURL_1.default)(image, editInfo);
+            newSrc = (0, generateDataURL_1.default)(editingImage !== null && editingImage !== void 0 ? editingImage : image, editInfo);
             break;
     }
     var srcChanged = newSrc != previousSrc;
@@ -23508,14 +23872,12 @@ exports.doubleCheckResize = doubleCheckResize;
  * Get HTML for resize handles at the corners
  */
 function getCornerResizeHTML(_a, onShowResizeHandle) {
-    var resizeBorderColor = _a.borderColor, handlesExperimentalFeatures = _a.handlesExperimentalFeatures;
+    var resizeBorderColor = _a.borderColor;
     var result = [];
     Xs.forEach(function (x) {
         return Ys.forEach(function (y) {
             var elementData = (x == '') == (y == '')
-                ? getResizeHandleHTML(x, y, resizeBorderColor, handlesExperimentalFeatures
-                    ? 1 /* CircularHandlesCorner */
-                    : 0 /* SquareHandles */)
+                ? getResizeHandleHTML(x, y, resizeBorderColor, 1 /* CircularHandlesCorner */)
                 : null;
             if (onShowResizeHandle) {
                 onShowResizeHandle(elementData, x, y);
@@ -23531,7 +23893,7 @@ exports.getCornerResizeHTML = getCornerResizeHTML;
  * Get HTML for resize handles on the sides
  */
 function getSideResizeHTML(_a, onShowResizeHandle) {
-    var resizeBorderColor = _a.borderColor, isSmallImage = _a.isSmallImage, handlesExperimentalFeatures = _a.handlesExperimentalFeatures;
+    var resizeBorderColor = _a.borderColor, isSmallImage = _a.isSmallImage;
     if (isSmallImage) {
         return null;
     }
@@ -23539,9 +23901,7 @@ function getSideResizeHTML(_a, onShowResizeHandle) {
     Xs.forEach(function (x) {
         return Ys.forEach(function (y) {
             var elementData = (x == '') != (y == '')
-                ? getResizeHandleHTML(x, y, resizeBorderColor, handlesExperimentalFeatures
-                    ? 1 /* CircularHandlesCorner */
-                    : 0 /* SquareHandles */)
+                ? getResizeHandleHTML(x, y, resizeBorderColor, 1 /* CircularHandlesCorner */)
                 : null;
             if (onShowResizeHandle) {
                 onShowResizeHandle(elementData, x, y);
@@ -23618,7 +23978,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRotateHTML = exports.updateRotateHandlePosition = exports.Rotator = void 0;
+exports.getRotateHTML = exports.Rotator = void 0;
 var ROTATE_SIZE = 32;
 var ROTATE_GAP = 15;
 var DEG_PER_RAD = 180 / Math.PI;
@@ -23653,26 +24013,6 @@ exports.Rotator = {
         }
     },
 };
-/**
- * @internal
- * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
- * Fix it by reduce the distance from image to rotate handle
- */
-function updateRotateHandlePosition(editInfo, distance, marginVertical, rotateCenter, rotateHandle) {
-    if (rotateCenter && rotateHandle && distance) {
-        var angleRad = editInfo.angleRad, heightPx = editInfo.heightPx;
-        var cosAngle = Math.cos(angleRad);
-        var adjustedDistance = cosAngle <= 0
-            ? Number.MAX_SAFE_INTEGER
-            : (distance[1] + heightPx / 2 + marginVertical) / cosAngle - heightPx / 2;
-        var rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);
-        var rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
-        rotateCenter.style.top = -rotateGap + 'px';
-        rotateCenter.style.height = rotateGap + 'px';
-        rotateHandle.style.top = -rotateTop + 'px';
-    }
-}
-exports.updateRotateHandlePosition = updateRotateHandlePosition;
 /**
  * @internal
  * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image
@@ -23684,12 +24024,12 @@ function getRotateHTML(_a) {
         {
             tag: 'div',
             className: "r_rotateC" /* RotateCenter */,
-            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor,
+            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor + ";top:" + -ROTATE_GAP + "px;height:" + ROTATE_GAP + "px;",
             children: [
                 {
                     tag: 'div',
                     className: "r_rotateH" /* RotateHandle */,
-                    style: "position:absolute;background-color:" + rotateHandleBackColor + ";border:solid 1px " + borderColor + ";border-radius:50%;width:" + ROTATE_SIZE + "px;height:" + ROTATE_SIZE + "px;left:-" + handleLeft + "px;cursor:move",
+                    style: "position:absolute;background-color:" + rotateHandleBackColor + ";border:solid 1px " + borderColor + ";border-radius:50%;width:" + ROTATE_SIZE + "px;height:" + ROTATE_SIZE + "px;left:-" + handleLeft + "px;cursor:move;top:" + -ROTATE_SIZE + "px;",
                     children: [getRotateIconHTML(borderColor)],
                 },
             ],
@@ -23843,111 +24183,6 @@ var ImageResize_1 = __webpack_require__(/*! ./ImageResize */ "./packages/rooster
 Object.defineProperty(exports, "ImageResize", { enumerable: true, get: function () { return ImageResize_1.default; } });
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/ImageSelection.ts":
-/*!****************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/ImageSelection.ts ***!
-  \****************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var Escape = 'Escape';
-var mouseRightButton = 2;
-var mouseLeftButton = 0;
-/**
- * Requires @see ExperimentalFeatures.ImageSelection to be enabled.
- * Detect image selection and help highlight the image
- */
-var ImageSelection = /** @class */ (function () {
-    function ImageSelection() {
-        this.editor = null;
-    }
-    /**
-     * Get a friendly name of  this plugin
-     */
-    ImageSelection.prototype.getName = function () {
-        return 'ImageSelection';
-    };
-    /**
-     * Initialize this plugin. This should only be called from Editor
-     * @param editor Editor instance
-     */
-    ImageSelection.prototype.initialize = function (editor) {
-        this.editor = editor;
-    };
-    /**
-     * Dispose this plugin
-     */
-    ImageSelection.prototype.dispose = function () {
-        this.editor.select(null);
-        this.editor = null;
-    };
-    ImageSelection.prototype.onPluginEvent = function (event) {
-        if (this.editor && this.editor.isFeatureEnabled("ImageSelection" /* ImageSelection */)) {
-            switch (event.eventType) {
-                case 17 /* EnteredShadowEdit */:
-                case 18 /* LeavingShadowEdit */:
-                    var selection = this.editor.getSelectionRangeEx();
-                    if (selection.type == 2 /* ImageSelection */) {
-                        this.editor.select(selection.image);
-                    }
-                    break;
-                case 5 /* MouseDown */:
-                    var target = event.rawEvent.target;
-                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement')) {
-                        if (event.rawEvent.button === mouseRightButton) {
-                            var imageRange = (0, roosterjs_editor_dom_1.createRange)(target);
-                            this.editor.select(imageRange);
-                        }
-                        else if (event.rawEvent.button === mouseLeftButton) {
-                            this.editor.select(target);
-                        }
-                    }
-                    break;
-                case 0 /* KeyDown */:
-                    var key = event.rawEvent.key;
-                    var keyDownSelection = this.editor.getSelectionRangeEx();
-                    if (keyDownSelection.type === 2 /* ImageSelection */) {
-                        if (key === Escape) {
-                            this.editor.select(keyDownSelection.image, -2 /* Before */);
-                            this.editor.getSelectionRange().collapse();
-                            event.rawEvent.stopPropagation();
-                        }
-                        else {
-                            this.editor.select(keyDownSelection.ranges[0]);
-                        }
-                    }
-                    break;
-            }
-        }
-    };
-    return ImageSelection;
-}());
-exports.default = ImageSelection;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/index.ts":
-/*!*******************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/index.ts ***!
-  \*******************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageSelection = void 0;
-var ImageSelection_1 = __webpack_require__(/*! ./ImageSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/ImageSelection.ts");
-Object.defineProperty(exports, "ImageSelection", { enumerable: true, get: function () { return ImageSelection_1.default; } });
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/Paste.ts":
@@ -25921,6 +26156,13 @@ var PickerPlugin = /** @class */ (function () {
      */
     PickerPlugin.prototype.dispose = function () {
         this.editor = null;
+        this.isSuggesting = null;
+        this.blockSuggestions = null;
+        this.eventHandledOnKeyDown = null;
+        this.lastKnownRange = null;
+        this.isPendingInputEventHandling = null;
+        this.currentInputLength = null;
+        this.newInputLength = null;
         this.dataProvider.onDispose();
     };
     /**
@@ -29020,6 +29262,7 @@ var CompatibleExperimentalFeatures;
      */
     CompatibleExperimentalFeatures["ConvertSingleImageBody"] = "ConvertSingleImageBody";
     /**
+     * @deprecated This feature is always enabled
      * Align table elements to left, center and right using setAlignment API
      */
     CompatibleExperimentalFeatures["TableAlignment"] = "TableAlignment";
@@ -29028,6 +29271,7 @@ var CompatibleExperimentalFeatures;
      */
     CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
     /**
+     * @deprecated this feature is always enabled
      * Provide a circular resize handles that adaptive the number od handles to the size of the image
      */
     CompatibleExperimentalFeatures["AdaptiveHandlesResizer"] = "AdaptiveHandlesResizer";
@@ -29056,6 +29300,7 @@ var CompatibleExperimentalFeatures;
      */
     CompatibleExperimentalFeatures["NormalizeList"] = "NormalizeList";
     /**
+     * @deprecated this feature is always enabled
      * When a html image is selected, the selected image data will be stored by editor core.
      */
     CompatibleExperimentalFeatures["ImageSelection"] = "ImageSelection";
@@ -29066,6 +29311,11 @@ var CompatibleExperimentalFeatures;
      * is the one closest to the item.
      */
     CompatibleExperimentalFeatures["ReuseAllAncestorListElements"] = "ReuseAllAncestorListElements";
+    /**
+     * When apply default format when initialize or user type, apply the format on a SPAN element rather than
+     * the block element (In most case, the DIV element) so keep the block element clean.
+     */
+    CompatibleExperimentalFeatures["DefaultFormatInSpan"] = "DefaultFormatInSpan";
 })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));