roosterjs 8.44.2 → 8.45.1

package/dist/rooster.js

@@ -2214,6 +2214,9 @@ function changeCapitalization(editor, capitalization, language) {
         }
     }, 'changeCapitalization');
     function getCapitalizedText(originalText, language) {
+        if (originalText === null) {
+            return originalText;
+        }
         switch (capitalization) {
             case "lowercase" /* Lowercase */:
                 return originalText.toLocaleLowerCase(language);
@@ -2238,6 +2241,8 @@ function changeCapitalization(editor, capitalization, language) {
                 return originalText.toLocaleLowerCase(language).replace(regex, function (match) {
                     return match.toLocaleUpperCase(language);
                 });
+            default:
+                return originalText;
         }
     }
 }
@@ -2381,11 +2386,11 @@ var TAGS_TO_STOP_UNWRAP = ['TD', 'TH', 'TR', 'TABLE', 'TBODY', 'THEAD'];
  */
 function isMultiBlockSelection(editor) {
     var transverser = editor.getSelectionTraverser();
-    var blockElement = transverser.currentBlockElement;
+    var blockElement = transverser === null || transverser === void 0 ? void 0 : transverser.currentBlockElement;
     if (!blockElement) {
         return false;
     }
-    var nextBlockElement = transverser.getNextBlockElement();
+    var nextBlockElement = transverser === null || transverser === void 0 ? void 0 : transverser.getNextBlockElement();
     //At least two blocks are selected
     return !!nextBlockElement;
 }
@@ -2468,7 +2473,8 @@ function isNodeWholeBlock(node, editor) {
             }
             var isOnlySiblingWithContent_1 = true;
             (_a = currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.childNodes.forEach(function (node) {
-                if (node != currentNode && node.textContent.length) {
+                var _a;
+                if (node != currentNode && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.length)) {
                     isOnlySiblingWithContent_1 = false;
                 }
             });
@@ -2493,7 +2499,7 @@ function clearAutoDetectFormat(editor) {
     var isMultiBlock = isMultiBlockSelection(editor);
     if (!isMultiBlock) {
         var transverser = editor.getSelectionTraverser();
-        var inlineElement = transverser.currentInlineElement;
+        var inlineElement = transverser === null || transverser === void 0 ? void 0 : transverser.currentInlineElement;
         var isPartial = inlineElement instanceof roosterjs_editor_dom_1.PartialInlineElement ||
             (inlineElement instanceof roosterjs_editor_dom_1.NodeInlineElement &&
                 !isNodeWholeBlock(inlineElement.getContainerNode(), editor));
@@ -2523,8 +2529,11 @@ function clearBlockFormat(editor) {
                     (0, roosterjs_editor_dom_1.setStyles)(wrapper, nonborderStyles);
                 }
             }
-            while (nodes.length > 0 && (0, roosterjs_editor_dom_1.isNodeInRegion)(region, nodes[0].parentNode)) {
-                nodes = [(0, roosterjs_editor_dom_1.splitBalancedNodeRange)(nodes)];
+            while (nodes.length > 0 &&
+                nodes[0].parentNode &&
+                (0, roosterjs_editor_dom_1.isNodeInRegion)(region, nodes[0].parentNode)) {
+                var balancedNodes = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(nodes);
+                nodes = balancedNodes ? [balancedNodes] : [];
             }
             nodes.forEach(clearNodeFormat);
         });
@@ -2576,7 +2585,7 @@ function setDefaultFormat(editor) {
             var setColorIgnoredElements_1 = editor.queryElements('a *, a', 1 /* OnSelection */);
             var shouldApplyInlineStyle = setColorIgnoredElements_1.length > 0
                 ? function (element) { return setColorIgnoredElements_1.indexOf(element) == -1; }
-                : null;
+                : undefined;
             if (defaultFormat.textColors) {
                 (0, setTextColor_1.default)(editor, defaultFormat.textColors, shouldApplyInlineStyle);
             }
@@ -2733,12 +2742,12 @@ function createLink(editor, link, altText, displayText, target) {
                         .getDocument()
                         .execCommand("createLink" /* CreateLink */, false, normalizedUrl_1);
                     var traverser = editor.getSelectionTraverser();
-                    var currentInline = traverser.getNextInlineElement();
+                    var currentInline = traverser === null || traverser === void 0 ? void 0 : traverser.getNextInlineElement();
                     // list for removing unwanted lines
                     var deletionInlineList = [];
                     while (currentInline) {
                         deletionInlineList.push(currentInline.getContainerNode());
-                        currentInline = traverser.getNextInlineElement();
+                        currentInline = traverser === null || traverser === void 0 ? void 0 : traverser.getNextInlineElement();
                     }
                     deletionInlineList.forEach(function (node) { return editor.deleteNode(node); });
                     anchor = getAnchorNodeAtCursor(editor);
@@ -2821,7 +2830,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @returns An ElementBasedFormatState object
  */
 function getElementBasedFormatState(editor, event) {
-    var listTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('OL,UL', null /*startFrom*/, event));
+    var listTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('OL,UL', undefined /*startFrom*/, event));
     // Check if selection is multiline, spans more than one block
     var range = editor.getSelectionRange();
     var multiline = false;
@@ -2830,7 +2839,7 @@ function getElementBasedFormatState(editor, event) {
         var endingBlock = editor.getBlockElementAtNode(range.endContainer);
         multiline = endingBlock && startingBlock ? !endingBlock.equals(startingBlock) : false;
     }
-    var headerTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('H1,H2,H3,H4,H5,H6', null /*startFrom*/, event));
+    var headerTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('H1,H2,H3,H4,H5,H6', undefined /*startFrom*/, event));
     var table = editor.queryElements('table', 1 /* OnSelection */)[0];
     var tableFormat = table ? (0, roosterjs_editor_dom_1.getTableFormatInfo)(table) : undefined;
     var hasHeader = (table === null || table === void 0 ? void 0 : table.rows[0])
@@ -2847,7 +2856,7 @@ function getElementBasedFormatState(editor, event) {
         isCodeInline: !!editor.queryElements('code', 1 /* OnSelection */)[0],
         isCodeBlock: !!editor.queryElements('pre>code', 1 /* OnSelection */)[0],
         isInTable: !!table,
-        tableFormat: tableFormat,
+        tableFormat: tableFormat || {},
         tableHasHeader: hasHeader,
         canMergeTableCell: canMergeTableCell(editor),
     };
@@ -2913,6 +2922,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * Parent nodes will be split if need
  */
 function insertEntity(editor, type, contentNode, isBlock, isReadonly, position, insertToRegionRoot) {
+    var _a;
     var wrapper = (0, roosterjs_editor_dom_1.wrap)(contentNode, isBlock ? 'DIV' : 'SPAN');
     // For inline & readonly entity, we need to set display to "inline-block" otherwise
     // there will be some weird behavior when move cursor around the entity node.
@@ -2925,7 +2935,7 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
     }
     (0, roosterjs_editor_dom_1.commitEntity)(wrapper, type, isReadonly);
     if (!editor.contains(wrapper)) {
-        var currentRange = void 0;
+        var currentRange = null;
         var contentPosition = void 0;
         if (typeof position == 'number') {
             contentPosition = position;
@@ -2970,7 +2980,7 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
         // Insert an extra empty line for block entity to make sure
         // user can still put cursor below the entity.
         var br = editor.getDocument().createElement('BR');
-        wrapper.parentNode.insertBefore(br, wrapper.nextSibling);
+        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, wrapper.nextSibling);
     }
     var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(wrapper);
     if (!isBlock &&
@@ -3058,7 +3068,9 @@ function removeLink(editor) {
     editor.focus();
     (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
         editor.queryElements('a[href]', 1 /* OnSelection */, roosterjs_editor_dom_1.unwrap);
-        editor.select(start, end);
+        if (start && end) {
+            editor.select(start, end);
+        }
     }, 'removeLink');
 }
 exports.default = removeLink;
@@ -3077,14 +3089,15 @@ exports.default = removeLink;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 function replaceWithNode(editor, textOrRange, node, exactMatch, searcher) {
+    var _a, _b;
     // Make sure the text and node is valid
     if (!textOrRange || !node) {
         return false;
     }
     var range;
     if (typeof textOrRange == 'string') {
-        searcher = searcher || editor.getContentSearcherOfCursor();
-        range = searcher && searcher.getRangeFromText(textOrRange, exactMatch);
+        searcher = (_a = (searcher || editor.getContentSearcherOfCursor())) !== null && _a !== void 0 ? _a : undefined;
+        range = (_b = searcher === null || searcher === void 0 ? void 0 : searcher.getRangeFromText(textOrRange, exactMatch)) !== null && _b !== void 0 ? _b : null;
     }
     else {
         range = textOrRange;
@@ -3092,7 +3105,7 @@ function replaceWithNode(editor, textOrRange, node, exactMatch, searcher) {
     if (range) {
         var backupRange = editor.getSelectionRange();
         // If the range to replace is right before current cursor, it is actually an exact match
-        if (backupRange.collapsed &&
+        if ((backupRange === null || backupRange === void 0 ? void 0 : backupRange.collapsed) &&
             range.endContainer == backupRange.startContainer &&
             range.endOffset == backupRange.startOffset) {
             exactMatch = true;
@@ -3169,10 +3182,12 @@ function setAlignment(editor, alignment) {
         var isATable = selection && selection.type === 1 /* TableSelection */;
         var elementAtCursor = editor.getElementAtCursor();
         if (isATable &&
+            selection.coordinates &&
             (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
             alignTable(selection, alignment);
         }
-        else if (isList(elementAtCursor) &&
+        else if (elementAtCursor &&
+            isList(elementAtCursor) &&
             editor.isFeatureEnabled("ListItemAlignment" /* ListItemAlignment */)) {
             alignList(editor, alignment);
         }
@@ -3229,7 +3244,9 @@ function alignText(editor, alignment) {
     });
     if (elements.length == 0) {
         var node = editor.getElementAtCursor();
-        (0, normalizeBlockquote_1.default)(node);
+        if (node) {
+            (0, normalizeBlockquote_1.default)(node);
+        }
     }
 }
 function isList(element) {
@@ -3240,7 +3257,9 @@ function alignList(editor, alignment) {
         var blocks = (0, roosterjs_editor_dom_1.getSelectedBlockElementsInRegion)(region, undefined /* createBlockIfEmpty */, editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
         var startNode = blocks[0].getStartNode();
         var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, true /*includeSiblingLists*/, startNode);
-        vList.setAlignment(start, end, alignment);
+        if (start && end) {
+            vList === null || vList === void 0 ? void 0 : vList.setAlignment(start, end, alignment);
+        }
     }, undefined /* beforeRunCallback */, 'alignList');
 }
 
@@ -3304,7 +3323,9 @@ function setDirection(editor, direction) {
             element.setAttribute('dir', direction == 0 /* LeftToRight */ ? 'ltr' : 'rtl');
             element.style.textAlign = direction == 0 /* LeftToRight */ ? 'left' : 'right';
         });
-        editor.select(start, end);
+        if (start && end) {
+            editor.select(start, end);
+        }
     }, 'setDirection');
 }
 exports.default = setDirection;
@@ -3446,14 +3467,18 @@ function setIndentation(editor, indentation) {
                     isFirstItem(vList, startNode) &&
                     shouldHandleWithBlockquotes(indentation, editor, startNode)) {
                     var block = editor.getBlockElementAtNode(vList.rootList);
-                    blockGroups.push([block]);
+                    if (block) {
+                        blockGroups.push([block]);
+                    }
                 }
                 else {
-                    indentation == 1 /* Decrease */
-                        ? vList.setIndentation(start, end, indentation, false /* softOutdent */, isTabKeyTextFeaturesEnabled /* preventItemRemoval */)
-                        : vList.setIndentation(start, end, indentation);
-                    vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
-                    blockGroups.push([]);
+                    if (start && end) {
+                        indentation == 1 /* Decrease */
+                            ? vList.setIndentation(start, end, indentation, false /* softOutdent */, isTabKeyTextFeaturesEnabled /* preventItemRemoval */)
+                            : vList.setIndentation(start, end, indentation);
+                        vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
+                        blockGroups.push([]);
+                    }
                 }
             }
             else {
@@ -3464,10 +3489,13 @@ function setIndentation(editor, indentation) {
     }, function () {
         var selection = editor.getSelectionRangeEx();
         if (selection.type == 1 /* TableSelection */ &&
+            selection.coordinates &&
             (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
             if (indentation == 1 /* Decrease */) {
                 var quote = editor.getElementAtCursor('blockquote', selection.table);
-                (0, roosterjs_editor_dom_1.unwrap)(quote);
+                if (quote) {
+                    (0, roosterjs_editor_dom_1.unwrap)(quote);
+                }
             }
             else if (indentation == 0 /* Increase */) {
                 (0, roosterjs_editor_dom_1.wrap)(selection.table, 2 /* BlockquoteWrapper */);
@@ -3708,7 +3736,9 @@ function toggleCodeBlock(editor, styler) {
             if (!code.previousSibling && !code.nextSibling) {
                 var parent_1 = code.parentNode;
                 (0, roosterjs_editor_dom_1.unwrap)(code);
-                (0, roosterjs_editor_dom_1.unwrap)(parent_1);
+                if (parent_1) {
+                    (0, roosterjs_editor_dom_1.unwrap)(parent_1);
+                }
             }
         }).length == 0;
     }, 'toggleCodeBlock');
@@ -3753,7 +3783,7 @@ function toggleHeader(editor, level) {
         });
         if (level > 0) {
             var traverser = editor.getSelectionTraverser();
-            var blockElement = traverser ? traverser.currentBlockElement : null;
+            var blockElement = traverser === null || traverser === void 0 ? void 0 : traverser.currentBlockElement;
             var sanitizer = new roosterjs_editor_dom_1.HtmlSanitizer({
                 cssStyleCallbacks: {
                     'font-size': function () { return false; },
@@ -3762,7 +3792,7 @@ function toggleHeader(editor, level) {
             while (blockElement) {
                 var element = blockElement.collapseToSingleElement();
                 sanitizer.sanitize(element);
-                blockElement = traverser.getNextBlockElement();
+                blockElement = traverser === null || traverser === void 0 ? void 0 : traverser.getNextBlockElement();
             }
             editor.getDocument().execCommand("formatBlock" /* FormatBlock */, false, "<H" + level + ">");
         }
@@ -4955,6 +4985,7 @@ var getStyleBasedFormatState_1 = __webpack_require__(/*! ./getStyleBasedFormatSt
 var hasFocus_1 = __webpack_require__(/*! ./hasFocus */ "./packages/roosterjs-editor-core/lib/coreApi/hasFocus.ts");
 var insertNode_1 = __webpack_require__(/*! ./insertNode */ "./packages/roosterjs-editor-core/lib/coreApi/insertNode.ts");
 var restoreUndoSnapshot_1 = __webpack_require__(/*! ./restoreUndoSnapshot */ "./packages/roosterjs-editor-core/lib/coreApi/restoreUndoSnapshot.ts");
+var select_1 = __webpack_require__(/*! ./select */ "./packages/roosterjs-editor-core/lib/coreApi/select.ts");
 var selectImage_1 = __webpack_require__(/*! ./selectImage */ "./packages/roosterjs-editor-core/lib/coreApi/selectImage.ts");
 var selectRange_1 = __webpack_require__(/*! ./selectRange */ "./packages/roosterjs-editor-core/lib/coreApi/selectRange.ts");
 var selectTable_1 = __webpack_require__(/*! ./selectTable */ "./packages/roosterjs-editor-core/lib/coreApi/selectTable.ts");
@@ -4979,6 +5010,7 @@ exports.coreApiMap = {
     hasFocus: hasFocus_1.hasFocus,
     insertNode: insertNode_1.insertNode,
     restoreUndoSnapshot: restoreUndoSnapshot_1.restoreUndoSnapshot,
+    select: select_1.select,
     selectRange: selectRange_1.selectRange,
     setContent: setContent_1.setContent,
     switchShadowEdit: switchShadowEdit_1.switchShadowEdit,
@@ -5018,8 +5050,9 @@ var TAB_SPACES = 6;
  * @param applyCurrentStyle True if apply format of current selection to the pasted content,
  * false to keep original format
  */
-var createPasteFragment = function (core, clipboardData, position, pasteAsText, applyCurrentStyle) {
+var createPasteFragment = function (core, clipboardData, position, pasteAsText, applyCurrentStyle, pasteAsImage) {
     var _a, _b;
+    if (pasteAsImage === void 0) { pasteAsImage = false; }
     if (!clipboardData) {
         return null;
     }
@@ -5078,7 +5111,7 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
         }
     }
     // Step 3: Fill the BeforePasteEvent object, especially the fragment for paste
-    if (!pasteAsText && !text && imageDataUri) {
+    if ((pasteAsImage && imageDataUri) || (!pasteAsText && !text && imageDataUri)) {
         // Paste image
         var img = document.createElement('img');
         img.style.maxWidth = '100%';
@@ -6020,6 +6053,136 @@ var restoreUndoSnapshot = function (core, step) {
 exports.restoreUndoSnapshot = restoreUndoSnapshot;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/coreApi/select.ts":
+/*!**************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/coreApi/select.ts ***!
+  \**************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.select = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * Select content according to the given information.
+ * There are a bunch of allowed combination of parameters. See IEditor.select for more details
+ * @param core The editor core object
+ * @param arg1 A DOM Range, or SelectionRangeEx, or NodePosition, or Node, or Selection Path
+ * @param arg2 (optional) A NodePosition, or an offset number, or a PositionType, or a TableSelection
+ * @param arg3 (optional) A Node
+ * @param arg4 (optional) An offset number, or a PositionType
+ */
+var select = function (core, arg1, arg2, arg3, arg4) {
+    var rangeEx = null;
+    if (isSelectionRangeEx(arg1)) {
+        rangeEx = arg1;
+    }
+    else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLTableElement') && isTableSelection(arg2)) {
+        rangeEx = {
+            type: 1 /* TableSelection */,
+            ranges: [],
+            areAllCollapsed: false,
+            table: arg1,
+            coordinates: arg2,
+        };
+    }
+    else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLImageElement') && typeof arg2 == 'undefined') {
+        rangeEx = {
+            type: 2 /* ImageSelection */,
+            ranges: [],
+            areAllCollapsed: false,
+            image: arg1,
+        };
+    }
+    else {
+        var range = !arg1
+            ? null
+            : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
+                ? arg1
+                : isSelectionPath(arg1)
+                    ? (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, arg1.start, arg1.end)
+                    : isNodePosition(arg1) || (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Node')
+                        ? (0, roosterjs_editor_dom_1.createRange)(arg1, arg2, arg3, arg4)
+                        : null;
+        rangeEx = range
+            ? {
+                type: 0 /* Normal */,
+                ranges: [range],
+                areAllCollapsed: range.collapsed,
+            }
+            : null;
+    }
+    if (rangeEx) {
+        switch (rangeEx.type) {
+            case 1 /* TableSelection */:
+                if ((0, roosterjs_editor_dom_1.contains)(core.contentDiv, rangeEx.table)) {
+                    core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
+                    core.domEvent.tableSelectionRange = core.api.selectTable(core, rangeEx.table, rangeEx.coordinates);
+                    rangeEx = core.domEvent.tableSelectionRange;
+                }
+                break;
+            case 2 /* ImageSelection */:
+                if ((0, roosterjs_editor_dom_1.contains)(core.contentDiv, rangeEx.image)) {
+                    core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
+                    core.domEvent.imageSelectionRange = core.api.selectImage(core, rangeEx.image);
+                    rangeEx = core.domEvent.imageSelectionRange;
+                }
+                break;
+            case 0 /* Normal */:
+                core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
+                core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
+                if ((0, roosterjs_editor_dom_1.contains)(core.contentDiv, rangeEx.ranges[0])) {
+                    core.api.selectRange(core, rangeEx.ranges[0]);
+                }
+                else {
+                    rangeEx = null;
+                }
+                break;
+        }
+        core.api.triggerEvent(core, {
+            eventType: 22 /* SelectionChanged */,
+            selectionRangeEx: rangeEx,
+        }, true /** broadcast **/);
+    }
+    else {
+        core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
+        core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
+    }
+    return !!rangeEx;
+};
+exports.select = select;
+function isSelectionRangeEx(obj) {
+    var rangeEx = obj;
+    return (rangeEx &&
+        typeof rangeEx == 'object' &&
+        typeof rangeEx.type == 'number' &&
+        Array.isArray(rangeEx.ranges));
+}
+function isTableSelection(obj) {
+    var selection = obj;
+    return (selection &&
+        typeof selection == 'object' &&
+        typeof selection.firstCell == 'object' &&
+        typeof selection.lastCell == 'object');
+}
+function isSelectionPath(obj) {
+    var path = obj;
+    return path && typeof path == 'object' && Array.isArray(path.start) && Array.isArray(path.end);
+}
+function isNodePosition(obj) {
+    var pos = obj;
+    return (pos &&
+        typeof pos == 'object' &&
+        typeof pos.node == 'object' &&
+        typeof pos.offset == 'number');
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/coreApi/selectImage.ts":
@@ -6254,7 +6417,7 @@ function buildCss(table, coordinates, contentDivSelector) {
             ranges.push(rowRange);
         }
     });
-    var css = selectors.join(',') + " {background-color: rgba(198,198,198,0.7) !important; caret-color: transparent}";
+    var css = selectors.join(',') + " {background-color: rgb(198,198,198) !important; caret-color: transparent}";
     return { css: css, ranges: ranges };
 }
 function select(core, table, coordinates) {
@@ -7779,6 +7942,17 @@ exports.default = ImageSelection;
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var _a, _b;
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
@@ -7823,12 +7997,11 @@ var LifecyclePlugin = /** @class */ (function () {
      */
     function LifecyclePlugin(options, contentDiv) {
         var _this = this;
-        var _a, _b, _c;
+        var _a, _b;
         this.editor = null;
         this.initializer = null;
         this.disposer = null;
         this.initialContent = options.initialContent || contentDiv.innerHTML || '';
-        this.contentDivFormat = (0, roosterjs_editor_dom_1.getComputedStyles)(contentDiv);
         // Make the container editable and set its selection styles
         if (contentDiv.getAttribute(CONTENT_EDITABLE_ATTRIBUTE_NAME) === null) {
             this.initializer = function () {
@@ -7852,12 +8025,30 @@ var LifecyclePlugin = /** @class */ (function () {
                 (0, roosterjs_editor_dom_1.setColor)(contentDiv, textColors, false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
                 (0, roosterjs_editor_dom_1.setColor)(contentDiv, backgroundColors, true /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
             };
+        var getDarkColor = (_a = options.getDarkColor) !== null && _a !== void 0 ? _a : (function (color) { return color; });
+        var defaultFormat = options.defaultFormat ? __assign({}, options.defaultFormat) : null;
+        if (defaultFormat) {
+            if (defaultFormat.textColor && !defaultFormat.textColors) {
+                defaultFormat.textColors = {
+                    lightModeColor: defaultFormat.textColor,
+                    darkModeColor: getDarkColor(defaultFormat.textColor),
+                };
+                delete defaultFormat.textColor;
+            }
+            if (defaultFormat.backgroundColor && !defaultFormat.backgroundColors) {
+                defaultFormat.backgroundColors = {
+                    lightModeColor: defaultFormat.backgroundColor,
+                    darkModeColor: getDarkColor(defaultFormat.backgroundColor),
+                };
+                delete defaultFormat.backgroundColor;
+            }
+        }
         this.state = {
             customData: {},
-            defaultFormat: (_a = options.defaultFormat) !== null && _a !== void 0 ? _a : null,
+            defaultFormat: defaultFormat,
             isDarkMode: !!options.inDarkMode,
-            getDarkColor: (_b = options.getDarkColor) !== null && _b !== void 0 ? _b : (function (color) { return color; }),
-            onExternalContentTransform: (_c = options.onExternalContentTransform) !== null && _c !== void 0 ? _c : null,
+            getDarkColor: getDarkColor,
+            onExternalContentTransform: (_b = options.onExternalContentTransform) !== null && _b !== void 0 ? _b : null,
             experimentalFeatures: options.experimentalFeatures || [],
             shadowEditFragment: null,
             shadowEditEntities: null,
@@ -7879,8 +8070,6 @@ var LifecyclePlugin = /** @class */ (function () {
     LifecyclePlugin.prototype.initialize = function (editor) {
         var _a;
         this.editor = editor;
-        // Calculate default format
-        this.recalculateDefaultFormat();
         // Ensure initial content and its format
         this.editor.setContent(this.initialContent, false /*triggerContentChangedEvent*/);
         // Set content DIV to be editable
@@ -7928,7 +8117,6 @@ var LifecyclePlugin = /** @class */ (function () {
             (event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
                 event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
             this.state.isDarkMode = event.source == "SwitchToDarkMode" /* SwitchToDarkMode */;
-            this.recalculateDefaultFormat();
             this.adjustColor();
         }
     };
@@ -7943,45 +8131,6 @@ var LifecyclePlugin = /** @class */ (function () {
             catch (_b) { }
         });
     };
-    LifecyclePlugin.prototype.recalculateDefaultFormat = function () {
-        var _a = this.state, baseFormat = _a.defaultFormat, isDarkMode = _a.isDarkMode;
-        if (isDarkMode && baseFormat) {
-            if (!baseFormat.backgroundColors) {
-                baseFormat.backgroundColors = DARK_MODE_DEFAULT_FORMAT.backgroundColors;
-            }
-            if (!baseFormat.textColors) {
-                baseFormat.textColors = DARK_MODE_DEFAULT_FORMAT.textColors;
-            }
-        }
-        if (baseFormat && (0, roosterjs_editor_dom_1.getObjectKeys)(baseFormat).length === 0) {
-            return;
-        }
-        var _b = baseFormat || {}, fontFamily = _b.fontFamily, fontSize = _b.fontSize, textColor = _b.textColor, textColors = _b.textColors, backgroundColor = _b.backgroundColor, backgroundColors = _b.backgroundColors, bold = _b.bold, italic = _b.italic, underline = _b.underline;
-        var defaultFormat = this.contentDivFormat;
-        this.state.defaultFormat = {
-            fontFamily: fontFamily || defaultFormat[0],
-            fontSize: fontSize || defaultFormat[1],
-            get textColor() {
-                return textColors
-                    ? isDarkMode
-                        ? textColors.darkModeColor
-                        : textColors.lightModeColor
-                    : textColor || defaultFormat[2];
-            },
-            textColors: textColors,
-            get backgroundColor() {
-                return backgroundColors
-                    ? isDarkMode
-                        ? backgroundColors.darkModeColor
-                        : backgroundColors.lightModeColor
-                    : backgroundColor || '';
-            },
-            backgroundColors: backgroundColors,
-            bold: bold,
-            italic: italic,
-            underline: underline,
-        };
-    };
     return LifecyclePlugin;
 }());
 exports.default = LifecyclePlugin;
@@ -8600,11 +8749,7 @@ var UndoPlugin = /** @class */ (function () {
                 this.addUndoSnapshot();
                 break;
             case 7 /* ContentChanged */:
-                if (!(this.state.isRestoring ||
-                    event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
-                    event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
-                    this.clearRedoForInput();
-                }
+                this.onContentChanged(event);
                 break;
         }
     };
@@ -8668,6 +8813,25 @@ var UndoPlugin = /** @class */ (function () {
         }
         this.lastKeyPress = evt.which;
     };
+    UndoPlugin.prototype.onContentChanged = function (event) {
+        if (event.source == "Keyboard" /* Keyboard */) {
+            if (Number.isInteger(event.data)) {
+                // For keyboard event (triggered from Content Model), we can get its keycode from event.data
+                // And when user is keep pressing the same key, mark editor with "hasNewContent" so that next time user
+                // do some other action or press a different key, we will add undo snapshot
+                if (event.data != this.lastKeyPress) {
+                    this.addUndoSnapshot();
+                }
+                this.lastKeyPress = event.data;
+                this.state.hasNewContent = true;
+            }
+        }
+        else if (!(this.state.isRestoring ||
+            event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
+            event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
+            this.clearRedoForInput();
+        }
+    };
     UndoPlugin.prototype.clearRedoForInput = function () {
         this.state.snapshotsService.clearRedo();
         this.lastKeyPress = 0;
@@ -9241,6 +9405,54 @@ exports.default = DarkColorHandlerImpl;
 
 "use strict";
 
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var createEditorCore_1 = __webpack_require__(/*! ./createEditorCore */ "./packages/roosterjs-editor-core/lib/editor/createEditorCore.ts");
+var EditorBase_1 = __webpack_require__(/*! ./EditorBase */ "./packages/roosterjs-editor-core/lib/editor/EditorBase.ts");
+/**
+ * RoosterJs core editor class
+ */
+var Editor = /** @class */ (function (_super) {
+    __extends(Editor, _super);
+    /**
+     * Creates an instance of EditorBase
+     * @param contentDiv The DIV HTML element which will be the container element of editor
+     * @param options An optional options object to customize the editor
+     */
+    function Editor(contentDiv, options) {
+        if (options === void 0) { options = {}; }
+        return _super.call(this, contentDiv, options, createEditorCore_1.createEditorCore) || this;
+    }
+    return Editor;
+}(EditorBase_1.EditorBase));
+exports.default = Editor;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/editor/EditorBase.ts":
+/*!*****************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/editor/EditorBase.ts ***!
+  \*****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9253,53 +9465,28 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugins */ "./packages/roosterjs-editor-core/lib/corePlugins/createCorePlugins.ts");
-var DarkColorHandlerImpl_1 = __webpack_require__(/*! ./DarkColorHandlerImpl */ "./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts");
-var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
+exports.EditorBase = void 0;
+var isFeatureEnabled_1 = __webpack_require__(/*! ./isFeatureEnabled */ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
- * RoosterJs core editor class
+ * Base class of editor
  */
-var Editor = /** @class */ (function () {
+var EditorBase = /** @class */ (function () {
     //#region Lifecycle
     /**
-     * Creates an instance of Editor
+     * Creates an instance of EditorBase
      * @param contentDiv The DIV HTML element which will be the container element of editor
      * @param options An optional options object to customize the editor
      */
-    function Editor(contentDiv, options) {
+    function EditorBase(contentDiv, options, coreCreator) {
         var _this = this;
-        if (options === void 0) { options = {}; }
-        var _a;
         this.core = null;
         // 1. Make sure all parameters are valid
         if ((0, roosterjs_editor_dom_1.getTagOfNode)(contentDiv) != 'DIV') {
             throw new Error('contentDiv must be an HTML DIV element');
         }
-        // 2. Store options values to local variables
-        var corePlugins = (0, createCorePlugins_1.default)(contentDiv, options);
-        var plugins = [];
-        (0, roosterjs_editor_dom_1.getObjectKeys)(corePlugins).forEach(function (name) {
-            if (name == '_placeholder') {
-                if (options.plugins) {
-                    (0, roosterjs_editor_dom_1.arrayPush)(plugins, options.plugins);
-                }
-            }
-            else {
-                plugins.push(corePlugins[name]);
-            }
-        });
-        var zoomScale = ((_a = options.zoomScale) !== null && _a !== void 0 ? _a : -1) > 0 ? options.zoomScale : 1;
-        this.core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), originalApi: coreApiMap_1.coreApiMap, plugins: plugins.filter(function (x) { return !!x; }) }, (0, createCorePlugins_1.getPluginState)(corePlugins)), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }), getVisibleViewport: options.getVisibleViewport ||
-                (function () {
-                    var scrollContainer = _this.getScrollContainer();
-                    return (0, roosterjs_editor_dom_1.getIntersectedRect)(scrollContainer == contentDiv
-                        ? [scrollContainer]
-                        : [scrollContainer, contentDiv]);
-                }), imageSelectionBorderColor: options.imageSelectionBorderColor });
-        if (this.isFeatureEnabled("VariableBasedDarkColor" /* VariableBasedDarkColor */)) {
-            this.core.darkColorHandler = new DarkColorHandlerImpl_1.default(contentDiv, this.core.lifecycle.getDarkColor);
-        }
+        // 2. Create editor core
+        this.core = coreCreator(contentDiv, options);
         // 3. Initialize plugins
         this.core.plugins.forEach(function (plugin) { return plugin.initialize(_this); });
         // 4. Ensure user will type in a container node, not the editor content DIV
@@ -9308,7 +9495,7 @@ var Editor = /** @class */ (function () {
     /**
      * Dispose this editor, dispose all plugins and custom data
      */
-    Editor.prototype.dispose = function () {
+    EditorBase.prototype.dispose = function () {
         var _a;
         var core = this.getCore();
         for (var i = core.plugins.length - 1; i >= 0; i--) {
@@ -9321,7 +9508,7 @@ var Editor = /** @class */ (function () {
      * Get whether this editor is disposed
      * @returns True if editor is disposed, otherwise false
      */
-    Editor.prototype.isDisposed = function () {
+    EditorBase.prototype.isDisposed = function () {
         return !this.core;
     };
     //#endregion
@@ -9336,7 +9523,7 @@ var Editor = /** @class */ (function () {
      *  insertOnNewLine: false
      * @returns true if node is inserted. Otherwise false
      */
-    Editor.prototype.insertNode = function (node, option) {
+    EditorBase.prototype.insertNode = function (node, option) {
         var core = this.getCore();
         return node ? core.api.insertNode(core, node, option !== null && option !== void 0 ? option : null) : false;
     };
@@ -9345,7 +9532,7 @@ var Editor = /** @class */ (function () {
      * @param node The node to delete
      * @returns true if node is deleted. Otherwise false
      */
-    Editor.prototype.deleteNode = function (node) {
+    EditorBase.prototype.deleteNode = function (node) {
         // Only remove the node when it falls within editor
         if (node && this.contains(node) && node.parentNode) {
             node.parentNode.removeChild(node);
@@ -9360,7 +9547,7 @@ var Editor = /** @class */ (function () {
      * @param transformColorForDarkMode (optional) Whether to transform new node to dark mode. Default is false
      * @returns true if node is replaced. Otherwise false
      */
-    Editor.prototype.replaceNode = function (existingNode, toNode, transformColorForDarkMode) {
+    EditorBase.prototype.replaceNode = function (existingNode, toNode, transformColorForDarkMode) {
         var core = this.getCore();
         // Only replace the node when it falls within editor
         if (this.contains(existingNode) && toNode) {
@@ -9374,16 +9561,16 @@ var Editor = /** @class */ (function () {
      * @param node The node to create InlineElement
      * @returns The BlockElement result
      */
-    Editor.prototype.getBlockElementAtNode = function (node) {
+    EditorBase.prototype.getBlockElementAtNode = function (node) {
         return (0, roosterjs_editor_dom_1.getBlockElementAtNode)(this.getCore().contentDiv, node);
     };
-    Editor.prototype.contains = function (arg) {
+    EditorBase.prototype.contains = function (arg) {
         if (!arg) {
             return false;
         }
         return (0, roosterjs_editor_dom_1.contains)(this.getCore().contentDiv, arg);
     };
-    Editor.prototype.queryElements = function (selector, scopeOrCallback, callback) {
+    EditorBase.prototype.queryElements = function (selector, scopeOrCallback, callback) {
         if (scopeOrCallback === void 0) { scopeOrCallback = 0 /* Body */; }
         var core = this.getCore();
         var result = [];
@@ -9411,7 +9598,7 @@ var Editor = /** @class */ (function () {
      * @returns When canSplitParent is true, returns all node from start through end after splitting,
      * otherwise just return start and end
      */
-    Editor.prototype.collapseNodes = function (start, end, canSplitParent) {
+    EditorBase.prototype.collapseNodes = function (start, end, canSplitParent) {
         return (0, roosterjs_editor_dom_1.collapseNodes)(this.getCore().contentDiv, start, end, canSplitParent);
     };
     //#endregion
@@ -9421,7 +9608,7 @@ var Editor = /** @class */ (function () {
      * @param trim Whether trim the content string before check. Default is false
      * @returns True if there's no visible content, otherwise false
      */
-    Editor.prototype.isEmpty = function (trim) {
+    EditorBase.prototype.isEmpty = function (trim) {
         return (0, roosterjs_editor_dom_1.isNodeEmpty)(this.getCore().contentDiv, trim);
     };
     /**
@@ -9429,7 +9616,7 @@ var Editor = /** @class */ (function () {
      * @param mode specify what kind of HTML content to retrieve
      * @returns HTML string representing current editor content
      */
-    Editor.prototype.getContent = function (mode) {
+    EditorBase.prototype.getContent = function (mode) {
         if (mode === void 0) { mode = 0 /* CleanHTML */; }
         var core = this.getCore();
         return core.api.getContent(core, mode);
@@ -9439,7 +9626,7 @@ var Editor = /** @class */ (function () {
      * @param content HTML content to set in
      * @param triggerContentChangedEvent True to trigger a ContentChanged event. Default value is true
      */
-    Editor.prototype.setContent = function (content, triggerContentChangedEvent) {
+    EditorBase.prototype.setContent = function (content, triggerContentChangedEvent) {
         if (triggerContentChangedEvent === void 0) { triggerContentChangedEvent = true; }
         var core = this.getCore();
         core.api.setContent(core, content, triggerContentChangedEvent);
@@ -9453,7 +9640,7 @@ var Editor = /** @class */ (function () {
      *  replaceSelection: true
      *  insertOnNewLine: false
      */
-    Editor.prototype.insertContent = function (content, option) {
+    EditorBase.prototype.insertContent = function (content, option) {
         var _a;
         if (content) {
             var doc = this.getDocument();
@@ -9473,7 +9660,7 @@ var Editor = /** @class */ (function () {
     /**
      * Delete selected content
      */
-    Editor.prototype.deleteSelectedContent = function () {
+    EditorBase.prototype.deleteSelectedContent = function () {
         var range = this.getSelectionRange();
         if (range && !range.collapsed) {
             return (0, roosterjs_editor_dom_1.deleteSelectedContent)(this.getCore().contentDiv, range);
@@ -9487,10 +9674,11 @@ var Editor = /** @class */ (function () {
      * @param applyCurrentStyle True if apply format of current selection to the pasted content,
      * false to keep original format.  Default value is false. When pasteAsText is true, this parameter is ignored
      */
-    Editor.prototype.paste = function (clipboardData, pasteAsText, applyCurrentFormat) {
+    EditorBase.prototype.paste = function (clipboardData, pasteAsText, applyCurrentFormat, pasteAsImage) {
         var _this = this;
         if (pasteAsText === void 0) { pasteAsText = false; }
         if (applyCurrentFormat === void 0) { applyCurrentFormat = false; }
+        if (pasteAsImage === void 0) { pasteAsImage = false; }
         var core = this.getCore();
         if (!clipboardData) {
             return;
@@ -9504,7 +9692,7 @@ var Editor = /** @class */ (function () {
         }
         var range = this.getSelectionRange();
         var pos = range && roosterjs_editor_dom_1.Position.getStart(range);
-        var fragment = core.api.createPasteFragment(core, clipboardData, pos, pasteAsText, applyCurrentFormat);
+        var fragment = core.api.createPasteFragment(core, clipboardData, pos, pasteAsText, applyCurrentFormat, pasteAsImage);
         if (fragment) {
             this.addUndoSnapshot(function () {
                 _this.insertNode(fragment);
@@ -9521,7 +9709,7 @@ var Editor = /** @class */ (function () {
      * Default value is true
      * @returns current selection range, or null if editor never got focus before
      */
-    Editor.prototype.getSelectionRange = function (tryGetFromCache) {
+    EditorBase.prototype.getSelectionRange = function (tryGetFromCache) {
         if (tryGetFromCache === void 0) { tryGetFromCache = true; }
         var core = this.getCore();
         return core.api.getSelectionRange(core, tryGetFromCache);
@@ -9533,7 +9721,7 @@ var Editor = /** @class */ (function () {
      * Default value is true
      * @returns current selection range, or null if editor never got focus before
      */
-    Editor.prototype.getSelectionRangeEx = function () {
+    EditorBase.prototype.getSelectionRangeEx = function () {
         var core = this.getCore();
         return core.api.getSelectionRangeEx(core);
     };
@@ -9542,7 +9730,7 @@ var Editor = /** @class */ (function () {
      * It does a live pull on the selection, if nothing retrieved, return whatever we have in cache.
      * @returns current selection path, or null if editor never got focus before
      */
-    Editor.prototype.getSelectionPath = function () {
+    EditorBase.prototype.getSelectionPath = function () {
         var range = this.getSelectionRange();
         return range && (0, roosterjs_editor_dom_1.getSelectionPath)(this.getCore().contentDiv, range);
     };
@@ -9550,99 +9738,25 @@ var Editor = /** @class */ (function () {
      * Check if focus is in editor now
      * @returns true if focus is in editor, otherwise false
      */
-    Editor.prototype.hasFocus = function () {
+    EditorBase.prototype.hasFocus = function () {
         var core = this.getCore();
         return core.api.hasFocus(core);
     };
     /**
      * Focus to this editor, the selection was restored to where it was before, no unexpected scroll.
      */
-    Editor.prototype.focus = function () {
+    EditorBase.prototype.focus = function () {
         var core = this.getCore();
         core.api.focus(core);
     };
-    Editor.prototype.select = function (arg1, arg2, arg3, arg4) {
+    EditorBase.prototype.select = function (arg1, arg2, arg3, arg4) {
         var core = this.getCore();
-        var rangeEx = null;
-        if (isSelectionRangeEx(arg1)) {
-            rangeEx = arg1;
-        }
-        else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLTableElement') && isTableSelection(arg2)) {
-            rangeEx = {
-                type: 1 /* TableSelection */,
-                ranges: [],
-                areAllCollapsed: false,
-                table: arg1,
-                coordinates: arg2,
-            };
-        }
-        else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLImageElement') && typeof arg2 == 'undefined') {
-            rangeEx = {
-                type: 2 /* ImageSelection */,
-                ranges: [],
-                areAllCollapsed: false,
-                image: arg1,
-            };
-        }
-        else {
-            var range = !arg1
-                ? null
-                : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
-                    ? arg1
-                    : isSelectionPath(arg1)
-                        ? (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, arg1.start, arg1.end)
-                        : isNodePosition(arg1) || (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Node')
-                            ? (0, roosterjs_editor_dom_1.createRange)(arg1, arg2, arg3, arg4)
-                            : null;
-            rangeEx = range
-                ? {
-                    type: 0 /* Normal */,
-                    ranges: [range],
-                    areAllCollapsed: range.collapsed,
-                }
-                : null;
-        }
-        if (rangeEx) {
-            switch (rangeEx.type) {
-                case 1 /* TableSelection */:
-                    if (this.contains(rangeEx.table)) {
-                        core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
-                        core.domEvent.tableSelectionRange = core.api.selectTable(core, rangeEx.table, rangeEx.coordinates);
-                        rangeEx = core.domEvent.tableSelectionRange;
-                    }
-                    break;
-                case 2 /* ImageSelection */:
-                    if (this.contains(rangeEx.image)) {
-                        core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
-                        core.domEvent.imageSelectionRange = core.api.selectImage(core, rangeEx.image);
-                        rangeEx = core.domEvent.imageSelectionRange;
-                    }
-                    break;
-                case 0 /* Normal */:
-                    core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
-                    core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
-                    if (this.contains(rangeEx.ranges[0])) {
-                        core.api.selectRange(core, rangeEx.ranges[0]);
-                    }
-                    else {
-                        rangeEx = null;
-                    }
-                    break;
-            }
-            this.triggerPluginEvent(22 /* SelectionChanged */, {
-                selectionRangeEx: rangeEx,
-            }, true /** broadcast **/);
-        }
-        else {
-            core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
-            core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
-        }
-        return !!rangeEx;
+        return core.api.select(core, arg1, arg2, arg3, arg4);
     };
     /**
      * Get current focused position. Return null if editor doesn't have focus at this time.
      */
-    Editor.prototype.getFocusedPosition = function () {
+    EditorBase.prototype.getFocusedPosition = function () {
         var _a;
         var sel = (_a = this.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
         if ((sel === null || sel === void 0 ? void 0 : sel.focusNode) && this.contains(sel.focusNode)) {
@@ -9666,7 +9780,7 @@ var Editor = /** @class */ (function () {
      * @param event Optional, if specified, editor will try to get cached result from the event object first.
      * If it is not cached before, query from DOM and cache the result into the event object
      */
-    Editor.prototype.getElementAtCursor = function (selector, startFrom, event) {
+    EditorBase.prototype.getElementAtCursor = function (selector, startFrom, event) {
         var _this = this;
         var _a;
         event = startFrom ? undefined : event; // Only use cache when startFrom is not specified, for different start position can have different result
@@ -9685,13 +9799,13 @@ var Editor = /** @class */ (function () {
      * @param position The position to check
      * @returns True if position is at beginning of the editor, otherwise false
      */
-    Editor.prototype.isPositionAtBeginning = function (position) {
+    EditorBase.prototype.isPositionAtBeginning = function (position) {
         return (0, roosterjs_editor_dom_1.isPositionAtBeginningOf)(position, this.getCore().contentDiv);
     };
     /**
      * Get impacted regions from selection
      */
-    Editor.prototype.getSelectedRegions = function (type) {
+    EditorBase.prototype.getSelectedRegions = function (type) {
         if (type === void 0) { type = 0 /* Table */; }
         var selection = this.getSelectionRangeEx();
         var result = [];
@@ -9705,7 +9819,7 @@ var Editor = /** @class */ (function () {
     };
     //#endregion
     //#region EVENT API
-    Editor.prototype.addDomEventHandler = function (nameOrMap, handler) {
+    EditorBase.prototype.addDomEventHandler = function (nameOrMap, handler) {
         var _a;
         var eventsToMap = typeof nameOrMap == 'string' ? (_a = {}, _a[nameOrMap] = handler, _a) : nameOrMap;
         var core = this.getCore();
@@ -9720,7 +9834,7 @@ var Editor = /** @class */ (function () {
      * @returns the event object which is really passed into plugins. Some plugin may modify the event object so
      * the result of this function provides a chance to read the modified result
      */
-    Editor.prototype.triggerPluginEvent = function (eventType, data, broadcast) {
+    EditorBase.prototype.triggerPluginEvent = function (eventType, data, broadcast) {
         if (broadcast === void 0) { broadcast = false; }
         var core = this.getCore();
         var event = __assign({ eventType: eventType }, data);
@@ -9732,7 +9846,7 @@ var Editor = /** @class */ (function () {
      * @param source Source of this event, by default is 'SetContent'
      * @param data additional data for this event
      */
-    Editor.prototype.triggerContentChangedEvent = function (source, data) {
+    EditorBase.prototype.triggerContentChangedEvent = function (source, data) {
         if (source === void 0) { source = "SetContent" /* SetContent */; }
         this.triggerPluginEvent(7 /* ContentChanged */, {
             source: source,
@@ -9744,7 +9858,7 @@ var Editor = /** @class */ (function () {
     /**
      * Undo last edit operation
      */
-    Editor.prototype.undo = function () {
+    EditorBase.prototype.undo = function () {
         this.focus();
         var core = this.getCore();
         core.api.restoreUndoSnapshot(core, -1 /*step*/);
@@ -9752,7 +9866,7 @@ var Editor = /** @class */ (function () {
     /**
      * Redo next edit operation
      */
-    Editor.prototype.redo = function () {
+    EditorBase.prototype.redo = function () {
         this.focus();
         var core = this.getCore();
         core.api.restoreUndoSnapshot(core, 1 /*step*/);
@@ -9767,14 +9881,14 @@ var Editor = /** @class */ (function () {
      * a ContentChangedEvent will be fired with change source equal to this value
      * @param canUndoByBackspace True if this action can be undone when user press Backspace key (aka Auto Complete).
      */
-    Editor.prototype.addUndoSnapshot = function (callback, changeSource, canUndoByBackspace, additionalData) {
+    EditorBase.prototype.addUndoSnapshot = function (callback, changeSource, canUndoByBackspace, additionalData) {
         var core = this.getCore();
         core.api.addUndoSnapshot(core, callback !== null && callback !== void 0 ? callback : null, changeSource !== null && changeSource !== void 0 ? changeSource : null, canUndoByBackspace !== null && canUndoByBackspace !== void 0 ? canUndoByBackspace : false, additionalData);
     };
     /**
      * Whether there is an available undo/redo snapshot
      */
-    Editor.prototype.getUndoState = function () {
+    EditorBase.prototype.getUndoState = function () {
         var _a = this.getCore().undo, hasNewContent = _a.hasNewContent, snapshotsService = _a.snapshotsService;
         return {
             canUndo: hasNewContent || snapshotsService.canMove(-1 /*previousSnapshot*/),
@@ -9787,13 +9901,13 @@ var Editor = /** @class */ (function () {
      * Get document which contains this editor
      * @returns The HTML document which contains this editor
      */
-    Editor.prototype.getDocument = function () {
+    EditorBase.prototype.getDocument = function () {
         return this.getCore().contentDiv.ownerDocument;
     };
     /**
      * Get the scroll container of the editor
      */
-    Editor.prototype.getScrollContainer = function () {
+    EditorBase.prototype.getScrollContainer = function () {
         return this.getCore().domEvent.scrollContainer;
     };
     /**
@@ -9804,7 +9918,7 @@ var Editor = /** @class */ (function () {
      * @param disposer An optional disposer function to dispose this custom data when
      * dispose editor.
      */
-    Editor.prototype.getCustomData = function (key, getter, disposer) {
+    EditorBase.prototype.getCustomData = function (key, getter, disposer) {
         var core = this.getCore();
         return (core.lifecycle.customData[key] = core.lifecycle.customData[key] || {
             value: getter ? getter() : undefined,
@@ -9815,14 +9929,14 @@ var Editor = /** @class */ (function () {
      * Check if editor is in IME input sequence
      * @returns True if editor is in IME input sequence, otherwise false
      */
-    Editor.prototype.isInIME = function () {
+    EditorBase.prototype.isInIME = function () {
         return this.getCore().domEvent.isInIME;
     };
     /**
      * Get default format of this editor
      * @returns Default format object of this editor
      */
-    Editor.prototype.getDefaultFormat = function () {
+    EditorBase.prototype.getDefaultFormat = function () {
         var _a;
         return (_a = this.getCore().lifecycle.defaultFormat) !== null && _a !== void 0 ? _a : {};
     };
@@ -9830,14 +9944,14 @@ var Editor = /** @class */ (function () {
      * Get a content traverser for the whole editor
      * @param startNode The node to start from. If not passed, it will start from the beginning of the body
      */
-    Editor.prototype.getBodyTraverser = function (startNode) {
+    EditorBase.prototype.getBodyTraverser = function (startNode) {
         return roosterjs_editor_dom_1.ContentTraverser.createBodyTraverser(this.getCore().contentDiv, startNode);
     };
     /**
      * Get a content traverser for current selection
      * @returns A content traverser, or null if editor never got focus before
      */
-    Editor.prototype.getSelectionTraverser = function (range) {
+    EditorBase.prototype.getSelectionTraverser = function (range) {
         var _a;
         range = (_a = range !== null && range !== void 0 ? range : this.getSelectionRange()) !== null && _a !== void 0 ? _a : undefined;
         return range
@@ -9849,7 +9963,7 @@ var Editor = /** @class */ (function () {
      * @param startFrom Start position of the traverser. Default value is ContentPosition.SelectionStart
      * @returns A content traverser, or null if editor never got focus before
      */
-    Editor.prototype.getBlockTraverser = function (startFrom) {
+    EditorBase.prototype.getBlockTraverser = function (startFrom) {
         if (startFrom === void 0) { startFrom = 3 /* SelectionStart */; }
         var range = this.getSelectionRange();
         return range
@@ -9862,7 +9976,7 @@ var Editor = /** @class */ (function () {
      * If it is not cached before, query from DOM and cache the result into the event object
      * @returns A content traverser, or null if editor never got focus before
      */
-    Editor.prototype.getContentSearcherOfCursor = function (event) {
+    EditorBase.prototype.getContentSearcherOfCursor = function (event) {
         var _this = this;
         return (0, roosterjs_editor_dom_1.cacheGetEventData)(event !== null && event !== void 0 ? event : null, 'ContentSearcher', function () {
             var range = _this.getSelectionRange();
@@ -9875,7 +9989,7 @@ var Editor = /** @class */ (function () {
      * @param callback The callback function to run
      * @returns a function to cancel this async run
      */
-    Editor.prototype.runAsync = function (callback) {
+    EditorBase.prototype.runAsync = function (callback) {
         var _this = this;
         var win = this.getCore().contentDiv.ownerDocument.defaultView || window;
         var handle = win.requestAnimationFrame(function () {
@@ -9892,7 +10006,7 @@ var Editor = /** @class */ (function () {
      * @param name Name of the attribute
      * @param value Value of the attribute
      */
-    Editor.prototype.setEditorDomAttribute = function (name, value) {
+    EditorBase.prototype.setEditorDomAttribute = function (name, value) {
         if (value === null) {
             this.getCore().contentDiv.removeAttribute(name);
         }
@@ -9904,7 +10018,7 @@ var Editor = /** @class */ (function () {
      * Get DOM attribute of editor content DIV, null if there is no such attribute.
      * @param name Name of the attribute
      */
-    Editor.prototype.getEditorDomAttribute = function (name) {
+    EditorBase.prototype.getEditorDomAttribute = function (name) {
         return this.getCore().contentDiv.getAttribute(name);
     };
     /**
@@ -9916,7 +10030,7 @@ var Editor = /** @class */ (function () {
      * may be different than what user is seeing from the view. When pass false, scroll position will be ignored.
      * @returns An [x, y] array which contains the left and top distances, or null if the given element is not in editor.
      */
-    Editor.prototype.getRelativeDistanceToEditor = function (element, addScroll) {
+    EditorBase.prototype.getRelativeDistanceToEditor = function (element, addScroll) {
         if (this.contains(element)) {
             var contentDiv = this.getCore().contentDiv;
             var editorRect = contentDiv.getBoundingClientRect();
@@ -9937,7 +10051,7 @@ var Editor = /** @class */ (function () {
      * Add a Content Edit feature.
      * @param feature The feature to add
      */
-    Editor.prototype.addContentEditFeature = function (feature) {
+    EditorBase.prototype.addContentEditFeature = function (feature) {
         var core = this.getCore();
         feature === null || feature === void 0 ? void 0 : feature.keys.forEach(function (key) {
             var array = core.edit.features[key] || [];
@@ -9949,7 +10063,7 @@ var Editor = /** @class */ (function () {
      * Remove a Content Edit feature.
      * @param feature The feature to remove
      */
-    Editor.prototype.removeContentEditFeature = function (feature) {
+    EditorBase.prototype.removeContentEditFeature = function (feature) {
         var core = this.getCore();
         feature === null || feature === void 0 ? void 0 : feature.keys.forEach(function (key) {
             var _a;
@@ -9966,7 +10080,7 @@ var Editor = /** @class */ (function () {
     /**
      * Get style based format state from current selection, including font name/size and colors
      */
-    Editor.prototype.getStyleBasedFormatState = function (node) {
+    EditorBase.prototype.getStyleBasedFormatState = function (node) {
         var _a;
         if (!node) {
             var range = this.getSelectionRange();
@@ -9980,7 +10094,7 @@ var Editor = /** @class */ (function () {
      * @param forceGetStateFromDOM If set to true, will force get the format state from DOM tree.
      * @returns The pending format state
      */
-    Editor.prototype.getPendableFormatState = function (forceGetStateFromDOM) {
+    EditorBase.prototype.getPendableFormatState = function (forceGetStateFromDOM) {
         if (forceGetStateFromDOM === void 0) { forceGetStateFromDOM = false; }
         var core = this.getCore();
         return core.api.getPendableFormatState(core, forceGetStateFromDOM);
@@ -9990,7 +10104,7 @@ var Editor = /** @class */ (function () {
      * @param position The position that user is about to type to
      * @param keyboardEvent Optional keyboard event object
      */
-    Editor.prototype.ensureTypeInContainer = function (position, keyboardEvent) {
+    EditorBase.prototype.ensureTypeInContainer = function (position, keyboardEvent) {
         var core = this.getCore();
         core.api.ensureTypeInContainer(core, position, keyboardEvent, this.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */));
     };
@@ -10000,7 +10114,7 @@ var Editor = /** @class */ (function () {
      * Set the dark mode state and transforms the content to match the new state.
      * @param nextDarkMode The next status of dark mode. True if the editor should be in dark mode, false if not.
      */
-    Editor.prototype.setDarkModeState = function (nextDarkMode) {
+    EditorBase.prototype.setDarkModeState = function (nextDarkMode) {
         var isDarkMode = this.isDarkMode();
         if (isDarkMode == !!nextDarkMode) {
             return;
@@ -10015,21 +10129,21 @@ var Editor = /** @class */ (function () {
      * Check if the editor is in dark mode
      * @returns True if the editor is in dark mode, otherwise false
      */
-    Editor.prototype.isDarkMode = function () {
+    EditorBase.prototype.isDarkMode = function () {
         return this.getCore().lifecycle.isDarkMode;
     };
     /**
      * Transform the given node and all its child nodes to dark mode color if editor is in dark mode
      * @param node The node to transform
      */
-    Editor.prototype.transformToDarkColor = function (node) {
+    EditorBase.prototype.transformToDarkColor = function (node) {
         var core = this.getCore();
         core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
     };
     /**
      * Get a darkColorHandler object for this editor. It will return null if experimental feature "VariableBasedDarkColor" is not enabled
      */
-    Editor.prototype.getDarkColorHandler = function () {
+    EditorBase.prototype.getDarkColorHandler = function () {
         return this.getCore().darkColorHandler || null;
     };
     /**
@@ -10040,29 +10154,29 @@ var Editor = /** @class */ (function () {
      * This function can be called repeated. If editor is already in shadow edit mode, we can still
      * use this function to do more shadow edit operation.
      */
-    Editor.prototype.startShadowEdit = function () {
+    EditorBase.prototype.startShadowEdit = function () {
         var core = this.getCore();
         core.api.switchShadowEdit(core, true /*isOn*/);
     };
     /**
      * Leave "Shadow Edit" mode, all changes made during shadow edit will be discarded
      */
-    Editor.prototype.stopShadowEdit = function () {
+    EditorBase.prototype.stopShadowEdit = function () {
         var core = this.getCore();
         core.api.switchShadowEdit(core, false /*isOn*/);
     };
     /**
      * Check if editor is in Shadow Edit mode
      */
-    Editor.prototype.isInShadowEdit = function () {
+    EditorBase.prototype.isInShadowEdit = function () {
         return !!this.getCore().lifecycle.shadowEditFragment;
     };
     /**
      * Check if the given experimental feature is enabled
      * @param feature The feature to check
      */
-    Editor.prototype.isFeatureEnabled = function (feature) {
-        return this.getCore().lifecycle.experimentalFeatures.indexOf(feature) >= 0;
+    EditorBase.prototype.isFeatureEnabled = function (feature) {
+        return (0, isFeatureEnabled_1.isFeatureEnabled)(this.getCore().lifecycle.experimentalFeatures, feature);
     };
     /**
      * Get a function to convert HTML string to trusted HTML string.
@@ -10070,13 +10184,13 @@ var Editor = /** @class */ (function () {
      * pass your own trusted HTML handler to EditorOptions.trustedHTMLHandler
      * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
      */
-    Editor.prototype.getTrustedHTMLHandler = function () {
+    EditorBase.prototype.getTrustedHTMLHandler = function () {
         return this.getCore().trustedHTMLHandler;
     };
     /**
      * @deprecated Use getZoomScale() instead
      */
-    Editor.prototype.getSizeTransformer = function () {
+    EditorBase.prototype.getSizeTransformer = function () {
         return this.getCore().sizeTransformer;
     };
     /**
@@ -10085,7 +10199,7 @@ var Editor = /** @class */ (function () {
      * to let editor behave correctly especially for those mouse drag/drop behaviors
      * @returns current zoom scale number
      */
-    Editor.prototype.getZoomScale = function () {
+    EditorBase.prototype.getZoomScale = function () {
         return this.getCore().zoomScale;
     };
     /**
@@ -10094,7 +10208,7 @@ var Editor = /** @class */ (function () {
      * to let editor behave correctly especially for those mouse drag/drop behaviors
      * @param scale The new scale number to set. It should be positive number and no greater than 10, otherwise it will be ignored.
      */
-    Editor.prototype.setZoomScale = function (scale) {
+    EditorBase.prototype.setZoomScale = function (scale) {
         var core = this.getCore();
         if (scale > 0 && scale <= 10) {
             var oldValue = core.zoomScale;
@@ -10110,47 +10224,112 @@ var Editor = /** @class */ (function () {
     /**
      * Retrieves the rect of the visible viewport of the editor.
      */
-    Editor.prototype.getVisibleViewport = function () {
+    EditorBase.prototype.getVisibleViewport = function () {
         return this.getCore().getVisibleViewport();
     };
     /**
      * @returns the current EditorCore object
      * @throws a standard Error if there's no core object
      */
-    Editor.prototype.getCore = function () {
+    EditorBase.prototype.getCore = function () {
         if (!this.core) {
             throw new Error('Editor is already disposed');
         }
         return this.core;
     };
-    return Editor;
+    return EditorBase;
 }());
-exports.default = Editor;
-function isSelectionRangeEx(obj) {
-    var rangeEx = obj;
-    return (rangeEx &&
-        typeof rangeEx == 'object' &&
-        typeof rangeEx.type == 'number' &&
-        Array.isArray(rangeEx.ranges));
-}
-function isTableSelection(obj) {
-    var selection = obj;
-    return (selection &&
-        typeof selection == 'object' &&
-        typeof selection.firstCell == 'object' &&
-        typeof selection.lastCell == 'object');
-}
-function isSelectionPath(obj) {
-    var path = obj;
-    return path && typeof path == 'object' && Array.isArray(path.start) && Array.isArray(path.end);
-}
-function isNodePosition(obj) {
-    var pos = obj;
-    return (pos &&
-        typeof pos == 'object' &&
-        typeof pos.node == 'object' &&
-        typeof pos.offset == 'number');
+exports.EditorBase = EditorBase;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/editor/createEditorCore.ts":
+/*!***********************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/editor/createEditorCore.ts ***!
+  \***********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEditorCore = void 0;
+var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugins */ "./packages/roosterjs-editor-core/lib/corePlugins/createCorePlugins.ts");
+var DarkColorHandlerImpl_1 = __webpack_require__(/*! ./DarkColorHandlerImpl */ "./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
+var isFeatureEnabled_1 = __webpack_require__(/*! ./isFeatureEnabled */ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts");
+/**
+ * Create a new instance of Editor Core
+ * @param contentDiv The DIV HTML element which will be the container element of editor
+ * @param options An optional options object to customize the editor
+ */
+var createEditorCore = function (contentDiv, options) {
+    var _a;
+    var corePlugins = (0, createCorePlugins_1.default)(contentDiv, options);
+    var plugins = [];
+    (0, roosterjs_editor_dom_1.getObjectKeys)(corePlugins).forEach(function (name) {
+        if (name == '_placeholder') {
+            if (options.plugins) {
+                (0, roosterjs_editor_dom_1.arrayPush)(plugins, options.plugins);
+            }
+        }
+        else {
+            plugins.push(corePlugins[name]);
+        }
+    });
+    var pluginState = (0, createCorePlugins_1.getPluginState)(corePlugins);
+    var zoomScale = ((_a = options.zoomScale) !== null && _a !== void 0 ? _a : -1) > 0 ? options.zoomScale : 1;
+    var getVisibleViewport = options.getVisibleViewport ||
+        (function () {
+            var scrollContainer = pluginState.domEvent.scrollContainer;
+            return (0, roosterjs_editor_dom_1.getIntersectedRect)(scrollContainer == core.contentDiv
+                ? [scrollContainer]
+                : [scrollContainer, core.contentDiv]);
+        });
+    var core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), originalApi: coreApiMap_1.coreApiMap, plugins: plugins.filter(function (x) { return !!x; }) }, pluginState), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }), getVisibleViewport: getVisibleViewport, imageSelectionBorderColor: options.imageSelectionBorderColor, darkColorHandler: (0, isFeatureEnabled_1.isFeatureEnabled)(options.experimentalFeatures, "VariableBasedDarkColor" /* VariableBasedDarkColor */)
+            ? new DarkColorHandlerImpl_1.default(contentDiv, pluginState.lifecycle.getDarkColor)
+            : undefined });
+    return core;
+};
+exports.createEditorCore = createEditorCore;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts":
+/*!***********************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts ***!
+  \***********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFeatureEnabled = void 0;
+/**
+ * Check if the given experimental feature is enabled
+ * @param featureSet All enabled features
+ * @param feature The feature to check
+ * @returns True if the given feature is enabled, otherwise false
+ */
+function isFeatureEnabled(featureSet, feature) {
+    return (featureSet || []).indexOf(feature) >= 0;
 }
+exports.isFeatureEnabled = isFeatureEnabled;
 
 
 /***/ }),
@@ -10165,10 +10344,16 @@ function isNodePosition(obj) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = void 0;
+exports.createEditorCore = exports.isFeatureEnabled = exports.EditorBase = exports.Editor = void 0;
 // Classes
 var Editor_1 = __webpack_require__(/*! ./editor/Editor */ "./packages/roosterjs-editor-core/lib/editor/Editor.ts");
 Object.defineProperty(exports, "Editor", { enumerable: true, get: function () { return Editor_1.default; } });
+var EditorBase_1 = __webpack_require__(/*! ./editor/EditorBase */ "./packages/roosterjs-editor-core/lib/editor/EditorBase.ts");
+Object.defineProperty(exports, "EditorBase", { enumerable: true, get: function () { return EditorBase_1.EditorBase; } });
+var isFeatureEnabled_1 = __webpack_require__(/*! ./editor/isFeatureEnabled */ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts");
+Object.defineProperty(exports, "isFeatureEnabled", { enumerable: true, get: function () { return isFeatureEnabled_1.isFeatureEnabled; } });
+var createEditorCore_1 = __webpack_require__(/*! ./editor/createEditorCore */ "./packages/roosterjs-editor-core/lib/editor/createEditorCore.ts");
+Object.defineProperty(exports, "createEditorCore", { enumerable: true, get: function () { return createEditorCore_1.createEditorCore; } });
 
 
 /***/ }),
@@ -10423,12 +10608,18 @@ function getBlockElementAtNode(rootNode, node) {
     // Find the head and leaf node in the block
     var headNode = findHeadTailLeafNode(node, containerBlockNode, false /*isTail*/);
     var tailNode = findHeadTailLeafNode(node, containerBlockNode, true /*isTail*/);
+    if (!headNode || !tailNode) {
+        return null;
+    }
     // At this point, we have the head and tail of a block, here are some examples and where head and tail point to
     // 1) &lt;root&gt;&lt;div&gt;hello&lt;br&gt;&lt;/div&gt;&lt;/root&gt;, head: hello, tail: &lt;br&gt;
     // 2) &lt;root&gt;&lt;div&gt;hello&lt;span style="font-family: Arial"&gt;world&lt;/span&gt;&lt;/div&gt;&lt;/root&gt;, head: hello, tail: world
     // Both are actually completely and exclusively wrapped in a parent div, and can be represented with a Node block
     // So we shall try to collapse as much as we can to the nearest common ancestor
     var nodes = (0, collapseNodes_1.default)(rootNode, headNode, tailNode, false /*canSplitParent*/);
+    if (nodes.length === 0) {
+        return null;
+    }
     headNode = nodes[0];
     tailNode = nodes[nodes.length - 1];
     if (headNode.parentNode != tailNode.parentNode) {
@@ -21125,15 +21316,16 @@ var ContentEdit = /** @class */ (function () {
         this.editor = editor;
         var allFeatures = (0, getAllFeatures_1.default)();
         (0, roosterjs_editor_dom_1.getObjectKeys)(allFeatures).forEach(function (key) {
+            var _a;
             var feature = allFeatures[key];
             var hasSettingForKey = _this.settingsOverride && _this.settingsOverride[key] !== undefined;
-            if ((hasSettingForKey && _this.settingsOverride[key]) ||
+            if ((hasSettingForKey && ((_a = _this.settingsOverride) === null || _a === void 0 ? void 0 : _a[key])) ||
                 (!hasSettingForKey && !feature.defaultDisabled)) {
                 _this.features.push(feature);
             }
         });
         this.features = this.features.concat(this.additionalFeatures || []);
-        this.features.forEach(function (feature) { return _this.editor.addContentEditFeature(feature); });
+        this.features.forEach(function (feature) { var _a; return (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.addContentEditFeature(feature); });
     };
     ContentEdit.prototype.disposeFeatures = function () {
         var _this = this;
@@ -21205,14 +21397,15 @@ function cacheGetLinkData(event, editor) {
             // This helps when we paste a link next to some existing character, and the text we got
             // from clipboard will only contain what we pasted, any existing characters will not
             // be included.
-            var clipboardData = event.eventType == 7 /* ContentChanged */ &&
+            var clipboardData = (event.eventType == 7 /* ContentChanged */ &&
                 event.source == "Paste" /* Paste */ &&
-                event.data;
-            var link = (0, roosterjs_editor_dom_1.matchLink)((clipboardData.text || '').trim());
+                event.data) ||
+                null;
+            var link = (0, roosterjs_editor_dom_1.matchLink)(((clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.text) || '').trim());
             var searcher = editor.getContentSearcherOfCursor(event);
             // In case the matched link is already inside a <A> tag, we do a range search.
             // getRangeFromText will return null if the given text is already in a LinkInlineElement
-            if (link && searcher.getRangeFromText(link.originalUrl, false /*exactMatch*/)) {
+            if (link && (searcher === null || searcher === void 0 ? void 0 : searcher.getRangeFromText(link.originalUrl, false /*exactMatch*/))) {
                 return link;
             }
             var word = searcher && searcher.getWordBefore();
@@ -21237,12 +21430,15 @@ function cacheGetLinkData(event, editor) {
 }
 function hasLinkBeforeCursor(event, editor) {
     var contentSearcher = editor.getContentSearcherOfCursor(event);
-    var inline = contentSearcher.getInlineElementBefore();
+    var inline = contentSearcher === null || contentSearcher === void 0 ? void 0 : contentSearcher.getInlineElementBefore();
     return inline instanceof roosterjs_editor_dom_1.LinkInlineElement;
 }
 function autoLink(event, editor) {
-    var anchor = editor.getDocument().createElement('a');
     var linkData = cacheGetLinkData(event, editor);
+    if (!linkData) {
+        return;
+    }
+    var anchor = editor.getDocument().createElement('a');
     // Need to get searcher before we enter the async callback since the callback can happen when cursor is moved to next line
     // and at that time a new searcher won't be able to find the link text to replace
     var searcher = editor.getContentSearcherOfCursor();
@@ -21250,7 +21446,7 @@ function autoLink(event, editor) {
     anchor.href = linkData.normalizedUrl;
     editor.runAsync(function (editor) {
         editor.addUndoSnapshot(function () {
-            (0, roosterjs_editor_api_1.replaceWithNode)(editor, linkData.originalUrl, anchor, false /* exactMatch */, searcher);
+            (0, roosterjs_editor_api_1.replaceWithNode)(editor, linkData.originalUrl, anchor, false /* exactMatch */, searcher !== null && searcher !== void 0 ? searcher : undefined);
             // The content at cursor has changed. Should also clear the cursor data cache
             (0, roosterjs_editor_dom_1.clearEventDataCache)(event);
             return anchor;
@@ -21266,6 +21462,91 @@ exports.AutoLinkFeatures = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/codeFeatures.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/codeFeatures.ts ***!
+  \********************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFeatures = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var RemoveCodeWhenEnterOnEmptyLine = {
+    keys: [13 /* ENTER */],
+    shouldHandleEvent: function (event, editor) {
+        var childOfCode = cacheGetCodeChild(event, editor);
+        return childOfCode && (0, roosterjs_editor_dom_1.isNodeEmpty)(childOfCode);
+    },
+    handleEvent: function (event, editor) {
+        event.rawEvent.preventDefault();
+        editor.addUndoSnapshot(function () {
+            splitCode(event, editor);
+        }, undefined /* changeSource */, true /* canUndoByBackspace */);
+    },
+};
+var RemoveCodeWhenBackspaceOnEmptyFirstLine = {
+    keys: [8 /* BACKSPACE */],
+    shouldHandleEvent: function (event, editor) {
+        var childOfCode = cacheGetCodeChild(event, editor);
+        return childOfCode && (0, roosterjs_editor_dom_1.isNodeEmpty)(childOfCode) && !childOfCode.previousSibling;
+    },
+    handleEvent: function (event, editor) {
+        event.rawEvent.preventDefault();
+        editor.addUndoSnapshot(function () { return splitCode(event, editor); });
+    },
+};
+function cacheGetCodeChild(event, editor) {
+    return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'CODE_CHILD', function () {
+        var _a;
+        var codeElement = (_a = editor.getElementAtCursor('code')) !== null && _a !== void 0 ? _a : editor.queryElements('code', 1 /* OnSelection */)[0];
+        if (codeElement) {
+            var pos = editor.getFocusedPosition();
+            var block = pos && editor.getBlockElementAtNode(pos.normalize().node);
+            if (block) {
+                var node = block.getStartNode() == codeElement.parentNode
+                    ? block.getStartNode()
+                    : block.collapseToSingleElement();
+                return (0, roosterjs_editor_dom_1.isNodeEmpty)(node) ? node : null;
+            }
+        }
+        return null;
+    });
+}
+function splitCode(event, editor) {
+    var currentContainer = cacheGetCodeChild(event, editor);
+    if (!(0, roosterjs_editor_dom_1.safeInstanceOf)(currentContainer, 'HTMLElement')) {
+        return;
+    }
+    var codeChild = currentContainer.querySelector('code');
+    if (!codeChild) {
+        var codeParent = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(currentContainer);
+        if (codeParent) {
+            (0, roosterjs_editor_dom_1.unwrap)(codeParent);
+        }
+        if ((0, roosterjs_editor_dom_1.safeInstanceOf)(currentContainer.parentElement, 'HTMLPreElement')) {
+            var preParent = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(currentContainer);
+            if (preParent) {
+                (0, roosterjs_editor_dom_1.unwrap)(preParent);
+            }
+        }
+    }
+    else {
+        //Content model
+        (0, roosterjs_editor_dom_1.unwrap)(codeChild);
+    }
+    editor.select(currentContainer, 0 /* Begin */);
+}
+exports.CodeFeatures = {
+    removeCodeWhenEnterOnEmptyLine: RemoveCodeWhenEnterOnEmptyLine,
+    removeCodeWhenBackspaceOnEmptyFirstLine: RemoveCodeWhenBackspaceOnEmptyFirstLine,
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/cursorFeatures.ts":
@@ -21284,7 +21565,7 @@ var NoCycleCursorMove = {
     keys: [37 /* LEFT */, 39 /* RIGHT */],
     allowFunctionKeys: true,
     shouldHandleEvent: function (event, editor, ctrlOrMeta) {
-        var range;
+        var range = null;
         var position;
         if (!ctrlOrMeta ||
             !(range = editor.getSelectionRange()) ||
@@ -21601,7 +21882,10 @@ function getBlockTraverser(editor, element) {
         return undefined;
     }
     var blockElement = (_a = editor.getBlockElementAtNode(element)) === null || _a === void 0 ? void 0 : _a.getStartNode();
-    return blockElement ? roosterjs_editor_dom_1.ContentTraverser.createBodyTraverser(blockElement, element) : undefined;
+    if (!blockElement || !(0, roosterjs_editor_dom_2.isBlockElement)(blockElement)) {
+        return undefined;
+    }
+    return roosterjs_editor_dom_1.ContentTraverser.createBodyTraverser(blockElement, element);
 }
 function cacheDelimiter(event, checkBefore, delimiter) {
     return (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'delimiter_cache_key_' + checkBefore, function () { return delimiter; });
@@ -21734,8 +22018,10 @@ var shouldHandleIndentationEvent = function (indenting) { return function (event
         cacheGetListElement(event, editor));
 }; };
 var handleIndentationEvent = function (indenting) { return function (event, editor) {
+    var currentElement = null;
     var isRTL = event.rawEvent.keyCode !== 9 /* TAB */ &&
-        (0, roosterjs_editor_dom_1.getComputedStyle)(editor.getElementAtCursor(), 'direction') == 'rtl';
+        (currentElement = editor.getElementAtCursor()) &&
+        (0, roosterjs_editor_dom_1.getComputedStyle)(currentElement, 'direction') == 'rtl';
     (0, roosterjs_editor_api_1.setIndentation)(editor, isRTL == indenting ? 1 /* Decrease */ : 0 /* Increase */);
     event.rawEvent.preventDefault();
 }; };
@@ -21743,20 +22029,39 @@ var handleIndentationEvent = function (indenting) { return function (event, edit
  * IndentWhenTab edit feature, provides the ability to indent current list when user press TAB
  */
 var IndentWhenTab = {
-    keys: roosterjs_editor_dom_1.Browser.isMac ? [9 /* TAB */] : [9 /* TAB */, 39 /* RIGHT */],
+    keys: [9 /* TAB */],
     shouldHandleEvent: shouldHandleIndentationEvent(true),
     handleEvent: handleIndentationEvent(true),
-    allowFunctionKeys: true,
 };
 /**
  * OutdentWhenShiftTab edit feature, provides the ability to outdent current list when user press Shift+TAB
  */
 var OutdentWhenShiftTab = {
-    keys: roosterjs_editor_dom_1.Browser.isMac ? [9 /* TAB */] : [9 /* TAB */, 37 /* LEFT */],
+    keys: [9 /* TAB */],
     shouldHandleEvent: shouldHandleIndentationEvent(false),
     handleEvent: handleIndentationEvent(false),
     allowFunctionKeys: true,
 };
+/**
+ * indentWhenAltShiftRight edit feature, provides the ability to indent or outdent current list when user press Alt+shift+Right
+ */
+var IndentWhenAltShiftRight = {
+    keys: [39 /* RIGHT */],
+    shouldHandleEvent: shouldHandleIndentationEvent(true),
+    handleEvent: handleIndentationEvent(true),
+    allowFunctionKeys: true,
+    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
+};
+/**
+ * outdentWhenAltShiftLeft edit feature, provides the ability to indent or outdent current list when user press Alt+shift+Left
+ */
+var OutdentWhenAltShiftLeft = {
+    keys: [37 /* LEFT */],
+    shouldHandleEvent: shouldHandleIndentationEvent(false),
+    handleEvent: handleIndentationEvent(false),
+    allowFunctionKeys: true,
+    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
+};
 /**
  * MergeInNewLine edit feature, provides the ability to merge current line into a new line when user press
  * BACKSPACE at beginning of a list item
@@ -21764,16 +22069,16 @@ var OutdentWhenShiftTab = {
 var MergeInNewLine = {
     keys: [8 /* BACKSPACE */],
     shouldHandleEvent: function (event, editor) {
-        var li = editor.getElementAtCursor('LI', null /*startFrom*/, event);
+        var li = editor.getElementAtCursor('LI', undefined /*startFrom*/, event);
         var range = editor.getSelectionRange();
         return li && (range === null || range === void 0 ? void 0 : range.collapsed) && (0, roosterjs_editor_dom_1.isPositionAtBeginningOf)(roosterjs_editor_dom_1.Position.getStart(range), li);
     },
     handleEvent: function (event, editor) {
-        var li = editor.getElementAtCursor('LI', null /*startFrom*/, event);
-        if (li.previousSibling) {
+        var li = editor.getElementAtCursor('LI', undefined /*startFrom*/, event);
+        if (li === null || li === void 0 ? void 0 : li.previousSibling) {
             (0, roosterjs_editor_api_1.blockFormat)(editor, function (region, start, end) {
-                var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, false /*includeSiblingList*/, li);
-                if (vList) {
+                var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, false /*includeSiblingList*/, li !== null && li !== void 0 ? li : undefined);
+                if (vList && start && end) {
                     vList.setIndentation(start, end, 1 /* Decrease */, true /*softOutdent*/);
                     vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
                     event.rawEvent.preventDefault();
@@ -21793,7 +22098,7 @@ var MergeInNewLine = {
 var OutdentWhenBackOn1stEmptyLine = {
     keys: [8 /* BACKSPACE */],
     shouldHandleEvent: function (event, editor) {
-        var li = editor.getElementAtCursor('LI', null /*startFrom*/, event);
+        var li = editor.getElementAtCursor('LI', undefined /*startFrom*/, event);
         return (li &&
             (0, roosterjs_editor_dom_1.isNodeEmpty)(li) &&
             !li.previousSibling &&
@@ -21808,12 +22113,13 @@ var OutdentWhenBackOn1stEmptyLine = {
 var MaintainListChainWhenDelete = {
     keys: [46 /* DELETE */],
     shouldHandleEvent: function (event, editor) {
-        var li = editor.getElementAtCursor('LI', null /*startFrom*/, event);
-        if (li) {
+        var li = editor.getElementAtCursor('LI', undefined /*startFrom*/, event);
+        var range = editor.getSelectionRange();
+        if (li || !range) {
             return false;
         }
-        var isAtEnd = roosterjs_editor_dom_1.Position.getEnd(editor.getSelectionRange()).isAtEnd;
-        var nextSibling = isAtEnd ? getCacheNextSibling(event, editor) : null;
+        var isAtEnd = roosterjs_editor_dom_1.Position.getEnd(range).isAtEnd;
+        var nextSibling = isAtEnd ? getCacheNextSibling(event, editor) : undefined;
         var isAtEndAndBeforeLI = editor.getElementAtCursor('LI', nextSibling, event);
         return isAtEndAndBeforeLI;
     },
@@ -21829,11 +22135,11 @@ var MaintainListChainWhenDelete = {
 var OutdentWhenEnterOnEmptyLine = {
     keys: [13 /* ENTER */],
     shouldHandleEvent: function (event, editor) {
-        var li = editor.getElementAtCursor('LI', null /*startFrom*/, event);
+        var li = editor.getElementAtCursor('LI', undefined /*startFrom*/, event);
         return !event.rawEvent.shiftKey && li && (0, roosterjs_editor_dom_1.isNodeEmpty)(li);
     },
     handleEvent: function (event, editor) {
-        editor.addUndoSnapshot(function () { return toggleListAndPreventDefault(event, editor, false /* includeSiblingLists */); }, null /*changeSource*/, true /*canUndoByBackspace*/);
+        editor.addUndoSnapshot(function () { return toggleListAndPreventDefault(event, editor, false /* includeSiblingLists */); }, undefined /*changeSource*/, true /*canUndoByBackspace*/);
     },
     defaultDisabled: !roosterjs_editor_dom_1.Browser.isIE && !roosterjs_editor_dom_1.Browser.isChrome,
 };
@@ -21855,9 +22161,10 @@ function isAListPattern(textBeforeCursor) {
 var AutoBullet = {
     keys: [32 /* SPACE */],
     shouldHandleEvent: function (event, editor) {
+        var searcher;
         if (!cacheGetListElement(event, editor) &&
-            !editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
-            var searcher = editor.getContentSearcherOfCursor(event);
+            !editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */) &&
+            (searcher = editor.getContentSearcherOfCursor(event))) {
             var textBeforeCursor = searcher.getSubStringBefore(4);
             // Auto list is triggered if:
             // 1. Text before cursor exactly matches '*', '-' or '1.'
@@ -21873,6 +22180,9 @@ var AutoBullet = {
             var _a;
             var regions;
             var searcher = editor.getContentSearcherOfCursor();
+            if (!searcher) {
+                return;
+            }
             var textBeforeCursor = searcher.getSubStringBefore(4);
             var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
             if (!textRange) {
@@ -21893,7 +22203,7 @@ var AutoBullet = {
                 (0, roosterjs_editor_api_1.toggleNumbering)(editor, num);
             }
             (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
-        }, null /*changeSource*/, true /*canUndoByBackspace*/);
+        }, undefined /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
 /**
@@ -21915,15 +22225,18 @@ var AutoBulletList = {
         editor.addUndoSnapshot(function () {
             var _a;
             var searcher = editor.getContentSearcherOfCursor();
+            if (!searcher) {
+                return;
+            }
             var textBeforeCursor = searcher.getSubStringBefore(5);
             var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
             var listStyle = (0, getAutoBulletListStyle_1.default)(textBeforeCursor);
             if (textRange) {
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleBullet)(editor, listStyle, 'autoToggleList' /** apiNameOverride */);
+                (0, roosterjs_editor_api_1.toggleBullet)(editor, listStyle !== null && listStyle !== void 0 ? listStyle : undefined, 'autoToggleList' /** apiNameOverride */);
             }
             (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
-        }, null /*changeSource*/, true /*canUndoByBackspace*/);
+        }, undefined /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
 /**
@@ -21943,8 +22256,11 @@ var AutoNumberingList = {
         editor.insertContent('&nbsp;');
         event.rawEvent.preventDefault();
         editor.addUndoSnapshot(function () {
-            var _a;
+            var _a, _b;
             var searcher = editor.getContentSearcherOfCursor();
+            if (!searcher) {
+                return;
+            }
             var textBeforeCursor = searcher.getSubStringBefore(5);
             var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
             if (textRange) {
@@ -21952,19 +22268,20 @@ var AutoNumberingList = {
                     ? 1
                     : parseInt(textBeforeCursor);
                 var isLi = getPreviousListItem(editor, textRange);
-                var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor);
+                var listStyle = (_a = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor)) !== null && _a !== void 0 ? _a : undefined;
                 prepareAutoBullet(editor, textRange);
                 (0, roosterjs_editor_api_1.toggleNumbering)(editor, isLi && number !== 1 ? undefined : number /** startNumber */, listStyle, 'autoToggleList' /** apiNameOverride */);
             }
-            (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
-        }, null /*changeSource*/, true /*canUndoByBackspace*/);
+            (_b = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _b === void 0 ? void 0 : _b.deleteContents();
+        }, undefined /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
 var getPreviousListItem = function (editor, textRange) {
+    var _a;
     var blockElement = editor
         .getBodyTraverser(textRange === null || textRange === void 0 ? void 0 : textRange.startContainer)
         .getPreviousBlockElement();
-    var previousNode = blockElement === null || blockElement === void 0 ? void 0 : blockElement.getEndNode();
+    var previousNode = (_a = blockElement === null || blockElement === void 0 ? void 0 : blockElement.getEndNode()) !== null && _a !== void 0 ? _a : null;
     return (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode) === 'LI' ? previousNode : undefined;
 };
 var getPreviousListType = function (editor, textRange, listType) {
@@ -22012,13 +22329,14 @@ function getCacheNextSibling(event, editor) {
     var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'nextSibling', function () {
         var _a;
         var range = editor.getSelectionRange();
-        var pos = roosterjs_editor_dom_1.Position.getEnd(range).normalize();
-        var traverser = editor.getBodyTraverser(pos.node);
+        var pos = range && roosterjs_editor_dom_1.Position.getEnd(range).normalize();
+        var traverser = pos && editor.getBodyTraverser(pos.node);
         return (_a = traverser === null || traverser === void 0 ? void 0 : traverser.getNextBlockElement()) === null || _a === void 0 ? void 0 : _a.getStartNode();
     });
     return element;
 }
 function prepareAutoBullet(editor, range) {
+    var _a;
     var block = editor.getBlockElementAtNode(range.startContainer);
     var endNode = block === null || block === void 0 ? void 0 : block.getEndNode();
     if (endNode && (0, roosterjs_editor_dom_1.getTagOfNode)(endNode) != 'BR') {
@@ -22027,7 +22345,7 @@ function prepareAutoBullet(editor, range) {
             endNode.appendChild(br);
         }
         else {
-            endNode.parentNode.insertBefore(br, endNode.nextSibling);
+            (_a = endNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, endNode.nextSibling);
         }
         editor.select(range.startContainer, range.startOffset);
     }
@@ -22039,19 +22357,22 @@ function toggleListAndPreventDefault(event, editor, includeSiblingLists) {
         var listElement = listInfo[0];
         var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(listElement);
         if (tag == 'UL' || tag == 'OL') {
-            (0, roosterjs_editor_api_1.toggleListType)(editor, tag == 'UL' ? 2 /* Unordered */ : 1 /* Ordered */, null /* startNumber */, includeSiblingLists);
+            (0, roosterjs_editor_api_1.toggleListType)(editor, tag == 'UL' ? 2 /* Unordered */ : 1 /* Ordered */, undefined /* startNumber */, includeSiblingLists);
         }
         editor.focus();
         event.rawEvent.preventDefault();
     }
 }
 function cacheGetListElement(event, editor) {
-    var li = editor.getElementAtCursor('LI,TABLE', null /*startFrom*/, event);
+    var li = editor.getElementAtCursor('LI,TABLE', undefined /*startFrom*/, event);
     var listElement = li && (0, roosterjs_editor_dom_1.getTagOfNode)(li) == 'LI' && editor.getElementAtCursor('UL,OL', li);
     return listElement ? [listElement, li] : null;
 }
 function shouldTriggerList(event, editor, getListStyle, listType) {
     var searcher = editor.getContentSearcherOfCursor(event);
+    if (!searcher) {
+        return false;
+    }
     var textBeforeCursor = searcher.getSubStringBefore(4);
     var traverser = editor.getBlockTraverser();
     var text = traverser && traverser.currentBlockElement
@@ -22060,9 +22381,9 @@ function shouldTriggerList(event, editor, getListStyle, listType) {
     var isATheBeginning = text && text === textBeforeCursor;
     var listChains = getListChains(editor);
     var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
-    var previousListType = getPreviousListType(editor, textRange, listType);
+    var previousListType = textRange && getPreviousListType(editor, textRange, listType);
     var isFirstItem = isFirstItemOfAList(textBeforeCursor);
-    var listStyle = getListStyle(textBeforeCursor, listChains, previousListType);
+    var listStyle = getListStyle(textBeforeCursor, listChains, previousListType !== null && previousListType !== void 0 ? previousListType : undefined);
     var shouldTriggerNewListStyle = isFirstItem ||
         !previousListType ||
         previousListType === listStyle ||
@@ -22138,6 +22459,8 @@ exports.ListFeatures = {
     autoNumberingList: AutoNumberingList,
     autoBulletList: AutoBulletList,
     mergeListOnBackspaceAfterList: MergeListOnBackspaceAfterList,
+    outdentWhenAltShiftLeft: OutdentWhenAltShiftLeft,
+    indentWhenAltShiftRight: IndentWhenAltShiftRight,
 };
 function isList(element) {
     return (!!element &&
@@ -22178,8 +22501,8 @@ function generateBasicMarkdownFeature(key, triggerCharacter, elementTag, useShif
 function cacheGetRangeForMarkdownOperation(event, editor, triggerCharacter) {
     return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'MARKDOWN_RANGE', function () {
         var searcher = editor.getContentSearcherOfCursor(event);
-        var startPosition;
-        var endPosition;
+        var startPosition = null;
+        var endPosition = null;
         searcher === null || searcher === void 0 ? void 0 : searcher.forEachTextInlineElement(function (textInlineElement) {
             if (endPosition && startPosition) {
                 return true;
@@ -22217,12 +22540,15 @@ function cacheGetRangeForMarkdownOperation(event, editor, triggerCharacter) {
                 }
             }
         });
-        return !!startPosition && !!endPosition && (0, roosterjs_editor_dom_1.createRange)(startPosition, endPosition);
+        return startPosition && endPosition && (0, roosterjs_editor_dom_1.createRange)(startPosition, endPosition);
     });
 }
 function handleMarkdownEvent(event, editor, triggerCharacter, elementTag) {
     editor.addUndoSnapshot(function () {
         var range = cacheGetRangeForMarkdownOperation(event, editor, triggerCharacter);
+        if (!range) {
+            return;
+        }
         var lastTypedTriggerPosition = new roosterjs_editor_dom_1.Position(range.endContainer, -1 /* End */);
         var hasLastTypedTrigger = range.endOffset + 1 <= lastTypedTriggerPosition.offset;
         if (!!range && hasLastTypedTrigger) {
@@ -22230,7 +22556,7 @@ function handleMarkdownEvent(event, editor, triggerCharacter, elementTag) {
             var textContentRange = range.cloneRange();
             textContentRange.setStart(textContentRange.startContainer, textContentRange.startOffset + 1);
             var text = textContentRange.extractContents().textContent;
-            var textNode = editor.getDocument().createTextNode(text);
+            var textNode = editor.getDocument().createTextNode(text !== null && text !== void 0 ? text : '');
             // extract content and put it into a new element.
             var elementToWrap = (0, roosterjs_editor_dom_1.wrap)(textNode, elementTag);
             //include last typed character
@@ -22314,7 +22640,7 @@ var UnquoteWhenEnterOnEmptyLine = {
         return !shift && childOfQuote && (0, roosterjs_editor_dom_1.isNodeEmpty)(childOfQuote);
     },
     handleEvent: function (event, editor) {
-        return editor.addUndoSnapshot(function () { return splitQuote(event, editor); }, null /*changeSource*/, true /*canUndoByBackspace*/);
+        return editor.addUndoSnapshot(function () { return splitQuote(event, editor); }, undefined /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
 function cacheGetQuoteChild(event, editor) {
@@ -22336,14 +22662,15 @@ function cacheGetQuoteChild(event, editor) {
 function splitQuote(event, editor) {
     editor.addUndoSnapshot(function () {
         var childOfQuote = cacheGetQuoteChild(event, editor);
-        var parent;
-        var shouldClearFormat;
+        if (!childOfQuote) {
+            return;
+        }
         if ((0, roosterjs_editor_dom_1.getTagOfNode)(childOfQuote) == QUOTE_TAG) {
             childOfQuote = (0, roosterjs_editor_dom_1.wrap)((0, roosterjs_editor_dom_1.toArray)(childOfQuote.childNodes));
         }
-        parent = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(childOfQuote);
-        shouldClearFormat = isStyledBlockquote(parent);
-        var newParent = (0, roosterjs_editor_dom_1.unwrap)(parent);
+        var parent = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(childOfQuote);
+        var shouldClearFormat = !!parent && isStyledBlockquote(parent);
+        var newParent = parent && (0, roosterjs_editor_dom_1.unwrap)(parent);
         editor.select(childOfQuote, 0 /* Begin */);
         if (shouldClearFormat) {
             if ((0, roosterjs_editor_dom_1.safeInstanceOf)(newParent, 'HTMLLIElement')) {
@@ -22509,7 +22836,8 @@ var InsertLineBeforeStructuredNodeFeature = {
         var element = cacheGetStructuredElement(event, editor);
         var div = (0, roosterjs_editor_dom_1.createElement)(1 /* EmptyLine */, editor.getDocument());
         editor.addUndoSnapshot(function () {
-            element.parentNode.insertBefore(div, element);
+            var _a;
+            (_a = element === null || element === void 0 ? void 0 : element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(div, element);
             // Select the new line when we are in table. This is the same behavior with Word
             if ((0, roosterjs_editor_dom_1.getTagOfNode)(element) == 'TABLE') {
                 editor.select(new roosterjs_editor_dom_1.Position(div, 0 /* Begin */).normalize());
@@ -22567,21 +22895,26 @@ var TabInTable = {
         return cacheGetTableCell(event, editor) && !cacheIsWholeTableSelected(event, editor);
     },
     handleEvent: function (event, editor) {
+        var _a, _b, _c;
         var shift = event.rawEvent.shiftKey;
         var td = cacheGetTableCell(event, editor);
+        if (!td) {
+            return;
+        }
         var vtable = cacheVTable(event, td);
-        for (var step = shift ? -1 : 1, row = vtable.row, col = vtable.col + step;; col += step) {
-            if (col < 0 || col >= vtable.cells[row].length) {
+        for (var step = shift ? -1 : 1, row = (_a = vtable.row) !== null && _a !== void 0 ? _a : 0, col = ((_b = vtable.col) !== null && _b !== void 0 ? _b : 0) + step;; col += step) {
+            var tableCells = (_c = vtable.cells) !== null && _c !== void 0 ? _c : [];
+            if (col < 0 || col >= tableCells[row].length) {
                 row += step;
                 if (row < 0) {
                     editor.select(vtable.table, -2 /* Before */);
                     break;
                 }
-                else if (row >= vtable.cells.length) {
+                else if (row >= tableCells.length) {
                     (0, roosterjs_editor_api_1.editTable)(editor, 1 /* InsertBelow */);
                     break;
                 }
-                col = shift ? vtable.cells[row].length - 1 : 0;
+                col = shift ? tableCells[row].length - 1 : 0;
             }
             var cell = vtable.getCell(row, col);
             if (cell.td) {
@@ -22607,6 +22940,9 @@ var IndentTableOnTab = {
             var shift = event.rawEvent.shiftKey;
             var selection = editor.getSelectionRangeEx();
             var td = cacheGetTableCell(event, editor);
+            if (!td) {
+                return;
+            }
             var vtable = cacheVTable(event, td);
             if (shift && editor.getElementAtCursor('blockquote', vtable.table, event)) {
                 (0, roosterjs_editor_api_1.setIndentation)(editor, 1 /* Decrease */);
@@ -22614,7 +22950,9 @@ var IndentTableOnTab = {
             else if (!shift) {
                 (0, roosterjs_editor_api_1.setIndentation)(editor, 0 /* Increase */);
             }
-            editor.select(selection.table, selection.coordinates);
+            if (selection.coordinates) {
+                editor.select(selection.table, selection.coordinates);
+            }
         });
     },
 };
@@ -22628,8 +22966,11 @@ var UpDownInTable = {
         return cacheGetTableCell(event, editor) && !cacheIsWholeTableSelected(event, editor);
     },
     handleEvent: function (event, editor) {
-        var _a;
+        var _a, _b, _c;
         var td = cacheGetTableCell(event, editor);
+        if (!td) {
+            return;
+        }
         var vtable = new roosterjs_editor_dom_1.VTable(td);
         var isUp = event.rawEvent.which == 38 /* UP */;
         var step = isUp ? -1 : 1;
@@ -22638,8 +22979,8 @@ var UpDownInTable = {
         var targetTd = null;
         if (selection) {
             var anchorNode_1 = selection.anchorNode, anchorOffset_1 = selection.anchorOffset;
-            for (var row = vtable.row; row >= 0 && row < vtable.cells.length; row += step) {
-                var cell = vtable.getCell(row, vtable.col);
+            for (var row = (_b = vtable.row) !== null && _b !== void 0 ? _b : 0; row >= 0 && vtable.cells && row < vtable.cells.length; row += step) {
+                var cell = vtable.getCell(row, (_c = vtable.col) !== null && _c !== void 0 ? _c : 0);
                 if (cell.td && cell.td != td) {
                     targetTd = cell.td;
                     break;
@@ -22660,7 +23001,9 @@ var UpDownInTable = {
                                 ? new roosterjs_editor_dom_1.Position(newPos.node, newPos.isAtEnd ? -3 /* After */ : -2 /* Before */)
                                 : newPos;
                         var selection_1 = (_a = editor.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
-                        selection_1 === null || selection_1 === void 0 ? void 0 : selection_1.setBaseAndExtent(anchorNode_1, anchorOffset_1, newPos.node, newPos.offset);
+                        if (anchorNode_1) {
+                            selection_1 === null || selection_1 === void 0 ? void 0 : selection_1.setBaseAndExtent(anchorNode_1, anchorOffset_1, newPos.node, newPos.offset);
+                        }
                     }
                     else {
                         editor.select(newPos.normalize());
@@ -22683,6 +23026,9 @@ var DeleteTableWithBackspace = {
     },
     handleEvent: function (event, editor) {
         var td = cacheGetTableCell(event, editor);
+        if (!td) {
+            return;
+        }
         var vtable = new roosterjs_editor_dom_1.VTable(td);
         vtable.edit(4 /* DeleteTable */);
         vtable.writeBack();
@@ -22698,9 +23044,13 @@ function cacheGetTableCell(event, editor) {
 function cacheIsWholeTableSelected(event, editor) {
     return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'WHOLE_TABLE_SELECTED_FOR_FEATURES', function () {
         var td = cacheGetTableCell(event, editor);
+        if (!td) {
+            return false;
+        }
         var vtable = cacheVTable(event, td);
         var selection = editor.getSelectionRangeEx();
         return (selection.type == 1 /* TableSelection */ &&
+            selection.coordinates &&
             (0, roosterjs_editor_dom_1.isWholeTableSelected)(vtable, selection.coordinates));
     });
 }
@@ -22750,7 +23100,7 @@ var IndentWhenTabText = {
         if (editor.isFeatureEnabled("TabKeyTextFeatures" /* TabKeyTextFeatures */) &&
             !event.rawEvent.shiftKey) {
             var activeElement = editor.getDocument().activeElement;
-            var listOrTable = editor.getElementAtCursor('LI,TABLE', null /*startFrom*/, event);
+            var listOrTable = editor.getElementAtCursor('LI,TABLE', undefined /*startFrom*/, event);
             var entity = editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), undefined /*startFrom*/, event);
             return (!listOrTable &&
                 (entity ? entity.isContentEditable : activeElement.isContentEditable));
@@ -22794,8 +23144,8 @@ var OutdentWhenTabText = {
             var selection = editor.getSelectionRangeEx();
             return (selection.type == 0 /* Normal */ &&
                 !selection.areAllCollapsed &&
-                editor.getElementAtCursor('blockquote', null, event) &&
-                !editor.getElementAtCursor('LI,TABLE', null /*startFrom*/, event) &&
+                editor.getElementAtCursor('blockquote', undefined, event) &&
+                !editor.getElementAtCursor('LI,TABLE', undefined /*startFrom*/, event) &&
                 shouldSetIndentation(editor, selection.ranges[0]));
         }
         return false;
@@ -22859,9 +23209,12 @@ function isRangeEmpty(range) {
 function insertTab(editor, event) {
     var span = editor.getDocument().createElement('span');
     var searcher = editor.getContentSearcherOfCursor(event);
+    if (!searcher) {
+        return;
+    }
     var charsBefore = searcher.getSubStringBefore(Number.MAX_SAFE_INTEGER);
     var numberOfChars = TAB_SPACES - (charsBefore.length % TAB_SPACES);
-    var span2;
+    var span2 = null;
     var textContent = '';
     for (var index = 0; index < numberOfChars; index++) {
         textContent += '&ensp;';
@@ -22918,7 +23271,8 @@ var shortcutFeatures_1 = __webpack_require__(/*! ./features/shortcutFeatures */
 var structuredNodeFeatures_1 = __webpack_require__(/*! ./features/structuredNodeFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/structuredNodeFeatures.ts");
 var tableFeatures_1 = __webpack_require__(/*! ./features/tableFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/tableFeatures.ts");
 var textFeatures_1 = __webpack_require__(/*! ./features/textFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/textFeatures.ts");
-var allFeatures = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, listFeatures_1.ListFeatures), quoteFeatures_1.QuoteFeatures), tableFeatures_1.TableFeatures), structuredNodeFeatures_1.StructuredNodeFeatures), autoLinkFeatures_1.AutoLinkFeatures), shortcutFeatures_1.ShortcutFeatures), cursorFeatures_1.CursorFeatures), markdownFeatures_1.MarkdownFeatures), entityFeatures_1.EntityFeatures), textFeatures_1.TextFeatures);
+var codeFeatures_1 = __webpack_require__(/*! ./features/codeFeatures */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/codeFeatures.ts");
+var allFeatures = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, listFeatures_1.ListFeatures), quoteFeatures_1.QuoteFeatures), tableFeatures_1.TableFeatures), structuredNodeFeatures_1.StructuredNodeFeatures), autoLinkFeatures_1.AutoLinkFeatures), shortcutFeatures_1.ShortcutFeatures), cursorFeatures_1.CursorFeatures), markdownFeatures_1.MarkdownFeatures), entityFeatures_1.EntityFeatures), textFeatures_1.TextFeatures), codeFeatures_1.CodeFeatures);
 /**
  * Get all content edit features provided by roosterjs
  */
@@ -23054,7 +23408,8 @@ var identifyNumberingType = function (text, previousListStyle) {
         return 1 /* Decimal */;
     }
     else if (/[a-z]+/g.test(text)) {
-        if ((lowerRomanTypes.indexOf(previousListStyle) > -1 &&
+        if ((previousListStyle != undefined &&
+            lowerRomanTypes.indexOf(previousListStyle) > -1 &&
             lowerRomanNumbers.indexOf(text[0]) > -1) ||
             (!previousListStyle && text === 'i')) {
             return 4 /* LowerRoman */;
@@ -23064,7 +23419,8 @@ var identifyNumberingType = function (text, previousListStyle) {
         }
     }
     else if (/[A-Z]+/g.test(text)) {
-        if ((upperRomanTypes.indexOf(previousListStyle) > -1 &&
+        if ((previousListStyle != undefined &&
+            upperRomanTypes.indexOf(previousListStyle) > -1 &&
             upperRomanNumbers.indexOf(text[0]) > -1) ||
             (!previousListStyle && text === 'I')) {
             return 5 /* UpperRoman */;
@@ -24179,6 +24535,7 @@ var ImageEdit = /** @class */ (function () {
             //Clone the image and insert the clone in a entity
             this.clonedImage = this.image.cloneNode(true);
             this.clonedImage.removeAttribute('id');
+            this.clonedImage.style.removeProperty('max-width');
             this.wrapper = (0, roosterjs_editor_dom_1.createElement)(6 /* ImageEditWrapper */, this.image.ownerDocument);
             (_b = (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.appendChild(this.clonedImage);
             this.wrapper.style.display = roosterjs_editor_dom_1.Browser.isSafari ? 'inline-block' : 'inline-flex';
@@ -24490,6 +24847,7 @@ function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
                 editor.addUndoSnapshot(function () {
                     (0, applyChange_1.default)(editor, image, editInfo, lastSrc_1 || '', true /*wasResized*/);
                 }, "ImageResize" /* ImageResize */);
+                editor.select(image);
             }
         });
     }
@@ -25511,6 +25869,7 @@ var Paste = /** @class */ (function () {
         if (convertSingleImageBody === void 0) { convertSingleImageBody = false; }
         this.unknownTagReplacement = unknownTagReplacement;
         this.convertSingleImageBody = convertSingleImageBody;
+        this.editor = null;
     }
     /**
      * Get a friendly name of  this plugin
@@ -25536,7 +25895,7 @@ var Paste = /** @class */ (function () {
      * @param event PluginEvent object
      */
     Paste.prototype.onPluginEvent = function (event) {
-        if (event.eventType == 10 /* BeforePaste */) {
+        if (this.editor && event.eventType == 10 /* BeforePaste */) {
             var fragment = event.fragment, sanitizingOption = event.sanitizingOption;
             var trustedHTMLHandler = this.editor.getTrustedHTMLHandler();
             switch ((0, getPasteSource_1.default)(event, this.convertSingleImageBody)) {
@@ -25545,22 +25904,23 @@ var Paste = /** @class */ (function () {
                     (0, convertPastedContentFromWord_1.default)(event);
                     break;
                 case 1 /* ExcelDesktop */:
+                case 2 /* ExcelOnline */:
                     // Handle HTML copied from Excel
                     (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
                     break;
-                case 2 /* PowerPointDesktop */:
+                case 3 /* PowerPointDesktop */:
                     (0, convertPastedContentFromPowerPoint_1.default)(event, trustedHTMLHandler);
                     break;
-                case 4 /* WacComponents */:
+                case 5 /* WacComponents */:
                     (0, convertPastedContentFromOfficeOnline_1.default)(fragment);
                     break;
-                case 3 /* GoogleSheets */:
+                case 4 /* GoogleSheets */:
                     sanitizingOption.additionalTagReplacements[constants_1.GOOGLE_SHEET_NODE_NAME] = '*';
                     break;
-                case 6 /* SingleImage */:
+                case 7 /* SingleImage */:
                     (0, convertPasteContentForSingleImage_1.default)(event, trustedHTMLHandler);
                     break;
-                case 5 /* Default */:
+                case 6 /* Default */:
                     (0, convertPastedContentForLI_1.default)(fragment);
                     (0, handleLineMerge_1.default)(fragment);
                     break;
@@ -25655,12 +26015,28 @@ var DEFAULT_BORDER_STYLE = 'solid 1px #d4d4d4';
  * @param event The BeforePaste event
  */
 function convertPastedContentFromExcel(event, trustedHTMLHandler) {
+    var _a, _b;
     var fragment = event.fragment, sanitizingOption = event.sanitizingOption, htmlBefore = event.htmlBefore, clipboardData = event.clipboardData;
-    var html = excelHandler(clipboardData.html, htmlBefore);
-    if (clipboardData.html != html) {
+    var fragmentHTML = (_b = (_a = fragment.firstElementChild) === null || _a === void 0 ? void 0 : _a.outerHTML) !== null && _b !== void 0 ? _b : clipboardData.html;
+    var html = fragmentHTML ? excelHandler(fragmentHTML, htmlBefore) : undefined;
+    if (html && fragmentHTML != html) {
         var doc = new DOMParser().parseFromString(trustedHTMLHandler(html), 'text/html');
         (0, roosterjs_editor_dom_1.moveChildNodes)(fragment, doc === null || doc === void 0 ? void 0 : doc.body);
     }
+    // For Excel Online
+    var firstChild = fragment.firstChild;
+    if (firstChild && firstChild.childNodes.length > 0 && (0, roosterjs_editor_dom_1.getTagOfNode)(firstChild) == 'DIV') {
+        var tableFound = Array.from(firstChild.childNodes).every(function (child) {
+            // Tables pasted from Excel Online should be of the format: 0 to N META tags and 1 TABLE tag
+            return (0, roosterjs_editor_dom_1.getTagOfNode)(child) == 'META'
+                ? true
+                : (0, roosterjs_editor_dom_1.getTagOfNode)(child) == 'TABLE' && child == firstChild.lastChild;
+        });
+        // Extract Table from Div
+        if (tableFound && firstChild.lastChild) {
+            event.fragment.replaceChildren(firstChild.lastChild);
+        }
+    }
     (0, roosterjs_editor_dom_1.chainSanitizerCallback)(sanitizingOption.elementCallbacks, 'TD', function (element) {
         if (element.style.borderStyle == 'none') {
             element.style.border = DEFAULT_BORDER_STYLE;
@@ -25774,21 +26150,23 @@ function handleLineMerge(root) {
 }
 exports.default = handleLineMerge;
 function processBlock(block) {
-    var _a, _b;
+    var _a, _b, _c;
     var start = block.start, end = block.end;
     if (start == end && (0, roosterjs_editor_dom_1.getTagOfNode)(start) == 'DIV') {
         var node = (0, roosterjs_editor_dom_1.changeElementTag)(start, 'SPAN');
         block.start = node;
         block.end = node;
-        if ((0, roosterjs_editor_dom_1.getTagOfNode)(node.lastChild) == 'BR') {
+        if (node && node.lastChild && (0, roosterjs_editor_dom_1.getTagOfNode)(node.lastChild) == 'BR') {
             node.removeChild(node.lastChild);
         }
     }
     else if ((0, roosterjs_editor_dom_1.getTagOfNode)(end) == 'BR') {
-        var node = end.ownerDocument.createTextNode('');
-        (_a = end.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(node, end);
-        block.end = node;
-        (_b = end.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(end);
+        var node = (_a = end.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTextNode('');
+        if (node) {
+            (_b = end.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(node, end);
+            block.end = node;
+            (_c = end.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(end);
+        }
     }
 }
 function checkAndAddBr(root, block, isFirst, firstBlock) {
@@ -25876,8 +26254,9 @@ var convertPastedContentFromWordOnline_1 = __webpack_require__(/*! ./convertPast
  */
 function convertPastedContentFromOfficeOnline(fragment) {
     fragment.querySelectorAll(constants_1.WAC_IDENTIFY_SELECTOR).forEach(function (el) {
-        el.style.display = null;
-        el.style.margin = null;
+        var element = el;
+        element.style.removeProperty('display');
+        element.style.removeProperty('margin');
     });
     // call conversion function if the pasted content is from word online and
     // has list element in the pasted content.
@@ -25957,6 +26336,7 @@ function convertPastedContentFromWordOnline(fragment) {
     sanitizeListItemContainer(fragment);
     var listItemBlocks = getListItemBlocks(fragment);
     listItemBlocks.forEach(function (itemBlock) {
+        var _a, _b, _c;
         // There are cases where consecutive List Elements are separated into different nodes:
         // <div>
         //   <div>
@@ -25986,37 +26366,47 @@ function convertPastedContentFromWordOnline(fragment) {
         // Then we are start processing.
         flattenListBlock(fragment, itemBlock);
         // Find the node to insertBefore, which is next sibling node of the end of a listItemBlock.
-        itemBlock.insertPositionNode = itemBlock.endElement.nextSibling;
-        var convertedListElement;
+        itemBlock.insertPositionNode = (_b = (_a = itemBlock.endElement) === null || _a === void 0 ? void 0 : _a.nextSibling) !== null && _b !== void 0 ? _b : null;
+        var convertedListElement = undefined;
         var doc = fragment.ownerDocument;
         itemBlock.listItemContainers.forEach(function (listItemContainer) {
             var listType = getContainerListType(listItemContainer); // list type that is contained by iterator.
-            // Initialize processed element with proper listType if this is the first element
-            if (!convertedListElement) {
-                convertedListElement = createNewList(listItemContainer, doc, listType);
-            }
-            // Get all list items(<li>) in the current iterator element.
-            var currentListItems = (0, roosterjs_editor_dom_1.toArray)(listItemContainer.querySelectorAll('li'));
-            currentListItems.forEach(function (item) {
-                // If item is in root level and the type of list changes then
-                // insert the current list into body and then reinitialize the convertedListElement
-                // Word Online is using data-aria-level to determine the the depth of the list item.
-                var itemLevel = parseInt(item.getAttribute('data-aria-level'));
-                // In first level list, there are cases where a consecutive list item DIV may have different list type
-                // When that happens we need to insert the processed elements into the document, then change the list type
-                // and keep the processing going.
-                if ((0, roosterjs_editor_dom_1.getTagOfNode)(convertedListElement) != listType && itemLevel == 1) {
-                    insertConvertedListToDoc(convertedListElement, fragment, itemBlock);
+            if (listType) {
+                // Initialize processed element with proper listType if this is the first element
+                if (!convertedListElement) {
                     convertedListElement = createNewList(listItemContainer, doc, listType);
                 }
-                insertListItem(convertedListElement, item, listType, doc);
-            });
+                // Get all list items(<li>) in the current iterator element.
+                var currentListItems = (0, roosterjs_editor_dom_1.toArray)(listItemContainer.querySelectorAll('li'));
+                currentListItems.forEach(function (item) {
+                    var _a;
+                    // If item is in root level and the type of list changes then
+                    // insert the current list into body and then reinitialize the convertedListElement
+                    // Word Online is using data-aria-level to determine the the depth of the list item.
+                    var itemLevel = parseInt((_a = item.getAttribute('data-aria-level')) !== null && _a !== void 0 ? _a : '');
+                    // In first level list, there are cases where a consecutive list item DIV may have different list type
+                    // When that happens we need to insert the processed elements into the document, then change the list type
+                    // and keep the processing going.
+                    if (convertedListElement &&
+                        (0, roosterjs_editor_dom_1.getTagOfNode)(convertedListElement) != listType &&
+                        itemLevel == 1 &&
+                        listType) {
+                        insertConvertedListToDoc(convertedListElement, fragment, itemBlock);
+                        convertedListElement = createNewList(listItemContainer, doc, listType);
+                    }
+                    if (convertedListElement && listType) {
+                        insertListItem(convertedListElement, item, listType, doc);
+                    }
+                });
+            }
         });
-        insertConvertedListToDoc(convertedListElement, fragment, itemBlock);
+        if (convertedListElement) {
+            insertConvertedListToDoc(convertedListElement, fragment, itemBlock);
+        }
         // Once we finish the process the list items and put them into a list.
         // After inserting the processed element,
         // we need to remove all the non processed node from the parent node.
-        var parentContainer = itemBlock.startElement.parentNode;
+        var parentContainer = (_c = itemBlock.startElement) === null || _c === void 0 ? void 0 : _c.parentNode;
         if (parentContainer) {
             itemBlock.listItemContainers.forEach(function (listItemContainer) {
                 parentContainer.removeChild(listItemContainer);
@@ -26036,8 +26426,9 @@ function convertPastedContentFromWordOnline(fragment) {
         //   Removing the nodes that are not img will resolve the additional space
         if ((0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLSpanElement')) {
             node.childNodes.forEach(function (childNode) {
+                var _a;
                 if ((0, roosterjs_editor_dom_1.getTagOfNode)(childNode) != 'IMG') {
-                    childNode.parentElement.removeChild(childNode);
+                    (_a = childNode.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(childNode);
                 }
             });
         }
@@ -26079,7 +26470,7 @@ function sanitizeListItemContainer(fragment) {
 function getListItemBlocks(fragment) {
     var listElements = fragment.querySelectorAll('.' + LIST_CONTAINER_ELEMENT_CLASS_NAME);
     var result = [];
-    var curListItemBlock;
+    var curListItemBlock = null;
     for (var i = 0; i < listElements.length; i++) {
         var curItem = listElements[i];
         if (!curListItemBlock) {
@@ -26089,8 +26480,9 @@ function getListItemBlocks(fragment) {
             var listItemContainers = curListItemBlock.listItemContainers;
             var lastItemInCurBlock = listItemContainers[listItemContainers.length - 1];
             if (curItem == lastItemInCurBlock.nextSibling ||
-                (0, roosterjs_editor_dom_1.getFirstLeafNode)(curItem) ==
-                    (0, roosterjs_editor_dom_1.getNextLeafSibling)(lastItemInCurBlock.parentNode, lastItemInCurBlock)) {
+                (lastItemInCurBlock.parentNode &&
+                    (0, roosterjs_editor_dom_1.getFirstLeafNode)(curItem) ==
+                        (0, roosterjs_editor_dom_1.getNextLeafSibling)(lastItemInCurBlock.parentNode, lastItemInCurBlock))) {
                 listItemContainers.push(curItem);
                 curListItemBlock.endElement = curItem;
             }
@@ -26101,7 +26493,7 @@ function getListItemBlocks(fragment) {
             }
         }
     }
-    if ((curListItemBlock === null || curListItemBlock === void 0 ? void 0 : curListItemBlock.listItemContainers.length) > 0) {
+    if (curListItemBlock && curListItemBlock.listItemContainers.length > 0) {
         result.push(curListItemBlock);
     }
     return result;
@@ -26112,12 +26504,14 @@ function getListItemBlocks(fragment) {
  * @param listItemBlock The list item block needed to be flattened.
  */
 function flattenListBlock(fragment, listItemBlock) {
-    var collapsedListItemSections = (0, roosterjs_editor_dom_1.collapseNodes)(fragment, listItemBlock.startElement, listItemBlock.endElement, true);
-    collapsedListItemSections.forEach(function (section) {
-        if ((0, roosterjs_editor_dom_1.getTagOfNode)(section.firstChild) == 'DIV') {
-            (0, roosterjs_editor_dom_1.unwrap)(section);
-        }
-    });
+    if (listItemBlock.startElement && listItemBlock.endElement) {
+        var collapsedListItemSections = (0, roosterjs_editor_dom_1.collapseNodes)(fragment, listItemBlock.startElement, listItemBlock.endElement, true);
+        collapsedListItemSections.forEach(function (section) {
+            if ((0, roosterjs_editor_dom_1.getTagOfNode)(section.firstChild) == 'DIV') {
+                (0, roosterjs_editor_dom_1.unwrap)(section);
+            }
+        });
+    }
 }
 /**
  * Get the list type that the container contains. If there is no list in the container
@@ -26155,14 +26549,16 @@ function insertListItem(listRootElement, itemToInsert, listType, doc) {
             // If the current level is empty, create empty list within the current level
             // then move the level iterator into the next level.
             curListLevel.appendChild(doc.createElement(listType));
-            curListLevel = curListLevel.firstElementChild;
+            if (curListLevel.firstElementChild) {
+                curListLevel = curListLevel.firstElementChild;
+            }
         }
         else {
             // If the current level is not empty, the last item in the needs to be a UL or OL
             // and the level iterator should move to the UL/OL at the last position.
             var lastChild = curListLevel.lastElementChild;
             var lastChildTag = (0, roosterjs_editor_dom_1.getTagOfNode)(lastChild);
-            if (lastChildTag == 'UL' || lastChildTag == 'OL') {
+            if (lastChild && (lastChildTag == 'UL' || lastChildTag == 'OL')) {
                 // If the last child is a list(UL/OL), then move the level iterator to last child.
                 curListLevel = lastChild;
             }
@@ -26170,7 +26566,9 @@ function insertListItem(listRootElement, itemToInsert, listType, doc) {
                 // If the last child is not a list, then append a new list to the level
                 // and move the level iterator to the new level.
                 curListLevel.appendChild(doc.createElement(listType));
-                curListLevel = curListLevel.lastElementChild;
+                if (curListLevel.lastElementChild) {
+                    curListLevel = curListLevel.lastElementChild;
+                }
             }
         }
         itemLevel--;
@@ -26185,6 +26583,7 @@ function insertListItem(listRootElement, itemToInsert, listType, doc) {
  * @param listItemBlock List item block that was converted.
  */
 function insertConvertedListToDoc(convertedListElement, fragment, listItemBlock) {
+    var _a;
     if (!convertedListElement) {
         return;
     }
@@ -26196,7 +26595,7 @@ function insertConvertedListToDoc(convertedListElement, fragment, listItemBlock)
         }
     }
     else {
-        var parentNode = listItemBlock.startElement.parentNode;
+        var parentNode = (_a = listItemBlock.startElement) === null || _a === void 0 ? void 0 : _a.parentNode;
         if (parentNode) {
             parentNode.appendChild(convertedListElement);
         }
@@ -26367,7 +26766,7 @@ function validateLink(link, htmlElement) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WAC_IDENTIFY_SELECTOR = exports.PROG_ID_NAME = exports.GOOGLE_SHEET_NODE_NAME = void 0;
+exports.EXCEL_DESKTOP_ATTRIBUTE_NAME = exports.WAC_IDENTIFY_SELECTOR = exports.PROG_ID_NAME = exports.GOOGLE_SHEET_NODE_NAME = void 0;
 /**
  * @internal
  * Node attribute used to identify if the content is from Google Sheets.
@@ -26383,6 +26782,11 @@ exports.PROG_ID_NAME = 'ProgId';
  * Selector used to identify Wac Elements
  */
 exports.WAC_IDENTIFY_SELECTOR = 'ul[class^="BulletListStyle"]>.OutlineElement,ol[class^="NumberListStyle"]>.OutlineElement,span.WACImageContainer';
+/**
+ * @internal
+ * Name of the HTMLMeta Property that identifies pated content as from Excel Desktop
+ */
+exports.EXCEL_DESKTOP_ATTRIBUTE_NAME = 'xmlns:x';
 
 
 /***/ }),
@@ -26425,6 +26829,7 @@ exports.default = documentContainWacElements;
 Object.defineProperty(exports, "__esModule", { value: true });
 var documentContainWacElements_1 = __webpack_require__(/*! ./documentContainWacElements */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/documentContainWacElements.ts");
 var isExcelDesktopDocument_1 = __webpack_require__(/*! ./isExcelDesktopDocument */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isExcelDesktopDocument.ts");
+var isExcelOnlineDocument_1 = __webpack_require__(/*! ./isExcelOnlineDocument */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isExcelOnlineDocument.ts");
 var isGoogleSheetDocument_1 = __webpack_require__(/*! ./isGoogleSheetDocument */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isGoogleSheetDocument.ts");
 var isPowerPointDesktopDocument_1 = __webpack_require__(/*! ./isPowerPointDesktopDocument */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isPowerPointDesktopDocument.ts");
 var isWordDesktopDocument_1 = __webpack_require__(/*! ./isWordDesktopDocument */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isWordDesktopDocument.ts");
@@ -26432,10 +26837,11 @@ var shouldConvertToSingleImage_1 = __webpack_require__(/*! ./shouldConvertToSing
 var getSourceFunctions = new Map([
     [0 /* WordDesktop */, isWordDesktopDocument_1.default],
     [1 /* ExcelDesktop */, isExcelDesktopDocument_1.default],
-    [2 /* PowerPointDesktop */, isPowerPointDesktopDocument_1.default],
-    [4 /* WacComponents */, documentContainWacElements_1.default],
-    [3 /* GoogleSheets */, isGoogleSheetDocument_1.default],
-    [6 /* SingleImage */, shouldConvertToSingleImage_1.default],
+    [2 /* ExcelOnline */, isExcelOnlineDocument_1.default],
+    [3 /* PowerPointDesktop */, isPowerPointDesktopDocument_1.default],
+    [5 /* WacComponents */, documentContainWacElements_1.default],
+    [4 /* GoogleSheets */, isGoogleSheetDocument_1.default],
+    [7 /* SingleImage */, shouldConvertToSingleImage_1.default],
 ]);
 /**
  * @internal
@@ -26458,7 +26864,7 @@ function getPasteSource(event, shouldConvertSingleImage) {
             result = key;
         }
     });
-    return result !== null && result !== void 0 ? result : 5 /* Default */;
+    return result !== null && result !== void 0 ? result : 6 /* Default */;
 }
 exports.default = getPasteSource;
 
@@ -26476,9 +26882,7 @@ exports.default = getPasteSource;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var constants_1 = __webpack_require__(/*! ./constants */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/constants.ts");
-var EXCEL_ATTRIBUTE_NAME = 'xmlns:x';
 var EXCEL_ATTRIBUTE_VALUE = 'urn:schemas-microsoft-com:office:excel';
-var EXCEL_ONLINE_ATTRIBUTE_VALUE = 'Excel.Sheet';
 /**
  * @internal
  * Checks whether the Array provided contains strings that identify Excel Desktop documents
@@ -26487,12 +26891,42 @@ var EXCEL_ONLINE_ATTRIBUTE_VALUE = 'Excel.Sheet';
  */
 var isExcelDesktopDocument = function (props) {
     var htmlAttributes = props.htmlAttributes;
-    return (htmlAttributes[EXCEL_ATTRIBUTE_NAME] == EXCEL_ATTRIBUTE_VALUE ||
-        htmlAttributes[constants_1.PROG_ID_NAME] == EXCEL_ONLINE_ATTRIBUTE_VALUE);
+    // The presence of this attribute confirms its origin from Excel Desktop
+    return htmlAttributes[constants_1.EXCEL_DESKTOP_ATTRIBUTE_NAME] == EXCEL_ATTRIBUTE_VALUE;
 };
 exports.default = isExcelDesktopDocument;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isExcelOnlineDocument.ts":
+/*!********************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isExcelOnlineDocument.ts ***!
+  \********************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var constants_1 = __webpack_require__(/*! ./constants */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/constants.ts");
+// Excel Desktop also has this attribute
+var EXCEL_ONLINE_ATTRIBUTE_VALUE = 'Excel.Sheet';
+/**
+ * @internal
+ * Checks whether the Array provided contains strings that identify Excel Online documents
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+var isExcelOnlineDocument = function (props) {
+    var htmlAttributes = props.htmlAttributes;
+    // The presence of Excel.Sheet confirms its origin from Excel, the absence of EXCEL_DESKTOP_ATTRIBUTE_NAME confirms it is from the Online version
+    return (htmlAttributes[constants_1.PROG_ID_NAME] == EXCEL_ONLINE_ATTRIBUTE_VALUE &&
+        htmlAttributes[constants_1.EXCEL_DESKTOP_ATTRIBUTE_NAME] == undefined);
+};
+exports.default = isExcelOnlineDocument;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isGoogleSheetDocument.ts":
@@ -26932,7 +27366,11 @@ var LINE_BREAKS = /[\n|\r]/gi;
  * for numbered headers, and we don't want to convert those, because the numbering would be completely wrong.
  */
 function processNodesDiscovery(wordConverter) {
+    var _a;
     var args = wordConverter.wordConverterArgs;
+    if (!args) {
+        return false;
+    }
     while (args.currentIndex < args.nodes.length) {
         var node = args.nodes.item(args.currentIndex);
         // Try to get the list metadata for the specified node
@@ -27021,7 +27459,7 @@ function processNodesDiscovery(wordConverter) {
                 last.appendChild(last.ownerDocument.createElement('br'));
                 (0, roosterjs_editor_dom_1.moveChildNodes)(last, node, true /*keepExistingChildren*/);
                 // Remove the item that we don't need anymore
-                node.parentNode.removeChild(node);
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
             }
         }
         // Move to the next element are return true if more elements need to be processed
@@ -27037,44 +27475,47 @@ exports.processNodesDiscovery = processNodesDiscovery;
  * conversion needed
  */
 function processNodeConvert(wordConverter) {
+    var _a;
     var args = wordConverter.wordConverterArgs;
-    args.currentIndex = 0;
-    while (args.currentIndex < args.listItems.length) {
-        var metadata = args.listItems[args.currentIndex];
-        var node = metadata.originalNode;
-        var listMetadata = args.lists[metadata.uniqueListId.toString()];
-        if (!listMetadata.ignore) {
-            // We have a list item that we need to convert, get or create the list
-            // that hold this item out
-            var list = getOrCreateListForNode(wordConverter, node, metadata, listMetadata);
-            if (list) {
-                // Clean the element out.. this call gets rid of the fake bullet and unneeded nodes
-                cleanupListIgnore(node, LOOKUP_DEPTH);
-                // Create a new list item and transfer the children
-                var li = node.ownerDocument.createElement('LI');
-                if ((0, roosterjs_editor_dom_1.getTagOfNode)(node).startsWith('H')) {
-                    var clone = node.cloneNode(true /* deep */);
-                    clone.style.textIndent = '';
-                    clone.style.marginLeft = '';
-                    clone.style.marginRight = '';
-                    li.appendChild(clone);
-                }
-                else {
-                    (0, roosterjs_editor_dom_1.moveChildNodes)(li, node);
-                }
-                // Append the list item into the list
-                list.appendChild(li);
-                // Remove the node we just converted
-                node.parentNode.removeChild(node);
-                if (listMetadata.tagName == 'UL') {
-                    wordConverter.numBulletsConverted++;
-                }
-                else {
-                    wordConverter.numNumberedConverted++;
+    if (args) {
+        args.currentIndex = 0;
+        while (args.currentIndex < args.listItems.length) {
+            var metadata = args.listItems[args.currentIndex];
+            var node = metadata.originalNode;
+            var listMetadata = args.lists[metadata.uniqueListId.toString()];
+            if (!listMetadata.ignore) {
+                // We have a list item that we need to convert, get or create the list
+                // that hold this item out
+                var list = getOrCreateListForNode(wordConverter, node, metadata, listMetadata);
+                if (list) {
+                    // Clean the element out.. this call gets rid of the fake bullet and unneeded nodes
+                    cleanupListIgnore(node, LOOKUP_DEPTH);
+                    // Create a new list item and transfer the children
+                    var li = node.ownerDocument.createElement('LI');
+                    if ((0, roosterjs_editor_dom_1.getTagOfNode)(node).startsWith('H')) {
+                        var clone = node.cloneNode(true /* deep */);
+                        clone.style.textIndent = '';
+                        clone.style.marginLeft = '';
+                        clone.style.marginRight = '';
+                        li.appendChild(clone);
+                    }
+                    else {
+                        (0, roosterjs_editor_dom_1.moveChildNodes)(li, node);
+                    }
+                    // Append the list item into the list
+                    list.appendChild(li);
+                    // Remove the node we just converted
+                    (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+                    if (listMetadata.tagName == 'UL') {
+                        wordConverter.numBulletsConverted++;
+                    }
+                    else {
+                        wordConverter.numNumberedConverted++;
+                    }
                 }
             }
+            args.currentIndex++;
         }
-        args.currentIndex++;
     }
     return wordConverter.numBulletsConverted > 0 || wordConverter.numNumberedConverted > 0;
 }
@@ -27084,6 +27525,7 @@ exports.processNodeConvert = processNodeConvert;
  * items content and the specified metadata
  */
 function getOrCreateListForNode(wordConverter, node, metadata, listMetadata) {
+    var _a;
     // First get the last list next to this node under the specified level. This code
     // path will return the list or will create lists if needed
     var list = recurringGetOrCreateListAtNode(node, metadata.level, listMetadata);
@@ -27095,7 +27537,7 @@ function getOrCreateListForNode(wordConverter, node, metadata, listMetadata) {
     // is a completely new list, so we'll append a new list for that
     if ((listId && listId != metadata.uniqueListId) || (!listId && list.firstChild)) {
         var newList = node.ownerDocument.createElement(listMetadata.tagName);
-        list.parentNode.insertBefore(newList, list.nextSibling);
+        (_a = list.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newList, list.nextSibling);
         list = newList;
     }
     // Set the list id into the custom data
@@ -27110,15 +27552,18 @@ function getOrCreateListForNode(wordConverter, node, metadata, listMetadata) {
  * information already stored in the list itself
  */
 function convertListIfNeeded(wordConverter, list, listMetadata) {
+    var _a, _b, _c;
     // Check if we need to convert the list out
     if (listMetadata.tagName != (0, roosterjs_editor_dom_1.getTagOfNode)(list)) {
         // We have the wrong list type.. convert it, set the id again and transfer all the children
-        var newList = list.ownerDocument.createElement(listMetadata.tagName);
-        (0, WordCustomData_1.setObject)(wordConverter.wordCustomData, newList, UNIQUE_LIST_ID_CUSTOM_DATA, (0, WordCustomData_1.getObject)(wordConverter.wordCustomData, list, UNIQUE_LIST_ID_CUSTOM_DATA));
-        (0, roosterjs_editor_dom_1.moveChildNodes)(newList, list);
-        list.parentNode.insertBefore(newList, list);
-        list.parentNode.removeChild(list);
-        list = newList;
+        var newList = (_a = list.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(listMetadata.tagName);
+        if (newList) {
+            (0, WordCustomData_1.setObject)(wordConverter.wordCustomData, newList, UNIQUE_LIST_ID_CUSTOM_DATA, (0, WordCustomData_1.getObject)(wordConverter.wordCustomData, list, UNIQUE_LIST_ID_CUSTOM_DATA));
+            (0, roosterjs_editor_dom_1.moveChildNodes)(newList, list);
+            (_b = list.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(newList, list);
+            (_c = list.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(list);
+            list = newList;
+        }
     }
     return list;
 }
@@ -27126,8 +27571,9 @@ function convertListIfNeeded(wordConverter, list, listMetadata) {
  * Gets or creates the specified list
  */
 function recurringGetOrCreateListAtNode(node, level, listMetadata) {
+    var _a, _b;
     var parent = null;
-    var possibleList;
+    var possibleList = null;
     if (level == 1) {
         // Root case, we'll check if the list is the previous sibling of the node
         possibleList = getRealPreviousSibling(node);
@@ -27136,7 +27582,9 @@ function recurringGetOrCreateListAtNode(node, level, listMetadata) {
         // If we get here, we are looking for level 2 or deeper... get the upper list
         // and check if the last element is a list
         parent = recurringGetOrCreateListAtNode(node, level - 1, null);
-        possibleList = parent.lastChild;
+        if (parent.lastChild) {
+            possibleList = parent.lastChild;
+        }
     }
     // Check the element that we got and verify that it is a list
     if (possibleList && possibleList.nodeType == 1 /* Element */) {
@@ -27148,15 +27596,15 @@ function recurringGetOrCreateListAtNode(node, level, listMetadata) {
     }
     // If we get here, it means we don't have a list and we need to create one
     // this code path will always create new lists as UL lists
-    var newList = node.ownerDocument.createElement(listMetadata ? listMetadata.tagName : 'UL');
+    var newList = (_a = node.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement(listMetadata ? listMetadata.tagName : 'UL');
     if (level == 1) {
         // For level 1, we'll insert the list before the node
-        node.parentNode.insertBefore(newList, node);
+        (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(newList, node);
     }
     else {
         // Any level 2 or above, we insert the list as the last
         // child of the upper level list
-        parent.appendChild(newList);
+        parent === null || parent === void 0 ? void 0 : parent.appendChild(newList);
     }
     return newList;
 }
@@ -27168,15 +27616,17 @@ function recurringGetOrCreateListAtNode(node, level, listMetadata) {
 function cleanupListIgnore(node, levels) {
     var nodesToRemove = [];
     for (var child = node.firstChild; child; child = child.nextSibling) {
-        // Clean up the item internally first if we need to based on the number of levels
-        if (child.nodeType == 1 /* Element */ && levels > 1) {
-            cleanupListIgnore(child, levels - 1);
-        }
-        // Try to convert word comments into ignore elements if we haven't done so for this element
-        child = fixWordListComments(child, true /*removeComments*/);
-        // Check if we can remove this item out
-        if (isEmptySpan(child) || isIgnoreNode(child)) {
-            nodesToRemove.push(child);
+        if (child) {
+            // Clean up the item internally first if we need to based on the number of levels
+            if (child && child.nodeType == 1 /* Element */ && levels > 1) {
+                cleanupListIgnore(child, levels - 1);
+            }
+            // Try to convert word comments into ignore elements if we haven't done so for this element
+            child = fixWordListComments(child, true /*removeComments*/);
+            // Check if we can remove this item out
+            if (isEmptySpan(child) || isIgnoreNode(child)) {
+                nodesToRemove.push(child);
+            }
         }
     }
     nodesToRemove.forEach(function (child) { return node.removeChild(child); });
@@ -27225,6 +27675,7 @@ function getFakeBulletTagName(fakeBullet) {
  * a bullet string. If not found, it returns null...
  */
 function getFakeBulletText(node, levels) {
+    var _a, _b;
     // Word uses the following format for their bullets:
     // &lt;p style="mso-list:l1 level1 lfo2"&gt;
     // &lt;span style="..."&gt;
@@ -27235,7 +27686,7 @@ function getFakeBulletText(node, levels) {
     //
     // Basically, we need to locate the mso-list:Ignore SPAN, which holds either one text or image node. That
     // text or image node will be the fake bullet we are looking for
-    var result = null;
+    var result = '';
     var child = node.firstChild;
     while (!result && child) {
         // First, check if we need to convert the Word list comments into real elements
@@ -27243,7 +27694,7 @@ function getFakeBulletText(node, levels) {
         // Check if this is the node that holds the fake bullets (mso-list: Ignore)
         if (isIgnoreNode(child)) {
             // Yes... this is the node that holds either the text or image data
-            result = child.textContent.trim();
+            result = (_b = (_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
             // This is the case for image case
             if (result.length == 0) {
                 result = 'o';
@@ -27267,6 +27718,7 @@ function getFakeBulletText(node, levels) {
  * styles of the span, but we'll use these comments to recreate them out
  */
 function fixWordListComments(child, removeComments) {
+    var _a, _b, _c, _d;
     if (child.nodeType == 8 /* Comment */) {
         var value = child.data;
         if (value && value.trim().toLowerCase() == '[if !supportlists]') {
@@ -27289,22 +27741,28 @@ function fixWordListComments(child, removeComments) {
             }
             // if we found the end node, wrap everything out
             if (endComment) {
-                var newSpan = child.ownerDocument.createElement('span');
-                newSpan.setAttribute('style', 'mso-list: ignore');
+                var newSpan = (_a = child.ownerDocument) === null || _a === void 0 ? void 0 : _a.createElement('span');
+                newSpan === null || newSpan === void 0 ? void 0 : newSpan.setAttribute('style', 'mso-list: ignore');
                 nextElement = getRealNextSibling(child);
                 while (nextElement != endComment) {
-                    nextElement = nextElement.nextSibling;
-                    newSpan.appendChild(nextElement.previousSibling);
+                    nextElement = nextElement === null || nextElement === void 0 ? void 0 : nextElement.nextSibling;
+                    if (nextElement.previousSibling) {
+                        newSpan === null || newSpan === void 0 ? void 0 : newSpan.appendChild(nextElement.previousSibling);
+                    }
                 }
                 // Insert the element out and use that one as the current child
-                endComment.parentNode.insertBefore(newSpan, endComment);
+                if (newSpan) {
+                    (_b = endComment.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(newSpan, endComment);
+                }
                 // Remove the comments out if the call specified it out
                 if (removeComments) {
-                    child.parentNode.removeChild(child);
-                    endComment.parentNode.removeChild(endComment);
+                    (_c = child.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(child);
+                    (_d = endComment.parentNode) === null || _d === void 0 ? void 0 : _d.removeChild(endComment);
                 }
                 // Last, make sure we return the new element out instead of the comment
-                child = newSpan;
+                if (newSpan) {
+                    child = newSpan;
+                }
             }
         }
     }
@@ -27356,6 +27814,7 @@ function getStyleValue(node, styleName) {
 }
 /** Checks if the node is an empty text node that can be ignored */
 function isEmptyTextNode(node) {
+    var _a;
     // No node is empty
     if (!node) {
         return true;
@@ -27363,12 +27822,14 @@ function isEmptyTextNode(node) {
     // Empty text node is empty
     if (node.nodeType == 3 /* Text */) {
         var value = node.nodeValue;
-        value = value.replace(LINE_BREAKS, '');
-        return value.trim().length == 0;
+        value = (_a = value === null || value === void 0 ? void 0 : value.replace(LINE_BREAKS, '')) !== null && _a !== void 0 ? _a : '';
+        return (value === null || value === void 0 ? void 0 : value.trim().length) == 0;
     }
     // Span or Font with an empty child node is empty
     var tagName = (0, roosterjs_editor_dom_1.getTagOfNode)(node);
-    if (node.firstChild == node.lastChild && (tagName == 'SPAN' || tagName == 'FONT')) {
+    if (node.firstChild &&
+        node.firstChild == node.lastChild &&
+        (tagName == 'SPAN' || tagName == 'FONT')) {
         return isEmptyTextNode(node.firstChild);
     }
     // If not found, then this is not empty
@@ -29291,7 +29752,7 @@ var TableInsertHandler = /** @class */ (function () {
 }());
 function getInsertElementData(isHorizontal, isDark, isRTL, backgroundColor) {
     var inserterColor = isDark ? INSERTER_COLOR_DARK_MODE : INSERTER_COLOR;
-    var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: " + inserterColor + "; line-height: 10px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + backgroundColor;
+    var outerDivStyle = "position: fixed; width: " + INSERTER_SIDE_LENGTH + "px; height: " + INSERTER_SIDE_LENGTH + "px; font-size: 16px; color: " + inserterColor + "; line-height: 8px; vertical-align: middle; text-align: center; cursor: pointer; border: solid " + INSERTER_BORDER_SIZE + "px " + inserterColor + "; border-radius: 50%; background-color: " + backgroundColor;
     var leftOrRight = isRTL ? 'right' : 'left';
     var childBaseStyles = "position: absolute; box-sizing: border-box; background-color: " + backgroundColor + ";";
     var childInfo = {
@@ -29890,6 +30351,11 @@ var CompatibleChangeSource;
      * List chain reorganized numbers of lists
      */
     CompatibleChangeSource["ListChain"] = "ListChain";
+    /**
+     * Keyboard event, used by Content Model.
+     * Data of this event will be the key code number
+     */
+    CompatibleChangeSource["Keyboard"] = "Keyboard";
 })(CompatibleChangeSource = exports.CompatibleChangeSource || (exports.CompatibleChangeSource = {}));