roosterjs 8.34.0 → 8.35.0

package/dist/rooster-amd.js

@@ -2276,7 +2276,7 @@ function changeFontSize(editor, change, fontSizes) {
         var pt = parseFloat((0, roosterjs_editor_dom_1.getComputedStyle)(element, 'font-size') || element.style.fontSize);
         element.style.fontSize = getNewFontSize(pt, changeBase, fontSizes) + 'pt';
         var lineHeight = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'line-height');
-        if (lineHeight != 'normal') {
+        if (lineHeight && lineHeight != 'normal') {
             element.style.lineHeight = 'normal';
         }
     }, 'changeFontSize');
@@ -3281,7 +3281,7 @@ function setFontSize(editor, fontSize) {
     (0, applyListItemWrap_1.default)(editor, 'font-size', function (element, isInnerNode) {
         element.style.fontSize = isInnerNode ? '' : fontSize;
         var lineHeight = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'line-height');
-        if (lineHeight != 'normal') {
+        if (lineHeight && lineHeight != 'normal') {
             element.style.lineHeight = 'normal';
         }
     }, 'setFontSize');
@@ -4323,8 +4323,8 @@ function blockFormat(editor, callback, beforeRunCallback, apiName) {
         if (selection.type == 0 /* Normal */) {
             editor.select(start, end);
         }
-        else if (selection.type == 1 /* TableSelection */) {
-            editor.select(selection.table, selection.coordinates);
+        else {
+            editor.select(selection);
         }
     }, apiName);
 }
@@ -4502,16 +4502,15 @@ function execCommand(editor, command, apiName) {
     }
     else {
         (0, formatUndoSnapshot_1.default)(editor, function () {
-            var tempRange;
+            var needToSwitchSelection = selection.type != 0 /* Normal */;
             selection.ranges.forEach(function (range) {
-                if (selection.type == 1 /* TableSelection */) {
+                if (needToSwitchSelection) {
                     editor.select(range);
                 }
                 formatter();
-                tempRange = range;
             });
-            if (tempRange && selection.type == 1 /* TableSelection */) {
-                editor.select(selection.table, selection.coordinates);
+            if (needToSwitchSelection) {
+                editor.select(selection);
             }
         }, apiName);
     }
@@ -4643,7 +4642,7 @@ function toggleListType(editor, listType, startNumber, includeSiblingLists, orde
         var chain = startNumber > 0 && chains.filter(function (chain) { return chain.canAppendAtCursor(startNumber); })[0];
         var vList = chain && start.equalTo(end)
             ? chain.createVListAtBlock((_a = (0, roosterjs_editor_dom_1.getBlockElementAtNode)(region.rootNode, start.node)) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement(), startNumber)
-            : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, includeSiblingLists);
+            : (0, roosterjs_editor_dom_1.createVListFromRegion)(region, startNumber === 1 ? false : includeSiblingLists);
         if (vList) {
             vList.changeListType(start, end, listType);
             if (editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
@@ -4735,8 +4734,7 @@ function addUndoSnapshotInternal(core, canUndoByBackspace) {
     if (!core.lifecycle.shadowEditFragment) {
         var rangeEx = core.api.getSelectionRangeEx(core);
         var isDarkMode = core.lifecycle.isDarkMode;
-        var metadata = (rangeEx === null || rangeEx === void 0 ? void 0 : rangeEx.type) == 1 /* TableSelection */
-            ? __assign({ type: 1 /* TableSelection */, tableId: rangeEx.table.id, isDarkMode: isDarkMode }, rangeEx.coordinates) : __assign({ type: 0 /* Normal */, isDarkMode: isDarkMode, start: [], end: [] }, ((0, roosterjs_editor_dom_1.getSelectionPath)(core.contentDiv, rangeEx.ranges[0]) || {}));
+        var metadata = createContentMetadata(core.contentDiv, rangeEx, isDarkMode) || null;
         core.undo.snapshotsService.addSnapshot({
             html: core.contentDiv.innerHTML,
             metadata: metadata,
@@ -4744,6 +4742,20 @@ function addUndoSnapshotInternal(core, canUndoByBackspace) {
         core.undo.hasNewContent = false;
     }
 }
+function createContentMetadata(root, rangeEx, isDarkMode) {
+    switch (rangeEx === null || rangeEx === void 0 ? void 0 : rangeEx.type) {
+        case 1 /* TableSelection */:
+            return __assign({ type: 1 /* TableSelection */, tableId: rangeEx.table.id, isDarkMode: !!isDarkMode }, rangeEx.coordinates);
+        case 2 /* ImageSelection */:
+            return {
+                type: 2 /* ImageSelection */,
+                imageId: rangeEx.image.id,
+                isDarkMode: !!isDarkMode,
+            };
+        case 0 /* Normal */:
+            return __assign({ type: 0 /* Normal */, isDarkMode: !!isDarkMode, start: [], end: [] }, ((0, roosterjs_editor_dom_1.getSelectionPath)(root, rangeEx.ranges[0]) || {}));
+    }
+}
 
 
 /***/ }),
@@ -5843,6 +5855,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 var IMAGE_ID = 'imageSelected';
 var CONTENT_DIV_ID = 'contentDiv_';
 var STYLE_ID = 'imageStyle';
+var DEFAULT_SELECTION_BORDER_COLOR = '#DB626C';
 /**
  * @internal
  * Select a image and save data of the selected range
@@ -5851,23 +5864,21 @@ var STYLE_ID = 'imageStyle';
  */
 var selectImage = function (core, image) {
     unselect(core);
+    var selection = null;
     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);
         core.api.selectRange(core, (0, roosterjs_editor_dom_1.createRange)(new roosterjs_editor_dom_1.Position(image, -3 /* After */)));
         select(core, image);
-        var selection = {
+        selection = {
             type: 2 /* ImageSelection */,
             ranges: [range],
             image: image,
             areAllCollapsed: range.collapsed,
         };
-        core.domEvent.imageSelectionRange = selection;
-        return selection;
     }
-    core.domEvent.imageSelectionRange = null;
-    return null;
+    return selection;
 };
 exports.selectImage = selectImage;
 var select = function (core, image) {
@@ -5876,14 +5887,9 @@ var select = function (core, image) {
     (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 !important; border: 2px solid' +
-        borderColor +
-        ' !important; }');
+    var divId = core.contentDiv.id;
+    var color = core.imageSelectionBorderColor || DEFAULT_SELECTION_BORDER_COLOR;
+    return "#" + divId + " #" + imageId + " {outline-style: auto!important;outline-color: " + color + "!important;caret-color: transparent!important;}";
 };
 var unselect = function (core) {
     var doc = core.contentDiv.ownerDocument;
@@ -6021,12 +6027,11 @@ function buildCss(table, coordinates, contentDivSelector) {
     var ranges = [];
     var firstSelected = null;
     var lastSelected = null;
-    var css = '';
-    var isFirst = true;
+    var selectors = [];
     var vTable = new roosterjs_editor_dom_1.VTable(table);
     // Get whether table has thead, tbody or tfoot.
     var tableChildren = (0, roosterjs_editor_dom_1.toArray)(table.childNodes).filter(function (node) { return ['THEAD', 'TBODY', 'TFOOT'].indexOf((0, roosterjs_editor_dom_1.getTagOfNode)(node)) > -1; });
-    // Set the start and end of each of the table childs, so we can build the selector according the element between the table and the row.
+    // Set the start and end of each of the table children, so we can build the selector according the element between the table and the row.
     var cont = 0;
     var indexes = tableChildren.map(function (node) {
         var result = {
@@ -6053,15 +6058,9 @@ function buildCss(table, coordinates, contentDivSelector) {
                 var tag = (0, roosterjs_editor_dom_1.getTagOfNode)(cell);
                 tdCount++;
                 if (rowIndex >= tr1 && rowIndex <= tr2 && cellIndex >= td1 && cellIndex <= td2) {
-                    if (isFirst) {
-                        isFirst = false;
-                    }
-                    else if (!css.endsWith(',')) {
-                        css += ',';
-                    }
                     removeImportant(cell);
                     var selector = generateCssFromCell(contentDivSelector, table.id, middleElSelector, currentRow, tag, tdCount);
-                    css += selector;
+                    selectors.push(selector);
                     firstSelected = firstSelected || table.querySelector(selector);
                     lastSelected = table.querySelector(selector);
                 }
@@ -6074,7 +6073,7 @@ function buildCss(table, coordinates, contentDivSelector) {
             ranges.push(rowRange);
         }
     });
-    css += '{background-color: rgba(198,198,198,0.7) !important;}';
+    var css = selectors.join(',') + " {background-color: rgba(198,198,198,0.7) !important; caret-color: transparent}";
     return { css: css, ranges: ranges };
 }
 function select(core, table, coordinates) {
@@ -6182,17 +6181,30 @@ var setContent = function (core, content, triggerContentChangedEvent, metadata)
 };
 exports.setContent = setContent;
 function selectContentMetadata(core, metadata) {
-    switch (metadata === null || metadata === void 0 ? void 0 : metadata.type) {
-        case 0 /* Normal */:
-            var range = (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, metadata.start, metadata.end);
-            core.api.selectRange(core, range);
-            break;
-        case 1 /* TableSelection */:
-            var table = (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, '#' + metadata.tableId)[0];
-            if (table) {
-                core.api.selectTable(core, table, metadata);
-            }
-            break;
+    if (!core.lifecycle.shadowEditSelectionPath && metadata) {
+        core.domEvent.tableSelectionRange = null;
+        core.domEvent.imageSelectionRange = null;
+        core.domEvent.selectionRange = null;
+        switch (metadata.type) {
+            case 0 /* Normal */:
+                core.api.selectTable(core, null);
+                core.api.selectImage(core, null);
+                var range = (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, metadata.start, metadata.end);
+                core.api.selectRange(core, range);
+                break;
+            case 1 /* TableSelection */:
+                var table = (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, '#' + metadata.tableId)[0];
+                if (table) {
+                    core.domEvent.tableSelectionRange = core.api.selectTable(core, table, metadata);
+                }
+                break;
+            case 2 /* ImageSelection */:
+                var image = (0, roosterjs_editor_dom_1.queryElements)(core.contentDiv, '#' + metadata.imageId)[0];
+                if (image) {
+                    core.domEvent.imageSelectionRange = core.api.selectImage(core, image);
+                }
+                break;
+        }
     }
 }
 
@@ -6646,7 +6658,7 @@ var CopyPastePlugin = /** @class */ (function () {
                 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;
+                var newRange = null;
                 if (selection_1.type === 1 /* TableSelection */ &&
                     selection_1.coordinates) {
                     var table = tempDiv_1.querySelector("#" + selection_1.table.id);
@@ -6655,6 +6667,12 @@ var CopyPastePlugin = /** @class */ (function () {
                         this.deleteTableContent(this.editor, selection_1.table, selection_1.coordinates);
                     }
                 }
+                else if (selection_1.type === 2 /* ImageSelection */) {
+                    var image = tempDiv_1.querySelector('#' + selection_1.image.id);
+                    if (image) {
+                        newRange = (0, roosterjs_editor_dom_1.createRange)(image);
+                    }
+                }
                 else {
                     newRange =
                         (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 0 /* Normal */
@@ -6702,17 +6720,16 @@ var CopyPastePlugin = /** @class */ (function () {
         return div;
     };
     CopyPastePlugin.prototype.cleanUpAndRestoreSelection = function (tempDiv, range, isCopy) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!!((_a = range) === null || _a === void 0 ? void 0 : _a.type) || range.type == 0) {
             var selection = range;
             switch (selection.type) {
                 case 1 /* TableSelection */:
-                    if (this.editor && selection.table && selection.coordinates) {
-                        this.editor.select(selection.table, selection.coordinates);
-                    }
+                case 2 /* ImageSelection */:
+                    (_b = this.editor) === null || _b === void 0 ? void 0 : _b.select(selection);
                     break;
                 case 0 /* Normal */:
-                    var range_1 = (_b = selection.ranges) === null || _b === void 0 ? void 0 : _b[0];
+                    var range_1 = (_c = selection.ranges) === null || _c === void 0 ? void 0 : _c[0];
                     this.restoreRange(range_1, isCopy);
                     break;
             }
@@ -6850,7 +6867,9 @@ var DOMEventPlugin = /** @class */ (function () {
             });
         };
         this.onKeyboardEvent = function (event) {
-            if ((0, roosterjs_editor_dom_1.isCharacterValue)(event)) {
+            if ((0, roosterjs_editor_dom_1.isCharacterValue)(event) || (event.which >= 33 /* PAGEUP */ && event.which <= 40 /* DOWN */)) {
+                // Stop propagation for Character keys and Up/Down/Left/Right/Home/End/PageUp/PageDown
+                // since editor already handles these keys and no need to propagate to parents
                 event.stopPropagation();
             }
         };
@@ -8012,6 +8031,7 @@ var PendingFormatStatePlugin = /** @class */ (function () {
                     event.eventType == 0 /* KeyDown */ &&
                     (0, roosterjs_editor_dom_1.isCharacterValue)(event.rawEvent) &&
                     this.state.pendableFormatSpan) {
+                    this.state.pendableFormatSpan.removeAttribute('contentEditable');
                     this.editor.insertNode(this.state.pendableFormatSpan);
                     this.editor.select(this.state.pendableFormatSpan, -2 /* Before */, this.state.pendableFormatSpan, -1 /* End */);
                     this.clear();
@@ -8860,44 +8880,83 @@ var Editor = /** @class */ (function () {
     };
     Editor.prototype.select = function (arg1, arg2, arg3, arg4) {
         var core = this.getCore();
-        if (arg1 && 'rows' in arg1) {
-            var selection = core.api.selectTable(core, arg1, arg2);
-            core.domEvent.tableSelectionRange = selection;
-            this.triggerSelectionChanged(selection);
-            return !!selection;
+        var rangeEx = null;
+        if (isSelectionRangeEx(arg1)) {
+            rangeEx = arg1;
         }
-        else {
-            core.api.selectTable(core, null);
-            core.domEvent.tableSelectionRange = null;
+        else if ((0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLTableElement') && isTableSelection(arg2)) {
+            rangeEx = {
+                type: 1 /* TableSelection */,
+                ranges: [],
+                areAllCollapsed: false,
+                table: arg1,
+                coordinates: arg2,
+            };
         }
-        if (this.isFeatureEnabled("ImageSelection" /* ImageSelection */) &&
+        else if (this.isFeatureEnabled("ImageSelection" /* ImageSelection */) &&
             (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'HTMLImageElement') &&
-            !arg2) {
-            var selection = core.api.selectImage(core, arg1);
-            this.triggerSelectionChanged(selection);
-            return !!selection;
+            typeof arg2 == 'undefined') {
+            rangeEx = {
+                type: 2 /* ImageSelection */,
+                ranges: [],
+                areAllCollapsed: false,
+                image: arg1,
+            };
         }
         else {
-            core.api.selectImage(core, null);
+            var range = !arg1
+                ? null
+                : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
+                    ? arg1
+                    : isSelectionPath(arg1)
+                        ? (0, roosterjs_editor_dom_1.createRange)(core.contentDiv, arg1.start, arg1.end)
+                        : isNodePosition(arg1) || (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Node')
+                            ? (0, roosterjs_editor_dom_1.createRange)(arg1, arg2, arg3, arg4)
+                            : null;
+            rangeEx = range
+                ? {
+                    type: 0 /* Normal */,
+                    ranges: [range],
+                    areAllCollapsed: range.collapsed,
+                }
+                : null;
         }
-        var range = !arg1
-            ? null
-            : (0, roosterjs_editor_dom_1.safeInstanceOf)(arg1, 'Range')
-                ? arg1
-                : '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);
-        this.triggerSelectionChanged({
-            type: 0 /* Normal */,
-            ranges: range ? [range] : [],
-            areAllCollapsed: range ? range.collapsed : true,
-        });
-        return !!range && this.contains(range) && core.api.selectRange(core, range);
-    };
-    Editor.prototype.triggerSelectionChanged = function (selection) {
-        this.triggerPluginEvent(22 /* SelectionChanged */, {
-            selectionRangeEx: selection,
-        }, true /** broadcast **/);
+        if (rangeEx) {
+            switch (rangeEx.type) {
+                case 1 /* TableSelection */:
+                    if (this.contains(rangeEx.table)) {
+                        core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
+                        core.domEvent.tableSelectionRange = core.api.selectTable(core, rangeEx.table, rangeEx.coordinates);
+                        rangeEx = core.domEvent.tableSelectionRange;
+                    }
+                    break;
+                case 2 /* ImageSelection */:
+                    if (this.contains(rangeEx.image)) {
+                        core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
+                        core.domEvent.imageSelectionRange = core.api.selectImage(core, rangeEx.image);
+                        rangeEx = core.domEvent.imageSelectionRange;
+                    }
+                    break;
+                case 0 /* Normal */:
+                    core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
+                    core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
+                    if (this.contains(rangeEx.ranges[0])) {
+                        core.api.selectRange(core, rangeEx.ranges[0]);
+                    }
+                    else {
+                        rangeEx = null;
+                    }
+                    break;
+            }
+            this.triggerPluginEvent(22 /* SelectionChanged */, {
+                selectionRangeEx: rangeEx,
+            }, true /** broadcast **/);
+        }
+        else {
+            core.domEvent.tableSelectionRange = core.api.selectTable(core, null);
+            core.domEvent.imageSelectionRange = core.api.selectImage(core, null);
+        }
+        return !!rangeEx;
     };
     /**
      * Get current focused position. Return null if editor doesn't have focus at this time.
@@ -9379,6 +9438,31 @@ var Editor = /** @class */ (function () {
     return Editor;
 }());
 exports.default = Editor;
+function isSelectionRangeEx(obj) {
+    var rangeEx = obj;
+    return (rangeEx &&
+        typeof rangeEx == 'object' &&
+        typeof rangeEx.type == 'number' &&
+        Array.isArray(rangeEx.ranges));
+}
+function isTableSelection(obj) {
+    var selection = obj;
+    return (selection &&
+        typeof selection == 'object' &&
+        typeof selection.firstCell == 'object' &&
+        typeof selection.lastCell == 'object');
+}
+function isSelectionPath(obj) {
+    var path = obj;
+    return path && typeof path == 'object' && Array.isArray(path.start) && Array.isArray(path.end);
+}
+function isNodePosition(obj) {
+    var pos = obj;
+    return (pos &&
+        typeof pos == 'object' &&
+        typeof pos.node == 'object' &&
+        typeof pos.offset == 'number');
+}
 
 
 /***/ }),
@@ -11365,6 +11449,7 @@ var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./pac
 var setStyles_1 = __webpack_require__(/*! ../style/setStyles */ "./packages/roosterjs-editor-dom/lib/style/setStyles.ts");
 var toArray_1 = __webpack_require__(/*! ../jsUtils/toArray */ "./packages/roosterjs-editor-dom/lib/jsUtils/toArray.ts");
 var cloneObject_1 = __webpack_require__(/*! ./cloneObject */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/cloneObject.ts");
+var processCssVariable_1 = __webpack_require__(/*! ./processCssVariable */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/processCssVariable.ts");
 var getAllowedValues_1 = __webpack_require__(/*! ./getAllowedValues */ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/getAllowedValues.ts");
 /**
  * HTML sanitizer class provides two features:
@@ -11582,17 +11667,29 @@ var HtmlSanitizer = /** @class */ (function () {
             var value = styles[name];
             var callback = _this.styleCallbacks[name];
             var isInheritable = thisStyle[name] != undefined;
-            var keep = (!callback || callback(value, element, thisStyle, context)) &&
-                value != 'inherit' &&
-                value.indexOf('expression') < 0 &&
-                name.substr(0, 1) != '-' &&
-                _this.defaultStyleValues[name] != value &&
-                ((isInheritable && value != thisStyle[name]) ||
-                    (!isInheritable && value != 'initial' && value != 'normal'));
+            var keep = true;
+            if (keep && !!callback) {
+                keep = callback(value, element, thisStyle, context);
+            }
+            if (keep && (0, processCssVariable_1.isCssVariable)(value)) {
+                value = (0, processCssVariable_1.processCssVariable)(value);
+                keep = !!value;
+            }
+            keep =
+                keep &&
+                    value != 'inherit' &&
+                    value.indexOf('expression') < 0 &&
+                    name.substr(0, 1) != '-' &&
+                    _this.defaultStyleValues[name] != value &&
+                    ((isInheritable && value != thisStyle[name]) ||
+                        (!isInheritable && value != 'initial' && value != 'normal'));
             if (keep && isInheritable) {
                 thisStyle[name] = value;
             }
-            if (!keep) {
+            if (keep) {
+                styles[name] = value;
+            }
+            else {
                 delete styles[name];
             }
         });
@@ -12118,6 +12215,39 @@ function getPredefinedCssForElement(element, additionalPredefinedCssForElement)
 exports.default = getPredefinedCssForElement;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/htmlSanitizer/processCssVariable.ts":
+/*!*******************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/htmlSanitizer/processCssVariable.ts ***!
+  \*******************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCssVariable = exports.processCssVariable = void 0;
+var VARIABLE_REGEX = /^\s*var\(\s*[a-zA-Z0-9-_]+\s*(,\s*(.*))?\)\s*$/;
+var VARIABLE_PREFIX = 'var(';
+/**
+ * @internal
+ * Handle CSS variable format. e.g.: var(--name, fallbackValue)
+ */
+function processCssVariable(value) {
+    var match = VARIABLE_REGEX.exec(value);
+    return (match === null || match === void 0 ? void 0 : match[2]) || ''; // Without fallback value, we don't know what does the original value mean, so ignore it
+}
+exports.processCssVariable = processCssVariable;
+/**
+ * @internal
+ */
+function isCssVariable(value) {
+    return value.indexOf(VARIABLE_PREFIX) == 0;
+}
+exports.isCssVariable = isCssVariable;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/index.ts":
@@ -13624,7 +13754,7 @@ var VListChain = /** @class */ (function () {
         var lastNumber = 0;
         for (var i = 0; i < lists.length; i++) {
             var list = lists[i];
-            list.start = lastNumber + 1;
+            list.start = list.start > 1 ? list.start : lastNumber + 1;
             var vlist = new VList_1.default(list);
             lastNumber = vlist.getLastItemNumber() || 0;
             delete list.dataset[CHAIN_DATASET_NAME];
@@ -14387,16 +14517,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function setBulletListMarkers(li, listStyleType) {
     var marker = bulletListStyle[listStyleType];
-    var isDiscOrSquare = listStyleType === 1 /* Disc */ || listStyleType === 3 /* Square */;
-    li.style.listStyleType = isDiscOrSquare ? marker : "\"" + marker + "\"";
+    var isDisc = listStyleType === 1 /* Disc */;
+    li.style.listStyleType = isDisc ? marker : "\"" + marker + "\"";
 }
 exports.default = setBulletListMarkers;
 var bulletListStyle = (_a = {},
     _a[1 /* Disc */] = 'disc',
-    _a[3 /* Square */] = 'square',
+    _a[3 /* Square */] = '∎ ',
     _a[2 /* Dash */] = '- ',
-    _a[5 /* LongArrow */] = '→ ',
-    _a[8 /* DoubleLongArrow */] = '→ ',
+    _a[5 /* LongArrow */] = '➔ ',
+    _a[8 /* DoubleLongArrow */] = '➔ ',
     _a[4 /* ShortArrow */] = '➢ ',
     _a[6 /* UnfilledArrow */] = '➪ ',
     _a[7 /* Hyphen */] = '— ',
@@ -15870,6 +16000,11 @@ var TableContentMetadataDefinition = (0, definitionCreators_1.createObjectDefini
     firstCell: CoordinatesDefinition,
     lastCell: CoordinatesDefinition,
 });
+var ImageContentMetadataDefinition = (0, definitionCreators_1.createObjectDefinition)({
+    type: (0, definitionCreators_1.createNumberDefinition)(false /*isOptional*/, 2 /* ImageSelection */),
+    isDarkMode: IsDarkModeDefinition,
+    imageId: (0, definitionCreators_1.createStringDefinition)(),
+});
 /**
  * @deprecated Use setHtmlWithMetadata instead
  * Restore inner HTML of a root element from given html string. If the string contains selection path,
@@ -15905,7 +16040,8 @@ function setHtmlWithMetadata(rootNode, html, trustedHTMLHandler) {
         try {
             var obj = JSON.parse(potentialMetadataComment.nodeValue || '');
             if ((0, validate_1.default)(obj, NormalContentMetadataDefinition) ||
-                (0, validate_1.default)(obj, TableContentMetadataDefinition)) {
+                (0, validate_1.default)(obj, TableContentMetadataDefinition) ||
+                (0, validate_1.default)(obj, ImageContentMetadataDefinition)) {
                 rootNode.removeChild(potentialMetadataComment);
                 obj.type = typeof obj.type === 'undefined' ? 0 /* Normal */ : obj.type;
                 obj.isDarkMode = obj.isDarkMode || false;
@@ -20157,7 +20293,7 @@ var DeleteBeforeEntityFeature = {
 function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, operation) {
     var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'NEIGHBOR_ENTITY_ELEMENT_' + isNext + '_' + collapseOnly, function () {
         var range = editor.getSelectionRange();
-        if (collapseOnly && !range.collapsed) {
+        if (!range || (collapseOnly && !range.collapsed)) {
             return null;
         }
         range.commonAncestorContainer.normalize();
@@ -20222,6 +20358,10 @@ var getAutoBulletListStyle_1 = __webpack_require__(/*! ../utils/getAutoBulletLis
 var getAutoNumberingListStyle_1 = __webpack_require__(/*! ../utils/getAutoNumberingListStyle */ "./packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/utils/getAutoNumberingListStyle.ts");
 var roosterjs_editor_api_1 = __webpack_require__(/*! roosterjs-editor-api */ "./packages/roosterjs-editor-api/lib/index.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var ListStyleDefinitionMetadata = (0, roosterjs_editor_dom_1.createObjectDefinition)({
+    orderedStyleType: (0, roosterjs_editor_dom_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 20 /* Max */),
+    unorderedStyleType: (0, roosterjs_editor_dom_1.createNumberDefinition)(true /** isOptional */, undefined /** value **/, 1 /* Min */, 9 /* Max */),
+}, true /** isOptional */, true /** allowNull */);
 /**
  * IndentWhenTab edit feature, provides the ability to indent current list when user press TAB
  */
@@ -20391,7 +20531,7 @@ var AutoBulletList = {
     shouldHandleEvent: function (event, editor) {
         if (!cacheGetListElement(event, editor) &&
             editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
-            return shouldTriggerList(event, editor, getAutoBulletListStyle_1.default);
+            return shouldTriggerList(event, editor, getAutoBulletListStyle_1.default, 2 /* Unordered */);
         }
         return false;
     },
@@ -20421,7 +20561,7 @@ var AutoNumberingList = {
     shouldHandleEvent: function (event, editor) {
         if (!cacheGetListElement(event, editor) &&
             editor.isFeatureEnabled("AutoFormatList" /* AutoFormatList */)) {
-            return shouldTriggerList(event, editor, getAutoNumberingListStyle_1.default);
+            return shouldTriggerList(event, editor, getAutoNumberingListStyle_1.default, 1 /* Ordered */);
         }
         return false;
     },
@@ -20434,21 +20574,42 @@ var AutoNumberingList = {
             var textBeforeCursor = searcher.getSubStringBefore(5);
             var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
             if (textRange) {
-                var number = parseInt(textBeforeCursor);
-                var previousNode = editor
-                    .getBodyTraverser(textRange.startContainer)
-                    .getPreviousBlockElement();
-                var isLi = previousNode
-                    ? (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode === null || previousNode === void 0 ? void 0 : previousNode.collapseToSingleElement()) === 'LI'
-                    : false;
+                var number = isFirstItemOfAList(textBeforeCursor)
+                    ? 1
+                    : parseInt(textBeforeCursor);
+                var isLi = getPreviousList(editor, textRange);
                 var listStyle = (0, getAutoNumberingListStyle_1.default)(textBeforeCursor);
                 prepareAutoBullet(editor, textRange);
-                (0, roosterjs_editor_api_1.toggleNumbering)(editor, isLi ? undefined : number /** startNumber */, listStyle, 'autoToggleList' /** apiNameOverride */);
+                (0, roosterjs_editor_api_1.toggleNumbering)(editor, isLi && number !== 1 ? undefined : number /** startNumber */, listStyle, 'autoToggleList' /** apiNameOverride */);
             }
             (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
         }, null /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
+var getPreviousList = function (editor, textRange) {
+    var _a;
+    var previousNode = (_a = editor
+        .getBodyTraverser(textRange === null || textRange === void 0 ? void 0 : textRange.startContainer)
+        .getPreviousBlockElement()) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement();
+    return (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode) === 'LI' ? previousNode : undefined;
+};
+var getPreviousListType = function (editor, textRange, listType) {
+    var type = listType === 1 /* Ordered */ ? 'orderedStyleType' : 'unorderedStyleType';
+    var previousNode = getPreviousList(editor, textRange);
+    return previousNode && (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode) === 'LI'
+        ? (0, roosterjs_editor_dom_1.getMetadata)(previousNode.parentElement, ListStyleDefinitionMetadata)[type]
+        : null;
+};
+var isFirstItemOfAList = function (item) {
+    var number = parseInt(item);
+    if (number && number === 1) {
+        return 1;
+    }
+    else {
+        var letter = item.replace(/\(|\)|\-|\./g, '').trim();
+        return letter.length === 1 && ['i', 'a', 'I', 'A'].indexOf(letter) > -1 ? 1 : undefined;
+    }
+};
 /**
  * Maintain the list numbers in list chain
  * e.g. we have two lists:
@@ -20511,14 +20672,23 @@ function cacheGetListElement(event, editor) {
     var listElement = li && (0, roosterjs_editor_dom_1.getTagOfNode)(li) == 'LI' && editor.getElementAtCursor('UL,OL', li);
     return listElement ? [listElement, li] : null;
 }
-function shouldTriggerList(event, editor, getListStyle) {
+function shouldTriggerList(event, editor, getListStyle, listType) {
     var searcher = editor.getContentSearcherOfCursor(event);
     var textBeforeCursor = searcher.getSubStringBefore(4);
     var itHasSpace = /\s/g.test(textBeforeCursor);
     var listChains = getListChains(editor);
+    var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
+    var previousListType = getPreviousListType(editor, textRange, listType);
+    var isFirstItem = isFirstItemOfAList(textBeforeCursor);
+    var listStyle = getListStyle(textBeforeCursor, listChains, previousListType);
+    var shouldTriggerNewListStyle = isFirstItem ||
+        !previousListType ||
+        previousListType === listStyle ||
+        listType === 2 /* Unordered */;
     return (!itHasSpace &&
         !searcher.getNearestNonTextInlineElement() &&
-        getListStyle(textBeforeCursor, listChains));
+        listStyle &&
+        shouldTriggerNewListStyle);
 }
 /**
  * @internal
@@ -20581,8 +20751,12 @@ function cacheGetRangeForMarkdownOperation(event, editor, triggerCharacter) {
             if (inlineTextContent[inlineTextContent.length - 1].trim().length == 0) {
                 return false;
             }
+            //if the text is pasted, it might create a inner element inside the text element,
+            // then is necessary to check the parent block to get whole text
+            var parentBlockText = textInlineElement.getParentBlock().getTextContent();
             // special case for consecutive trigger characters
-            if (inlineTextContent[inlineTextContent.length - 1] === triggerCharacter) {
+            // check parent block in case of pasted text
+            if (parentBlockText[parentBlockText.length - 1].trim() === triggerCharacter) {
                 return false;
             }
             if (!endPosition) {
@@ -21367,24 +21541,42 @@ var characters = {
     '-': 2 /* Dash */,
     ')': 3 /* Parenthesis */,
 };
+var lowerRomanTypes = [
+    13 /* LowerRoman */,
+    16 /* LowerRomanDash */,
+    15 /* LowerRomanDoubleParenthesis */,
+    14 /* LowerRomanParenthesis */,
+];
+var upperRomanTypes = [
+    17 /* UpperRoman */,
+    20 /* UpperRomanDash */,
+    19 /* UpperRomanDoubleParenthesis */,
+    18 /* UpperRomanParenthesis */,
+];
 var numberingTriggers = ['1', 'a', 'A', 'I', 'i'];
-var identifyNumberingType = function (text) {
+var lowerRomanNumbers = ['i', 'v', 'x', 'l', 'c', 'd', 'm'];
+var upperRomanNumbers = ['I', 'V', 'X', 'L', 'C', 'D', 'M'];
+var identifyNumberingType = function (text, previousListStyle) {
     if (!isNaN(parseInt(text))) {
         return 1 /* Decimal */;
     }
     else if (/[a-z]+/g.test(text)) {
-        if (text === 'i') {
+        if ((lowerRomanTypes.indexOf(previousListStyle) > -1 &&
+            lowerRomanNumbers.indexOf(text[0]) > -1) ||
+            (!previousListStyle && text === 'i')) {
             return 4 /* LowerRoman */;
         }
-        else {
+        else if (previousListStyle || (!previousListStyle && text === 'a')) {
             return 2 /* LowerAlpha */;
         }
     }
     else if (/[A-Z]+/g.test(text)) {
-        if (text === 'I') {
+        if ((upperRomanTypes.indexOf(previousListStyle) > -1 &&
+            upperRomanNumbers.indexOf(text[0]) > -1) ||
+            (!previousListStyle && text === 'I')) {
             return 5 /* UpperRoman */;
         }
-        else {
+        else if (previousListStyle || (!previousListStyle && text === 'A')) {
             return 3 /* UpperAlpha */;
         }
     }
@@ -21426,14 +21618,14 @@ var DecimalsTypes = (_f = {},
     _f[3 /* Parenthesis */] = 3 /* DecimalParenthesis */,
     _f[4 /* DoubleParenthesis */] = 4 /* DecimalDoubleParenthesis */,
     _f);
-var identifyNumberingListType = function (numbering, isDoubleParenthesis) {
+var identifyNumberingListType = function (numbering, isDoubleParenthesis, previousListStyle) {
     var separatorCharacter = isDoubleParenthesis
         ? 4 /* DoubleParenthesis */
-        : characters[numbering[1]];
+        : characters[numbering[numbering.length - 1]];
     // if separator is not valid, no need to check if the number is valid.
     if (separatorCharacter) {
-        var number = numbering[numbering.length - 2];
-        var numberingType = identifyNumberingType(number);
+        var number = isDoubleParenthesis ? numbering.slice(1, -1) : numbering.slice(0, -1);
+        var numberingType = identifyNumberingType(number, previousListStyle);
         return numberingType ? numberingListTypes[numberingType](separatorCharacter) : null;
     }
     return null;
@@ -21441,10 +21633,11 @@ var identifyNumberingListType = function (numbering, isDoubleParenthesis) {
 /**
  * @internal
  * @param textBeforeCursor The trigger character
- * @param previousListChain (Optional) This parameters is used to keep the list chain, if the is not a new list
+ * @param previousListChain @optional This parameters is used to keep the list chain, if the is not a new list
+ * @param previousListStyle @optional The list style of the previous list
  * @returns The style of a numbering list triggered by a string
  */
-function getAutoNumberingListStyle(textBeforeCursor, previousListChain) {
+function getAutoNumberingListStyle(textBeforeCursor, previousListChain, previousListStyle) {
     var _a;
     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.
@@ -21458,12 +21651,8 @@ function getAutoNumberingListStyle(textBeforeCursor, previousListChain) {
             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)
-        : null;
+    var isDoubleParenthesis = trigger[0] === '(' && trigger[trigger.length - 1] === ')';
+    var numberingType = identifyNumberingListType(trigger, isDoubleParenthesis, previousListStyle);
     return numberingType;
 }
 exports.default = getAutoNumberingListStyle;
@@ -22694,7 +22883,7 @@ var editInfo_1 = __webpack_require__(/*! ../editInfoUtils/editInfo */ "./package
 function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
     var editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
     if (!(0, isResizedTo_1.default)(image, percentage)) {
-        loadImage(image, editInfo.src, function () {
+        loadImage(image, image.src, function () {
             if (!editor.isDisposed() && editor.contains(image)) {
                 var lastSrc_1 = image.getAttribute('src');
                 var _a = (0, getTargetSizeByPercentage_1.default)(editInfo, percentage), width = _a.width, height = _a.height;
@@ -22883,7 +23072,7 @@ function areSameNumber(n1, n2) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getEditInfoFromImage = exports.deleteEditInfo = exports.saveEditInfo = void 0;
 var checkEditInfoState_1 = __webpack_require__(/*! ./checkEditInfoState */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/checkEditInfoState.ts");
-var IMAGE_EDIT_INFO_NAME = 'roosterEditInfo';
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * @internal
  * Save edit info to image
@@ -22892,7 +23081,7 @@ var IMAGE_EDIT_INFO_NAME = 'roosterEditInfo';
  */
 function saveEditInfo(image, editInfo) {
     if (image) {
-        image.dataset[IMAGE_EDIT_INFO_NAME] = JSON.stringify(editInfo);
+        (0, roosterjs_editor_dom_1.setMetadata)(image, editInfo);
     }
 }
 exports.saveEditInfo = saveEditInfo;
@@ -22903,7 +23092,7 @@ exports.saveEditInfo = saveEditInfo;
  */
 function deleteEditInfo(image) {
     if (image) {
-        delete image.dataset[IMAGE_EDIT_INFO_NAME];
+        (0, roosterjs_editor_dom_1.removeMetadata)(image);
     }
 }
 exports.deleteEditInfo = deleteEditInfo;
@@ -22916,7 +23105,7 @@ exports.deleteEditInfo = deleteEditInfo;
  * @param image The image to get edit info from
  */
 function getEditInfoFromImage(image) {
-    var obj = safeParseJSON(image === null || image === void 0 ? void 0 : image.dataset[IMAGE_EDIT_INFO_NAME]);
+    var obj = (0, roosterjs_editor_dom_1.getMetadata)(image);
     return (0, checkEditInfoState_1.default)(obj) == 0 /* Invalid */ ? getInitialEditInfo(image) : obj;
 }
 exports.getEditInfoFromImage = getEditInfoFromImage;
@@ -22934,14 +23123,6 @@ function getInitialEditInfo(image) {
         angleRad: 0,
     };
 }
-function safeParseJSON(json) {
-    try {
-        return JSON.parse(json);
-    }
-    catch (_a) {
-        return null;
-    }
-}
 
 
 /***/ }),
@@ -26326,7 +26507,8 @@ var TableCellSelection = /** @class */ (function () {
      */
     TableCellSelection.prototype.handleKeyDownEvent = function (event) {
         var _this = this;
-        var _a = event.rawEvent, shiftKey = _a.shiftKey, ctrlKey = _a.ctrlKey, metaKey = _a.metaKey, which = _a.which, defaultPrevented = _a.defaultPrevented;
+        var _a;
+        var _b = event.rawEvent, shiftKey = _b.shiftKey, ctrlKey = _b.ctrlKey, metaKey = _b.metaKey, which = _b.which, defaultPrevented = _b.defaultPrevented;
         if ((shiftKey && (ctrlKey || metaKey)) || which == 16 /* SHIFT */ || defaultPrevented) {
             this.preventKeyUp = defaultPrevented;
             return;
@@ -26362,6 +26544,10 @@ var TableCellSelection = /** @class */ (function () {
                 }
             });
         }
+        else if (((_a = this.editor.getSelectionRangeEx()) === null || _a === void 0 ? void 0 : _a.type) == 1 /* TableSelection */ &&
+            (!(0, roosterjs_editor_dom_1.isCtrlOrMetaPressed)(event.rawEvent) || which == 36 /* HOME */ || which == 35 /* END */)) {
+            this.editor.select(null);
+        }
     };
     TableCellSelection.prototype.handleKeyUpEvent = function (event) {
         var _a = event.rawEvent, shiftKey = _a.shiftKey, which = _a.which, ctrlKey = _a.ctrlKey;
@@ -27242,9 +27428,7 @@ var TableEditor = /** @class */ (function () {
                     var rows = vTable.cells.length - 1;
                     var lastCellIndex_1 = 0;
                     vTable.cells[rows].forEach(function (cell, index) {
-                        if (cell.td) {
-                            lastCellIndex_1 = index;
-                        }
+                        lastCellIndex_1 = index;
                     });
                     var selection = {
                         firstCell: {
@@ -29070,6 +29254,8 @@ var CompatibleKeys;
     CompatibleKeys[CompatibleKeys["ESCAPE"] = 27] = "ESCAPE";
     CompatibleKeys[CompatibleKeys["SPACE"] = 32] = "SPACE";
     CompatibleKeys[CompatibleKeys["PAGEUP"] = 33] = "PAGEUP";
+    CompatibleKeys[CompatibleKeys["END"] = 35] = "END";
+    CompatibleKeys[CompatibleKeys["HOME"] = 36] = "HOME";
     CompatibleKeys[CompatibleKeys["LEFT"] = 37] = "LEFT";
     CompatibleKeys[CompatibleKeys["UP"] = 38] = "UP";
     CompatibleKeys[CompatibleKeys["RIGHT"] = 39] = "RIGHT";