roosterjs 8.6.1 → 8.10.0

package/dist/rooster.js

@@ -2311,6 +2311,13 @@ function changeFontSize(editor, change, fontSizes) {
     });
 }
 exports.default = changeFontSize;
+/**
+ * @internal
+ * Get new font size after increase/decrease. This is exported for test only
+ * @param pt Original font size, in Point
+ * @param changeBase Changed value, 1 means increase, -1 means decrease
+ * @param fontSizes Known font size array
+ */
 function getNewFontSize(pt, changeBase, fontSizes) {
     pt = changeBase == 1 ? Math.floor(pt) : Math.ceil(pt);
     var last = fontSizes[fontSizes.length - 1];
@@ -2354,37 +2361,58 @@ exports.getNewFontSize = getNewFontSize;
 
 "use strict";
 
+Object.defineProperty(exports, "__esModule", { value: true });
+var clearFormat_1 = __webpack_require__(/*! ./clearFormat */ "./packages/roosterjs-editor-api/lib/format/clearFormat.ts");
+/**
+ * @deprecated Use clearFormat instead and pass the ClearFormatMode.Block as parameter
+ * @param editor The editor instance
+ */
+function clearBlockFormat(editor) {
+    clearFormat_1.default(editor, 1 /* Block */);
+}
+exports.default = clearBlockFormat;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/format/clearFormat.ts":
+/*!*****************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/format/clearFormat.ts ***!
+  \*****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
+var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts");
+var setBackgroundColor_1 = __webpack_require__(/*! ./setBackgroundColor */ "./packages/roosterjs-editor-api/lib/format/setBackgroundColor.ts");
+var setFontName_1 = __webpack_require__(/*! ./setFontName */ "./packages/roosterjs-editor-api/lib/format/setFontName.ts");
+var setFontSize_1 = __webpack_require__(/*! ./setFontSize */ "./packages/roosterjs-editor-api/lib/format/setFontSize.ts");
+var setTextColor_1 = __webpack_require__(/*! ./setTextColor */ "./packages/roosterjs-editor-api/lib/format/setTextColor.ts");
+var toggleBold_1 = __webpack_require__(/*! ./toggleBold */ "./packages/roosterjs-editor-api/lib/format/toggleBold.ts");
+var toggleItalic_1 = __webpack_require__(/*! ./toggleItalic */ "./packages/roosterjs-editor-api/lib/format/toggleItalic.ts");
+var toggleUnderline_1 = __webpack_require__(/*! ./toggleUnderline */ "./packages/roosterjs-editor-api/lib/format/toggleUnderline.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var STYLES_TO_REMOVE = ['font', 'text-decoration', 'color', 'background'];
 var TAGS_TO_UNWRAP = 'B,I,U,STRONG,EM,SUB,SUP,STRIKE,FONT,CENTER,H1,H2,H3,H4,H5,H6,UL,OL,LI,SPAN,P,BLOCKQUOTE,CODE,S,PRE'.split(',');
 var ATTRIBUTES_TO_PRESERVE = ['href', 'src'];
 var TAGS_TO_STOP_UNWRAP = ['TD', 'TH', 'TR', 'TABLE', 'TBODY', 'THEAD'];
 /**
- * Clear all formats of selected blocks.
- * When selection is collapsed, only clear format of current block.
  * @param editor The editor instance
+ * @returns if the current selection is composed of two or more block elements
  */
-function clearBlockFormat(editor) {
-    blockFormat_1.default(editor, function (region) {
-        var blocks = roosterjs_editor_dom_1.getSelectedBlockElementsInRegion(region);
-        var nodes = roosterjs_editor_dom_1.collapseNodesInRegion(region, blocks);
-        if (editor.contains(region.rootNode)) {
-            // If there are styles on table cell, wrap all its children and move down all non-border styles.
-            // So that we can preserve styles for unselected blocks as well as border styles for table
-            var nonborderStyles = removeNonBorderStyles(region.rootNode);
-            if (Object.keys(nonborderStyles).length > 0) {
-                var wrapper = roosterjs_editor_dom_1.wrap(roosterjs_editor_dom_1.toArray(region.rootNode.childNodes));
-                roosterjs_editor_dom_1.setStyles(wrapper, nonborderStyles);
-            }
-        }
-        while (nodes.length > 0 && roosterjs_editor_dom_1.isNodeInRegion(region, nodes[0].parentNode)) {
-            nodes = [roosterjs_editor_dom_1.splitBalancedNodeRange(nodes)];
-        }
-        nodes.forEach(clearNodeFormat);
-    });
+function isMultiBlockSelection(editor) {
+    var transverser = editor.getSelectionTraverser();
+    var blockElement = transverser.currentBlockElement;
+    if (!blockElement) {
+        return false;
+    }
+    var nextBlockElement = transverser.getNextBlockElement();
+    //At least two blocks are selected
+    return !!nextBlockElement;
 }
-exports.default = clearBlockFormat;
 function clearNodeFormat(node) {
     // 1. Recursively clear format of all its child nodes
     var areBlockElements = roosterjs_editor_dom_1.toArray(node.childNodes).map(clearNodeFormat);
@@ -2434,36 +2462,50 @@ function removeNonBorderStyles(element) {
     roosterjs_editor_dom_1.setStyles(element, styles);
     return result;
 }
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-api/lib/format/clearFormat.ts":
-/*!*****************************************************************!*\
-  !*** ./packages/roosterjs-editor-api/lib/format/clearFormat.ts ***!
-  \*****************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts");
-var setBackgroundColor_1 = __webpack_require__(/*! ./setBackgroundColor */ "./packages/roosterjs-editor-api/lib/format/setBackgroundColor.ts");
-var setFontName_1 = __webpack_require__(/*! ./setFontName */ "./packages/roosterjs-editor-api/lib/format/setFontName.ts");
-var setFontSize_1 = __webpack_require__(/*! ./setFontSize */ "./packages/roosterjs-editor-api/lib/format/setFontSize.ts");
-var setTextColor_1 = __webpack_require__(/*! ./setTextColor */ "./packages/roosterjs-editor-api/lib/format/setTextColor.ts");
-var toggleBold_1 = __webpack_require__(/*! ./toggleBold */ "./packages/roosterjs-editor-api/lib/format/toggleBold.ts");
-var toggleItalic_1 = __webpack_require__(/*! ./toggleItalic */ "./packages/roosterjs-editor-api/lib/format/toggleItalic.ts");
-var toggleUnderline_1 = __webpack_require__(/*! ./toggleUnderline */ "./packages/roosterjs-editor-api/lib/format/toggleUnderline.ts");
-var STYLES_TO_REMOVE = ['font', 'text-decoration', 'color', 'background'];
 /**
- * Clear the format in current selection, after cleaning, the format will be
- * changed to default format. The format that get cleaned include B/I/U/font name/
- * font size/text color/background color/align left/align right/align center/superscript/subscript
+ * Clear the format of the selected text or list of blocks
+ * If the current selection is compose of multiple block elements then remove the text and struture format for all the selected blocks
+ * If the current selection is compose of a partial inline element then only the text format is removed from the current selection
  * @param editor The editor instance
  */
-function clearFormat(editor) {
+function clearAutoDetectFormat(editor) {
+    var isMultiBlock = isMultiBlockSelection(editor);
+    if (!isMultiBlock) {
+        var transverser = editor.getSelectionTraverser();
+        var inlineElement = transverser.currentInlineElement;
+        var isPartial = inlineElement instanceof roosterjs_editor_dom_1.PartialInlineElement;
+        if (isPartial) {
+            clearFormat(editor);
+            return;
+        }
+    }
+    clearBlockFormat(editor);
+}
+/**
+ * Clear all formats of selected blocks.
+ * When selection is collapsed, only clear format of current block.
+ * @param editor The editor instance
+ */
+function clearBlockFormat(editor) {
+    blockFormat_1.default(editor, function (region) {
+        var blocks = roosterjs_editor_dom_1.getSelectedBlockElementsInRegion(region);
+        var nodes = roosterjs_editor_dom_1.collapseNodesInRegion(region, blocks);
+        if (editor.contains(region.rootNode)) {
+            // If there are styles on table cell, wrap all its children and move down all non-border styles.
+            // So that we can preserve styles for unselected blocks as well as border styles for table
+            var nonborderStyles = removeNonBorderStyles(region.rootNode);
+            if (Object.keys(nonborderStyles).length > 0) {
+                var wrapper = roosterjs_editor_dom_1.wrap(roosterjs_editor_dom_1.toArray(region.rootNode.childNodes));
+                roosterjs_editor_dom_1.setStyles(wrapper, nonborderStyles);
+            }
+        }
+        while (nodes.length > 0 && roosterjs_editor_dom_1.isNodeInRegion(region, nodes[0].parentNode)) {
+            nodes = [roosterjs_editor_dom_1.splitBalancedNodeRange(nodes)];
+        }
+        nodes.forEach(clearNodeFormat);
+    });
+}
+function clearInlineFormat(editor) {
     editor.focus();
     editor.addUndoSnapshot(function () {
         execCommand_1.default(editor, "removeFormat" /* RemoveFormat */);
@@ -2488,11 +2530,15 @@ function clearFormat(editor) {
                 setFontSize_1.default(editor, defaultFormat.fontSize);
             }
             if (defaultFormat.textColor) {
+                var setColorIgnoredElements_1 = editor.queryElements('a *, a', 1 /* OnSelection */);
+                var shouldApplyInlineStyle = setColorIgnoredElements_1.length > 0
+                    ? function (element) { return setColorIgnoredElements_1.indexOf(element) == -1; }
+                    : null;
                 if (defaultFormat.textColors) {
-                    setTextColor_1.default(editor, defaultFormat.textColors);
+                    setTextColor_1.default(editor, defaultFormat.textColors, shouldApplyInlineStyle);
                 }
                 else {
-                    setTextColor_1.default(editor, defaultFormat.textColor);
+                    setTextColor_1.default(editor, defaultFormat.textColor, shouldApplyInlineStyle);
                 }
             }
             if (defaultFormat.backgroundColor) {
@@ -2515,6 +2561,26 @@ function clearFormat(editor) {
         }
     }, "Format" /* Format */);
 }
+/**
+ * Clear the format in current selection, after cleaning, the format will be
+ * changed to default format. The format that get cleaned include B/I/U/font name/
+ * font size/text color/background color/align left/align right/align center/superscript/subscript
+ * @param editor The editor instance
+ * @param formatType type of format to apply
+ */
+function clearFormat(editor, formatType) {
+    if (formatType === void 0) { formatType = 0 /* Inline */; }
+    switch (formatType) {
+        case 0 /* Inline */:
+            clearInlineFormat(editor);
+            break;
+        case 1 /* Block */:
+            clearBlockFormat(editor);
+            break;
+        default:
+            clearAutoDetectFormat(editor);
+    }
+}
 exports.default = clearFormat;
 
 
@@ -2632,10 +2698,9 @@ function updateAnchorDisplayText(anchor, displayText) {
 }
 function checkXss(link) {
     var sanitizer = new roosterjs_editor_dom_1.HtmlSanitizer();
-    var doc = new DOMParser().parseFromString('<a></a>', 'text/html');
-    var a = doc.body.firstChild;
+    var a = document.createElement('a');
     a.href = link || '';
-    sanitizer.sanitize(doc.body);
+    sanitizer.sanitize(a);
     // We use getAttribute because some browsers will try to make the href property a valid link.
     // This has unintended side effects when the link lacks a protocol.
     return a.getAttribute('href');
@@ -2698,7 +2763,7 @@ exports.getElementBasedFormatState = getElementBasedFormatState;
  * @returns The format state at cursor
  */
 function getFormatState(editor, event) {
-    return __assign(__assign(__assign(__assign({}, roosterjs_editor_dom_1.getPendableFormatState(editor.getDocument())), getElementBasedFormatState(editor, event)), editor.getStyleBasedFormatState()), editor.getUndoState());
+    return __assign(__assign(__assign(__assign({}, editor.getPendableFormatState(false /* forceGetStateFromDom */)), getElementBasedFormatState(editor, event)), editor.getStyleBasedFormatState()), editor.getUndoState());
 }
 exports.default = getFormatState;
 
@@ -3041,7 +3106,7 @@ exports.default = setDirection;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 /**
  * Set font name at selection
  * @param editor The editor instance
@@ -3049,11 +3114,9 @@ var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ ".
  * Currently there's no validation to the string, if the passed string is invalid, it won't take affect
  */
 function setFontName(editor, fontName) {
-    fontName = fontName.trim();
     // The browser provided execCommand creates a HTML <font> tag with face attribute. <font> is not HTML5 standard
-    // (http://www.w3schools.com/tags/tag_font.asp). Use applyInlineStyle which gives flexibility on applying inline style
-    // for here, we use CSS font-family style
-    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+    // (http://www.w3schools.com/tags/tag_font.asp).
+    applyListItemWrap_1.default(editor, 'font-family', function (element, isInnerNode) {
         element.style.fontFamily = isInnerNode ? '' : fontName;
     });
 }
@@ -3072,7 +3135,7 @@ exports.default = setFontName;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set font size at selection
@@ -3081,11 +3144,9 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * Currently there's no validation to the string, if the passed string is invalid, it won't take affect
  */
 function setFontSize(editor, fontSize) {
-    fontSize = fontSize.trim();
     // The browser provided execCommand only accepts 1-7 point value. In addition, it uses HTML <font> tag with size attribute.
-    // <font> is not HTML5 standard (http://www.w3schools.com/tags/tag_font.asp). Use applyInlineStyle which gives flexibility on applying inline style
-    // for here, we use CSS font-size style
-    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+    // <font> is not HTML5 standard (http://www.w3schools.com/tags/tag_font.asp).
+    applyListItemWrap_1.default(editor, 'font-size', function (element, isInnerNode) {
         element.style.fontSize = isInnerNode ? '' : fontSize;
         var lineHeight = roosterjs_editor_dom_1.getComputedStyle(element, 'line-height');
         if (lineHeight != 'normal') {
@@ -3142,7 +3203,6 @@ exports.default = setImageAltText;
 Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var BlockWrapper = '<blockquote style="margin-top:0;margin-bottom:0"></blockquote>';
 /**
  * Set indentation at selection
  * If selection contains bullet/numbering list, increase/decrease indentation will
@@ -3177,7 +3237,7 @@ function setIndentation(editor, indentation) {
 exports.default = setIndentation;
 function indent(region, blocks) {
     var nodes = roosterjs_editor_dom_1.collapseNodesInRegion(region, blocks);
-    roosterjs_editor_dom_1.wrap(nodes, BlockWrapper);
+    roosterjs_editor_dom_1.wrap(nodes, 2 /* BlockquoteWrapper */);
 }
 function outdent(region, blocks) {
     blocks.forEach(function (blockElement) {
@@ -3198,6 +3258,42 @@ function outdent(region, blocks) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/format/setOrderedListNumbering.ts":
+/*!*****************************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/format/setOrderedListNumbering.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");
+/**
+ * Resets Ordered List Numbering back to the value of the parameter startNumber
+ * @param editor The editor instance
+ * @param separator The HTML element that indicates when to split the VList
+ * @param startNumber The number of that the splitted list should start
+ */
+function setOrderedListNumbering(editor, separator, startNumber) {
+    if (startNumber === void 0) { startNumber = 1; }
+    editor.addUndoSnapshot(function () {
+        editor.focus();
+        var regions = editor.getSelectedRegions();
+        if (regions[0]) {
+            var vList = roosterjs_editor_dom_1.createVListFromRegion(regions[0], false /*includeSiblingLists*/, separator);
+            if (vList) {
+                vList.split(separator, startNumber);
+                vList.writeBack();
+            }
+        }
+    }, "Format" /* Format */);
+}
+exports.default = setOrderedListNumbering;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/format/setTextColor.ts":
@@ -3210,7 +3306,7 @@ function outdent(region, blocks) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set text color at selection
@@ -3221,10 +3317,13 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * Currently there's no validation to the string, if the passed string is invalid, it won't take affect
  * Alternatively, you can pass a @typedef ModeIndependentColor. If in light mode, the lightModeColor property will be used.
  * If in dark mode, the darkModeColor will be used and the lightModeColor will be used when converting back to light mode.
+ * @param shouldApplyInlineStyle Optional callback function to be invoked to verify if the current element should have the inline Style applied
  */
-function setTextColor(editor, color) {
-    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
-        roosterjs_editor_dom_1.setColor(element, isInnerNode ? '' : color, false /*isBackground*/, editor.isDarkMode());
+function setTextColor(editor, color, shouldApplyInlineStyle) {
+    applyListItemWrap_1.default(editor, 'color', function (element, isInnerNode) {
+        if (!shouldApplyInlineStyle || shouldApplyInlineStyle(element)) {
+            roosterjs_editor_dom_1.setColor(element, isInnerNode ? '' : color, false /*isBackground*/, editor.isDarkMode());
+        }
     });
 }
 exports.default = setTextColor;
@@ -3392,9 +3491,7 @@ function toggleHeader(editor, level) {
                 wrapped = true;
             }
             var div = editor.getDocument().createElement('div');
-            while (header.firstChild) {
-                div.appendChild(header.firstChild);
-            }
+            roosterjs_editor_dom_1.moveChildNodes(div, header);
             editor.replaceNode(header, div);
         });
         if (level > 0) {
@@ -3650,6 +3747,8 @@ var toggleItalic_1 = __webpack_require__(/*! ./format/toggleItalic */ "./package
 exports.toggleItalic = toggleItalic_1.default;
 var toggleNumbering_1 = __webpack_require__(/*! ./format/toggleNumbering */ "./packages/roosterjs-editor-api/lib/format/toggleNumbering.ts");
 exports.toggleNumbering = toggleNumbering_1.default;
+var setOrderedListNumbering_1 = __webpack_require__(/*! ./format/setOrderedListNumbering */ "./packages/roosterjs-editor-api/lib/format/setOrderedListNumbering.ts");
+exports.setOrderedListNumbering = setOrderedListNumbering_1.default;
 var toggleBlockQuote_1 = __webpack_require__(/*! ./format/toggleBlockQuote */ "./packages/roosterjs-editor-api/lib/format/toggleBlockQuote.ts");
 exports.toggleBlockQuote = toggleBlockQuote_1.default;
 var toggleCodeBlock_1 = __webpack_require__(/*! ./format/toggleCodeBlock */ "./packages/roosterjs-editor-api/lib/format/toggleCodeBlock.ts");
@@ -3664,6 +3763,10 @@ var toggleUnderline_1 = __webpack_require__(/*! ./format/toggleUnderline */ "./p
 exports.toggleUnderline = toggleUnderline_1.default;
 var toggleHeader_1 = __webpack_require__(/*! ./format/toggleHeader */ "./packages/roosterjs-editor-api/lib/format/toggleHeader.ts");
 exports.toggleHeader = toggleHeader_1.default;
+var toggleListType_1 = __webpack_require__(/*! ./utils/toggleListType */ "./packages/roosterjs-editor-api/lib/utils/toggleListType.ts");
+exports.toggleListType = toggleListType_1.default;
+var blockFormat_1 = __webpack_require__(/*! ./utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
+exports.blockFormat = blockFormat_1.default;
 var experimentCommitListChains_1 = __webpack_require__(/*! ./experiment/experimentCommitListChains */ "./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts");
 exports.experimentCommitListChains = experimentCommitListChains_1.default;
 
@@ -3905,6 +4008,54 @@ function applyInlineStyle(editor, callback) {
 exports.default = applyInlineStyle;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts":
+/*!**********************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts ***!
+  \**********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * Set the List Item Style when all inner inline element have the same style
+ * @param editor The editor instance
+ * @param styleName Name of the style to apply to the list item
+ * @param formatCallback callback to apply the style to each element
+ */
+function applyListItemStyleWrap(editor, styleName, formatCallback) {
+    var parentNodes = [];
+    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+        formatCallback(element, isInnerNode);
+        var parent = editor.getElementAtCursor('LI', element);
+        if (parent && parentNodes.indexOf(parent) === -1) {
+            parentNodes.push(parent);
+        }
+    });
+    applyStyleToListItems(parentNodes, [styleName]);
+}
+exports.default = applyListItemStyleWrap;
+/**
+ * @internal
+ * Checks if the parent element is a List Item, if it is, apply the style elements to the list item
+ * @param parentNodes parentNodes to apply the style
+ * @param styles styles to apply to the List Item Element
+ */
+function applyStyleToListItems(parentNodes, styles) {
+    parentNodes.forEach(function (node) {
+        if (roosterjs_editor_dom_1.safeInstanceOf(node, 'HTMLLIElement')) {
+            roosterjs_editor_dom_1.setListItemStyle(node, styles);
+        }
+    });
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts":
@@ -3920,7 +4071,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var experimentCommitListChains_1 = __webpack_require__(/*! ../experiment/experimentCommitListChains */ "./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
- * @internal
  * Split selection into regions, and perform a block-wise formatting action for each region.
  */
 function blockFormat(editor, callback, beforeRunCallback) {
@@ -4043,7 +4193,6 @@ function isEmptyBlockUnderTR(block) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var pendableFormatCommands = null;
 /**
  * @internal
  * Execute a document command
@@ -4060,11 +4209,13 @@ function execCommand(editor, command) {
     var range = editor.getSelectionRange();
     if (range && range.collapsed) {
         editor.addUndoSnapshot();
+        var formatState = editor.getPendableFormatState(false /* forceGetStateFromDom */);
         formatter();
-        if (isPendableFormatCommand(command)) {
-            // Trigger PendingFormatStateChanged event since we changed pending format state
+        var formatName = Object.keys(roosterjs_editor_dom_1.PendableFormatCommandMap).filter(function (x) { return roosterjs_editor_dom_1.PendableFormatCommandMap[x] == command; })[0];
+        if (formatName) {
+            formatState[formatName] = !formatState[formatName];
             editor.triggerPluginEvent(13 /* PendingFormatStateChanged */, {
-                formatState: roosterjs_editor_dom_1.getPendableFormatState(editor.getDocument()),
+                formatState: formatState,
             });
         }
     }
@@ -4073,12 +4224,6 @@ function execCommand(editor, command) {
     }
 }
 exports.default = execCommand;
-function isPendableFormatCommand(command) {
-    if (!pendableFormatCommands) {
-        pendableFormatCommands = Object.keys(roosterjs_editor_dom_1.PendableFormatCommandMap).map(function (key) { return roosterjs_editor_dom_1.PendableFormatCommandMap[key]; });
-    }
-    return pendableFormatCommands.indexOf(command) >= 0;
-}
 
 
 /***/ }),
@@ -4095,13 +4240,31 @@ function isPendableFormatCommand(command) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-function toggleListType(editor, listType, startNumber) {
+/**
+ * Toggle List Type at selection
+ * If ListType Provided is Ordered:
+ *      If selection contains numbering in deep level, toggle numbering will decrease the numbering level by one
+ *      If selection contains bullet list, toggle numbering will convert the bullet list into number list
+ *      If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding
+ *       realization of browser execCommand API
+ * If ListType Provided is Unordered:
+ *      If selection contains bullet in deep level, toggle bullet will decrease the bullet level by one
+ *      If selection contains number list, toggle bullet will convert the number list into bullet list
+ *      If selection contains both bullet/numbering and normal text, the behavior is decided by corresponding
+ *      browser execCommand API
+ * @param editor The editor instance
+ * @param listType The list type to toggle
+ * @param startNumber (Optional) Start number of the list
+ * @param includeSiblingLists Sets wether the operation should include Sibling Lists, by default true
+ */
+function toggleListType(editor, listType, startNumber, includeSiblingLists) {
+    if (includeSiblingLists === void 0) { includeSiblingLists = true; }
     blockFormat_1.default(editor, function (region, start, end, chains) {
         var _a;
         var chain = startNumber > 0 && chains.filter(function (chain) { return chain.canAppendAtCursor(startNumber); })[0];
         var vList = chain && start.equalTo(end)
             ? chain.createVListAtBlock((_a = roosterjs_editor_dom_1.getBlockElementAtNode(region.rootNode, start.node)) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement(), startNumber)
-            : roosterjs_editor_dom_1.createVListFromRegion(region, true /*includeSiblingLists*/);
+            : roosterjs_editor_dom_1.createVListFromRegion(region, includeSiblingLists);
         if (vList) {
             vList.changeListType(start, end, listType);
             vList.writeBack();
@@ -4255,6 +4418,7 @@ var createPasteFragment_1 = __webpack_require__(/*! ./createPasteFragment */ "./
 var ensureTypeInContainer_1 = __webpack_require__(/*! ./ensureTypeInContainer */ "./packages/roosterjs-editor-core/lib/coreApi/ensureTypeInContainer.ts");
 var focus_1 = __webpack_require__(/*! ./focus */ "./packages/roosterjs-editor-core/lib/coreApi/focus.ts");
 var getContent_1 = __webpack_require__(/*! ./getContent */ "./packages/roosterjs-editor-core/lib/coreApi/getContent.ts");
+var getPendableFormatState_1 = __webpack_require__(/*! ./getPendableFormatState */ "./packages/roosterjs-editor-core/lib/coreApi/getPendableFormatState.ts");
 var getSelectionRange_1 = __webpack_require__(/*! ./getSelectionRange */ "./packages/roosterjs-editor-core/lib/coreApi/getSelectionRange.ts");
 var getStyleBasedFormatState_1 = __webpack_require__(/*! ./getStyleBasedFormatState */ "./packages/roosterjs-editor-core/lib/coreApi/getStyleBasedFormatState.ts");
 var hasFocus_1 = __webpack_require__(/*! ./hasFocus */ "./packages/roosterjs-editor-core/lib/coreApi/hasFocus.ts");
@@ -4277,6 +4441,7 @@ exports.coreApiMap = {
     getContent: getContent_1.getContent,
     getSelectionRange: getSelectionRange_1.getSelectionRange,
     getStyleBasedFormatState: getStyleBasedFormatState_1.getStyleBasedFormatState,
+    getPendableFormatState: getPendableFormatState_1.getPendableFormatState,
     hasFocus: hasFocus_1.hasFocus,
     insertNode: insertNode_1.insertNode,
     restoreUndoSnapshot: restoreUndoSnapshot_1.restoreUndoSnapshot,
@@ -4325,17 +4490,8 @@ exports.createPasteFragment = function (core, clipboardData, position, pasteAsTe
     var rawHtml = clipboardData.rawHtml, text = clipboardData.text, imageDataUri = clipboardData.imageDataUri;
     var document = core.contentDiv.ownerDocument;
     var doc;
-    // Step 2: Fill the BeforePasteEvent object, especially the fragment for paste
-    if (!pasteAsText && !text && imageDataUri) {
-        // Paste image
-        var img = document.createElement('img');
-        img.style.maxWidth = '100%';
-        img.src = imageDataUri;
-        fragment.appendChild(img);
-    }
-    else if (!pasteAsText &&
-        rawHtml && ((_a = (doc = new DOMParser().parseFromString(rawHtml, 'text/html'))) === null || _a === void 0 ? void 0 : _a.body)) {
-        // Paste HTML
+    // Step 2: Retrieve Metadata from Html and the Html that was copied.
+    if (rawHtml && ((_a = (doc = new DOMParser().parseFromString(core.trustedHTMLHandler(rawHtml), 'text/html'))) === null || _a === void 0 ? void 0 : _a.body)) {
         var attributes = (_b = doc.querySelector('html')) === null || _b === void 0 ? void 0 : _b.attributes;
         (attributes ? roosterjs_editor_dom_1.toArray(attributes) : []).reduce(function (attrs, attr) {
             attrs[attr.name] = attr.value;
@@ -4345,6 +4501,10 @@ exports.createPasteFragment = function (core, clipboardData, position, pasteAsTe
             attrs[meta.name] = meta.content;
             return attrs;
         }, event.htmlAttributes);
+        clipboardData.htmlFirstLevelChildTags = [];
+        doc === null || doc === void 0 ? void 0 : doc.body.childNodes.forEach(function (node) {
+            return clipboardData.htmlFirstLevelChildTags.push(roosterjs_editor_dom_1.getTagOfNode(node));
+        });
         // Move all STYLE nodes into header, and save them into sanitizing options.
         // Because if we directly move them into a fragment, all sheets under STYLE will be lost.
         processStyles(doc, function (style) {
@@ -4356,16 +4516,25 @@ exports.createPasteFragment = function (core, clipboardData, position, pasteAsTe
         if (startIndex >= 0 && endIndex >= startIndex + START_FRAGMENT.length) {
             event.htmlBefore = rawHtml.substr(0, startIndex);
             event.htmlAfter = rawHtml.substr(endIndex + END_FRAGMENT.length);
-            doc.body.innerHTML = clipboardData.html = rawHtml.substring(startIndex + START_FRAGMENT.length, endIndex);
+            clipboardData.html = rawHtml.substring(startIndex + START_FRAGMENT.length, endIndex);
+            doc.body.innerHTML = core.trustedHTMLHandler(clipboardData.html);
             // Remove style nodes just added by setting innerHTML of body since we already have all
             // style nodes in header.
             // Here we use doc.body instead of doc because we only want to remove STYLE nodes under BODY
             // and the nodes under HEAD are still used when convert global CSS to inline
             processStyles(doc.body, function (style) { var _a; return (_a = style.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(style); });
         }
-        while (doc.body.firstChild) {
-            fragment.appendChild(doc.body.firstChild);
-        }
+    }
+    // Step 3: Fill the BeforePasteEvent object, especially the fragment for paste
+    if (!pasteAsText && !text && imageDataUri) {
+        // Paste image
+        var img = document.createElement('img');
+        img.style.maxWidth = '100%';
+        img.src = imageDataUri;
+        fragment.appendChild(img);
+    }
+    else if (!pasteAsText && rawHtml && doc ? doc.body : false) {
+        roosterjs_editor_dom_1.moveChildNodes(fragment, doc.body);
         if (applyCurrentStyle && position) {
             var format_1 = getCurrentFormat(core, position.node);
             roosterjs_editor_dom_1.applyTextStyle(fragment, function (node) { return roosterjs_editor_dom_1.applyFormat(node, format_1); });
@@ -4398,16 +4567,16 @@ exports.createPasteFragment = function (core, clipboardData, position, pasteAsTe
             }
         });
     }
-    // Step 3: Trigger BeforePasteEvent so that plugins can do proper change before paste
+    // Step 4: Trigger BeforePasteEvent so that plugins can do proper change before paste
     core.api.triggerEvent(core, event, true /*broadcast*/);
-    // Step 4. Sanitize the fragment before paste to make sure the content is safe
+    // Step 5. Sanitize the fragment before paste to make sure the content is safe
     var sanitizer = new roosterjs_editor_dom_1.HtmlSanitizer(event.sanitizingOption);
     sanitizer.convertGlobalCssToInlineCss(fragment);
     sanitizer.sanitize(fragment, position && roosterjs_editor_dom_1.getInheritableStyles(position.element));
     return fragment;
 };
 function getCurrentFormat(core, node) {
-    var pendableFormat = roosterjs_editor_dom_1.getPendableFormatState(core.contentDiv.ownerDocument);
+    var pendableFormat = core.api.getPendableFormatState(core, true /** forceGetStateFromDOM*/);
     var styleBasedFormat = core.api.getStyleBasedFormatState(core, node);
     return {
         fontFamily: styleBasedFormat.fontName,
@@ -4472,7 +4641,7 @@ exports.ensureTypeInContainer = function (core, position, keyboardEvent) {
         // 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 = roosterjs_editor_dom_1.fromHtml(roosterjs_editor_dom_1.Browser.isEdge ? '<div><span><br></span></div>' : '<div><br></div>', core.contentDiv.ownerDocument)[0];
+        formatNode = roosterjs_editor_dom_1.createElement(1 /* EmptyLine */, core.contentDiv.ownerDocument);
         core.api.insertNode(core, formatNode, {
             position: 1 /* End */,
             updateCursor: false,
@@ -4620,6 +4789,98 @@ function cloneNode(node) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/coreApi/getPendableFormatState.ts":
+/*!******************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/coreApi/getPendableFormatState.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");
+/**
+ * @internal
+ * @param core The EditorCore object
+ * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
+ * @returns The cached format state if it exists. If the cached postion do not exist, search for pendable elements in the DOM tree and return the pendable format state.
+ */
+exports.getPendableFormatState = function (core, forceGetStateFromDOM) {
+    var _a;
+    var range = core.api.getSelectionRange(core, true /* tryGetFromCache*/);
+    var cachedPendableFormatState = core.pendingFormatState.pendableFormatState;
+    var cachedPosition = (_a = core.pendingFormatState.pendableFormatPosition) === null || _a === void 0 ? void 0 : _a.normalize();
+    var currentPosition = range && roosterjs_editor_dom_1.Position.getStart(range).normalize();
+    var isSamePosition = currentPosition && range.collapsed && currentPosition.equalTo(cachedPosition);
+    if (range && cachedPendableFormatState && isSamePosition && !forceGetStateFromDOM) {
+        return cachedPendableFormatState;
+    }
+    else {
+        return currentPosition ? queryCommandStateFromDOM(core, currentPosition) : {};
+    }
+};
+var PendableStyleCheckers = {
+    isBold: function (tag, style) {
+        return tag == 'B' ||
+            tag == 'STRONG' ||
+            parseInt(style.fontWeight) >= 700 ||
+            ['bold', 'bolder'].indexOf(style.fontWeight) >= 0;
+    },
+    isUnderline: function (tag, style) { return tag == 'U' || style.textDecoration.indexOf('underline') >= 0; },
+    isItalic: function (tag, style) { return tag == 'I' || tag == 'EM' || style.fontStyle === 'italic'; },
+    isSubscript: function (tag, style) { return tag == 'SUB' || style.verticalAlign === 'sub'; },
+    isSuperscript: function (tag, style) { return tag == 'SUP' || style.verticalAlign === 'super'; },
+    isStrikeThrough: function (tag, style) {
+        return tag == 'S' || tag == 'STRIKE' || style.textDecoration.indexOf('line-through') >= 0;
+    },
+};
+/**
+ * CssFalsyCheckers checks for non pendable format that might overlay a pendable format, then it can prevent getPendableFormatState return falsy pendable format states.
+ */
+var CssFalsyCheckers = {
+    isBold: function (style) {
+        return (style.fontWeight !== '' && parseInt(style.fontWeight) < 700) ||
+            style.fontWeight === 'normal';
+    },
+    isUnderline: function (style) {
+        return style.textDecoration !== '' && style.textDecoration.indexOf('underline') < 0;
+    },
+    isItalic: function (style) { return style.fontStyle !== '' && style.fontStyle !== 'italic'; },
+    isSubscript: function (style) { return style.verticalAlign !== '' && style.verticalAlign !== 'sub'; },
+    isSuperscript: function (style) { return style.verticalAlign !== '' && style.verticalAlign !== 'super'; },
+    isStrikeThrough: function (style) {
+        return style.textDecoration !== '' && style.textDecoration.indexOf('line-through') < 0;
+    },
+};
+function queryCommandStateFromDOM(core, currentPosition) {
+    var node = currentPosition.node;
+    var formatState = {};
+    var pendablekeys = [];
+    var _loop_1 = function () {
+        var tag = roosterjs_editor_dom_1.getTagOfNode(node);
+        var style = node.nodeType == 1 /* Element */ && node.style;
+        if (tag && style) {
+            Object.keys(PendableStyleCheckers).forEach(function (key) {
+                if (!(pendablekeys.indexOf(key) >= 0)) {
+                    formatState[key] = formatState[key] || PendableStyleCheckers[key](tag, style);
+                    if (CssFalsyCheckers[key](style)) {
+                        pendablekeys.push(key);
+                    }
+                }
+            });
+        }
+        node = node.parentNode;
+    };
+    while (roosterjs_editor_dom_1.contains(core.contentDiv, node)) {
+        _loop_1();
+    }
+    return formatState;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/coreApi/getSelectionRange.ts":
@@ -4758,7 +5019,6 @@ exports.hasFocus = function (core) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var adjustSteps = [handleHyperLink, handleStructuredNode, handleParagraph, handleVoidElement];
 function getInitialRange(core, option) {
     // Selection start replaces based on the current selection.
     // Range inserts based on a provided range.
@@ -4860,19 +5120,17 @@ exports.insertNode = function (core, node, option) {
                 if (option.replaceSelection && !range.collapsed) {
                     range.deleteContents();
                 }
-                var pos_1 = roosterjs_editor_dom_1.Position.getStart(range);
+                var pos = roosterjs_editor_dom_1.Position.getStart(range);
                 var blockElement = void 0;
                 if (option.insertOnNewLine &&
-                    (blockElement = roosterjs_editor_dom_1.getBlockElementAtNode(contentDiv, pos_1.normalize().node))) {
-                    pos_1 = new roosterjs_editor_dom_1.Position(blockElement.getEndNode(), -3 /* After */);
+                    (blockElement = roosterjs_editor_dom_1.getBlockElementAtNode(contentDiv, pos.normalize().node))) {
+                    pos = new roosterjs_editor_dom_1.Position(blockElement.getEndNode(), -3 /* After */);
                 }
                 else {
-                    adjustSteps.forEach(function (handler) {
-                        pos_1 = handler(contentDiv, node, pos_1);
-                    });
+                    pos = roosterjs_editor_dom_1.adjustInsertPosition(contentDiv, node, pos, range);
                 }
                 var nodeForCursor = node.nodeType == 11 /* DocumentFragment */ ? node.lastChild : node;
-                range = roosterjs_editor_dom_1.createRange(pos_1);
+                range = roosterjs_editor_dom_1.createRange(pos);
                 range.insertNode(node);
                 if (option.updateCursor && nodeForCursor) {
                     rangeToRestore = roosterjs_editor_dom_1.createRange(new roosterjs_editor_dom_1.Position(nodeForCursor, -3 /* After */).normalize());
@@ -4883,115 +5141,6 @@ exports.insertNode = function (core, node, option) {
     }, 0 /* LightToDark */);
     return true;
 };
-function handleHyperLink(root, nodeToInsert, position) {
-    var blockElement = roosterjs_editor_dom_1.getBlockElementAtNode(root, position.node);
-    if (blockElement) {
-        // Find the first <A> tag within current block which covers current selection
-        // If there are more than one nested, let's handle the first one only since that is not a common scenario.
-        var anchor = roosterjs_editor_dom_1.queryElements(root, 'a[href]', null /*forEachCallback*/, 1 /* OnSelection */, roosterjs_editor_dom_1.createRange(position)).filter(function (a) { return blockElement.contains(a); })[0];
-        // If this is about to insert node to an empty A tag, clear the A tag and reset position
-        if (anchor && roosterjs_editor_dom_1.isNodeEmpty(anchor)) {
-            position = new roosterjs_editor_dom_1.Position(anchor, -2 /* Before */);
-            safeRemove(anchor);
-            anchor = null;
-        }
-        // If this is about to insert nodes which contains A tag into another A tag, need to break current A tag
-        // otherwise we will have nested A tags which is a wrong HTML structure
-        if (anchor &&
-            nodeToInsert.querySelector &&
-            nodeToInsert.querySelector('a[href]')) {
-            var normalizedPosition = position.normalize();
-            var parentNode = normalizedPosition.node.parentNode;
-            var nextNode = normalizedPosition.node.nodeType == 3 /* Text */
-                ? roosterjs_editor_dom_1.splitTextNode(normalizedPosition.node, normalizedPosition.offset, false /*returnFirstPart*/)
-                : normalizedPosition.isAtEnd
-                    ? normalizedPosition.node.nextSibling
-                    : normalizedPosition.node;
-            var splitter = root.ownerDocument.createTextNode('');
-            parentNode.insertBefore(splitter, nextNode);
-            while (roosterjs_editor_dom_1.contains(anchor, splitter)) {
-                splitter = roosterjs_editor_dom_1.splitBalancedNodeRange(splitter);
-            }
-            position = new roosterjs_editor_dom_1.Position(splitter, -2 /* Before */);
-            safeRemove(splitter);
-        }
-    }
-    return position;
-}
-function handleStructuredNode(root, nodeToInsert, position) {
-    var rootNodeToInsert = nodeToInsert;
-    if (rootNodeToInsert.nodeType == 11 /* DocumentFragment */) {
-        var rootNodes = roosterjs_editor_dom_1.toArray(rootNodeToInsert.childNodes).filter(function (n) { return roosterjs_editor_dom_1.getTagOfNode(n) != 'BR'; });
-        rootNodeToInsert = rootNodes.length == 1 ? rootNodes[0] : null;
-    }
-    var tag = roosterjs_editor_dom_1.getTagOfNode(rootNodeToInsert);
-    var hasBrNextToRoot = tag && roosterjs_editor_dom_1.getTagOfNode(rootNodeToInsert.nextSibling) == 'BR';
-    var listItem = roosterjs_editor_dom_1.findClosestElementAncestor(position.node, root, 'LI');
-    var listNode = listItem && roosterjs_editor_dom_1.findClosestElementAncestor(listItem, root, 'OL,UL');
-    var tdNode = roosterjs_editor_dom_1.findClosestElementAncestor(position.node, root, 'TD,TH');
-    var trNode = tdNode && roosterjs_editor_dom_1.findClosestElementAncestor(tdNode, root, 'TR');
-    if (tag == 'LI') {
-        tag = listNode ? roosterjs_editor_dom_1.getTagOfNode(listNode) : 'UL';
-        rootNodeToInsert = roosterjs_editor_dom_1.wrap(rootNodeToInsert, tag);
-    }
-    if ((tag == 'OL' || tag == 'UL') && roosterjs_editor_dom_1.getTagOfNode(rootNodeToInsert.firstChild) == 'LI') {
-        var shouldInsertListAsText = !rootNodeToInsert.firstChild.nextSibling && !hasBrNextToRoot;
-        if (hasBrNextToRoot && rootNodeToInsert.parentNode) {
-            safeRemove(rootNodeToInsert.nextSibling);
-        }
-        if (shouldInsertListAsText) {
-            roosterjs_editor_dom_1.unwrap(rootNodeToInsert.firstChild);
-            roosterjs_editor_dom_1.unwrap(rootNodeToInsert);
-        }
-        else if (roosterjs_editor_dom_1.getTagOfNode(listNode) == tag) {
-            roosterjs_editor_dom_1.unwrap(rootNodeToInsert);
-            position = new roosterjs_editor_dom_1.Position(listItem, roosterjs_editor_dom_1.isPositionAtBeginningOf(position, listItem)
-                ? -2 /* Before */
-                : -3 /* After */);
-        }
-    }
-    else if (tag == 'TABLE' && trNode) {
-        // When inserting a table into a table, if these tables have the same column count, and
-        // current position is at beginning of a row, then merge these two tables
-        var newTable = new roosterjs_editor_dom_1.VTable(rootNodeToInsert);
-        var currentTable = new roosterjs_editor_dom_1.VTable(tdNode);
-        if (currentTable.col == 0 &&
-            tdNode == currentTable.getCell(currentTable.row, 0).td &&
-            newTable.cells[0] &&
-            newTable.cells[0].length == currentTable.cells[0].length &&
-            roosterjs_editor_dom_1.isPositionAtBeginningOf(position, tdNode)) {
-            if (roosterjs_editor_dom_1.getTagOfNode(rootNodeToInsert.firstChild) == 'TBODY' &&
-                !rootNodeToInsert.firstChild.nextSibling) {
-                roosterjs_editor_dom_1.unwrap(rootNodeToInsert.firstChild);
-            }
-            roosterjs_editor_dom_1.unwrap(rootNodeToInsert);
-            position = new roosterjs_editor_dom_1.Position(trNode, -3 /* After */);
-        }
-    }
-    return position;
-}
-function handleParagraph(root, nodeToInsert, position) {
-    if (roosterjs_editor_dom_1.getTagOfNode(position.node) == 'P') {
-        // Insert into a P tag may cause issues when the inserted content contains any block element.
-        // Change P tag to DIV to make sure it works well
-        var pos = position.normalize();
-        var div = roosterjs_editor_dom_1.changeElementTag(position.node, 'div');
-        if (pos.node != div) {
-            position = pos;
-        }
-    }
-    return position;
-}
-function handleVoidElement(root, nodeToInsert, position) {
-    if (roosterjs_editor_dom_1.isVoidHtmlElement(position.node)) {
-        position = new roosterjs_editor_dom_1.Position(position.node, position.isAtEnd ? -3 /* After */ : -2 /* Before */);
-    }
-    return position;
-}
-function safeRemove(node) {
-    var _a;
-    (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-}
 
 
 /***/ }),
@@ -5112,7 +5261,11 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 exports.setContent = function (core, content, triggerContentChangedEvent) {
     var contentChanged = false;
     if (core.contentDiv.innerHTML != content) {
-        var range = roosterjs_editor_dom_1.setHtmlWithSelectionPath(core.contentDiv, content);
+        core.api.triggerEvent(core, {
+            eventType: 20 /* BeforeSetContent */,
+            newContent: content,
+        }, true /*broadcast*/);
+        var range = roosterjs_editor_dom_1.setHtmlWithSelectionPath(core.contentDiv, content, core.trustedHTMLHandler);
         core.api.selectRange(core, range);
         contentChanged = true;
     }
@@ -5152,9 +5305,7 @@ exports.switchShadowEdit = function (core, isOn) {
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             shadowEditSelectionPath = range && roosterjs_editor_dom_1.getSelectionPath(contentDiv, range);
             shadowEditFragment = core.contentDiv.ownerDocument.createDocumentFragment();
-            while (contentDiv.firstChild) {
-                shadowEditFragment.appendChild(contentDiv.firstChild);
-            }
+            roosterjs_editor_dom_1.moveChildNodes(shadowEditFragment, contentDiv);
             shadowEditFragment.normalize();
             core.api.triggerEvent(core, {
                 eventType: 17 /* EnteredShadowEdit */,
@@ -5164,7 +5315,7 @@ exports.switchShadowEdit = function (core, isOn) {
             lifecycle.shadowEditFragment = shadowEditFragment;
             lifecycle.shadowEditSelectionPath = shadowEditSelectionPath;
         }
-        contentDiv.innerHTML = '';
+        roosterjs_editor_dom_1.moveChildNodes(contentDiv);
         contentDiv.appendChild(lifecycle.shadowEditFragment.cloneNode(true /*deep*/));
     }
     else {
@@ -5174,7 +5325,7 @@ exports.switchShadowEdit = function (core, isOn) {
             core.api.triggerEvent(core, {
                 eventType: 18 /* LeavingShadowEdit */,
             }, false /*broadcast*/);
-            contentDiv.innerHTML = '';
+            roosterjs_editor_dom_1.moveChildNodes(contentDiv);
             contentDiv.appendChild(shadowEditFragment);
             core.api.focus(core);
             if (shadowEditSelectionPath) {
@@ -5338,7 +5489,6 @@ function handledExclusively(event, plugin) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var CONTAINER_HTML = '<div contenteditable style="width: 1px; height: 1px; overflow: hidden; position: fixed; top: 0; left; 0; -webkit-user-select: text"></div>';
 /**
  * @internal
  * Copy and paste plugin for handling onCopy and onPaste event
@@ -5407,7 +5557,7 @@ var CopyPastePlugin = /** @class */ (function () {
         if (originalRange && !originalRange.collapsed) {
             var html = this.editor.getContent(2 /* RawHTMLWithSelection */);
             var tempDiv_1 = this.getTempDiv(true /*forceInLightMode*/);
-            var newRange = roosterjs_editor_dom_1.setHtmlWithSelectionPath(tempDiv_1, html);
+            var newRange = roosterjs_editor_dom_1.setHtmlWithSelectionPath(tempDiv_1, html, this.editor.getTrustedHTMLHandler());
             if (newRange) {
                 roosterjs_editor_dom_1.addRangeToSelection(newRange);
             }
@@ -5432,7 +5582,7 @@ var CopyPastePlugin = /** @class */ (function () {
     CopyPastePlugin.prototype.getTempDiv = function (forceInLightMode) {
         var _this = this;
         var div = this.editor.getCustomData('CopyPasteTempDiv', function () {
-            var tempDiv = roosterjs_editor_dom_1.fromHtml(CONTAINER_HTML, _this.editor.getDocument())[0];
+            var tempDiv = roosterjs_editor_dom_1.createElement(3 /* CopyPasteTempDiv */, _this.editor.getDocument());
             _this.editor.insertNode(tempDiv, {
                 position: 4 /* Outside */,
             });
@@ -5451,7 +5601,7 @@ var CopyPastePlugin = /** @class */ (function () {
         tempDiv.style.backgroundColor = '';
         tempDiv.style.color = '';
         tempDiv.style.display = 'none';
-        tempDiv.innerHTML = '';
+        roosterjs_editor_dom_1.moveChildNodes(tempDiv);
     };
     return CopyPastePlugin;
 }());
@@ -5755,7 +5905,7 @@ exports.default = EditPlugin;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var ENTITY_ID_REGEX = /_\d{1,8}$/;
+var ENTITY_ID_REGEX = /_(\d{1,8})$/;
 var ENTITY_CSS_REGEX = '^' + "_Entity" /* ENTITY_INFO_NAME */ + '$';
 var ENTITY_ID_CSS_REGEX = '^' + "_EId_" /* ENTITY_ID_PREFIX */;
 var ENTITY_TYPE_CSS_REGEX = '^' + "_EType_" /* ENTITY_TYPE_PREFIX */;
@@ -5766,6 +5916,12 @@ var ALLOWED_CSS_CLASSES = [
     ENTITY_TYPE_CSS_REGEX,
     ENTITY_READONLY_CSS_REGEX,
 ];
+var REMOVE_ENTITY_OPERATIONS = [
+    6 /* Overwrite */,
+    7 /* PartialOverwrite */,
+    4 /* RemoveFromStart */,
+    5 /* RemoveFromEnd */,
+];
 /**
  * @internal
  * Entity Plugin helps handle all operations related to an entity and generate entity specified events
@@ -5782,9 +5938,28 @@ var EntityPlugin = /** @class */ (function () {
                 _this.checkRemoveEntityForRange(event);
             }
         };
+        this.workaroundShadowDOMIssueForChrome = function () {
+            var cache = {};
+            _this.cacheShadowEntities(cache);
+            _this.editor.runAsync(function () {
+                Object.keys(cache).forEach(function (id) {
+                    var entity = roosterjs_editor_dom_1.getEntityFromElement(cache[id]);
+                    var newWrapper = _this.editor.queryElements(roosterjs_editor_dom_1.getEntitySelector(entity.type, entity.id))[0];
+                    if (newWrapper != entity.wrapper) {
+                        _this.triggerEvent(entity.wrapper, 10 /* RemoveShadowRoot */);
+                        _this.setIsEntityKnown(entity.wrapper, false /*isKnown*/);
+                        if (newWrapper) {
+                            roosterjs_editor_dom_1.moveChildNodes(newWrapper, entity.wrapper);
+                            _this.createShadowRoot(newWrapper, entity.wrapper.shadowRoot);
+                            _this.setIsEntityKnown(newWrapper, true /*isKnown*/);
+                        }
+                    }
+                });
+            });
+        };
         this.state = {
-            clickingPoint: null,
             knownEntityElements: [],
+            shadowEntityCache: {},
         };
     }
     /**
@@ -5799,6 +5974,27 @@ var EntityPlugin = /** @class */ (function () {
      */
     EntityPlugin.prototype.initialize = function (editor) {
         this.editor = editor;
+        // Workaround an issue for Chrome that when Delete or Backsapce, shadow DOM may be lost in editor
+        if (roosterjs_editor_dom_1.Browser.isChrome || roosterjs_editor_dom_1.Browser.isSafari) {
+            this.editor.addContentEditFeature({
+                keys: [8 /* BACKSPACE */, 46 /* DELETE */],
+                shouldHandleEvent: function () { return true; },
+                handleEvent: this.workaroundShadowDOMIssueForChrome,
+            });
+        }
+    };
+    /**
+     * Check if the plugin should handle the given event exclusively.
+     * Handle an event exclusively means other plugin will not receive this event in
+     * onPluginEvent method.
+     * If two plugins will return true in willHandleEventExclusively() for the same event,
+     * the final result depends on the order of the plugins are added into editor
+     * @param event The event to check
+     */
+    EntityPlugin.prototype.willHandleEventExclusively = function (event) {
+        var _a;
+        return (event.eventType == 1 /* KeyPress */ &&
+            !!((_a = event.rawEvent.target) === null || _a === void 0 ? void 0 : _a.shadowRoot));
     };
     /**
      * Dispose this plugin
@@ -5806,7 +6002,6 @@ var EntityPlugin = /** @class */ (function () {
     EntityPlugin.prototype.dispose = function () {
         this.editor = null;
         this.state.knownEntityElements = [];
-        this.state.clickingPoint = null;
     };
     /**
      * Get plugin state object
@@ -5820,11 +6015,8 @@ var EntityPlugin = /** @class */ (function () {
      */
     EntityPlugin.prototype.onPluginEvent = function (event) {
         switch (event.eventType) {
-            case 5 /* MouseDown */:
-                this.handleMouseDownEvent(event.rawEvent);
-                break;
             case 6 /* MouseUp */:
-                this.handleMouseUpEvent(event.rawEvent);
+                this.handleMouseUpEvent(event);
                 break;
             case 0 /* KeyDown */:
                 this.handleKeyDownEvent(event.rawEvent);
@@ -5835,13 +6027,13 @@ var EntityPlugin = /** @class */ (function () {
                 }
                 break;
             case 10 /* BeforePaste */:
-                this.handleBeforePasteEvent(event.fragment, event.sanitizingOption);
+                this.handleBeforePasteEvent(event.sanitizingOption);
                 break;
             case 7 /* ContentChanged */:
-                this.handleContentChangedEvent(event.source == "SetContent" /* SetContent */);
+                this.handleContentChangedEvent(event);
                 break;
             case 11 /* EditorReady */:
-                this.handleContentChangedEvent(true /*resetAll*/);
+                this.handleContentChangedEvent();
                 break;
             case 8 /* ExtractContentWithDom */:
                 this.handleExtractContentWithDomEvent(event.clonedRoot);
@@ -5849,6 +6041,12 @@ var EntityPlugin = /** @class */ (function () {
             case 16 /* ContextMenu */:
                 this.handleContextMenuEvent(event.rawEvent);
                 break;
+            case 20 /* BeforeSetContent */:
+                this.handleBeforeSetContentEvent();
+                break;
+            case 15 /* EntityOperation */:
+                this.handleEntityOperationEvent(event);
+                break;
         }
     };
     EntityPlugin.prototype.handleContextMenuEvent = function (event) {
@@ -5859,63 +6057,83 @@ var EntityPlugin = /** @class */ (function () {
             this.triggerEvent(entityElement, 2 /* ContextMenu */, event);
         }
     };
-    EntityPlugin.prototype.handleMouseDownEvent = function (event) {
-        var target = event.target, pageX = event.pageX, pageY = event.pageY;
-        var node = target;
-        var entityElement = node && this.editor.getElementAtCursor(roosterjs_editor_dom_1.getEntitySelector(), node);
-        if (entityElement && !entityElement.isContentEditable) {
-            event.preventDefault();
-            this.state.clickingPoint = { pageX: pageX, pageY: pageY };
-        }
-    };
     EntityPlugin.prototype.handleMouseUpEvent = function (event) {
-        var target = event.target, pageX = event.pageX, pageY = event.pageY;
-        var node = target;
+        var rawEvent = event.rawEvent, isClicking = event.isClicking;
+        var node = rawEvent.target;
         var entityElement;
-        if (this.state.clickingPoint &&
-            this.state.clickingPoint.pageX == pageX &&
-            this.state.clickingPoint.pageY == pageY &&
+        if (isClicking &&
             node &&
             !!(entityElement = this.editor.getElementAtCursor(roosterjs_editor_dom_1.getEntitySelector(), node))) {
-            event.preventDefault();
-            this.triggerEvent(entityElement, 1 /* Click */, event);
+            this.triggerEvent(entityElement, 1 /* Click */, rawEvent);
             workaroundSelectionIssueForIE(this.editor);
         }
-        this.state.clickingPoint = null;
     };
     EntityPlugin.prototype.handleKeyDownEvent = function (event) {
         if (roosterjs_editor_dom_1.isCharacterValue(event) ||
             event.which == 8 /* BACKSPACE */ ||
-            event.which == 46 /* DELETE */) {
+            event.which == 46 /* DELETE */ ||
+            event.which == 13 /* ENTER */) {
             var range = this.editor.getSelectionRange();
-            if (!range.collapsed) {
+            if (range && !range.collapsed) {
                 this.checkRemoveEntityForRange(event);
             }
         }
     };
-    EntityPlugin.prototype.handleBeforePasteEvent = function (fragment, sanitizingOption) {
+    EntityPlugin.prototype.handleBeforePasteEvent = function (sanitizingOption) {
         var range = this.editor.getSelectionRange();
         if (!range.collapsed) {
             this.checkRemoveEntityForRange(null /*rawEvent*/);
         }
         roosterjs_editor_dom_1.arrayPush(sanitizingOption.additionalAllowedCssClasses, ALLOWED_CSS_CLASSES);
     };
-    EntityPlugin.prototype.handleContentChangedEvent = function (resetAll) {
+    EntityPlugin.prototype.handleBeforeSetContentEvent = function () {
+        this.cacheShadowEntities(this.state.shadowEntityCache);
+    };
+    EntityPlugin.prototype.handleContentChangedEvent = function (event) {
         var _this = this;
-        this.state.knownEntityElements = resetAll
-            ? []
-            : this.state.knownEntityElements.filter(function (node) { return _this.editor.contains(node); });
-        var allId = this.state.knownEntityElements
+        // 1. find removed entities
+        for (var i = this.state.knownEntityElements.length - 1; i >= 0; i--) {
+            var element = this.state.knownEntityElements[i];
+            if (!this.editor.contains(element)) {
+                this.setIsEntityKnown(element, false /*isKnown*/);
+                if (element.shadowRoot) {
+                    this.triggerEvent(element, 10 /* RemoveShadowRoot */);
+                }
+            }
+        }
+        // 2. collect all new entities
+        var knownIds = this.state.knownEntityElements
             .map(function (e) { var _a; return (_a = roosterjs_editor_dom_1.getEntityFromElement(e)) === null || _a === void 0 ? void 0 : _a.id; })
             .filter(function (x) { return !!x; });
-        this.editor.queryElements(roosterjs_editor_dom_1.getEntitySelector(), function (element) {
-            if (_this.state.knownEntityElements.indexOf(element) < 0) {
-                _this.state.knownEntityElements.push(element);
-                var entity = roosterjs_editor_dom_1.getEntityFromElement(element);
-                _this.hydrateEntity(entity, allId);
-            }
+        var newEntities = (event === null || event === void 0 ? void 0 : event.source) == "InsertEntity" /* InsertEntity */ && event.data
+            ? [event.data]
+            : this.getExistingEntities().filter(function (_a) {
+                var wrapper = _a.wrapper;
+                return !_this.isEntityKnown(wrapper);
+            });
+        // 3. Add new entities to known entity list, and hydrate
+        newEntities.forEach(function (entity) {
+            var wrapper = entity.wrapper, type = entity.type, id = entity.id, isReadonly = entity.isReadonly;
+            entity.id = _this.ensureUniqueId(type, id, knownIds);
+            roosterjs_editor_dom_1.commitEntity(wrapper, type, isReadonly, entity.id); // Use entity.id here because it is newly updated
+            _this.handleNewEntity(entity);
+        });
+        Object.keys(this.state.shadowEntityCache).forEach(function (id) {
+            _this.triggerEvent(_this.state.shadowEntityCache[id], 6 /* Overwrite */);
+            delete _this.state.shadowEntityCache[id];
         });
     };
+    EntityPlugin.prototype.handleEntityOperationEvent = function (event) {
+        var _this = this;
+        var _a;
+        if (REMOVE_ENTITY_OPERATIONS.indexOf(event.operation) >= 0) {
+            (_a = this.cancelAsyncRun) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.cancelAsyncRun = this.editor.runAsync(function () {
+                _this.cancelAsyncRun = null;
+                _this.handleContentChangedEvent();
+            });
+        }
+    };
     EntityPlugin.prototype.handleExtractContentWithDomEvent = function (root) {
         var _this = this;
         roosterjs_editor_dom_1.toArray(root.querySelectorAll(roosterjs_editor_dom_1.getEntitySelector())).forEach(function (element) {
@@ -5945,8 +6163,71 @@ var EntityPlugin = /** @class */ (function () {
             });
         }
     };
-    EntityPlugin.prototype.hydrateEntity = function (entity, knownIds) {
-        var id = entity.id, type = entity.type, wrapper = entity.wrapper, isReadonly = entity.isReadonly;
+    EntityPlugin.prototype.triggerEvent = function (element, operation, rawEvent, contentForShadowEntity) {
+        var entity = element && roosterjs_editor_dom_1.getEntityFromElement(element);
+        if (entity) {
+            this.editor.triggerPluginEvent(15 /* EntityOperation */, {
+                operation: operation,
+                rawEvent: rawEvent,
+                entity: entity,
+                contentForShadowEntity: contentForShadowEntity,
+            });
+        }
+    };
+    EntityPlugin.prototype.handleNewEntity = function (entity) {
+        var wrapper = entity.wrapper;
+        var fragment = this.editor.getDocument().createDocumentFragment();
+        var cache = this.state.shadowEntityCache[entity.id];
+        delete this.state.shadowEntityCache[entity.id];
+        if (cache === null || cache === void 0 ? void 0 : cache.shadowRoot) {
+            roosterjs_editor_dom_1.moveChildNodes(fragment, cache.shadowRoot);
+        }
+        this.triggerEvent(wrapper, 0 /* NewEntity */, undefined /*rawEvent*/, fragment);
+        // If there is element to hydrate for shadow entity, craete shadow root and mount these elements to shadow root
+        // Then trigger AddShadowRoot so that plugins can do further actions
+        if (fragment.firstChild) {
+            if (wrapper.shadowRoot) {
+                roosterjs_editor_dom_1.moveChildNodes(wrapper.shadowRoot, fragment);
+            }
+            else {
+                this.createShadowRoot(wrapper, fragment);
+            }
+        }
+        else if (wrapper.shadowRoot) {
+            // If no elements to hydrate, remove existing shadow root by cloning a new node
+            this.triggerEvent(wrapper, 10 /* RemoveShadowRoot */);
+            var newWrapper = wrapper.cloneNode();
+            roosterjs_editor_dom_1.moveChildNodes(newWrapper, wrapper);
+            this.editor.replaceNode(wrapper, newWrapper);
+            entity.wrapper = newWrapper;
+        }
+        this.setIsEntityKnown(entity.wrapper, true /*isKnown*/);
+    };
+    EntityPlugin.prototype.getExistingEntities = function (shadowEntityOnly) {
+        return this.editor
+            .queryElements(roosterjs_editor_dom_1.getEntitySelector())
+            .map(roosterjs_editor_dom_1.getEntityFromElement)
+            .filter(function (x) { return !!x && (!shadowEntityOnly || !!x.wrapper.shadowRoot); });
+    };
+    EntityPlugin.prototype.createShadowRoot = function (wrapper, shadowContentContainer) {
+        if (wrapper.attachShadow) {
+            var shadowRoot = wrapper.attachShadow({
+                mode: 'open',
+                delegatesFocus: true,
+            });
+            wrapper.contentEditable = 'false';
+            this.triggerEvent(wrapper, 9 /* AddShadowRoot */);
+            roosterjs_editor_dom_1.moveChildNodes(shadowRoot, shadowContentContainer);
+            return shadowRoot;
+        }
+    };
+    EntityPlugin.prototype.cacheShadowEntities = function (cache) {
+        this.getExistingEntities(true /*shadowEntityOnly*/).forEach(function (_a) {
+            var wrapper = _a.wrapper, id = _a.id;
+            cache[id] = wrapper;
+        });
+    };
+    EntityPlugin.prototype.ensureUniqueId = function (type, id, knownIds) {
         var match = ENTITY_ID_REGEX.exec(id);
         var baseId = (match ? id.substr(0, id.length - match[0].length) : id) || type;
         // Make sure entity id is unique
@@ -5958,18 +6239,19 @@ var EntityPlugin = /** @class */ (function () {
                 break;
             }
         }
-        roosterjs_editor_dom_1.commitEntity(wrapper, type, isReadonly, newId);
-        this.triggerEvent(wrapper, 0 /* NewEntity */);
+        return newId;
     };
-    EntityPlugin.prototype.triggerEvent = function (element, operation, rawEvent) {
-        var entity = element && roosterjs_editor_dom_1.getEntityFromElement(element);
-        if (entity) {
-            this.editor.triggerPluginEvent(15 /* EntityOperation */, {
-                operation: operation,
-                rawEvent: rawEvent,
-                entity: entity,
-            });
+    EntityPlugin.prototype.setIsEntityKnown = function (wrapper, isKnown) {
+        var index = this.state.knownEntityElements.indexOf(wrapper);
+        if (isKnown && index < 0) {
+            this.state.knownEntityElements.push(wrapper);
         }
+        else if (!isKnown && index >= 0) {
+            this.state.knownEntityElements.splice(index, 1);
+        }
+    };
+    EntityPlugin.prototype.isEntityKnown = function (wrapper) {
+        return this.state.knownEntityElements.indexOf(wrapper) >= 0;
     };
     return EntityPlugin;
 }());
@@ -5982,13 +6264,10 @@ var workaroundSelectionIssueForIE = roosterjs_editor_dom_1.Browser.isIE
     ? function (editor) {
         editor.runAsync(function (editor) {
             var workaroundButton = editor.getCustomData('ENTITY_IE_FOCUS_BUTTON', function () {
-                var button = editor.getDocument().createElement('button');
-                button.style.overflow = 'hidden';
-                button.style.position = 'fixed';
-                button.style.width = '0';
-                button.style.height = '0';
-                button.style.left = '0';
-                button.style.top = '-1000px';
+                var button = roosterjs_editor_dom_1.createElement({
+                    tag: 'button',
+                    style: 'overflow:hidden;position:fixed;width:0;height:0;top:-1000px',
+                }, editor.getDocument());
                 button.onblur = function () {
                     button.style.display = 'none';
                 };
@@ -5998,13 +6277,7 @@ var workaroundSelectionIssueForIE = roosterjs_editor_dom_1.Browser.isIE
                 return button;
             });
             workaroundButton.style.display = '';
-            var range = editor.getDocument().createRange();
-            range.setStart(workaroundButton, 0);
-            try {
-                window.getSelection().removeAllRanges();
-                window.getSelection().addRange(range);
-            }
-            catch (_a) { }
+            roosterjs_editor_dom_1.addRangeToSelection(roosterjs_editor_dom_1.createRange(workaroundButton, 0));
         });
     }
     : function () { };
@@ -6357,102 +6630,35 @@ var PendingFormatStatePlugin = /** @class */ (function () {
      */
     PendingFormatStatePlugin.prototype.onPluginEvent = function (event) {
         switch (event.eventType) {
-            case 13 /* PendingFormatStateChanged */:
-                // Got PendingFormatStateChanged event, cache current position and pending format
-                this.state.pendableFormatPosition = this.getCurrentPosition();
-                this.state.pendableFormatState = event.formatState;
-                break;
-            case 0 /* KeyDown */:
-            case 5 /* MouseDown */:
-            case 7 /* ContentChanged */:
-                // If content or position is changed (by keyboard, mouse, or code),
-                // check if current position is still the same with the cached one (if exist),
-                // and clear cached format if position is changed since it is out-of-date now
-                if (this.state.pendableFormatPosition &&
-                    !this.state.pendableFormatPosition.equalTo(this.getCurrentPosition())) {
-                    this.clear();
-                }
-                break;
-        }
-    };
-    PendingFormatStatePlugin.prototype.clear = function () {
-        this.state.pendableFormatPosition = null;
-        this.state.pendableFormatState = null;
-    };
-    PendingFormatStatePlugin.prototype.getCurrentPosition = function () {
-        var range = this.editor.getSelectionRange();
-        return range && roosterjs_editor_dom_1.Position.getStart(range).normalize();
-    };
-    return PendingFormatStatePlugin;
-}());
-exports.default = PendingFormatStatePlugin;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-core/lib/corePlugins/TypeAfterLinkPlugin.ts":
-/*!*******************************************************************************!*\
-  !*** ./packages/roosterjs-editor-core/lib/corePlugins/TypeAfterLinkPlugin.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");
-/**
- * @internal
- * TypeAfterLinkPlugin Component helps handle typing event when cursor is right after a link.
- * When typing/pasting after a link, browser may put the new character inside link.
- * This plugin overrides this behavior to always insert outside of link.
- */
-var TypeAfterLinkPlugin = /** @class */ (function () {
-    function TypeAfterLinkPlugin() {
-    }
-    /**
-     * Get a friendly name of  this plugin
-     */
-    TypeAfterLinkPlugin.prototype.getName = function () {
-        return 'TypeAfterLink';
-    };
-    /**
-     * Initialize this plugin. This should only be called from Editor
-     * @param editor Editor instance
-     */
-    TypeAfterLinkPlugin.prototype.initialize = function (editor) {
-        this.editor = editor;
-    };
-    /**
-     * Dispose this plugin
-     */
-    TypeAfterLinkPlugin.prototype.dispose = function () {
-        this.editor = null;
-    };
-    /**
-     * Handle events triggered from editor
-     * @param event PluginEvent object
-     */
-    TypeAfterLinkPlugin.prototype.onPluginEvent = function (event) {
-        if ((roosterjs_editor_dom_1.Browser.isFirefox && event.eventType == 1 /* KeyPress */) ||
-            event.eventType == 10 /* BeforePaste */) {
-            var range = this.editor.getSelectionRange();
-            if (range && range.collapsed && this.editor.getElementAtCursor('A[href]')) {
-                var searcher = this.editor.getContentSearcherOfCursor(event);
-                var inlineElementBefore = searcher.getInlineElementBefore();
-                var inlineElementAfter = searcher.getInlineElementAfter();
-                if (inlineElementBefore instanceof roosterjs_editor_dom_1.LinkInlineElement) {
-                    this.editor.select(inlineElementBefore.getContainerNode(), -3 /* After */);
-                }
-                else if (inlineElementAfter instanceof roosterjs_editor_dom_1.LinkInlineElement) {
-                    this.editor.select(inlineElementAfter.getContainerNode(), -2 /* Before */);
+            case 13 /* PendingFormatStateChanged */:
+                // Got PendingFormatStateChanged event, cache current position and pending format
+                this.state.pendableFormatPosition = this.getCurrentPosition();
+                this.state.pendableFormatState = event.formatState;
+                break;
+            case 0 /* KeyDown */:
+            case 5 /* MouseDown */:
+            case 7 /* ContentChanged */:
+                // If content or position is changed (by keyboard, mouse, or code),
+                // check if current position is still the same with the cached one (if exist),
+                // and clear cached format if position is changed since it is out-of-date now
+                if (this.state.pendableFormatPosition &&
+                    !this.state.pendableFormatPosition.equalTo(this.getCurrentPosition())) {
+                    this.clear();
                 }
-            }
+                break;
         }
     };
-    return TypeAfterLinkPlugin;
+    PendingFormatStatePlugin.prototype.clear = function () {
+        this.state.pendableFormatPosition = null;
+        this.state.pendableFormatState = null;
+    };
+    PendingFormatStatePlugin.prototype.getCurrentPosition = function () {
+        var range = this.editor.getSelectionRange();
+        return range && roosterjs_editor_dom_1.Position.getStart(range).normalize();
+    };
+    return PendingFormatStatePlugin;
 }());
-exports.default = TypeAfterLinkPlugin;
+exports.default = PendingFormatStatePlugin;
 
 
 /***/ }),
@@ -6508,7 +6714,9 @@ var TypeInContainerPlugin = /** @class */ (function () {
             //
             // Only schedule when the range is not collapsed to catch this edge case.
             var range = this.editor.getSelectionRange();
-            if (!range || this.editor.contains(roosterjs_editor_dom_1.findClosestElementAncestor(range.startContainer))) {
+            var shouldAlwaysApplyDefaultFormat = this.editor.isFeatureEnabled("AlwaysApplyDefaultFormat" /* AlwaysApplyDefaultFormat */);
+            if (!range ||
+                this.editor.contains(roosterjs_editor_dom_1.findClosestElementAncestor(range.startContainer, null /* root */, shouldAlwaysApplyDefaultFormat ? '[style]' : null /*selector*/))) {
                 return;
             }
             if (range.collapsed) {
@@ -6735,13 +6943,8 @@ var EntityPlugin_1 = __webpack_require__(/*! ./EntityPlugin */ "./packages/roost
 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 PendingFormatStatePlugin_1 = __webpack_require__(/*! ./PendingFormatStatePlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/PendingFormatStatePlugin.ts");
-var TypeAfterLinkPlugin_1 = __webpack_require__(/*! ./TypeAfterLinkPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/TypeAfterLinkPlugin.ts");
 var TypeInContainerPlugin_1 = __webpack_require__(/*! ./TypeInContainerPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/TypeInContainerPlugin.ts");
 var UndoPlugin_1 = __webpack_require__(/*! ./UndoPlugin */ "./packages/roosterjs-editor-core/lib/corePlugins/UndoPlugin.ts");
-/**
- * @internal
- */
-exports.PLACEHOLDER_PLUGIN_NAME = '_placeholder';
 /**
  * @internal
  * Create Core Plugins
@@ -6756,7 +6959,7 @@ function createCorePlugins(contentDiv, options) {
         typeInContainer: map.typeInContainer || new TypeInContainerPlugin_1.default(),
         edit: map.edit || new EditPlugin_1.default(),
         _placeholder: null,
-        typeAfterLink: map.typeAfterLink || new TypeAfterLinkPlugin_1.default(),
+        typeAfterLink: null,
         undo: map.undo || new UndoPlugin_1.default(options),
         domEvent: map.domEvent || new DOMEventPlugin_1.default(options, contentDiv),
         pendingFormatState: map.pendingFormatState || new PendingFormatStatePlugin_1.default(),
@@ -6833,14 +7036,14 @@ var Editor = /** @class */ (function () {
         var corePlugins = createCorePlugins_1.default(contentDiv, options);
         var plugins = [];
         Object.keys(corePlugins).forEach(function (name) {
-            if (name == createCorePlugins_1.PLACEHOLDER_PLUGIN_NAME) {
+            if (name == '_placeholder') {
                 roosterjs_editor_dom_1.arrayPush(plugins, options.plugins);
             }
             else {
                 plugins.push(corePlugins[name]);
             }
         });
-        this.core = __assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), plugins: plugins.filter(function (x) { return !!x; }) }, createCorePlugins_1.getPluginState(corePlugins));
+        this.core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), plugins: plugins.filter(function (x) { return !!x; }) }, createCorePlugins_1.getPluginState(corePlugins)), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }) });
         // 3. Initialize plugins
         this.core.plugins.forEach(function (plugin) { return plugin.initialize(_this); });
         // 4. Ensure user will type in a container node, not the editor content DIV
@@ -6973,9 +7176,11 @@ var Editor = /** @class */ (function () {
      *  insertOnNewLine: false
      */
     Editor.prototype.insertContent = function (content, option) {
+        var _a;
         if (content) {
             var doc = this.getDocument();
-            var allNodes = roosterjs_editor_dom_1.fromHtml(content, doc);
+            var body = (_a = new DOMParser().parseFromString(this.core.trustedHTMLHandler(content), 'text/html')) === null || _a === void 0 ? void 0 : _a.body;
+            var allNodes = (body === null || body === void 0 ? void 0 : body.childNodes) ? roosterjs_editor_dom_1.toArray(body.childNodes) : [];
             // If it is to insert on new line, and there are more than one node in the collection, wrap all nodes with
             // a parent DIV before calling insertNode on each top level sub node. Otherwise, every sub node may get wrapped
             // separately to show up on its own line
@@ -7275,15 +7480,19 @@ var Editor = /** @class */ (function () {
     /**
      * Run a callback function asynchronously
      * @param callback The callback function to run
+     * @returns a function to cancel this async run
      */
     Editor.prototype.runAsync = function (callback) {
         var _this = this;
         var win = this.core.contentDiv.ownerDocument.defaultView || window;
-        win.requestAnimationFrame(function () {
+        var handle = win.requestAnimationFrame(function () {
             if (!_this.isDisposed() && callback) {
                 callback(_this);
             }
         });
+        return function () {
+            win.cancelAnimationFrame(handle);
+        };
     };
     /**
      * Set DOM attribute of editor content DIV
@@ -7351,6 +7560,14 @@ var Editor = /** @class */ (function () {
         }
         return this.core.api.getStyleBasedFormatState(this.core, node);
     };
+    /**
+     * Get the pendable format such as underline and bold
+     * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
+     * @returns The pending format state
+     */
+    Editor.prototype.getPendableFormatState = function (forceGetStateFromDOM) {
+        return this.core.api.getPendableFormatState(this.core, forceGetStateFromDOM);
+    };
     /**
      * Ensure user will type into a container element rather than into the editor content DIV directly
      * @param position The position that user is about to type to
@@ -7410,6 +7627,15 @@ var Editor = /** @class */ (function () {
     Editor.prototype.isFeatureEnabled = function (feature) {
         return this.core.lifecycle.experimentalFeatures.indexOf(feature) >= 0;
     };
+    /**
+     * Get a function to convert HTML string to trusted HTML string.
+     * By default it will just return the input HTML directly. To override this behavior,
+     * pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler
+     * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
+     */
+    Editor.prototype.getTrustedHTMLHandler = function () {
+        return this.core.trustedHTMLHandler;
+    };
     return Editor;
 }());
 exports.default = Editor;
@@ -8791,7 +9017,7 @@ exports.default = getEntityFromElement;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * @internal Get a selector string for specified entity type and id
+ * Get a selector string for specified entity type and id
  * @param type (Optional) Type of entity
  * @param id (Optional) Id of entity
  */
@@ -8904,14 +9130,17 @@ exports.default = isCharacterValue;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var Browser_1 = __webpack_require__(/*! ../utils/Browser */ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts");
+var isCtrlOrMetaPressedImpl = Browser_1.Browser.isMac
+    ? function (event) { return event.metaKey; }
+    : function (event) { return event.ctrlKey; };
 /**
  * Check if Ctrl key (Windows) or Meta key (Mac) is pressed for the given Event
  * @param event A Keyboard event or Mouse event object
  * @returns True if Ctrl key is pressed on Windows or Meta key is pressed on Mac
  */
-var isCtrlOrMetaPressed = Browser_1.Browser.isMac
-    ? function (event) { return event.metaKey; }
-    : function (event) { return event.ctrlKey; };
+function isCtrlOrMetaPressed(event) {
+    return isCtrlOrMetaPressedImpl(event);
+}
 exports.default = isCtrlOrMetaPressed;
 
 
@@ -9025,7 +9254,7 @@ var HtmlSanitizer = /** @class */ (function () {
      */
     HtmlSanitizer.prototype.exec = function (html, convertCssOnly, currentStyles) {
         var parser = new DOMParser();
-        var doc = parser.parseFromString(html || '', 'text/html');
+        var doc = parser.parseFromString(unsafeConvertToTrustedHTML(html) || '', 'text/html');
         if (doc && doc.body && doc.body.firstChild) {
             this.convertGlobalCssToInlineCss(doc);
             if (!convertCssOnly) {
@@ -9231,6 +9460,15 @@ var HtmlSanitizer = /** @class */ (function () {
     return HtmlSanitizer;
 }());
 exports.default = HtmlSanitizer;
+var trustedTypes = window.trustedTypes;
+var policy = trustedTypes === null || trustedTypes === void 0 ? void 0 : trustedTypes.createPolicy('roosterjsUnsafeConvertHTML', {
+    // This is unsafe. However, we only use this function for HtmlSanitizer which we will
+    // sanitize HTML tree by our own code. So we just directly return the HTML string here.
+    createHTML: function (html) { return html; },
+});
+var unsafeConvertToTrustedHTML = policy
+    ? function (html) { return policy.createHTML(html || ''); }
+    : function (html) { return html; };
 
 
 /***/ }),
@@ -9297,10 +9535,14 @@ function customClone(source, existingObj) {
     }
     return result;
 }
+var cloneObjectImpl = Object.assign ? nativeClone : customClone;
 /**
  * @internal
  */
-exports.cloneObject = Object.assign ? nativeClone : customClone;
+function cloneObject(source, existingObj) {
+    return cloneObjectImpl(source, existingObj);
+}
+exports.cloneObject = cloneObject;
 
 
 /***/ }),
@@ -9805,6 +10047,15 @@ var setColor_1 = __webpack_require__(/*! ./utils/setColor */ "./packages/rooster
 exports.setColor = setColor_1.default;
 var matchesSelector_1 = __webpack_require__(/*! ./utils/matchesSelector */ "./packages/roosterjs-editor-dom/lib/utils/matchesSelector.ts");
 exports.matchesSelector = matchesSelector_1.default;
+var adjustInsertPosition_1 = __webpack_require__(/*! ./utils/adjustInsertPosition */ "./packages/roosterjs-editor-dom/lib/utils/adjustInsertPosition.ts");
+exports.adjustInsertPosition = adjustInsertPosition_1.default;
+var createElement_1 = __webpack_require__(/*! ./utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
+exports.createElement = createElement_1.default;
+exports.KnownCreateElementData = createElement_1.KnownCreateElementData;
+var moveChildNodes_1 = __webpack_require__(/*! ./utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
+exports.moveChildNodes = moveChildNodes_1.default;
+var setListItemStyle_1 = __webpack_require__(/*! ./utils/setListItemStyle */ "./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts");
+exports.setListItemStyle = setListItemStyle_1.default;
 var VTable_1 = __webpack_require__(/*! ./table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
 exports.VTable = VTable_1.default;
 var VList_1 = __webpack_require__(/*! ./list/VList */ "./packages/roosterjs-editor-dom/lib/list/VList.ts");
@@ -10613,6 +10864,10 @@ var VList = /** @class */ (function () {
         // Use a placeholder to hold the position since the root list may be moved into document fragment later
         this.rootList.parentNode.replaceChild(placeholder, this.rootList);
         this.items.forEach(function (item) {
+            if (item.getNewListStart() && item.getNewListStart() != start) {
+                listStack.splice(1, listStack.length - 1);
+                start = item.getNewListStart();
+            }
             item.writeBack(listStack, _this.rootList);
             var topList = listStack[1];
             if (safeInstanceOf_1.default(topList, 'HTMLOListElement')) {
@@ -10636,6 +10891,23 @@ var VList = /** @class */ (function () {
         // after change the rootList may not be available any more (e.g. outdent all items).
         this.rootList = null;
     };
+    /**
+     * Sets the New List Start Property, that is going to be used to create a new List in the WriteBack function
+     * @param separator The HTML element that indicates when to split the VList
+     * @param startNumber The start number of the new List
+     */
+    VList.prototype.split = function (separator, startNumber) {
+        if (!this.rootList) {
+            throw new Error('rootList must not be null');
+        }
+        //Traverse the items of the VList, when the separator is found, set the New List Start Property
+        for (var index = 0; index < this.items.length; index++) {
+            if (this.items[index].getNode() == separator) {
+                this.items[index].setNewListStart(startNumber);
+                return;
+            }
+        }
+    };
     VList.prototype.setIndentation = function (start, end, indentation, softOutdent) {
         this.findListItems(start, end, function (item) {
             return indentation == 1 /* Decrease */
@@ -10953,13 +11225,14 @@ var contains_1 = __webpack_require__(/*! ../utils/contains */ "./packages/rooste
 var getListTypeFromNode_1 = __webpack_require__(/*! ./getListTypeFromNode */ "./packages/roosterjs-editor-dom/lib/list/getListTypeFromNode.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");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+var setListItemStyle_1 = __webpack_require__(/*! ../utils/setListItemStyle */ "./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts");
 var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/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");
 var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
 /**
- * @internal
  * !!! Never directly create instance of this class. It should be created within VList class !!!
  *
  * Represent a list item.
@@ -10967,7 +11240,6 @@ var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
  * A list item is normally wrapped using a LI tag. But this class is only a logical item,
  * it can be a LI tag, or another other type of node which means it is actually not a list item.
  * That can happen after we do "outdent" on a 1-level list item, then it becomes not a list item.
- * @internal
  */
 var VListItem = /** @class */ (function () {
     /**
@@ -10981,12 +11253,13 @@ var VListItem = /** @class */ (function () {
         for (var _i = 1; _i < arguments.length; _i++) {
             listTypes[_i - 1] = arguments[_i];
         }
+        this.newListStart = undefined;
         if (!node) {
             throw new Error('node must not be null');
         }
         this.node = safeInstanceOf_1.default(node, 'HTMLLIElement')
             ? node
-            : wrap_1.default(node, '<li style="display:block"></li>');
+            : wrap_1.default(node, 4 /* BlockListItem */);
         var display = this.node.style.display;
         this.dummy = display != 'list-item' && display != '';
         // Always add a None list type in front of all other types to represent non-list scenario.
@@ -11010,6 +11283,12 @@ var VListItem = /** @class */ (function () {
     VListItem.prototype.getNode = function () {
         return this.node;
     };
+    /**
+     * Get the Start Number of the new List
+     */
+    VListItem.prototype.getNewListStart = function () {
+        return this.newListStart;
+    };
     /**
      * Check if a given node is contained by this list item
      * @param node The node to check
@@ -11088,6 +11367,13 @@ var VListItem = /** @class */ (function () {
     VListItem.prototype.setIsDummy = function (isDummy) {
         this.dummy = isDummy;
     };
+    /**
+     * Set the start Number of the new list
+     * @param isDummy Whether the item is a dummy item
+     */
+    VListItem.prototype.setNewListStart = function (startNumber) {
+        this.newListStart = startNumber;
+    };
     /**
      * Write the change result back into DOM
      * @param listStack current stack of list elements
@@ -11119,7 +11405,14 @@ var VListItem = /** @class */ (function () {
         // 3. Add current node into deepest list element
         listStack[listStack.length - 1].appendChild(this.node);
         this.node.style.display = this.dummy ? 'block' : null;
-        // 4. If this is not a list item now, need to unwrap the LI node and do proper handling
+        // 4. Inherit styles of the childelement to the li, so we are able to apply the styles to the ::marker
+        if (this.listTypes.length > 1) {
+            if (!(this.node.style.fontSize || this.node.style.color || this.node.style.fontFamily)) {
+                var stylesToInherit = ['font-size', 'font-family', 'color'];
+                setListItemStyle_1.default(this.node, stylesToInherit);
+            }
+        }
+        // 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(getTagOfNode_1.default(this.node) == 'LI' ? getChildrenAndUnwrap(this.node) : [this.node], true /*checkFirst*/, true /*checkLast*/);
         }
@@ -11144,9 +11437,7 @@ function createListElement(newRoot, listType, nextLevel, originalRoot) {
         }
         else {
             // Remove all child nodes, they will be added back later when write back other items
-            while (originalRoot.firstChild) {
-                originalRoot.removeChild(originalRoot.firstChild);
-            }
+            moveChildNodes_1.default(originalRoot);
             result = originalRoot;
         }
     }
@@ -11186,7 +11477,7 @@ function getChildrenAndUnwrap(node) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var fromHtml_1 = __webpack_require__(/*! ../utils/fromHtml */ "./packages/roosterjs-editor-dom/lib/utils/fromHtml.ts");
+var createElement_1 = __webpack_require__(/*! ../utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
 var getRootListNode_1 = __webpack_require__(/*! ./getRootListNode */ "./packages/roosterjs-editor-dom/lib/list/getRootListNode.ts");
 var getSelectedBlockElementsInRegion_1 = __webpack_require__(/*! ../region/getSelectedBlockElementsInRegion */ "./packages/roosterjs-editor-dom/lib/region/getSelectedBlockElementsInRegion.ts");
 var isNodeInRegion_1 = __webpack_require__(/*! ../region/isNodeInRegion */ "./packages/roosterjs-editor-dom/lib/region/isNodeInRegion.ts");
@@ -11200,7 +11491,7 @@ var getLeafSibling_1 = __webpack_require__(/*! ../utils/getLeafSibling */ "./pac
 var getListTypeFromNode_1 = __webpack_require__(/*! ./getListTypeFromNode */ "./packages/roosterjs-editor-dom/lib/list/getListTypeFromNode.ts");
 var ListSelector = 'ol,ul';
 /**
- * @internal
+ * Create a VList object from the given region.
  * @param region The region to get VList from
  * @param includeSiblingLists True to also try get lists before and after the selection and merge them together,
  * false to only include the list for the selected blocks
@@ -11238,7 +11529,7 @@ function createVListFromRegion(region, includeSiblingLists, startNode) {
             }
         });
         if (nodes.length == 0 && !region.rootNode.firstChild) {
-            var newNode = fromHtml_1.default('<div><br></div>', region.rootNode.ownerDocument)[0];
+            var newNode = createElement_1.default(1 /* EmptyLine */, region.rootNode.ownerDocument);
             region.rootNode.appendChild(newNode);
             nodes.push(newNode);
             region.fullSelectionStart = new Position_1.default(newNode, 0 /* Begin */);
@@ -11426,13 +11717,20 @@ exports.default = collapseNodesInRegion;
 
 "use strict";
 
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var contains_1 = __webpack_require__(/*! ../utils/contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
 var findClosestElementAncestor_1 = __webpack_require__(/*! ../utils/findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
 var Position_1 = __webpack_require__(/*! ../selection/Position */ "./packages/roosterjs-editor-dom/lib/selection/Position.ts");
 var queryElements_1 = __webpack_require__(/*! ../utils/queryElements */ "./packages/roosterjs-editor-dom/lib/utils/queryElements.ts");
-var regionTypeData_1 = __webpack_require__(/*! ./regionTypeData */ "./packages/roosterjs-editor-dom/lib/region/regionTypeData.ts");
 var getLeafSibling_1 = __webpack_require__(/*! ../utils/getLeafSibling */ "./packages/roosterjs-editor-dom/lib/utils/getLeafSibling.ts");
+var regionTypeData = (_a = {},
+    _a[0 /* Table */] = {
+        skipTags: ['TABLE'],
+        outerSelector: 'table',
+        innerSelector: 'td,th',
+    },
+    _a);
 /**
  * Get regions impacted by the given range under the root node
  * @param root Root node to get regions from
@@ -11443,7 +11741,7 @@ var getLeafSibling_1 = __webpack_require__(/*! ../utils/getLeafSibling */ "./pac
 function getRegionsFromRange(root, range, type) {
     var regions = [];
     if (root && range) {
-        var _a = regionTypeData_1.default[type], innerSelector = _a.innerSelector, skipTags = _a.skipTags;
+        var _a = regionTypeData[type], innerSelector = _a.innerSelector, skipTags = _a.skipTags;
         var boundaryTree = buildBoundaryTree(root, range, type);
         var start = findClosestElementAncestor_1.default(range.startContainer, root, innerSelector) || root;
         var end = findClosestElementAncestor_1.default(range.endContainer, root, innerSelector) || root;
@@ -11481,7 +11779,7 @@ exports.getRegionCreator = getRegionCreator;
  */
 function buildBoundaryTree(root, range, type) {
     var allBoundaries = [{ innerNode: root, children: [] }];
-    var _a = regionTypeData_1.default[type], outerSelector = _a.outerSelector, innerSelector = _a.innerSelector;
+    var _a = regionTypeData[type], outerSelector = _a.outerSelector, innerSelector = _a.innerSelector;
     var inSelectionOuterNode = queryElements_1.default(root, outerSelector, null /*callback*/, 2 /* InSelection */, range);
     // According to https://www.w3.org/TR/selectors-api/#queryselectorall, the result of querySelectorAll
     // is in document order, which is what we expect. So we don't need to sort the result here.
@@ -11588,7 +11886,7 @@ function areNodesValid(root, nodeBefore, nodeAfter, skipTags) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var ContentTraverser_1 = __webpack_require__(/*! ../contentTraverser/ContentTraverser */ "./packages/roosterjs-editor-dom/lib/contentTraverser/ContentTraverser.ts");
-var fromHtml_1 = __webpack_require__(/*! ../utils/fromHtml */ "./packages/roosterjs-editor-dom/lib/utils/fromHtml.ts");
+var createElement_1 = __webpack_require__(/*! ../utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
 var getBlockElementAtNode_1 = __webpack_require__(/*! ../blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
 var getSelectionRangeInRegion_1 = __webpack_require__(/*! ./getSelectionRangeInRegion */ "./packages/roosterjs-editor-dom/lib/region/getSelectionRangeInRegion.ts");
 var shouldSkipNode_1 = __webpack_require__(/*! ../utils/shouldSkipNode */ "./packages/roosterjs-editor-dom/lib/utils/shouldSkipNode.ts");
@@ -11622,7 +11920,7 @@ function getSelectedBlockElementsInRegion(regionBase, createBlockIfEmpty) {
         });
     }
     if (blocks.length == 0 && regionBase && !regionBase.rootNode.firstChild && createBlockIfEmpty) {
-        var newNode = fromHtml_1.default('<div><br></div>', regionBase.rootNode.ownerDocument)[0];
+        var newNode = createElement_1.default(1 /* EmptyLine */, regionBase.rootNode.ownerDocument);
         regionBase.rootNode.appendChild(newNode);
         blocks.push(getBlockElementAtNode_1.default(regionBase.rootNode, newNode));
     }
@@ -11748,9 +12046,9 @@ var getBlockElementAtNode_1 = __webpack_require__(/*! ../blockElements/getBlockE
 var getPredefinedCssForElement_1 = __webpack_require__(/*! ../htmlSanitizer/getPredefinedCssForElement */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/getPredefinedCssForElement.ts");
 var getStyles_1 = __webpack_require__(/*! ../style/getStyles */ "./packages/roosterjs-editor-dom/lib/style/getStyles.ts");
 var isNodeInRegion_1 = __webpack_require__(/*! ../region/isNodeInRegion */ "./packages/roosterjs-editor-dom/lib/region/isNodeInRegion.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");
 var collapseNodes_1 = __webpack_require__(/*! ../utils/collapseNodes */ "./packages/roosterjs-editor-dom/lib/utils/collapseNodes.ts");
-var __1 = __webpack_require__(/*! .. */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Merge a BlockElement of given node after another node
  * @param region Region to operate in
@@ -11771,7 +12069,7 @@ function mergeBlocksInRegion(region, refNode, targetNode) {
     // Copy styles of parent nodes into blockRoot
     for (var node = blockRoot; contains_1.default(commonContainer, node);) {
         var parent_1 = node.parentNode;
-        if (__1.safeInstanceOf(parent_1, 'HTMLElement')) {
+        if (safeInstanceOf_1.default(parent_1, 'HTMLElement')) {
             var styles = __assign(__assign(__assign({}, (getPredefinedCssForElement_1.default(parent_1) || {})), getStyles_1.default(parent_1)), getStyles_1.default(blockRoot));
             setStyles_1.default(blockRoot, styles);
         }
@@ -11793,32 +12091,6 @@ function mergeBlocksInRegion(region, refNode, targetNode) {
 exports.default = mergeBlocksInRegion;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/region/regionTypeData.ts":
-/*!********************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/region/regionTypeData.ts ***!
-  \********************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-var regionTypeData = (_a = {},
-    _a[0 /* Table */] = {
-        skipTags: ['TABLE'],
-        outerSelector: 'table',
-        innerSelector: 'td,th',
-    },
-    _a);
-/**
- * @internal
- */
-exports.default = regionTypeData;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/selection/Position.ts":
@@ -12290,6 +12562,7 @@ exports.default = getHtmlWithSelectionPath;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var createElement_1 = __webpack_require__(/*! ../utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
 var createRange_1 = __webpack_require__(/*! ./createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
 var normalizeRect_1 = __webpack_require__(/*! ../utils/normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 /**
@@ -12315,9 +12588,7 @@ function getPositionRect(position) {
     }
     // 3) if node is text node, try inserting a SPAN and get the rect of SPAN for others
     if (position.node.nodeType == 3 /* Text */) {
-        var document_1 = position.node.ownerDocument;
-        var span = document_1.createElement('SPAN');
-        span.innerHTML = '\u200b';
+        var span = createElement_1.default({ tag: 'span', children: ['\u200b'] }, position.node.ownerDocument);
         range = createRange_1.default(position);
         range.insertNode(span);
         rect = span.getBoundingClientRect && normalizeRect_1.default(span.getBoundingClientRect());
@@ -12485,6 +12756,7 @@ function areAllPreviousNodesEmpty(node) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var createRange_1 = __webpack_require__(/*! ./createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
+var LastCommentRegex = /<!--([^-]+)-->$/;
 /**
  * Restore inner Html of a root element from given html string. If the string contains selection path,
  * remove the selection path and return a range represented by the path
@@ -12492,26 +12764,45 @@ var createRange_1 = __webpack_require__(/*! ./createRange */ "./packages/rooster
  * @param html The html to restore
  * @returns A selection range if the html contains a valid selection path, otherwise null
  */
-function setHtmlWithSelectionPath(rootNode, html) {
-    rootNode.innerHTML = html || '';
-    var path = null;
-    var pathComment = rootNode.lastChild;
-    try {
-        path =
-            pathComment &&
-                pathComment.nodeType == 8 /* Comment */ &&
-                JSON.parse(pathComment.nodeValue);
-        if (path && path.end && path.end.length > 0 && path.start && path.start.length > 0) {
-            rootNode.removeChild(pathComment);
-        }
-        else {
-            path = null;
-        }
+function setHtmlWithSelectionPath(rootNode, html, trustedHTMLHandler) {
+    if (!rootNode) {
+        return null;
     }
-    catch (_a) { }
+    html = html || '';
+    var lastComment = LastCommentRegex.exec(html);
+    rootNode.innerHTML = (trustedHTMLHandler === null || trustedHTMLHandler === void 0 ? void 0 : trustedHTMLHandler(html)) || html;
+    var path = getSelectionPath(rootNode, lastComment === null || lastComment === void 0 ? void 0 : lastComment[1]);
     return path && createRange_1.default(rootNode, path.start, path.end);
 }
 exports.default = setHtmlWithSelectionPath;
+function getSelectionPath(root, alternativeComment) {
+    var _a, _b, _c;
+    var pathCommentValue = '';
+    var pathCommentNode = null;
+    var path = null;
+    if (((_a = root.lastChild) === null || _a === void 0 ? void 0 : _a.nodeType) == 8 /* Comment */) {
+        pathCommentNode = root.lastChild;
+        pathCommentValue = pathCommentNode.nodeValue;
+    }
+    else {
+        pathCommentValue = alternativeComment;
+    }
+    if (pathCommentValue) {
+        try {
+            path = JSON.parse(pathCommentValue);
+            if (path && ((_b = path.start) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((_c = path.end) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                if (pathCommentNode) {
+                    root.removeChild(pathCommentNode);
+                }
+            }
+            else {
+                path = null;
+            }
+        }
+        catch (_d) { }
+    }
+    return path;
+}
 
 
 /***/ }),
@@ -12784,6 +13075,7 @@ exports.default = setStyles;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 var normalizeRect_1 = __webpack_require__(/*! ../utils/normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
@@ -12839,7 +13131,7 @@ var VTable = /** @class */ (function () {
     VTable.prototype.writeBack = function () {
         var _this = this;
         if (this.cells) {
-            moveChildren(this.table);
+            moveChildNodes_1.default(this.table);
             this.cells.forEach(function (row, r) {
                 var tr = cloneNode(_this.trs[r % 2] || _this.trs[0]);
                 _this.table.appendChild(tr);
@@ -12890,6 +13182,7 @@ var VTable = /** @class */ (function () {
         }
         var currentRow = this.cells[this.row];
         var currentCell = currentRow[this.col];
+        var style = currentCell.td.style;
         switch (operation) {
             case 0 /* InsertAbove */:
                 this.cells.splice(this.row, 0, currentRow.map(cloneCell));
@@ -12965,7 +13258,7 @@ var VTable = /** @class */ (function () {
                         var aboveCell = rowIndex < this.row ? cell : currentCell;
                         var belowCell = rowIndex < this.row ? currentCell : cell;
                         if (aboveCell.td.colSpan == belowCell.td.colSpan) {
-                            moveChildren(belowCell.td, aboveCell.td);
+                            moveChildNodes_1.default(aboveCell.td, belowCell.td, true /*keepExistingChildren*/);
                             belowCell.td = null;
                             belowCell.spanAbove = true;
                         }
@@ -12982,7 +13275,7 @@ var VTable = /** @class */ (function () {
                         var leftCell = colIndex < this.col ? cell : currentCell;
                         var rightCell = colIndex < this.col ? currentCell : cell;
                         if (leftCell.td.rowSpan == rightCell.td.rowSpan) {
-                            moveChildren(rightCell.td, leftCell.td);
+                            moveChildNodes_1.default(leftCell.td, rightCell.td, true /*keepExistingChildren*/);
                             rightCell.td = null;
                             rightCell.spanLeft = true;
                         }
@@ -13022,6 +13315,33 @@ var VTable = /** @class */ (function () {
                     });
                 }
                 break;
+            case 13 /* AlignCenter */:
+                this.table.setAttribute('align', 'center');
+                break;
+            case 14 /* AlignLeft */:
+                this.table.setAttribute('align', 'left');
+                break;
+            case 15 /* AlignRight */:
+                this.table.setAttribute('align', 'right');
+                break;
+            case 17 /* AlignCellCenter */:
+                style.textAlign = 'center';
+                break;
+            case 16 /* AlignCellLeft */:
+                style.textAlign = 'left';
+                break;
+            case 18 /* AlignCellRight */:
+                style.textAlign = 'right';
+                break;
+            case 19 /* AlignCellTop */:
+                style.verticalAlign = 'top';
+                break;
+            case 20 /* AlignCellMiddle */:
+                style.verticalAlign = 'middle';
+                break;
+            case 21 /* AlignCellBottom */:
+                style.verticalAlign = 'bottom';
+                break;
         }
     };
     /**
@@ -13258,21 +13578,6 @@ function cloneNode(node) {
     }
     return newNode;
 }
-/**
- * Move all children from one node to another
- * @param fromNode The source node to move children from
- * @param toNode Target node. If not passed, children nodes of source node will be removed
- */
-function moveChildren(fromNode, toNode) {
-    while (fromNode.firstChild) {
-        if (toNode) {
-            toNode.appendChild(fromNode.firstChild);
-        }
-        else {
-            fromNode.removeChild(fromNode.firstChild);
-        }
-    }
-}
 
 
 /***/ }),
@@ -13335,13 +13640,205 @@ function getBrowserInfo(userAgent, appVersion) {
         isIEOrEdge: isIE || isEdge,
     };
 }
-exports.getBrowserInfo = getBrowserInfo;
-/**
- * Browser object contains browser and operating system information of current environment
- */
-exports.Browser = window
-    ? getBrowserInfo(window.navigator.userAgent, window.navigator.appVersion)
-    : {};
+exports.getBrowserInfo = getBrowserInfo;
+/**
+ * Browser object contains browser and operating system information of current environment
+ */
+exports.Browser = window
+    ? getBrowserInfo(window.navigator.userAgent, window.navigator.appVersion)
+    : {};
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/adjustInsertPosition.ts":
+/*!*************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/adjustInsertPosition.ts ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var changeElementTag_1 = __webpack_require__(/*! ./changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
+var contains_1 = __webpack_require__(/*! ./contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
+var createRange_1 = __webpack_require__(/*! ../selection/createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
+var findClosestElementAncestor_1 = __webpack_require__(/*! ./findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
+var getBlockElementAtNode_1 = __webpack_require__(/*! ../blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
+var getTagOfNode_1 = __webpack_require__(/*! ./getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
+var isNodeEmpty_1 = __webpack_require__(/*! ./isNodeEmpty */ "./packages/roosterjs-editor-dom/lib/utils/isNodeEmpty.ts");
+var isPositionAtBeginningOf_1 = __webpack_require__(/*! ../selection/isPositionAtBeginningOf */ "./packages/roosterjs-editor-dom/lib/selection/isPositionAtBeginningOf.ts");
+var isVoidHtmlElement_1 = __webpack_require__(/*! ./isVoidHtmlElement */ "./packages/roosterjs-editor-dom/lib/utils/isVoidHtmlElement.ts");
+var LinkInlineElement_1 = __webpack_require__(/*! ../inlineElements/LinkInlineElement */ "./packages/roosterjs-editor-dom/lib/inlineElements/LinkInlineElement.ts");
+var Position_1 = __webpack_require__(/*! ../selection/Position */ "./packages/roosterjs-editor-dom/lib/selection/Position.ts");
+var PositionContentSearcher_1 = __webpack_require__(/*! ../contentTraverser/PositionContentSearcher */ "./packages/roosterjs-editor-dom/lib/contentTraverser/PositionContentSearcher.ts");
+var queryElements_1 = __webpack_require__(/*! ./queryElements */ "./packages/roosterjs-editor-dom/lib/utils/queryElements.ts");
+var splitTextNode_1 = __webpack_require__(/*! ./splitTextNode */ "./packages/roosterjs-editor-dom/lib/utils/splitTextNode.ts");
+var toArray_1 = __webpack_require__(/*! ./toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
+var unwrap_1 = __webpack_require__(/*! ./unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
+var VTable_1 = __webpack_require__(/*! ../table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
+var wrap_1 = __webpack_require__(/*! ./wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
+var splitParentNode_1 = __webpack_require__(/*! ./splitParentNode */ "./packages/roosterjs-editor-dom/lib/utils/splitParentNode.ts");
+var adjustSteps = [
+    adjustInsertPositionForHyperLink,
+    adjustInsertPositionForStructuredNode,
+    adjustInsertPositionForParagraph,
+    adjustInsertPositionForVoidElement,
+    adjustInsertPositionForMoveCursorOutOfALink,
+];
+/**
+ * Adjust position for A tag don't be nested inside another A tag.
+ */
+function adjustInsertPositionForHyperLink(root, nodeToInsert, position, range) {
+    var _a, _b;
+    var blockElement = getBlockElementAtNode_1.default(root, position.node);
+    if (blockElement) {
+        // Find the first <A> tag within current block which covers current selection
+        // If there are more than one nested, let's handle the first one only since that is not a common scenario.
+        var anchor = queryElements_1.default(root, 'a[href]', null /*forEachCallback*/, 1 /* OnSelection */, createRange_1.default(position)).filter(function (a) { return blockElement.contains(a); })[0];
+        // If this is about to insert node to an empty A tag, clear the A tag and reset position
+        if (anchor && isNodeEmpty_1.default(anchor)) {
+            position = new Position_1.default(anchor, -2 /* Before */);
+            safeRemove(anchor);
+            anchor = null;
+        }
+        // If this is about to insert nodes which contains A tag into another A tag, need to break current A tag
+        // otherwise we will have nested A tags which is a wrong HTML structure
+        if (anchor && ((_a = nodeToInsert) === null || _a === void 0 ? void 0 : _a.querySelector) && ((_b = nodeToInsert) === null || _b === void 0 ? void 0 : _b.querySelector('a[href]'))) {
+            var normalizedPosition = position.normalize();
+            var parentNode = normalizedPosition.node.parentNode;
+            var nextNode = normalizedPosition.node.nodeType == 3 /* Text */
+                ? splitTextNode_1.default(normalizedPosition.node, normalizedPosition.offset, false /*returnFirstPart*/)
+                : normalizedPosition.isAtEnd
+                    ? normalizedPosition.node.nextSibling
+                    : normalizedPosition.node;
+            var splitter = root.ownerDocument.createTextNode('');
+            parentNode.insertBefore(splitter, nextNode);
+            while (contains_1.default(anchor, splitter)) {
+                splitter = splitParentNode_1.splitBalancedNodeRange(splitter);
+            }
+            position = new Position_1.default(splitter, -2 /* Before */);
+            safeRemove(splitter);
+        }
+    }
+    return position;
+}
+/**
+ * Adjust position for a node don't be nested inside tags like BR, LI, TD.
+ */
+function adjustInsertPositionForStructuredNode(root, nodeToInsert, position, range) {
+    var rootNodeToInsert = nodeToInsert;
+    if (rootNodeToInsert.nodeType == 11 /* DocumentFragment */) {
+        var rootNodes = toArray_1.default(rootNodeToInsert.childNodes).filter(function (n) { return getTagOfNode_1.default(n) != 'BR'; });
+        rootNodeToInsert = rootNodes.length == 1 ? rootNodes[0] : null;
+    }
+    var tag = getTagOfNode_1.default(rootNodeToInsert);
+    var hasBrNextToRoot = tag && getTagOfNode_1.default(rootNodeToInsert.nextSibling) == 'BR';
+    var listItem = findClosestElementAncestor_1.default(position.node, root, 'LI');
+    var listNode = listItem && findClosestElementAncestor_1.default(listItem, root, 'OL,UL');
+    var tdNode = findClosestElementAncestor_1.default(position.node, root, 'TD,TH');
+    var trNode = tdNode && findClosestElementAncestor_1.default(tdNode, root, 'TR');
+    if (tag == 'LI') {
+        tag = listNode ? getTagOfNode_1.default(listNode) : 'UL';
+        rootNodeToInsert = wrap_1.default(rootNodeToInsert, tag);
+    }
+    if ((tag == 'OL' || tag == 'UL') && getTagOfNode_1.default(rootNodeToInsert.firstChild) == 'LI') {
+        var shouldInsertListAsText = !rootNodeToInsert.firstChild.nextSibling && !hasBrNextToRoot;
+        if (hasBrNextToRoot && rootNodeToInsert.parentNode) {
+            safeRemove(rootNodeToInsert.nextSibling);
+        }
+        if (shouldInsertListAsText) {
+            unwrap_1.default(rootNodeToInsert.firstChild);
+            unwrap_1.default(rootNodeToInsert);
+        }
+        else if (getTagOfNode_1.default(listNode) == tag) {
+            unwrap_1.default(rootNodeToInsert);
+            position = new Position_1.default(listItem, isPositionAtBeginningOf_1.default(position, listItem)
+                ? -2 /* Before */
+                : -3 /* After */);
+        }
+    }
+    else if (tag == 'TABLE' && trNode) {
+        // When inserting a table into a table, if these tables have the same column count, and
+        // current position is at beginning of a row, then merge these two tables
+        var newTable = new VTable_1.default(rootNodeToInsert);
+        var currentTable = new VTable_1.default(tdNode);
+        if (currentTable.col == 0 &&
+            tdNode == currentTable.getCell(currentTable.row, 0).td &&
+            newTable.cells[0] &&
+            newTable.cells[0].length == currentTable.cells[0].length &&
+            isPositionAtBeginningOf_1.default(position, tdNode)) {
+            if (getTagOfNode_1.default(rootNodeToInsert.firstChild) == 'TBODY' &&
+                !rootNodeToInsert.firstChild.nextSibling) {
+                unwrap_1.default(rootNodeToInsert.firstChild);
+            }
+            unwrap_1.default(rootNodeToInsert);
+            position = new Position_1.default(trNode, -3 /* After */);
+        }
+    }
+    return position;
+}
+/**
+ * Change P tag to DIV, when a new node when insert node.
+ */
+function adjustInsertPositionForParagraph(root, nodeToInsert, position, range) {
+    if (getTagOfNode_1.default(position.node) == 'P') {
+        // Insert into a P tag may cause issues when the inserted content contains any block element.
+        // Change P tag to DIV to make sure it works well
+        var pos = position.normalize();
+        var div = changeElementTag_1.default(position.node, 'div');
+        if (pos.node != div) {
+            position = pos;
+        }
+    }
+    return position;
+}
+/**
+ * Adjust position for a node that can have children.
+ */
+function adjustInsertPositionForVoidElement(root, nodeToInsert, position, range) {
+    if (isVoidHtmlElement_1.default(position.node)) {
+        position = new Position_1.default(position.node, position.isAtEnd ? -3 /* After */ : -2 /* Before */);
+    }
+    return position;
+}
+/**
+ * Adjust the position cursor out of link when a new node is inserted.
+ */
+function adjustInsertPositionForMoveCursorOutOfALink(root, nodeToInsert, position, range) {
+    if (range && range.collapsed) {
+        var searcher = new PositionContentSearcher_1.default(root, Position_1.default.getStart(range));
+        var inlineElementBefore = searcher.getInlineElementBefore();
+        var inlineElementAfter = searcher.getInlineElementAfter();
+        if (inlineElementBefore instanceof LinkInlineElement_1.default) {
+            position = new Position_1.default(inlineElementBefore.getContainerNode(), -3 /* After */);
+        }
+        else if (inlineElementAfter instanceof LinkInlineElement_1.default) {
+            position = new Position_1.default(inlineElementAfter.getContainerNode(), -2 /* Before */);
+        }
+    }
+    return position;
+}
+/**
+ *
+ * @param root the contentDiv of the ditor
+ * @param nodeToInsert the node to be inserted
+ * @param position the position of the node to be inserted
+ * @param range the range current or cached range of the editor
+ * @returns the adjusted position of the inserted node
+ */
+function adjustInsertPositionBySteps(root, nodeToInsert, position, range) {
+    adjustSteps.forEach(function (handler) {
+        position = handler(root, nodeToInsert, position, range);
+    });
+    return position;
+}
+exports.default = adjustInsertPositionBySteps;
+function safeRemove(node) {
+    var _a;
+    (_a = node === null || node === void 0 ? void 0 : node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+}
 
 
 /***/ }),
@@ -13504,6 +14001,7 @@ exports.default = arrayPush;
 Object.defineProperty(exports, "__esModule", { value: true });
 var getComputedStyles_1 = __webpack_require__(/*! ./getComputedStyles */ "./packages/roosterjs-editor-dom/lib/utils/getComputedStyles.ts");
 var getTagOfNode_1 = __webpack_require__(/*! ./getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
+var moveChildNodes_1 = __webpack_require__(/*! ./moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 function changeElementTag(element, newTag) {
     var _a;
     if (!element || !newTag) {
@@ -13514,9 +14012,7 @@ function changeElementTag(element, newTag) {
         var attr = element.attributes[i];
         newElement.setAttribute(attr.name, attr.value);
     }
-    while (element.firstChild) {
-        newElement.appendChild(element.firstChild);
-    }
+    moveChildNodes_1.default(newElement, element);
     if (getTagOfNode_1.default(element) == 'P' || getTagOfNode_1.default(newElement) == 'P') {
         _a = getComputedStyles_1.default(element, [
             'margin-top',
@@ -13582,6 +14078,7 @@ function collapseNodes(root, start, end, canSplitParent) {
 }
 exports.default = collapseNodes;
 /**
+ * @internal
  * Collapse a node by traversing its parent nodes until we get the common ancestor node of node and ref node
  * @param root Root node, traversing will be limited under this scope
  * @param node The node to collapse
@@ -13656,6 +14153,116 @@ function internalContains(container, contained) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts":
+/*!******************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/createElement.ts ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+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
+ */
+exports.KnownCreateElementData = (_a = {},
+    _a[0 /* None */] = null,
+    // 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[2 /* BlockquoteWrapper */] = {
+        tag: 'blockquote',
+        style: 'margin-top:0;margin-bottom:0',
+    },
+    _a[3 /* CopyPasteTempDiv */] = {
+        tag: 'div',
+        style: 'width: 1px; height: 1px; overflow: hidden; position: fixed; top: 0; left; 0; -webkit-user-select: text',
+        attributes: {
+            contenteditable: 'true',
+        },
+    },
+    _a[4 /* BlockListItem */] = { tag: 'li', style: 'display:block' },
+    _a[5 /* ContextMenuWrapper */] = {
+        tag: 'div',
+        style: 'position: fixed; width: 0; height: 0',
+    },
+    _a[6 /* ImageEditWrapper */] = {
+        tag: 'div',
+        style: 'width:100%;height:100%;position:relative;overflow:hidden',
+    },
+    _a[7 /* TableHorizontalResizer */] = {
+        tag: 'div',
+        style: 'position: fixed; cursor: row-resize; user-select: none',
+    },
+    _a[8 /* TableVerticalResizer */] = {
+        tag: 'div',
+        style: 'position: fixed; cursor: col-resize; user-select: none',
+    },
+    _a[9 /* TableResizerLTR */] = {
+        tag: 'div',
+        style: 'position: fixed; cursor: nw-resize; user-select: none; border: 1px solid #808080',
+    },
+    _a[10 /* TableResizerRTL */] = {
+        tag: 'div',
+        style: 'position: fixed; cursor: ne-resize; user-select: none; border: 1px solid #808080',
+    },
+    _a);
+/**
+ * Create DOM element from the given CreateElementData
+ * @param elementData The CreateElementData or an index of a known CreateElementData used for creating this element
+ * @param document The document to create the element from
+ * @returns The root DOM element just created
+ */
+function createElement(elementData, document) {
+    if (typeof elementData == 'number') {
+        elementData = exports.KnownCreateElementData[elementData];
+    }
+    if (!elementData || !elementData.tag) {
+        return null;
+    }
+    var tag = elementData.tag, namespace = elementData.namespace, className = elementData.className, style = elementData.style, dataset = elementData.dataset, attributes = elementData.attributes, children = elementData.children;
+    var result = namespace
+        ? document.createElementNS(namespace, tag)
+        : document.createElement(tag);
+    if (style) {
+        result.setAttribute('style', style);
+    }
+    if (className) {
+        result.className = className;
+    }
+    if (dataset && safeInstanceOf_1.default(result, 'HTMLElement')) {
+        Object.keys(dataset).forEach(function (datasetName) {
+            result.dataset[datasetName] = dataset[datasetName];
+        });
+    }
+    if (attributes) {
+        Object.keys(attributes).forEach(function (attrName) {
+            result.setAttribute(attrName, attributes[attrName]);
+        });
+    }
+    if (children) {
+        children.forEach(function (child) {
+            if (typeof child === 'string') {
+                result.appendChild(document.createTextNode(child));
+            }
+            else if (child) {
+                result.appendChild(createElement(child, document));
+            }
+        });
+    }
+    return result;
+}
+exports.default = createElement;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts":
@@ -13710,6 +14317,7 @@ exports.default = findClosestElementAncestor;
 Object.defineProperty(exports, "__esModule", { value: true });
 var toArray_1 = __webpack_require__(/*! ./toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
 /**
+ * @deprecated
  * Creates an HTML node array from html
  * @param html the html string to create HTML elements from
  * @param ownerDocument Owner document of the result HTML elements
@@ -13754,7 +14362,8 @@ function getComputedStyles(node, styleNames) {
         if (styles) {
             for (var _i = 0, styleNames_1 = styleNames; _i < styleNames_1.length; _i++) {
                 var style = styleNames_1[_i];
-                var value = (styles.getPropertyValue(style) || '').toLowerCase();
+                var value = styles.getPropertyValue(style) || '';
+                value = style != 'font-family' ? value.toLowerCase() : value;
                 value = style == 'font-size' ? px2Pt(value) : value;
                 result.push(value);
             }
@@ -13880,6 +14489,7 @@ var contains_1 = __webpack_require__(/*! ./contains */ "./packages/roosterjs-edi
 var getTagOfNode_1 = __webpack_require__(/*! ./getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
 var shouldSkipNode_1 = __webpack_require__(/*! ./shouldSkipNode */ "./packages/roosterjs-editor-dom/lib/utils/shouldSkipNode.ts");
 /**
+ * @internal
  * This walks forwards/backwards DOM tree to get next meaningful node
  * @param rootNode Root node to scope the leaf sibling node
  * @param startNode current node to get sibling node from
@@ -14097,6 +14707,7 @@ exports.default = isBlockElement;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
+ * @internal
  * Checks if node1 is after node2
  * @param node1 The node to check if it is after another node
  * @param node2 The node to check if another node is after this one
@@ -14306,6 +14917,38 @@ function matchesSelector(element, selector) {
 exports.default = matchesSelector;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts":
+/*!*******************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts ***!
+  \*******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Replace all child nodes of the given target node to the child nodes of source node.
+ * @param target Target node, all child nodes of this node will be removed if keepExistingChildren is not set to true
+ * @param source (Optional) source node, all child nodes of this node will be move to target node
+ * @param keepExistingChildren (Optional) When set to true, all existing child nodes of target will be kept
+ */
+function moveChildNodes(target, source, keepExistingChildren) {
+    if (!target) {
+        return;
+    }
+    while (!keepExistingChildren && target.firstChild) {
+        target.removeChild(target.firstChild);
+    }
+    while (source === null || source === void 0 ? void 0 : source.firstChild) {
+        target.appendChild(source.firstChild);
+    }
+}
+exports.default = moveChildNodes;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts":
@@ -14500,6 +15143,13 @@ exports.default = safeInstanceOf;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Set text color or background color to the given element
+ * @param element The element to set color to
+ * @param color The color to set, it can be a string of color name/value or a ModeIndependentColor object
+ * @param isBackgroundColor Whether set background color or text color
+ * @param isDarkMode Whether current mode is dark mode. @default false
+ */
 function setColor(element, color, isBackgroundColor, isDarkMode) {
     var colorString = typeof color === 'string' ? color.trim() : '';
     var modeIndependentColor = typeof color === 'string' ? null : color;
@@ -14522,6 +15172,65 @@ function setColor(element, color, isBackgroundColor, isDarkMode) {
 exports.default = setColor;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts":
+/*!*********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts ***!
+  \*********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+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__(/*! ./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__(/*! ./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.
+ */
+function setListItemStyle(element, styles) {
+    var elementsStyles = getInlineChildElementsStyle(element);
+    var stylesToApply = getStyles_1.default(element);
+    styles.forEach(function (styleName) {
+        var styleValues = elementsStyles.map(function (style) {
+            return style[styleName] !== undefined ? style[styleName] : '';
+        });
+        if (styleValues &&
+            (styleValues.length == 1 || new Set(styleValues).size == 1) &&
+            styleValues[0]) {
+            stylesToApply[styleName] = styleValues[0];
+        }
+    });
+    setStyles_1.default(element, stylesToApply);
+}
+exports.default = setListItemStyle;
+function getInlineChildElementsStyle(element) {
+    var result = [];
+    var contentTraverser = ContentTraverser_1.default.createBodyTraverser(element);
+    var currentInlineElement;
+    while (contentTraverser.currentInlineElement != currentInlineElement) {
+        currentInlineElement = contentTraverser.currentInlineElement;
+        var currentNode = currentInlineElement.getContainerNode();
+        currentNode = findClosestElementAncestor_1.default(currentNode);
+        if (safeInstanceOf_1.default(currentNode, 'HTMLElement')) {
+            var childStyle = getStyles_1.default(currentNode);
+            if (childStyle) {
+                result.push(childStyle);
+            }
+        }
+        contentTraverser.getNextInlineElement();
+    }
+    return result;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/shouldSkipNode.ts":
@@ -14539,6 +15248,7 @@ var getComputedStyles_1 = __webpack_require__(/*! ./getComputedStyles */ "./pack
 var CRLF = /^[\r\n]+$/gm;
 var CRLF_SPACE = /[\t\r\n\u0020\u200B]/gm; // We should only find new line, real space or ZeroWidthSpace (TAB, %20, but not &nbsp;)
 /**
+ * @internal
  * Skip a node when any of following conditions are true
  * - it is neither Element nor Text
  * - it is a text node but is empty
@@ -14757,6 +15467,7 @@ exports.default = unwrap;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var createElement_1 = __webpack_require__(/*! ./createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
 var fromHtml_1 = __webpack_require__(/*! ./fromHtml */ "./packages/roosterjs-editor-dom/lib/utils/fromHtml.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 function wrap(nodes, wrapper) {
@@ -14764,12 +15475,19 @@ function wrap(nodes, wrapper) {
     if (nodes.length == 0 || !nodes[0]) {
         return null;
     }
+    if (!wrapper) {
+        wrapper = 'div';
+    }
     if (!safeInstanceOf_1.default(wrapper, 'HTMLElement')) {
         var document_1 = nodes[0].ownerDocument;
-        wrapper = wrapper || 'div';
-        wrapper = /^\w+$/.test(wrapper)
-            ? document_1.createElement(wrapper)
-            : fromHtml_1.default(wrapper, document_1)[0];
+        if (typeof wrapper === 'string') {
+            wrapper = /^\w+$/.test(wrapper)
+                ? document_1.createElement(wrapper)
+                : fromHtml_1.default(wrapper, document_1)[0]; // This will be removed in next major release
+        }
+        else {
+            wrapper = createElement_1.default(wrapper, document_1);
+        }
     }
     var parentNode = nodes[0].parentNode;
     if (parentNode) {
@@ -14903,64 +15621,11 @@ __export(__webpack_require__(/*! ./plugins/ImageEdit/index */ "./packages/rooste
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
 Object.defineProperty(exports, "__esModule", { value: true });
-var ImageEdit_1 = __webpack_require__(/*! ./ImageEdit */ "./packages/roosterjs-editor-plugins/lib/ImageEdit.ts");
-/**
- * @deprecated Use ImageEdit plugin instead
- */
-var ImageResize = /** @class */ (function (_super) {
-    __extends(ImageResize, _super);
-    /**
-     * Create a new instance of ImageResize
-     * @param minWidth Minimum width of image when resize in pixel, default value is 10
-     * @param minHeight Minimum height of image when resize in pixel, default value is 10
-     * @param selectionBorderColor Color of resize border and handles, default value is #DB626C
-     * @param forcePreserveRatio Whether always preserve width/height ratio when resize, default value is false
-     * @param resizableImageSelector Selector for picking which image is resizable (e.g. for all images not placeholders), note
-     * that the tag must be IMG regardless what the selector is
-     */
-    function ImageResize(minWidth, minHeight, selectionBorderColor, forcePreserveRatio, resizableImageSelector) {
-        if (minWidth === void 0) { minWidth = 10; }
-        if (minHeight === void 0) { minHeight = 10; }
-        if (selectionBorderColor === void 0) { selectionBorderColor = '#DB626C'; }
-        if (forcePreserveRatio === void 0) { forcePreserveRatio = false; }
-        if (resizableImageSelector === void 0) { resizableImageSelector = 'img'; }
-        return _super.call(this, {
-            minHeight: minHeight,
-            minWidth: minWidth,
-            borderColor: selectionBorderColor,
-            preserveRatio: forcePreserveRatio,
-            imageSelector: resizableImageSelector,
-        }) || this;
-    }
-    /**
-     * @deprecated
-     */
-    ImageResize.prototype.showResizeHandle = function (img) {
-        this.setEditingImage(img, 3 /* Resize */);
-    };
-    /**
-     * @deprecated
-     */
-    ImageResize.prototype.hideResizeHandle = function (selectImageAfterUnSelect) {
-        this.setEditingImage(null /*image*/, selectImageAfterUnSelect);
-    };
-    return ImageResize;
-}(ImageEdit_1.ImageEdit));
-exports.ImageResize = ImageResize;
+__export(__webpack_require__(/*! ./plugins/ImageResize/index */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/index.ts"));
 
 
 /***/ }),
@@ -15481,6 +16146,7 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
         if (collapseOnly && !range.collapsed) {
             return null;
         }
+        range.commonAncestorContainer.normalize();
         var pos = roosterjs_editor_dom_1.Position.getEnd(range).normalize();
         var isAtBeginOrEnd = pos.offset == 0 || pos.isAtEnd;
         var entityNode = null;
@@ -15537,7 +16203,6 @@ exports.EntityFeatures = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var blockFormat_1 = __webpack_require__(/*! roosterjs-editor-api/lib/utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.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");
 /**
@@ -15580,7 +16245,7 @@ var MergeInNewLine = {
     handleEvent: function (event, editor) {
         var li = editor.getElementAtCursor('LI', null /*startFrom*/, event);
         if (li.previousSibling) {
-            blockFormat_1.default(editor, function (region, start, end) {
+            roosterjs_editor_api_1.blockFormat(editor, function (region, start, end) {
                 var vList = roosterjs_editor_dom_1.createVListFromRegion(region, false /*includeSiblingList*/, li);
                 vList.setIndentation(start, end, 1 /* Decrease */, true /*softOutdent*/);
                 vList.writeBack();
@@ -15637,7 +16302,7 @@ var OutdentWhenEnterOnEmptyLine = {
         return !event.rawEvent.shiftKey && li && roosterjs_editor_dom_1.isNodeEmpty(li);
     },
     handleEvent: function (event, editor) {
-        editor.addUndoSnapshot(function () { return toggleListAndPreventDefault(event, editor); }, null /*changeSource*/, true /*canUndoByBackspace*/);
+        editor.addUndoSnapshot(function () { return toggleListAndPreventDefault(event, editor, false /* includeSiblingLists */); }, null /*changeSource*/, true /*canUndoByBackspace*/);
     },
     defaultDisabled: !roosterjs_editor_dom_1.Browser.isIE && !roosterjs_editor_dom_1.Browser.isChrome,
 };
@@ -15663,27 +16328,29 @@ var AutoBullet = {
         editor.insertContent('&nbsp;');
         event.rawEvent.preventDefault();
         editor.addUndoSnapshot(function () {
+            var _a;
             var regions;
             var searcher = editor.getContentSearcherOfCursor();
             var textBeforeCursor = searcher.getSubStringBefore(4);
-            var rangeToDelete = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
-            if (!rangeToDelete) {
+            var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
+            if (!textRange) {
                 // no op if the range can't be found
             }
             else if (textBeforeCursor.indexOf('*') == 0 ||
                 textBeforeCursor.indexOf('-') == 0) {
-                prepareAutoBullet(editor, rangeToDelete);
+                prepareAutoBullet(editor, textRange);
                 roosterjs_editor_api_1.toggleBullet(editor);
             }
             else if (isAListPattern(textBeforeCursor)) {
-                prepareAutoBullet(editor, rangeToDelete);
+                prepareAutoBullet(editor, textRange);
                 roosterjs_editor_api_1.toggleNumbering(editor);
             }
             else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
                 var num = parseInt(textBeforeCursor);
-                prepareAutoBullet(editor, rangeToDelete);
+                prepareAutoBullet(editor, textRange);
                 roosterjs_editor_api_1.toggleNumbering(editor, num);
             }
+            (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
         }, null /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
@@ -15728,7 +16395,6 @@ function getCacheNextSibiling(event, editor) {
     return element;
 }
 function prepareAutoBullet(editor, range) {
-    range.deleteContents();
     var block = editor.getBlockElementAtNode(range.startContainer);
     var endNode = block === null || block === void 0 ? void 0 : block.getEndNode();
     if (endNode && roosterjs_editor_dom_1.getTagOfNode(endNode) != 'BR' && (block === null || block === void 0 ? void 0 : block.getTextContent().trim()) === '') {
@@ -15742,16 +16408,14 @@ function prepareAutoBullet(editor, range) {
         editor.select(range.startContainer, range.startOffset);
     }
 }
-function toggleListAndPreventDefault(event, editor) {
+function toggleListAndPreventDefault(event, editor, includeSiblingLists) {
+    if (includeSiblingLists === void 0) { includeSiblingLists = true; }
     var listInfo = cacheGetListElement(event, editor);
     if (listInfo) {
         var listElement = listInfo[0];
         var tag = roosterjs_editor_dom_1.getTagOfNode(listElement);
-        if (tag == 'UL') {
-            roosterjs_editor_api_1.toggleBullet(editor);
-        }
-        else if (tag == 'OL') {
-            roosterjs_editor_api_1.toggleNumbering(editor);
+        if (tag == 'UL' || tag == 'OL') {
+            roosterjs_editor_api_1.toggleListType(editor, tag == 'UL' ? 2 /* Unordered */ : 1 /* Ordered */, null /* startNumber */, includeSiblingLists);
         }
         editor.focus();
         event.rawEvent.preventDefault();
@@ -15909,6 +16573,7 @@ exports.MarkdownFeatures = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+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 QUOTE_TAG = 'BLOCKQUOTE';
 var STRUCTURED_TAGS = [QUOTE_TAG, 'LI', 'TD', 'TH'].join(',');
@@ -15959,15 +16624,31 @@ function splitQuote(event, editor) {
     editor.addUndoSnapshot(function () {
         var childOfQuote = cacheGetQuoteChild(event, editor);
         var parent;
+        var shouldClearFormat;
         if (roosterjs_editor_dom_1.getTagOfNode(childOfQuote) == QUOTE_TAG) {
             childOfQuote = roosterjs_editor_dom_1.wrap(roosterjs_editor_dom_1.toArray(childOfQuote.childNodes));
         }
         parent = roosterjs_editor_dom_1.splitBalancedNodeRange(childOfQuote);
+        shouldClearFormat = isStyledBlockquote(parent);
         roosterjs_editor_dom_1.unwrap(parent);
         editor.select(childOfQuote, 0 /* Begin */);
+        if (shouldClearFormat) {
+            roosterjs_editor_api_1.clearFormat(editor);
+        }
     });
     event.rawEvent.preventDefault();
 }
+var isStyledBlockquote = function (element) {
+    if (element &&
+        roosterjs_editor_dom_1.safeInstanceOf(element, 'HTMLQuoteElement') &&
+        element.style.borderLeft &&
+        element.style.borderColor &&
+        element.style.paddingLeft &&
+        element.style.color) {
+        return true;
+    }
+    return false;
+};
 /**
  * @internal
  */
@@ -16070,9 +16751,6 @@ exports.ShortcutFeatures = {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-// Edge can sometimes lose current format when Enter to new line.
-// So here we add an extra SPAN for Edge to workaround this bug
-var NEWLINE_HTML = roosterjs_editor_dom_1.Browser.isEdge ? '<div><span><br></span></div>' : '<div><br></div>';
 var CHILD_PARENT_TAG_MAP = {
     TD: 'TABLE',
     TH: 'TABLE',
@@ -16089,7 +16767,7 @@ var InsertLineBeforeStructuredNodeFeature = {
     shouldHandleEvent: cacheGetStructuredElement,
     handleEvent: function (event, editor) {
         var element = cacheGetStructuredElement(event, editor);
-        var div = roosterjs_editor_dom_1.fromHtml(NEWLINE_HTML, editor.getDocument())[0];
+        var div = roosterjs_editor_dom_1.createElement(1 /* EmptyLine */, editor.getDocument());
         editor.addUndoSnapshot(function () {
             element.parentNode.insertBefore(div, element);
             // Select the new line when we are in table. This is the same behavior with Word
@@ -16310,7 +16988,6 @@ exports.getAllFeatures = getAllFeatures_1.default;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var CONTAINER_HTML = '<div style="position: fixed; width: 0; height: 0"></div>';
 /**
  * An editor plugin that support showing a context menu using render() function from options parameter
  */
@@ -16372,7 +17049,7 @@ var ContextMenu = /** @class */ (function () {
     };
     ContextMenu.prototype.initContainer = function (x, y) {
         if (!this.container) {
-            this.container = roosterjs_editor_dom_1.fromHtml(CONTAINER_HTML, this.editor.getDocument())[0];
+            this.container = roosterjs_editor_dom_1.createElement(5 /* ContextMenuWrapper */, this.editor.getDocument());
             this.editor.insertNode(this.container, {
                 position: 4 /* Outside */,
             });
@@ -16413,7 +17090,12 @@ exports.ContextMenu = ContextMenu_1.default;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var makeReplacement = function (sourceString, replacementHTML, matchSourceCaseSensitive) { return ({ sourceString: sourceString, replacementHTML: replacementHTML, matchSourceCaseSensitive: matchSourceCaseSensitive }); };
+var makeReplacement = function (sourceString, replacementHTML, matchSourceCaseSensitive, shouldReplace) { return ({
+    sourceString: sourceString,
+    replacementHTML: replacementHTML,
+    matchSourceCaseSensitive: matchSourceCaseSensitive,
+    shouldReplace: shouldReplace,
+}); };
 var defaultReplacements = [
     makeReplacement(':)', '🙂', true),
     makeReplacement(';)', '😉', true),
@@ -16486,6 +17168,10 @@ var CustomReplacePlugin = /** @class */ (function () {
         if (replacement == null) {
             return;
         }
+        if (replacement.shouldReplace &&
+            !replacement.shouldReplace(replacement, searcher.getWordBefore())) {
+            return;
+        }
         // Reconstruct a selection of the text on the document that matches the
         // replacement we selected.
         var matchingText = searcher.getSubStringBefore(replacement.sourceString.length);
@@ -16493,7 +17179,7 @@ var CustomReplacePlugin = /** @class */ (function () {
         // parse the html string off the dom and inline the resulting element.
         var document = this.editor.getDocument();
         var parsingSpan = document.createElement('span');
-        parsingSpan.innerHTML = replacement.replacementHTML;
+        parsingSpan.innerHTML = this.editor.getTrustedHTMLHandler()(replacement.replacementHTML);
         var nodeToInsert = parsingSpan.childNodes.length == 1 ? parsingSpan.childNodes[0] : parsingSpan;
         // Switch the node for the selection range
         this.editor.addUndoSnapshot(function () {
@@ -16506,11 +17192,12 @@ var CustomReplacePlugin = /** @class */ (function () {
         if (stringToSearch.length == 0) {
             return null;
         }
-        var lowerCaseStringToSearch = stringToSearch.toLocaleLowerCase();
+        var originalStringToSearch = stringToSearch.replace(/\s/g, ' ');
+        var lowerCaseStringToSearch = originalStringToSearch.toLocaleLowerCase();
         for (var _i = 0, _a = this.replacements; _i < _a.length; _i++) {
             var replacement = _a[_i];
             var _b = replacement.matchSourceCaseSensitive
-                ? [stringToSearch, replacement.sourceString]
+                ? [originalStringToSearch, replacement.sourceString]
                 : [lowerCaseStringToSearch, replacement.sourceString.toLocaleLowerCase()], sourceMatch = _b[0], replacementMatch = _b[1];
             if (sourceMatch.substring(sourceMatch.length - replacementMatch.length) ==
                 replacementMatch) {
@@ -16901,18 +17588,20 @@ var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
 var applyChange_1 = __webpack_require__(/*! ./editInfoUtils/applyChange */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/applyChange.ts");
 var canRegenerateImage_1 = __webpack_require__(/*! ./api/canRegenerateImage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/api/canRegenerateImage.ts");
-var Cropper_1 = __webpack_require__(/*! ./imageEditors/Cropper */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Cropper.ts");
-var deleteEditInfo_1 = __webpack_require__(/*! ./editInfoUtils/deleteEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/deleteEditInfo.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../pluginUtils/DragAndDropHelper */ "./packages/roosterjs-editor-plugins/lib/pluginUtils/DragAndDropHelper.ts");
-var getEditInfoFromImage_1 = __webpack_require__(/*! ./editInfoUtils/getEditInfoFromImage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getEditInfoFromImage.ts");
 var getGeneratedImageSize_1 = __webpack_require__(/*! ./editInfoUtils/getGeneratedImageSize */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getGeneratedImageSize.ts");
+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 Resizer_1 = __webpack_require__(/*! ./imageEditors/Resizer */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Resizer.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'];
 /**
  * Map the experimental features to image edit operations to help determine which operation is allowed
  */
@@ -16943,10 +17632,6 @@ var ImageEditHTMLMap = (_b = {},
     _b[4 /* Rotate */] = Rotator_1.getRotateHTML,
     _b[8 /* Crop */] = Cropper_1.getCropHTML,
     _b);
-/**
- * A wrapper element to help hide cropped part of image
- */
-var IMAGE_WRAPPER_HTML = '<div style="width:100%;height:100%;position:relative;overflow:hidden"></div>';
 /**
  * Image edit entity name
  */
@@ -16983,8 +17668,8 @@ var ImageEdit = /** @class */ (function () {
             var img = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector('img');
             if (img && parent) {
                 img.style.position = '';
-                img.style.maxWidth = '100%';
                 img.style.margin = null;
+                img.style.textAlign = null;
                 parent.insertBefore(img, wrapper);
                 parent.removeChild(wrapper);
             }
@@ -17001,9 +17686,11 @@ var ImageEdit = /** @class */ (function () {
                 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
                 var isCropping = cropContainers.length == 1 && cropOverlays.length == 4;
-                var _a = _this.editInfo, angleRad = _a.angleRad, heightPx = _a.heightPx, bottomPercent = _a.bottomPercent, leftPercent = _a.leftPercent, rightPercent = _a.rightPercent, topPercent = _a.topPercent;
+                var _a = _this.editInfo, angleRad = _a.angleRad, bottomPercent = _a.bottomPercent, leftPercent = _a.leftPercent, rightPercent = _a.rightPercent, topPercent = _a.topPercent;
                 // Width/height of the image
                 var _b = getGeneratedImageSize_1.default(_this.editInfo, isCropping), targetWidth = _b.targetWidth, targetHeight = _b.targetHeight, originalWidth = _b.originalWidth, originalHeight = _b.originalHeight, visibleWidth = _b.visibleWidth, visibleHeight = _b.visibleHeight;
                 var marginHorizontal = (targetWidth - visibleWidth) / 2;
@@ -17017,6 +17704,9 @@ var ImageEdit = /** @class */ (function () {
                 wrapper.style.height = getPx(visibleHeight);
                 wrapper.style.margin = marginVertical + "px " + marginHorizontal + "px";
                 wrapper.style.transform = "rotate(" + angleRad + "rad)";
+                // 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);
@@ -17027,6 +17717,7 @@ var ImageEdit = /** @class */ (function () {
                     setSize(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);
                     setSize(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);
                     setSize(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);
+                    updateHandleCursor(cropHandles, angleRad);
                 }
                 else {
                     // For rotate/resize, set the margin of the image so that cropped part won't be visible
@@ -17035,24 +17726,12 @@ var ImageEdit = /** @class */ (function () {
                     if ((context === null || context === void 0 ? void 0 : context.elementClass) == "r_resizeH" /* ResizeHandle */) {
                         var clientWidth = wrapper.clientWidth;
                         var clientHeight = wrapper.clientHeight;
+                        _this.wasResized = true;
                         Resizer_1.doubleCheckResize(_this.editInfo, _this.options.preserveRatio, clientWidth, clientHeight);
                         _this.updateWrapper();
                     }
-                    // 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
-                    var distance = _this.editor.getRelativeDistanceToEditor(wrapper, true /*addScroll*/);
-                    if (rotateCenter && rotateHandle && distance) {
-                        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(Rotator_1.ROTATE_GAP, adjustedDistance), 0);
-                        var rotateTop = Math.max(Math.min(Rotator_1.ROTATE_SIZE, adjustedDistance - rotateGap), 0);
-                        rotateCenter.style.top = getPx(-rotateGap);
-                        rotateCenter.style.height = getPx(rotateGap);
-                        rotateHandle.style.top = getPx(-rotateTop);
-                    }
+                    Rotator_1.updateRotateHandlePosition(_this.editInfo, _this.editor.getRelativeDistanceToEditor(wrapper, true /*addScroll*/), marginVertical, rotateCenter, rotateHandle);
+                    updateHandleCursor(resizeHandles, angleRad);
                 }
             }
         };
@@ -17116,7 +17795,7 @@ var ImageEdit = /** @class */ (function () {
                 }
                 else if (key == 27 /* ESCAPE */ && this.image) {
                     // Press ESC should cancel current editing operation, resume back to original edit info
-                    this.editInfo = getEditInfoFromImage_1.default(this.image);
+                    this.editInfo = editInfo_1.getEditInfoFromImage(this.image);
                     this.setEditingImage(null);
                     e.rawEvent.preventDefault();
                 }
@@ -17145,7 +17824,7 @@ var ImageEdit = /** @class */ (function () {
             case 8 /* ExtractContentWithDom */:
                 // When extract content, remove all image info since they may not be valid when load the content again
                 roosterjs_editor_dom_1.toArray(e.clonedRoot.querySelectorAll(this.options.imageSelector)).forEach(function (img) {
-                    deleteEditInfo_1.default(img);
+                    editInfo_1.deleteEditInfo(img);
                 });
                 break;
         }
@@ -17158,7 +17837,7 @@ var ImageEdit = /** @class */ (function () {
             // When there is image in editing, clean up any cached objects and elements
             this.clearDndHelpers();
             // Apply the changes, and add undo snapshot if necessary
-            if (applyChange_1.default(this.editor, this.image, this.editInfo, this.lastSrc)) {
+            if (applyChange_1.default(this.editor, this.image, this.editInfo, this.lastSrc, this.wasResized)) {
                 this.editor.addUndoSnapshot(function () { return _this.image; }, "ImageResize" /* ImageResize */);
             }
             // Remove editing wrapper
@@ -17178,7 +17857,9 @@ var ImageEdit = /** @class */ (function () {
             this.editor.addUndoSnapshot();
             this.image = image;
             // Get initial edit info
-            this.editInfo = getEditInfoFromImage_1.default(image);
+            this.editInfo = editInfo_1.getEditInfoFromImage(image);
+            //Check if the image was resized by the user
+            this.wasResized = checkIfImageWasResized(this.image);
             operation =
                 (canRegenerateImage_1.default(image) ? operation : 3 /* Resize */) &
                     this.allowedOperations;
@@ -17186,7 +17867,7 @@ var ImageEdit = /** @class */ (function () {
             var wrapper = this.createWrapper(operation);
             this.updateWrapper();
             // Init drag and drop
-            this.dndHelpers = __spreadArrays(this.createDndHelpers("r_resizeH" /* ResizeHandle */, Resizer_1.default), this.createDndHelpers("r_rotateH" /* RotateHandle */, Rotator_1.default), this.createDndHelpers("r_cropH" /* CropHandle */, Cropper_1.default), this.createDndHelpers("r_cropC" /* CropContainer */, Cropper_1.default));
+            this.dndHelpers = __spreadArrays(this.createDndHelpers("r_resizeH" /* ResizeHandle */, Resizer_1.Resizer), this.createDndHelpers("r_rotateH" /* RotateHandle */, Rotator_1.Rotator), this.createDndHelpers("r_cropH" /* CropHandle */, Cropper_1.Cropper), this.createDndHelpers("r_cropC" /* CropContainer */, Cropper_1.Cropper));
             // Put cursor next to the image
             this.editor.select(wrapper, -3 /* After */);
         }
@@ -17195,8 +17876,9 @@ var ImageEdit = /** @class */ (function () {
      * Create editing wrapper for the image
      */
     ImageEdit.prototype.createWrapper = function (operation) {
+        var _this = this;
         // Wrap the image with an entity so that we can easily retrieve it later
-        var wrapper = roosterjs_editor_api_1.insertEntity(this.editor, IMAGE_EDIT_WRAPPER_ENTITY_TYPE, roosterjs_editor_dom_1.wrap(this.image, IMAGE_WRAPPER_HTML), false /*isBlock*/, true /*isReadonly*/).wrapper;
+        var wrapper = roosterjs_editor_api_1.insertEntity(this.editor, IMAGE_EDIT_WRAPPER_ENTITY_TYPE, roosterjs_editor_dom_1.wrap(this.image, 6 /* ImageEditWrapper */), false /*isBlock*/, true /*isReadonly*/).wrapper;
         wrapper.style.position = 'relative';
         wrapper.style.maxWidth = '100%';
         wrapper.style.verticalAlign = 'bottom';
@@ -17215,14 +17897,18 @@ var ImageEdit = /** @class */ (function () {
                 ? DARK_MODE_BGCOLOR
                 : LIGHT_MODE_BGCOLOR,
         };
-        var html = Object.keys(ImageEditHTMLMap)
-            .map(function (thisOperation) {
-            return (operation & thisOperation) == thisOperation
-                ? ImageEditHTMLMap[thisOperation](options)
-                : '';
-        })
-            .join('');
-        roosterjs_editor_dom_1.fromHtml(html, this.image.ownerDocument).forEach(function (node) { return wrapper.appendChild(node); });
+        var htmlData = [];
+        Object.keys(ImageEditHTMLMap).forEach(function (thisOperation) {
+            if ((operation & thisOperation) == thisOperation) {
+                roosterjs_editor_dom_1.arrayPush(htmlData, ImageEditHTMLMap[thisOperation](options));
+            }
+        });
+        htmlData.forEach(function (data) {
+            var element = roosterjs_editor_dom_1.createElement(data, _this.image.ownerDocument);
+            if (element) {
+                wrapper.appendChild(element);
+            }
+        });
         return wrapper;
     };
     /**
@@ -17280,6 +17966,54 @@ function getPx(value) {
 function getEditElements(wrapper, elementClass) {
     return roosterjs_editor_dom_1.toArray(wrapper.querySelectorAll('.' + elementClass));
 }
+function isRtl(element) {
+    return roosterjs_editor_dom_1.safeInstanceOf(element, 'HTMLElement')
+        ? roosterjs_editor_dom_1.getComputedStyle(element, 'direction') == 'rtl'
+        : false;
+}
+function handleRadIndexCalculator(angleRad) {
+    var idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
+    return idx < 0 ? idx + DIRECTIONS : idx;
+}
+function rotateHandles(element, angleRad) {
+    var radIndex = handleRadIndexCalculator(angleRad);
+    var originalDirection = element.dataset.y + element.dataset.x;
+    var originalIndex = DirectionOrder.indexOf(originalDirection);
+    var rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;
+    return DirectionOrder[rotatedIndex % DIRECTIONS];
+}
+/**
+ * Rotate the resizer and cropper handles according to the image position.
+ * @param handles The resizer handles.
+ * @param angleRad The angle that the image was rotated.
+ */
+function updateHandleCursor(handles, angleRad) {
+    handles.map(function (handle) {
+        handle.style.cursor = rotateHandles(handle, angleRad) + "-resize";
+    });
+}
+/**
+ * Check if the current image was resized by the user
+ * @param image the current image
+ * @returns if the user resized the image, returns true, otherwise, returns false
+ */
+function checkIfImageWasResized(image) {
+    var width = image.width, height = image.height, style = image.style;
+    if (style.maxWidth === 'initial' &&
+        (isFixedNumberValue(style.height) ||
+            isFixedNumberValue(style.width) ||
+            isFixedNumberValue(width) ||
+            isFixedNumberValue(height))) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function isFixedNumberValue(value) {
+    var numberValue = typeof value === 'string' ? parseInt(value) : value;
+    return !isNaN(numberValue);
+}
 
 
 /***/ }),
@@ -17332,15 +18066,15 @@ exports.default = canRegenerateImage;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var getEditInfoFromImage_1 = __webpack_require__(/*! ../editInfoUtils/getEditInfoFromImage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getEditInfoFromImage.ts");
 var getTargetSizeByPercentage_1 = __webpack_require__(/*! ../editInfoUtils/getTargetSizeByPercentage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getTargetSizeByPercentage.ts");
+var editInfo_1 = __webpack_require__(/*! ../editInfoUtils/editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 /**
  * Check if the image is already resized to the given percentage
  * @param image The image to check
  * @param percentage The percentage to check
  */
 function isResizedTo(image, percentage) {
-    var editInfo = getEditInfoFromImage_1.default(image);
+    var editInfo = editInfo_1.getEditInfoFromImage(image);
     var _a = getTargetSizeByPercentage_1.default(editInfo, percentage), width = _a.width, height = _a.height;
     return (Math.round(width) == Math.round(editInfo.widthPx) &&
         Math.round(height) == Math.round(editInfo.heightPx));
@@ -17360,7 +18094,7 @@ exports.default = isResizedTo;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var deleteEditInfo_1 = __webpack_require__(/*! ../editInfoUtils/deleteEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/deleteEditInfo.ts");
+var editInfo_1 = __webpack_require__(/*! ../editInfoUtils/editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 /**
  * Remove explicit width & height attributes on the image element.
  * @param editor The editor that contains the image
@@ -17373,7 +18107,7 @@ function resetImage(editor, image) {
         image.style.maxWidth = '100%';
         image.removeAttribute('width');
         image.removeAttribute('height');
-        deleteEditInfo_1.default(image);
+        editInfo_1.deleteEditInfo(image);
     }, "ImageResize" /* ImageResize */);
 }
 exports.default = resetImage;
@@ -17392,9 +18126,9 @@ exports.default = resetImage;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var applyChange_1 = __webpack_require__(/*! ../editInfoUtils/applyChange */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/applyChange.ts");
-var getEditInfoFromImage_1 = __webpack_require__(/*! ../editInfoUtils/getEditInfoFromImage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getEditInfoFromImage.ts");
 var getTargetSizeByPercentage_1 = __webpack_require__(/*! ../editInfoUtils/getTargetSizeByPercentage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getTargetSizeByPercentage.ts");
 var isResizedTo_1 = __webpack_require__(/*! ./isResizedTo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/api/isResizedTo.ts");
+var editInfo_1 = __webpack_require__(/*! ../editInfoUtils/editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 /**
  * Resize the image by percentage of its natural size. If the image is cropped or rotated,
  * the final size will also calculated with crop and rotate info.
@@ -17405,7 +18139,7 @@ var isResizedTo_1 = __webpack_require__(/*! ./isResizedTo */ "./packages/rooster
  * @param minHeight Minimum height
  */
 function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
-    var editInfo = getEditInfoFromImage_1.default(image);
+    var editInfo = editInfo_1.getEditInfoFromImage(image);
     if (!isResizedTo_1.default(image, percentage)) {
         loadImage(image, editInfo.src, function () {
             if (!editor.isDisposed() && editor.contains(image)) {
@@ -17414,7 +18148,7 @@ function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
                 editInfo.widthPx = Math.max(width, minWidth);
                 editInfo.heightPx = Math.max(height, minHeight);
                 editor.addUndoSnapshot(function () {
-                    applyChange_1.default(editor, image, editInfo, lastSrc_1);
+                    applyChange_1.default(editor, image, editInfo, lastSrc_1, true /*wasResized*/);
                 }, "ImageResize" /* ImageResize */);
             }
         });
@@ -17449,11 +18183,9 @@ function loadImage(img, src, callback) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var checkEditInfoState_1 = __webpack_require__(/*! ./checkEditInfoState */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/checkEditInfoState.ts");
-var deleteEditInfo_1 = __webpack_require__(/*! ./deleteEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/deleteEditInfo.ts");
 var generateDataURL_1 = __webpack_require__(/*! ./generateDataURL */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/generateDataURL.ts");
-var getEditInfoFromImage_1 = __webpack_require__(/*! ./getEditInfoFromImage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getEditInfoFromImage.ts");
 var getGeneratedImageSize_1 = __webpack_require__(/*! ./getGeneratedImageSize */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getGeneratedImageSize.ts");
-var saveEditInfo_1 = __webpack_require__(/*! ./saveEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/saveEditInfo.ts");
+var editInfo_1 = __webpack_require__(/*! ./editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 /**
  * @internal
  * Apply changes from the edit info of an image, write result to the image
@@ -17463,9 +18195,9 @@ var saveEditInfo_1 = __webpack_require__(/*! ./saveEditInfo */ "./packages/roost
  * @param previousSrc Last src value of the image before the change was made
  * @returns True if the image is changed, otherwise false
  */
-function applyChange(editor, image, editInfo, previousSrc) {
+function applyChange(editor, image, editInfo, previousSrc, wasResized) {
     var newSrc = '';
-    var initEditInfo = getEditInfoFromImage_1.default(image);
+    var initEditInfo = editInfo_1.getEditInfoFromImage(image);
     var state = checkEditInfoState_1.default(editInfo, initEditInfo);
     switch (state) {
         case 1 /* ResizeOnly */:
@@ -17497,25 +18229,42 @@ function applyChange(editor, image, editInfo, previousSrc) {
     if (newSrc == editInfo.src) {
         // If newSrc is the same with original one, it means there is only size change, but no rotation, no cropping,
         // so we don't need to keep edit info, we can delete it
-        deleteEditInfo_1.default(image);
+        editInfo_1.deleteEditInfo(image);
     }
     else {
         // Otherwise, save the new edit info to the image so that next time when we edit the same image, we know
         // the edit info
-        saveEditInfo_1.default(image, editInfo);
+        editInfo_1.saveEditInfo(image, editInfo);
     }
     // Write back the change to image, and set its new size
     var _a = getGeneratedImageSize_1.default(editInfo), targetWidth = _a.targetWidth, targetHeight = _a.targetHeight;
     image.src = newSrc;
-    image.style.width = targetWidth + 'px';
-    image.style.height = targetHeight + 'px';
-    image.width = targetWidth;
-    image.height = targetHeight;
+    setImageSize(image, wasResized, targetWidth, targetHeight);
     return (srcChanged ||
         editInfo.widthPx != initEditInfo.widthPx ||
         editInfo.heightPx != initEditInfo.heightPx);
 }
 exports.default = applyChange;
+/**
+ * @param img The current image.
+ * @param wasResized the current resize state of the image
+ */
+function setImageSize(image, wasResized, targetWidth, targetHeight) {
+    if (wasResized) {
+        image.style.maxWidth = 'initial';
+        image.width = targetWidth;
+        image.height = targetHeight;
+        image.style.width = targetWidth + 'px';
+        image.style.height = targetHeight + 'px';
+    }
+    else {
+        image.style.maxWidth = '100%';
+        image.style.height = 'initial';
+        image.style.width = 'initial';
+        image.removeAttribute('height');
+        image.removeAttribute('width');
+    }
+}
 
 
 /***/ }),
@@ -17585,17 +18334,30 @@ function areSameNumber(n1, n2) {
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/deleteEditInfo.ts":
-/*!*************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/deleteEditInfo.ts ***!
-  \*************************************************************************************************/
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts":
+/*!*******************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts ***!
+  \*******************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var ImageEditInfo_1 = __webpack_require__(/*! ../types/ImageEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/types/ImageEditInfo.ts");
+var checkEditInfoState_1 = __webpack_require__(/*! ./checkEditInfoState */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/checkEditInfoState.ts");
+var IMAGE_EDIT_INFO_NAME = 'roosterEditInfo';
+/**
+ * @internal
+ * Save edit info to image
+ * @param image The image to save edit info to
+ * @param editInfo The edit info to save
+ */
+function saveEditInfo(image, editInfo) {
+    if (image) {
+        image.dataset[IMAGE_EDIT_INFO_NAME] = JSON.stringify(editInfo);
+    }
+}
+exports.saveEditInfo = saveEditInfo;
 /**
  * @internal
  * Delete edit info of an image if any
@@ -17603,10 +18365,45 @@ var ImageEditInfo_1 = __webpack_require__(/*! ../types/ImageEditInfo */ "./packa
  */
 function deleteEditInfo(image) {
     if (image) {
-        delete image.dataset[ImageEditInfo_1.IMAGE_EDIT_INFO_NAME];
+        delete image.dataset[IMAGE_EDIT_INFO_NAME];
+    }
+}
+exports.deleteEditInfo = deleteEditInfo;
+/**
+ * @internal
+ * Get image edit info from an image. If the image doesn't have edit info, create one from this image.
+ * When create new edit info, it will have width/height set to the image's current client width/height, and
+ * natural width/height set to the image's natural width/height, src set to its current src, and all
+ * other fields set to 0.
+ * @param image The image to get edit info from
+ */
+function getEditInfoFromImage(image) {
+    var obj = safeParseJSON(image === null || image === void 0 ? void 0 : image.dataset[IMAGE_EDIT_INFO_NAME]);
+    return checkEditInfoState_1.default(obj) == 0 /* Invalid */ ? getInitialEditInfo(image) : obj;
+}
+exports.getEditInfoFromImage = getEditInfoFromImage;
+function getInitialEditInfo(image) {
+    return {
+        src: image.src,
+        widthPx: image.clientWidth,
+        heightPx: image.clientHeight,
+        naturalWidth: image.naturalWidth,
+        naturalHeight: image.naturalHeight,
+        leftPercent: 0,
+        rightPercent: 0,
+        topPercent: 0,
+        bottomPercent: 0,
+        angleRad: 0,
+    };
+}
+function safeParseJSON(json) {
+    try {
+        return JSON.parse(json);
+    }
+    catch (_a) {
+        return null;
     }
 }
-exports.default = deleteEditInfo;
 
 
 /***/ }),
@@ -17650,57 +18447,6 @@ function generateDataURL(image, editInfo) {
 exports.default = generateDataURL;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getEditInfoFromImage.ts":
-/*!*******************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getEditInfoFromImage.ts ***!
-  \*******************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var checkEditInfoState_1 = __webpack_require__(/*! ./checkEditInfoState */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/checkEditInfoState.ts");
-var ImageEditInfo_1 = __webpack_require__(/*! ../types/ImageEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/types/ImageEditInfo.ts");
-/**
- * @internal
- * Get image edit info from an image. If the image doesn't have edit info, create one from this image.
- * When create new edit info, it will have width/height set to the image's current client width/height, and
- * natural width/height set to the image's natural width/height, src set to its current src, and all
- * other fields set to 0.
- * @param image The image to get edit info from
- */
-function getEditInfoFromImage(image) {
-    var obj = safeParseJSON(image === null || image === void 0 ? void 0 : image.dataset[ImageEditInfo_1.IMAGE_EDIT_INFO_NAME]);
-    return checkEditInfoState_1.default(obj) == 0 /* Invalid */ ? getInitialEditInfo(image) : obj;
-}
-exports.default = getEditInfoFromImage;
-function getInitialEditInfo(image) {
-    return {
-        src: image.src,
-        widthPx: image.clientWidth,
-        heightPx: image.clientHeight,
-        naturalWidth: image.naturalWidth,
-        naturalHeight: image.naturalHeight,
-        leftPercent: 0,
-        rightPercent: 0,
-        topPercent: 0,
-        bottomPercent: 0,
-        angleRad: 0,
-    };
-}
-function safeParseJSON(json) {
-    try {
-        return JSON.parse(json);
-    }
-    catch (_a) {
-        return null;
-    }
-}
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getGeneratedImageSize.ts":
@@ -17776,33 +18522,6 @@ function getTargetSizeByPercentage(editInfo, percentage) {
 exports.default = getTargetSizeByPercentage;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/saveEditInfo.ts":
-/*!***********************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/saveEditInfo.ts ***!
-  \***********************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var ImageEditInfo_1 = __webpack_require__(/*! ../types/ImageEditInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/types/ImageEditInfo.ts");
-/**
- * @internal
- * Save edit info to image
- * @param image The image to save edit info to
- * @param editInfo The edit info to save
- */
-function saveEditInfo(image, editInfo) {
-    if (image) {
-        image.dataset[ImageEditInfo_1.IMAGE_EDIT_INFO_NAME] = JSON.stringify(editInfo);
-    }
-}
-exports.default = saveEditInfo;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Cropper.ts":
@@ -17838,9 +18557,10 @@ var ROTATION = {
     se: 270,
 };
 /**
+ * @internal
  * Crop handle for DragAndDropHelper
  */
-var Cropper = {
+exports.Cropper = {
     onDragStart: function (_a) {
         var editInfo = _a.editInfo;
         return (__assign({}, editInfo));
@@ -17887,39 +18607,56 @@ function crop(basePercentage, deltaValue, fullValue, currentPercentage, minValue
     var validValue = Math.max(Math.min(newValue, maxValue), 0);
     return validValue / fullValue;
 }
-/**
- * @internal
- */
-exports.default = Cropper;
 /**
  * @internal
  * Get HTML for crop elements, including 4 overlays (to show dark shadow), 1 container and 4 crop handles
  */
 function getCropHTML() {
-    var overlayHTML = "<div style=\"position:absolute;background-color:rgb(0,0,0,0.5);pointer-events:none\" class=\"" + "r_cropO" /* CropOverlay */ + "\"></div>";
-    var handlesHTML = Xs.map(function (x) { return Ys.map(function (y) { return getCropHTMLInternal(x, y); }).join(''); }).join('');
-    var containerHTML = "\n        <div style=\"position:absolute;overflow:hidden\" class=\"" + "r_cropC" /* CropContainer */ + "\">\n            " + handlesHTML + "\n        </div>";
-    return containerHTML + overlayHTML + overlayHTML + overlayHTML + overlayHTML;
+    var overlayHTML = {
+        tag: 'div',
+        style: 'position:absolute;background-color:rgb(0,0,0,0.5);pointer-events:none',
+        className: "r_cropO" /* CropOverlay */,
+    };
+    var containerHTML = {
+        tag: 'div',
+        style: 'position:absolute;overflow:hidden',
+        className: "r_cropC" /* CropContainer */,
+        children: [],
+    };
+    Xs.forEach(function (x) { return Ys.forEach(function (y) { return containerHTML.children.push(getCropHTMLInternal(x, y)); }); });
+    return [containerHTML, overlayHTML, overlayHTML, overlayHTML, overlayHTML];
 }
 exports.getCropHTML = getCropHTML;
 function getCropHTMLInternal(x, y) {
     var leftOrRight = x == 'w' ? 'left' : 'right';
     var topOrBottom = y == 'n' ? 'top' : 'bottom';
     var rotation = ROTATION[y + x];
-    var context = "data-x=\"" + x + "\" data-y=\"" + y + "\"";
-    return "\n        <div class=\"" + "r_cropH" /* CropHandle */ + "\" " + context + " style=\"position:absolute;pointer-events:auto;cursor:" + y + x + "-resize;" + leftOrRight + ":0;" + topOrBottom + ":0;width:" + CROP_HANDLE_SIZE + "px;height:" + CROP_HANDLE_SIZE + "px;transform:rotate(" + rotation + "deg)\">\n            " + getCropHandleHTML() + "\n        </div>";
+    return {
+        tag: 'div',
+        className: "r_cropH" /* CropHandle */,
+        style: "position:absolute;pointer-events:auto;cursor:" + y + x + "-resize;" + leftOrRight + ":0;" + topOrBottom + ":0;width:" + CROP_HANDLE_SIZE + "px;height:" + CROP_HANDLE_SIZE + "px;transform:rotate(" + rotation + "deg)",
+        dataset: { x: x, y: y },
+        children: getCropHandleHTML(),
+    };
 }
 function getCropHandleHTML() {
-    return [0, 1]
-        .map(function (layer) { return [0, 1].map(function (dir) { return getCropHandleHTMLInternal(layer, dir); }).join(''); })
-        .join('');
+    var result = [];
+    [0, 1].forEach(function (layer) {
+        return [0, 1].forEach(function (dir) {
+            result.push(getCropHandleHTMLInternal(layer, dir));
+        });
+    });
+    return result;
 }
 function getCropHandleHTMLInternal(layer, dir) {
     var position = dir == 0
         ? "right:" + layer + "px;height:" + (CROP_HANDLE_WIDTH - layer * 2) + "px;"
         : "top:" + layer + "px;width:" + (CROP_HANDLE_WIDTH - layer * 2) + "px;";
     var bgColor = layer == 0 ? 'white' : 'black';
-    return "<div style=\"position:absolute;left:" + layer + "px;bottom:" + layer + "px;" + position + ";background-color:" + bgColor + "\"></div>";
+    return {
+        tag: 'div',
+        style: "position:absolute;left:" + layer + "px;bottom:" + layer + "px;" + position + ";background-color:" + bgColor,
+    };
 }
 
 
@@ -17951,9 +18688,10 @@ var RESIZE_HANDLE_MARGIN = 3;
 var Xs = ['w', '', 'e'];
 var Ys = ['s', '', 'n'];
 /**
+ * @internal
  * The resize drag and drop handler
  */
-var Resizer = {
+exports.Resizer = {
     onDragStart: function (_a) {
         var editInfo = _a.editInfo;
         return (__assign({}, editInfo));
@@ -17987,10 +18725,6 @@ var Resizer = {
         return true;
     },
 };
-/**
- * @internal
- */
-exports.default = Resizer;
 /**
  * @internal Calculate the rotated x and y distance for mouse moving
  * @param x Original x distance
@@ -18042,11 +18776,13 @@ exports.doubleCheckResize = doubleCheckResize;
  */
 function getCornerResizeHTML(_a) {
     var resizeBorderColor = _a.borderColor;
-    return Xs.map(function (x) {
-        return Ys.map(function (y) {
-            return (x == '') == (y == '') ? getResizeHandleHTML(x, y, resizeBorderColor) : '';
-        }).join('');
-    }).join('');
+    var result = [];
+    Xs.forEach(function (x) {
+        return Ys.forEach(function (y) {
+            return result.push((x == '') == (y == '') ? getResizeHandleHTML(x, y, resizeBorderColor) : null);
+        });
+    });
+    return result;
 }
 exports.getCornerResizeHTML = getCornerResizeHTML;
 /**
@@ -18055,11 +18791,13 @@ exports.getCornerResizeHTML = getCornerResizeHTML;
  */
 function getSideResizeHTML(_a) {
     var resizeBorderColor = _a.borderColor;
-    return Xs.map(function (x) {
-        return Ys.map(function (y) {
-            return (x == '') != (y == '') ? getResizeHandleHTML(x, y, resizeBorderColor) : '';
-        }).join('');
-    }).join('');
+    var result = [];
+    Xs.forEach(function (x) {
+        return Ys.forEach(function (y) {
+            return result.push((x == '') != (y == '') ? getResizeHandleHTML(x, y, resizeBorderColor) : null);
+        });
+    });
+    return result;
 }
 exports.getSideResizeHTML = getSideResizeHTML;
 function getResizeHandleHTML(x, y, borderColor) {
@@ -18068,10 +18806,23 @@ function getResizeHandleHTML(x, y, borderColor) {
     var leftOrRightValue = x == '' ? '50%' : '0px';
     var topOrBottomValue = y == '' ? '50%' : '0px';
     var direction = y + x;
-    var context = "data-x=\"" + x + "\" data-y=\"" + y + "\"";
     return x == '' && y == ''
-        ? "<div style=\"position:absolute;left:0;right:0;top:0;bottom:0;border:solid 1px " + borderColor + ";pointer-events:none;\"></div>"
-        : "\n    <div style=\"position:absolute;" + leftOrRight + ":" + leftOrRightValue + ";" + topOrBottom + ":" + topOrBottomValue + "\">\n        <div class=\"" + "r_resizeH" /* ResizeHandle */ + "\" " + context + " style=\"position:relative;width:" + RESIZE_HANDLE_SIZE + "px;height:" + RESIZE_HANDLE_SIZE + "px;background-color: " + borderColor + ";cursor:" + direction + "-resize;" + topOrBottom + ":-" + RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + RESIZE_HANDLE_MARGIN + "px\">\n        </div>\n    </div>";
+        ? {
+            tag: 'div',
+            style: "position:absolute;left:0;right:0;top:0;bottom:0;border:solid 1px " + borderColor + ";pointer-events:none",
+        }
+        : {
+            tag: 'div',
+            style: "position:absolute;" + leftOrRight + ":" + leftOrRightValue + ";" + topOrBottom + ":" + topOrBottomValue,
+            children: [
+                {
+                    tag: 'div',
+                    style: "position:relative;width:" + RESIZE_HANDLE_SIZE + "px;height:" + RESIZE_HANDLE_SIZE + "px;background-color: " + borderColor + ";cursor:" + direction + "-resize;" + topOrBottom + ":-" + RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + RESIZE_HANDLE_MARGIN + "px",
+                    className: "r_resizeH" /* ResizeHandle */,
+                    dataset: { x: x, y: y },
+                },
+            ],
+        };
 }
 
 
@@ -18098,21 +18849,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * @internal Size of rotate icon
- */
-exports.ROTATE_SIZE = 32;
-/**
- * @internal Gap between image and the rotate handle
- */
-exports.ROTATE_GAP = 15;
+var ROTATE_SIZE = 32;
+var ROTATE_GAP = 15;
 var DEG_PER_RAD = 180 / Math.PI;
-var DEFAULT_ROTATE_HANDLE_HEIGHT = exports.ROTATE_SIZE / 2 + exports.ROTATE_GAP;
+var DEFAULT_ROTATE_HANDLE_HEIGHT = ROTATE_SIZE / 2 + ROTATE_GAP;
 var ROTATE_ICON_MARGIN = 8;
 /**
+ * @internal
  * The rotate drag and drop handler
  */
-var Rotator = {
+exports.Rotator = {
     onDragStart: function (_a) {
         var editInfo = _a.editInfo;
         return (__assign({}, editInfo));
@@ -18139,20 +18885,76 @@ var 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
  */
-exports.default = Rotator;
+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
  */
 function getRotateHTML(_a) {
-    var borderColor = _a.borderColor, rotateHandleHTML = _a.rotateIconHTML, rotateHandleBackColor = _a.rotateHandleBackColor;
-    var handleLeft = exports.ROTATE_SIZE / 2;
-    return "\n        <div class=\"" + "r_rotateC" /* RotateCenter */ + "\" style=\"position:absolute;left:50%;width:1px;background-color:" + borderColor + "\">\n            <div class=\"" + "r_rotateH" /* RotateHandle */ + "\" style=\"position:absolute;background-color:" + rotateHandleBackColor + ";border:solid 1px " + borderColor + ";border-radius:50%;width:" + exports.ROTATE_SIZE + "px;height:" + exports.ROTATE_SIZE + "px;left:-" + handleLeft + "px;cursor:move\">\n                " + (rotateHandleHTML || getRotateIconHTML(borderColor)) + "\n            </div>\n        </div>";
+    var borderColor = _a.borderColor, rotateHandleBackColor = _a.rotateHandleBackColor;
+    var handleLeft = ROTATE_SIZE / 2;
+    return [
+        {
+            tag: 'div',
+            className: "r_rotateC" /* RotateCenter */,
+            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor,
+            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",
+                    children: [getRotateIconHTML(borderColor)],
+                },
+            ],
+        },
+    ];
 }
 exports.getRotateHTML = getRotateHTML;
 function getRotateIconHTML(borderColor) {
-    return "\n        <svg style=\"width:16px;height:16px;margin: " + ROTATE_ICON_MARGIN + "px " + ROTATE_ICON_MARGIN + "px\">\n            <path d=\"M 10.5,10.0 A 3.8,3.8 0 1 1 6.7,6.3\" transform=\"matrix(1.1 1.1 -1.1 1.1 11.6 -10.8)\" fill-opacity=\"0\" stroke-width=\"1\" stroke=\"" + borderColor + "\" />\n            <path d=\"M12.0 3.648l.884-.884.53 2.298-2.298-.53z\" stroke=\"" + borderColor + "\" />\n        </svg>";
+    var _a;
+    return {
+        tag: 'svg',
+        namespace: 'http://www.w3.org/2000/svg',
+        style: "width:16px;height:16px;margin: " + ROTATE_ICON_MARGIN + "px " + ROTATE_ICON_MARGIN + "px",
+        children: [
+            {
+                tag: 'path',
+                namespace: 'http://www.w3.org/2000/svg',
+                attributes: (_a = {
+                        d: 'M 10.5,10.0 A 3.8,3.8 0 1 1 6.7,6.3',
+                        transform: 'matrix(1.1 1.1 -1.1 1.1 11.6 -10.8)'
+                    },
+                    _a['fill-opacity'] = '0',
+                    _a.stroke = borderColor,
+                    _a),
+            },
+            {
+                tag: 'path',
+                namespace: 'http://www.w3.org/2000/svg',
+                attributes: {
+                    d: 'M12.0 3.648l.884-.884.53 2.298-2.298-.53z',
+                    stroke: borderColor,
+                },
+            },
+        ],
+    };
 }
 
 
@@ -18182,17 +18984,89 @@ exports.resetImage = resetImage_1.default;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/types/ImageEditInfo.ts":
-/*!****************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/types/ImageEditInfo.ts ***!
-  \****************************************************************************************/
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResize.ts":
+/*!**********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResize.ts ***!
+  \**********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var ImageEdit_1 = __webpack_require__(/*! ../ImageEdit/ImageEdit */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/ImageEdit.ts");
+/**
+ * @deprecated Use ImageEdit plugin instead
+ */
+var ImageResize = /** @class */ (function (_super) {
+    __extends(ImageResize, _super);
+    /**
+     * Create a new instance of ImageResize
+     * @param minWidth Minimum width of image when resize in pixel, default value is 10
+     * @param minHeight Minimum height of image when resize in pixel, default value is 10
+     * @param selectionBorderColor Color of resize border and handles, default value is #DB626C
+     * @param forcePreserveRatio Whether always preserve width/height ratio when resize, default value is false
+     * @param resizableImageSelector Selector for picking which image is resizable (e.g. for all images not placeholders), note
+     * that the tag must be IMG regardless what the selector is
+     */
+    function ImageResize(minWidth, minHeight, selectionBorderColor, forcePreserveRatio, resizableImageSelector) {
+        if (minWidth === void 0) { minWidth = 10; }
+        if (minHeight === void 0) { minHeight = 10; }
+        if (selectionBorderColor === void 0) { selectionBorderColor = '#DB626C'; }
+        if (forcePreserveRatio === void 0) { forcePreserveRatio = false; }
+        if (resizableImageSelector === void 0) { resizableImageSelector = 'img'; }
+        return _super.call(this, {
+            minHeight: minHeight,
+            minWidth: minWidth,
+            borderColor: selectionBorderColor,
+            preserveRatio: forcePreserveRatio,
+            imageSelector: resizableImageSelector,
+        }) || this;
+    }
+    /**
+     * @deprecated
+     */
+    ImageResize.prototype.showResizeHandle = function (img) {
+        this.setEditingImage(img, 3 /* Resize */);
+    };
+    /**
+     * @deprecated
+     */
+    ImageResize.prototype.hideResizeHandle = function (selectImageAfterUnSelect) {
+        this.setEditingImage(null /*image*/, selectImageAfterUnSelect);
+    };
+    return ImageResize;
+}(ImageEdit_1.default));
+exports.default = ImageResize;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/index.ts":
+/*!****************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/index.ts ***!
+  \****************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMAGE_EDIT_INFO_NAME = 'roosterEditInfo';
+var ImageResize_1 = __webpack_require__(/*! ./ImageResize */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/ImageResize.ts");
+exports.ImageResize = ImageResize_1.default;
 
 
 /***/ }),
@@ -18207,13 +19081,13 @@ exports.IMAGE_EDIT_INFO_NAME = 'roosterEditInfo';
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var convertPasteContentForSingleImage_1 = __webpack_require__(/*! ./imageConverter/convertPasteContentForSingleImage */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/imageConverter/convertPasteContentForSingleImage.ts");
 var convertPastedContentForLI_1 = __webpack_require__(/*! ./commonConverter/convertPastedContentForLI */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/commonConverter/convertPastedContentForLI.ts");
 var convertPastedContentFromExcel_1 = __webpack_require__(/*! ./excelConverter/convertPastedContentFromExcel */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/excelConverter/convertPastedContentFromExcel.ts");
 var convertPastedContentFromPowerPoint_1 = __webpack_require__(/*! ./pptConverter/convertPastedContentFromPowerPoint */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/pptConverter/convertPastedContentFromPowerPoint.ts");
 var convertPastedContentFromWord_1 = __webpack_require__(/*! ./wordConverter/convertPastedContentFromWord */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/convertPastedContentFromWord.ts");
 var handleLineMerge_1 = __webpack_require__(/*! ./lineMerge/handleLineMerge */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/lineMerge/handleLineMerge.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var constants_1 = __webpack_require__(/*! ./officeOnlineConverter/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/constants.ts");
 var convertPastedContentFromWordOnline_1 = __webpack_require__(/*! ./officeOnlineConverter/convertPastedContentFromWordOnline */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts");
 var WORD_ATTRIBUTE_NAME = 'xmlns:w';
 var WORD_ATTRIBUTE_VALUE = 'urn:schemas-microsoft-com:office:word';
@@ -18223,6 +19097,7 @@ var PROG_ID_NAME = 'ProgId';
 var EXCEL_ONLINE_ATTRIBUTE_VALUE = 'Excel.Sheet';
 var POWERPOINT_ATTRIBUTE_VALUE = 'PowerPoint.Slide';
 var GOOGLE_SHEET_NODE_NAME = 'google-sheets-html-origin';
+var WAC_IDENTIFY_SELECTOR = 'ul[class^="BulletListStyle"]>.OutlineElement,ol[class^="NumberListStyle"]>.OutlineElement';
 /**
  * Paste plugin, handles BeforePaste event and reformat some special content, including:
  * 1. Content copied from Word
@@ -18248,18 +19123,24 @@ var Paste = /** @class */ (function () {
      * Initialize this plugin. This should only be called from Editor
      * @param editor Editor instance
      */
-    Paste.prototype.initialize = function () { };
+    Paste.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
     /**
      * Dispose this plugin
      */
-    Paste.prototype.dispose = function () { };
+    Paste.prototype.dispose = function () {
+        this.editor = null;
+    };
     /**
      * Handle events triggered from editor
      * @param event PluginEvent object
      */
     Paste.prototype.onPluginEvent = function (event) {
+        var _a;
         if (event.eventType == 10 /* BeforePaste */) {
-            var htmlAttributes = event.htmlAttributes, fragment = event.fragment, sanitizingOption = event.sanitizingOption;
+            var htmlAttributes = event.htmlAttributes, fragment = event.fragment, sanitizingOption = event.sanitizingOption, clipboardData = event.clipboardData;
+            var trustedHTMLHandler = this.editor.getTrustedHTMLHandler();
             var wacListElements = void 0;
             if (htmlAttributes[WORD_ATTRIBUTE_NAME] == WORD_ATTRIBUTE_VALUE) {
                 // Handle HTML copied from Word
@@ -18268,12 +19149,12 @@ var Paste = /** @class */ (function () {
             else if (htmlAttributes[EXCEL_ATTRIBUTE_NAME] == EXCEL_ATTRIBUTE_VALUE ||
                 htmlAttributes[PROG_ID_NAME] == EXCEL_ONLINE_ATTRIBUTE_VALUE) {
                 // Handle HTML copied from Excel
-                convertPastedContentFromExcel_1.default(event);
+                convertPastedContentFromExcel_1.default(event, trustedHTMLHandler);
             }
             else if (htmlAttributes[PROG_ID_NAME] == POWERPOINT_ATTRIBUTE_VALUE) {
-                convertPastedContentFromPowerPoint_1.default(event);
+                convertPastedContentFromPowerPoint_1.default(event, trustedHTMLHandler);
             }
-            else if ((wacListElements = roosterjs_editor_dom_1.toArray(fragment.querySelectorAll(constants_1.WAC_IDENTIFY_SELECTOR))) &&
+            else if ((wacListElements = roosterjs_editor_dom_1.toArray(fragment.querySelectorAll(WAC_IDENTIFY_SELECTOR))) &&
                 wacListElements.length > 0) {
                 // Once it is known that the document is from WAC
                 // We need to remove the display property and margin from all the list item
@@ -18290,6 +19171,11 @@ var Paste = /** @class */ (function () {
             else if (fragment.querySelector(GOOGLE_SHEET_NODE_NAME)) {
                 sanitizingOption.additionalTagReplacements[GOOGLE_SHEET_NODE_NAME] = '*';
             }
+            else if (this.editor.isFeatureEnabled("ConvertSingleImageBody" /* ConvertSingleImageBody */) &&
+                ((_a = clipboardData.htmlFirstLevelChildTags) === null || _a === void 0 ? void 0 : _a.length) == 1 &&
+                clipboardData.htmlFirstLevelChildTags[0] == 'IMG') {
+                convertPasteContentForSingleImage_1.default(event, trustedHTMLHandler);
+            }
             else {
                 convertPastedContentForLI_1.default(fragment);
                 handleLineMerge_1.default(fragment);
@@ -18380,18 +19266,12 @@ var DEFAULT_BORDER_STYLE = 'solid 1px #d4d4d4';
  * Convert pasted content from Excel, add borders when source doc doesn't have a border
  * @param event The BeforePaste event
  */
-function convertPastedContentFromExcel(event) {
-    var _a;
+function convertPastedContentFromExcel(event, trustedHTMLHandler) {
     var fragment = event.fragment, sanitizingOption = event.sanitizingOption, htmlBefore = event.htmlBefore, clipboardData = event.clipboardData;
     var html = excelHandler(clipboardData.html, htmlBefore);
     if (clipboardData.html != html) {
-        var doc = new DOMParser().parseFromString(html, 'text/html');
-        while (fragment.firstChild) {
-            fragment.removeChild(fragment.firstChild);
-        }
-        while ((_a = doc === null || doc === void 0 ? void 0 : doc.body) === null || _a === void 0 ? void 0 : _a.firstChild) {
-            fragment.appendChild(doc.body.firstChild);
-        }
+        var doc = new DOMParser().parseFromString(trustedHTMLHandler(html), 'text/html');
+        roosterjs_editor_dom_1.moveChildNodes(fragment, doc === null || doc === void 0 ? void 0 : doc.body);
     }
     roosterjs_editor_dom_1.chainSanitizerCallback(sanitizingOption.elementCallbacks, 'TD', function (element) {
         if (element.style.borderStyle == 'none') {
@@ -18421,6 +19301,36 @@ function excelHandler(html, htmlBefore) {
 exports.excelHandler = excelHandler;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/imageConverter/convertPasteContentForSingleImage.ts":
+/*!*****************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/imageConverter/convertPasteContentForSingleImage.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");
+/**
+ * @internal
+ * Convert pasted content if there are HTML and Image data in the Clipboard
+ * @param event The BeforePaste event
+ */
+function convertPasteContentForSingleImage(event, trustedHTMLHandler) {
+    var fragment = event.fragment, clipboardData = event.clipboardData;
+    var html = clipboardData.html, image = clipboardData.image;
+    if (html && image) {
+        //If there are Html in the clipboard, and the html body only have one img children, use the HTML
+        var doc = new DOMParser().parseFromString(trustedHTMLHandler(html), 'text/html');
+        roosterjs_editor_dom_1.moveChildNodes(fragment, doc === null || doc === void 0 ? void 0 : doc.body);
+    }
+}
+exports.default = convertPasteContentForSingleImage;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/index.ts":
@@ -18451,6 +19361,7 @@ exports.Paste = Paste_1.default;
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
+ * @internal
  * Process pasted content, if there are multiple blocks that are not wrapped by a shared ancestor node,
  * change the tag of first and last node to be SPAN so that it will be merged into current block
  * @param root Root node of content to process
@@ -18530,49 +19441,6 @@ function createListItemBlock(listItem) {
 exports.createListItemBlock = createListItemBlock;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/constants.ts":
-/*!************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/constants.ts ***!
-  \************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * @internal
- */
-exports.WORD_ORDERED_LIST_SELECTOR = 'div.ListContainerWrapper > ul[class^="BulletListStyle"]';
-/**
- * @internal
- */
-exports.WORD_UNORDERED_LIST_SELECTOR = 'div.ListContainerWrapper > ol[class^="NumberListStyle"]';
-/**
- * @internal
- */
-exports.WORD_ONLINE_IDENTIFYING_SELECTOR = exports.WORD_ORDERED_LIST_SELECTOR + "," + exports.WORD_UNORDERED_LIST_SELECTOR;
-/**
- * @internal
- */
-exports.LIST_CONTAINER_ELEMENT_CLASS_NAME = 'ListContainerWrapper';
-/**
- * @internal
- */
-exports.UNORDERED_LIST_TAG_NAME = 'UL';
-/**
- * @internal
- */
-exports.ORDERED_LIST_TAG_NAME = 'OL';
-var TEXT_CONTAINER_ELEMENT_CLASS_NAME = 'OutlineElement';
-/**
- * @internal
- */
-exports.WAC_IDENTIFY_SELECTOR = "ul[class^=\"BulletListStyle\"]>." + TEXT_CONTAINER_ELEMENT_CLASS_NAME + ",ol[class^=\"NumberListStyle\"]>." + TEXT_CONTAINER_ELEMENT_CLASS_NAME;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts":
@@ -18586,13 +19454,14 @@ exports.WAC_IDENTIFY_SELECTOR = "ul[class^=\"BulletListStyle\"]>." + TEXT_CONTAI
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var ListItemBlock_1 = __webpack_require__(/*! ./ListItemBlock */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/ListItemBlock.ts");
-var constants_1 = __webpack_require__(/*! ./constants */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/constants.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var WORD_ONLINE_IDENTIFYING_SELECTOR = 'div.ListContainerWrapper>ul[class^="BulletListStyle"],div.ListContainerWrapper>ol[class^="NumberListStyle"]';
+var LIST_CONTAINER_ELEMENT_CLASS_NAME = 'ListContainerWrapper';
 /**
  * @internal
  */
 function isWordOnlineWithList(fragment) {
-    return !!(fragment && fragment.querySelector(constants_1.WORD_ONLINE_IDENTIFYING_SELECTOR));
+    return !!(fragment && fragment.querySelector(WORD_ONLINE_IDENTIFYING_SELECTOR));
 }
 exports.isWordOnlineWithList = isWordOnlineWithList;
 // Word Online pasted content DOM structure as of July 12th 2019
@@ -18707,9 +19576,9 @@ exports.default = convertPastedContentFromWordOnline;
  * @param fragment pasted document that contains all the list element.
  */
 function sanitizeListItemContainer(fragment) {
-    var listItemContainerListEl = roosterjs_editor_dom_1.toArray(fragment.querySelectorAll(constants_1.WORD_ORDERED_LIST_SELECTOR + ", " + constants_1.WORD_UNORDERED_LIST_SELECTOR));
+    var listItemContainerListEl = roosterjs_editor_dom_1.toArray(fragment.querySelectorAll(WORD_ONLINE_IDENTIFYING_SELECTOR));
     listItemContainerListEl.forEach(function (el) {
-        var replaceRegex = new RegExp("\\b" + constants_1.LIST_CONTAINER_ELEMENT_CLASS_NAME + "\\b", 'g');
+        var replaceRegex = new RegExp("\\b" + LIST_CONTAINER_ELEMENT_CLASS_NAME + "\\b", 'g');
         if (el.previousSibling) {
             var prevParent = roosterjs_editor_dom_1.splitParentNode(el, true);
             prevParent.className = prevParent.className.replace(replaceRegex, '');
@@ -18725,7 +19594,7 @@ function sanitizeListItemContainer(fragment) {
  * @param fragment pasted document that contains all the list element.
  */
 function getListItemBlocks(fragment) {
-    var listElements = fragment.querySelectorAll('.' + constants_1.LIST_CONTAINER_ELEMENT_CLASS_NAME);
+    var listElements = fragment.querySelectorAll('.' + LIST_CONTAINER_ELEMENT_CLASS_NAME);
     var result = [];
     var curListItemBlock;
     for (var i = 0; i < listElements.length; i++) {
@@ -18774,7 +19643,7 @@ function flattenListBlock(fragment, listItemBlock) {
  */
 function getContainerListType(listItemContainer) {
     var tag = roosterjs_editor_dom_1.getTagOfNode(listItemContainer.firstChild);
-    return tag == constants_1.UNORDERED_LIST_TAG_NAME || tag == constants_1.ORDERED_LIST_TAG_NAME ? tag : null;
+    return tag == 'UL' || tag == 'OL' ? tag : null;
 }
 /**
  * Insert list item into the correct position of a list
@@ -18802,7 +19671,7 @@ function insertListItem(listRootElement, itemToInsert, listType, doc) {
             // and the level iterator should move to the UL/OL at the last position.
             var lastChild = curListLevel.lastElementChild;
             var lastChildTag = roosterjs_editor_dom_1.getTagOfNode(lastChild);
-            if (lastChildTag == constants_1.UNORDERED_LIST_TAG_NAME || lastChildTag == constants_1.ORDERED_LIST_TAG_NAME) {
+            if (lastChildTag == 'UL' || lastChildTag == 'OL') {
                 // If the last child is a list(UL/OL), then move the level iterator to last child.
                 curListLevel = lastChild;
             }
@@ -18859,27 +19728,22 @@ function insertConvertedListToDoc(convertedListElement, fragment, listItemBlock)
 "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");
 /**
  * @internal
  * Convert pasted content from PowerPoint
  * @param event The BeforePaste event
  */
-function convertPastedContentFromExcel(event) {
-    var _a;
+function convertPastedContentFromPowerPoint(event, trustedHTMLHandler) {
     var fragment = event.fragment, clipboardData = event.clipboardData;
     if (clipboardData.html && !clipboardData.text && clipboardData.image) {
         // It is possible that PowerPoint copied both image and HTML but not plain text.
         // We always prefer HTML if any.
-        var doc = new DOMParser().parseFromString(clipboardData.html, 'text/html');
-        while (fragment.firstChild) {
-            fragment.removeChild(fragment.firstChild);
-        }
-        while ((_a = doc === null || doc === void 0 ? void 0 : doc.body) === null || _a === void 0 ? void 0 : _a.firstChild) {
-            fragment.appendChild(doc.body.firstChild);
-        }
+        var doc = new DOMParser().parseFromString(trustedHTMLHandler(clipboardData.html), 'text/html');
+        roosterjs_editor_dom_1.moveChildNodes(fragment, doc === null || doc === void 0 ? void 0 : doc.body);
     }
 }
-exports.default = convertPastedContentFromExcel;
+exports.default = convertPastedContentFromPowerPoint;
 
 
 /***/ }),
@@ -19033,7 +19897,8 @@ function convertPastedContentFromWord(event) {
     var sanitizingOption = event.sanitizingOption, fragment = event.fragment;
     // Preserve <o:p> when its innerHTML is "&nbsp;" to avoid dropping an empty line
     roosterjs_editor_dom_1.chainSanitizerCallback(sanitizingOption.elementCallbacks, 'O:P', function (element) {
-        element.innerHTML = '&nbsp;';
+        roosterjs_editor_dom_1.moveChildNodes(element);
+        element.appendChild(element.ownerDocument.createTextNode('\u00A0')); // &nbsp;
         return true;
     });
     var wordConverter = wordConverter_1.createWordConverter();
@@ -19169,9 +20034,7 @@ function processNodesDiscovery(wordConverter) {
                 // Add 2 line breaks and move all the nodes to the last item
                 last.appendChild(last.ownerDocument.createElement('br'));
                 last.appendChild(last.ownerDocument.createElement('br'));
-                while (node.firstChild != null) {
-                    last.appendChild(node.firstChild);
-                }
+                roosterjs_editor_dom_1.moveChildNodes(last, node, true /*keepExistingChildren*/);
                 // Remove the item that we don't need anymore
                 node.parentNode.removeChild(node);
             }
@@ -19204,9 +20067,7 @@ function processNodeConvert(wordConverter) {
                 cleanupListIgnore(node, LOOKUP_DEPTH);
                 // Create a new list item and transfer the children
                 var li = node.ownerDocument.createElement('LI');
-                while (node.firstChild) {
-                    li.appendChild(node.firstChild);
-                }
+                roosterjs_editor_dom_1.moveChildNodes(li, node);
                 // Append the list item into the list
                 list.appendChild(li);
                 // Remove the node we just converted
@@ -19260,9 +20121,7 @@ function convertListIfNeeded(wordConverter, list, listMetadata) {
         // We have the wrong list type.. convert it, set the id again and transfer all the children
         var newList = list.ownerDocument.createElement(listMetadata.tagName);
         WordCustomData_1.setObject(wordConverter.wordCustomData, newList, UNIQUE_LIST_ID_CUSTOM_DATA, WordCustomData_1.getObject(wordConverter.wordCustomData, list, UNIQUE_LIST_ID_CUSTOM_DATA));
-        while (list.firstChild) {
-            newList.appendChild(list.firstChild);
-        }
+        roosterjs_editor_dom_1.moveChildNodes(newList, list);
         list.parentNode.insertBefore(newList, list);
         list.parentNode.removeChild(list);
         list = newList;
@@ -20060,10 +20919,6 @@ var MIN_CELL_WIDTH = 30;
 var MIN_CELL_HEIGHT = 20;
 var CELL_RESIZER_WIDTH = 4;
 var TABLE_RESIZER_LENGTH = 12;
-var HORIZONTAL_RESIZER_HTML = '<div style="position: fixed; cursor: row-resize; user-select: none"></div>';
-var VERTICAL_RESIZER_HTML = '<div style="position: fixed; cursor: col-resize; user-select: none"></div>';
-var TABLE_RESIZER_HTML_LTR = '<div style="position: fixed; cursor: nw-resize; user-select: none; border: 1px solid #808080"></div>';
-var TABLE_RESIZER_HTML_RTL = '<div style="position: fixed; cursor: ne-resize; user-select: none; border: 1px solid #808080""></div>';
 function getHorizontalDistance(rect, pos, toLeft) {
     return toLeft ? pos - rect.left : rect.right - pos;
 }
@@ -20477,11 +21332,30 @@ var TableResize = /** @class */ (function () {
         var inserterBackgroundColor = editorBackgroundColor || 'white';
         var inserterColor = this.editor.isDarkMode() ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;
         var leftOrRight = this.isRTL ? 'right' : 'left';
-        var HORIZONTAL_INSERTER_HTML = "<div style=\"position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: " + inserterColor + "; line-height: 10px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + inserterBackgroundColor + "\"><div style=\"position: absolute; " + leftOrRight + ": 12px; top: 5px; height: 3px; border-top: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-left: 0px; box-sizing: border-box; background-color: " + inserterBackgroundColor + ";\"></div>+</div>";
-        var VERTICAL_INSERTER_HTML = "<div style=\"position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: " + inserterColor + "; line-height: 10px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + inserterBackgroundColor + "\"><div style=\"position: absolute; left: 5px; top: 12px; width: 3px; border-left: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-top: 0px; box-sizing: border-box; background-color: " + inserterBackgroundColor + ";\"></div>+</div>";
-        var inserter = roosterjs_editor_dom_1.fromHtml(this.insertingState == 1 /* Horizontal */
-            ? HORIZONTAL_INSERTER_HTML
-            : VERTICAL_INSERTER_HTML, this.editor.getDocument())[0];
+        var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: " + inserterColor + "; line-height: 10px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + inserterBackgroundColor;
+        var HORIZONTAL_INSERTER = {
+            tag: 'div',
+            style: outerDivStyle,
+            children: [
+                {
+                    tag: 'div',
+                    style: "position: absolute; " + leftOrRight + ": 12px; top: 5px; height: 3px; border-top: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-left: 0px; box-sizing: border-box; background-color: " + inserterBackgroundColor + ";",
+                },
+                '+',
+            ],
+        };
+        var VERTICAL_INSERTER = {
+            tag: 'div',
+            style: outerDivStyle,
+            children: [
+                {
+                    tag: 'div',
+                    style: "position: absolute; left: 5px; top: 12px; width: 3px; border-left: 1px solid " + inserterColor + "; border-right: 1px solid " + inserterColor + "; border-bottom: 1px solid " + inserterColor + "; border-top: 0px; box-sizing: border-box; background-color: " + inserterBackgroundColor,
+                },
+                '+',
+            ],
+        };
+        var inserter = roosterjs_editor_dom_1.createElement(this.insertingState == 1 /* Horizontal */ ? HORIZONTAL_INSERTER : VERTICAL_INSERTER, this.editor.getDocument());
         if (rect) {
             if (this.insertingState == 1 /* Horizontal */) {
                 if (this.isRTL) {
@@ -20547,7 +21421,9 @@ var TableResize = /** @class */ (function () {
         }
     };
     TableResize.prototype.createTableResizer = function (rect) {
-        var div = roosterjs_editor_dom_1.fromHtml(this.isRTL ? TABLE_RESIZER_HTML_RTL : TABLE_RESIZER_HTML_LTR, this.editor.getDocument())[0];
+        var div = roosterjs_editor_dom_1.createElement(this.isRTL
+            ? 10 /* TableResizerRTL */
+            : 9 /* TableResizerLTR */, this.editor.getDocument());
         div.style.top = rect.bottom + "px";
         div.style.left = this.isRTL
             ? rect.left - TABLE_RESIZER_LENGTH - 2 + "px"
@@ -20558,7 +21434,9 @@ var TableResize = /** @class */ (function () {
         return div;
     };
     TableResize.prototype.createCellsResizer = function (horizontal, left, top, width, height) {
-        var div = roosterjs_editor_dom_1.fromHtml(horizontal ? HORIZONTAL_RESIZER_HTML : VERTICAL_RESIZER_HTML, this.editor.getDocument())[0];
+        var div = roosterjs_editor_dom_1.createElement(horizontal
+            ? 7 /* TableHorizontalResizer */
+            : 8 /* TableVerticalResizer */, this.editor.getDocument());
         div.style.top = top + "px";
         div.style.left = left + "px";
         div.style.width = width + "px";
@@ -20760,11 +21638,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContentEdit_1 = __webpack_require__(/*! roosterjs-editor-plugins/lib/ContentEdit */ "./packages/roosterjs-editor-plugins/lib/ContentEdit.ts");
 var roosterjs_editor_core_1 = __webpack_require__(/*! roosterjs-editor-core */ "./packages/roosterjs-editor-core/lib/index.ts");
 var roosterjs_color_utils_1 = __webpack_require__(/*! roosterjs-color-utils */ "./packages/roosterjs-color-utils/lib/index.ts");
-var HyperLink_1 = __webpack_require__(/*! roosterjs-editor-plugins/lib/HyperLink */ "./packages/roosterjs-editor-plugins/lib/HyperLink.ts");
-var Paste_1 = __webpack_require__(/*! roosterjs-editor-plugins/lib/Paste */ "./packages/roosterjs-editor-plugins/lib/Paste.ts");
+var roosterjs_editor_plugins_1 = __webpack_require__(/*! roosterjs-editor-plugins */ "./packages/roosterjs-editor-plugins/lib/index.ts");
 /**
  * Create an editor instance with most common options
  * @param contentDiv The html div element needed for creating the editor
@@ -20774,7 +21650,7 @@ var Paste_1 = __webpack_require__(/*! roosterjs-editor-plugins/lib/Paste */ "./p
  * @returns The editor instance
  */
 function createEditor(contentDiv, additionalPlugins, initialContent) {
-    var plugins = [new HyperLink_1.HyperLink(), new Paste_1.Paste(), new ContentEdit_1.ContentEdit()];
+    var plugins = [new roosterjs_editor_plugins_1.HyperLink(), new roosterjs_editor_plugins_1.Paste(), new roosterjs_editor_plugins_1.ContentEdit()];
     if (additionalPlugins) {
         plugins = plugins.concat(additionalPlugins);
     }