roosterjs 8.31.0 → 8.32.0

package/dist/rooster.js

@@ -3062,6 +3062,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
@@ -3130,7 +3131,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');
@@ -3319,6 +3327,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
@@ -3351,7 +3360,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([]);
                 }
             }
@@ -3375,12 +3384,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();
@@ -3437,7 +3448,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');
@@ -3945,8 +3956,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
@@ -3959,9 +3968,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');
@@ -4434,7 +4441,8 @@ function commitListChains(editor, chains) {
         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(); });
+        var shouldReuseAllAncestorListElements_1 = editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */);
+        chains.forEach(function (chain) { return chain.commit(shouldReuseAllAncestorListElements_1); });
         editor.select(start, end);
     }
 }
@@ -4533,6 +4541,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":
@@ -4580,7 +4643,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');
 }
@@ -4766,6 +4829,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");
@@ -4795,6 +4859,7 @@ exports.coreApiMap = {
     transformColor: transformColor_1.transformColor,
     triggerEvent: triggerEvent_1.triggerEvent,
     selectTable: selectTable_1.selectTable,
+    selectImage: selectImage_1.selectImage,
 };
 
 
@@ -4976,11 +5041,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: {},
@@ -5364,10 +5432,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);
@@ -5380,6 +5448,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);
@@ -5391,6 +5471,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);
@@ -5399,7 +5482,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;
@@ -5709,6 +5792,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":
@@ -5786,6 +5934,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_';
@@ -5803,8 +5953,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
@@ -5890,17 +6040,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) {
@@ -5913,27 +6055,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 +
         ' #' +
@@ -6069,20 +6190,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, {
@@ -6093,6 +6217,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) {
@@ -6114,6 +6239,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;
@@ -6314,6 +6446,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":
@@ -6567,9 +6776,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);
             }
@@ -6633,6 +6846,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,
         };
     }
     /**
@@ -7269,6 +7483,7 @@ var LifecyclePlugin = /** @class */ (function () {
             shadowEditFragment: null,
             shadowEditSelectionPath: null,
             shadowEditTableSelectionPath: null,
+            shadowEditImageSelectionPath: null,
         };
     }
     /**
@@ -7526,7 +7741,6 @@ var NormalizeTablePlugin = /** @class */ (function () {
             case 11 /* EditorReady */:
             case 7 /* ContentChanged */:
                 this.normalizeTables(this.editor.queryElements('table'));
-                this.normalizeBlockquotes(this.editor.queryElements('blockquote'));
                 break;
             case 10 /* BeforePaste */:
                 this.normalizeTables((0, roosterjs_editor_dom_1.toArray)(event.fragment.querySelectorAll('table')));
@@ -7567,31 +7781,9 @@ var NormalizeTablePlugin = /** @class */ (function () {
             }
         }
     };
-    NormalizeTablePlugin.prototype.normalizeBlockquotes = function (elements) {
-        elements.forEach(function (quote) {
-            var centeredElement = quote.querySelector('[style^="text-align: center"]');
-            if (centeredElement) {
-                if (isRTL(centeredElement)) {
-                    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;
-            }
-        });
-    };
     return NormalizeTablePlugin;
 }());
 exports.default = NormalizeTablePlugin;
-function isRTL(el) {
-    return (0, roosterjs_editor_dom_1.getComputedStyle)(el, 'direction') == 'rtl' || el.getAttribute('dir') == 'rtl';
-}
 function normalizeTables(tables) {
     var isDOMChanged = false;
     tables.forEach(function (table) {
@@ -8288,7 +8480,13 @@ var Editor = /** @class */ (function () {
             }
         });
         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; }) });
+        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
@@ -8556,6 +8754,17 @@ var Editor = /** @class */ (function () {
             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 {
+            core.api.selectImage(core, null);
+            core.domEvent.imageSelectionRange = null;
+        }
         var range = !arg1
             ? null
             : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
@@ -8833,6 +9042,8 @@ var Editor = /** @class */ (function () {
         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
@@ -9005,6 +9216,12 @@ 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
@@ -11781,9 +11998,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");
@@ -11875,6 +12092,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");
@@ -11891,6 +12110,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");
@@ -12861,8 +13082,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');
@@ -12880,7 +13103,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) {
@@ -13260,7 +13483,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++) {
@@ -13270,7 +13493,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);
         }
     };
     /**
@@ -13356,7 +13579,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 */, 8 /* 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 !!!
@@ -13544,19 +13767,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
@@ -13573,7 +13818,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;
                 }
             }
@@ -14439,6 +14685,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 */:
@@ -15851,7 +16101,7 @@ var normalizeRect_1 = __webpack_require__(/*! ../utils/normalizeRect */ "./packa
 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',
@@ -16005,8 +16255,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);
                 }
             });
         });
@@ -16550,10 +16800,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
@@ -16576,11 +16826,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
@@ -16858,6 +17108,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":
@@ -17509,6 +17800,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":
@@ -18795,6 +19141,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":
@@ -18955,6 +19326,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);
 
 
 /***/ }),
@@ -19638,7 +20010,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();
             });
         }
@@ -19714,7 +20086,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:
@@ -19802,23 +20175,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*/);
@@ -19890,7 +20253,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
@@ -19944,7 +20314,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;
             }
@@ -19988,7 +20358,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());
@@ -20006,19 +20377,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
  */
@@ -20738,13 +21109,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 */;
@@ -20803,16 +21168,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;
@@ -20820,16 +21183,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;
 }
@@ -22997,6 +23366,99 @@ var ImageResize_1 = __webpack_require__(/*! ./ImageResize */ "./packages/rooster
 Object.defineProperty(exports, "ImageResize", { enumerable: true, get: function () { return ImageResize_1.default; } });
 
 
+/***/ }),
+
+/***/ "./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 roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * Detect image selection and help highlight the image
+ */
+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":
@@ -26426,12 +26888,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);
@@ -26485,8 +26953,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 () {
@@ -26571,7 +27040,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;
             }
@@ -26621,21 +27090,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;
@@ -26659,10 +27113,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;
 
@@ -26713,6 +27169,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 () {
@@ -26895,10 +27352,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 = {
@@ -26936,6 +27393,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;
+}
 
 
 /***/ }),
@@ -27212,10 +27677,14 @@ var CompatibleBulletListType;
      * Bullet triggered by -->
      */
     CompatibleBulletListType[CompatibleBulletListType["DoubleLongArrow"] = 8] = "DoubleLongArrow";
+    /**
+     * Bullet type circle
+     */
+    CompatibleBulletListType[CompatibleBulletListType["Circle"] = 9] = "Circle";
     /**
      * Maximum value of the enum
      */
-    CompatibleBulletListType[CompatibleBulletListType["Max"] = 8] = "Max";
+    CompatibleBulletListType[CompatibleBulletListType["Max"] = 9] = "Max";
 })(CompatibleBulletListType = exports.CompatibleBulletListType || (exports.CompatibleBulletListType = {}));
 
 
@@ -28082,6 +28551,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 = {}));
 
 
@@ -28815,6 +29295,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 = {}));