roosterjs 8.30.2 → 8.32.0

package/dist/rooster-amd.js

@@ -2175,36 +2175,6 @@ function getDarkColor(color) {
 exports.default = getDarkColor;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts":
-/*!************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts ***!
-  \************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-/**
- * Commit changes of all list changes when experiment features are allowed
- * @param editor The Editor object
- * @param chains List chains to commit
- */
-function experimentCommitListChains(editor, chains) {
-    if ((chains === null || chains === void 0 ? void 0 : chains.length) > 0) {
-        var range = editor.getSelectionRange();
-        var start = range && roosterjs_editor_dom_1.Position.getStart(range);
-        var end = range && roosterjs_editor_dom_1.Position.getEnd(range);
-        chains.forEach(function (chain) { return chain.commit(); });
-        editor.select(start, end);
-    }
-}
-exports.default = experimentCommitListChains;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/format/changeCapitalization.ts":
@@ -3091,6 +3061,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
 var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts");
 var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
+var normalizeBlockquote_1 = __webpack_require__(/*! ../utils/normalizeBlockquote */ "./packages/roosterjs-editor-api/lib/utils/normalizeBlockquote.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set content alignment
@@ -3159,7 +3130,14 @@ function alignText(editor, alignment) {
         align = 'right';
     }
     (0, execCommand_1.default)(editor, command);
-    editor.queryElements('[align]', 1 /* OnSelection */, function (node) { return (node.style.textAlign = align); });
+    var elements = editor.queryElements('[align]', 1 /* OnSelection */, function (node) {
+        node.style.textAlign = align;
+        (0, normalizeBlockquote_1.default)(node);
+    });
+    if (elements.length == 0) {
+        var node = editor.getElementAtCursor();
+        (0, normalizeBlockquote_1.default)(node);
+    }
 }
 function isList(element) {
     return (0, roosterjs_editor_dom_1.findClosestElementAncestor)(element, undefined /** root */, 'LI');
@@ -3348,6 +3326,7 @@ exports.default = setImageAltText;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var blockFormat_1 = __webpack_require__(/*! ../utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
+var normalizeBlockquote_1 = __webpack_require__(/*! ../utils/normalizeBlockquote */ "./packages/roosterjs-editor-api/lib/utils/normalizeBlockquote.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set indentation at selection
@@ -3380,7 +3359,7 @@ function setIndentation(editor, indentation) {
                     indentation == 1 /* Decrease */
                         ? vList.setIndentation(start, end, indentation, false /* softOutdent */, isTabKeyTextFeaturesEnabled /* preventItemRemoval */)
                         : vList.setIndentation(start, end, indentation);
-                    vList.writeBack();
+                    vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
                     blockGroups.push([]);
                 }
             }
@@ -3404,12 +3383,14 @@ function setIndentation(editor, indentation) {
         }
         return true;
     }, 'setIndentation');
+    function indent(region, blocks) {
+        var nodes = (0, roosterjs_editor_dom_1.collapseNodesInRegion)(region, blocks);
+        (0, roosterjs_editor_dom_1.wrap)(nodes, 2 /* BlockquoteWrapper */);
+        var quotesHandled = [];
+        nodes.forEach(function (node) { return (0, normalizeBlockquote_1.default)(node, quotesHandled); });
+    }
 }
 exports.default = setIndentation;
-function indent(region, blocks) {
-    var nodes = (0, roosterjs_editor_dom_1.collapseNodesInRegion)(region, blocks);
-    (0, roosterjs_editor_dom_1.wrap)(nodes, 2 /* BlockquoteWrapper */);
-}
 function outdent(region, blocks) {
     blocks.forEach(function (blockElement) {
         var node = blockElement.collapseToSingleElement();
@@ -3466,7 +3447,7 @@ function setOrderedListNumbering(editor, separator, startNumber) {
             var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(regions[0], false /*includeSiblingLists*/, separator);
             if (vList) {
                 vList.split(separator, startNumber);
-                vList.writeBack();
+                vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
             }
         }
     }, 'setOrderedListNumbering');
@@ -3878,7 +3859,7 @@ exports.default = toggleUnderline;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.experimentCommitListChains = exports.blockFormat = exports.toggleListType = exports.applyCellShading = exports.toggleHeader = exports.toggleUnderline = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleCodeBlock = exports.toggleBlockQuote = exports.setOrderedListNumbering = exports.toggleNumbering = exports.toggleItalic = exports.toggleBullet = exports.toggleBold = exports.changeCapitalization = exports.setIndentation = exports.setImageAltText = exports.setFontSize = exports.setFontName = exports.setDirection = exports.setTextColor = exports.setBackgroundColor = exports.setAlignment = exports.rotateElement = exports.replaceWithNode = exports.removeLink = exports.formatTable = exports.editTable = exports.insertTable = exports.insertImage = exports.insertEntity = exports.getElementBasedFormatState = exports.getFormatState = exports.createLink = exports.clearFormat = exports.clearBlockFormat = exports.FONT_SIZES = exports.changeFontSize = void 0;
+exports.experimentCommitListChains = exports.commitListChains = exports.blockFormat = exports.toggleListType = exports.applyCellShading = exports.toggleHeader = exports.toggleUnderline = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleCodeBlock = exports.toggleBlockQuote = exports.setOrderedListNumbering = exports.toggleNumbering = exports.toggleItalic = exports.toggleBullet = exports.toggleBold = exports.changeCapitalization = exports.setIndentation = exports.setImageAltText = exports.setFontSize = exports.setFontName = exports.setDirection = exports.setTextColor = exports.setBackgroundColor = exports.setAlignment = exports.rotateElement = exports.replaceWithNode = exports.removeLink = exports.formatTable = exports.editTable = exports.insertTable = exports.insertImage = exports.insertEntity = exports.getElementBasedFormatState = exports.getFormatState = exports.createLink = exports.clearFormat = exports.clearBlockFormat = exports.FONT_SIZES = exports.changeFontSize = void 0;
 var changeFontSize_1 = __webpack_require__(/*! ./format/changeFontSize */ "./packages/roosterjs-editor-api/lib/format/changeFontSize.ts");
 Object.defineProperty(exports, "changeFontSize", { enumerable: true, get: function () { return changeFontSize_1.default; } });
 Object.defineProperty(exports, "FONT_SIZES", { enumerable: true, get: function () { return changeFontSize_1.FONT_SIZES; } });
@@ -3955,8 +3936,9 @@ var toggleListType_1 = __webpack_require__(/*! ./utils/toggleListType */ "./pack
 Object.defineProperty(exports, "toggleListType", { enumerable: true, get: function () { return toggleListType_1.default; } });
 var blockFormat_1 = __webpack_require__(/*! ./utils/blockFormat */ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts");
 Object.defineProperty(exports, "blockFormat", { enumerable: true, get: function () { return blockFormat_1.default; } });
-var experimentCommitListChains_1 = __webpack_require__(/*! ./experiment/experimentCommitListChains */ "./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts");
-Object.defineProperty(exports, "experimentCommitListChains", { enumerable: true, get: function () { return experimentCommitListChains_1.default; } });
+var commitListChains_1 = __webpack_require__(/*! ./utils/commitListChains */ "./packages/roosterjs-editor-api/lib/utils/commitListChains.ts");
+Object.defineProperty(exports, "commitListChains", { enumerable: true, get: function () { return commitListChains_1.default; } });
+Object.defineProperty(exports, "experimentCommitListChains", { enumerable: true, get: function () { return commitListChains_1.experimentCommitListChains; } });
 
 
 /***/ }),
@@ -3973,8 +3955,6 @@ Object.defineProperty(exports, "experimentCommitListChains", { enumerable: true,
 Object.defineProperty(exports, "__esModule", { value: true });
 var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var TEMP_BACKGROUND_COLOR = 'originalBackgroundColor';
-var CELL_SHADE = 'cellShade';
 /**
  * Set background color of cells.
  * @param editor The editor instance
@@ -3987,9 +3967,7 @@ function applyCellShading(editor, color) {
         regions.forEach(function (region) {
             if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
                 (0, roosterjs_editor_dom_1.setColor)(region.rootNode, color, true /* isBackgroundColor */, editor.isDarkMode(), true /** shouldAdaptFontColor */);
-                region.rootNode.dataset[CELL_SHADE] = 'true';
-                region.rootNode.dataset[TEMP_BACKGROUND_COLOR] =
-                    region.rootNode.style.backgroundColor;
+                (0, roosterjs_editor_dom_1.saveTableCellMetadata)(region.rootNode, { bgColorOverride: true });
             }
         });
     }, 'applyCellShading');
@@ -4319,7 +4297,7 @@ function applyStyleToListItems(parentNodes, styles) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var experimentCommitListChains_1 = __webpack_require__(/*! ../experiment/experimentCommitListChains */ "./packages/roosterjs-editor-api/lib/experiment/experimentCommitListChains.ts");
+var commitListChains_1 = __webpack_require__(/*! ../utils/commitListChains */ "./packages/roosterjs-editor-api/lib/utils/commitListChains.ts");
 var formatUndoSnapshot_1 = __webpack_require__(/*! ./formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
@@ -4333,7 +4311,7 @@ function blockFormat(editor, callback, beforeRunCallback, apiName) {
             var regions = editor.getSelectedRegions();
             var chains_1 = roosterjs_editor_dom_1.VListChain.createListChains(regions, start === null || start === void 0 ? void 0 : start.node);
             regions.forEach(function (region) { return callback(region, start, end, chains_1); });
-            (0, experimentCommitListChains_1.default)(editor, chains_1);
+            (0, commitListChains_1.default)(editor, chains_1);
         }
         if (selection.type == 0 /* Normal */) {
             editor.select(start, end);
@@ -4438,6 +4416,43 @@ function isEmptyBlockUnderTR(block) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/utils/commitListChains.ts":
+/*!*********************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/utils/commitListChains.ts ***!
+  \*********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.experimentCommitListChains = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * Commit changes of all list changes when experiment features are allowed
+ * @param editor The Editor object
+ * @param chains List chains to commit
+ */
+function commitListChains(editor, chains) {
+    if ((chains === null || chains === void 0 ? void 0 : chains.length) > 0) {
+        var range = editor.getSelectionRange();
+        var start = range && roosterjs_editor_dom_1.Position.getStart(range);
+        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);
+    }
+}
+exports.default = commitListChains;
+/**
+ * @deprecated
+ * Same with commitListChains, keep this export just for backward compatibility
+ */
+exports.experimentCommitListChains = commitListChains;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts":
@@ -4525,6 +4540,61 @@ function formatUndoSnapshot(editor, callback, apiName) {
 exports.default = formatUndoSnapshot;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/utils/normalizeBlockquote.ts":
+/*!************************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/utils/normalizeBlockquote.ts ***!
+  \************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * @param node start node to normalize
+ * @param quotesHandled Optional parameter to prevent already modified quotes to be rechecked.
+ * @returns
+ */
+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');
+        var isNodeRTL = isRTL(node);
+        if (quotesHandled) {
+            if (quotesHandled.indexOf(quote) > -1) {
+                return;
+            }
+            quotesHandled.push(quote);
+        }
+        while (quote) {
+            if (alignment == 'center') {
+                if (isNodeRTL) {
+                    delete quote.style.marginInlineEnd;
+                    quote.style.marginInlineStart = 'auto';
+                }
+                else {
+                    delete quote.style.marginInlineStart;
+                    quote.style.marginInlineEnd = 'auto';
+                }
+            }
+            else {
+                delete quote.style.marginInlineStart;
+                delete quote.style.marginInlineEnd;
+            }
+            quote = (0, roosterjs_editor_dom_1.findClosestElementAncestor)(quote.parentElement, undefined /* root */, 'blockquote');
+        }
+    }
+}
+exports.default = normalizeBlockquote;
+function isRTL(el) {
+    return (0, roosterjs_editor_dom_1.getComputedStyle)(el, 'direction') == 'rtl' || el.getAttribute('dir') == 'rtl';
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/utils/toggleListType.ts":
@@ -4572,7 +4642,7 @@ function toggleListType(editor, listType, startNumber, includeSiblingLists, orde
             if (editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
                 vList.setListStyleType(orderedStyle, unorderedStyle);
             }
-            vList.writeBack();
+            vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
         }
     }, undefined /* beforeRunCallback */, apiNameOverride || 'toggleListType');
 }
@@ -4758,6 +4828,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 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");
 var setContent_1 = __webpack_require__(/*! ./setContent */ "./packages/roosterjs-editor-core/lib/coreApi/setContent.ts");
@@ -4787,6 +4858,7 @@ exports.coreApiMap = {
     transformColor: transformColor_1.transformColor,
     triggerEvent: triggerEvent_1.triggerEvent,
     selectTable: selectTable_1.selectTable,
+    selectImage: selectImage_1.selectImage,
 };
 
 
@@ -4901,7 +4973,7 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
                 .replace(/\r/g, '')
                 .replace(/ {2}/g, ' ' + NBSP_HTML);
             if (line.includes('\t')) {
-                line = transformTabCharacters(line, index === 0 ? position.offset : 0);
+                line = transformTabCharacters(line, index === 0 ? position === null || position === void 0 ? void 0 : position.offset : 0);
             }
             var textNode = document.createTextNode(line);
             // There are 3 scenarios:
@@ -4928,7 +5000,7 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
     // Step 5. Sanitize the fragment before paste to make sure the content is safe
     var sanitizer = new roosterjs_editor_dom_1.HtmlSanitizer(event.sanitizingOption);
     sanitizer.convertGlobalCssToInlineCss(fragment);
-    sanitizer.sanitize(fragment, position && (0, roosterjs_editor_dom_1.getInheritableStyles)(position.element));
+    sanitizer.sanitize(fragment, position ? (0, roosterjs_editor_dom_1.getInheritableStyles)(position.element) : undefined);
     return fragment;
 };
 exports.createPasteFragment = createPasteFragment;
@@ -4968,11 +5040,14 @@ function getCurrentFormat(core, node) {
     };
 }
 function createBeforePasteEvent(core, clipboardData) {
+    var options = (0, roosterjs_editor_dom_1.createDefaultHtmlSanitizerOptions)();
+    // Remove "caret-color" style generated by Safari to make sure caret shows in right color after paste
+    options.cssStyleCallbacks['caret-color'] = function () { return false; };
     return {
         eventType: 10 /* BeforePaste */,
         clipboardData: clipboardData,
         fragment: core.contentDiv.ownerDocument.createDocumentFragment(),
-        sanitizingOption: (0, roosterjs_editor_dom_1.createDefaultHtmlSanitizerOptions)(),
+        sanitizingOption: options,
         htmlBefore: '',
         htmlAfter: '',
         htmlAttributes: {},
@@ -5225,6 +5300,12 @@ var PendableStyleCheckers = {
     isBold: function (tag, style) {
         return tag == 'B' ||
             tag == 'STRONG' ||
+            tag == 'H1' ||
+            tag == 'H2' ||
+            tag == 'H3' ||
+            tag == 'H4' ||
+            tag == 'H5' ||
+            tag == 'H6' ||
             parseInt(style.fontWeight) >= 700 ||
             ['bold', 'bolder'].indexOf(style.fontWeight) >= 0;
     },
@@ -5350,10 +5431,10 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @returns A Range object of the selection range
  */
 var getSelectionRangeEx = function (core) {
-    var _a, _b;
+    var _a, _b, _c;
     var result = null;
     if (core.lifecycle.shadowEditFragment) {
-        var _c = core.lifecycle, shadowEditTableSelectionPath = _c.shadowEditTableSelectionPath, shadowEditSelectionPath = _c.shadowEditSelectionPath;
+        var _d = core.lifecycle, shadowEditTableSelectionPath = _d.shadowEditTableSelectionPath, shadowEditSelectionPath = _d.shadowEditSelectionPath, shadowEditImageSelectionPath = _d.shadowEditImageSelectionPath;
         if (((shadowEditTableSelectionPath === null || shadowEditTableSelectionPath === void 0 ? void 0 : shadowEditTableSelectionPath.length) || 0) > 0) {
             var ranges = core.lifecycle.shadowEditTableSelectionPath.map(function (path) {
                 return (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, path.start, path.end);
@@ -5366,6 +5447,18 @@ var getSelectionRangeEx = function (core) {
                 coordinates: undefined,
             };
         }
+        else if (((shadowEditImageSelectionPath === null || shadowEditImageSelectionPath === void 0 ? void 0 : shadowEditImageSelectionPath.length) || 0) > 0) {
+            var ranges = core.lifecycle.shadowEditImageSelectionPath.map(function (path) {
+                return (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, path.start, path.end);
+            });
+            return {
+                type: 2 /* ImageSelection */,
+                ranges: ranges,
+                areAllCollapsed: checkAllCollapsed(ranges),
+                image: (0, roosterjs_editor_dom_1.findClosestElementAncestor)(ranges[0].startContainer, core.contentDiv, 'img'),
+                imageId: undefined,
+            };
+        }
         else {
             var shadowRange = shadowEditSelectionPath &&
                 (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, shadowEditSelectionPath.start, shadowEditSelectionPath.end);
@@ -5377,6 +5470,9 @@ var getSelectionRangeEx = function (core) {
             if (core.domEvent.tableSelectionRange) {
                 return core.domEvent.tableSelectionRange;
             }
+            if (core.domEvent.imageSelectionRange) {
+                return core.domEvent.imageSelectionRange;
+            }
             var selection = (_a = core.contentDiv.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
             if (!result && selection && selection.rangeCount > 0) {
                 var range = selection.getRangeAt(0);
@@ -5385,7 +5481,7 @@ var getSelectionRangeEx = function (core) {
                 }
             }
         }
-        return ((_b = core.domEvent.tableSelectionRange) !== null && _b !== void 0 ? _b : createNormalSelectionEx(core.domEvent.selectionRange ? [core.domEvent.selectionRange] : []));
+        return ((_c = (_b = core.domEvent.tableSelectionRange) !== null && _b !== void 0 ? _b : core.domEvent.imageSelectionRange) !== null && _c !== void 0 ? _c : createNormalSelectionEx(core.domEvent.selectionRange ? [core.domEvent.selectionRange] : []));
     }
 };
 exports.getSelectionRangeEx = getSelectionRangeEx;
@@ -5555,6 +5651,9 @@ var insertNode = function (core, node, option) {
     }
     core.api.transformColor(core, node, true /*includeSelf*/, function () {
         var _a, _b;
+        if (!option) {
+            return;
+        }
         switch (option.position) {
             case 0 /* Begin */:
             case 1 /* End */: {
@@ -5692,6 +5791,71 @@ var restoreUndoSnapshot = function (core, step) {
 exports.restoreUndoSnapshot = restoreUndoSnapshot;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/coreApi/selectImage.ts":
+/*!*******************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/coreApi/selectImage.ts ***!
+  \*******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectImage = void 0;
+var addSelectionStyle_1 = __webpack_require__(/*! ./utils/addSelectionStyle */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts");
+var addUniqueId_1 = __webpack_require__(/*! ./utils/addUniqueId */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var IMAGE_ID = 'imageSelected';
+var CONTENT_DIV_ID = 'contentDiv_';
+var STYLE_ID = 'imageStyle';
+/**
+ * @internal
+ * Select a image and save data of the selected range
+ * @param image Image to select
+ * @returns Selected image information
+ */
+var selectImage = function (core, image) {
+    unselect(core);
+    if (image) {
+        var range = (0, roosterjs_editor_dom_1.createRange)(image);
+        (0, addUniqueId_1.default)(image, IMAGE_ID);
+        (0, addUniqueId_1.default)(core.contentDiv, CONTENT_DIV_ID);
+        select(core, image);
+        return {
+            type: 2 /* ImageSelection */,
+            ranges: [range],
+            image: image,
+            areAllCollapsed: range.collapsed,
+        };
+    }
+    return null;
+};
+exports.selectImage = selectImage;
+var select = function (core, image) {
+    var borderCSS = buildBorderCSS(core, image.id);
+    (0, addSelectionStyle_1.default)(core, borderCSS, STYLE_ID);
+};
+var buildBorderCSS = function (core, imageId) {
+    var borderColor = core.imageSelectionBorderColor || '#DB626C';
+    return ('#' +
+        core.contentDiv.id +
+        ' #' +
+        imageId +
+        ' { margin: -2px; border: 2px solid' +
+        borderColor +
+        ' !important; }');
+};
+var unselect = function (core) {
+    var doc = core.contentDiv.ownerDocument;
+    var styleTag = doc.getElementById(STYLE_ID + core.contentDiv.id);
+    if (styleTag) {
+        doc.head.removeChild(styleTag);
+    }
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/coreApi/selectRange.ts":
@@ -5769,6 +5933,8 @@ function restorePendingFormatState(core) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.selectTable = void 0;
+var addSelectionStyle_1 = __webpack_require__(/*! ./utils/addSelectionStyle */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts");
+var addUniqueId_1 = __webpack_require__(/*! ./utils/addUniqueId */ "./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var TABLE_ID = 'tableSelected';
 var CONTENT_DIV_ID = 'contentDiv_';
@@ -5786,8 +5952,8 @@ var selectTable = function (core, table, coordinates) {
     var _a;
     unselect(core);
     if (areValidCoordinates(coordinates) && table) {
-        ensureUniqueId(table, TABLE_ID);
-        ensureUniqueId(core.contentDiv, CONTENT_DIV_ID);
+        (0, addUniqueId_1.default)(table, TABLE_ID);
+        (0, addUniqueId_1.default)(core.contentDiv, CONTENT_DIV_ID);
         var ranges = select(core, table, coordinates);
         if (!isMergedCell(table, coordinates)) {
             var cellToSelect = (_a = table.rows
@@ -5873,17 +6039,9 @@ function buildCss(table, coordinates, contentDivSelector) {
     return { css: css, ranges: ranges };
 }
 function select(core, table, coordinates) {
-    var _a;
-    var doc = core.contentDiv.ownerDocument;
     var contentDivSelector = '#' + core.contentDiv.id;
-    var _b = buildCss(table, coordinates, contentDivSelector), css = _b.css, ranges = _b.ranges;
-    var styleElement = doc.getElementById(STYLE_ID + core.contentDiv.id);
-    if (!styleElement) {
-        styleElement = doc.createElement('style');
-        doc.head.appendChild(styleElement);
-        styleElement.id = STYLE_ID + core.contentDiv.id;
-    }
-    (_a = styleElement.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(css);
+    var _a = buildCss(table, coordinates, contentDivSelector), css = _a.css, ranges = _a.ranges;
+    (0, addSelectionStyle_1.default)(core, css, STYLE_ID);
     return ranges;
 }
 function unselect(core) {
@@ -5896,27 +6054,6 @@ function unselect(core) {
         }
     }
 }
-function ensureUniqueId(el, idPrefix) {
-    var doc = el.ownerDocument;
-    if (!el.id) {
-        var cont_1 = 0;
-        var getElement = function () { return doc.getElementById(idPrefix + cont_1); };
-        //Ensure that there are no elements with the same ID
-        var element = getElement();
-        while (element) {
-            cont_1++;
-            element = getElement();
-        }
-        el.id = idPrefix + cont_1;
-    }
-    else {
-        var elements = doc.querySelectorAll("#" + el.id);
-        if (elements.length > 1) {
-            el.removeAttribute('id');
-            ensureUniqueId(el, idPrefix);
-        }
-    }
-}
 function generateCssFromCell(contentDivSelector, tableId, middleElSelector, rowIndex, cellTag, index) {
     return (contentDivSelector +
         ' #' +
@@ -6052,20 +6189,23 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 var switchShadowEdit = function (core, isOn) {
     var lifecycle = core.lifecycle, contentDiv = core.contentDiv;
-    var shadowEditFragment = lifecycle.shadowEditFragment, shadowEditSelectionPath = lifecycle.shadowEditSelectionPath, shadowEditTableSelectionPath = lifecycle.shadowEditTableSelectionPath;
+    var shadowEditFragment = lifecycle.shadowEditFragment, shadowEditSelectionPath = lifecycle.shadowEditSelectionPath, shadowEditTableSelectionPath = lifecycle.shadowEditTableSelectionPath, shadowEditImageSelectionPath = lifecycle.shadowEditImageSelectionPath;
     var wasInShadowEdit = !!shadowEditFragment;
+    var getShadowEditSelectionPath = function (selectionType, shadowEditSelection) {
+        return (((shadowEditSelection === null || shadowEditSelection === void 0 ? void 0 : shadowEditSelection.type) == selectionType &&
+            shadowEditSelection.ranges
+                .map(function (range) { return (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range); })
+                .map(function (w) { return w; })) ||
+            null);
+    };
     if (isOn) {
         if (!wasInShadowEdit) {
             var selection = core.api.getSelectionRangeEx(core);
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             shadowEditSelectionPath = range && (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range);
-            shadowEditTableSelectionPath =
-                ((selection === null || selection === void 0 ? void 0 : selection.type) == 1 /* TableSelection */ &&
-                    selection.ranges
-                        .map(function (range) { return (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range); })
-                        .map(function (w) { return w; })) ||
-                    null;
+            shadowEditTableSelectionPath = getShadowEditSelectionPath(1 /* TableSelection */, selection);
             shadowEditFragment = core.contentDiv.ownerDocument.createDocumentFragment();
+            shadowEditImageSelectionPath = getShadowEditSelectionPath(2 /* ImageSelection */, selection);
             (0, roosterjs_editor_dom_1.moveChildNodes)(shadowEditFragment, contentDiv);
             shadowEditFragment.normalize();
             core.api.triggerEvent(core, {
@@ -6076,6 +6216,7 @@ var switchShadowEdit = function (core, isOn) {
             lifecycle.shadowEditFragment = shadowEditFragment;
             lifecycle.shadowEditSelectionPath = shadowEditSelectionPath;
             lifecycle.shadowEditTableSelectionPath = shadowEditTableSelectionPath;
+            lifecycle.shadowEditImageSelectionPath = shadowEditImageSelectionPath;
         }
         (0, roosterjs_editor_dom_1.moveChildNodes)(contentDiv);
         if (lifecycle.shadowEditFragment) {
@@ -6097,6 +6238,13 @@ var switchShadowEdit = function (core, isOn) {
             if (shadowEditSelectionPath) {
                 core.api.selectRange(core, (0, roosterjs_editor_dom_1.createRange)(contentDiv, shadowEditSelectionPath.start, shadowEditSelectionPath.end));
             }
+            if (core.domEvent.imageSelectionRange) {
+                var image = core.domEvent.imageSelectionRange.image;
+                var imageElement = core.contentDiv.querySelector('#' + image.id);
+                if (imageElement) {
+                    core.domEvent.imageSelectionRange = core.api.selectImage(core, image);
+                }
+            }
             if (core.domEvent.tableSelectionRange) {
                 var _a = core.domEvent.tableSelectionRange, table = _a.table, coordinates = _a.coordinates;
                 var tableId = table.id;
@@ -6152,7 +6300,9 @@ var ColorAttributeName = [
  * Pass true to this value to force do color transformation even editor core is in light mode
  */
 var transformColor = function (core, rootNode, includeSelf, callback, direction, forceTransform) {
-    var elements = forceTransform || core.lifecycle.isDarkMode ? getAll(rootNode, includeSelf) : [];
+    var elements = rootNode && (forceTransform || core.lifecycle.isDarkMode)
+        ? getAll(rootNode, includeSelf)
+        : [];
     callback === null || callback === void 0 ? void 0 : callback();
     if (direction == 1 /* DarkToLight */) {
         transformToLightMode(elements);
@@ -6295,6 +6445,83 @@ function handledExclusively(event, plugin) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts":
+/*!*******************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/coreApi/utils/addSelectionStyle.ts ***!
+  \*******************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Add style to selected elements
+ * @param core The Editor core object
+ * @param cssRule The css rule that must added to the selection
+ * @param styleId the ID of the style tag
+ */
+function addSelectionStyle(core, cssRule, styleId) {
+    var _a;
+    var styleTagId = styleId + core.contentDiv.id;
+    var doc = core.contentDiv.ownerDocument;
+    var styleTag = doc.getElementById(styleTagId);
+    if (!styleTag) {
+        styleTag = doc.createElement('style');
+        styleTag.id = styleTagId;
+        doc.head.appendChild(styleTag);
+    }
+    (_a = styleTag.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(cssRule);
+}
+exports.default = addSelectionStyle;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts":
+/*!*************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/coreApi/utils/addUniqueId.ts ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Add an unique id to element and ensure that is unique
+ * @param el The HTMLElement that will receive the id
+ * @param idPrefix The prefix that will antecede the id (Ex: tableSelected01)
+ */
+function addUniqueId(el, idPrefix) {
+    var doc = el.ownerDocument;
+    if (!el.id) {
+        applyId(el, idPrefix, doc);
+    }
+    else {
+        var elements = doc.querySelectorAll("#" + el.id);
+        if (elements.length > 1) {
+            el.removeAttribute('id');
+            applyId(el, idPrefix, doc);
+        }
+    }
+}
+exports.default = addUniqueId;
+function applyId(el, idPrefix, doc) {
+    var cont = 0;
+    var getElement = function () { return doc.getElementById(idPrefix + cont); };
+    //Ensure that there are no elements with the same ID
+    var element = getElement();
+    while (element) {
+        cont++;
+        element = getElement();
+    }
+    el.id = idPrefix + cont;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/corePlugins/CopyPastePlugin.ts":
@@ -6307,6 +6534,8 @@ function handledExclusively(event, plugin) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var forEachSelectedCell_1 = __webpack_require__(/*! ./utils/forEachSelectedCell */ "./packages/roosterjs-editor-core/lib/corePlugins/utils/forEachSelectedCell.ts");
+var removeCellsOutsideSelection_1 = __webpack_require__(/*! ./utils/removeCellsOutsideSelection */ "./packages/roosterjs-editor-core/lib/corePlugins/utils/removeCellsOutsideSelection.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * @internal
@@ -6319,20 +6548,22 @@ var CopyPastePlugin = /** @class */ (function () {
      */
     function CopyPastePlugin(options) {
         var _this = this;
+        this.editor = null;
+        this.disposer = null;
         this.onPaste = function (event) {
-            var _a;
             var range;
-            (0, roosterjs_editor_dom_1.extractClipboardEvent)(event, function (clipboardData) { var _a; return (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.paste(clipboardData); }, {
-                allowedCustomPasteType: _this.state.allowedCustomPasteType,
-                getTempDiv: function () {
-                    var _a;
-                    range = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getSelectionRange();
-                    return _this.getTempDiv();
-                },
-                removeTempDiv: function (div) {
-                    _this.cleanUpAndRestoreSelection(div, range, false /* isCopy */);
-                },
-            }, (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getSelectionRange());
+            if (_this.editor) {
+                (0, roosterjs_editor_dom_1.extractClipboardEvent)(event, function (clipboardData) { return _this.editor.paste(clipboardData); }, {
+                    allowedCustomPasteType: _this.state.allowedCustomPasteType,
+                    getTempDiv: function () {
+                        range = _this.editor.getSelectionRange();
+                        return _this.getTempDiv(_this.editor);
+                    },
+                    removeTempDiv: function (div) {
+                        _this.cleanUpAndRestoreSelection(div, range, false /* isCopy */);
+                    },
+                }, _this.editor.getSelectionRange());
+            }
         };
         this.state = {
             allowedCustomPasteType: options.allowedCustomPasteType || [],
@@ -6352,7 +6583,7 @@ var CopyPastePlugin = /** @class */ (function () {
         var _this = this;
         this.editor = editor;
         this.disposer = this.editor.addDomEventHandler({
-            paste: this.onPaste,
+            paste: function (e) { return _this.onPaste(e); },
             copy: function (e) { return _this.onCutCopy(e, false /*isCut*/); },
             cut: function (e) { return _this.onCutCopy(e, true /*isCut*/); },
         });
@@ -6361,7 +6592,9 @@ var CopyPastePlugin = /** @class */ (function () {
      * Dispose this plugin
      */
     CopyPastePlugin.prototype.dispose = function () {
-        this.disposer();
+        if (this.disposer) {
+            this.disposer();
+        }
         this.disposer = null;
         this.editor = null;
     };
@@ -6373,40 +6606,55 @@ var CopyPastePlugin = /** @class */ (function () {
     };
     CopyPastePlugin.prototype.onCutCopy = function (event, isCut) {
         var _this = this;
-        var selection = this.editor.getSelectionRangeEx();
-        if (selection && !selection.areAllCollapsed) {
-            var html = this.editor.getContent(2 /* RawHTMLWithSelection */);
-            var tempDiv_1 = this.getTempDiv(true /*forceInLightMode*/);
-            var metadata = (0, roosterjs_editor_dom_1.setHtmlWithMetadata)(tempDiv_1, html, this.editor.getTrustedHTMLHandler());
-            var newRange = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 0 /* Normal */
-                ? (0, roosterjs_editor_dom_1.createRange)(tempDiv_1, metadata.start, metadata.end)
-                : null;
-            this.editor.triggerPluginEvent(9 /* BeforeCutCopy */, {
-                clonedRoot: tempDiv_1,
-                range: newRange,
-                rawEvent: event,
-                isCut: isCut,
-            });
-            if (newRange) {
-                (0, roosterjs_editor_dom_1.addRangeToSelection)(newRange);
-            }
-            this.editor.runAsync(function (editor) {
-                _this.cleanUpAndRestoreSelection(tempDiv_1, selection, !isCut /* isCopy */);
-                if (isCut) {
-                    editor.addUndoSnapshot(function () {
-                        var position = _this.editor.deleteSelectedContent();
-                        editor.focus();
-                        editor.select(position);
-                    }, "Cut" /* Cut */);
+        if (this.editor) {
+            var selection_1 = this.editor.getSelectionRangeEx();
+            if (selection_1 && !selection_1.areAllCollapsed) {
+                var html = this.editor.getContent(2 /* RawHTMLWithSelection */);
+                var tempDiv_1 = this.getTempDiv(this.editor, true /*forceInLightMode*/);
+                var metadata = (0, roosterjs_editor_dom_1.setHtmlWithMetadata)(tempDiv_1, html, this.editor.getTrustedHTMLHandler());
+                var newRange = void 0;
+                if (selection_1.type === 1 /* TableSelection */ &&
+                    selection_1.coordinates) {
+                    var table = tempDiv_1.querySelector("#" + selection_1.table.id);
+                    newRange = this.createTableRange(table, selection_1.coordinates);
+                    if (isCut) {
+                        this.deleteTableContent(this.editor, selection_1.table, selection_1.coordinates);
+                    }
                 }
-            });
+                else {
+                    newRange =
+                        (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 0 /* Normal */
+                            ? (0, roosterjs_editor_dom_1.createRange)(tempDiv_1, metadata.start, metadata.end)
+                            : null;
+                }
+                if (newRange) {
+                    var cutCopyEvent = this.editor.triggerPluginEvent(9 /* BeforeCutCopy */, {
+                        clonedRoot: tempDiv_1,
+                        range: newRange,
+                        rawEvent: event,
+                        isCut: isCut,
+                    });
+                    if (cutCopyEvent.range) {
+                        (0, roosterjs_editor_dom_1.addRangeToSelection)(newRange);
+                    }
+                    this.editor.runAsync(function (editor) {
+                        _this.cleanUpAndRestoreSelection(tempDiv_1, selection_1, !isCut /* isCopy */);
+                        if (isCut) {
+                            editor.addUndoSnapshot(function () {
+                                var position = _this.editor.deleteSelectedContent();
+                                editor.focus();
+                                editor.select(position);
+                            }, "Cut" /* Cut */);
+                        }
+                    });
+                }
+            }
         }
     };
-    CopyPastePlugin.prototype.getTempDiv = function (forceInLightMode) {
-        var _this = this;
-        var div = this.editor.getCustomData('CopyPasteTempDiv', function () {
-            var tempDiv = (0, roosterjs_editor_dom_1.createElement)(3 /* CopyPasteTempDiv */, _this.editor.getDocument());
-            _this.editor.insertNode(tempDiv, {
+    CopyPastePlugin.prototype.getTempDiv = function (editor, forceInLightMode) {
+        var div = editor.getCustomData('CopyPasteTempDiv', function () {
+            var tempDiv = (0, roosterjs_editor_dom_1.createElement)(3 /* CopyPasteTempDiv */, editor.getDocument());
+            editor.insertNode(tempDiv, {
                 position: 4 /* Outside */,
             });
             return tempDiv;
@@ -6425,7 +6673,9 @@ var CopyPastePlugin = /** @class */ (function () {
             var selection = range;
             switch (selection.type) {
                 case 1 /* TableSelection */:
-                    this.editor.select(selection.table, selection.coordinates);
+                    if (this.editor && selection.table && selection.coordinates) {
+                        this.editor.select(selection.table, selection.coordinates);
+                    }
                     break;
                 case 0 /* Normal */:
                     var range_1 = (_b = selection.ranges) === null || _b === void 0 ? void 0 : _b[0];
@@ -6442,13 +6692,43 @@ var CopyPastePlugin = /** @class */ (function () {
         (0, roosterjs_editor_dom_1.moveChildNodes)(tempDiv);
     };
     CopyPastePlugin.prototype.restoreRange = function (range, isCopy) {
-        if (range) {
+        if (range && this.editor) {
             if (isCopy && roosterjs_editor_dom_1.Browser.isAndroid) {
                 range.collapse();
             }
             this.editor.select(range);
         }
     };
+    CopyPastePlugin.prototype.createTableRange = function (table, selection) {
+        var clonedVTable = new roosterjs_editor_dom_1.VTable(table);
+        clonedVTable.selection = selection;
+        (0, removeCellsOutsideSelection_1.removeCellsOutsideSelection)(clonedVTable);
+        clonedVTable.writeBack();
+        return (0, roosterjs_editor_dom_1.createRange)(clonedVTable.table);
+    };
+    CopyPastePlugin.prototype.deleteTableContent = function (editor, table, selection) {
+        var selectedVTable = new roosterjs_editor_dom_1.VTable(table);
+        selectedVTable.selection = selection;
+        (0, forEachSelectedCell_1.forEachSelectedCell)(selectedVTable, function (cell) {
+            if (cell === null || cell === void 0 ? void 0 : cell.td) {
+                cell.td.innerHTML = editor.getTrustedHTMLHandler()('<br>');
+            }
+        });
+        var wholeTableSelected = (0, roosterjs_editor_dom_1.isWholeTableSelected)(selectedVTable, selection);
+        var isWholeColumnSelected = table.rows.length - 1 === selection.lastCell.y && selection.firstCell.y === 0;
+        if (wholeTableSelected) {
+            selectedVTable.edit(4 /* DeleteTable */);
+            selectedVTable.writeBack();
+        }
+        else if (isWholeColumnSelected) {
+            selectedVTable.edit(5 /* DeleteColumn */);
+            selectedVTable.writeBack();
+        }
+        if (wholeTableSelected || isWholeColumnSelected) {
+            table.style.removeProperty('width');
+            table.style.removeProperty('height');
+        }
+    };
     return CopyPastePlugin;
 }());
 exports.default = CopyPastePlugin;
@@ -6495,9 +6775,13 @@ var DOMEventPlugin = /** @class */ (function () {
         };
         this.onFocus = function () {
             var _a = _this.state.tableSelectionRange || {}, table = _a.table, coordinates = _a.coordinates;
+            var image = (_this.state.imageSelectionRange || {}).image;
             if (table && coordinates) {
                 _this.editor.select(table, coordinates);
             }
+            else if (image) {
+                _this.editor.select(image);
+            }
             else {
                 _this.editor.select(_this.state.selectionRange);
             }
@@ -6561,6 +6845,7 @@ var DOMEventPlugin = /** @class */ (function () {
             stopPrintableKeyboardEventPropagation: !options.allowKeyboardEventPropagation,
             contextMenuProviders: ((_a = options.plugins) === null || _a === void 0 ? void 0 : _a.filter(isContextMenuProvider)) || [],
             tableSelectionRange: null,
+            imageSelectionRange: null,
         };
     }
     /**
@@ -7197,6 +7482,7 @@ var LifecyclePlugin = /** @class */ (function () {
             shadowEditFragment: null,
             shadowEditSelectionPath: null,
             shadowEditTableSelectionPath: null,
+            shadowEditImageSelectionPath: null,
         };
     }
     /**
@@ -8055,33 +8341,114 @@ exports.getPluginState = getPluginState;
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-core/lib/editor/Editor.ts":
-/*!*************************************************************!*\
-  !*** ./packages/roosterjs-editor-core/lib/editor/Editor.ts ***!
-  \*************************************************************/
+/***/ "./packages/roosterjs-editor-core/lib/corePlugins/utils/forEachSelectedCell.ts":
+/*!*************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/corePlugins/utils/forEachSelectedCell.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 });
-var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugins */ "./packages/roosterjs-editor-core/lib/corePlugins/createCorePlugins.ts");
-var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+exports.forEachSelectedCell = void 0;
 /**
- * RoosterJs core editor class
- */
+ * @internal
+ * Executes an action to all the cells within the selection range.
+ * @param callback action to apply on each selected cell
+ * @returns the amount of cells modified
+ */
+var forEachSelectedCell = function (vTable, callback) {
+    var _a;
+    if (vTable.selection) {
+        var _b = vTable.selection, lastCell = _b.lastCell, firstCell = _b.firstCell;
+        for (var y = firstCell.y; y <= lastCell.y; y++) {
+            for (var x = firstCell.x; x <= lastCell.x; x++) {
+                if (vTable.cells && ((_a = vTable.cells[y][x]) === null || _a === void 0 ? void 0 : _a.td)) {
+                    callback(vTable.cells[y][x]);
+                }
+            }
+        }
+    }
+};
+exports.forEachSelectedCell = forEachSelectedCell;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/corePlugins/utils/removeCellsOutsideSelection.ts":
+/*!*********************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/corePlugins/utils/removeCellsOutsideSelection.ts ***!
+  \*********************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeCellsOutsideSelection = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * Remove the cells outside of the selection.
+ * @param vTable VTable to remove selection
+ */
+var removeCellsOutsideSelection = function (vTable) {
+    if (vTable.selection) {
+        if ((0, roosterjs_editor_dom_1.isWholeTableSelected)(vTable, vTable.selection)) {
+            return;
+        }
+        vTable.table.style.removeProperty('width');
+        vTable.table.style.removeProperty('height');
+        var _a = vTable.selection, firstCell = _a.firstCell, lastCell = _a.lastCell;
+        var resultCells_1 = [];
+        var firstX_1 = firstCell.x;
+        var firstY_1 = firstCell.y;
+        var lastX_1 = lastCell.x;
+        var lastY_1 = lastCell.y;
+        if (vTable.cells) {
+            vTable.cells.forEach(function (row, y) {
+                row = row.filter(function (_, x) { return y >= firstY_1 && y <= lastY_1 && x >= firstX_1 && x <= lastX_1; });
+                if (row.length > 0) {
+                    resultCells_1.push(row);
+                }
+            });
+            vTable.cells = resultCells_1;
+        }
+    }
+};
+exports.removeCellsOutsideSelection = removeCellsOutsideSelection;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/editor/Editor.ts":
+/*!*************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/editor/Editor.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 });
+var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugins */ "./packages/roosterjs-editor-core/lib/corePlugins/createCorePlugins.ts");
+var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * RoosterJs core editor class
+ */
 var Editor = /** @class */ (function () {
     //#region Lifecycle
     /**
@@ -8092,6 +8459,8 @@ var Editor = /** @class */ (function () {
     function Editor(contentDiv, options) {
         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');
@@ -8101,14 +8470,22 @@ var Editor = /** @class */ (function () {
         var plugins = [];
         (0, roosterjs_editor_dom_1.getObjectKeys)(corePlugins).forEach(function (name) {
             if (name == '_placeholder') {
-                (0, roosterjs_editor_dom_1.arrayPush)(plugins, options.plugins);
+                if (options.plugins) {
+                    (0, roosterjs_editor_dom_1.arrayPush)(plugins, options.plugins);
+                }
             }
             else {
                 plugins.push(corePlugins[name]);
             }
         });
-        var zoomScale = options.zoomScale > 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; }) });
+        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 });
         // 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
@@ -8118,8 +8495,9 @@ var Editor = /** @class */ (function () {
      * Dispose this editor, dispose all plugins and custom data
      */
     Editor.prototype.dispose = function () {
-        for (var i = this.core.plugins.length - 1; i >= 0; i--) {
-            this.core.plugins[i].dispose();
+        var core = this.getCore();
+        for (var i = core.plugins.length - 1; i >= 0; i--) {
+            core.plugins[i].dispose();
         }
         this.core = null;
     };
@@ -8143,7 +8521,8 @@ var Editor = /** @class */ (function () {
      * @returns true if node is inserted. Otherwise false
      */
     Editor.prototype.insertNode = function (node, option) {
-        return node ? this.core.api.insertNode(this.core, node, option) : false;
+        var core = this.getCore();
+        return node ? core.api.insertNode(core, node, option !== null && option !== void 0 ? option : null) : false;
     };
     /**
      * Delete a node from editor content
@@ -8152,7 +8531,7 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.deleteNode = function (node) {
         // Only remove the node when it falls within editor
-        if (node && this.contains(node)) {
+        if (node && this.contains(node) && node.parentNode) {
             node.parentNode.removeChild(node);
             return true;
         }
@@ -8166,9 +8545,10 @@ var Editor = /** @class */ (function () {
      * @returns true if node is replaced. Otherwise false
      */
     Editor.prototype.replaceNode = function (existingNode, toNode, transformColorForDarkMode) {
+        var core = this.getCore();
         // Only replace the node when it falls within editor
         if (this.contains(existingNode) && toNode) {
-            this.core.api.transformColor(this.core, transformColorForDarkMode ? toNode : null, true /*includeSelf*/, function () { return existingNode.parentNode.replaceChild(toNode, existingNode); }, 0 /* LightToDark */);
+            core.api.transformColor(core, transformColorForDarkMode ? toNode : null, true /*includeSelf*/, function () { var _a; return (_a = existingNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(toNode, existingNode); }, 0 /* LightToDark */);
             return true;
         }
         return false;
@@ -8179,25 +8559,25 @@ var Editor = /** @class */ (function () {
      * @returns The BlockElement result
      */
     Editor.prototype.getBlockElementAtNode = function (node) {
-        return (0, roosterjs_editor_dom_1.getBlockElementAtNode)(this.core.contentDiv, node);
+        return (0, roosterjs_editor_dom_1.getBlockElementAtNode)(this.getCore().contentDiv, node);
     };
     Editor.prototype.contains = function (arg) {
-        return (0, roosterjs_editor_dom_1.contains)(this.core.contentDiv, arg);
+        return (0, roosterjs_editor_dom_1.contains)(this.getCore().contentDiv, arg);
     };
     Editor.prototype.queryElements = function (selector, scopeOrCallback, callback) {
-        var _this = this;
         if (scopeOrCallback === void 0) { scopeOrCallback = 0 /* Body */; }
+        var core = this.getCore();
         var result = [];
         var scope = scopeOrCallback instanceof Function ? 0 /* Body */ : scopeOrCallback;
         callback = scopeOrCallback instanceof Function ? scopeOrCallback : callback;
         var selectionEx = scope == 0 /* Body */ ? null : this.getSelectionRangeEx();
         if (selectionEx) {
             selectionEx.ranges.forEach(function (range) {
-                result.push.apply(result, (0, roosterjs_editor_dom_1.queryElements)(_this.core.contentDiv, selector, callback, scope, range));
+                result.push.apply(result, (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, selector, callback, scope, range));
             });
         }
         else {
-            return (0, roosterjs_editor_dom_1.queryElements)(this.core.contentDiv, selector, callback, scope, null);
+            return (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, selector, callback, scope, undefined /* range */);
         }
         return result;
     };
@@ -8213,7 +8593,7 @@ var Editor = /** @class */ (function () {
      * otherwise just return start and end
      */
     Editor.prototype.collapseNodes = function (start, end, canSplitParent) {
-        return (0, roosterjs_editor_dom_1.collapseNodes)(this.core.contentDiv, start, end, canSplitParent);
+        return (0, roosterjs_editor_dom_1.collapseNodes)(this.getCore().contentDiv, start, end, canSplitParent);
     };
     //#endregion
     //#region Content API
@@ -8223,7 +8603,7 @@ var Editor = /** @class */ (function () {
      * @returns True if there's no visible content, otherwise false
      */
     Editor.prototype.isEmpty = function (trim) {
-        return (0, roosterjs_editor_dom_1.isNodeEmpty)(this.core.contentDiv, trim);
+        return (0, roosterjs_editor_dom_1.isNodeEmpty)(this.getCore().contentDiv, trim);
     };
     /**
      * Get current editor content as HTML string
@@ -8232,7 +8612,8 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.getContent = function (mode) {
         if (mode === void 0) { mode = 0 /* CleanHTML */; }
-        return this.core.api.getContent(this.core, mode);
+        var core = this.getCore();
+        return core.api.getContent(core, mode);
     };
     /**
      * Set HTML content to this editor. All existing content will be replaced. A ContentChanged event will be triggered
@@ -8241,7 +8622,8 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.setContent = function (content, triggerContentChangedEvent) {
         if (triggerContentChangedEvent === void 0) { triggerContentChangedEvent = true; }
-        this.core.api.setContent(this.core, content, triggerContentChangedEvent);
+        var core = this.getCore();
+        core.api.setContent(core, content, triggerContentChangedEvent);
     };
     /**
      * Insert HTML content into editor
@@ -8256,7 +8638,7 @@ var Editor = /** @class */ (function () {
         var _a;
         if (content) {
             var doc = this.getDocument();
-            var body = (_a = new DOMParser().parseFromString(this.core.trustedHTMLHandler(content), 'text/html')) === null || _a === void 0 ? void 0 : _a.body;
+            var body = (_a = new DOMParser().parseFromString(this.getCore().trustedHTMLHandler(content), 'text/html')) === null || _a === void 0 ? void 0 : _a.body;
             var allNodes = (body === null || body === void 0 ? void 0 : body.childNodes) ? (0, roosterjs_editor_dom_1.toArray)(body.childNodes) : [];
             // If it is to insert on new line, and there are more than one node in the collection, wrap all nodes with
             // a parent DIV before calling insertNode on each top level sub node. Otherwise, every sub node may get wrapped
@@ -8274,7 +8656,10 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.deleteSelectedContent = function () {
         var range = this.getSelectionRange();
-        return range && !range.collapsed && (0, roosterjs_editor_dom_1.deleteSelectedContent)(this.core.contentDiv, range);
+        if (range && !range.collapsed) {
+            return (0, roosterjs_editor_dom_1.deleteSelectedContent)(this.getCore().contentDiv, range);
+        }
+        return null;
     };
     /**
      * Paste into editor using a clipboardData object
@@ -8285,6 +8670,9 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.paste = function (clipboardData, pasteAsText, applyCurrentFormat) {
         var _this = this;
+        if (pasteAsText === void 0) { pasteAsText = false; }
+        if (applyCurrentFormat === void 0) { applyCurrentFormat = false; }
+        var core = this.getCore();
         if (!clipboardData) {
             return;
         }
@@ -8297,11 +8685,13 @@ var Editor = /** @class */ (function () {
         }
         var range = this.getSelectionRange();
         var pos = range && roosterjs_editor_dom_1.Position.getStart(range);
-        var fragment = this.core.api.createPasteFragment(this.core, clipboardData, pos, pasteAsText, applyCurrentFormat);
-        this.addUndoSnapshot(function () {
-            _this.insertNode(fragment);
-            return clipboardData;
-        }, "Paste" /* Paste */);
+        var fragment = core.api.createPasteFragment(core, clipboardData, pos, pasteAsText, applyCurrentFormat);
+        if (fragment) {
+            this.addUndoSnapshot(function () {
+                _this.insertNode(fragment);
+                return clipboardData;
+            }, "Paste" /* Paste */);
+        }
     };
     //#endregion
     //#region Focus and Selection
@@ -8314,7 +8704,8 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.getSelectionRange = function (tryGetFromCache) {
         if (tryGetFromCache === void 0) { tryGetFromCache = true; }
-        return this.core.api.getSelectionRange(this.core, tryGetFromCache);
+        var core = this.getCore();
+        return core.api.getSelectionRange(core, tryGetFromCache);
     };
     /**
      * Get current selection range from Editor.
@@ -8324,7 +8715,8 @@ var Editor = /** @class */ (function () {
      * @returns current selection range, or null if editor never got focus before
      */
     Editor.prototype.getSelectionRangeEx = function () {
-        return this.core.api.getSelectionRangeEx(this.core);
+        var core = this.getCore();
+        return core.api.getSelectionRangeEx(core);
     };
     /**
      * Get current selection in a serializable format
@@ -8333,40 +8725,53 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.getSelectionPath = function () {
         var range = this.getSelectionRange();
-        return range && (0, roosterjs_editor_dom_1.getSelectionPath)(this.core.contentDiv, range);
+        return range && (0, roosterjs_editor_dom_1.getSelectionPath)(this.getCore().contentDiv, range);
     };
     /**
      * Check if focus is in editor now
      * @returns true if focus is in editor, otherwise false
      */
     Editor.prototype.hasFocus = function () {
-        return this.core.api.hasFocus(this.core);
+        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 () {
-        this.core.api.focus(this.core);
+        var core = this.getCore();
+        core.api.focus(core);
     };
     Editor.prototype.select = function (arg1, arg2, arg3, arg4) {
-        var _a;
-        if (!!((_a = arg1) === null || _a === void 0 ? void 0 : _a.rows)) {
-            var selection = this.core.api.selectTable(this.core, arg1, arg2);
-            this.core.domEvent.tableSelectionRange = selection;
+        var core = this.getCore();
+        if (arg1 && 'rows' in arg1) {
+            var selection = core.api.selectTable(core, arg1, arg2);
+            core.domEvent.tableSelectionRange = selection;
+            return !!selection;
+        }
+        else {
+            core.api.selectTable(core, null);
+            core.domEvent.tableSelectionRange = null;
+        }
+        if (this.isFeatureEnabled("ImageSelection" /* ImageSelection */) &&
+            (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLImageElement') &&
+            !arg2) {
+            var selection = core.api.selectImage(core, arg1);
+            core.domEvent.imageSelectionRange = selection;
             return !!selection;
         }
         else {
-            this.core.api.selectTable(this.core, null);
-            this.core.domEvent.tableSelectionRange = null;
+            core.api.selectImage(core, null);
+            core.domEvent.imageSelectionRange = null;
         }
         var range = !arg1
             ? null
             : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
                 ? arg1
-                : Array.isArray(arg1.start) && Array.isArray(arg1.end)
-                    ? (0, roosterjs_editor_dom_1.createRange)(this.core.contentDiv, arg1.start, arg1.end)
+                : 'start' in arg1 && Array.isArray(arg1.end)
+                    ? (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, arg1.start, arg1.end)
                     : (0, roosterjs_editor_dom_1.createRange)(arg1, arg2, arg3, arg4);
-        return this.contains(range) && this.core.api.selectRange(this.core, range);
+        return !!range && this.contains(range) && core.api.selectRange(core, range);
     };
     /**
      * Get current focused position. Return null if editor doesn't have focus at this time.
@@ -8374,7 +8779,7 @@ var Editor = /** @class */ (function () {
     Editor.prototype.getFocusedPosition = function () {
         var _a;
         var sel = (_a = this.getDocument().defaultView) === null || _a === void 0 ? void 0 : _a.getSelection();
-        if (this.contains(sel && sel.focusNode)) {
+        if ((sel === null || sel === void 0 ? void 0 : sel.focusNode) && this.contains(sel.focusNode)) {
             return new roosterjs_editor_dom_1.Position(sel.focusNode, sel.focusOffset);
         }
         var range = this.getSelectionRange();
@@ -8397,14 +8802,16 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.getElementAtCursor = function (selector, startFrom, event) {
         var _this = this;
-        event = startFrom ? null : event; // Only use cache when startFrom is not specified, for different start position can have different result
-        return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'GET_ELEMENT_AT_CURSOR_' + selector, function () {
+        var _a;
+        event = startFrom ? undefined : event; // Only use cache when startFrom is not specified, for different start position can have different result
+        return ((_a = (0, roosterjs_editor_dom_1.cacheGetEventData)(event !== null && event !== void 0 ? event : null, 'GET_ELEMENT_AT_CURSOR_' + selector, function () {
             if (!startFrom) {
                 var position = _this.getFocusedPosition();
-                startFrom = position && position.node;
+                startFrom = position === null || position === void 0 ? void 0 : position.node;
             }
-            return (startFrom && (0, roosterjs_editor_dom_1.findClosestElementAncestor)(startFrom, _this.core.contentDiv, selector));
-        });
+            return (startFrom &&
+                (0, roosterjs_editor_dom_1.findClosestElementAncestor)(startFrom, _this.getCore().contentDiv, selector));
+        })) !== null && _a !== void 0 ? _a : null);
     };
     /**
      * Check if this position is at beginning of the editor.
@@ -8413,18 +8820,18 @@ var Editor = /** @class */ (function () {
      * @returns True if position is at beginning of the editor, otherwise false
      */
     Editor.prototype.isPositionAtBeginning = function (position) {
-        return (0, roosterjs_editor_dom_1.isPositionAtBeginningOf)(position, this.core.contentDiv);
+        return (0, roosterjs_editor_dom_1.isPositionAtBeginningOf)(position, this.getCore().contentDiv);
     };
     /**
      * Get impacted regions from selection
      */
     Editor.prototype.getSelectedRegions = function (type) {
-        var _this = this;
         if (type === void 0) { type = 0 /* Table */; }
         var selection = this.getSelectionRangeEx();
         var result = [];
+        var contentDiv = this.getCore().contentDiv;
         selection.ranges.forEach(function (range) {
-            result.push.apply(result, (range ? (0, roosterjs_editor_dom_1.getRegionsFromRange)(_this.core.contentDiv, range, type) : []));
+            result.push.apply(result, (range ? (0, roosterjs_editor_dom_1.getRegionsFromRange)(contentDiv, range, type) : []));
         });
         return result.filter(function (value, index, self) {
             return self.indexOf(value) === index;
@@ -8435,7 +8842,8 @@ var Editor = /** @class */ (function () {
     Editor.prototype.addDomEventHandler = function (nameOrMap, handler) {
         var _a;
         var eventsToMap = typeof nameOrMap == 'string' ? (_a = {}, _a[nameOrMap] = handler, _a) : nameOrMap;
-        return this.core.api.attachDomEvent(this.core, eventsToMap);
+        var core = this.getCore();
+        return core.api.attachDomEvent(core, eventsToMap);
     };
     /**
      * Trigger an event to be dispatched to all plugins
@@ -8447,8 +8855,10 @@ var Editor = /** @class */ (function () {
      * the result of this function provides a chance to read the modified result
      */
     Editor.prototype.triggerPluginEvent = function (eventType, data, broadcast) {
+        if (broadcast === void 0) { broadcast = false; }
+        var core = this.getCore();
         var event = __assign({ eventType: eventType }, data);
-        this.core.api.triggerEvent(this.core, event, broadcast);
+        core.api.triggerEvent(core, event, broadcast);
         return event;
     };
     /**
@@ -8470,14 +8880,16 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.undo = function () {
         this.focus();
-        this.core.api.restoreUndoSnapshot(this.core, -1 /*step*/);
+        var core = this.getCore();
+        core.api.restoreUndoSnapshot(core, -1 /*step*/);
     };
     /**
      * Redo next edit operation
      */
     Editor.prototype.redo = function () {
         this.focus();
-        this.core.api.restoreUndoSnapshot(this.core, 1 /*step*/);
+        var core = this.getCore();
+        core.api.restoreUndoSnapshot(core, 1 /*step*/);
     };
     /**
      * Add undo snapshot, and execute a format callback function, then add another undo snapshot, then trigger
@@ -8490,13 +8902,14 @@ var Editor = /** @class */ (function () {
      * @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) {
-        this.core.api.addUndoSnapshot(this.core, 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 () {
-        var _a = this.core.undo, hasNewContent = _a.hasNewContent, snapshotsService = _a.snapshotsService;
+        var _a = this.getCore().undo, hasNewContent = _a.hasNewContent, snapshotsService = _a.snapshotsService;
         return {
             canUndo: hasNewContent || snapshotsService.canMove(-1 /*previousSnapshot*/),
             canRedo: snapshotsService.canMove(1 /*nextSnapshot*/),
@@ -8509,13 +8922,13 @@ var Editor = /** @class */ (function () {
      * @returns The HTML document which contains this editor
      */
     Editor.prototype.getDocument = function () {
-        return this.core.contentDiv.ownerDocument;
+        return this.getCore().contentDiv.ownerDocument;
     };
     /**
      * Get the scroll container of the editor
      */
     Editor.prototype.getScrollContainer = function () {
-        return this.core.domEvent.scrollContainer;
+        return this.getCore().domEvent.scrollContainer;
     };
     /**
      * Get custom data related to this editor
@@ -8526,7 +8939,8 @@ var Editor = /** @class */ (function () {
      * dispose editor.
      */
     Editor.prototype.getCustomData = function (key, getter, disposer) {
-        return (this.core.lifecycle.customData[key] = this.core.lifecycle.customData[key] || {
+        var core = this.getCore();
+        return (core.lifecycle.customData[key] = core.lifecycle.customData[key] || {
             value: getter ? getter() : undefined,
             disposer: disposer,
         }).value;
@@ -8536,48 +8950,57 @@ var Editor = /** @class */ (function () {
      * @returns True if editor is in IME input sequence, otherwise false
      */
     Editor.prototype.isInIME = function () {
-        return this.core.domEvent.isInIME;
+        return this.getCore().domEvent.isInIME;
     };
     /**
      * Get default format of this editor
      * @returns Default format object of this editor
      */
     Editor.prototype.getDefaultFormat = function () {
-        return this.core.lifecycle.defaultFormat;
+        return this.getCore().lifecycle.defaultFormat;
     };
     /**
      * 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) {
-        return roosterjs_editor_dom_1.ContentTraverser.createBodyTraverser(this.core.contentDiv, 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) {
-        range = range !== null && range !== void 0 ? range : this.getSelectionRange();
-        return range && roosterjs_editor_dom_1.ContentTraverser.createSelectionTraverser(this.core.contentDiv, range);
+        var _a;
+        range = (_a = range !== null && range !== void 0 ? range : this.getSelectionRange()) !== null && _a !== void 0 ? _a : undefined;
+        return range
+            ? roosterjs_editor_dom_1.ContentTraverser.createSelectionTraverser(this.getCore().contentDiv, range)
+            : null;
     };
     /**
      * Get a content traverser for current block element start from specified position
      * @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) {
         if (startFrom === void 0) { startFrom = 3 /* SelectionStart */; }
         var range = this.getSelectionRange();
-        return (range && roosterjs_editor_dom_1.ContentTraverser.createBlockTraverser(this.core.contentDiv, range, startFrom));
+        return range
+            ? roosterjs_editor_dom_1.ContentTraverser.createBlockTraverser(this.getCore().contentDiv, range, startFrom)
+            : null;
     };
     /**
      * Get a text traverser of current selection
      * @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
+     * @returns A content traverser, or null if editor never got focus before
      */
     Editor.prototype.getContentSearcherOfCursor = function (event) {
         var _this = this;
-        return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'ContentSearcher', function () {
+        return (0, roosterjs_editor_dom_1.cacheGetEventData)(event !== null && event !== void 0 ? event : null, 'ContentSearcher', function () {
             var range = _this.getSelectionRange();
-            return (range && new roosterjs_editor_dom_1.PositionContentSearcher(_this.core.contentDiv, roosterjs_editor_dom_1.Position.getStart(range)));
+            return (range &&
+                new roosterjs_editor_dom_1.PositionContentSearcher(_this.getCore().contentDiv, roosterjs_editor_dom_1.Position.getStart(range)));
         });
     };
     /**
@@ -8587,7 +9010,7 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.runAsync = function (callback) {
         var _this = this;
-        var win = this.core.contentDiv.ownerDocument.defaultView || window;
+        var win = this.getCore().contentDiv.ownerDocument.defaultView || window;
         var handle = win.requestAnimationFrame(function () {
             if (!_this.isDisposed() && callback) {
                 callback(_this);
@@ -8604,20 +9027,22 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.setEditorDomAttribute = function (name, value) {
         if (value === null) {
-            this.core.contentDiv.removeAttribute(name);
+            this.getCore().contentDiv.removeAttribute(name);
         }
         else {
-            this.core.contentDiv.setAttribute(name, value);
+            this.getCore().contentDiv.setAttribute(name, value);
         }
     };
     /**
-     * get DOM attribute of editor content DIV
+     * 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) {
-        return this.core.contentDiv.getAttribute(name);
+        return this.getCore().contentDiv.getAttribute(name);
     };
     /**
+     * @deprecated Use getVisibleViewport() instead.
+     *
      * Get current relative distance from top-left corner of the given element to top-left corner of editor content DIV.
      * @param element The element to calculate from. If the given element is not in editor, return value will be null
      * @param addScroll When pass true, The return value will also add scrollLeft and scrollTop if any. So the value
@@ -8626,7 +9051,7 @@ var Editor = /** @class */ (function () {
      */
     Editor.prototype.getRelativeDistanceToEditor = function (element, addScroll) {
         if (this.contains(element)) {
-            var contentDiv = this.core.contentDiv;
+            var contentDiv = this.getCore().contentDiv;
             var editorRect = contentDiv.getBoundingClientRect();
             var elementRect = element.getBoundingClientRect();
             if (editorRect && elementRect) {
@@ -8646,22 +9071,24 @@ var Editor = /** @class */ (function () {
      * @param feature The feature to add
      */
     Editor.prototype.addContentEditFeature = function (feature) {
-        var _this = this;
+        var core = this.getCore();
         feature === null || feature === void 0 ? void 0 : feature.keys.forEach(function (key) {
-            var array = _this.core.edit.features[key] || [];
+            var array = core.edit.features[key] || [];
             array.push(feature);
-            _this.core.edit.features[key] = array;
+            core.edit.features[key] = array;
         });
     };
     /**
      * Get style based format state from current selection, including font name/size and colors
      */
     Editor.prototype.getStyleBasedFormatState = function (node) {
+        var _a;
         if (!node) {
             var range = this.getSelectionRange();
-            node = range && roosterjs_editor_dom_1.Position.getStart(range).normalize().node;
+            node = (_a = (range && roosterjs_editor_dom_1.Position.getStart(range).normalize().node)) !== null && _a !== void 0 ? _a : undefined;
         }
-        return this.core.api.getStyleBasedFormatState(this.core, node);
+        var core = this.getCore();
+        return core.api.getStyleBasedFormatState(core, node !== null && node !== void 0 ? node : null);
     };
     /**
      * Get the pendable format such as underline and bold
@@ -8669,7 +9096,9 @@ var Editor = /** @class */ (function () {
      * @returns The pending format state
      */
     Editor.prototype.getPendableFormatState = function (forceGetStateFromDOM) {
-        return this.core.api.getPendableFormatState(this.core, forceGetStateFromDOM);
+        if (forceGetStateFromDOM === void 0) { forceGetStateFromDOM = false; }
+        var core = this.getCore();
+        return core.api.getPendableFormatState(core, forceGetStateFromDOM);
     };
     /**
      * Ensure user will type into a container element rather than into the editor content DIV directly
@@ -8677,7 +9106,8 @@ var Editor = /** @class */ (function () {
      * @param keyboardEvent Optional keyboard event object
      */
     Editor.prototype.ensureTypeInContainer = function (position, keyboardEvent) {
-        this.core.api.ensureTypeInContainer(this.core, position, keyboardEvent);
+        var core = this.getCore();
+        core.api.ensureTypeInContainer(core, position, keyboardEvent);
     };
     //#endregion
     //#region Dark mode APIs
@@ -8689,7 +9119,8 @@ var Editor = /** @class */ (function () {
         if (this.isDarkMode() == !!nextDarkMode) {
             return;
         }
-        this.core.api.transformColor(this.core, this.core.contentDiv, false /*includeSelf*/, null /*callback*/, nextDarkMode
+        var core = this.getCore();
+        core.api.transformColor(core, core.contentDiv, false /*includeSelf*/, null /*callback*/, nextDarkMode
             ? 0 /* LightToDark */
             : 1 /* DarkToLight */, true /*forceTransform*/);
         this.triggerContentChangedEvent(nextDarkMode ? "SwitchToDarkMode" /* SwitchToDarkMode */ : "SwitchToLightMode" /* SwitchToLightMode */);
@@ -8699,14 +9130,15 @@ var Editor = /** @class */ (function () {
      * @returns True if the editor is in dark mode, otherwise false
      */
     Editor.prototype.isDarkMode = function () {
-        return this.core.lifecycle.isDarkMode;
+        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) {
-        this.core.api.transformColor(this.core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
+        var core = this.getCore();
+        core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
     };
     /**
      * Make the editor in "Shadow Edit" mode.
@@ -8717,26 +9149,28 @@ var Editor = /** @class */ (function () {
      * use this function to do more shadow edit operation.
      */
     Editor.prototype.startShadowEdit = function () {
-        this.core.api.switchShadowEdit(this.core, true /*isOn*/);
+        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 () {
-        this.core.api.switchShadowEdit(this.core, false /*isOn*/);
+        var core = this.getCore();
+        core.api.switchShadowEdit(core, false /*isOn*/);
     };
     /**
      * Check if editor is in Shadow Edit mode
      */
     Editor.prototype.isInShadowEdit = function () {
-        return !!this.core.lifecycle.shadowEditFragment;
+        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.core.lifecycle.experimentalFeatures.indexOf(feature) >= 0;
+        return this.getCore().lifecycle.experimentalFeatures.indexOf(feature) >= 0;
     };
     /**
      * Get a function to convert HTML string to trusted HTML string.
@@ -8745,13 +9179,13 @@ var Editor = /** @class */ (function () {
      * See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
      */
     Editor.prototype.getTrustedHTMLHandler = function () {
-        return this.core.trustedHTMLHandler;
+        return this.getCore().trustedHTMLHandler;
     };
     /**
      * @deprecated Use getZoomScale() instead
      */
     Editor.prototype.getSizeTransformer = function () {
-        return this.core.sizeTransformer;
+        return this.getCore().sizeTransformer;
     };
     /**
      * Get current zoom scale, default value is 1
@@ -8760,7 +9194,7 @@ var Editor = /** @class */ (function () {
      * @returns current zoom scale number
      */
     Editor.prototype.getZoomScale = function () {
-        return this.core.zoomScale;
+        return this.getCore().zoomScale;
     };
     /**
      * Set current zoom scale, default value is 1
@@ -8769,9 +9203,10 @@ var Editor = /** @class */ (function () {
      * @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) {
+        var core = this.getCore();
         if (scale > 0 && scale <= 10) {
-            var oldValue = this.core.zoomScale;
-            this.core.zoomScale = scale;
+            var oldValue = core.zoomScale;
+            core.zoomScale = scale;
             if (oldValue != scale) {
                 this.triggerPluginEvent(21 /* ZoomChanged */, {
                     oldZoomScale: oldValue,
@@ -8780,6 +9215,22 @@ var Editor = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Retrieves the rect of the visible viewport of the editor.
+     */
+    Editor.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 () {
+        if (!this.core) {
+            throw new Error('Editor is already disposed');
+        }
+        return this.core;
+    };
     return Editor;
 }());
 exports.default = Editor;
@@ -11546,9 +11997,9 @@ exports.default = getPredefinedCssForElement;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VTable = exports.moveChildNodes = exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
-exports.createNumberDefinition = exports.validate = exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.getTableFormatInfo = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = void 0;
-exports.toArray = exports.getObjectKeys = exports.arrayPush = exports.removeMetadata = exports.setMetadata = exports.getMetadata = exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = exports.createBooleanDefinition = void 0;
+exports.getIntersectedRect = exports.moveChildNodes = exports.KnownCreateElementData = exports.createElement = exports.matchesSelector = exports.setColor = exports.getInnerHTML = exports.readFile = exports.safeInstanceOf = exports.normalizeRect = exports.splitTextNode = exports.getLastLeafNode = exports.getFirstLeafNode = exports.getPreviousLeafSibling = exports.getNextLeafSibling = exports.wrap = exports.unwrap = exports.splitBalancedNodeRange = exports.splitParentNode = exports.queryElements = exports.matchLink = exports.isVoidHtmlElement = exports.isNodeEmpty = exports.isBlockElement = exports.getTagOfNode = exports.PendableFormatCommandMap = exports.getPendableFormatState = exports.getComputedStyle = exports.getComputedStyles = exports.fromHtml = exports.findClosestElementAncestor = exports.contains = exports.collapseNodes = exports.changeElementTag = exports.applyFormat = exports.getBrowserInfo = exports.Browser = exports.extractClipboardItemsForIE = exports.extractClipboardItems = exports.extractClipboardEvent = exports.applyTextStyle = exports.PartialInlineElement = exports.NodeInlineElement = exports.LinkInlineElement = exports.ImageInlineElement = exports.getInlineElementAtNode = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
+exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.setStyles = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.getEntitySelector = exports.getEntityFromElement = exports.commitEntity = exports.chainSanitizerCallback = exports.createDefaultHtmlSanitizerOptions = exports.getInheritableStyles = exports.HtmlSanitizer = exports.canUndoAutoComplete = exports.createSnapshots = exports.moveCurrentSnapsnot = exports.moveCurrentSnapshot = exports.clearProceedingSnapshotsV2 = exports.clearProceedingSnapshots = exports.canMoveCurrentSnapshot = exports.addSnapshotV2 = exports.addSnapshot = exports.addRangeToSelection = exports.setHtmlWithMetadata = exports.setHtmlWithSelectionPath = exports.getHtmlWithSelectionPath = exports.getSelectionPath = exports.isPositionAtBeginningOf = exports.getPositionRect = exports.createRange = exports.Position = exports.mergeBlocksInRegion = exports.getSelectionRangeInRegion = exports.isNodeInRegion = exports.collapseNodesInRegion = exports.getSelectedBlockElementsInRegion = exports.getRegionsFromRange = exports.saveTableCellMetadata = exports.getTableFormatInfo = exports.setListItemStyle = exports.VListChain = exports.createVListFromRegion = exports.VListItem = exports.VList = exports.isWholeTableSelected = exports.VTable = void 0;
+exports.toArray = exports.getObjectKeys = exports.arrayPush = exports.removeMetadata = exports.setMetadata = exports.getMetadata = exports.createObjectDefinition = exports.createArrayDefinition = exports.createStringDefinition = exports.createBooleanDefinition = exports.createNumberDefinition = exports.validate = void 0;
 var getBlockElementAtNode_1 = __webpack_require__(/*! ./blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
 Object.defineProperty(exports, "getBlockElementAtNode", { enumerable: true, get: function () { return getBlockElementAtNode_1.default; } });
 var getFirstLastBlockElement_1 = __webpack_require__(/*! ./blockElements/getFirstLastBlockElement */ "./packages/roosterjs-editor-dom/lib/blockElements/getFirstLastBlockElement.ts");
@@ -11640,6 +12091,8 @@ Object.defineProperty(exports, "createElement", { enumerable: true, get: functio
 Object.defineProperty(exports, "KnownCreateElementData", { enumerable: true, get: function () { return createElement_1.KnownCreateElementData; } });
 var moveChildNodes_1 = __webpack_require__(/*! ./utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 Object.defineProperty(exports, "moveChildNodes", { enumerable: true, get: function () { return moveChildNodes_1.default; } });
+var getIntersectedRect_1 = __webpack_require__(/*! ./utils/getIntersectedRect */ "./packages/roosterjs-editor-dom/lib/utils/getIntersectedRect.ts");
+Object.defineProperty(exports, "getIntersectedRect", { enumerable: true, get: function () { return getIntersectedRect_1.default; } });
 var VTable_1 = __webpack_require__(/*! ./table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
 Object.defineProperty(exports, "VTable", { enumerable: true, get: function () { return VTable_1.default; } });
 var isWholeTableSelected_1 = __webpack_require__(/*! ./table/isWholeTableSelected */ "./packages/roosterjs-editor-dom/lib/table/isWholeTableSelected.ts");
@@ -11656,6 +12109,8 @@ var setListItemStyle_1 = __webpack_require__(/*! ./list/setListItemStyle */ "./p
 Object.defineProperty(exports, "setListItemStyle", { enumerable: true, get: function () { return setListItemStyle_1.default; } });
 var tableFormatInfo_1 = __webpack_require__(/*! ./table/tableFormatInfo */ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts");
 Object.defineProperty(exports, "getTableFormatInfo", { enumerable: true, get: function () { return tableFormatInfo_1.getTableFormatInfo; } });
+var tableCellInfo_1 = __webpack_require__(/*! ./table/tableCellInfo */ "./packages/roosterjs-editor-dom/lib/table/tableCellInfo.ts");
+Object.defineProperty(exports, "saveTableCellMetadata", { enumerable: true, get: function () { return tableCellInfo_1.saveTableCellMetadata; } });
 var getRegionsFromRange_1 = __webpack_require__(/*! ./region/getRegionsFromRange */ "./packages/roosterjs-editor-dom/lib/region/getRegionsFromRange.ts");
 Object.defineProperty(exports, "getRegionsFromRange", { enumerable: true, get: function () { return getRegionsFromRange_1.default; } });
 var getSelectedBlockElementsInRegion_1 = __webpack_require__(/*! ./region/getSelectedBlockElementsInRegion */ "./packages/roosterjs-editor-dom/lib/region/getSelectedBlockElementsInRegion.ts");
@@ -12626,8 +13081,10 @@ var VList = /** @class */ (function () {
     /**
      * Write the result back into DOM tree
      * After that, this VList becomes unavailable because we set this.rootList to null
+     *
+     * @param shouldReuseAllAncestorListElements Optional - defaults to false.
      */
-    VList.prototype.writeBack = function () {
+    VList.prototype.writeBack = function (shouldReuseAllAncestorListElements) {
         var _this = this;
         if (!this.rootList) {
             throw new Error('rootList must not be null');
@@ -12645,7 +13102,7 @@ var VList = /** @class */ (function () {
                 listStack.splice(1, listStack.length - 1);
                 start = newListStart;
             }
-            item.writeBack(listStack, _this.rootList);
+            item.writeBack(listStack, _this.rootList, shouldReuseAllAncestorListElements);
             var topList = listStack[1];
             if ((0, safeInstanceOf_1.default)(topList, 'HTMLOListElement')) {
                 if (lastList != topList) {
@@ -13025,7 +13482,7 @@ var VListChain = /** @class */ (function () {
      * After change the lists, commit the change to all lists in this chain to update the list number,
      * and clear the temporary dataset values added to list node
      */
-    VListChain.prototype.commit = function () {
+    VListChain.prototype.commit = function (shouldReuseAllAncestorListElements) {
         var lists = this.getLists();
         var lastNumber = 0;
         for (var i = 0; i < lists.length; i++) {
@@ -13035,7 +13492,7 @@ var VListChain = /** @class */ (function () {
             lastNumber = vlist.getLastItemNumber() || 0;
             delete list.dataset[CHAIN_DATASET_NAME];
             delete list.dataset[AFTER_CURSOR_DATASET_NAME];
-            vlist.writeBack();
+            vlist.writeBack(shouldReuseAllAncestorListElements);
         }
     };
     /**
@@ -13121,7 +13578,7 @@ var NEGATIVE_MARGIN = '-.25in';
  */
 exports.ListStyleDefinitionMetadata = (0, definitionCreators_1.createObjectDefinition)({
     orderedStyleType: (0, definitionCreators_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 20 /* Max */),
-    unorderedStyleType: (0, definitionCreators_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 7 /* Max */),
+    unorderedStyleType: (0, definitionCreators_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 9 /* Max */),
 }, true /** isOptional */, true /** allowNull */);
 /**
  * !!! Never directly create instance of this class. It should be created within VList class !!!
@@ -13309,19 +13766,41 @@ var VListItem = /** @class */ (function () {
      * Write the change result back into DOM
      * @param listStack current stack of list elements
      * @param originalRoot Original list root element. It will be reused when write back if possible
+     * @param shouldReuseAllAncestorListElements Optional - defaults to false. If true, only make
+     *              sure the direct parent of this list matches the list types when writing back.
      */
-    VListItem.prototype.writeBack = function (listStack, originalRoot) {
+    VListItem.prototype.writeBack = function (listStack, originalRoot, shouldReuseAllAncestorListElements) {
         var _a;
+        if (shouldReuseAllAncestorListElements === void 0) { shouldReuseAllAncestorListElements = false; }
         var nextLevel = 1;
-        // 1. Determine list elements that we can reuse
-        // e.g.:
-        //    passed in listStack: Fragment > OL > UL > OL
-        //    local listTypes:     null     > OL > UL > UL > OL
-        //    then Fragment > OL > UL can be reused
-        for (; nextLevel < listStack.length; nextLevel++) {
-            if ((0, getListTypeFromNode_1.default)(listStack[nextLevel]) !== this.listTypes[nextLevel]) {
-                listStack.splice(nextLevel);
-                break;
+        if (shouldReuseAllAncestorListElements) {
+            // Remove any un-needed lists from the stack.
+            if (listStack.length > this.listTypes.length) {
+                listStack.splice(this.listTypes.length);
+            }
+            // 1. If the listStack is the same length as the listTypes for this item, check
+            // if the last item needs to change, and remove it if needed. We can always re-use
+            // the other lists even if the type doesn't match - since the display is the same
+            // as long as the list immediately surrounding the item is correct.
+            var listStackEndIndex = listStack.length - 1;
+            if (listStackEndIndex === this.listTypes.length - 1 && // they are the same length
+                (0, getListTypeFromNode_1.default)(listStack[listStackEndIndex]) !==
+                    this.listTypes[listStackEndIndex]) {
+                listStack.splice(listStackEndIndex);
+            }
+            nextLevel = listStack.length;
+        }
+        else {
+            // 1. Determine list elements that we can reuse
+            // e.g.:
+            //    passed in listStack: Fragment > OL > UL > OL
+            //    local listTypes:     null     > OL > UL > UL > OL
+            //    then Fragment > OL > UL can be reused
+            for (; nextLevel < listStack.length; nextLevel++) {
+                if ((0, getListTypeFromNode_1.default)(listStack[nextLevel]) !== this.listTypes[nextLevel]) {
+                    listStack.splice(nextLevel);
+                    break;
+                }
             }
         }
         // 2. Add new list elements
@@ -13338,7 +13817,8 @@ var VListItem = /** @class */ (function () {
             //apply the styles of the current parent list to the new list
             if (this.getDeepChildIndex(originalRoot) == stackLength) {
                 var listStyleType = (_a = this.node.parentElement) === null || _a === void 0 ? void 0 : _a.style.listStyleType;
-                if (listStyleType) {
+                if (listStyleType &&
+                    (0, getTagOfNode_1.default)(this.node.parentElement) === (0, getTagOfNode_1.default)(newList)) {
                     newList.style.listStyleType = listStyleType;
                 }
             }
@@ -13348,10 +13828,8 @@ var VListItem = /** @class */ (function () {
         this.node.style.setProperty('display', this.dummy ? 'block' : null);
         // 4. Inherit styles of the child element to the li, so we are able to apply the styles to the ::marker
         if (this.listTypes.length > 1) {
-            if (!(this.node.style.fontSize || this.node.style.color || this.node.style.fontFamily)) {
-                var stylesToInherit = ['font-size', 'font-family', 'color'];
-                (0, setListItemStyle_1.default)(this.node, stylesToInherit);
-            }
+            var stylesToInherit = ['font-size', 'font-family', 'color'];
+            (0, setListItemStyle_1.default)(this.node, stylesToInherit);
         }
         // 5. If this is not a list item now, need to unwrap the LI node and do proper handling
         if (this.listTypes.length <= 1) {
@@ -13781,6 +14259,7 @@ var bulletListStyle = (_a = {},
     _a[3 /* Square */] = 'square',
     _a[2 /* Dash */] = '- ',
     _a[5 /* LongArrow */] = '→ ',
+    _a[8 /* DoubleLongArrow */] = '→ ',
     _a[4 /* ShortArrow */] = '➢ ',
     _a[6 /* UnfilledArrow */] = '➪ ',
     _a[7 /* Hyphen */] = '— ',
@@ -13811,7 +14290,7 @@ var setStyles_1 = __webpack_require__(/*! ../style/setStyles */ "./packages/roos
  * @param styles The styles that should be applied to the element.
  */
 function setListItemStyle(element, styles) {
-    var elementsStyles = getInlineChildElementsStyle(element);
+    var elementsStyles = getInlineChildElementsStyle(element, styles);
     var stylesToApply = (0, getStyles_1.default)(element);
     styles.forEach(function (styleName) {
         var styleValues = elementsStyles.map(function (style) {
@@ -13826,21 +14305,41 @@ function setListItemStyle(element, styles) {
     (0, setStyles_1.default)(element, stylesToApply);
 }
 exports.default = setListItemStyle;
-function getInlineChildElementsStyle(element) {
+function getInlineChildElementsStyle(element, styles) {
+    var _a;
     var result = [];
     var contentTraverser = ContentTraverser_1.default.createBodyTraverser(element);
     var currentInlineElement = null;
-    while (contentTraverser.currentInlineElement != currentInlineElement) {
+    var _loop_1 = function () {
         currentInlineElement = contentTraverser.currentInlineElement;
         var currentNode = (currentInlineElement === null || currentInlineElement === void 0 ? void 0 : currentInlineElement.getContainerNode()) || null;
+        var currentStyle = {};
         currentNode = currentNode ? (0, findClosestElementAncestor_1.default)(currentNode) : null;
-        if ((0, safeInstanceOf_1.default)(currentNode, 'HTMLElement')) {
-            var childStyle = (0, getStyles_1.default)(currentNode);
-            if (childStyle) {
-                result.push(childStyle);
+        // we should consider of when it is the single childnode of element, the parentNode's style should add
+        // such as the "i", "b", "span" node in <li><span><b><i>aa</i></b></span></li>
+        while (currentNode &&
+            currentNode !== element &&
+            (0, safeInstanceOf_1.default)(currentNode, 'HTMLElement')) {
+            styles.forEach(function (styleName) {
+                var styleValue = currentNode.style.getPropertyValue(styleName);
+                if (styleValue && !currentStyle[styleName]) {
+                    currentStyle[styleName] = styleValue;
+                }
+            });
+            if (((_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.parentNode) === null || _a === void 0 ? void 0 : _a.childNodes.length) === 1) {
+                currentNode = currentNode.parentNode;
+            }
+            else {
+                currentNode = null;
             }
         }
+        if (currentStyle) {
+            result.push(currentStyle);
+        }
         contentTraverser.getNextInlineElement();
+    };
+    while (contentTraverser.currentInlineElement != currentInlineElement) {
+        _loop_1();
     }
     return result;
 }
@@ -14185,6 +14684,10 @@ function validate(input, def) {
     if ((def.isOptional && typeof input === 'undefined') || (def.allowNull && input === null)) {
         result = true;
     }
+    else if ((!def.isOptional && typeof input === 'undefined') ||
+        (!def.allowNull && input === null)) {
+        return false;
+    }
     else {
         switch (def.type) {
             case 2 /* String */:
@@ -14812,7 +15315,7 @@ function getEndOffset(node) {
     if (node.nodeType == 3 /* Text */) {
         return ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.length) || 0;
     }
-    else if (node.nodeType == 1 /* Element */) {
+    else if (node.nodeType == 1 /* Element */ || node.nodeType == 11 /* DocumentFragment */) {
         return node.childNodes.length;
     }
     else {
@@ -15317,6 +15820,10 @@ function addSnapshot(snapshots, snapshot, isAutoCompleteSnapshot, getLength, com
             snapshots.autoCompleteIndex = snapshots.currentIndex;
         }
     }
+    else if (currentSnapshot && compare(snapshot, currentSnapshot)) {
+        // replace the currentSnapshot, to update other data such as metadata
+        snapshots.snapshots.splice(snapshots.currentIndex, 1, snapshot);
+    }
 }
 exports.default = addSnapshot;
 /**
@@ -15587,12 +16094,13 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var applyTableFormat_1 = __webpack_require__(/*! ./applyTableFormat */ "./packages/roosterjs-editor-dom/lib/table/applyTableFormat.ts");
+var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 var normalizeRect_1 = __webpack_require__(/*! ../utils/normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var tableFormatInfo_1 = __webpack_require__(/*! ./tableFormatInfo */ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts");
-var CELL_SHADE = 'cellShade';
+var metadata_1 = __webpack_require__(/*! ../metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
 var DEFAULT_FORMAT = {
     topBorderColor: '#ABABAB',
     bottomBorderColor: '#ABABAB',
@@ -15623,15 +16131,12 @@ var VTable = /** @class */ (function () {
          * Virtual cells
          */
         this.cells = null;
-        /**
-         * Selected range of cells with the coordinates of the first and last cell selected.
-         */
-        this.selection = null;
         /**
          * Current format of the table
          */
         this.formatInfo = null;
         this.trs = [];
+        this.tableSelection = null;
         this.table = (0, safeInstanceOf_1.default)(node, 'HTMLTableElement') ? node : getTableFromTd(node);
         if (this.table) {
             var currentTd_1 = (0, safeInstanceOf_1.default)(node, 'HTMLTableElement') ? null : node;
@@ -15671,6 +16176,24 @@ var VTable = /** @class */ (function () {
             }
         }
     }
+    Object.defineProperty(VTable.prototype, "selection", {
+        /**
+         * Selected range of cells with the coordinates of the first and last cell selected.
+         */
+        get: function () {
+            return this.tableSelection || null;
+        },
+        set: function (value) {
+            if (value) {
+                var firstCell = value.firstCell;
+                this.row = firstCell === null || firstCell === void 0 ? void 0 : firstCell.y;
+                this.col = firstCell === null || firstCell === void 0 ? void 0 : firstCell.x;
+            }
+            this.tableSelection = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Write the virtual table back to DOM tree to represent the change of VTable
      * @param skipApplyFormat Do not reapply table format when write back.
@@ -15688,6 +16211,7 @@ var VTable = /** @class */ (function () {
                     row.forEach(function (cell, c) {
                         if (cell.td) {
                             _this.recalculateSpans(r, c);
+                            _this.recalculateCellHeight(cell.td);
                             tr.appendChild(cell.td);
                         }
                     });
@@ -15702,6 +16226,14 @@ var VTable = /** @class */ (function () {
             (_a = this.table.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.table);
         }
     };
+    VTable.prototype.recalculateCellHeight = function (td) {
+        if (this.isEmptyCell(td) && td.rowSpan > 1) {
+            for (var i = 1; i < td.rowSpan; i++) {
+                var br = document.createElement('br');
+                td.appendChild(br);
+            }
+        }
+    };
     /**
      * Apply the given table format to this virtual table
      * @param format Table format to apply
@@ -15722,8 +16254,8 @@ var VTable = /** @class */ (function () {
     VTable.prototype.deleteCellShadeDataset = function (cells) {
         cells === null || cells === void 0 ? void 0 : cells.forEach(function (row) {
             row.forEach(function (cell) {
-                if (cell.td && cell.td.dataset[CELL_SHADE]) {
-                    delete cell.td.dataset[CELL_SHADE];
+                if (cell.td) {
+                    (0, metadata_1.removeMetadata)(cell.td);
                 }
             });
         });
@@ -15982,7 +16514,7 @@ var VTable = /** @class */ (function () {
             ? ((_a = cell.td) === null || _a === void 0 ? void 0 : _a.rowSpan) === ((_b = nextCell.td) === null || _b === void 0 ? void 0 : _b.rowSpan) && !cell.spanLeft
             : ((_c = cell.td) === null || _c === void 0 ? void 0 : _c.colSpan) === ((_d = nextCell.td) === null || _d === void 0 ? void 0 : _d.colSpan) && !cell.spanAbove;
         if (cell.td && nextCell.td && checkSpans) {
-            (0, moveChildNodes_1.default)(cell.td, nextCell.td, true /*keepExistingChildren*/);
+            this.mergeCellContents(cell.td, nextCell.td);
             nextCell.td = null;
             if (horizontally) {
                 nextCell.spanLeft = true;
@@ -15992,6 +16524,19 @@ var VTable = /** @class */ (function () {
             }
         }
     };
+    VTable.prototype.isEmptyCell = function (td) {
+        return td.childElementCount === 1 && (0, getTagOfNode_1.default)(td.firstChild) === 'BR';
+    };
+    VTable.prototype.mergeCellContents = function (cellTd, nextCellTd) {
+        if (this.isEmptyCell(nextCellTd)) {
+            (0, moveChildNodes_1.default)(cellTd, nextCellTd, false /*keepExistingChildren*/);
+        }
+        else {
+            var br = document.createElement('br');
+            cellTd.appendChild(br);
+            (0, moveChildNodes_1.default)(cellTd, nextCellTd, true /*keepExistingChildren*/);
+        }
+    };
     /**
      * Loop each cell of current column and invoke a callback function
      * @param callback The callback function to invoke
@@ -16254,10 +16799,10 @@ function cloneNode(node) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
 var setColor_1 = __webpack_require__(/*! ../utils/setColor */ "./packages/roosterjs-editor-dom/lib/utils/setColor.ts");
+var tableCellInfo_1 = __webpack_require__(/*! ./tableCellInfo */ "./packages/roosterjs-editor-dom/lib/table/tableCellInfo.ts");
 var TRANSPARENT = 'transparent';
 var TABLE_CELL_TAG_NAME = 'TD';
 var TABLE_HEADER_TAG_NAME = 'TH';
-var CELL_SHADE = 'cellShade';
 /**
  * @internal
  * Apply the given table format to this virtual table
@@ -16280,11 +16825,11 @@ exports.default = applyTableFormat;
  * @returns
  */
 function hasCellShade(cell) {
+    var _a;
     if (!cell.td) {
         return false;
     }
-    var colorShade = cell.td.dataset[CELL_SHADE];
-    return colorShade ? true : false;
+    return !!((_a = (0, tableCellInfo_1.getTableCellMetadata)(cell.td)) === null || _a === void 0 ? void 0 : _a.bgColorOverride);
 }
 /**
  * Set color to the table
@@ -16562,6 +17107,47 @@ function isWholeTableSelected(vTable, selection) {
 exports.default = isWholeTableSelected;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/table/tableCellInfo.ts":
+/*!******************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/table/tableCellInfo.ts ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveTableCellMetadata = exports.getTableCellMetadata = void 0;
+var definitionCreators_1 = __webpack_require__(/*! ../metadata/definitionCreators */ "./packages/roosterjs-editor-dom/lib/metadata/definitionCreators.ts");
+var metadata_1 = __webpack_require__(/*! ../metadata/metadata */ "./packages/roosterjs-editor-dom/lib/metadata/metadata.ts");
+var BooleanDefinition = (0, definitionCreators_1.createBooleanDefinition)(false /** isOptional */, undefined /** value */, true /** allowNull */);
+var TableCellFormatMetadata = (0, definitionCreators_1.createObjectDefinition)({
+    bgColorOverride: BooleanDefinition,
+}, false /* isOptional */, true /** allowNull */);
+/**
+ * @internal
+ * Get the format info of a table cell
+ * @param cell The table cell to use
+ */
+function getTableCellMetadata(cell) {
+    return (0, metadata_1.getMetadata)(cell, TableCellFormatMetadata);
+}
+exports.getTableCellMetadata = getTableCellMetadata;
+/**
+ * Add metadata to a cell
+ * @param cell The table cell to add the metadata
+ * @param format The format of the table
+ */
+function saveTableCellMetadata(cell, format) {
+    if (cell && format) {
+        (0, metadata_1.setMetadata)(cell, format, TableCellFormatMetadata);
+    }
+}
+exports.saveTableCellMetadata = saveTableCellMetadata;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts":
@@ -17213,6 +17799,61 @@ function getInnerHTML(node) {
 exports.default = getInnerHTML;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/getIntersectedRect.ts":
+/*!***********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/getIntersectedRect.ts ***!
+  \***********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var normalizeRect_1 = __webpack_require__(/*! ./normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
+/**
+ * Get the intersected Rect of elements provided
+ *
+ * @example
+ * The result of the following Elements Rects would be:
+    {
+        top: Element2.top,
+        bottom: Element1.bottom,
+        left: Element2.left,
+        right: Element2.right
+    }
+    +-------------------------+
+    | Element 1               |
+    |   +-----------------+   |
+    |   | Element2        |   |
+    |   |                 |   |
+    |   |                 |   |
+    +-------------------------+
+        |                 |
+        +-----------------+
+
+ * @param elements Elements to use.
+ * @param additionalRects additional rects to use
+ * @returns If the Rect is valid return the rect, if not, return null.
+ */
+function getIntersectedRect(elements, additionalRects) {
+    if (additionalRects === void 0) { additionalRects = []; }
+    var rects = elements
+        .map(function (element) { return (0, normalizeRect_1.default)(element.getBoundingClientRect()); })
+        .filter(function (element) { return !!element; })
+        .concat(additionalRects);
+    var result = {
+        top: Math.max.apply(Math, rects.map(function (r) { return r.top; })),
+        bottom: Math.min.apply(Math, rects.map(function (r) { return r.bottom; })),
+        left: Math.max.apply(Math, rects.map(function (r) { return r.left; })),
+        right: Math.min.apply(Math, rects.map(function (r) { return r.right; })),
+    };
+    return result.top < result.bottom && result.left < result.right ? result : null;
+}
+exports.default = getIntersectedRect;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/getLeafNode.ts":
@@ -18499,6 +19140,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./plugins/ImageResize/index */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageResize/index.ts"), exports);
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/ImageSelection.ts":
+/*!*****************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/ImageSelection.ts ***!
+  \*****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./plugins/ImageSelection/index */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/index.ts"), exports);
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/Paste.ts":
@@ -18659,6 +19325,7 @@ __exportStar(__webpack_require__(/*! ./TableResize */ "./packages/roosterjs-edit
 __exportStar(__webpack_require__(/*! ./Watermark */ "./packages/roosterjs-editor-plugins/lib/Watermark.ts"), exports);
 __exportStar(__webpack_require__(/*! ./TableCellSelection */ "./packages/roosterjs-editor-plugins/lib/TableCellSelection.ts"), exports);
 __exportStar(__webpack_require__(/*! ./AutoFormat */ "./packages/roosterjs-editor-plugins/lib/AutoFormat.ts"), exports);
+__exportStar(__webpack_require__(/*! ./ImageSelection */ "./packages/roosterjs-editor-plugins/lib/ImageSelection.ts"), exports);
 
 
 /***/ }),
@@ -18769,6 +19436,13 @@ var DragAndDropHelper = /** @class */ (function () {
         this.trigger.removeEventListener(this.dndMouse.MOUSEDOWN, this.onMouseDown);
         this.removeDocumentEvents();
     };
+    Object.defineProperty(DragAndDropHelper.prototype, "mouseType", {
+        get: function () {
+            return this.dndMouse == MOUSE_EVENT_INFO_MOBILE ? 'touch' : 'mouse';
+        },
+        enumerable: false,
+        configurable: true
+    });
     DragAndDropHelper.prototype.addDocumentEvents = function () {
         var doc = this.trigger.ownerDocument;
         doc.addEventListener(this.dndMouse.MOUSEMOVE, this.onMouseMove, true /*useCapture*/);
@@ -19335,7 +20009,7 @@ var MergeInNewLine = {
             (0, roosterjs_editor_api_1.blockFormat)(editor, function (region, start, end) {
                 var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, false /*includeSiblingList*/, li);
                 vList.setIndentation(start, end, 1 /* Decrease */, true /*softOutdent*/);
-                vList.writeBack();
+                vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
                 event.rawEvent.preventDefault();
             });
         }
@@ -19375,7 +20049,7 @@ var MaintainListChainWhenDelete = {
     },
     handleEvent: function (event, editor) {
         var chains = getListChains(editor);
-        editor.runAsync(function (editor) { return (0, roosterjs_editor_api_1.experimentCommitListChains)(editor, chains); });
+        editor.runAsync(function (editor) { return (0, roosterjs_editor_api_1.commitListChains)(editor, chains); });
     },
 };
 /**
@@ -19411,7 +20085,8 @@ function isAListPattern(textBeforeCursor) {
 var AutoBullet = {
     keys: [32 /* SPACE */],
     shouldHandleEvent: function (event, editor) {
-        if (!cacheGetListElement(event, editor)) {
+        if (!cacheGetListElement(event, editor) &&
+            !editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
             var searcher = editor.getContentSearcherOfCursor(event);
             var textBeforeCursor = searcher.getSubStringBefore(4);
             // Auto list is triggered if:
@@ -19499,23 +20174,13 @@ var AutoNumberingList = {
         event.rawEvent.preventDefault();
         editor.addUndoSnapshot(function () {
             var _a;
-            var regions;
             var searcher = editor.getContentSearcherOfCursor();
             var textBeforeCursor = searcher.getSubStringBefore(5);
             var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
-            if (!textRange) {
-                // no op if the range can't be found
-            }
-            else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
-                var num = parseInt(textBeforeCursor);
-                var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor, num);
-                prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleNumbering)(editor, num, listStyle, 'autoToggleList' /** apiNameOverride */);
-            }
-            else {
+            if (textRange) {
                 var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor);
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleNumbering)(editor, undefined /* startNumber*/, listStyle, 'autoToggleList' /** apiNameOverride */);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor, undefined /** startNumber */, listStyle, 'autoToggleList' /** apiNameOverride */);
             }
             (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
         }, null /*changeSource*/, true /*canUndoByBackspace*/);
@@ -19535,7 +20200,7 @@ var MaintainListChain = {
     },
     handleEvent: function (event, editor) {
         var chains = getListChains(editor);
-        editor.runAsync(function (editor) { return (0, roosterjs_editor_api_1.experimentCommitListChains)(editor, chains); });
+        editor.runAsync(function (editor) { return (0, roosterjs_editor_api_1.commitListChains)(editor, chains); });
     },
 };
 function getListChains(editor) {
@@ -19587,7 +20252,14 @@ function shouldTriggerList(event, editor, getListStyle) {
     var searcher = editor.getContentSearcherOfCursor(event);
     var textBeforeCursor = searcher.getSubStringBefore(4);
     var itHasSpace = /\s/g.test(textBeforeCursor);
-    return (!itHasSpace && !searcher.getNearestNonTextInlineElement() && getListStyle(textBeforeCursor));
+    var element = editor.getElementAtCursor();
+    var previousNode = editor.getBodyTraverser(element).getPreviousBlockElement();
+    var isLi = previousNode
+        ? (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode === null || previousNode === void 0 ? void 0 : previousNode.collapseToSingleElement()) === 'LI'
+        : false;
+    return (!itHasSpace &&
+        !searcher.getNearestNonTextInlineElement() &&
+        getListStyle(textBeforeCursor, !isLi));
 }
 /**
  * @internal
@@ -19641,7 +20313,7 @@ function cacheGetRangeForMarkdownOperation(event, editor, triggerCharacter) {
         var searcher = editor.getContentSearcherOfCursor(event);
         var startPosition;
         var endPosition;
-        searcher.forEachTextInlineElement(function (textInlineElement) {
+        searcher === null || searcher === void 0 ? void 0 : searcher.forEachTextInlineElement(function (textInlineElement) {
             if (endPosition && startPosition) {
                 return true;
             }
@@ -19685,7 +20357,8 @@ function handleMarkdownEvent(event, editor, triggerCharacter, elementTag) {
             var textContentRange = range.cloneRange();
             textContentRange.setStart(textContentRange.startContainer, textContentRange.startOffset + 1);
             // set the removal range to include the typed last character.
-            range.setEnd(range.endContainer, range.endOffset + 1);
+            var lastIndex = range.endContainer.length;
+            range.setEnd(range.endContainer, lastIndex);
             // extract content and put it into a new element.
             var elementToWrap = editor.getDocument().createElement(elementTag);
             elementToWrap.appendChild(textContentRange.extractContents());
@@ -19703,19 +20376,19 @@ function handleMarkdownEvent(event, editor, triggerCharacter, elementTag) {
 /**
  * Markdown bold feature. Make bold text with markdown shortcuts.
  */
-var MarkdownBold = generateBasicMarkdownFeature(56 /* EIGHT_ASTERISK */, '*', 'b', true);
+var MarkdownBold = generateBasicMarkdownFeature(56 /* EIGHT_ASTERISK */, '*', 'b', true /* useShiftKey */);
 /**
  * Markdown italics feature. Make italic text with markdown shortcuts.
  */
-var MarkdownItalic = generateBasicMarkdownFeature(189 /* DASH_UNDERSCORE */, '_', 'i', true);
+var MarkdownItalic = generateBasicMarkdownFeature(189 /* DASH_UNDERSCORE */, '_', 'i', true /* useShiftKey */);
 /**
  * Markdown strikethrough feature. MAke strikethrough text with markdown shortcuts.
  */
-var MarkdownStrikethrough = generateBasicMarkdownFeature(192 /* GRAVE_TILDE */, '~', 's', true);
+var MarkdownStrikethrough = generateBasicMarkdownFeature(192 /* GRAVE_TILDE */, '~', 's', true /* useShiftKey */);
 /**
  * Markdown inline code feature. Marks specific text as inline code with markdown shortcuts.
  */
-var MarkdownInlineCode = generateBasicMarkdownFeature(192 /* GRAVE_TILDE */, '`', 'code', false);
+var MarkdownInlineCode = generateBasicMarkdownFeature(192 /* GRAVE_TILDE */, '`', 'code', false /* useShiftKey */);
 /**
  * @internal
  */
@@ -20396,7 +21069,7 @@ var bulletListType = {
     '-': 2 /* Dash */,
     '--': 3 /* Square */,
     '->': 5 /* LongArrow */,
-    '-->': 5 /* LongArrow */,
+    '-->': 8 /* DoubleLongArrow */,
     '=>': 6 /* UnfilledArrow */,
     '>': 4 /* ShortArrow */,
     '—': 7 /* Hyphen */,
@@ -20435,13 +21108,7 @@ var characters = {
     '-': 2 /* Dash */,
     ')': 3 /* Parenthesis */,
 };
-var numberingTriggers = {
-    '1': 1 /* Decimal */,
-    i: 4 /* LowerRoman */,
-    I: 5 /* UpperRoman */,
-    a: 2 /* LowerAlpha */,
-    A: 3 /* UpperAlpha */,
-};
+var numberingTriggers = ['1', 'a', 'A', 'I', 'i'];
 var identifyNumberingType = function (text) {
     if (!isNaN(parseInt(text))) {
         return 1 /* Decimal */;
@@ -20500,16 +21167,14 @@ var DecimalsTypes = (_f = {},
     _f[3 /* Parenthesis */] = 3 /* DecimalParenthesis */,
     _f[4 /* DoubleParenthesis */] = 4 /* DecimalDoubleParenthesis */,
     _f);
-var identifyNumberingListType = function (numbering, isDoubleParenthesis, startNumber) {
+var identifyNumberingListType = function (numbering, isDoubleParenthesis) {
     var separatorCharacter = isDoubleParenthesis
         ? 4 /* DoubleParenthesis */
         : characters[numbering[1]];
     // if separator is not valid, no need to check if the number is valid.
     if (separatorCharacter) {
-        var number = numbering.length === 3 ? numbering[1] : numbering[0];
-        var numberingType = startNumber
-            ? identifyNumberingType(number)
-            : numberingTriggers[number];
+        var number = numbering[numbering.length - 2];
+        var numberingType = identifyNumberingType(number);
         return numberingType ? numberingListTypes[numberingType](separatorCharacter) : null;
     }
     return null;
@@ -20517,16 +21182,22 @@ var identifyNumberingListType = function (numbering, isDoubleParenthesis, startN
 /**
  * @internal
  * @param textBeforeCursor The trigger character
- * @param startNumber (Optional) Start number of the list
+ * @param isTheFirstItem (Optional) Is the start number of a list.
  * @returns The style of a numbering list triggered by a string
  */
-function getAutoNumberingListStyle(textBeforeCursor, startNumber) {
+function getAutoNumberingListStyle(textBeforeCursor, isTheFirstItem) {
     var trigger = textBeforeCursor.trim();
+    //Only the staring items ['1', 'a', 'A', 'I', 'i'] must trigger a new list. All the other triggers is used to keep the list chain.
+    //The index is always the character before the last character
+    var listIndex = trigger[trigger.length - 2];
+    if (isTheFirstItem && numberingTriggers.indexOf(listIndex) < 0) {
+        return null;
+    }
     // the marker must be a combination of 2 or 3 characters, so if the length is less than 2, no need to check
     // If the marker length is 3, the marker style is double parenthesis such as (1), (A).
     var isDoubleParenthesis = trigger.length === 3 && trigger[0] === '(' && trigger[2] === ')';
     var numberingType = trigger.length === 2 || isDoubleParenthesis
-        ? identifyNumberingListType(trigger, isDoubleParenthesis, startNumber)
+        ? identifyNumberingListType(trigger, isDoubleParenthesis)
         : null;
     return numberingType;
 }
@@ -20872,7 +21543,7 @@ var CutPasteListChain = /** @class */ (function () {
                 break;
             case 7 /* ContentChanged */:
                 if (((_a = this.chains) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.expectedChangeSource == event.source) {
-                    (0, roosterjs_editor_api_1.experimentCommitListChains)(this.editor, this.chains);
+                    (0, roosterjs_editor_api_1.commitListChains)(this.editor, this.chains);
                     this.chains = null;
                     this.expectedChangeSource = null;
                 }
@@ -22696,42 +23367,126 @@ Object.defineProperty(exports, "ImageResize", { enumerable: true, get: function
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/Paste.ts":
-/*!**********************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/Paste.ts ***!
-  \**********************************************************************/
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/ImageSelection.ts":
+/*!****************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/ImageSelection.ts ***!
+  \****************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var convertPasteContentForSingleImage_1 = __webpack_require__(/*! ./imageConverter/convertPasteContentForSingleImage */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/imageConverter/convertPasteContentForSingleImage.ts");
-var convertPastedContentForLI_1 = __webpack_require__(/*! ./commonConverter/convertPastedContentForLI */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/commonConverter/convertPastedContentForLI.ts");
-var convertPastedContentFromExcel_1 = __webpack_require__(/*! ./excelConverter/convertPastedContentFromExcel */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/excelConverter/convertPastedContentFromExcel.ts");
-var convertPastedContentFromPowerPoint_1 = __webpack_require__(/*! ./pptConverter/convertPastedContentFromPowerPoint */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/pptConverter/convertPastedContentFromPowerPoint.ts");
-var convertPastedContentFromWord_1 = __webpack_require__(/*! ./wordConverter/convertPastedContentFromWord */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/convertPastedContentFromWord.ts");
-var handleLineMerge_1 = __webpack_require__(/*! ./lineMerge/handleLineMerge */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/lineMerge/handleLineMerge.ts");
-var sanitizeHtmlColorsFromPastedContent_1 = __webpack_require__(/*! ./sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var convertPastedContentFromWordOnline_1 = __webpack_require__(/*! ./officeOnlineConverter/convertPastedContentFromWordOnline */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts");
-var WORD_ATTRIBUTE_NAME = 'xmlns:w';
-var WORD_ATTRIBUTE_VALUE = 'urn:schemas-microsoft-com:office:word';
-var WORD_PROG_ID = 'Word.Document';
-var EXCEL_ATTRIBUTE_NAME = 'xmlns:x';
-var EXCEL_ATTRIBUTE_VALUE = 'urn:schemas-microsoft-com:office:excel';
-var PROG_ID_NAME = 'ProgId';
-var EXCEL_ONLINE_ATTRIBUTE_VALUE = 'Excel.Sheet';
-var POWERPOINT_ATTRIBUTE_VALUE = 'PowerPoint.Slide';
-var GOOGLE_SHEET_NODE_NAME = 'google-sheets-html-origin';
-var WAC_IDENTIFY_SELECTOR = 'ul[class^="BulletListStyle"]>.OutlineElement,ol[class^="NumberListStyle"]>.OutlineElement,span.WACImageContainer';
 /**
- * Paste plugin, handles BeforePaste event and reformat some special content, including:
- * 1. Content copied from Word
- * 2. Content copied from Excel
- * 3. Content copied from Word Online or OneNote Online
+ * Detect image selection and help highlight the image
  */
-var Paste = /** @class */ (function () {
+var ImageSelection = /** @class */ (function () {
+    function ImageSelection() {
+        this.editor = null;
+        this.imageId = null;
+    }
+    /**
+     * Get a friendly name of  this plugin
+     */
+    ImageSelection.prototype.getName = function () {
+        return 'ImageSelection';
+    };
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    ImageSelection.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
+    /**
+     * Dispose this plugin
+     */
+    ImageSelection.prototype.dispose = function () {
+        this.editor.select(null);
+        this.editor = null;
+        this.imageId = null;
+    };
+    ImageSelection.prototype.onPluginEvent = function (event) {
+        if (this.editor) {
+            switch (event.eventType) {
+                case 17 /* EnteredShadowEdit */:
+                    var selection = this.editor.getSelectionRangeEx();
+                    if (selection.type == 2 /* ImageSelection */) {
+                        this.editor.select(selection.image);
+                    }
+                    break;
+                case 18 /* LeavingShadowEdit */:
+                    if (this.imageId) {
+                        var images = this.editor.queryElements('#' + this.imageId);
+                        if (images.length == 1) {
+                            var image = images[0];
+                            this.editor.select(image);
+                        }
+                        this.imageId = null;
+                    }
+                    break;
+                case 5 /* MouseDown */:
+                    var target = event.rawEvent.target;
+                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(target, 'HTMLImageElement')) {
+                        this.editor.select(target);
+                        this.imageId = target.id;
+                    }
+                    break;
+            }
+        }
+    };
+    return ImageSelection;
+}());
+exports.default = ImageSelection;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/index.ts":
+/*!*******************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/index.ts ***!
+  \*******************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSelection = void 0;
+var ImageSelection_1 = __webpack_require__(/*! ./ImageSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageSelection/ImageSelection.ts");
+Object.defineProperty(exports, "ImageSelection", { enumerable: true, get: function () { return ImageSelection_1.default; } });
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/Paste.ts":
+/*!**********************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/Paste.ts ***!
+  \**********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var convertPasteContentForSingleImage_1 = __webpack_require__(/*! ./imageConverter/convertPasteContentForSingleImage */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/imageConverter/convertPasteContentForSingleImage.ts");
+var convertPastedContentForLI_1 = __webpack_require__(/*! ./commonConverter/convertPastedContentForLI */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/commonConverter/convertPastedContentForLI.ts");
+var convertPastedContentFromExcel_1 = __webpack_require__(/*! ./excelConverter/convertPastedContentFromExcel */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/excelConverter/convertPastedContentFromExcel.ts");
+var convertPastedContentFromOfficeOnline_1 = __webpack_require__(/*! ./officeOnlineConverter/convertPastedContentFromOfficeOnline */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromOfficeOnline.ts");
+var convertPastedContentFromPowerPoint_1 = __webpack_require__(/*! ./pptConverter/convertPastedContentFromPowerPoint */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/pptConverter/convertPastedContentFromPowerPoint.ts");
+var convertPastedContentFromWord_1 = __webpack_require__(/*! ./wordConverter/convertPastedContentFromWord */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/convertPastedContentFromWord.ts");
+var getPasteSource_1 = __webpack_require__(/*! ./sourceValidations/getPasteSource */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/getPasteSource.ts");
+var handleLineMerge_1 = __webpack_require__(/*! ./lineMerge/handleLineMerge */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/lineMerge/handleLineMerge.ts");
+var sanitizeHtmlColorsFromPastedContent_1 = __webpack_require__(/*! ./sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sanitizeHtmlColorsFromPastedContent/sanitizeHtmlColorsFromPastedContent.ts");
+var constants_1 = __webpack_require__(/*! ./sourceValidations/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/constants.ts");
+/**
+ * Paste plugin, handles BeforePaste event and reformat some special content, including:
+ * 1. Content copied from Word
+ * 2. Content copied from Excel
+ * 3. Content copied from Word Online or OneNote Online
+ */
+var Paste = /** @class */ (function () {
     /**
      * Construct a new instance of Paste class
      * @param unknownTagReplacement Replace solution of unknown tags, default behavior is to replace with SPAN
@@ -22764,48 +23519,34 @@ var Paste = /** @class */ (function () {
      * @param event PluginEvent object
      */
     Paste.prototype.onPluginEvent = function (event) {
-        var _a;
         if (event.eventType == 10 /* BeforePaste */) {
-            var htmlAttributes = event.htmlAttributes, fragment = event.fragment, sanitizingOption = event.sanitizingOption, clipboardData = event.clipboardData;
+            var fragment = event.fragment, sanitizingOption = event.sanitizingOption;
             var trustedHTMLHandler = this.editor.getTrustedHTMLHandler();
-            var wacListElements = void 0;
-            if (isWordDocument(htmlAttributes)) {
-                // Handle HTML copied from Word
-                (0, convertPastedContentFromWord_1.default)(event);
-            }
-            else if (htmlAttributes[EXCEL_ATTRIBUTE_NAME] == EXCEL_ATTRIBUTE_VALUE ||
-                htmlAttributes[PROG_ID_NAME] == EXCEL_ONLINE_ATTRIBUTE_VALUE) {
-                // Handle HTML copied from Excel
-                (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
-            }
-            else if (htmlAttributes[PROG_ID_NAME] == POWERPOINT_ATTRIBUTE_VALUE) {
-                (0, convertPastedContentFromPowerPoint_1.default)(event, trustedHTMLHandler);
-            }
-            else if ((wacListElements = (0, roosterjs_editor_dom_1.toArray)(fragment.querySelectorAll(WAC_IDENTIFY_SELECTOR))) &&
-                wacListElements.length > 0) {
-                // Once it is known that the document is from WAC
-                // We need to remove the display property and margin from all the list item
-                wacListElements.forEach(function (el) {
-                    el.style.display = null;
-                    el.style.margin = null;
-                });
-                // call conversion function if the pasted content is from word online and
-                // has list element in the pasted content.
-                if ((0, convertPastedContentFromWordOnline_1.isWordOnlineWithList)(fragment)) {
-                    (0, convertPastedContentFromWordOnline_1.default)(fragment);
-                }
-            }
-            else if (fragment.querySelector(GOOGLE_SHEET_NODE_NAME)) {
-                sanitizingOption.additionalTagReplacements[GOOGLE_SHEET_NODE_NAME] = '*';
-            }
-            else if (this.editor.isFeatureEnabled("ConvertSingleImageBody" /* ConvertSingleImageBody */) &&
-                ((_a = clipboardData.htmlFirstLevelChildTags) === null || _a === void 0 ? void 0 : _a.length) == 1 &&
-                clipboardData.htmlFirstLevelChildTags[0] == 'IMG') {
-                (0, convertPasteContentForSingleImage_1.default)(event, trustedHTMLHandler);
-            }
-            else {
-                (0, convertPastedContentForLI_1.default)(fragment);
-                (0, handleLineMerge_1.default)(fragment);
+            switch ((0, getPasteSource_1.default)(event, this.editor)) {
+                case 0 /* WordDesktop */:
+                    // Handle HTML copied from Word
+                    (0, convertPastedContentFromWord_1.default)(event);
+                    break;
+                case 1 /* ExcelDesktop */:
+                    // Handle HTML copied from Excel
+                    (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
+                    break;
+                case 2 /* PowerPointDesktop */:
+                    (0, convertPastedContentFromPowerPoint_1.default)(event, trustedHTMLHandler);
+                    break;
+                case 4 /* WacComponents */:
+                    (0, convertPastedContentFromOfficeOnline_1.default)(fragment);
+                    break;
+                case 3 /* GoogleSheets */:
+                    sanitizingOption.additionalTagReplacements[constants_1.GOOGLE_SHEET_NODE_NAME] = '*';
+                    break;
+                case 6 /* SingleImage */:
+                    (0, convertPasteContentForSingleImage_1.default)(event, trustedHTMLHandler);
+                    break;
+                case 5 /* Default */:
+                    (0, convertPastedContentForLI_1.default)(fragment);
+                    (0, handleLineMerge_1.default)(fragment);
+                    break;
             }
             (0, sanitizeHtmlColorsFromPastedContent_1.default)(sanitizingOption);
             // Replace unknown tags with SPAN
@@ -22815,10 +23556,6 @@ var Paste = /** @class */ (function () {
     return Paste;
 }());
 exports.default = Paste;
-function isWordDocument(htmlAttributes) {
-    return (htmlAttributes[WORD_ATTRIBUTE_NAME] == WORD_ATTRIBUTE_VALUE ||
-        htmlAttributes[PROG_ID_NAME] == WORD_PROG_ID);
-}
 
 
 /***/ }),
@@ -23097,6 +23834,41 @@ function createListItemBlock(listItem) {
 exports.createListItemBlock = createListItemBlock;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromOfficeOnline.ts":
+/*!***************************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromOfficeOnline.ts ***!
+  \***************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var constants_1 = __webpack_require__(/*! ../sourceValidations/constants */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/constants.ts");
+var convertPastedContentFromWordOnline_1 = __webpack_require__(/*! ./convertPastedContentFromWordOnline */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts");
+/**
+ * @internal
+ * Convert pasted content from Office Online
+ * Once it is known that the document is from WAC
+ * We need to remove the display property and margin from all the list item
+ * @param event The BeforePaste event
+ */
+function convertPastedContentFromOfficeOnline(fragment) {
+    fragment.querySelectorAll(constants_1.WAC_IDENTIFY_SELECTOR).forEach(function (el) {
+        el.style.display = null;
+        el.style.margin = null;
+    });
+    // call conversion function if the pasted content is from word online and
+    // has list element in the pasted content.
+    if ((0, convertPastedContentFromWordOnline_1.isWordOnlineWithList)(fragment)) {
+        (0, convertPastedContentFromWordOnline_1.default)(fragment);
+    }
+}
+exports.default = convertPastedContentFromOfficeOnline;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts":
@@ -23520,6 +24292,255 @@ function sanitizeHtmlColorsFromPastedContent(sanitizingOption) {
 exports.default = sanitizeHtmlColorsFromPastedContent;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/constants.ts":
+/*!********************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/constants.ts ***!
+  \********************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+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.
+ */
+exports.GOOGLE_SHEET_NODE_NAME = 'google-sheets-html-origin';
+/**
+ * @internal
+ * Name of the HTMLMeta Property that provides the Office App Source of the pasted content
+ */
+exports.PROG_ID_NAME = 'ProgId';
+/**
+ * @internal
+ * Selector used to identify Wac Elements
+ */
+exports.WAC_IDENTIFY_SELECTOR = 'ul[class^="BulletListStyle"]>.OutlineElement,ol[class^="NumberListStyle"]>.OutlineElement,span.WACImageContainer';
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/documentContainWacElements.ts":
+/*!*************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/documentContainWacElements.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");
+/**
+ * @internal
+ * Check whether the fragment provided contain Wac Elements
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+var documentContainWacElements = function (props) {
+    var fragment = props.fragment;
+    return !!fragment.querySelector(constants_1.WAC_IDENTIFY_SELECTOR);
+};
+exports.default = documentContainWacElements;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/getPasteSource.ts":
+/*!*************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/getPasteSource.ts ***!
+  \*************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+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 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");
+var shouldConvertToSingleImage_1 = __webpack_require__(/*! ./shouldConvertToSingleImage */ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/shouldConvertToSingleImage.ts");
+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],
+]);
+/**
+ * @internal
+ * This function tries to get the source of the Pasted content
+ * @param event the before paste event
+ * @param editor editor instance
+ * @returns The Type of pasted content, if no type found will return {KnownSourceType.Default}
+ */
+function getPasteSource(event, editor) {
+    var htmlAttributes = event.htmlAttributes, clipboardData = event.clipboardData, fragment = event.fragment;
+    var result = null;
+    var param = {
+        htmlAttributes: htmlAttributes,
+        fragment: fragment,
+        editor: editor,
+        clipboardData: clipboardData,
+    };
+    getSourceFunctions.forEach(function (func, key) {
+        if (!result && func(param)) {
+            result = key;
+        }
+    });
+    return result !== null && result !== void 0 ? result : 5 /* Default */;
+}
+exports.default = getPasteSource;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isExcelDesktopDocument.ts":
+/*!*********************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isExcelDesktopDocument.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");
+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
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+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);
+};
+exports.default = isExcelDesktopDocument;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isGoogleSheetDocument.ts":
+/*!********************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isGoogleSheetDocument.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");
+/**
+ * @internal
+ * Checks whether the fragment provided contain elements from Google sheets
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+var isGoogleSheetDocument = function (props) {
+    var fragment = props.fragment;
+    return !!fragment.querySelector(constants_1.GOOGLE_SHEET_NODE_NAME);
+};
+exports.default = isGoogleSheetDocument;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isPowerPointDesktopDocument.ts":
+/*!**************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isPowerPointDesktopDocument.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");
+var POWERPOINT_ATTRIBUTE_VALUE = 'PowerPoint.Slide';
+/**
+ * @internal
+ * Checks whether the Array provided contains strings that identify Power Point Desktop documents
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+var isPowerPointDesktopDocument = function (props) {
+    return props.htmlAttributes[constants_1.PROG_ID_NAME] == POWERPOINT_ATTRIBUTE_VALUE;
+};
+exports.default = isPowerPointDesktopDocument;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isWordDesktopDocument.ts":
+/*!********************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/isWordDesktopDocument.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");
+var WORD_ATTRIBUTE_NAME = 'xmlns:w';
+var WORD_ATTRIBUTE_VALUE = 'urn:schemas-microsoft-com:office:word';
+var WORD_PROG_ID = 'Word.Document';
+/**
+ * @internal
+ * Checks whether the Array provided contains strings that identify Word Desktop documents
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+var isWordDesktopDocument = function (props) {
+    var htmlAttributes = props.htmlAttributes;
+    return (htmlAttributes[WORD_ATTRIBUTE_NAME] == WORD_ATTRIBUTE_VALUE ||
+        htmlAttributes[constants_1.PROG_ID_NAME] == WORD_PROG_ID);
+};
+exports.default = isWordDesktopDocument;
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/shouldConvertToSingleImage.ts":
+/*!*************************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/Paste/sourceValidations/shouldConvertToSingleImage.ts ***!
+  \*************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @internal
+ * Checks whether the fragment only contains a single image to paste
+ * and the editor have the ConvertSingleImageBody Experimental feature
+ * @param props Properties related to the PasteEvent
+ * @returns
+ */
+var shouldConvertToSingleImage = function (props) {
+    var _a;
+    var editor = props.editor, clipboardData = props.clipboardData;
+    return (editor.isFeatureEnabled("ConvertSingleImageBody" /* ConvertSingleImageBody */) &&
+        ((_a = clipboardData.htmlFirstLevelChildTags) === null || _a === void 0 ? void 0 : _a.length) == 1 &&
+        clipboardData.htmlFirstLevelChildTags[0] == 'IMG');
+};
+exports.default = shouldConvertToSingleImage;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/Paste/wordConverter/LevelLists.ts":
@@ -24806,9 +25827,8 @@ Object.defineProperty(exports, "PickerPlugin", { enumerable: true, get: function
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var normalizeTableSelection_1 = __webpack_require__(/*! ./utils/normalizeTableSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/normalizeTableSelection.ts");
-var forEachSelectedCell_1 = __webpack_require__(/*! ./utils/forEachSelectedCell */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachSelectedCell.ts");
+var DeleteTableContents_1 = __webpack_require__(/*! ./features/DeleteTableContents */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/features/DeleteTableContents.ts");
 var getCellCoordinates_1 = __webpack_require__(/*! ./utils/getCellCoordinates */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/getCellCoordinates.ts");
-var removeCellsOutsideSelection_1 = __webpack_require__(/*! ./utils/removeCellsOutsideSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/removeCellsOutsideSelection.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var TABLE_CELL_SELECTOR = 'td,th';
 var LEFT_CLICK = 1;
@@ -24878,30 +25898,6 @@ var TableCellSelection = /** @class */ (function () {
                 _this.removeMouseUpEventListener();
             }
         };
-        //#endregion
-        //#region Content Edit Features
-        /**
-         * When press Backspace, delete the contents inside of the selection, if it is Table Selection
-         */
-        this.DeleteTableContents = {
-            keys: [46 /* DELETE */, 8 /* BACKSPACE */],
-            shouldHandleEvent: function (_, editor) {
-                var selection = editor.getSelectionRangeEx();
-                return selection.type == 1 /* TableSelection */;
-            },
-            handleEvent: function (_, editor) {
-                var selection = editor.getSelectionRangeEx();
-                if (selection.type == 1 /* TableSelection */) {
-                    editor.addUndoSnapshot(function () {
-                        editor.getSelectedRegions().forEach(function (region) {
-                            if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
-                                deleteNodeContents(region.rootNode, editor);
-                            }
-                        });
-                    });
-                }
-            },
-        };
         this.lastTarget = null;
         this.firstTarget = null;
         this.tableSelection = false;
@@ -24923,7 +25919,7 @@ var TableCellSelection = /** @class */ (function () {
      */
     TableCellSelection.prototype.initialize = function (editor) {
         this.editor = editor;
-        this.editor.addContentEditFeature(this.DeleteTableContents);
+        this.editor.addContentEditFeature(DeleteTableContents_1.DeleteTableContents);
     };
     /**
      * Dispose this plugin
@@ -24958,9 +25954,6 @@ var TableCellSelection = /** @class */ (function () {
                         }
                     }
                     break;
-                case 9 /* BeforeCutCopy */:
-                    this.handleBeforeCutCopy(event);
-                    break;
                 case 5 /* MouseDown */:
                     if (!this.startedSelection) {
                         this.handleMouseDownEvent(event);
@@ -25017,33 +26010,6 @@ var TableCellSelection = /** @class */ (function () {
             this.restoreSelection();
         }
     };
-    /**
-     * Handles the Before Copy Event.
-     * Clear the selection range from the cloned Root.
-     * @param event plugin event
-     */
-    TableCellSelection.prototype.handleBeforeCutCopy = function (event) {
-        var _this = this;
-        var selection = this.editor.getSelectionRangeEx();
-        if (selection.type == 1 /* TableSelection */) {
-            var clonedTable = event.clonedRoot.querySelector('table#' + selection.table.id);
-            if (clonedTable) {
-                this.tableRange = selection.coordinates;
-                var clonedVTable = new roosterjs_editor_dom_1.VTable(clonedTable);
-                clonedVTable.selection = this.tableRange;
-                (0, removeCellsOutsideSelection_1.removeCellsOutsideSelection)(clonedVTable);
-                clonedVTable.writeBack();
-                event.range.selectNode(clonedTable);
-                if (event.isCut) {
-                    (0, forEachSelectedCell_1.forEachSelectedCell)(this.vTable, function (cell) {
-                        if (cell === null || cell === void 0 ? void 0 : cell.td) {
-                            deleteNodeContents(cell.td, _this.editor);
-                        }
-                    });
-                }
-            }
-        }
-    };
     //#region Key events
     /**
      * Handles the on key event.
@@ -25398,12 +26364,6 @@ var TableCellSelection = /** @class */ (function () {
     return TableCellSelection;
 }());
 exports.default = TableCellSelection;
-function deleteNodeContents(element, editor) {
-    var range = new Range();
-    range.selectNodeContents(element);
-    range.deleteContents();
-    element.appendChild(editor.getDocument().createElement('br'));
-}
 function updateSelection(editor, start, offset, end, endOffset) {
     var selection = editor.getDocument().defaultView.getSelection();
     end = end || start;
@@ -25426,52 +26386,64 @@ function getTableAtCursor(editor, node) {
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/index.ts":
-/*!***********************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/index.ts ***!
-  \***********************************************************************************/
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/features/DeleteTableContents.ts":
+/*!**********************************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/features/DeleteTableContents.ts ***!
+  \**********************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellSelection = void 0;
-var TableCellSelection_1 = __webpack_require__(/*! ./TableCellSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/TableCellSelection.ts");
-Object.defineProperty(exports, "TableCellSelection", { enumerable: true, get: function () { return TableCellSelection_1.default; } });
+exports.DeleteTableContents = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * Feature that when Backspace is pressed and there is Table Selection, delete the contents inside of the selection
+ */
+exports.DeleteTableContents = {
+    keys: [46 /* DELETE */, 8 /* BACKSPACE */],
+    shouldHandleEvent: function (_, editor) {
+        var selection = editor.getSelectionRangeEx();
+        return selection.type == 1 /* TableSelection */;
+    },
+    handleEvent: function (_, editor) {
+        var selection = editor.getSelectionRangeEx();
+        if (selection.type == 1 /* TableSelection */) {
+            editor.addUndoSnapshot(function () {
+                editor.getSelectedRegions().forEach(function (region) {
+                    if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
+                        deleteNodeContents(region.rootNode, editor);
+                    }
+                });
+            });
+        }
+    },
+};
+function deleteNodeContents(element, editor) {
+    var range = new Range();
+    range.selectNodeContents(element);
+    range.deleteContents();
+    element.appendChild(editor.getDocument().createElement('br'));
+}
 
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachSelectedCell.ts":
-/*!*******************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/forEachSelectedCell.ts ***!
-  \*******************************************************************************************************/
+/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/index.ts":
+/*!***********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/index.ts ***!
+  \***********************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.forEachSelectedCell = void 0;
-/**
- * @internal
- * Executes an action to all the cells within the selection range.
- * @param callback action to apply on each selected cell
- * @returns the amount of cells modified
- */
-function forEachSelectedCell(vTable, callback) {
-    var _a;
-    var _b = vTable.selection, lastCell = _b.lastCell, firstCell = _b.firstCell;
-    for (var y = firstCell.y; y <= lastCell.y; y++) {
-        for (var x = firstCell.x; x <= lastCell.x; x++) {
-            if ((_a = vTable.cells[y][x]) === null || _a === void 0 ? void 0 : _a.td) {
-                callback(vTable.cells[y][x]);
-            }
-        }
-    }
-}
-exports.forEachSelectedCell = forEachSelectedCell;
+exports.TableCellSelection = void 0;
+var TableCellSelection_1 = __webpack_require__(/*! ./TableCellSelection */ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/TableCellSelection.ts");
+Object.defineProperty(exports, "TableCellSelection", { enumerable: true, get: function () { return TableCellSelection_1.default; } });
 
 
 /***/ }),
@@ -25567,46 +26539,6 @@ function normalizeTableSelection(vTable) {
 exports.default = normalizeTableSelection;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/removeCellsOutsideSelection.ts":
-/*!***************************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/utils/removeCellsOutsideSelection.ts ***!
-  \***************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeCellsOutsideSelection = void 0;
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-/**
- * @internal
- * Remove the cells outside of the selection.
- * @param vTable VTable to remove selection
- */
-function removeCellsOutsideSelection(vTable) {
-    if ((0, roosterjs_editor_dom_1.isWholeTableSelected)(vTable, vTable.selection)) {
-        return;
-    }
-    var _a = vTable.selection, firstCell = _a.firstCell, lastCell = _a.lastCell;
-    var resultCells = [];
-    var firstX = firstCell.x;
-    var firstY = firstCell.y;
-    var lastX = lastCell.x;
-    var lastY = lastCell.y;
-    vTable.cells.forEach(function (row, y) {
-        row = row.filter(function (_, x) { return y >= firstY && y <= lastY && x >= firstX && x <= lastX; });
-        if (row.length > 0) {
-            resultCells.push(row);
-        }
-    });
-    vTable.cells = resultCells;
-}
-exports.removeCellsOutsideSelection = removeCellsOutsideSelection;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/TableResize/TableResize.ts":
@@ -25955,12 +26887,18 @@ var INSERTER_HOVER_OFFSET = 5;
  * When set a different current table or change current TD, we need to update these areas
  */
 var TableEditor = /** @class */ (function () {
-    function TableEditor(editor, table, onChanged, onShowHelperElement, eventTarget) {
+    function TableEditor(editor, table, onChanged, onShowHelperElement, contentDiv) {
         var _this = this;
         this.editor = editor;
         this.table = table;
         this.onChanged = onChanged;
         this.onShowHelperElement = onShowHelperElement;
+        // 1, 2 - Insert a column or a row
+        this.horizontalInserter = null;
+        this.verticalInserter = null;
+        // 3, 4 - Resize a column or a row from a cell
+        this.horizontalResizer = null;
+        this.verticalResizer = null;
         this.onFinishEditing = function () {
             _this.editor.focus();
             _this.editor.select(_this.start, _this.end);
@@ -25983,6 +26921,10 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableResizer();
             _this.onFinishEditing();
         };
+        /**
+         * Public only for testing purposes
+         * @param table the table to select
+         */
         this.onSelect = function (table) {
             _this.editor.focus();
             if (table) {
@@ -26010,8 +26952,9 @@ var TableEditor = /** @class */ (function () {
             }
         };
         this.isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(table, 'direction') == 'rtl';
-        this.tableResizer = (0, TableResizer_1.default)(table, editor.getZoomScale(), this.isRTL, this.onStartTableResize, this.onFinishEditing, this.onShowHelperElement);
-        this.tableSelector = (0, TableSelector_1.default)(table, editor.getZoomScale(), this.onSelect, this.onShowHelperElement, this.getShouldShowTableSelectorHandler(this.editor.getScrollContainer(), eventTarget));
+        var zoomScale = editor.getZoomScale();
+        this.tableResizer = (0, TableResizer_1.default)(table, zoomScale, this.isRTL, this.onStartTableResize, this.onFinishEditing, this.onShowHelperElement);
+        this.tableSelector = (0, TableSelector_1.default)(table, zoomScale, editor, this.onSelect, this.onShowHelperElement, contentDiv);
         this.isCurrentlyEditing = false;
     }
     TableEditor.prototype.dispose = function () {
@@ -26030,14 +26973,18 @@ var TableEditor = /** @class */ (function () {
             var j = 0;
             for (; j < tr.cells.length; j++) {
                 var td = tr.cells[j];
+                var tableRect = (0, roosterjs_editor_dom_1.normalizeRect)(this.table.getBoundingClientRect());
                 var tdRect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
-                if (!tdRect) {
+                if (!tdRect || !tableRect) {
                     continue;
                 }
                 var lessThanBottom = y <= tdRect.bottom;
                 var lessThanRight = this.isRTL ? x >= tdRect.right : x <= tdRect.right;
                 if (lessThanRight && lessThanBottom) {
-                    if (i == 0 && y <= tdRect.top + INSERTER_HOVER_OFFSET) {
+                    var isOnLeftOrRight = this.isRTL
+                        ? tdRect.right <= tableRect.right && tdRect.right >= tableRect.right - 1
+                        : tdRect.left >= tableRect.left && tdRect.left <= tableRect.left + 1;
+                    if (i === 0 && y <= tdRect.top + INSERTER_HOVER_OFFSET) {
                         var center = (tdRect.left + tdRect.right) / 2;
                         var isOnRightHalf = this.isRTL ? x < center : x > center;
                         this.setInserterTd(isOnRightHalf ? td : tr.cells[j - 1], false /*isHorizontal*/);
@@ -26045,10 +26992,20 @@ var TableEditor = /** @class */ (function () {
                     else if (j == 0 &&
                         (this.isRTL
                             ? x >= tdRect.right - INSERTER_HOVER_OFFSET
-                            : x <= tdRect.left + INSERTER_HOVER_OFFSET)) {
-                        this.setInserterTd(y > (tdRect.top + tdRect.bottom) / 2
-                            ? td
-                            : (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0], true /*isHorizontal*/);
+                            : x <= tdRect.left + INSERTER_HOVER_OFFSET) &&
+                        isOnLeftOrRight) {
+                        var tdAbove = (_a = this.table.rows[i - 1]) === null || _a === void 0 ? void 0 : _a.cells[0];
+                        var tdAboveRect = tdAbove
+                            ? (0, roosterjs_editor_dom_1.normalizeRect)(tdAbove.getBoundingClientRect())
+                            : null;
+                        var isTdNotAboveMerged = !tdAboveRect
+                            ? null
+                            : this.isRTL
+                                ? tdAboveRect.right === tdRect.right
+                                : tdAboveRect.left === tdRect.left;
+                        this.setInserterTd(y < (tdRect.top + tdRect.bottom) / 2 && isTdNotAboveMerged
+                            ? tdAbove
+                            : td, true /*isHorizontal*/);
                     }
                     else {
                         this.setInserterTd(null);
@@ -26082,7 +27039,7 @@ var TableEditor = /** @class */ (function () {
             this.disposeTableInserter();
         }
         if (!this.horizontalInserter && !this.verticalInserter && td) {
-            var newInserter = (0, TableInserter_1.default)(this.editor, td, this.isRTL, isHorizontal, this.onInserted, this.onShowHelperElement);
+            var newInserter = (0, TableInserter_1.default)(this.editor, td, this.isRTL, !!isHorizontal, this.onInserted, this.onShowHelperElement);
             if (isHorizontal) {
                 this.horizontalInserter = newInserter;
             }
@@ -26132,21 +27089,6 @@ var TableEditor = /** @class */ (function () {
         }
         this.editor.addUndoSnapshot();
     };
-    TableEditor.prototype.getShouldShowTableSelectorHandler = function (scrollContainer, eventTarget) {
-        if (eventTarget && (0, roosterjs_editor_dom_1.safeInstanceOf)(eventTarget, 'HTMLElement') && scrollContainer) {
-            var scrollContainerRect_1 = (0, roosterjs_editor_dom_1.normalizeRect)(scrollContainer.getBoundingClientRect());
-            var containerRect_1 = (0, roosterjs_editor_dom_1.normalizeRect)(eventTarget.getBoundingClientRect());
-            if (scrollContainerRect_1 && containerRect_1) {
-                var scrollContainerVisibleTop_1 = scrollContainer.scrollTop - scrollContainerRect_1.top;
-                return function (rect) {
-                    return containerRect_1.top <= rect.top &&
-                        scrollContainerVisibleTop_1 <= rect.top &&
-                        scrollContainerRect_1.top <= rect.top;
-                };
-            }
-        }
-        return function () { return true; };
-    };
     return TableEditor;
 }());
 exports.default = TableEditor;
@@ -26170,10 +27112,12 @@ exports.disposeTableEditFeature = void 0;
  */
 function disposeTableEditFeature(resizer) {
     var _a, _b, _c;
-    (_b = (_a = resizer.div) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(resizer.div);
-    resizer.div = null;
-    (_c = resizer.featureHandler) === null || _c === void 0 ? void 0 : _c.dispose();
-    resizer.featureHandler = null;
+    if (resizer) {
+        (_b = (_a = resizer.div) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(resizer.div);
+        resizer.div = null;
+        (_c = resizer.featureHandler) === null || _c === void 0 ? void 0 : _c.dispose();
+        resizer.featureHandler = null;
+    }
 }
 exports.disposeTableEditFeature = disposeTableEditFeature;
 
@@ -26216,7 +27160,7 @@ function createTableInserter(editor, td, isRTL, isHorizontal, onInsert, onShowHe
             div.firstChild.style.width = tableRect.right - tableRect.left + "px";
         }
         else {
-            div.style.left = (isRTL ? tdRect.left : tdRect.right - 8) + "px";
+            div.style.left = (isRTL ? tdRect.left - 8 : tdRect.right - 8) + "px";
             div.style.top = tdRect.top - (INSERTER_SIDE_LENGTH - 1 + 2 * INSERTER_BORDER_SIZE) + "px";
             div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
         }
@@ -26224,6 +27168,7 @@ function createTableInserter(editor, td, isRTL, isHorizontal, onInsert, onShowHe
         var handler = new TableInsertHandler(div, td, isHorizontal, editor, onInsert);
         return { div: div, featureHandler: handler, node: td };
     }
+    return null;
 }
 exports.default = createTableInserter;
 var TableInsertHandler = /** @class */ (function () {
@@ -26406,10 +27351,10 @@ var TABLE_SELECTOR_ID = '_Table_Selector';
 /**
  * @internal
  */
-function createTableSelector(table, zoomScale, onFinishDragging, onShowHelperElement, shouldShow) {
+function createTableSelector(table, zoomScale, editor, onFinishDragging, onShowHelperElement, contentDiv) {
     var rect = (0, roosterjs_editor_dom_1.normalizeRect)(table.getBoundingClientRect());
-    if (rect && shouldShow && !shouldShow(rect)) {
-        return { div: null, featureHandler: null, node: table };
+    if (!isTableTopVisible(editor, rect, contentDiv)) {
+        return null;
     }
     var document = table.ownerDocument;
     var createElementData = {
@@ -26447,6 +27392,14 @@ function setSelectorDivPosition(context, trigger) {
         trigger.style.left = rect.left - TABLE_SELECTOR_LENGTH - 2 + "px";
     }
 }
+function isTableTopVisible(editor, rect, contentDiv) {
+    var visibleViewport = editor.getVisibleViewport();
+    if (contentDiv && (0, roosterjs_editor_dom_1.safeInstanceOf)(contentDiv, 'HTMLElement') && visibleViewport && rect) {
+        var containerRect = (0, roosterjs_editor_dom_1.normalizeRect)(contentDiv.getBoundingClientRect());
+        return containerRect.top <= rect.top && visibleViewport.top <= rect.top;
+    }
+    return true;
+}
 
 
 /***/ }),
@@ -26489,10 +27442,11 @@ var Watermark = /** @class */ (function () {
      * Create an instance of Watermark plugin
      * @param watermark The watermark string
      */
-    function Watermark(watermark, format) {
+    function Watermark(watermark, format, customClass) {
         var _this = this;
         this.watermark = watermark;
         this.format = format;
+        this.customClass = customClass;
         this.showHideWatermark = function () {
             var hasFocus = _this.editor.hasFocus();
             var watermarks = _this.editor.queryElements((0, roosterjs_editor_dom_1.getEntitySelector)(ENTITY_TYPE));
@@ -26502,7 +27456,10 @@ var Watermark = /** @class */ (function () {
                 _this.editor.focus();
             }
             else if (!hasFocus && !isShowing && _this.editor.isEmpty()) {
-                (0, roosterjs_editor_api_1.insertEntity)(_this.editor, ENTITY_TYPE, _this.editor.getDocument().createTextNode(_this.watermark), false /*isBlock*/, false /*isReadonly*/, 0 /* Begin */);
+                var newEntity = (0, roosterjs_editor_api_1.insertEntity)(_this.editor, ENTITY_TYPE, _this.editor.getDocument().createTextNode(_this.watermark), false /*isBlock*/, false /*isReadonly*/, 0 /* Begin */);
+                if (_this.customClass) {
+                    newEntity.wrapper.classList.add(_this.customClass);
+                }
             }
         };
         this.removeWatermark = function (wrapper) {
@@ -26704,7 +27661,7 @@ var CompatibleBulletListType;
      */
     CompatibleBulletListType[CompatibleBulletListType["ShortArrow"] = 4] = "ShortArrow";
     /**
-     * Bullet triggered by -> or -->
+     * Bullet triggered by ->
      */
     CompatibleBulletListType[CompatibleBulletListType["LongArrow"] = 5] = "LongArrow";
     /**
@@ -26715,10 +27672,18 @@ var CompatibleBulletListType;
      * Bullet triggered by —
      */
     CompatibleBulletListType[CompatibleBulletListType["Hyphen"] = 7] = "Hyphen";
+    /**
+     * Bullet triggered by -->
+     */
+    CompatibleBulletListType[CompatibleBulletListType["DoubleLongArrow"] = 8] = "DoubleLongArrow";
+    /**
+     * Bullet type circle
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Circle"] = 9] = "Circle";
     /**
      * Maximum value of the enum
      */
-    CompatibleBulletListType[CompatibleBulletListType["Max"] = 7] = "Max";
+    CompatibleBulletListType[CompatibleBulletListType["Max"] = 9] = "Max";
 })(CompatibleBulletListType = exports.CompatibleBulletListType || (exports.CompatibleBulletListType = {}));
 
 
@@ -27537,7 +28502,7 @@ var CompatibleExperimentalFeatures;
      */
     CompatibleExperimentalFeatures["ImageRotate"] = "ImageRotate";
     /**
-     * Crop an inline image (requires ImageEdit plugin)
+     * @deprecated This feature is always enabled
      */
     CompatibleExperimentalFeatures["ImageCrop"] = "ImageCrop";
     /**
@@ -27585,6 +28550,17 @@ var CompatibleExperimentalFeatures;
      * e.g. We will move list items with "display: block" into previous list item and change tag to be DIV
      */
     CompatibleExperimentalFeatures["NormalizeList"] = "NormalizeList";
+    /**
+     * When a html image is selected, the selected image data will be stored by editor core.
+     */
+    CompatibleExperimentalFeatures["ImageSelection"] = "ImageSelection";
+    /**
+     * With this feature enabled, when writing back a list item we will re-use all
+     * ancestor list elements, even if they don't match the types currently in the
+     * listTypes array for that item. The only list that we will ensure is correct
+     * is the one closest to the item.
+     */
+    CompatibleExperimentalFeatures["ReuseAllAncestorListElements"] = "ReuseAllAncestorListElements";
 })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));
 
 
@@ -28318,6 +29294,10 @@ var CompatibleSelectionRangeTypes;
      * Selection made inside of a single table.
      */
     CompatibleSelectionRangeTypes[CompatibleSelectionRangeTypes["TableSelection"] = 1] = "TableSelection";
+    /**
+     * Selection made in a image.
+     */
+    CompatibleSelectionRangeTypes[CompatibleSelectionRangeTypes["ImageSelection"] = 2] = "ImageSelection";
 })(CompatibleSelectionRangeTypes = exports.CompatibleSelectionRangeTypes || (exports.CompatibleSelectionRangeTypes = {}));