roosterjs 8.47.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.
@@ -2985,14 +3006,10 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
     if (isBlock) {
         // Insert an extra empty line for block entity to make sure
         // user can still put cursor below the entity.
-        var formatOnSpan = editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */);
-        var newLine = (0, roosterjs_editor_dom_1.createElement)(formatOnSpan
-            ? 12 /* EmptyLineFormatInSpan */
-            : 1 /* EmptyLine */, editor.getDocument());
+        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);
-        var formatNode = formatOnSpan ? newLine === null || newLine === void 0 ? void 0 : newLine.querySelector('span') : newLine;
-        if (formatNode) {
-            (0, roosterjs_editor_dom_1.applyFormat)(formatNode, {
+        if (newLine) {
+            (0, roosterjs_editor_dom_1.applyFormat)(newLine, {
                 backgroundColor: currentFormat.backgroundColor,
                 textColor: currentFormat.textColor,
                 bold: currentFormat.isBold,
@@ -3278,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) {
@@ -3477,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();
@@ -4499,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) {
@@ -5130,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'))) {
@@ -5151,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 */);
     }
@@ -7613,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
@@ -7656,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 */:
@@ -7693,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);
+                    }
             }
         }
     };
@@ -8356,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 */ &&
@@ -8394,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;
 }());
@@ -8562,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;
@@ -8799,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);
@@ -8896,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;
@@ -8932,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);
@@ -9236,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");
@@ -9350,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 {
@@ -9582,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;
@@ -9877,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
@@ -11637,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");
@@ -11647,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);
     }
@@ -11986,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");
@@ -12025,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]);
@@ -12519,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");
@@ -12622,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);
@@ -12830,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
@@ -12850,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));
         };
     }
 }
@@ -12869,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");
@@ -12876,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;
@@ -14290,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)) {
@@ -14486,7 +14650,7 @@ var VList = /** @class */ (function () {
                         topList.start = start;
                     }
                 }
-                if (item.getLevel() == 1) {
+                if (item.getLevel() == 1 && !item.isDummy()) {
                     start++;
                 }
             }
@@ -14684,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)))());
             }
         });
     };
@@ -14931,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)) {
@@ -15003,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
@@ -15415,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 = {
@@ -15440,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;
 }
@@ -15516,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 */);
@@ -16505,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;
@@ -16528,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; });
 }
@@ -16629,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);
             });
         }
@@ -16690,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) {
@@ -16715,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) {
@@ -19270,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");
@@ -19291,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);
@@ -19643,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");
@@ -19654,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 = [];
@@ -19662,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; }
             }
         }
     }
@@ -19738,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");
 /**
@@ -19772,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;
 }
@@ -20143,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
@@ -20206,18 +20496,28 @@ 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;
@@ -20842,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;
@@ -20869,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;
 }
@@ -21251,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");
 /**
@@ -21317,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 &&
@@ -21828,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");
@@ -22142,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 */);
                     }
@@ -23867,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,
@@ -23973,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;
@@ -23997,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;
 }
@@ -24389,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)) {
@@ -24708,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);
         }
     };
@@ -24883,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);
@@ -24899,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";
     });
 }
 /**
@@ -25193,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)) {
@@ -25211,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
@@ -25464,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");
@@ -25489,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;
@@ -25608,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;
@@ -25627,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 == '';
@@ -26150,7 +26614,7 @@ var Paste = /** @class */ (function () {
                     (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] = '*';
@@ -26479,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';
 /**
@@ -26488,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');
@@ -26499,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;
 
@@ -27869,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
@@ -27886,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);
@@ -27913,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();
     };
     /**
@@ -27941,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) {
@@ -27951,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);
                         }
@@ -28016,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;
@@ -28055,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
@@ -28066,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) {
@@ -28184,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);
+                    }
                 }
             }
         }
@@ -28212,6 +28715,9 @@ 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;
@@ -28248,7 +28754,8 @@ var PickerPlugin = /** @class */ (function () {
         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,
@@ -28260,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;
     };
@@ -31478,6 +31988,14 @@ var CompatibleExperimentalFeatures;
      * 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
@@ -31494,11 +32012,6 @@ 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";
     /**
      * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
      */
@@ -31507,10 +32020,6 @@ var CompatibleExperimentalFeatures;
      * Handle keyboard editing event with Content Model
      */
     CompatibleExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
-    /**
-     * Apply default format on editor container
-     */
-    CompatibleExperimentalFeatures["DefaultFormatOnContainer"] = "DefaultFormatOnContainer";
     /**
      * Delete table with Backspace key with the whole was selected with table selector
      */
@@ -31821,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 = {}));