roosterjs 8.46.0 → 8.48.0

package/dist/rooster.js

@@ -2363,6 +2363,17 @@ exports.default = clearBlockFormat;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
@@ -2419,20 +2430,30 @@ function clearNodeFormat(node) {
     return returnBlockElement;
 }
 function clearAttribute(element) {
+    var e_1, _a;
     var isTableCell = (0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLTableCellElement');
     var isTable = (0, roosterjs_editor_dom_1.safeInstanceOf)(element, 'HTMLTableElement');
-    for (var _i = 0, _a = (0, roosterjs_editor_dom_1.toArray)(element.attributes); _i < _a.length; _i++) {
-        var attr = _a[_i];
-        if (isTableCell && attr.name == 'style') {
-            removeNonBorderStyles(element);
-        }
-        else if (isTable && attr.name == 'style') {
-            removeNotTableDefaultStyles(element);
+    try {
+        for (var _b = __values((0, roosterjs_editor_dom_1.toArray)(element.attributes)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var attr = _c.value;
+            if (isTableCell && attr.name == 'style') {
+                removeNonBorderStyles(element);
+            }
+            else if (isTable && attr.name == 'style') {
+                removeNotTableDefaultStyles(element);
+            }
+            else if (ATTRIBUTES_TO_PRESERVE.indexOf(attr.name.toLowerCase()) < 0 &&
+                attr.name.indexOf('data-') != 0) {
+                element.removeAttribute(attr.name);
+            }
         }
-        else if (ATTRIBUTES_TO_PRESERVE.indexOf(attr.name.toLowerCase()) < 0 &&
-            attr.name.indexOf('data-') != 0) {
-            element.removeAttribute(attr.name);
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
         }
+        finally { if (e_1) throw e_1.error; }
     }
 }
 function updateStyles(element, callbackfn) {
@@ -2518,7 +2539,7 @@ function clearAutoDetectFormat(editor) {
 function clearBlockFormat(editor) {
     (0, formatUndoSnapshot_1.default)(editor, function () {
         (0, blockFormat_1.default)(editor, function (region) {
-            var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, undefined /* createBlockIfEmpty */, editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
+            var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region);
             var nodes = (0, 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.
@@ -2908,6 +2929,7 @@ var canMergeTableCell = function (editor) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var commitListChains_1 = __webpack_require__(/*! ../utils/commitListChains */ "./packages/roosterjs-editor-api/lib/utils/commitListChains.ts");
+var getFormatState_1 = __webpack_require__(/*! ./getFormatState */ "./packages/roosterjs-editor-api/lib/format/getFormatState.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Insert an entity into editor.
@@ -2920,10 +2942,13 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * If isBlock is true, entity will be insert below this position
  * @param insertToRegionRoot @optional When pass true, insert the entity at the root level of current region.
  * Parent nodes will be split if need
+ * @param focusAfterEntity @optional When pass true, focus will be moved next to the entity. For inline entity,
+ * focus will be after right after the entity (and the delimiter if exist). For block entity, focus will be in
+ * the new empty line below the entity
  */
-function insertEntity(editor, type, contentNode, isBlock, isReadonly, position, insertToRegionRoot) {
+function insertEntity(editor, type, contentNode, isBlock, isReadonly, position, insertToRegionRoot, focusAfterEntity) {
     var _a;
-    var wrapper = (0, roosterjs_editor_dom_1.wrap)(contentNode, isBlock ? 'DIV' : 'SPAN');
+    var wrapper = (0, roosterjs_editor_dom_1.wrap)(contentNode, isBlock ? 'div' : 'span');
     // For inline & readonly entity, we need to set display to "inline-block" otherwise
     // there will be some weird behavior when move cursor around the entity node.
     // And we should only do this for readonly entity since "inline-block" has some side effect
@@ -2934,6 +2959,7 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
         wrapper.style.display = 'inline-block';
     }
     (0, roosterjs_editor_dom_1.commitEntity)(wrapper, type, isReadonly);
+    var currentFormat = (0, getFormatState_1.default)(editor);
     if (!editor.contains(wrapper)) {
         var currentRange = null;
         var contentPosition = void 0;
@@ -2976,15 +3002,32 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
             }
         }
     }
+    var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(wrapper);
     if (isBlock) {
         // Insert an extra empty line for block entity to make sure
         // user can still put cursor below the entity.
-        var br = editor.getDocument().createElement('BR');
-        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, wrapper.nextSibling);
-    }
-    var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(wrapper);
-    if (!isBlock &&
-        isReadonly &&
+        var newLine = (0, roosterjs_editor_dom_1.createElement)(1 /* EmptyLine */, editor.getDocument());
+        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newLine, wrapper.nextSibling);
+        if (newLine) {
+            (0, roosterjs_editor_dom_1.applyFormat)(newLine, {
+                backgroundColor: currentFormat.backgroundColor,
+                textColor: currentFormat.textColor,
+                bold: currentFormat.isBold,
+                fontFamily: currentFormat.fontName,
+                fontSize: currentFormat.fontSize,
+                italic: currentFormat.isItalic,
+                underline: currentFormat.isUnderline,
+            }, editor.isDarkMode(), editor.getDarkColorHandler());
+        }
+        if (focusAfterEntity) {
+            var br = newLine === null || newLine === void 0 ? void 0 : newLine.querySelector('br');
+            var pos = br && new roosterjs_editor_dom_1.Position(br, -2 /* Before */);
+            if (pos) {
+                editor.select(pos);
+            }
+        }
+    }
+    else if (isReadonly &&
         editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
         (0, roosterjs_editor_dom_1.addDelimiters)(entity.wrapper);
         if (entity.wrapper.nextElementSibling) {
@@ -3186,9 +3229,7 @@ function setAlignment(editor, alignment) {
             (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
             alignTable(selection, alignment);
         }
-        else if (elementAtCursor &&
-            isList(elementAtCursor) &&
-            editor.isFeatureEnabled("ListItemAlignment" /* ListItemAlignment */)) {
+        else if (elementAtCursor && isList(elementAtCursor)) {
             alignList(editor, alignment);
         }
         else {
@@ -3254,7 +3295,7 @@ function isList(element) {
 }
 function alignList(editor, alignment) {
     (0, blockFormat_1.default)(editor, function (region, start, end) {
-        var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, undefined /* createBlockIfEmpty */, editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
+        var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region);
         var startNode = blocks[0].getStartNode();
         var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, true /*includeSiblingLists*/, startNode);
         if (start && end) {
@@ -3453,7 +3494,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function setIndentation(editor, indentation) {
     var handler = indentation == 0 /* Increase */ ? indent : outdent;
     (0, blockFormat_1.default)(editor, function (region, start, end) {
-        var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/, editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
+        var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/);
         var blockGroups = [[]];
         for (var i = 0; i < blocks.length; i++) {
             var startNode = blocks[i].getStartNode();
@@ -4475,7 +4516,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function blockWrap(editor, wrapFunction, beforeRunCallback, apiName) {
     (0, blockFormat_1.default)(editor, function (region) {
-        var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/, editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
+        var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, true /*createBlockIfEmpty*/);
         var nodes = (0, roosterjs_editor_dom_1.collapseNodesInRegion)(region, blocks);
         if (nodes.length > 0) {
             if (nodes.length == 1) {
@@ -5050,12 +5091,13 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
     if (!clipboardData) {
         return null;
     }
+    var pasteType = getPasteType(pasteAsText, applyCurrentStyle, pasteAsImage);
     // Step 1: Prepare BeforePasteEvent object
-    var event = createBeforePasteEvent(core, clipboardData);
+    var event = createBeforePasteEvent(core, clipboardData, pasteType);
     return (0, roosterjs_editor_dom_1.createFragmentFromClipboardData)(core, clipboardData, position, pasteAsText, applyCurrentStyle, pasteAsImage, event);
 };
 exports.createPasteFragment = createPasteFragment;
-function createBeforePasteEvent(core, clipboardData) {
+function createBeforePasteEvent(core, clipboardData, pasteType) {
     var options = (0, roosterjs_editor_dom_1.createDefaultHtmlSanitizerOptions)();
     // Remove "caret-color" style generated by Safari to make sure caret shows in right color after paste
     options.cssStyleCallbacks['caret-color'] = function () { return false; };
@@ -5067,8 +5109,23 @@ function createBeforePasteEvent(core, clipboardData) {
         htmlBefore: '',
         htmlAfter: '',
         htmlAttributes: {},
+        pasteType: pasteType,
     };
 }
+function getPasteType(pasteAsText, applyCurrentStyle, pasteAsImage) {
+    if (pasteAsText) {
+        return 1 /* AsPlainText */;
+    }
+    else if (applyCurrentStyle) {
+        return 2 /* MergeFormat */;
+    }
+    else if (pasteAsImage) {
+        return 3 /* AsImage */;
+    }
+    else {
+        return 0 /* Normal */;
+    }
+}
 
 
 /***/ }),
@@ -5090,7 +5147,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * When typing goes directly under content div, many things can go wrong
  * We fix it by wrapping it with a div and reposition cursor within the div
  */
-var ensureTypeInContainer = function (core, position, keyboardEvent, applyFormatToSpan) {
+var ensureTypeInContainer = function (core, position, keyboardEvent) {
     var table = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(position.node, core.contentDiv, 'table');
     var td;
     if (table && (td = table.querySelector('td,th'))) {
@@ -5111,27 +5168,18 @@ var ensureTypeInContainer = function (core, position, keyboardEvent, applyFormat
         var shouldSetNodeStyles = (0, roosterjs_editor_dom_1.isNodeEmpty)(formatNode) ||
             (keyboardEvent && wasNodeJustCreatedByKeyboardEvent(keyboardEvent, formatNode));
         formatNode = formatNode && shouldSetNodeStyles ? formatNode : null;
-        if (formatNode && core.lifecycle.defaultFormat && applyFormatToSpan) {
-            var firstChild = formatNode.firstChild;
-            formatNode = (0, roosterjs_editor_dom_1.safeInstanceOf)(firstChild, 'HTMLSpanElement')
-                ? firstChild
-                : (0, roosterjs_editor_dom_1.wrap)((0, roosterjs_editor_dom_1.toArray)(formatNode.childNodes), 'span');
-        }
     }
     else {
         // Only reason we don't get the selection block is that we have an empty content div
         // which can happen when users removes everything (i.e. select all and DEL, or backspace from very end to begin)
         // The fix is to add a DIV wrapping, apply default format and move cursor over
-        formatNode = (0, roosterjs_editor_dom_1.createElement)(applyFormatToSpan
-            ? 12 /* EmptyLineFormatInSpan */
-            : 1 /* EmptyLine */, core.contentDiv.ownerDocument);
+        formatNode = (0, roosterjs_editor_dom_1.createElement)(1 /* EmptyLine */, core.contentDiv.ownerDocument);
         core.api.insertNode(core, formatNode, {
             position: 1 /* End */,
             updateCursor: false,
             replaceSelection: false,
             insertOnNewLine: false,
         });
-        formatNode = applyFormatToSpan ? formatNode.firstChild : formatNode;
         // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
         position = new roosterjs_editor_dom_1.Position(formatNode, 0 /* Begin */);
     }
@@ -5232,7 +5280,7 @@ var getContent = function (core, mode) {
     else if (mode == 3 /* PlainText */) {
         content = (0, roosterjs_editor_dom_1.getTextContent)(root);
     }
-    else if (triggerExtractContentEvent || core.lifecycle.isDarkMode || core.darkColorHandler) {
+    else {
         var clonedRoot = cloneNode(root);
         clonedRoot.normalize();
         var originalRange = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
@@ -5244,9 +5292,7 @@ var getContent = function (core, mode) {
                     ? (0, roosterjs_editor_dom_1.getSelectionPath)(core.contentDiv, originalRange)
                     : null;
         var range = path && (0, roosterjs_editor_dom_1.createRange)(clonedRoot, path.start, path.end);
-        if (core.lifecycle.isDarkMode || core.darkColorHandler) {
-            core.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */, !!core.darkColorHandler, core.lifecycle.isDarkMode);
-        }
+        core.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */, true /*forceTransform*/, core.lifecycle.isDarkMode);
         if (triggerExtractContentEvent) {
             core.api.triggerEvent(core, {
                 eventType: 8 /* ExtractContentWithDom */,
@@ -5262,11 +5308,6 @@ var getContent = function (core, mode) {
             content = clonedRoot.innerHTML;
         }
     }
-    else {
-        content = (0, roosterjs_editor_dom_1.getHtmlWithSelectionPath)(root, includeSelectionMarker
-            ? core.api.getSelectionRange(core, true /*tryGetFromCache*/)
-            : null);
-    }
     return content !== null && content !== void 0 ? content : '';
 };
 exports.getContent = getContent;
@@ -5536,8 +5577,6 @@ function checkAllCollapsed(ranges) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyleBasedFormatState = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var ORIGINAL_STYLE_COLOR_SELECTOR = "[data-" + "ogsc" /* OriginalStyleColor */ + "],[data-" + "ogac" /* OriginalAttributeColor */ + "]";
-var ORIGINAL_STYLE_BACK_COLOR_SELECTOR = "[data-" + "ogsb" /* OriginalStyleBackgroundColor */ + "],[data-" + "ogab" /* OriginalAttributeBackgroundColor */ + "]";
 /**
  * @internal
  * Get style based format state from current selection, including font name/size and colors
@@ -5571,86 +5610,48 @@ var getStyleBasedFormatState = function (core, node) {
             'direction',
         ])
         : [];
-    var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler, isDarkMode = core.lifecycle.isDarkMode;
-    if (darkColorHandler) {
-        var styleTextColor = void 0;
-        var styleBackColor = void 0;
-        while (node &&
-            (0, roosterjs_editor_dom_1.contains)(contentDiv, node, true /*treatSameNodeAsContain*/) &&
-            !(styleTextColor && styleBackColor)) {
-            if (node.nodeType == 1 /* Element */) {
-                var element = node;
-                styleTextColor = styleTextColor || element.style.getPropertyValue('color');
-                styleBackColor =
-                    styleBackColor || element.style.getPropertyValue('background-color');
-            }
-            node = node.parentNode;
-        }
-        if (!core.lifecycle.isDarkMode && node == core.contentDiv) {
-            styleTextColor = styleTextColor || styles[2];
-            styleBackColor = styleBackColor || styles[3];
+    var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler;
+    var styleTextColor;
+    var styleBackColor;
+    while (node &&
+        (0, roosterjs_editor_dom_1.contains)(contentDiv, node, true /*treatSameNodeAsContain*/) &&
+        !(styleTextColor && styleBackColor)) {
+        if (node.nodeType == 1 /* Element */) {
+            var element = node;
+            styleTextColor = styleTextColor || element.style.getPropertyValue('color');
+            styleBackColor = styleBackColor || element.style.getPropertyValue('background-color');
         }
-        var textColor = darkColorHandler.parseColorValue(override[2] || styleTextColor);
-        var backColor = darkColorHandler.parseColorValue(override[3] || styleBackColor);
-        return {
-            fontName: override[0] || styles[0],
-            fontSize: override[1] || styles[1],
-            textColor: textColor.lightModeColor,
-            backgroundColor: backColor.lightModeColor,
-            textColors: textColor.darkModeColor
-                ? {
-                    lightModeColor: textColor.lightModeColor,
-                    darkModeColor: textColor.darkModeColor,
-                }
-                : undefined,
-            backgroundColors: backColor.darkModeColor
-                ? {
-                    lightModeColor: backColor.lightModeColor,
-                    darkModeColor: backColor.darkModeColor,
-                }
-                : undefined,
-            lineHeight: styles[4],
-            marginTop: styles[5],
-            marginBottom: styles[6],
-            textAlign: styles[7],
-            direction: styles[8],
-        };
+        node = node.parentNode;
     }
-    else {
-        var ogTextColorNode = isDarkMode &&
-            (override[2]
-                ? pendableFormatSpan
-                : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, contentDiv, ORIGINAL_STYLE_COLOR_SELECTOR));
-        var ogBackgroundColorNode = isDarkMode &&
-            (override[3]
-                ? pendableFormatSpan
-                : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, contentDiv, ORIGINAL_STYLE_BACK_COLOR_SELECTOR));
-        return {
-            fontName: override[0] || styles[0],
-            fontSize: override[1] || styles[1],
-            textColor: override[2] || styles[2],
-            backgroundColor: override[3] || styles[3],
-            textColors: ogTextColorNode
-                ? {
-                    darkModeColor: override[2] || styles[2],
-                    lightModeColor: ogTextColorNode.dataset["ogsc" /* OriginalStyleColor */] ||
-                        ogTextColorNode.dataset["ogac" /* OriginalAttributeColor */] ||
-                        styles[2],
-                }
-                : undefined,
-            backgroundColors: ogBackgroundColorNode
-                ? {
-                    darkModeColor: override[3] || styles[3],
-                    lightModeColor: ogBackgroundColorNode.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
-                        ogBackgroundColorNode.dataset["ogab" /* OriginalAttributeBackgroundColor */] ||
-                        styles[3],
-                }
-                : undefined,
-            lineHeight: styles[4],
-            textAlign: styles[7],
-            direction: styles[8],
-        };
+    if (!core.lifecycle.isDarkMode && node == core.contentDiv) {
+        styleTextColor = styleTextColor || styles[2];
+        styleBackColor = styleBackColor || styles[3];
     }
+    var textColor = darkColorHandler.parseColorValue(override[2] || styleTextColor);
+    var backColor = darkColorHandler.parseColorValue(override[3] || styleBackColor);
+    return {
+        fontName: override[0] || styles[0],
+        fontSize: override[1] || styles[1],
+        textColor: textColor.lightModeColor,
+        backgroundColor: backColor.lightModeColor,
+        textColors: textColor.darkModeColor
+            ? {
+                lightModeColor: textColor.lightModeColor,
+                darkModeColor: textColor.darkModeColor,
+            }
+            : undefined,
+        backgroundColors: backColor.darkModeColor
+            ? {
+                lightModeColor: backColor.lightModeColor,
+                darkModeColor: backColor.darkModeColor,
+            }
+            : undefined,
+        lineHeight: styles[4],
+        marginTop: styles[5],
+        marginBottom: styles[6],
+        textAlign: styles[7],
+        direction: styles[8],
+    };
 };
 exports.getStyleBasedFormatState = getStyleBasedFormatState;
 
@@ -5892,11 +5893,9 @@ var restoreUndoSnapshot = function (core, step) {
             core.api.setContent(core, snapshot.html, true /*triggerContentChangedEvent*/, (_a = snapshot.metadata) !== null && _a !== void 0 ? _a : undefined);
             var darkColorHandler_1 = core.darkColorHandler;
             var isDarkModel_1 = core.lifecycle.isDarkMode;
-            if (darkColorHandler_1) {
-                snapshot.knownColors.forEach(function (color) {
-                    darkColorHandler_1.registerColor(color.lightModeColor, isDarkModel_1, color.darkModeColor);
-                });
-            }
+            snapshot.knownColors.forEach(function (color) {
+                darkColorHandler_1.registerColor(color.lightModeColor, isDarkModel_1, color.darkModeColor);
+            });
         }
         finally {
             core.undo.isRestoring = false;
@@ -6510,14 +6509,10 @@ var ColorAttributeName = [
     (_a = {},
         _a[0 /* CssColor */] = 'color',
         _a[1 /* HtmlColor */] = 'color',
-        _a[2 /* CssDataSet */] = "ogsc" /* OriginalStyleColor */,
-        _a[3 /* HtmlDataSet */] = "ogac" /* OriginalAttributeColor */,
         _a),
     (_b = {},
         _b[0 /* CssColor */] = 'background-color',
         _b[1 /* HtmlColor */] = 'bgcolor',
-        _b[2 /* CssDataSet */] = "ogsb" /* OriginalStyleBackgroundColor */,
-        _b[3 /* HtmlDataSet */] = "ogab" /* OriginalAttributeBackgroundColor */,
         _b),
 ];
 /**
@@ -6537,20 +6532,7 @@ var transformColor = function (core, rootNode, includeSelf, callback, direction,
         ? getAll(rootNode, includeSelf)
         : [];
     callback === null || callback === void 0 ? void 0 : callback();
-    if (darkColorHandler) {
-        transformV2(elements, darkColorHandler, !!fromDarkMode, direction == 0 /* LightToDark */);
-    }
-    else {
-        if (direction == 1 /* DarkToLight */) {
-            transformToLightMode(elements);
-        }
-        else if (core.lifecycle.onExternalContentTransform) {
-            elements.forEach(function (element) { return core.lifecycle.onExternalContentTransform(element); });
-        }
-        else {
-            transformToDarkMode(elements, core.lifecycle.getDarkColor);
-        }
-    }
+    transformV2(elements, darkColorHandler, !!fromDarkMode, direction == 0 /* LightToDark */);
 };
 exports.transformColor = transformColor;
 function transformV2(elements, darkColorHandler, fromDark, toDark) {
@@ -6566,66 +6548,6 @@ function transformV2(elements, darkColorHandler, fromDark, toDark) {
         });
     });
 }
-function transformToLightMode(elements) {
-    elements.forEach(function (element) {
-        ColorAttributeName.forEach(function (names) {
-            // Reset color styles based on the content of the ogsc/ogsb data element.
-            // If those data properties are empty or do not exist, set them anyway to clear the content.
-            element.style.setProperty(names[0 /* CssColor */], getValueOrDefault(element.dataset[names[2 /* CssDataSet */]], ''));
-            delete element.dataset[names[2 /* CssDataSet */]];
-            // Some elements might have set attribute colors. We need to reset these as well.
-            var value = getValueOrDefault(element.dataset[names[3 /* HtmlDataSet */]], null);
-            if (value) {
-                element.setAttribute(names[1 /* HtmlColor */], value);
-            }
-            else {
-                element.removeAttribute(names[1 /* HtmlColor */]);
-            }
-            delete element.dataset[names[3 /* HtmlDataSet */]];
-        });
-    });
-}
-function transformToDarkMode(elements, getDarkColor) {
-    ColorAttributeName.forEach(function (names) {
-        elements
-            .map(function (element) {
-            var styleColor = element.style.getPropertyValue(names[0 /* CssColor */]);
-            var attrColor = element.getAttribute(names[1 /* HtmlColor */]);
-            var existingDataSetCssValue = element.dataset[names[2 /* CssDataSet */]];
-            var existingDataSetHtmlValue = element.dataset[names[3 /* HtmlDataSet */]];
-            var needProcess = (!existingDataSetCssValue || existingDataSetCssValue == styleColor) &&
-                (!existingDataSetHtmlValue || existingDataSetHtmlValue == attrColor) &&
-                (styleColor || attrColor) &&
-                styleColor != 'inherit'; // For inherit style, no need to change it and let it keep inherit from parent element
-            return needProcess
-                ? {
-                    element: element,
-                    styleColor: styleColor,
-                    attrColor: attrColor,
-                    newColor: styleColor || attrColor
-                        ? getDarkColor((styleColor || attrColor))
-                        : null,
-                }
-                : null;
-        })
-            .filter(function (x) { return !!x; })
-            .forEach(function (entry) {
-            if (!entry) {
-                return;
-            }
-            var element = entry.element, styleColor = entry.styleColor, attrColor = entry.attrColor, newColor = entry.newColor;
-            element.style.setProperty(names[0 /* CssColor */], newColor, 'important');
-            element.dataset[names[2 /* CssDataSet */]] = styleColor || '';
-            if (attrColor && newColor) {
-                element.setAttribute(names[1 /* HtmlColor */], newColor);
-                element.dataset[names[3 /* HtmlDataSet */]] = attrColor;
-            }
-        });
-    });
-}
-function getValueOrDefault(value, defaultValue) {
-    return value && value != 'undefined' && value != 'null' ? value : defaultValue;
-}
 function getAll(rootNode, includeSelf) {
     var result = [];
     if ((0, roosterjs_editor_dom_1.safeInstanceOf)(rootNode, 'HTMLElement')) {
@@ -7699,7 +7621,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var Escape = 'Escape';
 var Delete = 'Delete';
-var mouseRightButton = 2;
 var mouseLeftButton = 0;
 /**
  * Detect image selection and help highlight the image
@@ -7742,14 +7663,9 @@ var ImageSelection = /** @class */ (function () {
                     break;
                 case 6 /* MouseUp */:
                     var target = event.rawEvent.target;
-                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement')) {
-                        if (event.rawEvent.button === mouseRightButton) {
-                            var imageRange = (0, roosterjs_editor_dom_1.createRange)(target);
-                            this.editor.select(imageRange);
-                        }
-                        else if (event.rawEvent.button === mouseLeftButton) {
-                            this.editor.select(target);
-                        }
+                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement') &&
+                        event.rawEvent.button === mouseLeftButton) {
+                        this.editor.select(target);
                     }
                     break;
                 case 5 /* MouseDown */:
@@ -7779,6 +7695,14 @@ var ImageSelection = /** @class */ (function () {
                         }
                     }
                     break;
+                case 16 /* ContextMenu */:
+                    var contextMenuTarget = event.rawEvent.target;
+                    var actualSelection = this.editor.getSelectionRangeEx();
+                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(contextMenuTarget, 'HTMLImageElement') &&
+                        (actualSelection.type !== 2 /* ImageSelection */ ||
+                            actualSelection.image !== contextMenuTarget)) {
+                        this.editor.select(contextMenuTarget);
+                    }
             }
         }
     };
@@ -8442,7 +8366,7 @@ var TypeInContainerPlugin = /** @class */ (function () {
      */
     TypeInContainerPlugin.prototype.onPluginEvent = function (event) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f;
+        var _a;
         // We need to check if the ctrl key or the meta key is pressed,
         // browsers like Safari fire the "keypress" event when the meta key is pressed.
         if (event.eventType == 1 /* KeyPress */ &&
@@ -8480,24 +8404,6 @@ var TypeInContainerPlugin = /** @class */ (function () {
                 }
             }
         }
-        /**
-         * Add a Span with default format to the previous element when pressing backspace
-         */
-        if (event.eventType == 0 /* KeyDown */ &&
-            event.rawEvent.which == 8 /* BACKSPACE */ &&
-            ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */))) {
-            var element = (_c = this.editor) === null || _c === void 0 ? void 0 : _c.getElementAtCursor();
-            var block_1 = element &&
-                ((_e = (_d = this.editor) === null || _d === void 0 ? void 0 : _d.getBlockElementAtNode(element)) === null || _e === void 0 ? void 0 : _e.getStartNode().previousSibling);
-            if (block_1) {
-                (_f = this.editor) === null || _f === void 0 ? void 0 : _f.runAsync(function (editor) {
-                    var position = editor.getFocusedPosition();
-                    if (position && block_1 == position.element) {
-                        editor.ensureTypeInContainer(position, event.rawEvent);
-                    }
-                });
-            }
-        }
     };
     return TypeInContainerPlugin;
 }());
@@ -8607,6 +8513,9 @@ var UndoPlugin = /** @class */ (function () {
             case 7 /* ContentChanged */:
                 this.onContentChanged(event);
                 break;
+            case 23 /* BeforeKeyboardEditing */:
+                this.onBeforeKeyboardEditing(event.rawEvent);
+                break;
         }
     };
     UndoPlugin.prototype.onKeyDown = function (evt) {
@@ -8621,7 +8530,7 @@ var UndoPlugin = /** @class */ (function () {
                 this.state.autoCompletePosition = null;
                 this.lastKeyPress = evt.which;
             }
-            else {
+            else if (!evt.defaultPrevented) {
                 var selectionRange = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.getSelectionRange();
                 // Add snapshot when
                 // 1. Something has been selected (not collapsed), or
@@ -8645,6 +8554,11 @@ var UndoPlugin = /** @class */ (function () {
             }
             this.lastKeyPress = 0;
         }
+        else if (this.lastKeyPress == 8 /* BACKSPACE */ || this.lastKeyPress == 46 /* DELETE */) {
+            if (this.state.hasNewContent) {
+                this.addUndoSnapshot();
+            }
+        }
     };
     UndoPlugin.prototype.onKeyPress = function (evt) {
         var _a;
@@ -8669,22 +8583,21 @@ var UndoPlugin = /** @class */ (function () {
         }
         this.lastKeyPress = evt.which;
     };
-    UndoPlugin.prototype.onContentChanged = function (event) {
-        if (event.source == "Keyboard" /* Keyboard */) {
-            if (Number.isInteger(event.data)) {
-                // For keyboard event (triggered from Content Model), we can get its keycode from event.data
-                // And when user is keep pressing the same key, mark editor with "hasNewContent" so that next time user
-                // do some other action or press a different key, we will add undo snapshot
-                if (event.data != this.lastKeyPress) {
-                    this.addUndoSnapshot();
-                }
-                this.lastKeyPress = event.data;
-                this.state.hasNewContent = true;
-            }
+    UndoPlugin.prototype.onBeforeKeyboardEditing = function (event) {
+        // For keyboard event (triggered from Content Model), we can get its keycode from event.data
+        // And when user is keep pressing the same key, mark editor with "hasNewContent" so that next time user
+        // do some other action or press a different key, we will add undo snapshot
+        if (event.which != this.lastKeyPress) {
+            this.addUndoSnapshot();
         }
-        else if (!(this.state.isRestoring ||
+        this.lastKeyPress = event.which;
+        this.state.hasNewContent = true;
+    };
+    UndoPlugin.prototype.onContentChanged = function (event) {
+        if (!(this.state.isRestoring ||
             event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
-            event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
+            event.source == "SwitchToLightMode" /* SwitchToLightMode */ ||
+            event.source == "Keyboard" /* Keyboard */)) {
             this.clearRedoForInput();
         }
     };
@@ -8883,7 +8796,14 @@ function inlineEntityOnPluginEvent(event, editor) {
             break;
         case 8 /* ExtractContentWithDom */:
         case 9 /* BeforeCutCopy */:
-            event.clonedRoot.querySelectorAll(DELIMITER_SELECTOR).forEach(removeNode);
+            event.clonedRoot.querySelectorAll(DELIMITER_SELECTOR).forEach(function (node) {
+                if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(node)) {
+                    removeNode(node);
+                }
+                else {
+                    removeDelimiterAttr(node);
+                }
+            });
             break;
         case 0 /* KeyDown */:
             handleKeyDownEvent(editor, event);
@@ -8980,10 +8900,9 @@ function removeDelimiterAttr(node, checkEntity) {
     });
 }
 function handleCollapsedEnter(editor, delimiter) {
-    var _a;
     var isAfter = delimiter.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
     var entity = !isAfter ? delimiter.nextSibling : delimiter.previousSibling;
-    var block = (_a = editor.getBlockElementAtNode(delimiter)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+    var block = getBlock(editor, delimiter);
     editor.runAsync(function () {
         if (!block) {
             return;
@@ -9016,6 +8935,17 @@ var getPosition = function (container) {
     }
     return undefined;
 };
+function getBlock(editor, element) {
+    var _a;
+    if (!element) {
+        return undefined;
+    }
+    var block = (_a = editor.getBlockElementAtNode(element)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+    while (block && !(0, roosterjs_editor_dom_1.isBlockElement)(block)) {
+        block = editor.contains(block.parentElement) ? block.parentElement : undefined;
+    }
+    return block;
+}
 function handleSelectionNotCollapsed(editor, range, event) {
     var startContainer = range.startContainer, endContainer = range.endContainer, startOffset = range.startOffset, endOffset = range.endOffset;
     var startElement = editor.getElementAtCursor(DELIMITER_SELECTOR, startContainer);
@@ -9320,6 +9250,31 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorBase = void 0;
 var isFeatureEnabled_1 = __webpack_require__(/*! ./isFeatureEnabled */ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts");
@@ -9352,12 +9307,11 @@ var EditorBase = /** @class */ (function () {
      * Dispose this editor, dispose all plugins and custom data
      */
     EditorBase.prototype.dispose = function () {
-        var _a;
         var core = this.getCore();
         for (var i = core.plugins.length - 1; i >= 0; i--) {
             core.plugins[i].dispose();
         }
-        (_a = core.darkColorHandler) === null || _a === void 0 ? void 0 : _a.reset();
+        core.darkColorHandler.reset();
         this.core = null;
     };
     /**
@@ -9435,7 +9389,7 @@ var EditorBase = /** @class */ (function () {
         var selectionEx = scope == 0 /* Body */ ? null : this.getSelectionRangeEx();
         if (selectionEx) {
             selectionEx.ranges.forEach(function (range) {
-                result.push.apply(result, (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, selector, callback, scope, range));
+                result.push.apply(result, __spreadArray([], __read((0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, selector, callback, scope, range)), false));
             });
         }
         else {
@@ -9667,7 +9621,7 @@ var EditorBase = /** @class */ (function () {
         var result = [];
         var contentDiv = this.getCore().contentDiv;
         selection.ranges.forEach(function (range) {
-            result.push.apply(result, (range ? (0, roosterjs_editor_dom_1.getRegionsFromRange)(contentDiv, range, type) : []));
+            result.push.apply(result, __spreadArray([], __read((range ? (0, roosterjs_editor_dom_1.getRegionsFromRange)(contentDiv, range, type) : [])), false));
         });
         return result.filter(function (value, index, self) {
             return self.indexOf(value) === index;
@@ -9962,7 +9916,7 @@ var EditorBase = /** @class */ (function () {
      */
     EditorBase.prototype.ensureTypeInContainer = function (position, keyboardEvent) {
         var core = this.getCore();
-        core.api.ensureTypeInContainer(core, position, keyboardEvent, this.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
+        core.api.ensureTypeInContainer(core, position, keyboardEvent);
     };
     //#endregion
     //#region Dark mode APIs
@@ -9997,10 +9951,10 @@ var EditorBase = /** @class */ (function () {
         core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
     };
     /**
-     * Get a darkColorHandler object for this editor. It will return null if experimental feature "VariableBasedDarkColor" is not enabled
+     * Get a darkColorHandler object for this editor.
      */
     EditorBase.prototype.getDarkColorHandler = function () {
-        return this.getCore().darkColorHandler || null;
+        return this.getCore().darkColorHandler;
     };
     /**
      * Make the editor in "Shadow Edit" mode.
@@ -10126,7 +10080,6 @@ var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugi
 var DarkColorHandlerImpl_1 = __webpack_require__(/*! ./DarkColorHandlerImpl */ "./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
-var isFeatureEnabled_1 = __webpack_require__(/*! ./isFeatureEnabled */ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts");
 /**
  * Create a new instance of Editor Core
  * @param contentDiv The DIV HTML element which will be the container element of editor
@@ -10155,9 +10108,7 @@ var createEditorCore = function (contentDiv, options) {
                 ? [scrollContainer]
                 : [scrollContainer, core.contentDiv]);
         });
-    var core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), originalApi: coreApiMap_1.coreApiMap, plugins: plugins.filter(function (x) { return !!x; }) }, pluginState), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }), getVisibleViewport: getVisibleViewport, imageSelectionBorderColor: options.imageSelectionBorderColor, darkColorHandler: (0, isFeatureEnabled_1.isFeatureEnabled)(options.experimentalFeatures, "VariableBasedDarkColor" /* VariableBasedDarkColor */)
-            ? new DarkColorHandlerImpl_1.default(contentDiv, pluginState.lifecycle.getDarkColor)
-            : undefined });
+    var core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), originalApi: coreApiMap_1.coreApiMap, plugins: plugins.filter(function (x) { return !!x; }) }, pluginState), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }), getVisibleViewport: getVisibleViewport, imageSelectionBorderColor: options.imageSelectionBorderColor, darkColorHandler: new DarkColorHandlerImpl_1.default(contentDiv, pluginState.lifecycle.getDarkColor) });
     return core;
 };
 exports.createEditorCore = createEditorCore;
@@ -11725,6 +11676,22 @@ exports.default = SelectionScoper;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addDelimiterBefore = exports.addDelimiterAfter = void 0;
 var createElement_1 = __webpack_require__(/*! ../utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
@@ -11735,7 +11702,7 @@ var ZERO_WIDTH_SPACE = '\u200B';
  * @param node the node to add the delimiters
  */
 function addDelimiters(node) {
-    var _a = getDelimiters(node), delimiterAfter = _a[0], delimiterBefore = _a[1];
+    var _a = __read(getDelimiters(node), 2), delimiterAfter = _a[0], delimiterBefore = _a[1];
     if (!delimiterAfter) {
         delimiterAfter = addDelimiterAfter(node);
     }
@@ -12074,6 +12041,22 @@ function safeRemove(node) {
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var arrayPush_1 = __webpack_require__(/*! ../jsUtils/arrayPush */ "./packages/roosterjs-editor-dom/lib/jsUtils/arrayPush.ts");
 var collapseNodesInRegion_1 = __webpack_require__(/*! ../region/collapseNodesInRegion */ "./packages/roosterjs-editor-dom/lib/region/collapseNodesInRegion.ts");
@@ -12113,8 +12096,8 @@ function deleteSelectedContent(root, range) {
         // Make sure there are node before and after the merging point.
         // This is required by mergeBlocksInRegion API.
         // This may create some empty text node as anchor
-        var _a = ensureBeforeAndAfter(endContainer, endOffset, false /*isStart*/), beforeEnd = _a[0], afterEnd = _a[1];
-        var _b = ensureBeforeAndAfter(startContainer, startOffset, true /*isStart*/), beforeStart = _b[0], afterStart = _b[1];
+        var _a = __read(ensureBeforeAndAfter(endContainer, endOffset, false /*isStart*/), 2), beforeEnd = _a[0], afterEnd = _a[1];
+        var _b = __read(ensureBeforeAndAfter(startContainer, startOffset, true /*isStart*/), 2), beforeStart = _b[0], afterStart = _b[1];
         nodeBefore = nodeBefore || beforeStart;
         // Find out all nodes to be deleted
         var nodes = (0, collapseNodesInRegion_1.default)(region, [afterStart, beforeEnd]);
@@ -12607,6 +12590,17 @@ exports.default = isModifierKey;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
 var getInheritableStyles_1 = __webpack_require__(/*! ./getInheritableStyles */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/getInheritableStyles.ts");
@@ -12710,40 +12704,60 @@ var HtmlSanitizer = /** @class */ (function () {
      * @param rootNode The HTML Document
      */
     HtmlSanitizer.prototype.convertGlobalCssToInlineCss = function (rootNode) {
+        var e_1, _a;
         var styleNodes = (0, toArray_1.default)(rootNode.querySelectorAll('style'));
         var styleSheets = this.additionalGlobalStyleNodes
             .reverse()
             .map(function (node) { return node.sheet; })
             .concat(styleNodes.map(function (node) { return node.sheet; }).reverse())
             .filter(function (sheet) { return sheet; });
-        for (var _i = 0, styleSheets_1 = styleSheets; _i < styleSheets_1.length; _i++) {
-            var styleSheet = styleSheets_1[_i];
-            var _loop_1 = function (j) {
-                // Skip any none-style rule, i.e. @page
-                var styleRule = styleSheet.cssRules[j];
-                var text = styleRule && styleRule.style ? styleRule.style.cssText : null;
-                if (styleRule.type != CSSRule.STYLE_RULE || !text || !styleRule.selectorText) {
-                    return "continue";
-                }
-                // Make sure the selector is not empty
-                for (var _a = 0, _b = styleRule.selectorText.split(','); _a < _b.length; _a++) {
-                    var selector = _b[_a];
-                    if (!selector || !selector.trim() || selector.indexOf(':') >= 0) {
-                        continue;
+        try {
+            for (var styleSheets_1 = __values(styleSheets), styleSheets_1_1 = styleSheets_1.next(); !styleSheets_1_1.done; styleSheets_1_1 = styleSheets_1.next()) {
+                var styleSheet = styleSheets_1_1.value;
+                var _loop_1 = function (j) {
+                    var e_2, _b;
+                    // Skip any none-style rule, i.e. @page
+                    var styleRule = styleSheet.cssRules[j];
+                    var text = styleRule && styleRule.style ? styleRule.style.cssText : null;
+                    if (styleRule.type != CSSRule.STYLE_RULE || !text || !styleRule.selectorText) {
+                        return "continue";
                     }
-                    var nodes = (0, toArray_1.default)(rootNode.querySelectorAll(selector));
-                    // Always put existing styles after so that they have higher priority
-                    // Which means if both global style and inline style apply to the same element,
-                    // inline style will have higher priority
-                    nodes.forEach(function (node) {
-                        return node.setAttribute('style', text + (node.getAttribute('style') || ''));
-                    });
+                    try {
+                        // Make sure the selector is not empty
+                        for (var _c = (e_2 = void 0, __values(styleRule.selectorText.split(','))), _d = _c.next(); !_d.done; _d = _c.next()) {
+                            var selector = _d.value;
+                            if (!selector || !selector.trim() || selector.indexOf(':') >= 0) {
+                                continue;
+                            }
+                            var nodes = (0, toArray_1.default)(rootNode.querySelectorAll(selector));
+                            // Always put existing styles after so that they have higher priority
+                            // Which means if both global style and inline style apply to the same element,
+                            // inline style will have higher priority
+                            nodes.forEach(function (node) {
+                                return node.setAttribute('style', text + (node.getAttribute('style') || ''));
+                            });
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                };
+                for (var j = styleSheet.cssRules.length - 1; j >= 0; j--) {
+                    _loop_1(j);
                 }
-            };
-            for (var j = styleSheet.cssRules.length - 1; j >= 0; j--) {
-                _loop_1(j);
             }
         }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (styleSheets_1_1 && !styleSheets_1_1.done && (_a = styleSheets_1.return)) _a.call(styleSheets_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
         styleNodes.forEach(function (node) {
             if (node.parentNode) {
                 node.parentNode.removeChild(node);
@@ -12918,6 +12932,31 @@ exports.default = HtmlSanitizer;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Chain all callback for an attribute together
@@ -12938,8 +12977,8 @@ function chainSanitizerCallback(map, name, newCallback) {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            originalCallback_1.apply(void 0, args);
-            return newCallback.apply(void 0, args);
+            originalCallback_1.apply(void 0, __spreadArray([], __read(args), false));
+            return newCallback.apply(void 0, __spreadArray([], __read(args), false));
         };
     }
 }
@@ -12957,6 +12996,17 @@ exports.default = chainSanitizerCallback;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cloneObject = void 0;
 var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
@@ -12964,11 +13014,21 @@ function nativeClone(source, existingObj) {
     return Object.assign(existingObj || {}, source);
 }
 function customClone(source, existingObj) {
+    var e_1, _a;
     var result = existingObj || {};
     if (source) {
-        for (var _i = 0, _a = (0, getObjectKeys_1.default)(source); _i < _a.length; _i++) {
-            var key = _a[_i];
-            result[key] = source[key];
+        try {
+            for (var _b = __values((0, getObjectKeys_1.default)(source)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var key = _c.value;
+                result[key] = source[key];
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
     }
     return result;
@@ -14378,6 +14438,22 @@ exports.default = toArray;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -14564,6 +14640,7 @@ var VList = /** @class */ (function () {
             }
             item.writeBack(listStack, _this.rootList, shouldReuseAllAncestorListElements);
             var topList = listStack[1];
+            item.applyListStyle(_this.rootList, start);
             if ((0, safeInstanceOf_1.default)(topList, 'HTMLOListElement')) {
                 if (lastList != topList) {
                     if (start == 1) {
@@ -14573,12 +14650,10 @@ var VList = /** @class */ (function () {
                         topList.start = start;
                     }
                 }
-                if (item.getLevel() == 1) {
+                if (item.getLevel() == 1 && !item.isDummy()) {
                     start++;
                 }
             }
-            var itemIndex = _this.getListItemIndex(item.getNode());
-            item.applyListStyle(_this.rootList, itemIndex);
             lastList = topList;
         });
         // Restore the content to the position of placeholder
@@ -14773,12 +14848,12 @@ var VList = /** @class */ (function () {
         var type = (0, getListTypeFromNode_1.default)(list);
         var items = (0, toArray_1.default)(list.childNodes);
         items.forEach(function (item) {
-            var newListTypes = __spreadArray(__spreadArray([], listTypes, true), [type], false);
+            var newListTypes = __spreadArray(__spreadArray([], __read(listTypes), false), [type], false);
             if ((0, getListTypeFromNode_1.isListElement)(item)) {
                 _this.populateItems(item, newListTypes);
             }
             else if (item.nodeType != 3 /* Text */ || (item.nodeValue || '').trim() != '') {
-                _this.items.push(new (VListItem_1.default.bind.apply(VListItem_1.default, __spreadArray([void 0, item], newListTypes, false)))());
+                _this.items.push(new (VListItem_1.default.bind.apply(VListItem_1.default, __spreadArray([void 0, item], __read(newListTypes), false)))());
             }
         });
     };
@@ -14947,7 +15022,13 @@ var VListChain = /** @class */ (function () {
         var lastNumber = 0;
         for (var i = 0; i < lists.length; i++) {
             var list = lists[i];
-            list.start = list.start > 1 ? list.start : lastNumber + 1;
+            //If there is a list chain sequence, ensure the list chain keep increasing correctly
+            if (list.start > 1) {
+                list.start = list.start === lastNumber ? lastNumber + 1 : list.start;
+            }
+            else {
+                list.start = lastNumber + 1;
+            }
             var vlist = new VList_1.default(list);
             lastNumber = vlist.getLastItemNumber() || 0;
             delete list.dataset[CHAIN_DATASET_NAME];
@@ -15014,6 +15095,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -15086,7 +15183,7 @@ var VListItem = /** @class */ (function () {
         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.
-        this.listTypes = __spreadArray([0 /* None */], listTypes, true);
+        this.listTypes = __spreadArray([0 /* None */], __read(listTypes), false);
     }
     /**
      * Get type of current list item
@@ -15498,6 +15595,17 @@ exports.default = convertDecimalsToAlpha;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 var RomanValues = {
@@ -15523,12 +15631,22 @@ var RomanValues = {
  * @returns
  */
 function convertDecimalsToRoman(decimal, isLowerCase) {
+    var e_1, _a;
     var romanValue = '';
-    for (var _i = 0, _a = (0, getObjectKeys_1.default)(RomanValues); _i < _a.length; _i++) {
-        var i = _a[_i];
-        var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
-        decimal = decimal - timesRomanCharAppear * RomanValues[i];
-        romanValue = romanValue + i.repeat(timesRomanCharAppear);
+    try {
+        for (var _b = __values((0, getObjectKeys_1.default)(RomanValues)), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var i = _c.value;
+            var timesRomanCharAppear = Math.floor(decimal / RomanValues[i]);
+            decimal = decimal - timesRomanCharAppear * RomanValues[i];
+            romanValue = romanValue + i.repeat(timesRomanCharAppear);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
     }
     return isLowerCase ? romanValue.toLocaleLowerCase() : romanValue;
 }
@@ -15599,7 +15717,7 @@ function createVListFromRegion(region, includeSiblingLists, startNode) {
             }
         });
         if (nodes.length == 0 && !region.rootNode.firstChild) {
-            var newNode = (0, createElement_1.default)(12 /* EmptyLineFormatInSpan */, region.rootNode.ownerDocument);
+            var newNode = (0, createElement_1.default)(1 /* EmptyLine */, region.rootNode.ownerDocument);
             region.rootNode.appendChild(newNode);
             nodes.push(newNode);
             region.fullSelectionStart = new Position_1.default(newNode, 0 /* Begin */);
@@ -16588,6 +16706,22 @@ exports.default = collapseNodesInRegion;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRegionCreator = void 0;
@@ -16611,14 +16745,15 @@ var regionTypeData = (_a = {},
  * @param type Type of region. Currently we only support TABLE region.
  */
 function getRegionsFromRange(root, range, type) {
+    var _a;
     var regions = [];
     if (root && range) {
-        var _a = regionTypeData[type], innerSelector = _a.innerSelector, skipTags = _a.skipTags;
+        var _b = regionTypeData[type], innerSelector = _b.innerSelector, skipTags = _b.skipTags;
         var boundaryTree = buildBoundaryTree(root, range, type);
         var start = (0, findClosestElementAncestor_1.default)(range.startContainer, root, innerSelector) || root;
         var end = (0, findClosestElementAncestor_1.default)(range.endContainer, root, innerSelector) || root;
         var creator = getRegionCreator(range, skipTags);
-        regions = iterateNodes(creator, boundaryTree, start, end)[0];
+        _a = __read(iterateNodes(creator, boundaryTree, start, end), 1), regions = _a[0];
     }
     return regions.filter(function (r) { return !!r; });
 }
@@ -16712,7 +16847,7 @@ function iterateNodes(creator, boundary, start, end, started) {
             boundaries === null || boundaries === void 0 ? void 0 : boundaries.forEach(function (child) {
                 var _a;
                 var newRegions;
-                _a = iterateNodes(creator, child, start, end, started), newRegions = _a[0], started = _a[1], ended = _a[2];
+                _a = __read(iterateNodes(creator, child, start, end, started), 3), newRegions = _a[0], started = _a[1], ended = _a[2];
                 regions = regions.concat(newRegions);
             });
         }
@@ -16773,8 +16908,9 @@ var shouldSkipNode_1 = __webpack_require__(/*! ../utils/shouldSkipNode */ "./pac
  * @param regionBase The region to get block elements from
  * @param createBlockIfEmpty When set to true, a new empty block element will be created if there is not
  * any blocks in the region. Default value is false
+ * @param deprecated Deprecated parameter, not used
  */
-function getSelectedBlockElementsInRegion(regionBase, createBlockIfEmpty, shouldApplyFormatToSpan) {
+function getSelectedBlockElementsInRegion(regionBase, createBlockIfEmpty, deprecated) {
     var range = (0, getSelectionRangeInRegion_1.default)(regionBase);
     var blocks = [];
     if (range) {
@@ -16798,9 +16934,7 @@ function getSelectedBlockElementsInRegion(regionBase, createBlockIfEmpty, should
         });
     }
     if (blocks.length == 0 && regionBase && !regionBase.rootNode.firstChild && createBlockIfEmpty) {
-        var newNode = (0, createElement_1.default)(shouldApplyFormatToSpan
-            ? 12 /* EmptyLineFormatInSpan */
-            : 1 /* EmptyLine */, regionBase.rootNode.ownerDocument);
+        var newNode = (0, createElement_1.default)(1 /* EmptyLine */, regionBase.rootNode.ownerDocument);
         regionBase.rootNode.appendChild(newNode);
         var block = (0, getBlockElementAtNode_1.default)(regionBase.rootNode, newNode);
         if (block) {
@@ -19353,6 +19487,22 @@ exports.default = applyFormat;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 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");
@@ -19374,10 +19524,10 @@ function changeElementTag(element, newTag) {
     }
     (0, moveChildNodes_1.default)(newElement, element);
     if (origianlTag == 'P' || (0, getTagOfNode_1.default)(newElement) == 'P') {
-        _a = (0, getComputedStyles_1.default)(element, [
+        _a = __read((0, getComputedStyles_1.default)(element, [
             'margin-top',
             'margin-bottom',
-        ]), newElement.style.marginTop = _a[0], newElement.style.marginBottom = _a[1];
+        ]), 2), newElement.style.marginTop = _a[0], newElement.style.marginBottom = _a[1];
     }
     if (element.parentNode) {
         element.parentNode.replaceChild(newElement, element);
@@ -19726,6 +19876,17 @@ exports.default = fromHtml;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComputedStyle = void 0;
 var findClosestElementAncestor_1 = __webpack_require__(/*! ./findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
@@ -19737,6 +19898,7 @@ var findClosestElementAncestor_1 = __webpack_require__(/*! ./findClosestElementA
  * @returns An array of the computed styles
  */
 function getComputedStyles(node, styleNames) {
+    var e_1, _a;
     if (styleNames === void 0) { styleNames = ['font-family', 'font-size', 'color', 'background-color']; }
     var element = (0, findClosestElementAncestor_1.default)(node);
     var result = [];
@@ -19745,12 +19907,21 @@ function getComputedStyles(node, styleNames) {
         var win = element.ownerDocument.defaultView || window;
         var styles = win.getComputedStyle(element);
         if (styles) {
-            for (var _i = 0, styleNames_1 = styleNames; _i < styleNames_1.length; _i++) {
-                var style = styleNames_1[_i];
-                var value = styles.getPropertyValue(style) || '';
-                value = style != 'font-family' ? value.toLowerCase() : value;
-                value = style == 'font-size' ? px2Pt(value) : value;
-                result.push(value);
+            try {
+                for (var styleNames_1 = __values(styleNames), styleNames_1_1 = styleNames_1.next(); !styleNames_1_1.done; styleNames_1_1 = styleNames_1.next()) {
+                    var style = styleNames_1_1.value;
+                    var value = styles.getPropertyValue(style) || '';
+                    value = style != 'font-family' ? value.toLowerCase() : value;
+                    value = style == 'font-size' ? px2Pt(value) : value;
+                    result.push(value);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (styleNames_1_1 && !styleNames_1_1.done && (_a = styleNames_1.return)) _a.call(styleNames_1);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
         }
     }
@@ -19821,6 +19992,31 @@ exports.default = getInnerHTML;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var normalizeRect_1 = __webpack_require__(/*! ./normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 /**
@@ -19855,10 +20051,10 @@ function getIntersectedRect(elements, additionalRects) {
         .concat(additionalRects)
         .filter(function (element) { return !!element; });
     var result = {
-        top: Math.max.apply(Math, rects.map(function (r) { return r.top; })),
-        bottom: Math.min.apply(Math, rects.map(function (r) { return r.bottom; })),
-        left: Math.max.apply(Math, rects.map(function (r) { return r.left; })),
-        right: Math.min.apply(Math, rects.map(function (r) { return r.right; })),
+        top: Math.max.apply(Math, __spreadArray([], __read(rects.map(function (r) { return r.top; })), false)),
+        bottom: Math.min.apply(Math, __spreadArray([], __read(rects.map(function (r) { return r.bottom; })), false)),
+        left: Math.max.apply(Math, __spreadArray([], __read(rects.map(function (r) { return r.left; })), false)),
+        right: Math.min.apply(Math, __spreadArray([], __read(rects.map(function (r) { return r.right; })), false)),
     };
     return result.top < result.bottom && result.left < result.right ? result : null;
 }
@@ -20226,6 +20422,17 @@ exports.default = isVoidHtmlElement;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var getObjectKeys_1 = __webpack_require__(/*! ../jsUtils/getObjectKeys */ "./packages/roosterjs-editor-dom/lib/jsUtils/getObjectKeys.ts");
 // http exclude matching regex
@@ -20289,19 +20496,29 @@ var linkMatchRules = {
  * The link data includes an original url and a normalized url
  */
 function matchLink(url) {
+    var e_1, _a;
     if (url) {
-        for (var _i = 0, _a = (0, getObjectKeys_1.default)(linkMatchRules); _i < _a.length; _i++) {
-            var schema = _a[_i];
-            var rule = linkMatchRules[schema];
-            var matches = url.match(rule.match);
-            if (matches && matches[0] == url && (!rule.except || !rule.except.test(url))) {
-                return {
-                    scheme: schema,
-                    originalUrl: url,
-                    normalizedUrl: rule.normalizeUrl ? rule.normalizeUrl(url) : url,
-                };
+        try {
+            for (var _b = __values((0, getObjectKeys_1.default)(linkMatchRules)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var schema = _c.value;
+                var rule = linkMatchRules[schema];
+                var matches = url.match(rule.match);
+                if (matches && matches[0] == url && (!rule.except || !rule.except.test(url))) {
+                    return {
+                        scheme: schema,
+                        originalUrl: url,
+                        normalizedUrl: rule.normalizeUrl ? rule.normalizeUrl(url) : url,
+                    };
+                }
             }
         }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
     }
     return null;
 }
@@ -20618,7 +20835,6 @@ var TRANSPARENT = 'transparent';
 var DARK_COLORS_LIGHTNESS = 20;
 //If the value of the lightness is more than 80, the color is bright
 var BRIGHT_COLORS_LIGHTNESS = 80;
-var TRANSPARENT_COLOR = 'transparent';
 /**
  * Set text color or background color to the given element
  * @param element The element to set color to
@@ -20626,7 +20842,8 @@ var TRANSPARENT_COLOR = 'transparent';
  * @param isBackgroundColor Whether set background color or text color
  * @param isDarkMode Whether current mode is dark mode. @default false
  * @param shouldAdaptTheFontColor Whether the font color needs to be adapted to be visible in a dark or bright background color. @default false
- * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
+ * @param darkColorHandler A dark color handler object. This is now required.
+ * We keep it optional only for backward compatibility. If it is not passed, color will not be set.
  */
 function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheFontColor, darkColorHandler) {
     var colorString = typeof color === 'string' ? color.trim() : '';
@@ -20637,22 +20854,6 @@ function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheF
             var colorValue = darkColorHandler.registerColor((modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString, !!isDarkMode, modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor);
             element.style.setProperty(cssName, colorValue);
         }
-        else {
-            element.style.setProperty(cssName, (isDarkMode
-                ? modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor
-                : modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString);
-            if (element.dataset) {
-                var dataSetName = isBackgroundColor
-                    ? "ogsb" /* OriginalStyleBackgroundColor */
-                    : "ogsc" /* OriginalStyleColor */;
-                if (!isDarkMode || color == TRANSPARENT_COLOR) {
-                    delete element.dataset[dataSetName];
-                }
-                else if (modeIndependentColor) {
-                    element.dataset[dataSetName] = modeIndependentColor.lightModeColor;
-                }
-            }
-        }
         if (isBackgroundColor && shouldAdaptTheFontColor) {
             adaptFontColorToBackgroundColor(element, (modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString, isDarkMode, darkColorHandler);
         }
@@ -20664,7 +20865,8 @@ exports.default = setColor;
  * @param element The element that contains text.
  * @param lightModeBackgroundColor Existing background color in light mode
  * @param isDarkMode Whether the content is in dark mode
- * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
+ * @param darkColorHandler A dark color handler object.  This is now required.
+ * We keep it optional only for backward compatibility. If it is not passed, color will not be set.
  */
 function adaptFontColorToBackgroundColor(element, lightModeBackgroundColor, isDarkMode, darkColorHandler) {
     if (!lightModeBackgroundColor || lightModeBackgroundColor === TRANSPARENT) {
@@ -20940,11 +21142,23 @@ exports.default = unwrap;
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 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__(/*! ./safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 function wrap(nodes, wrapper) {
+    var e_1, _a;
     nodes = !nodes ? [] : (0, safeInstanceOf_1.default)(nodes, 'Node') ? [nodes] : nodes;
     if (nodes.length == 0 || !nodes[0] || !nodes[0].ownerDocument) {
         return null;
@@ -20967,9 +21181,18 @@ function wrap(nodes, wrapper) {
     if (parentNode) {
         parentNode.insertBefore(wrapper, nodes[0]);
     }
-    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
-        var node = nodes_1[_i];
-        wrapper.appendChild(node);
+    try {
+        for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
+            var node = nodes_1_1.value;
+            wrapper.appendChild(node);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
+        }
+        finally { if (e_1) throw e_1.error; }
     }
     return wrapper;
 }
@@ -21349,6 +21572,22 @@ __exportStar(__webpack_require__(/*! ./AutoFormat */ "./packages/roosterjs-edito
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
@@ -21415,13 +21654,13 @@ var DragAndDropHelper = /** @class */ (function () {
             e.preventDefault();
             e.stopPropagation();
             _this.addDocumentEvents();
-            _a = _this.dndMouse.getPageXY(e), _this.initX = _a[0], _this.initY = _a[1];
+            _a = __read(_this.dndMouse.getPageXY(e), 2), _this.initX = _a[0], _this.initY = _a[1];
             _this.initValue = (_c = (_b = _this.handler).onDragStart) === null || _c === void 0 ? void 0 : _c.call(_b, _this.context, e);
         };
         this.onMouseMove = function (e) {
             var _a, _b, _c;
             e.preventDefault();
-            var _d = _this.dndMouse.getPageXY(e), pageX = _d[0], pageY = _d[1];
+            var _d = __read(_this.dndMouse.getPageXY(e), 2), pageX = _d[0], pageY = _d[1];
             var deltaX = (pageX - _this.initX) / _this.zoomScale;
             var deltaY = (pageY - _this.initY) / _this.zoomScale;
             if (_this.initValue &&
@@ -21926,6 +22165,22 @@ exports.CursorFeatures = {
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityFeatures = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
@@ -22240,7 +22495,7 @@ function triggerOperation(entity, editor, operation, event) {
                     removeDelimiters(nextElementSibling, previousElementSibling);
                 }
                 else {
-                    var delimiterAfter = (0, roosterjs_editor_dom_2.addDelimiters)(entity.wrapper)[0];
+                    var _a = __read((0, roosterjs_editor_dom_2.addDelimiters)(entity.wrapper), 1), delimiterAfter = _a[0];
                     if (delimiterAfter) {
                         editor.select(delimiterAfter, -3 /* After */);
                     }
@@ -23965,6 +24220,33 @@ Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function
 
 "use strict";
 
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var makeReplacement = function (sourceString, replacementHTML, matchSourceCaseSensitive, shouldReplace) { return ({
     sourceString: sourceString,
@@ -24071,21 +24353,31 @@ var CustomReplacePlugin = /** @class */ (function () {
         }
     };
     CustomReplacePlugin.prototype.getMatchingReplacement = function (stringToSearch) {
+        var e_1, _a;
         if (stringToSearch.length == 0 || !this.replacements) {
             return null;
         }
         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
-                ? [originalStringToSearch, replacement.sourceString]
-                : [lowerCaseStringToSearch, replacement.sourceString.toLocaleLowerCase()], sourceMatch = _b[0], replacementMatch = _b[1];
-            if (sourceMatch.substring(sourceMatch.length - replacementMatch.length) ==
-                replacementMatch) {
-                return replacement;
+        try {
+            for (var _b = __values(this.replacements), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var replacement = _c.value;
+                var _d = __read(replacement.matchSourceCaseSensitive
+                    ? [originalStringToSearch, replacement.sourceString]
+                    : [lowerCaseStringToSearch, replacement.sourceString.toLocaleLowerCase()], 2), sourceMatch = _d[0], replacementMatch = _d[1];
+                if (sourceMatch.substring(sourceMatch.length - replacementMatch.length) ==
+                    replacementMatch) {
+                    return replacement;
+                }
             }
         }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
         return null;
     };
     return CustomReplacePlugin;
@@ -24095,21 +24387,31 @@ function getLongestReplacementSourceLength(replacements) {
     return Math.max.apply(null, replacements.map(function (replacement) { return replacement.sourceString.length; }));
 }
 function getReplacementEndCharacters(replacements) {
+    var e_2, _a;
     var endChars = new Set();
-    for (var _i = 0, replacements_1 = replacements; _i < replacements_1.length; _i++) {
-        var replacement = replacements_1[_i];
-        var sourceString = replacement.sourceString;
-        if (sourceString.length == 0) {
-            continue;
-        }
-        var lastChar = sourceString[sourceString.length - 1];
-        if (!replacement.matchSourceCaseSensitive) {
-            endChars.add(lastChar.toLocaleLowerCase());
-            endChars.add(lastChar.toLocaleUpperCase());
+    try {
+        for (var replacements_1 = __values(replacements), replacements_1_1 = replacements_1.next(); !replacements_1_1.done; replacements_1_1 = replacements_1.next()) {
+            var replacement = replacements_1_1.value;
+            var sourceString = replacement.sourceString;
+            if (sourceString.length == 0) {
+                continue;
+            }
+            var lastChar = sourceString[sourceString.length - 1];
+            if (!replacement.matchSourceCaseSensitive) {
+                endChars.add(lastChar.toLocaleLowerCase());
+                endChars.add(lastChar.toLocaleUpperCase());
+            }
+            else {
+                endChars.add(lastChar);
+            }
         }
-        else {
-            endChars.add(lastChar);
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (replacements_1_1 && !replacements_1_1.done && (_a = replacements_1.return)) _a.call(replacements_1);
         }
+        finally { if (e_2) throw e_2.error; }
     }
     return endChars;
 }
@@ -24487,6 +24789,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -24806,7 +25124,7 @@ var ImageEdit = /** @class */ (function () {
             this.createWrapper(operation);
             this.updateWrapper();
             // Init drag and drop
-            this.dndHelpers = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], this.createDndHelpers("r_resizeH" /* ResizeHandle */, Resizer_1.Resizer), true), this.createDndHelpers("r_rotateH" /* RotateHandle */, Rotator_1.Rotator), true), this.createDndHelpers("r_cropH" /* CropHandle */, Cropper_1.Cropper), true), this.createDndHelpers("r_cropC" /* CropContainer */, Cropper_1.Cropper), true);
+            this.dndHelpers = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(this.createDndHelpers("r_resizeH" /* ResizeHandle */, Resizer_1.Resizer)), false), __read(this.createDndHelpers("r_rotateH" /* RotateHandle */, Rotator_1.Rotator)), false), __read(this.createDndHelpers("r_cropH" /* CropHandle */, Cropper_1.Cropper)), false), __read(this.createDndHelpers("r_cropC" /* CropContainer */, Cropper_1.Cropper)), false);
             this.editor.select(this.image);
         }
     };
@@ -24981,7 +25299,9 @@ function handleRadIndexCalculator(angleRad) {
     var idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
     return idx < 0 ? idx + DIRECTIONS : idx;
 }
-function rotateHandles(y, x, angleRad) {
+function rotateHandles(angleRad, y, x) {
+    if (y === void 0) { y = ''; }
+    if (x === void 0) { x = ''; }
     var radIndex = handleRadIndexCalculator(angleRad);
     var originalDirection = y + x;
     var originalIndex = DirectionOrder.indexOf(originalDirection);
@@ -24997,9 +25317,7 @@ function updateHandleCursor(handles, angleRad) {
     handles.map(function (handle) {
         var y = handle.dataset.y;
         var x = handle.dataset.x;
-        if (y && x) {
-            handle.style.cursor = rotateHandles(y, x, angleRad) + "-resize";
-        }
+        handle.style.cursor = rotateHandles(angleRad, y, x) + "-resize";
     });
 }
 /**
@@ -25291,6 +25609,22 @@ exports.default = applyChange;
 
 "use strict";
 
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -25309,8 +25643,8 @@ var CROP_KEYS = [
     'topPercent',
     'bottomPercent',
 ];
-var ROTATE_CROP_KEYS = __spreadArray(__spreadArray([], ROTATE_KEYS, true), CROP_KEYS, true);
-var ALL_KEYS = __spreadArray(__spreadArray([], ROTATE_CROP_KEYS, true), RESIZE_KEYS, true);
+var ROTATE_CROP_KEYS = __spreadArray(__spreadArray([], __read(ROTATE_KEYS), false), __read(CROP_KEYS), false);
+var ALL_KEYS = __spreadArray(__spreadArray([], __read(ROTATE_CROP_KEYS), false), __read(RESIZE_KEYS), false);
 /**
  * @internal
  * Check the state of an edit info
@@ -25562,6 +25896,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCropHTML = exports.Cropper = void 0;
 var Resizer_1 = __webpack_require__(/*! ./Resizer */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Resizer.ts");
@@ -25587,7 +25937,7 @@ exports.Cropper = {
     onDragging: function (_a, e, base, dx, dy) {
         var _b;
         var editInfo = _a.editInfo, x = _a.x, y = _a.y, options = _a.options;
-        _b = (0, Resizer_1.rotateCoordinate)(dx, dy, editInfo.angleRad), dx = _b[0], dy = _b[1];
+        _b = __read((0, Resizer_1.rotateCoordinate)(dx, dy, editInfo.angleRad), 2), dx = _b[0], dy = _b[1];
         var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, bottomPercent = editInfo.bottomPercent;
         var minWidth = options.minWidth, minHeight = options.minHeight;
         var widthPercent = 1 - leftPercent - rightPercent;
@@ -25706,6 +26056,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getResizeBordersHTML = exports.getSideResizeHTML = exports.getCornerResizeHTML = exports.doubleCheckResize = exports.rotateCoordinate = exports.Resizer = void 0;
 var RESIZE_HANDLE_SIZE = 10;
@@ -25725,7 +26091,7 @@ exports.Resizer = {
         var _b;
         var x = _a.x, y = _a.y, editInfo = _a.editInfo, options = _a.options;
         var ratio = base.widthPx > 0 && base.heightPx > 0 ? (base.widthPx * 1.0) / base.heightPx : 0;
-        _b = rotateCoordinate(deltaX, deltaY, editInfo.angleRad), deltaX = _b[0], deltaY = _b[1];
+        _b = __read(rotateCoordinate(deltaX, deltaY, editInfo.angleRad), 2), deltaX = _b[0], deltaY = _b[1];
         if (options.minWidth !== undefined && options.minHeight !== undefined) {
             var horizontalOnly = x == '';
             var verticalOnly = y == '';
@@ -26238,14 +26604,17 @@ var Paste = /** @class */ (function () {
                     break;
                 case 1 /* ExcelDesktop */:
                 case 2 /* ExcelOnline */:
-                    // Handle HTML copied from Excel
-                    (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
+                    if (event.pasteType === 0 /* Normal */ ||
+                        event.pasteType === 2 /* MergeFormat */) {
+                        // Handle HTML copied from Excel
+                        (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
+                    }
                     break;
                 case 3 /* PowerPointDesktop */:
                     (0, convertPastedContentFromPowerPoint_1.default)(event, trustedHTMLHandler);
                     break;
                 case 5 /* WacComponents */:
-                    (0, convertPastedContentFromOfficeOnline_1.default)(fragment);
+                    (0, convertPastedContentFromOfficeOnline_1.default)(fragment, sanitizingOption);
                     break;
                 case 4 /* GoogleSheets */:
                     sanitizingOption.additionalTagReplacements[GOOGLE_SHEET_NODE_NAME] = '*';
@@ -26574,6 +26943,7 @@ exports.createListItemBlock = createListItemBlock;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var convertPastedContentFromWordOnline_1 = __webpack_require__(/*! ./convertPastedContentFromWordOnline */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts");
 var WAC_IDENTIFY_SELECTOR = 'ul[class^="BulletListStyle"]>.OutlineElement,ol[class^="NumberListStyle"]>.OutlineElement,span.WACImageContainer';
 /**
@@ -26583,7 +26953,7 @@ var WAC_IDENTIFY_SELECTOR = 'ul[class^="BulletListStyle"]>.OutlineElement,ol[cla
  * We need to remove the display property and margin from all the list item
  * @param event The BeforePaste event
  */
-function convertPastedContentFromOfficeOnline(fragment) {
+function convertPastedContentFromOfficeOnline(fragment, sanitizingOption) {
     fragment.querySelectorAll(WAC_IDENTIFY_SELECTOR).forEach(function (el) {
         var element = el;
         element.style.removeProperty('display');
@@ -26594,6 +26964,10 @@ function convertPastedContentFromOfficeOnline(fragment) {
     if ((0, convertPastedContentFromWordOnline_1.isWordOnlineWithList)(fragment)) {
         (0, convertPastedContentFromWordOnline_1.default)(fragment);
     }
+    // Remove "border:none" for image to fix image resize behavior
+    // We found a problem that when paste an image with "border:none" then the resize border will be
+    // displayed incorrectly when resize it. So we need to drop this style
+    (0, roosterjs_editor_dom_1.chainSanitizerCallback)(sanitizingOption.cssStyleCallbacks, 'border', function (value, element) { return element.tagName != 'IMG' || value != 'none'; });
 }
 exports.default = convertPastedContentFromOfficeOnline;
 
@@ -27054,9 +27428,7 @@ exports.default = sanitizeHtmlColorsFromPastedContent;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var HTTP = 'http:';
-var HTTPS = 'https:';
-var NOTES = 'notes:';
+var SUPPORTED_PROTOCOLS = ['http:', 'https:', 'notes:', 'mailto:', 'onenote:'];
 /**
  * @internal
  * Clear local paths and remove link
@@ -27074,10 +27446,8 @@ function validateLink(link, htmlElement) {
     catch (_a) {
         url = undefined;
     }
-    if (url &&
-        (url.protocol === HTTP ||
-            url.protocol === HTTPS ||
-            url.protocol === NOTES) /* whitelist Notes protocol */) {
+    /* whitelist supported protocols */
+    if (url && SUPPORTED_PROTOCOLS.indexOf(url.protocol) > -1) {
         return link;
     }
     htmlElement.removeAttribute('href');
@@ -27968,8 +28338,15 @@ var PickerPlugin = /** @class */ (function () {
     function PickerPlugin(dataProvider, pickerOptions) {
         this.dataProvider = dataProvider;
         this.pickerOptions = pickerOptions;
+        this.editor = null;
+        this.eventHandledOnKeyDown = false;
+        this.blockSuggestions = false;
+        this.isSuggesting = false;
+        this.lastKnownRange = null;
         // For detecting backspace in Android
         this.isPendingInputEventHandling = false;
+        this.currentInputLength = 0;
+        this.newInputLength = 0;
     }
     /**
      * Get a friendly name
@@ -27985,24 +28362,27 @@ var PickerPlugin = /** @class */ (function () {
         var _this = this;
         this.editor = editor;
         this.dataProvider.onInitalize(function (htmlNode) {
-            _this.editor.focus();
-            var wordToReplace = _this.getWord(null);
-            // Safari drops our focus out so we get an empty word to replace when we call getWord.
-            // We fall back to using the lastKnownRange to try to get around this.
-            if ((!wordToReplace || wordToReplace.length == 0) && _this.lastKnownRange) {
-                _this.editor.select(_this.lastKnownRange);
-                wordToReplace = _this.getWord(null);
-            }
-            var insertNode = function () {
-                if (wordToReplace) {
-                    (0, roosterjs_editor_api_1.replaceWithNode)(_this.editor, wordToReplace, htmlNode, true /* exactMatch */);
-                }
-                else {
-                    _this.editor.insertNode(htmlNode);
+            if (_this.editor) {
+                _this.editor.focus();
+                var wordToReplace_1 = _this.getWord(null);
+                // Safari drops our focus out so we get an empty word to replace when we call getWord.
+                // We fall back to using the lastKnownRange to try to get around this.
+                if ((!wordToReplace_1 || wordToReplace_1.length == 0) && _this.lastKnownRange) {
+                    _this.editor.select(_this.lastKnownRange);
+                    wordToReplace_1 = _this.getWord(null);
                 }
-                _this.setIsSuggesting(false);
-            };
-            _this.editor.addUndoSnapshot(insertNode, _this.pickerOptions.changeSource, _this.pickerOptions.handleAutoComplete);
+                var insertNode = function () {
+                    var _a;
+                    if (wordToReplace_1 && _this.editor) {
+                        (0, roosterjs_editor_api_1.replaceWithNode)(_this.editor, wordToReplace_1, htmlNode, true /* exactMatch */);
+                    }
+                    else {
+                        (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.insertNode(htmlNode);
+                    }
+                    _this.setIsSuggesting(false);
+                };
+                _this.editor.addUndoSnapshot(insertNode, _this.pickerOptions.changeSource, _this.pickerOptions.handleAutoComplete);
+            }
         }, function (isSuggesting) {
             _this.setIsSuggesting(isSuggesting);
         }, editor);
@@ -28012,13 +28392,13 @@ var PickerPlugin = /** @class */ (function () {
      */
     PickerPlugin.prototype.dispose = function () {
         this.editor = null;
-        this.isSuggesting = null;
-        this.blockSuggestions = null;
-        this.eventHandledOnKeyDown = null;
+        this.isSuggesting = false;
+        this.blockSuggestions = false;
+        this.eventHandledOnKeyDown = false;
         this.lastKnownRange = null;
-        this.isPendingInputEventHandling = null;
-        this.currentInputLength = null;
-        this.newInputLength = null;
+        this.isPendingInputEventHandling = false;
+        this.currentInputLength = 0;
+        this.newInputLength = 0;
         this.dataProvider.onDispose();
     };
     /**
@@ -28040,6 +28420,7 @@ var PickerPlugin = /** @class */ (function () {
      * @param event PluginEvent object
      */
     PickerPlugin.prototype.onPluginEvent = function (event) {
+        var _a;
         switch (event.eventType) {
             case 7 /* ContentChanged */:
                 if (event.source == "SetContent" /* SetContent */ && this.dataProvider.onContentChanged) {
@@ -28050,7 +28431,7 @@ var PickerPlugin = /** @class */ (function () {
                     // Undo and other major changes to document content fire this type of event.
                     // Inform the data provider of the current picker placed elements in the body.
                     var elementIds_1 = [];
-                    this.editor.queryElements("[id^='" + this.pickerOptions.elementIdPrefix + "']", function (element) {
+                    (_a = this.editor) === null || _a === void 0 ? void 0 : _a.queryElements("[id^='" + this.pickerOptions.elementIdPrefix + "']", function (element) {
                         if (element.id) {
                             elementIds_1.push(element.id);
                         }
@@ -28115,29 +28496,35 @@ var PickerPlugin = /** @class */ (function () {
         event.rawEvent.stopImmediatePropagation();
     };
     PickerPlugin.prototype.getIdValue = function (node) {
-        var element = node;
-        return element.attributes && element.attributes.getNamedItem('id')
-            ? element.attributes.getNamedItem('id').value
-            : null;
+        if ((0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLElement')) {
+            var attribute = node.attributes.getNamedItem('id');
+            return attribute ? attribute.value : null;
+        }
+        else {
+            return null;
+        }
     };
     PickerPlugin.prototype.getWordBeforeCursor = function (event) {
-        var searcher = this.editor.getContentSearcherOfCursor(event);
+        var _a;
+        var searcher = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor(event);
         return searcher ? searcher.getWordBefore() : null;
     };
     PickerPlugin.prototype.replaceNode = function (currentNode, replacementNode) {
+        var _a, _b;
         if (currentNode) {
-            this.editor.deleteNode(currentNode);
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.deleteNode(currentNode);
         }
         if (replacementNode) {
-            this.editor.insertNode(replacementNode);
+            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.insertNode(replacementNode);
         }
     };
     PickerPlugin.prototype.getRangeUntilAt = function (event) {
         var _this = this;
-        var positionContentSearcher = this.editor.getContentSearcherOfCursor(event);
-        var startPos;
-        var endPos;
-        positionContentSearcher.forEachTextInlineElement(function (textInline) {
+        var _a, _b, _c;
+        var positionContentSearcher = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor(event);
+        var startPos = undefined;
+        var endPos = undefined;
+        positionContentSearcher === null || positionContentSearcher === void 0 ? void 0 : positionContentSearcher.forEachTextInlineElement(function (textInline) {
             var hasMatched = false;
             var nodeContent = textInline.getTextContent();
             var nodeIndex = nodeContent ? nodeContent.length : -1;
@@ -28154,7 +28541,9 @@ var PickerPlugin = /** @class */ (function () {
             }
             return hasMatched;
         });
-        return (0, roosterjs_editor_dom_1.createRange)(startPos, endPos) || this.editor.getDocument().createRange();
+        return startPos
+            ? (0, roosterjs_editor_dom_1.createRange)(startPos, endPos)
+            : (_c = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.getDocument().createRange()) !== null && _c !== void 0 ? _c : null;
     };
     PickerPlugin.prototype.shouldHandleKeyUpEvent = function (event) {
         // onKeyUpDomEvent should only be called when a key that produces a character value is pressed
@@ -28165,78 +28554,89 @@ var PickerPlugin = /** @class */ (function () {
             (this.isSuggesting && !(0, roosterjs_editor_dom_1.isModifierKey)(event.rawEvent)));
     };
     PickerPlugin.prototype.onKeyUpDomEvent = function (event) {
-        if (this.isSuggesting) {
-            // Word before cursor represents the text prior to the cursor, up to and including the trigger symbol.
-            var wordBeforeCursor = this.getWord(event);
-            var wordBeforeCursorWithoutTriggerChar = wordBeforeCursor.substring(1);
-            var trimmedWordBeforeCursor = wordBeforeCursorWithoutTriggerChar.trim();
-            // If we hit a case where wordBeforeCursor is just the trigger character,
-            // that means we've gotten a onKeyUp event right after it's been typed.
-            // Otherwise, update the query string when:
-            // 1. There's an actual value
-            // 2. That actual value isn't just pure whitespace
-            // 3. That actual value isn't more than 4 words long (at which point we assume the person kept typing)
-            // Otherwise, we want to dismiss the picker plugin's UX.
-            if (wordBeforeCursor == this.pickerOptions.triggerCharacter ||
-                (trimmedWordBeforeCursor &&
-                    trimmedWordBeforeCursor.length > 0 &&
-                    trimmedWordBeforeCursor.split(' ').length <= 4)) {
-                this.dataProvider.queryStringUpdated(trimmedWordBeforeCursor, wordBeforeCursorWithoutTriggerChar == trimmedWordBeforeCursor);
-                this.setLastKnownRange(this.editor.getSelectionRange());
-            }
-            else {
-                this.setIsSuggesting(false);
-            }
-        }
-        else {
-            var wordBeforeCursor = this.getWordBeforeCursor(event);
-            if (!this.blockSuggestions) {
-                if (wordBeforeCursor != null &&
-                    wordBeforeCursor.split(' ').length <= 4 &&
-                    wordBeforeCursor[0] == this.pickerOptions.triggerCharacter) {
-                    this.setIsSuggesting(true);
+        var _a, _b, _c, _d, _e;
+        if (this.editor) {
+            if (this.isSuggesting) {
+                // Word before cursor represents the text prior to the cursor, up to and including the trigger symbol.
+                var wordBeforeCursor = this.getWord(event);
+                if (wordBeforeCursor !== null) {
                     var wordBeforeCursorWithoutTriggerChar = wordBeforeCursor.substring(1);
                     var trimmedWordBeforeCursor = wordBeforeCursorWithoutTriggerChar.trim();
-                    this.dataProvider.queryStringUpdated(trimmedWordBeforeCursor, wordBeforeCursorWithoutTriggerChar == trimmedWordBeforeCursor);
-                    this.setLastKnownRange(this.editor.getSelectionRange());
-                    if (this.dataProvider.setCursorPoint) {
-                        // Determine the bounding rectangle for the @mention
-                        var searcher = this.editor.getContentSearcherOfCursor(event);
-                        var rangeNode = this.editor.getDocument().createRange();
-                        var nodeBeforeCursor = searcher.getInlineElementBefore().getContainerNode();
-                        var rangeStartSuccessfullySet = this.setRangeStart(rangeNode, nodeBeforeCursor, wordBeforeCursor);
-                        if (!rangeStartSuccessfullySet) {
-                            // VSO 24891: Out of range error is occurring because nodeBeforeCursor
-                            // is not including the trigger character. In this case, the node before
-                            // the node before cursor is the trigger character, and this is where the range should start.
-                            var nodeBeforeNodeBeforeCursor = nodeBeforeCursor.previousSibling;
-                            this.setRangeStart(rangeNode, nodeBeforeNodeBeforeCursor, this.pickerOptions.triggerCharacter);
-                        }
-                        var rect = rangeNode.getBoundingClientRect();
-                        // Safari's support for range.getBoundingClientRect is incomplete.
-                        // We perform this check to fall back to getClientRects in case it's at the page origin.
-                        if (rect.left == 0 && rect.bottom == 0 && rect.top == 0) {
-                            rect = rangeNode.getClientRects()[0];
-                        }
-                        if (rect) {
-                            rangeNode.detach();
-                            // Display the @mention popup in the correct place
-                            var targetPoint = { x: rect.left, y: (rect.bottom + rect.top) / 2 };
-                            var bufferZone = (rect.bottom - rect.top) / 2;
-                            this.dataProvider.setCursorPoint(targetPoint, bufferZone);
-                        }
+                    // If we hit a case where wordBeforeCursor is just the trigger character,
+                    // that means we've gotten a onKeyUp event right after it's been typed.
+                    // Otherwise, update the query string when:
+                    // 1. There's an actual value
+                    // 2. That actual value isn't just pure whitespace
+                    // 3. That actual value isn't more than 4 words long (at which point we assume the person kept typing)
+                    // Otherwise, we want to dismiss the picker plugin's UX.
+                    if (wordBeforeCursor == this.pickerOptions.triggerCharacter ||
+                        (trimmedWordBeforeCursor &&
+                            trimmedWordBeforeCursor.length > 0 &&
+                            trimmedWordBeforeCursor.split(' ').length <= 4)) {
+                        this.dataProvider.queryStringUpdated(trimmedWordBeforeCursor, wordBeforeCursorWithoutTriggerChar == trimmedWordBeforeCursor);
+                        this.setLastKnownRange((_a = this.editor.getSelectionRange()) !== null && _a !== void 0 ? _a : null);
+                    }
+                    else {
+                        this.setIsSuggesting(false);
                     }
                 }
             }
             else {
-                if (wordBeforeCursor != null &&
-                    wordBeforeCursor[0] != this.pickerOptions.triggerCharacter) {
-                    this.blockSuggestions = false;
+                var wordBeforeCursor = this.getWordBeforeCursor(event);
+                if (!this.blockSuggestions) {
+                    if (wordBeforeCursor != null &&
+                        wordBeforeCursor.split(' ').length <= 4 &&
+                        wordBeforeCursor[0] == this.pickerOptions.triggerCharacter) {
+                        this.setIsSuggesting(true);
+                        var wordBeforeCursorWithoutTriggerChar = wordBeforeCursor.substring(1);
+                        var trimmedWordBeforeCursor = wordBeforeCursorWithoutTriggerChar.trim();
+                        this.dataProvider.queryStringUpdated(trimmedWordBeforeCursor, wordBeforeCursorWithoutTriggerChar == trimmedWordBeforeCursor);
+                        this.setLastKnownRange((_b = this.editor.getSelectionRange()) !== null && _b !== void 0 ? _b : null);
+                        if (this.dataProvider.setCursorPoint) {
+                            // Determine the bounding rectangle for the @mention
+                            var searcher = this.editor.getContentSearcherOfCursor(event);
+                            var rangeNode = this.editor.getDocument().createRange();
+                            if (rangeNode) {
+                                var nodeBeforeCursor = (_d = (_c = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore()) === null || _c === void 0 ? void 0 : _c.getContainerNode()) !== null && _d !== void 0 ? _d : null;
+                                var rangeStartSuccessfullySet = this.setRangeStart(rangeNode, nodeBeforeCursor, wordBeforeCursor);
+                                if (!rangeStartSuccessfullySet) {
+                                    // VSO 24891: Out of range error is occurring because nodeBeforeCursor
+                                    // is not including the trigger character. In this case, the node before
+                                    // the node before cursor is the trigger character, and this is where the range should start.
+                                    var nodeBeforeNodeBeforeCursor = (_e = nodeBeforeCursor === null || nodeBeforeCursor === void 0 ? void 0 : nodeBeforeCursor.previousSibling) !== null && _e !== void 0 ? _e : null;
+                                    this.setRangeStart(rangeNode, nodeBeforeNodeBeforeCursor, this.pickerOptions.triggerCharacter);
+                                }
+                                var rect = rangeNode.getBoundingClientRect();
+                                // Safari's support for range.getBoundingClientRect is incomplete.
+                                // We perform this check to fall back to getClientRects in case it's at the page origin.
+                                if (rect.left == 0 && rect.bottom == 0 && rect.top == 0) {
+                                    rect = rangeNode.getClientRects()[0];
+                                }
+                                if (rect) {
+                                    rangeNode.detach();
+                                    // Display the @mention popup in the correct place
+                                    var targetPoint = {
+                                        x: rect.left,
+                                        y: (rect.bottom + rect.top) / 2,
+                                    };
+                                    var bufferZone = (rect.bottom - rect.top) / 2;
+                                    this.dataProvider.setCursorPoint(targetPoint, bufferZone);
+                                }
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (wordBeforeCursor != null &&
+                        wordBeforeCursor[0] != this.pickerOptions.triggerCharacter) {
+                        this.blockSuggestions = false;
+                    }
                 }
             }
         }
     };
     PickerPlugin.prototype.onKeyDownEvent = function (event) {
+        var _a, _b;
         var keyboardEvent = event.rawEvent;
         if (this.isSuggesting) {
             if (keyboardEvent.key == ESC_CHAR_CODE) {
@@ -28283,15 +28683,19 @@ var PickerPlugin = /** @class */ (function () {
                 }
             }
             else if (keyboardEvent.key == DELETE_CHAR_CODE) {
-                var searcher = this.editor.getContentSearcherOfCursor(event);
-                var nodeAfterCursor = searcher.getInlineElementAfter()
-                    ? searcher.getInlineElementAfter().getContainerNode()
-                    : null;
-                var nodeId = nodeAfterCursor ? this.getIdValue(nodeAfterCursor) : null;
-                if (nodeId && nodeId.indexOf(this.pickerOptions.elementIdPrefix) == 0) {
-                    var replacementNode = this.dataProvider.onRemove(nodeAfterCursor, false);
-                    this.replaceNode(nodeAfterCursor, replacementNode);
-                    this.cancelDefaultKeyDownEvent(event);
+                var searcher = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor(event);
+                if (searcher) {
+                    var nodeAfterCursor = searcher.getInlineElementAfter()
+                        ? (_b = searcher.getInlineElementAfter()) === null || _b === void 0 ? void 0 : _b.getContainerNode()
+                        : null;
+                    var nodeId = nodeAfterCursor ? this.getIdValue(nodeAfterCursor) : null;
+                    if (nodeId &&
+                        nodeId.indexOf(this.pickerOptions.elementIdPrefix) == 0 &&
+                        nodeAfterCursor) {
+                        var replacementNode = this.dataProvider.onRemove(nodeAfterCursor, false);
+                        this.replaceNode(nodeAfterCursor, replacementNode);
+                        this.cancelDefaultKeyDownEvent(event);
+                    }
                 }
             }
         }
@@ -28311,14 +28715,21 @@ var PickerPlugin = /** @class */ (function () {
         return wordBeforeCursor ? wordBeforeCursor.length : 0;
     };
     PickerPlugin.prototype.tryRemoveNode = function (event) {
+        if (!this.editor) {
+            return false;
+        }
         var searcher = this.editor.getContentSearcherOfCursor(event);
+        if (!searcher) {
+            return false;
+        }
         var inlineElementBefore = searcher.getInlineElementBefore();
         var nodeBeforeCursor = inlineElementBefore
             ? inlineElementBefore.getContainerNode()
             : null;
         var nodeId = nodeBeforeCursor ? this.getIdValue(nodeBeforeCursor) : null;
         var inlineElementAfter = searcher.getInlineElementAfter();
-        if (nodeId &&
+        if (nodeBeforeCursor &&
+            nodeId &&
             nodeId.indexOf(this.pickerOptions.elementIdPrefix) == 0 &&
             (inlineElementAfter == null || !(inlineElementAfter instanceof roosterjs_editor_dom_1.PartialInlineElement))) {
             var replacementNode_1 = this.dataProvider.onRemove(nodeBeforeCursor, true);
@@ -28332,16 +28743,19 @@ var PickerPlugin = /** @class */ (function () {
                 else {
                     this.editor.select(replacementNode_1, -3 /* After */);
                 }
+                return true;
             }
             else {
-                this.editor.deleteNode(nodeBeforeCursor);
+                // Select the node then let browser delete it
+                this.editor.select(nodeBeforeCursor);
+                return false;
             }
-            return true;
         }
         return false;
     };
     PickerPlugin.prototype.getWord = function (event) {
-        var wordFromRange = this.getRangeUntilAt(event).toString();
+        var _a, _b;
+        var wordFromRange = (_b = (_a = this.getRangeUntilAt(event)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
         var wordFromCache = this.getWordBeforeCursor(event);
         // VSO 24891: In picker, trigger and mention are separated into two nodes.
         // In this case, wordFromRange is the trigger character while wordFromCache is the whole string,
@@ -28353,25 +28767,28 @@ var PickerPlugin = /** @class */ (function () {
         return wordFromRange;
     };
     PickerPlugin.prototype.setRangeStart = function (rangeNode, node, target) {
-        var nodeOffset = node ? node.textContent.lastIndexOf(target) : -1;
-        if (nodeOffset > -1) {
+        var nodeOffset = (node === null || node === void 0 ? void 0 : node.textContent) ? node.textContent.lastIndexOf(target) : -1;
+        if (node && nodeOffset > -1) {
             rangeNode.setStart(node, nodeOffset);
             return true;
         }
         return false;
     };
     PickerPlugin.prototype.setAriaOwns = function (isSuggesting) {
-        this.editor.setEditorDomAttribute('aria-owns', isSuggesting && this.pickerOptions.suggestionsLabel
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorDomAttribute('aria-owns', isSuggesting && this.pickerOptions.suggestionsLabel
             ? this.pickerOptions.suggestionsLabel
             : null);
     };
     PickerPlugin.prototype.setAriaActiveDescendant = function (selectedIndex) {
-        this.editor.setEditorDomAttribute('aria-activedescendant', selectedIndex != null && this.pickerOptions.suggestionLabelPrefix
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorDomAttribute('aria-activedescendant', selectedIndex != null && this.pickerOptions.suggestionLabelPrefix
             ? this.pickerOptions.suggestionLabelPrefix + selectedIndex.toString()
             : null);
     };
     PickerPlugin.prototype.getInlineElementBeforeCursor = function (event) {
-        var searcher = this.editor.getContentSearcherOfCursor(event);
+        var _a;
+        var searcher = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getContentSearcherOfCursor(event);
         var element = searcher ? searcher.getInlineElementBefore() : null;
         return element ? element.getTextContent() : null;
     };
@@ -30941,6 +31358,7 @@ var CompatibleContentType;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompatibleDarkModeDatasetNames = void 0;
 /**
+ * @deprecated
  * Constants string for dataset names used by dark mode
  */
 var CompatibleDarkModeDatasetNames;
@@ -31558,15 +31976,31 @@ var CompatibleExperimentalFeatures;
      * When a html image is selected, the selected image data will be stored by editor core.
      */
     CompatibleExperimentalFeatures["ImageSelection"] = "ImageSelection";
-    //#endregion
     /**
-     * Provide additional Tab Key Features. Requires Text Features Content Editable Features
+     * @deprecated this feature is always enabled
+     * Use variable-based dark mode solution rather than dataset-based solution.
+     * When enable this feature, need to pass in a DarkModelHandler object to each call of setColor and applyFormat
+     * if you need them work for dark mode
      */
-    CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
+    CompatibleExperimentalFeatures["VariableBasedDarkColor"] = "VariableBasedDarkColor";
     /**
+     * @deprecated this feature is always enabled
      * Align list elements elements to left, center and right using setAlignment API
      */
     CompatibleExperimentalFeatures["ListItemAlignment"] = "ListItemAlignment";
+    /**
+     * @deprecated
+     */
+    CompatibleExperimentalFeatures["DefaultFormatInSpan"] = "DefaultFormatInSpan";
+    /**
+     * @deprecated
+     */
+    CompatibleExperimentalFeatures["DefaultFormatOnContainer"] = "DefaultFormatOnContainer";
+    //#endregion
+    /**
+     * Provide additional Tab Key Features. Requires Text Features Content Editable Features
+     */
+    CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
     /**
      * Trigger formatting by a especial characters. Ex: (A), 1. i).
      */
@@ -31578,25 +32012,14 @@ var CompatibleExperimentalFeatures;
      * is the one closest to the item.
      */
     CompatibleExperimentalFeatures["ReuseAllAncestorListElements"] = "ReuseAllAncestorListElements";
-    /**
-     * When apply default format when initialize or user type, apply the format on a SPAN element rather than
-     * the block element (In most case, the DIV element) so keep the block element clean.
-     */
-    CompatibleExperimentalFeatures["DefaultFormatInSpan"] = "DefaultFormatInSpan";
-    /**
-     * Use variable-based dark mode solution rather than dataset-based solution.
-     * When enable this feature, need to pass in a DarkModelHandler object to each call of setColor and applyFormat
-     * if you need them work for dark mode
-     */
-    CompatibleExperimentalFeatures["VariableBasedDarkColor"] = "VariableBasedDarkColor";
     /**
      * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
      */
     CompatibleExperimentalFeatures["ReusableContentModel"] = "ReusableContentModel";
     /**
-     * Apply default format on editor container
+     * Handle keyboard editing event with Content Model
      */
-    CompatibleExperimentalFeatures["DefaultFormatOnContainer"] = "DefaultFormatOnContainer";
+    CompatibleExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
     /**
      * Delete table with Backspace key with the whole was selected with table selector
      */
@@ -31907,7 +32330,7 @@ var CompatibleKnownCreateElementDataIndex;
      */
     CompatibleKnownCreateElementDataIndex[CompatibleKnownCreateElementDataIndex["TableSelector"] = 11] = "TableSelector";
     /**
-     * An empty line without format with span inside of it.
+     * @deprecated
      */
     CompatibleKnownCreateElementDataIndex[CompatibleKnownCreateElementDataIndex["EmptyLineFormatInSpan"] = 12] = "EmptyLineFormatInSpan";
 })(CompatibleKnownCreateElementDataIndex = exports.CompatibleKnownCreateElementDataIndex || (exports.CompatibleKnownCreateElementDataIndex = {}));
@@ -32142,6 +32565,43 @@ var CompatibleNumberingListType;
 })(CompatibleNumberingListType = exports.CompatibleNumberingListType || (exports.CompatibleNumberingListType = {}));
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/PasteType.ts":
+/*!*************************************************************************!*\
+  !*** ./packages/roosterjs-editor-types/lib/compatibleEnum/PasteType.ts ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompatiblePasteType = void 0;
+/**
+ * Enum for paste options
+ */
+var CompatiblePasteType;
+(function (CompatiblePasteType) {
+    /**
+     * Default paste behavior
+     */
+    CompatiblePasteType[CompatiblePasteType["Normal"] = 0] = "Normal";
+    /**
+     * Paste only the plain text
+     */
+    CompatiblePasteType[CompatiblePasteType["AsPlainText"] = 1] = "AsPlainText";
+    /**
+     * Apply the current style to pasted content
+     */
+    CompatiblePasteType[CompatiblePasteType["MergeFormat"] = 2] = "MergeFormat";
+    /**
+     * If there is a image uri in the clipboard, paste the content as image element
+     */
+    CompatiblePasteType[CompatiblePasteType["AsImage"] = 3] = "AsImage";
+})(CompatiblePasteType = exports.CompatiblePasteType || (exports.CompatiblePasteType = {}));
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/PluginEventType.ts":
@@ -32257,6 +32717,12 @@ var CompatiblePluginEventType;
      * Editor changed the selection.
      */
     CompatiblePluginEventType[CompatiblePluginEventType["SelectionChanged"] = 22] = "SelectionChanged";
+    /**
+     * EXPERIMENTAL FEATURE
+     * Editor content is about to be changed by keyboard event.
+     * This is only used by Content Model editing
+     */
+    CompatiblePluginEventType[CompatiblePluginEventType["BeforeKeyboardEditing"] = 23] = "BeforeKeyboardEditing";
 })(CompatiblePluginEventType = exports.CompatiblePluginEventType || (exports.CompatiblePluginEventType = {}));
 
 
@@ -32603,7 +33069,7 @@ var CompatibleTableOperation;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompatibleTableOperation = exports.CompatibleTableBorderFormat = exports.CompatibleSelectionRangeTypes = exports.CompatibleRegionType = exports.CompatibleQueryScope = exports.CompatiblePositionType = exports.CompatiblePluginEventType = exports.CompatibleNumberingListType = exports.CompatibleNodeType = exports.CompatibleListType = exports.CompatibleKnownPasteSourceType = exports.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = exports.CompatibleDelimiterClasses = exports.CompatibleDefinitionType = exports.CompatibleDarkModeDatasetNames = exports.CompatibleContentType = exports.CompatibleContentTypePrefix = exports.CompatibleContentPosition = exports.CompatibleColorTransformDirection = exports.CompatibleClearFormatMode = exports.CompatibleChangeSource = exports.CompatibleCapitalization = exports.CompatibleBulletListType = exports.CompatibleAlignment = void 0;
+exports.CompatibleTableOperation = exports.CompatibleTableBorderFormat = exports.CompatibleSelectionRangeTypes = exports.CompatibleRegionType = exports.CompatibleQueryScope = exports.CompatiblePositionType = exports.CompatiblePluginEventType = exports.CompatiblePasteType = exports.CompatibleNumberingListType = exports.CompatibleNodeType = exports.CompatibleListType = exports.CompatibleKnownPasteSourceType = exports.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = exports.CompatibleDelimiterClasses = exports.CompatibleDefinitionType = exports.CompatibleDarkModeDatasetNames = exports.CompatibleContentType = exports.CompatibleContentTypePrefix = exports.CompatibleContentPosition = exports.CompatibleColorTransformDirection = exports.CompatibleClearFormatMode = exports.CompatibleChangeSource = exports.CompatibleCapitalization = exports.CompatibleBulletListType = exports.CompatibleAlignment = void 0;
 var Alignment_1 = __webpack_require__(/*! ./Alignment */ "./packages/roosterjs-editor-types/lib/compatibleEnum/Alignment.ts");
 Object.defineProperty(exports, "CompatibleAlignment", { enumerable: true, get: function () { return Alignment_1.CompatibleAlignment; } });
 var BulletListType_1 = __webpack_require__(/*! ./BulletListType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/BulletListType.ts");
@@ -32659,6 +33125,8 @@ var NodeType_1 = __webpack_require__(/*! ./NodeType */ "./packages/roosterjs-edi
 Object.defineProperty(exports, "CompatibleNodeType", { enumerable: true, get: function () { return NodeType_1.CompatibleNodeType; } });
 var NumberingListType_1 = __webpack_require__(/*! ./NumberingListType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/NumberingListType.ts");
 Object.defineProperty(exports, "CompatibleNumberingListType", { enumerable: true, get: function () { return NumberingListType_1.CompatibleNumberingListType; } });
+var PasteType_1 = __webpack_require__(/*! ./PasteType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PasteType.ts");
+Object.defineProperty(exports, "CompatiblePasteType", { enumerable: true, get: function () { return PasteType_1.CompatiblePasteType; } });
 var PluginEventType_1 = __webpack_require__(/*! ./PluginEventType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PluginEventType.ts");
 Object.defineProperty(exports, "CompatiblePluginEventType", { enumerable: true, get: function () { return PluginEventType_1.CompatiblePluginEventType; } });
 var PositionType_1 = __webpack_require__(/*! ./PositionType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PositionType.ts");