roosterjs 8.44.1 → 8.45.0

package/dist/rooster-amd.js

@@ -2213,6 +2213,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);
@@ -2237,6 +2240,8 @@ function changeCapitalization(editor, capitalization, language) {
                 return originalText.toLocaleLowerCase(language).replace(regex, function (match) {
                     return match.toLocaleUpperCase(language);
                 });
+            default:
+                return originalText;
         }
     }
 }
@@ -2380,11 +2385,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;
 }
@@ -2467,7 +2472,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;
                 }
             });
@@ -2492,7 +2498,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));
@@ -2522,8 +2528,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);
         });
@@ -2575,7 +2584,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);
             }
@@ -2732,12 +2741,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);
@@ -2820,7 +2829,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;
@@ -2829,7 +2838,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])
@@ -2846,7 +2855,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),
     };
@@ -2912,6 +2921,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.
@@ -2924,7 +2934,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;
@@ -2969,7 +2979,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 &&
@@ -3028,7 +3038,6 @@ function insertImageWithSrc(editor, src, attributes) {
                 return image.setAttribute(attribute, attributes[attribute]);
             });
         }
-        image.style.maxWidth = '100%';
         editor.insertNode(image);
     }, 'insertImage');
 }
@@ -3058,7 +3067,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 +3088,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 +3104,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 +3181,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 +3243,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 +3256,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 +3322,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 +3466,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 +3488,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 +3735,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 +3782,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 +3791,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 + ">");
         }
@@ -4097,12 +4126,21 @@ function editTable(editor, operation) {
             vtable.writeBack();
             editor.transformToDarkColor(vtable.table);
             editor.focus();
-            var cellToSelect = calculateCellToSelect(operation, vtable.row, vtable.col);
-            editor.select(vtable.getCell(cellToSelect.newRow, cellToSelect.newCol).td, 0 /* Begin */);
+            if (isUndefined(vtable.row) || isUndefined(vtable.col)) {
+                return;
+            }
+            var _a = calculateCellToSelect(operation, vtable.row, vtable.col), newCol = _a.newCol, newRow = _a.newRow;
+            var newTd = vtable.getCell(newRow, newCol).td;
+            if (newTd) {
+                editor.select(newTd, 0 /* Begin */);
+            }
         }, 'editTable');
     }
 }
 exports.default = editTable;
+function isUndefined(n) {
+    return n == undefined;
+}
 function calculateCellToSelect(operation, currentRow, currentCol) {
     var newRow = currentRow;
     var newCol = currentCol;
@@ -4128,9 +4166,10 @@ function calculateCellToSelect(operation, currentRow, currentCol) {
     };
 }
 function saveTableSelection(editor, vtable) {
+    var _a;
     var selection = editor.getSelectionRangeEx();
     if (selection && selection.type === 1 /* TableSelection */) {
-        vtable.selection = selection.coordinates;
+        vtable.selection = (_a = selection.coordinates) !== null && _a !== void 0 ? _a : null;
     }
 }
 
@@ -4159,12 +4198,17 @@ function formatTable(editor, format, table) {
     table = table || editor.getElementAtCursor('TABLE');
     if (table) {
         (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
+            if (!table) {
+                return;
+            }
             var vtable = new roosterjs_editor_dom_1.VTable(table);
             vtable.applyFormat(format);
             vtable.writeBack();
             editor.transformToDarkColor(vtable.table);
             editor.focus();
-            editor.select(start, end);
+            if (start && end) {
+                editor.select(start, end);
+            }
         }, 'formatTable');
     }
 }
@@ -4217,7 +4261,7 @@ function insertTable(editor, columns, rows, format) {
             (0, setBackgroundColor_1.default)(editor, 'transparent');
         }
         var vtable = new roosterjs_editor_dom_1.VTable(table);
-        vtable.applyFormat(format);
+        vtable.applyFormat(format || {});
         vtable.writeBack();
         editor.insertNode(table);
         editor.runAsync(function (editor) {
@@ -4293,6 +4337,9 @@ function applyInlineStyle(editor, callback, apiName) {
             var lastNode;
             selection.ranges.forEach(function (range) {
                 var contentTraverser = editor.getSelectionTraverser(range);
+                if (!contentTraverser) {
+                    return;
+                }
                 var inlineElement = contentTraverser && contentTraverser.currentInlineElement;
                 while (inlineElement) {
                     var nextInlineElement = contentTraverser.getNextInlineElement();
@@ -4391,7 +4438,7 @@ function blockFormat(editor, callback, beforeRunCallback, apiName) {
                 (0, commitListChains_1.default)(editor, chains_1);
             }
         }
-        if (selection.type == 0 /* Normal */) {
+        if (selection.type == 0 /* Normal */ && start && end) {
             editor.select(start, end);
         }
         else {
@@ -4440,9 +4487,11 @@ function blockWrap(editor, wrapFunction, beforeRunCallback, apiName) {
                 }
             }
             while (nodes[0] &&
+                nodes[0].parentNode &&
                 (0, roosterjs_editor_dom_1.isNodeInRegion)(region, nodes[0].parentNode) &&
                 nodes.some(function (node) { return (0, roosterjs_editor_dom_1.getTagOfNode)(node) == 'LI'; })) {
-                nodes = [(0, roosterjs_editor_dom_1.splitBalancedNodeRange)(nodes)];
+                var result = (0, roosterjs_editor_dom_1.splitBalancedNodeRange)(nodes);
+                nodes = result ? [result] : [];
             }
             wrapFunction(nodes);
         }
@@ -4472,7 +4521,10 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function collapseSelectedBlocks(editor, forEachCallback) {
     var traverser = editor.getSelectionTraverser();
-    var block = traverser && traverser.currentBlockElement;
+    if (!traverser) {
+        return;
+    }
+    var block = traverser.currentBlockElement;
     var blocks = [];
     while (block) {
         if (!isEmptyBlockUnderTR(block)) {
@@ -4520,7 +4572,9 @@ function commitListChains(editor, chains) {
         var end = range && roosterjs_editor_dom_1.Position.getEnd(range);
         var shouldReuseAllAncestorListElements_1 = editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */);
         chains.forEach(function (chain) { return chain.commit(shouldReuseAllAncestorListElements_1); });
-        editor.select(start, end);
+        if (start && end) {
+            editor.select(start, end);
+        }
     }
 }
 exports.default = commitListChains;
@@ -4557,7 +4611,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function execCommand(editor, command, apiName) {
     editor.focus();
-    var formatter = function () { return editor.getDocument().execCommand(command, false, null); };
+    var formatter = function () { return editor.getDocument().execCommand(command, false, undefined); };
     var selection = editor.getSelectionRangeEx();
     if (selection && selection.areAllCollapsed) {
         editor.addUndoSnapshot();
@@ -4610,9 +4664,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * Default value is false.
  */
 function formatUndoSnapshot(editor, callback, apiName) {
-    editor.addUndoSnapshot(callback, "Format" /* Format */, undefined /* canUndoByBackspace */, apiName && {
-        formatApiName: apiName,
-    });
+    editor.addUndoSnapshot(callback, "Format" /* Format */, undefined /* canUndoByBackspace */, apiName && apiName != ''
+        ? {
+            formatApiName: apiName,
+        }
+        : undefined);
 }
 exports.default = formatUndoSnapshot;
 
@@ -4640,6 +4696,9 @@ function normalizeBlockquote(node, quotesHandled) {
     if ((0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLElement')) {
         var alignment = node.style.textAlign;
         var quote = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, undefined /* root */, 'blockquote');
+        if (!quote) {
+            return;
+        }
         var isNodeRTL = isRTL(node);
         if (quotesHandled) {
             if (quotesHandled.indexOf(quote) > -1) {
@@ -4650,17 +4709,17 @@ function normalizeBlockquote(node, quotesHandled) {
         while (quote) {
             if (alignment == 'center') {
                 if (isNodeRTL) {
-                    delete quote.style.marginInlineEnd;
+                    quote.style.removeProperty('marginInlineEnd');
                     quote.style.marginInlineStart = 'auto';
                 }
                 else {
-                    delete quote.style.marginInlineStart;
+                    quote.style.removeProperty('marginInlineStart');
                     quote.style.marginInlineEnd = 'auto';
                 }
             }
             else {
-                delete quote.style.marginInlineStart;
-                delete quote.style.marginInlineEnd;
+                quote.style.removeProperty('marginInlineEnd');
+                quote.style.removeProperty('marginInlineStart');
             }
             quote = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(quote.parentElement, undefined /* root */, 'blockquote');
         }
@@ -4707,14 +4766,19 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param apiNameOverride (Optional) Set a new api name, if empty the api name will be 'toggleListType'.
  */
 function toggleListType(editor, listType, startNumber, includeSiblingLists, orderedStyle, unorderedStyle, apiNameOverride) {
+    if (startNumber === void 0) { startNumber = 0; }
     if (includeSiblingLists === void 0) { includeSiblingLists = true; }
     (0, blockFormat_1.default)(editor, function (region, start, end, chains) {
-        var _a;
+        var _a, _b;
         var chain = startNumber > 0 && chains.filter(function (chain) { return chain.canAppendAtCursor(startNumber); })[0];
-        var vList = chain && start.equalTo(end)
-            ? chain.createVListAtBlock((_a = (0, roosterjs_editor_dom_1.getBlockElementAtNode)(region.rootNode, start.node)) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement(), startNumber)
+        var block = (_b = (0, roosterjs_editor_dom_1.getBlockElementAtNode)(region.rootNode, (_a = start === null || start === void 0 ? void 0 : start.node) !== null && _a !== void 0 ? _a : null)) === null || _b === void 0 ? void 0 : _b.collapseToSingleElement();
+        if (!block) {
+            return;
+        }
+        var vList = chain && end && (start === null || start === void 0 ? void 0 : start.equalTo(end))
+            ? chain.createVListAtBlock(block, startNumber)
             : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, startNumber === 1 ? false : includeSiblingLists);
-        if (vList) {
+        if (vList && start && end) {
             vList.changeListType(start, end, listType);
             if (editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
                 vList.setListStyleType(orderedStyle, unorderedStyle);
@@ -4920,6 +4984,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");
@@ -4944,6 +5009,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,
@@ -4983,8 +5049,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;
     }
@@ -5043,7 +5110,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%';
@@ -5985,6 +6052,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":
@@ -6219,7 +6416,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) {
@@ -7744,6 +7941,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");
@@ -7788,12 +7996,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 () {
@@ -7817,12 +8024,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,
@@ -7844,8 +8069,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
@@ -7893,7 +8116,6 @@ var LifecyclePlugin = /** @class */ (function () {
             (event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
                 event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
             this.state.isDarkMode = event.source == "SwitchToDarkMode" /* SwitchToDarkMode */;
-            this.recalculateDefaultFormat();
             this.adjustColor();
         }
     };
@@ -7908,45 +8130,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;
@@ -8565,11 +8748,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;
         }
     };
@@ -8633,6 +8812,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;
@@ -8806,7 +9004,6 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 var DELIMITER_SELECTOR = '.' + "entityDelimiterAfter" /* DELIMITER_AFTER */ + ',.' + "entityDelimiterBefore" /* DELIMITER_BEFORE */;
 var ZERO_WIDTH_SPACE = '\u200B';
 var INLINE_ENTITY_SELECTOR = 'span' + (0, roosterjs_editor_dom_1.getEntitySelector)();
-var NBSP = '\u00A0';
 function inlineEntityOnPluginEvent(event, editor) {
     switch (event.eventType) {
         case 7 /* ContentChanged */:
@@ -8818,7 +9015,14 @@ function inlineEntityOnPluginEvent(event, editor) {
             normalizeDelimitersInEditor(editor);
             break;
         case 10 /* BeforePaste */:
-            addDelimitersIfNeeded(event.fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));
+            var fragment = event.fragment, sanitizingOption = event.sanitizingOption;
+            addDelimitersIfNeeded(fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));
+            if (sanitizingOption.additionalAllowedCssClasses) {
+                (0, roosterjs_editor_dom_1.arrayPush)(sanitizingOption.additionalAllowedCssClasses, [
+                    "entityDelimiterAfter" /* DELIMITER_AFTER */,
+                    "entityDelimiterBefore" /* DELIMITER_BEFORE */,
+                ]);
+            }
             break;
         case 8 /* ExtractContentWithDom */:
         case 9 /* BeforeCutCopy */:
@@ -8864,12 +9068,12 @@ function normalizeDelimitersInEditor(editor) {
 exports.normalizeDelimitersInEditor = normalizeDelimitersInEditor;
 function addDelimitersIfNeeded(nodes) {
     nodes.forEach(function (node) {
-        if (tryGetEntityFromNode(node)) {
+        if (isEntityElement(node)) {
             (0, roosterjs_editor_dom_1.addDelimiters)(node);
         }
     });
 }
-function tryGetEntityFromNode(node) {
+function isEntityElement(node) {
     return !!(node &&
         (0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLElement') &&
         isReadOnly((0, roosterjs_editor_dom_1.getEntityFromElement)(node)));
@@ -8898,13 +9102,14 @@ function removeInvalidDelimiters(nodes) {
         }
     });
 }
-function removeDelimiterAttr(node) {
+function removeDelimiterAttr(node, checkEntity) {
+    if (checkEntity === void 0) { checkEntity = true; }
     if (!node) {
         return;
     }
     var isAfter = node.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
     var entitySibling = isAfter ? node.previousElementSibling : node.nextElementSibling;
-    if (entitySibling && tryGetEntityFromNode(entitySibling)) {
+    if (checkEntity && entitySibling && isEntityElement(entitySibling)) {
         return;
     }
     node.classList.remove("entityDelimiterAfter" /* DELIMITER_AFTER */, "entityDelimiterBefore" /* DELIMITER_BEFORE */);
@@ -8918,31 +9123,34 @@ function removeDelimiterAttr(node) {
     });
 }
 function handleCollapsedEnter(editor, delimiter) {
+    var _a;
     var isAfter = delimiter.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
-    var sibling = isAfter ? delimiter.nextSibling : delimiter.previousSibling;
-    var positionToUse;
-    var element;
-    if (sibling) {
-        positionToUse = new roosterjs_editor_dom_1.Position(sibling, isAfter ? 0 /* Begin */ : -1 /* End */);
-    }
-    else {
-        element = delimiter.insertAdjacentElement(isAfter ? 'afterend' : 'beforebegin', (0, roosterjs_editor_dom_1.createElement)({
-            tag: 'span',
-            children: [NBSP],
-        }, editor.getDocument()));
-        if (!element) {
+    var entity = !isAfter ? delimiter.nextSibling : delimiter.previousSibling;
+    var block = (_a = editor.getBlockElementAtNode(delimiter)) === null || _a === void 0 ? void 0 : _a.getStartNode();
+    editor.runAsync(function () {
+        if (!block) {
             return;
         }
-        positionToUse = new roosterjs_editor_dom_1.Position(element, 0 /* Begin */);
-    }
-    if (positionToUse) {
-        editor.select(positionToUse);
-        editor.runAsync(function (aEditor) {
-            var elAfter = aEditor.getElementAtCursor();
-            removeDelimiterAttr(elAfter);
-            removeNode(element);
-        });
-    }
+        var blockToCheck = isAfter ? block.nextSibling : block.previousSibling;
+        if (blockToCheck && (0, roosterjs_editor_dom_1.safeInstanceOf)(blockToCheck, 'HTMLElement')) {
+            var delimiters = blockToCheck.querySelectorAll(DELIMITER_SELECTOR);
+            // Check if the last or first delimiter still contain the delimiter class and remove it.
+            var delimiterToCheck = delimiters.item(isAfter ? 0 : delimiters.length - 1);
+            removeDelimiterAttr(delimiterToCheck);
+        }
+        if (isEntityElement(entity)) {
+            var nextElementSibling = entity.nextElementSibling, previousElementSibling = entity.previousElementSibling;
+            [nextElementSibling, previousElementSibling].forEach(function (el) {
+                // Check if after Enter the ZWS got removed but we still have a element with the class
+                // Remove the attributes of the element if it is invalid now.
+                if (el && (0, roosterjs_editor_dom_1.matchesSelector)(el, DELIMITER_SELECTOR) && !(0, roosterjs_editor_dom_1.getDelimiterFromElement)(el)) {
+                    removeDelimiterAttr(el, false /* checkEntity */);
+                }
+            });
+            // Add delimiters to the entity if needed because on Enter we can sometimes lose the ZWS of the element.
+            (0, roosterjs_editor_dom_1.addDelimiters)(entity);
+        }
+    });
 }
 var getPosition = function (container) {
     if (container && (0, roosterjs_editor_dom_1.getDelimiterFromElement)(container)) {
@@ -9196,6 +9404,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++) {
@@ -9208,53 +9464,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
@@ -9263,7 +9494,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--) {
@@ -9276,7 +9507,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
@@ -9291,7 +9522,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;
     };
@@ -9300,7 +9531,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);
@@ -9315,7 +9546,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) {
@@ -9329,16 +9560,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 = [];
@@ -9366,7 +9597,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
@@ -9376,7 +9607,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);
     };
     /**
@@ -9384,7 +9615,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);
@@ -9394,7 +9625,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);
@@ -9408,7 +9639,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();
@@ -9428,7 +9659,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);
@@ -9442,10 +9673,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;
@@ -9459,7 +9691,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);
@@ -9476,7 +9708,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);
@@ -9488,7 +9720,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);
     };
@@ -9497,7 +9729,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);
     };
@@ -9505,99 +9737,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)) {
@@ -9621,7 +9779,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
@@ -9640,13 +9798,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 = [];
@@ -9660,7 +9818,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();
@@ -9675,7 +9833,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);
@@ -9687,7 +9845,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,
@@ -9699,7 +9857,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*/);
@@ -9707,7 +9865,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*/);
@@ -9722,14 +9880,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*/),
@@ -9742,13 +9900,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;
     };
     /**
@@ -9759,7 +9917,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,
@@ -9770,14 +9928,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 : {};
     };
@@ -9785,14 +9943,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
@@ -9804,7 +9962,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
@@ -9817,7 +9975,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();
@@ -9830,7 +9988,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 () {
@@ -9847,7 +10005,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);
         }
@@ -9859,7 +10017,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);
     };
     /**
@@ -9871,7 +10029,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();
@@ -9892,7 +10050,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] || [];
@@ -9904,7 +10062,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;
@@ -9921,7 +10079,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();
@@ -9935,7 +10093,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);
@@ -9945,7 +10103,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 */));
     };
@@ -9955,7 +10113,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;
@@ -9970,21 +10128,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;
     };
     /**
@@ -9995,29 +10153,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.
@@ -10025,13 +10183,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;
     };
     /**
@@ -10040,7 +10198,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;
     };
     /**
@@ -10049,7 +10207,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;
@@ -10065,47 +10223,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;
 
 
 /***/ }),
@@ -10120,10 +10343,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; } });
 
 
 /***/ }),
@@ -10378,6 +10607,9 @@ 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
@@ -11503,7 +11735,7 @@ function insertDelimiter(element, delimiterClass) {
         var insertPosition = delimiterClass == "entityDelimiterAfter" /* DELIMITER_AFTER */ ? 'afterend' : 'beforebegin';
         element.insertAdjacentElement(insertPosition, span);
     }
-    return element;
+    return span;
 }
 
 
@@ -21080,15 +21312,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;
@@ -21160,14 +21393,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();
@@ -21192,12 +21426,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();
@@ -21205,7 +21442,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;
@@ -21221,6 +21458,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":
@@ -21239,7 +21561,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()) ||
@@ -21279,6 +21601,7 @@ exports.CursorFeatures = {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityFeatures = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var roosterjs_editor_dom_2 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * A content edit feature to trigger EntityOperation event with operation "Click" when user
  * clicks on a readonly entity.
@@ -21302,13 +21625,13 @@ var EscapeFromEntityFeature = {
     },
 };
 function cacheGetReadonlyEntityElement(event, editor, operation) {
-    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'READONLY_ENTITY_ELEMENT', function () {
+    var element = (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'READONLY_ENTITY_ELEMENT', function () {
         var node = event.rawEvent.target;
-        var entityElement = node && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), node);
+        var entityElement = node && editor.getElementAtCursor((0, roosterjs_editor_dom_2.getEntitySelector)(), node);
         return entityElement && !entityElement.isContentEditable ? entityElement : null;
     });
     if (element && operation !== undefined) {
-        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        var entity = (0, roosterjs_editor_dom_2.getEntityFromElement)(element);
         if (entity) {
             editor.triggerPluginEvent(15 /* EntityOperation */, {
                 operation: operation,
@@ -21337,7 +21660,7 @@ var EnterBeforeReadonlyEntityFeature = {
         if (!range) {
             return;
         }
-        var node = roosterjs_editor_dom_1.Position.getEnd(range).normalize().node;
+        var node = roosterjs_editor_dom_2.Position.getEnd(range).normalize().node;
         var br = editor.getDocument().createElement('BR');
         (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, node.nextSibling);
         var block = editor.getBlockElementAtNode(node);
@@ -21379,13 +21702,13 @@ var DeleteBeforeEntityFeature = {
     },
 };
 function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, operation) {
-    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'NEIGHBOR_ENTITY_ELEMENT_' + isNext + '_' + collapseOnly, function () {
+    var element = (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'NEIGHBOR_ENTITY_ELEMENT_' + isNext + '_' + collapseOnly, function () {
         var range = editor.getSelectionRange();
         if (!range || (collapseOnly && !range.collapsed)) {
             return null;
         }
         range.commonAncestorContainer.normalize();
-        var pos = roosterjs_editor_dom_1.Position.getEnd(range).normalize();
+        var pos = roosterjs_editor_dom_2.Position.getEnd(range).normalize();
         var isAtBeginOrEnd = pos.offset == 0 || pos.isAtEnd;
         var entityNode = null;
         if (isAtBeginOrEnd) {
@@ -21404,12 +21727,12 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
                     node = null;
                 }
             }
-            entityNode = node && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), node);
+            entityNode = node && editor.getElementAtCursor((0, roosterjs_editor_dom_2.getEntitySelector)(), node);
         }
         return entityNode;
     });
     if (element && operation !== undefined) {
-        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        var entity = (0, roosterjs_editor_dom_2.getEntityFromElement)(element);
         if (entity) {
             triggerOperation(entity, editor, operation, event);
         }
@@ -21422,15 +21745,17 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
  */
 var MoveBetweenDelimitersFeature = {
     keys: [39 /* RIGHT */, 37 /* LEFT */],
+    allowFunctionKeys: true,
     shouldHandleEvent: function (event, editor) {
-        if (!editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+        if (event.rawEvent.altKey ||
+            !editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
             return false;
         }
         var element = editor.getElementAtCursor();
         if (!element) {
             return false;
         }
-        var isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'direction') === 'rtl';
+        var isRTL = (0, roosterjs_editor_dom_2.getComputedStyle)(element, 'direction') === 'rtl';
         var shouldCheckBefore = isRTL == (event.rawEvent.which === 37 /* LEFT */);
         return getIsDelimiterAtCursor(event, editor, shouldCheckBefore);
     },
@@ -21440,8 +21765,8 @@ var MoveBetweenDelimitersFeature = {
         if (!delimiter) {
             return;
         }
-        var _a = getRelatedElements(delimiter, checkBefore), delimiterPair = _a.delimiterPair, entity = _a.entity;
-        if (delimiterPair && entity && (0, roosterjs_editor_dom_1.matchesSelector)(entity, (0, roosterjs_editor_dom_1.getEntitySelector)())) {
+        var _a = getRelatedElements(delimiter, checkBefore, editor), delimiterPair = _a.delimiterPair, entity = _a.entity;
+        if (delimiterPair && entity && (0, roosterjs_editor_dom_2.matchesSelector)(entity, (0, roosterjs_editor_dom_2.getEntitySelector)())) {
             event.rawEvent.preventDefault();
             editor.runAsync(function () {
                 var positionType = checkBefore
@@ -21449,7 +21774,7 @@ var MoveBetweenDelimitersFeature = {
                         ? -3 /* After */
                         : -1 /* End */
                     : -2 /* Before */;
-                var position = new roosterjs_editor_dom_1.Position(delimiterPair, positionType);
+                var position = new roosterjs_editor_dom_2.Position(delimiterPair, positionType);
                 if (event.rawEvent.shiftKey) {
                     var selection = delimiterPair.ownerDocument.getSelection();
                     selection === null || selection === void 0 ? void 0 : selection.extend(position.node, position.offset);
@@ -21503,51 +21828,65 @@ function getIsDelimiterAtCursor(event, editor, checkBefore) {
         : position.node == position.element
             ? position.element.childNodes.item(position.offset)
             : position.element;
-    var searcher = editor.getContentSearcherOfCursor(event);
     var data = checkBefore
         ? {
             class: "entityDelimiterBefore" /* DELIMITER_BEFORE */,
             pairClass: "entityDelimiterAfter" /* DELIMITER_AFTER */,
-            getDelimiterPair: function (element) { var _a; return (_a = element.nextElementSibling) === null || _a === void 0 ? void 0 : _a.nextElementSibling; },
-            getNextSibling: function () {
-                var _a;
-                return (_a = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementAfter()) === null || _a === void 0 ? void 0 : _a.getContainerNode();
-            },
             isAtEndOrBeginning: position.isAtEnd,
         }
         : {
             class: "entityDelimiterAfter" /* DELIMITER_AFTER */,
             pairClass: "entityDelimiterBefore" /* DELIMITER_BEFORE */,
-            getDelimiterPair: function (element) { var _a; return (_a = element.previousElementSibling) === null || _a === void 0 ? void 0 : _a.previousElementSibling; },
-            getNextSibling: function () {
-                var _a;
-                return (_a = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore()) === null || _a === void 0 ? void 0 : _a.getContainerNode();
-            },
             isAtEndOrBeginning: position.offset == 0,
         };
-    var sibling = data.getNextSibling();
+    var sibling = getNextSibling(editor, focusedElement, checkBefore);
     if (data.isAtEndOrBeginning && sibling) {
         var elAtCursor = editor.getElementAtCursor('.' + data.class, sibling);
         if (elAtCursor && !!shouldHandle(elAtCursor)) {
             return true;
         }
     }
-    var entityAtCursor = editor.getElementAtCursor('.' + data.class, focusedElement);
+    var entityAtCursor = focusedElement && editor.getElementAtCursor('.' + data.class, focusedElement);
     return !!shouldHandle(entityAtCursor);
     function shouldHandle(element) {
-        var _a;
-        return (element &&
-            (((_a = data.getDelimiterPair(element)) === null || _a === void 0 ? void 0 : _a.className) || '').indexOf(data.pairClass) > -1 &&
+        if (!element) {
+            return false;
+        }
+        var delimiterPair = getRelatedElements(element, checkBefore, editor).delimiterPair;
+        return (delimiterPair &&
+            (delimiterPair.className || '').indexOf(data.pairClass) > -1 &&
             cacheDelimiter(event, checkBefore, element));
     }
 }
+function getNextSibling(editor, element, checkBefore) {
+    var traverser = getBlockTraverser(editor, element);
+    if (!traverser) {
+        return undefined;
+    }
+    var traverseFn = function (t) {
+        return checkBefore ? t.getNextInlineElement() : t.getPreviousInlineElement();
+    };
+    var currentInline = traverser.currentInlineElement;
+    while (currentInline && currentInline.getContainerNode() === element) {
+        currentInline = traverseFn(traverser);
+    }
+    return currentInline === null || currentInline === void 0 ? void 0 : currentInline.getContainerNode();
+}
+function getBlockTraverser(editor, element) {
+    var _a;
+    if (!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;
+}
 function cacheDelimiter(event, checkBefore, delimiter) {
-    return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'delimiter_cache_key_' + checkBefore, function () { return delimiter; });
+    return (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'delimiter_cache_key_' + checkBefore, function () { return delimiter; });
 }
 function cacheEntityBetweenDelimiter(event, editor, checkBefore, entity, operation) {
-    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'entity_delimiter_cache_key_' + checkBefore, function () { return entity && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), entity); });
+    var element = (0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'entity_delimiter_cache_key_' + checkBefore, function () { return entity && editor.getElementAtCursor((0, roosterjs_editor_dom_2.getEntitySelector)(), entity); });
     if (element && operation !== undefined) {
-        var entity_1 = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        var entity_1 = (0, roosterjs_editor_dom_2.getEntityFromElement)(element);
         if (entity_1) {
             triggerOperation(entity_1, editor, operation, event);
         }
@@ -21562,7 +21901,7 @@ function triggerOperation(entity, editor, operation, event) {
         entity: entity,
     });
     if (entity.isReadonly &&
-        !(0, roosterjs_editor_dom_1.isBlockElement)(entity.wrapper) &&
+        !(0, roosterjs_editor_dom_2.isBlockElement)(entity.wrapper) &&
         editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
         if (event.rawEvent.defaultPrevented) {
             editor.runAsync(function () {
@@ -21570,41 +21909,58 @@ function triggerOperation(entity, editor, operation, event) {
                     removeDelimiters(nextElementSibling, previousElementSibling);
                 }
                 else {
-                    var delimiterAfter = (0, roosterjs_editor_dom_1.addDelimiters)(entity.wrapper)[0];
+                    var delimiterAfter = (0, roosterjs_editor_dom_2.addDelimiters)(entity.wrapper)[0];
                     if (delimiterAfter) {
                         editor.select(delimiterAfter, -3 /* After */);
                     }
                 }
             });
         }
-        else if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(nextElementSibling) &&
-            (0, roosterjs_editor_dom_1.getDelimiterFromElement)(previousElementSibling)) {
-            editor.select((0, roosterjs_editor_dom_1.createRange)(previousElementSibling, nextElementSibling));
+        else if ((0, roosterjs_editor_dom_2.getDelimiterFromElement)(nextElementSibling) &&
+            (0, roosterjs_editor_dom_2.getDelimiterFromElement)(previousElementSibling)) {
+            editor.select((0, roosterjs_editor_dom_2.createRange)(previousElementSibling, nextElementSibling));
         }
     }
 }
 function removeDelimiters(nextElementSibling, previousElementSibling) {
     [nextElementSibling, previousElementSibling].forEach(function (sibling) {
         var _a;
-        if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(sibling)) {
+        if ((0, roosterjs_editor_dom_2.getDelimiterFromElement)(sibling)) {
             (_a = sibling === null || sibling === void 0 ? void 0 : sibling.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(sibling);
         }
     });
 }
 function cacheGetCheckBefore(event, checkBefore) {
-    return !!(0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'Check_Before', function () { return checkBefore; });
+    return !!(0, roosterjs_editor_dom_2.cacheGetEventData)(event, 'Check_Before', function () { return checkBefore; });
 }
-function getRelatedElements(delimiter, checkBefore) {
-    var _a, _b;
-    var entity;
-    var delimiterPair;
-    if (checkBefore) {
-        entity = delimiter.nextElementSibling;
-        delimiterPair = (_a = entity === null || entity === void 0 ? void 0 : entity.nextElementSibling) !== null && _a !== void 0 ? _a : null;
+function getRelatedElements(delimiter, checkBefore, editor) {
+    var entity = null;
+    var delimiterPair = null;
+    var traverser = getBlockTraverser(editor, delimiter);
+    if (!traverser) {
+        return { delimiterPair: delimiterPair, entity: entity };
     }
-    else {
-        entity = delimiter.previousElementSibling;
-        delimiterPair = (_b = entity === null || entity === void 0 ? void 0 : entity.previousElementSibling) !== null && _b !== void 0 ? _b : null;
+    var selector = "." + (checkBefore ? "entityDelimiterAfter" /* DELIMITER_AFTER */ : "entityDelimiterBefore" /* DELIMITER_BEFORE */);
+    var traverseFn = function (t) {
+        return checkBefore ? t.getNextInlineElement() : t.getPreviousInlineElement();
+    };
+    var getElementFromInline = function (element, selector) {
+        var _a;
+        var node = element === null || element === void 0 ? void 0 : element.getContainerNode();
+        return (_a = (node && editor.getElementAtCursor(selector, node))) !== null && _a !== void 0 ? _a : null;
+    };
+    var entitySelector = (0, roosterjs_editor_dom_2.getEntitySelector)();
+    var current = traverser.currentInlineElement;
+    while (current && (!entity || !delimiterPair)) {
+        entity = entity || getElementFromInline(current, entitySelector);
+        delimiterPair = delimiterPair || getElementFromInline(current, selector);
+        // If we found the entity but the next inline after the entity is not a delimiter,
+        // it means that the delimiter pair got removed or is invalid, return null instead.
+        if (entity && !delimiterPair && !getElementFromInline(current, entitySelector)) {
+            delimiterPair = null;
+            break;
+        }
+        current = traverseFn(traverser);
     }
     return { entity: entity, delimiterPair: delimiterPair };
 }
@@ -21655,8 +22011,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();
 }; };
@@ -21664,17 +22022,34 @@ 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: [9 /* TAB */, 39 /* RIGHT */],
+    keys: [9 /* TAB */],
     shouldHandleEvent: shouldHandleIndentationEvent(true),
     handleEvent: handleIndentationEvent(true),
-    allowFunctionKeys: true,
-    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
 };
 /**
  * OutdentWhenShiftTab edit feature, provides the ability to outdent current list when user press Shift+TAB
  */
 var OutdentWhenShiftTab = {
-    keys: [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,
@@ -21687,16 +22062,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();
@@ -21716,7 +22091,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 &&
@@ -21731,12 +22106,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;
     },
@@ -21752,11 +22128,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,
 };
@@ -21778,9 +22154,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.'
@@ -21796,6 +22173,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) {
@@ -21816,7 +22196,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*/);
     },
 };
 /**
@@ -21838,15 +22218,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*/);
     },
 };
 /**
@@ -21866,8 +22249,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) {
@@ -21875,19 +22261,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) {
@@ -21935,13 +22322,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') {
@@ -21950,7 +22338,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);
     }
@@ -21962,19 +22350,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
@@ -21983,9 +22374,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 ||
@@ -22061,6 +22452,8 @@ exports.ListFeatures = {
     autoNumberingList: AutoNumberingList,
     autoBulletList: AutoBulletList,
     mergeListOnBackspaceAfterList: MergeListOnBackspaceAfterList,
+    outdentWhenAltShiftLeft: OutdentWhenAltShiftLeft,
+    indentWhenAltShiftRight: IndentWhenAltShiftRight,
 };
 function isList(element) {
     return (!!element &&
@@ -22101,8 +22494,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;
@@ -22140,12 +22533,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) {
@@ -22153,7 +22549,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
@@ -22237,7 +22633,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) {
@@ -22259,14 +22655,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')) {
@@ -22432,7 +22829,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());
@@ -22490,21 +22888,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) {
@@ -22530,6 +22933,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 */);
@@ -22537,7 +22943,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);
+            }
         });
     },
 };
@@ -22551,8 +22959,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;
@@ -22561,8 +22972,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;
@@ -22583,7 +22994,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());
@@ -22606,6 +23019,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();
@@ -22621,9 +23037,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));
     });
 }
@@ -22673,7 +23093,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));
@@ -22717,8 +23137,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;
@@ -22782,9 +23202,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;';
@@ -22841,7 +23264,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
  */
@@ -22977,7 +23401,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 */;
@@ -22987,7 +23412,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 */;
@@ -23901,7 +24327,7 @@ var ImageEdit = /** @class */ (function () {
                     }
                     var viewport = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getVisibleViewport();
                     if (rotateHandle && rotateCenter && viewport) {
-                        (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, viewport, marginVertical, rotateCenter, rotateHandle);
+                        (0, Rotator_1.updateRotateHandlePosition)(viewport, rotateCenter, rotateHandle);
                     }
                     updateHandleCursor(resizeHandles, angleRad);
                 }
@@ -24044,6 +24470,54 @@ var ImageEdit = /** @class */ (function () {
             this.editor.select(this.image);
         }
     };
+    /**
+     * Flip the image.
+     * @param image The image to be flipped
+     * @param direction
+     */
+    ImageEdit.prototype.flipImage = function (image, direction) {
+        var _a;
+        this.image = image;
+        this.editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
+        var angleRad = this.editInfo.angleRad;
+        var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
+            (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
+        if (isInVerticalPostion) {
+            if (direction === 'horizontal') {
+                this.editInfo.flippedVertical = !this.editInfo.flippedVertical;
+            }
+            else {
+                this.editInfo.flippedHorizontal = !this.editInfo.flippedHorizontal;
+            }
+        }
+        else {
+            if (direction === 'vertical') {
+                this.editInfo.flippedVertical = !this.editInfo.flippedVertical;
+            }
+            else {
+                this.editInfo.flippedHorizontal = !this.editInfo.flippedHorizontal;
+            }
+        }
+        this.createWrapper(4 /* Rotate */);
+        this.updateWrapper();
+        this.setEditingImage(null);
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(image);
+    };
+    /**
+     * Rotate the image in radian angle.
+     * @param image The image to be rotated
+     * @param angleRad The angle in radian that the image must be rotated.
+     */
+    ImageEdit.prototype.rotateImage = function (image, angleRad) {
+        var _a;
+        this.image = image;
+        this.editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
+        this.editInfo.angleRad = this.editInfo.angleRad + angleRad;
+        this.createWrapper(4 /* Rotate */);
+        this.updateWrapper();
+        this.setEditingImage(null);
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.select(image);
+    };
     /**
      * Create editing wrapper for the image
      */
@@ -24054,6 +24528,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';
@@ -24062,6 +24537,7 @@ var ImageEdit = /** @class */ (function () {
             // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
             if (this.clonedImage) {
                 this.clonedImage.src = this.editInfo.src;
+                setFlipped(this.clonedImage, this.editInfo.flippedHorizontal, this.editInfo.flippedVertical);
                 this.clonedImage.style.position = 'absolute';
             }
             // Get HTML for all edit elements (resize handle, rotate handle, crop handle and overlay, ...) and create HTML element
@@ -24219,6 +24695,9 @@ function getColorString(color, isDarkMode) {
     }
     return isDarkMode ? color.darkModeColor.trim() : color.lightModeColor.trim();
 }
+function setFlipped(element, flipppedHorizontally, flipppedVertically) {
+    element.style.transform = "scale(" + (flipppedHorizontally ? '-1' : '1') + ", " + (flipppedVertically ? '-1' : '1') + ")";
+}
 
 
 /***/ }),
@@ -24361,6 +24840,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);
             }
         });
     }
@@ -24505,13 +24985,18 @@ function checkEditInfoState(editInfo, compareTo) {
     if (!editInfo || !editInfo.src || ALL_KEYS.some(function (key) { return !isNumber(editInfo[key]); })) {
         return 0 /* Invalid */;
     }
-    else if (ROTATE_CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); })) {
+    else if (ROTATE_CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); }) &&
+        !editInfo.flippedHorizontal &&
+        !editInfo.flippedVertical &&
+        (!compareTo || (compareTo && editInfo.angleRad === compareTo.angleRad))) {
         return 1 /* ResizeOnly */;
     }
     else if (compareTo &&
         ROTATE_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); }) &&
         ROTATE_KEYS.every(function (key) { return areSameNumber(compareTo[key], 0); }) &&
-        CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], compareTo[key]); })) {
+        CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], compareTo[key]); }) &&
+        compareTo.flippedHorizontal === editInfo.flippedHorizontal &&
+        compareTo.flippedVertical === editInfo.flippedVertical) {
         return 2 /* SameWithLast */;
     }
     else {
@@ -24632,6 +25117,7 @@ function generateDataURL(image, editInfo) {
     if (context) {
         context.translate(targetWidth / 2, targetHeight / 2);
         context.rotate(angle);
+        context.scale(editInfo.flippedHorizontal ? -1 : 1, editInfo.flippedVertical ? -1 : 1);
         context.drawImage(image, naturalWidth * left, naturalHeight * top, imageWidth, imageHeight, -width / 2, -height / 2, width, height);
     }
     return canvas.toDataURL('image/png', 1.0);
@@ -25137,15 +25623,26 @@ exports.Rotator = {
  * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
  * Fix it by reduce the distance from image to rotate handle
  */
-function updateRotateHandlePosition(editInfo, editorRect, marginVertical, rotateCenter, rotateHandle) {
+function updateRotateHandlePosition(editorRect, rotateCenter, rotateHandle) {
     var rotateHandleRect = rotateHandle.getBoundingClientRect();
     if (rotateHandleRect) {
         var top_1 = rotateHandleRect.top - editorRect.top;
-        var angleRad = editInfo.angleRad, heightPx = editInfo.heightPx;
-        var cosAngle = Math.cos(angleRad);
-        var adjustedDistance = cosAngle <= 0
-            ? Number.MAX_SAFE_INTEGER
-            : (top_1 + heightPx / 2 + marginVertical) / cosAngle - heightPx / 2;
+        var left = rotateHandleRect.left - editorRect.left;
+        var right = rotateHandleRect.right - editorRect.right;
+        var bottom = rotateHandleRect.bottom - editorRect.bottom;
+        var adjustedDistance = Number.MAX_SAFE_INTEGER;
+        if (top_1 <= 0) {
+            adjustedDistance = top_1;
+        }
+        else if (left <= 0) {
+            adjustedDistance = left;
+        }
+        else if (right >= 0) {
+            adjustedDistance = right;
+        }
+        else if (bottom >= 0) {
+            adjustedDistance = bottom;
+        }
         var rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);
         var rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
         rotateCenter.style.top = -rotateGap + 'px';
@@ -25365,6 +25862,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
@@ -25390,7 +25888,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)) {
@@ -25399,22 +25897,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;
@@ -25509,12 +26008,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;
@@ -25628,21 +26143,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) {
@@ -25667,7 +26184,8 @@ function checkAndAddBr(root, block, isFirst, firstBlock) {
         // If the first block and the last block are Siblings, add a BR before so the only two
         // lines that are being pasted are not merged.
         var previousSibling = (0, roosterjs_editor_dom_1.getPreviousLeafSibling)(root, block.start);
-        if (firstBlock.end.contains(previousSibling)) {
+        if (firstBlock.end.contains(previousSibling) &&
+            !(0, roosterjs_editor_dom_1.findClosestElementAncestor)(block.start, root, 'li')) {
             var br = (_c = block.start.ownerDocument) === null || _c === void 0 ? void 0 : _c.createElement('br');
             if (br) {
                 (_d = block.start.parentNode) === null || _d === void 0 ? void 0 : _d.insertBefore(br, block.start);
@@ -25729,8 +26247,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.
@@ -25810,6 +26329,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>
@@ -25839,37 +26359,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);
@@ -25889,8 +26419,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);
                 }
             });
         }
@@ -25932,7 +26463,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) {
@@ -25942,8 +26473,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;
             }
@@ -25954,7 +26486,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;
@@ -25965,12 +26497,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
@@ -26008,14 +26542,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;
             }
@@ -26023,7 +26559,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--;
@@ -26038,6 +26576,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;
     }
@@ -26049,7 +26588,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);
         }
@@ -26220,7 +26759,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.
@@ -26236,6 +26775,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';
 
 
 /***/ }),
@@ -26278,6 +26822,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");
@@ -26285,10 +26830,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
@@ -26311,7 +26857,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;
 
@@ -26329,9 +26875,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
@@ -26340,12 +26884,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":
@@ -26785,7 +27359,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
@@ -26874,7 +27452,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
@@ -26890,44 +27468,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;
 }
@@ -26937,6 +27518,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);
@@ -26948,7 +27530,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
@@ -26963,15 +27545,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;
 }
@@ -26979,8 +27564,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);
@@ -26989,7 +27575,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 */) {
@@ -27001,15 +27589,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;
 }
@@ -27021,15 +27609,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); });
@@ -27078,6 +27668,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;
@@ -27088,7 +27679,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
@@ -27096,7 +27687,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';
@@ -27120,6 +27711,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]') {
@@ -27142,22 +27734,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;
+                }
             }
         }
     }
@@ -27209,6 +27807,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;
@@ -27216,12 +27815,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
@@ -29144,7 +29745,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 = {
@@ -29743,6 +30344,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 = {}));