roosterjs 8.36.0 → 8.37.0

package/dist/rooster-amd.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 8.36.0)
+// Type definitions for roosterjs (Version 8.37.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -1236,8 +1236,9 @@ export class VListChain {
  * If the child inline elements have different styles, it will not modify the styles of the list item
  * @param element the LI Element to set the styles
  * @param styles The styles that should be applied to the element.
+ * @param isCssStyle True means the given styles are CSS style names, false means they are HTML attributes @default true
  */
-export function setListItemStyle(element: HTMLLIElement, styles: string[]): void;
+export function setListItemStyle(element: HTMLLIElement, styles: string[], isCssStyle?: boolean): void;
 
 /**
  * Get the format info of a table
@@ -1656,6 +1657,35 @@ export function getEntityFromElement(element: HTMLElement): Entity | null;
  */
 export function getEntitySelector(type?: string, id?: string): string;
 
+/**
+ * Create a placeholder comment node for entity
+ * @param entity The entity to create placeholder from
+ * @returns A placeholder comment node as
+ */
+export function createEntityPlaceholder(entity: Entity): HTMLElement;
+
+/**
+ * Move content from a container into a new Document fragment, and try keep entities to be reusable by creating placeholder
+ * for them in the document fragment.
+ * If an entity is directly under root container, the whole entity can be reused and no need to move it at all.
+ * If an entity is not directly under root container, it is still reusable, but it may need some movement.
+ * In any case, entities will be replaced with a placeholder in the target document fragment.
+ * We will use an entity map (the "entities" parameter) to save the map from entity id to its wrapper element.
+ * @param root The root element
+ * @param entities A map from entity id to entity wrapper element
+ * @returns A new document fragment contains all the content and entity placeholders
+ */
+export function moveContentWithEntityPlaceholders(root: HTMLDivElement, entities: Record<string, HTMLElement>): DocumentFragment;
+
+/**
+ * Restore HTML content from a document fragment that may contain entity placeholders.
+ * @param source Source document fragment that contains HTML content and entity placeholders
+ * @param target Target container, usually to be editor root container
+ * @param entities A map from entity id to entity wrapper, used for reusing existing DOM structure for entity
+ * @param insertClonedNode When pass true, merge with a cloned copy of the nodes from source fragment rather than the nodes themselves @default false
+ */
+export function restoreContentWithEntityPlaceholder(source: DocumentFragment, target: HTMLElement, entities: Record<string, HTMLElement> | null, insertClonedNode?: boolean): void;
+
 /**
  * Gets the cached event data by cache key from event object if there is already one.
  * Otherwise, call getter function to create one, and cache it.
@@ -2868,6 +2898,10 @@ export interface LifecyclePluginState {
      * Cached document fragment for original content
      */
     shadowEditFragment: DocumentFragment | null;
+    /**
+     * Cached entity pairs for original content
+     */
+    shadowEditEntities: Record<string, HTMLElement> | null;
     /**
      * Cached selection path for original content
      */

package/dist/rooster-amd.js

@@ -6228,7 +6228,7 @@ 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, shadowEditImageSelectionPath = lifecycle.shadowEditImageSelectionPath;
+    var shadowEditEntities = lifecycle.shadowEditEntities, 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 &&
@@ -6243,10 +6243,9 @@ var switchShadowEdit = function (core, isOn) {
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             shadowEditSelectionPath = range && (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range);
             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();
+            shadowEditEntities = {};
+            shadowEditFragment = (0, roosterjs_editor_dom_1.moveContentWithEntityPlaceholders)(contentDiv, shadowEditEntities);
             core.api.triggerEvent(core, {
                 eventType: 17 /* EnteredShadowEdit */,
                 fragment: shadowEditFragment,
@@ -6256,22 +6255,22 @@ var switchShadowEdit = function (core, isOn) {
             lifecycle.shadowEditSelectionPath = shadowEditSelectionPath;
             lifecycle.shadowEditTableSelectionPath = shadowEditTableSelectionPath;
             lifecycle.shadowEditImageSelectionPath = shadowEditImageSelectionPath;
+            lifecycle.shadowEditEntities = shadowEditEntities;
         }
-        (0, roosterjs_editor_dom_1.moveChildNodes)(contentDiv);
         if (lifecycle.shadowEditFragment) {
-            contentDiv.appendChild(lifecycle.shadowEditFragment.cloneNode(true /*deep*/));
+            (0, roosterjs_editor_dom_1.restoreContentWithEntityPlaceholder)(lifecycle.shadowEditFragment, contentDiv, lifecycle.shadowEditEntities, true /*insertClonedNode*/);
         }
     }
     else {
         lifecycle.shadowEditFragment = null;
         lifecycle.shadowEditSelectionPath = null;
+        lifecycle.shadowEditEntities = null;
         if (wasInShadowEdit) {
             core.api.triggerEvent(core, {
                 eventType: 18 /* LeavingShadowEdit */,
             }, false /*broadcast*/);
-            (0, roosterjs_editor_dom_1.moveChildNodes)(contentDiv);
             if (shadowEditFragment) {
-                contentDiv.appendChild(shadowEditFragment);
+                (0, roosterjs_editor_dom_1.restoreContentWithEntityPlaceholder)(shadowEditFragment, contentDiv, shadowEditEntities);
             }
             core.api.focus(core);
             if (shadowEditSelectionPath) {
@@ -7633,6 +7632,7 @@ var LifecyclePlugin = /** @class */ (function () {
             onExternalContentTransform: (_c = options.onExternalContentTransform) !== null && _c !== void 0 ? _c : null,
             experimentalFeatures: options.experimentalFeatures || [],
             shadowEditFragment: null,
+            shadowEditEntities: null,
             shadowEditSelectionPath: null,
             shadowEditTableSelectionPath: null,
             shadowEditImageSelectionPath: null,
@@ -11274,6 +11274,143 @@ function commitEntity(wrapper, type, isReadonly, id) {
 exports.default = commitEntity;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/entity/entityPlaceholderUtils.ts":
+/*!****************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/entity/entityPlaceholderUtils.ts ***!
+  \****************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.restoreContentWithEntityPlaceholder = exports.moveContentWithEntityPlaceholders = exports.createEntityPlaceholder = void 0;
+var getEntityFromElement_1 = __webpack_require__(/*! ./getEntityFromElement */ "./packages/roosterjs-editor-dom/lib/entity/getEntityFromElement.ts");
+var getEntitySelector_1 = __webpack_require__(/*! ./getEntitySelector */ "./packages/roosterjs-editor-dom/lib/entity/getEntitySelector.ts");
+var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
+var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+var EntityPlaceHolderTagName = 'ENTITY-PLACEHOLDER';
+/**
+ * Create a placeholder comment node for entity
+ * @param entity The entity to create placeholder from
+ * @returns A placeholder comment node as
+ */
+function createEntityPlaceholder(entity) {
+    var placeholder = entity.wrapper.ownerDocument.createElement(EntityPlaceHolderTagName);
+    placeholder.id = entity.id;
+    return placeholder;
+}
+exports.createEntityPlaceholder = createEntityPlaceholder;
+/**
+ * Move content from a container into a new Document fragment, and try keep entities to be reusable by creating placeholder
+ * for them in the document fragment.
+ * If an entity is directly under root container, the whole entity can be reused and no need to move it at all.
+ * If an entity is not directly under root container, it is still reusable, but it may need some movement.
+ * In any case, entities will be replaced with a placeholder in the target document fragment.
+ * We will use an entity map (the "entities" parameter) to save the map from entity id to its wrapper element.
+ * @param root The root element
+ * @param entities A map from entity id to entity wrapper element
+ * @returns A new document fragment contains all the content and entity placeholders
+ */
+function moveContentWithEntityPlaceholders(root, entities) {
+    var entitySelector = (0, getEntitySelector_1.default)();
+    var fragment = root.ownerDocument.createDocumentFragment();
+    var next = null;
+    var _loop_1 = function (child) {
+        var entity;
+        var nodeToAppend = child;
+        next = child.nextSibling;
+        if ((0, safeInstanceOf_1.default)(child, 'HTMLElement')) {
+            if ((entity = (0, getEntityFromElement_1.default)(child))) {
+                nodeToAppend = getPlaceholder(entity, entities);
+            }
+            else {
+                child.querySelectorAll(entitySelector).forEach(function (wrapper) {
+                    var _a;
+                    if ((entity = (0, getEntityFromElement_1.default)(wrapper))) {
+                        var placeholder = getPlaceholder(entity, entities);
+                        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(placeholder, wrapper);
+                    }
+                });
+            }
+        }
+        fragment.appendChild(nodeToAppend);
+    };
+    for (var child = root.firstChild; child; child = next) {
+        _loop_1(child);
+    }
+    fragment.normalize();
+    return fragment;
+}
+exports.moveContentWithEntityPlaceholders = moveContentWithEntityPlaceholders;
+/**
+ * Restore HTML content from a document fragment that may contain entity placeholders.
+ * @param source Source document fragment that contains HTML content and entity placeholders
+ * @param target Target container, usually to be editor root container
+ * @param entities A map from entity id to entity wrapper, used for reusing existing DOM structure for entity
+ * @param insertClonedNode When pass true, merge with a cloned copy of the nodes from source fragment rather than the nodes themselves @default false
+ */
+function restoreContentWithEntityPlaceholder(source, target, entities, insertClonedNode) {
+    var anchor = target.firstChild;
+    entities = entities || {};
+    var _loop_2 = function (current) {
+        var wrapper = null;
+        var next = current.nextSibling;
+        var id = tryGetIdFromEntityPlaceholder(current);
+        if (id && (wrapper = entities[current.id])) {
+            anchor = removeUntil(anchor, wrapper);
+            if (anchor) {
+                anchor = anchor.nextSibling;
+            }
+            else {
+                target.appendChild(wrapper);
+            }
+        }
+        else {
+            var nodeToInsert = insertClonedNode ? current.cloneNode(true /*deep*/) : current;
+            target.insertBefore(nodeToInsert, anchor);
+            if ((0, safeInstanceOf_1.default)(nodeToInsert, 'HTMLElement')) {
+                nodeToInsert.querySelectorAll(EntityPlaceHolderTagName).forEach(function (placeholder) {
+                    var _a;
+                    wrapper = entities[placeholder.id];
+                    if (wrapper) {
+                        (_a = placeholder.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(wrapper, placeholder);
+                    }
+                });
+            }
+        }
+        current = next;
+        out_current_1 = current;
+    };
+    var out_current_1;
+    for (var current = source.firstChild; current;) {
+        _loop_2(current);
+        current = out_current_1;
+    }
+    removeUntil(anchor);
+}
+exports.restoreContentWithEntityPlaceholder = restoreContentWithEntityPlaceholder;
+function removeUntil(anchor, nodeToStop) {
+    var _a;
+    while (anchor && (!nodeToStop || anchor != nodeToStop)) {
+        var nodeToRemove = anchor;
+        anchor = anchor.nextSibling;
+        (_a = nodeToRemove.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(nodeToRemove);
+    }
+    return anchor;
+}
+function tryGetIdFromEntityPlaceholder(node) {
+    return (0, getTagOfNode_1.default)(node) == EntityPlaceHolderTagName ? node.id : null;
+}
+function getPlaceholder(entity, entities) {
+    var placeholder = createEntityPlaceholder(entity);
+    entities[entity.id] = entity.wrapper;
+    return placeholder;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/entity/getEntityFromElement.ts":
@@ -12325,8 +12462,8 @@ exports.isCssVariable = isCssVariable;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 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.setGlobalCssStyles = exports.removeImportantStyleRule = 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 = exports.isNodeAfter = 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 = exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.removeGlobalCssStyle = void 0;
+exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = exports.cacheGetEventData = exports.restoreContentWithEntityPlaceholder = exports.moveContentWithEntityPlaceholders = exports.createEntityPlaceholder = 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 = exports.isNodeAfter = 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 = exports.getTextContent = exports.deleteSelectedContent = exports.adjustInsertPosition = exports.removeGlobalCssStyle = exports.setGlobalCssStyles = exports.removeImportantStyleRule = exports.setStyles = 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");
@@ -12498,6 +12635,10 @@ var getEntityFromElement_1 = __webpack_require__(/*! ./entity/getEntityFromEleme
 Object.defineProperty(exports, "getEntityFromElement", { enumerable: true, get: function () { return getEntityFromElement_1.default; } });
 var getEntitySelector_1 = __webpack_require__(/*! ./entity/getEntitySelector */ "./packages/roosterjs-editor-dom/lib/entity/getEntitySelector.ts");
 Object.defineProperty(exports, "getEntitySelector", { enumerable: true, get: function () { return getEntitySelector_1.default; } });
+var entityPlaceholderUtils_1 = __webpack_require__(/*! ./entity/entityPlaceholderUtils */ "./packages/roosterjs-editor-dom/lib/entity/entityPlaceholderUtils.ts");
+Object.defineProperty(exports, "createEntityPlaceholder", { enumerable: true, get: function () { return entityPlaceholderUtils_1.createEntityPlaceholder; } });
+Object.defineProperty(exports, "moveContentWithEntityPlaceholders", { enumerable: true, get: function () { return entityPlaceholderUtils_1.moveContentWithEntityPlaceholders; } });
+Object.defineProperty(exports, "restoreContentWithEntityPlaceholder", { enumerable: true, get: function () { return entityPlaceholderUtils_1.restoreContentWithEntityPlaceholder; } });
 var cacheGetEventData_1 = __webpack_require__(/*! ./event/cacheGetEventData */ "./packages/roosterjs-editor-dom/lib/event/cacheGetEventData.ts");
 Object.defineProperty(exports, "cacheGetEventData", { enumerable: true, get: function () { return cacheGetEventData_1.default; } });
 var clearEventDataCache_1 = __webpack_require__(/*! ./event/clearEventDataCache */ "./packages/roosterjs-editor-dom/lib/event/clearEventDataCache.ts");
@@ -13920,6 +14061,8 @@ var orderListStyles = [null, 'lower-alpha', 'lower-roman'];
 var unorderedListStyles = ['disc', 'circle', 'square'];
 var MARGIN_BASE = '0in 0in 0in 0.5in';
 var NEGATIVE_MARGIN = '-.25in';
+var stylesToInherit = ['font-size', 'font-family', 'color'];
+var attrsToInherit = ['data-ogsc', 'data-ogsb', 'data-ogac', 'data-ogab'];
 /**
  * @internal
  * The definition for the number of BulletListType or NumberingListType
@@ -14118,6 +14261,7 @@ var VListItem = /** @class */ (function () {
      *              sure the direct parent of this list matches the list types when writing back.
      */
     VListItem.prototype.writeBack = function (listStack, originalRoot, shouldReuseAllAncestorListElements) {
+        var _this = this;
         var _a;
         if (shouldReuseAllAncestorListElements === void 0) { shouldReuseAllAncestorListElements = false; }
         var nextLevel = 1;
@@ -14176,8 +14320,8 @@ var VListItem = /** @class */ (function () {
         this.node.style.setProperty('display', this.dummy ? 'block' : null);
         // 4. Inherit styles of the child element to the li, so we are able to apply the styles to the ::marker
         if (this.listTypes.length > 1) {
-            var stylesToInherit = ['font-size', 'font-family', 'color'];
-            (0, setListItemStyle_1.default)(this.node, stylesToInherit);
+            (0, setListItemStyle_1.default)(this.node, stylesToInherit, true /*isCssStyle*/);
+            (0, setListItemStyle_1.default)(this.node, attrsToInherit, false /*isCssStyle*/);
         }
         // 5. If this is not a list item now, need to unwrap the LI node and do proper handling
         if (this.listTypes.length <= 1) {
@@ -14192,7 +14336,7 @@ var VListItem = /** @class */ (function () {
                 : undefined;
             var childNodes = isLi ? getChildrenAndUnwrap(this.node) : [this.node];
             if (stylesToApply) {
-                for (var i = 0; i < childNodes.length; i++) {
+                var _loop_1 = function (i) {
                     if ((0, safeInstanceOf_1.default)(childNodes[i], 'Text')) {
                         childNodes[i] = (0, wrap_1.default)(childNodes[i], 'span');
                     }
@@ -14200,7 +14344,16 @@ var VListItem = /** @class */ (function () {
                     if ((0, safeInstanceOf_1.default)(node, 'HTMLElement')) {
                         var styles = __assign(__assign({}, stylesToApply), (0, getStyles_1.default)(node));
                         (0, setStyles_1.default)(node, styles);
+                        attrsToInherit.forEach(function (attr) {
+                            var attrValue = _this.node.getAttribute(attr);
+                            if (attrValue) {
+                                node.setAttribute(attr, attrValue);
+                            }
+                        });
                     }
+                };
+                for (var i = 0; i < childNodes.length; i++) {
+                    _loop_1(i);
                 }
             }
             wrapIfNotBlockNode(childNodes, true /*checkFirst*/, true /*checkLast*/);
@@ -14650,18 +14803,17 @@ var bulletListStyle = (_a = {},
 Object.defineProperty(exports, "__esModule", { value: true });
 var ContentTraverser_1 = __webpack_require__(/*! ../contentTraverser/ContentTraverser */ "./packages/roosterjs-editor-dom/lib/contentTraverser/ContentTraverser.ts");
 var findClosestElementAncestor_1 = __webpack_require__(/*! ../utils/findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
-var getStyles_1 = __webpack_require__(/*! ../style/getStyles */ "./packages/roosterjs-editor-dom/lib/style/getStyles.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
-var setStyles_1 = __webpack_require__(/*! ../style/setStyles */ "./packages/roosterjs-editor-dom/lib/style/setStyles.ts");
 /**
  * Set the Style of a List Item provided, with the styles that the inline child elements have
  * If the child inline elements have different styles, it will not modify the styles of the list item
  * @param element the LI Element to set the styles
  * @param styles The styles that should be applied to the element.
+ * @param isCssStyle True means the given styles are CSS style names, false means they are HTML attributes @default true
  */
-function setListItemStyle(element, styles) {
-    var elementsStyles = getInlineChildElementsStyle(element, styles);
-    var stylesToApply = (0, getStyles_1.default)(element);
+function setListItemStyle(element, styles, isCssStyle) {
+    if (isCssStyle === void 0) { isCssStyle = true; }
+    var elementsStyles = getInlineChildElementsStyle(element, styles, isCssStyle);
     styles.forEach(function (styleName) {
         var styleValues = elementsStyles.map(function (style) {
             return style[styleName] !== undefined ? style[styleName] : '';
@@ -14669,13 +14821,17 @@ function setListItemStyle(element, styles) {
         if (styleValues &&
             (styleValues.length == 1 || new Set(styleValues).size == 1) &&
             styleValues[0]) {
-            stylesToApply[styleName] = styleValues[0];
+            if (isCssStyle) {
+                element.style.setProperty(styleName, styleValues[0]);
+            }
+            else {
+                element.setAttribute(styleName, styleValues[0]);
+            }
         }
     });
-    (0, setStyles_1.default)(element, stylesToApply);
 }
 exports.default = setListItemStyle;
-function getInlineChildElementsStyle(element, styles) {
+function getInlineChildElementsStyle(element, styles, isCssStyle) {
     var _a, _b;
     var result = [];
     var contentTraverser = ContentTraverser_1.default.createBodyTraverser(element);
@@ -14685,14 +14841,12 @@ function getInlineChildElementsStyle(element, styles) {
         var currentNode = (currentInlineElement === null || currentInlineElement === void 0 ? void 0 : currentInlineElement.getContainerNode()) || null;
         var currentStyle = null;
         currentNode = currentNode ? (0, findClosestElementAncestor_1.default)(currentNode) : null;
-        // we should consider of when it is the single child node of element, the parentNode's style should add
-        // such as the "i", "b", "span" node in <li><span><b><i>aa</i></b></span></li>
-        while (currentNode &&
-            currentNode !== element &&
-            (0, safeInstanceOf_1.default)(currentNode, 'HTMLElement') &&
-            (result.length == 0 || (((_a = currentNode.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) || 0) > 0)) {
+        var _loop_2 = function () {
+            var element_1 = currentNode;
             styles.forEach(function (styleName) {
-                var styleValue = currentNode.style.getPropertyValue(styleName);
+                var styleValue = isCssStyle
+                    ? element_1.style.getPropertyValue(styleName)
+                    : element_1.getAttribute(styleName);
                 if (!currentStyle) {
                     currentStyle = {};
                 }
@@ -14706,6 +14860,14 @@ function getInlineChildElementsStyle(element, styles) {
             else {
                 currentNode = null;
             }
+        };
+        // we should consider of when it is the single child node of element, the parentNode's style should add
+        // such as the "i", "b", "span" node in <li><span><b><i>aa</i></b></span></li>
+        while (currentNode &&
+            currentNode !== element &&
+            (0, safeInstanceOf_1.default)(currentNode, 'HTMLElement') &&
+            (result.length == 0 || (((_a = currentNode.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) || 0) > 0)) {
+            _loop_2();
         }
         if (currentStyle) {
             result.push(currentStyle);
@@ -20736,10 +20898,10 @@ var AutoNumberingList = {
     },
 };
 var getPreviousListItem = function (editor, textRange) {
-    var _a;
-    var previousNode = (_a = editor
+    var blockElement = editor
         .getBodyTraverser(textRange === null || textRange === void 0 ? void 0 : textRange.startContainer)
-        .getPreviousBlockElement()) === null || _a === void 0 ? void 0 : _a.collapseToSingleElement();
+        .getPreviousBlockElement();
+    var previousNode = blockElement === null || blockElement === void 0 ? void 0 : blockElement.getEndNode();
     return (0, roosterjs_editor_dom_1.getTagOfNode)(previousNode) === 'LI' ? previousNode : undefined;
 };
 var getPreviousListType = function (editor, textRange, listType) {
@@ -21859,10 +22021,24 @@ function getAutoNumberingListStyle(textBeforeCursor, previousListChain, previous
         }
     }
     var isDoubleParenthesis = trigger[0] === '(' && trigger[trigger.length - 1] === ')';
-    var numberingType = identifyNumberingListType(trigger, isDoubleParenthesis, previousListStyle);
+    var numberingType = isValidNumbering(trigger, isDoubleParenthesis)
+        ? identifyNumberingListType(trigger, isDoubleParenthesis, previousListStyle)
+        : null;
     return numberingType;
 }
 exports.default = getAutoNumberingListStyle;
+/**
+ * Check if index has only numbers or only letters to avoid sequence of character such 1:1. trigger a list.
+ * @param textBeforeCursor
+ * @param isDoubleParenthesis
+ * @returns
+ */
+function isValidNumbering(textBeforeCursor, isDoubleParenthesis) {
+    var index = isDoubleParenthesis
+        ? textBeforeCursor.slice(1, -1)
+        : textBeforeCursor.slice(0, -1);
+    return Number(index) || /^[A-Za-z\s]*$/.test(index);
+}
 
 
 /***/ }),