roosterjs 8.9.0 → 8.10.0

package/dist/rooster.js

@@ -3106,7 +3106,7 @@ exports.default = setDirection;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 /**
  * Set font name at selection
  * @param editor The editor instance
@@ -3114,11 +3114,9 @@ var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ ".
  * Currently there's no validation to the string, if the passed string is invalid, it won't take affect
  */
 function setFontName(editor, fontName) {
-    fontName = fontName.trim();
     // The browser provided execCommand creates a HTML <font> tag with face attribute. <font> is not HTML5 standard
-    // (http://www.w3schools.com/tags/tag_font.asp). Use applyInlineStyle which gives flexibility on applying inline style
-    // for here, we use CSS font-family style
-    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+    // (http://www.w3schools.com/tags/tag_font.asp).
+    applyListItemWrap_1.default(editor, 'font-family', function (element, isInnerNode) {
         element.style.fontFamily = isInnerNode ? '' : fontName;
     });
 }
@@ -3137,7 +3135,7 @@ exports.default = setFontName;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set font size at selection
@@ -3146,11 +3144,9 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * Currently there's no validation to the string, if the passed string is invalid, it won't take affect
  */
 function setFontSize(editor, fontSize) {
-    fontSize = fontSize.trim();
     // The browser provided execCommand only accepts 1-7 point value. In addition, it uses HTML <font> tag with size attribute.
-    // <font> is not HTML5 standard (http://www.w3schools.com/tags/tag_font.asp). Use applyInlineStyle which gives flexibility on applying inline style
-    // for here, we use CSS font-size style
-    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+    // <font> is not HTML5 standard (http://www.w3schools.com/tags/tag_font.asp).
+    applyListItemWrap_1.default(editor, 'font-size', function (element, isInnerNode) {
         element.style.fontSize = isInnerNode ? '' : fontSize;
         var lineHeight = roosterjs_editor_dom_1.getComputedStyle(element, 'line-height');
         if (lineHeight != 'normal') {
@@ -3310,7 +3306,7 @@ exports.default = setOrderedListNumbering;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var applyListItemWrap_1 = __webpack_require__(/*! ../utils/applyListItemWrap */ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set text color at selection
@@ -3324,7 +3320,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * @param shouldApplyInlineStyle Optional callback function to be invoked to verify if the current element should have the inline Style applied
  */
 function setTextColor(editor, color, shouldApplyInlineStyle) {
-    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+    applyListItemWrap_1.default(editor, 'color', function (element, isInnerNode) {
         if (!shouldApplyInlineStyle || shouldApplyInlineStyle(element)) {
             roosterjs_editor_dom_1.setColor(element, isInnerNode ? '' : color, false /*isBackground*/, editor.isDarkMode());
         }
@@ -4012,6 +4008,54 @@ function applyInlineStyle(editor, callback) {
 exports.default = applyInlineStyle;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts":
+/*!**********************************************************************!*\
+  !*** ./packages/roosterjs-editor-api/lib/utils/applyListItemWrap.ts ***!
+  \**********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var applyInlineStyle_1 = __webpack_require__(/*! ../utils/applyInlineStyle */ "./packages/roosterjs-editor-api/lib/utils/applyInlineStyle.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+/**
+ * @internal
+ * Set the List Item Style when all inner inline element have the same style
+ * @param editor The editor instance
+ * @param styleName Name of the style to apply to the list item
+ * @param formatCallback callback to apply the style to each element
+ */
+function applyListItemStyleWrap(editor, styleName, formatCallback) {
+    var parentNodes = [];
+    applyInlineStyle_1.default(editor, function (element, isInnerNode) {
+        formatCallback(element, isInnerNode);
+        var parent = editor.getElementAtCursor('LI', element);
+        if (parent && parentNodes.indexOf(parent) === -1) {
+            parentNodes.push(parent);
+        }
+    });
+    applyStyleToListItems(parentNodes, [styleName]);
+}
+exports.default = applyListItemStyleWrap;
+/**
+ * @internal
+ * Checks if the parent element is a List Item, if it is, apply the style elements to the list item
+ * @param parentNodes parentNodes to apply the style
+ * @param styles styles to apply to the List Item Element
+ */
+function applyStyleToListItems(parentNodes, styles) {
+    parentNodes.forEach(function (node) {
+        if (roosterjs_editor_dom_1.safeInstanceOf(node, 'HTMLLIElement')) {
+            roosterjs_editor_dom_1.setListItemStyle(node, styles);
+        }
+    });
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-api/lib/utils/blockFormat.ts":
@@ -5872,6 +5916,12 @@ var ALLOWED_CSS_CLASSES = [
     ENTITY_TYPE_CSS_REGEX,
     ENTITY_READONLY_CSS_REGEX,
 ];
+var REMOVE_ENTITY_OPERATIONS = [
+    6 /* Overwrite */,
+    7 /* PartialOverwrite */,
+    4 /* RemoveFromStart */,
+    5 /* RemoveFromEnd */,
+];
 /**
  * @internal
  * Entity Plugin helps handle all operations related to an entity and generate entity specified events
@@ -5888,9 +5938,28 @@ var EntityPlugin = /** @class */ (function () {
                 _this.checkRemoveEntityForRange(event);
             }
         };
+        this.workaroundShadowDOMIssueForChrome = function () {
+            var cache = {};
+            _this.cacheShadowEntities(cache);
+            _this.editor.runAsync(function () {
+                Object.keys(cache).forEach(function (id) {
+                    var entity = roosterjs_editor_dom_1.getEntityFromElement(cache[id]);
+                    var newWrapper = _this.editor.queryElements(roosterjs_editor_dom_1.getEntitySelector(entity.type, entity.id))[0];
+                    if (newWrapper != entity.wrapper) {
+                        _this.triggerEvent(entity.wrapper, 10 /* RemoveShadowRoot */);
+                        _this.setIsEntityKnown(entity.wrapper, false /*isKnown*/);
+                        if (newWrapper) {
+                            roosterjs_editor_dom_1.moveChildNodes(newWrapper, entity.wrapper);
+                            _this.createShadowRoot(newWrapper, entity.wrapper.shadowRoot);
+                            _this.setIsEntityKnown(newWrapper, true /*isKnown*/);
+                        }
+                    }
+                });
+            });
+        };
         this.state = {
-            clickingPoint: null,
             knownEntityElements: [],
+            shadowEntityCache: {},
         };
     }
     /**
@@ -5905,6 +5974,27 @@ var EntityPlugin = /** @class */ (function () {
      */
     EntityPlugin.prototype.initialize = function (editor) {
         this.editor = editor;
+        // Workaround an issue for Chrome that when Delete or Backsapce, shadow DOM may be lost in editor
+        if (roosterjs_editor_dom_1.Browser.isChrome || roosterjs_editor_dom_1.Browser.isSafari) {
+            this.editor.addContentEditFeature({
+                keys: [8 /* BACKSPACE */, 46 /* DELETE */],
+                shouldHandleEvent: function () { return true; },
+                handleEvent: this.workaroundShadowDOMIssueForChrome,
+            });
+        }
+    };
+    /**
+     * Check if the plugin should handle the given event exclusively.
+     * Handle an event exclusively means other plugin will not receive this event in
+     * onPluginEvent method.
+     * If two plugins will return true in willHandleEventExclusively() for the same event,
+     * the final result depends on the order of the plugins are added into editor
+     * @param event The event to check
+     */
+    EntityPlugin.prototype.willHandleEventExclusively = function (event) {
+        var _a;
+        return (event.eventType == 1 /* KeyPress */ &&
+            !!((_a = event.rawEvent.target) === null || _a === void 0 ? void 0 : _a.shadowRoot));
     };
     /**
      * Dispose this plugin
@@ -5912,7 +6002,6 @@ var EntityPlugin = /** @class */ (function () {
     EntityPlugin.prototype.dispose = function () {
         this.editor = null;
         this.state.knownEntityElements = [];
-        this.state.clickingPoint = null;
     };
     /**
      * Get plugin state object
@@ -5926,11 +6015,8 @@ var EntityPlugin = /** @class */ (function () {
      */
     EntityPlugin.prototype.onPluginEvent = function (event) {
         switch (event.eventType) {
-            case 5 /* MouseDown */:
-                this.handleMouseDownEvent(event.rawEvent);
-                break;
             case 6 /* MouseUp */:
-                this.handleMouseUpEvent(event.rawEvent);
+                this.handleMouseUpEvent(event);
                 break;
             case 0 /* KeyDown */:
                 this.handleKeyDownEvent(event.rawEvent);
@@ -5941,13 +6027,13 @@ var EntityPlugin = /** @class */ (function () {
                 }
                 break;
             case 10 /* BeforePaste */:
-                this.handleBeforePasteEvent(event.fragment, event.sanitizingOption);
+                this.handleBeforePasteEvent(event.sanitizingOption);
                 break;
             case 7 /* ContentChanged */:
-                this.handleContentChangedEvent(event.source == "SetContent" /* SetContent */);
+                this.handleContentChangedEvent(event);
                 break;
             case 11 /* EditorReady */:
-                this.handleContentChangedEvent(true /*resetAll*/);
+                this.handleContentChangedEvent();
                 break;
             case 8 /* ExtractContentWithDom */:
                 this.handleExtractContentWithDomEvent(event.clonedRoot);
@@ -5955,6 +6041,12 @@ var EntityPlugin = /** @class */ (function () {
             case 16 /* ContextMenu */:
                 this.handleContextMenuEvent(event.rawEvent);
                 break;
+            case 20 /* BeforeSetContent */:
+                this.handleBeforeSetContentEvent();
+                break;
+            case 15 /* EntityOperation */:
+                this.handleEntityOperationEvent(event);
+                break;
         }
     };
     EntityPlugin.prototype.handleContextMenuEvent = function (event) {
@@ -5965,63 +6057,83 @@ var EntityPlugin = /** @class */ (function () {
             this.triggerEvent(entityElement, 2 /* ContextMenu */, event);
         }
     };
-    EntityPlugin.prototype.handleMouseDownEvent = function (event) {
-        var target = event.target, pageX = event.pageX, pageY = event.pageY;
-        var node = target;
-        var entityElement = node && this.editor.getElementAtCursor(roosterjs_editor_dom_1.getEntitySelector(), node);
-        if (entityElement && !entityElement.isContentEditable) {
-            event.preventDefault();
-            this.state.clickingPoint = { pageX: pageX, pageY: pageY };
-        }
-    };
     EntityPlugin.prototype.handleMouseUpEvent = function (event) {
-        var target = event.target, pageX = event.pageX, pageY = event.pageY;
-        var node = target;
+        var rawEvent = event.rawEvent, isClicking = event.isClicking;
+        var node = rawEvent.target;
         var entityElement;
-        if (this.state.clickingPoint &&
-            this.state.clickingPoint.pageX == pageX &&
-            this.state.clickingPoint.pageY == pageY &&
+        if (isClicking &&
             node &&
             !!(entityElement = this.editor.getElementAtCursor(roosterjs_editor_dom_1.getEntitySelector(), node))) {
-            event.preventDefault();
-            this.triggerEvent(entityElement, 1 /* Click */, event);
+            this.triggerEvent(entityElement, 1 /* Click */, rawEvent);
             workaroundSelectionIssueForIE(this.editor);
         }
-        this.state.clickingPoint = null;
     };
     EntityPlugin.prototype.handleKeyDownEvent = function (event) {
         if (roosterjs_editor_dom_1.isCharacterValue(event) ||
             event.which == 8 /* BACKSPACE */ ||
-            event.which == 46 /* DELETE */) {
+            event.which == 46 /* DELETE */ ||
+            event.which == 13 /* ENTER */) {
             var range = this.editor.getSelectionRange();
             if (range && !range.collapsed) {
                 this.checkRemoveEntityForRange(event);
             }
         }
     };
-    EntityPlugin.prototype.handleBeforePasteEvent = function (fragment, sanitizingOption) {
+    EntityPlugin.prototype.handleBeforePasteEvent = function (sanitizingOption) {
         var range = this.editor.getSelectionRange();
         if (!range.collapsed) {
             this.checkRemoveEntityForRange(null /*rawEvent*/);
         }
         roosterjs_editor_dom_1.arrayPush(sanitizingOption.additionalAllowedCssClasses, ALLOWED_CSS_CLASSES);
     };
-    EntityPlugin.prototype.handleContentChangedEvent = function (resetAll) {
+    EntityPlugin.prototype.handleBeforeSetContentEvent = function () {
+        this.cacheShadowEntities(this.state.shadowEntityCache);
+    };
+    EntityPlugin.prototype.handleContentChangedEvent = function (event) {
         var _this = this;
-        this.state.knownEntityElements = resetAll
-            ? []
-            : this.state.knownEntityElements.filter(function (node) { return _this.editor.contains(node); });
-        var allId = this.state.knownEntityElements
+        // 1. find removed entities
+        for (var i = this.state.knownEntityElements.length - 1; i >= 0; i--) {
+            var element = this.state.knownEntityElements[i];
+            if (!this.editor.contains(element)) {
+                this.setIsEntityKnown(element, false /*isKnown*/);
+                if (element.shadowRoot) {
+                    this.triggerEvent(element, 10 /* RemoveShadowRoot */);
+                }
+            }
+        }
+        // 2. collect all new entities
+        var knownIds = this.state.knownEntityElements
             .map(function (e) { var _a; return (_a = roosterjs_editor_dom_1.getEntityFromElement(e)) === null || _a === void 0 ? void 0 : _a.id; })
             .filter(function (x) { return !!x; });
-        this.editor.queryElements(roosterjs_editor_dom_1.getEntitySelector(), function (element) {
-            if (_this.state.knownEntityElements.indexOf(element) < 0) {
-                _this.state.knownEntityElements.push(element);
-                var entity = roosterjs_editor_dom_1.getEntityFromElement(element);
-                _this.hydrateEntity(entity, allId);
-            }
+        var newEntities = (event === null || event === void 0 ? void 0 : event.source) == "InsertEntity" /* InsertEntity */ && event.data
+            ? [event.data]
+            : this.getExistingEntities().filter(function (_a) {
+                var wrapper = _a.wrapper;
+                return !_this.isEntityKnown(wrapper);
+            });
+        // 3. Add new entities to known entity list, and hydrate
+        newEntities.forEach(function (entity) {
+            var wrapper = entity.wrapper, type = entity.type, id = entity.id, isReadonly = entity.isReadonly;
+            entity.id = _this.ensureUniqueId(type, id, knownIds);
+            roosterjs_editor_dom_1.commitEntity(wrapper, type, isReadonly, entity.id); // Use entity.id here because it is newly updated
+            _this.handleNewEntity(entity);
+        });
+        Object.keys(this.state.shadowEntityCache).forEach(function (id) {
+            _this.triggerEvent(_this.state.shadowEntityCache[id], 6 /* Overwrite */);
+            delete _this.state.shadowEntityCache[id];
         });
     };
+    EntityPlugin.prototype.handleEntityOperationEvent = function (event) {
+        var _this = this;
+        var _a;
+        if (REMOVE_ENTITY_OPERATIONS.indexOf(event.operation) >= 0) {
+            (_a = this.cancelAsyncRun) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.cancelAsyncRun = this.editor.runAsync(function () {
+                _this.cancelAsyncRun = null;
+                _this.handleContentChangedEvent();
+            });
+        }
+    };
     EntityPlugin.prototype.handleExtractContentWithDomEvent = function (root) {
         var _this = this;
         roosterjs_editor_dom_1.toArray(root.querySelectorAll(roosterjs_editor_dom_1.getEntitySelector())).forEach(function (element) {
@@ -6051,8 +6163,71 @@ var EntityPlugin = /** @class */ (function () {
             });
         }
     };
-    EntityPlugin.prototype.hydrateEntity = function (entity, knownIds) {
-        var id = entity.id, type = entity.type, wrapper = entity.wrapper, isReadonly = entity.isReadonly;
+    EntityPlugin.prototype.triggerEvent = function (element, operation, rawEvent, contentForShadowEntity) {
+        var entity = element && roosterjs_editor_dom_1.getEntityFromElement(element);
+        if (entity) {
+            this.editor.triggerPluginEvent(15 /* EntityOperation */, {
+                operation: operation,
+                rawEvent: rawEvent,
+                entity: entity,
+                contentForShadowEntity: contentForShadowEntity,
+            });
+        }
+    };
+    EntityPlugin.prototype.handleNewEntity = function (entity) {
+        var wrapper = entity.wrapper;
+        var fragment = this.editor.getDocument().createDocumentFragment();
+        var cache = this.state.shadowEntityCache[entity.id];
+        delete this.state.shadowEntityCache[entity.id];
+        if (cache === null || cache === void 0 ? void 0 : cache.shadowRoot) {
+            roosterjs_editor_dom_1.moveChildNodes(fragment, cache.shadowRoot);
+        }
+        this.triggerEvent(wrapper, 0 /* NewEntity */, undefined /*rawEvent*/, fragment);
+        // If there is element to hydrate for shadow entity, craete shadow root and mount these elements to shadow root
+        // Then trigger AddShadowRoot so that plugins can do further actions
+        if (fragment.firstChild) {
+            if (wrapper.shadowRoot) {
+                roosterjs_editor_dom_1.moveChildNodes(wrapper.shadowRoot, fragment);
+            }
+            else {
+                this.createShadowRoot(wrapper, fragment);
+            }
+        }
+        else if (wrapper.shadowRoot) {
+            // If no elements to hydrate, remove existing shadow root by cloning a new node
+            this.triggerEvent(wrapper, 10 /* RemoveShadowRoot */);
+            var newWrapper = wrapper.cloneNode();
+            roosterjs_editor_dom_1.moveChildNodes(newWrapper, wrapper);
+            this.editor.replaceNode(wrapper, newWrapper);
+            entity.wrapper = newWrapper;
+        }
+        this.setIsEntityKnown(entity.wrapper, true /*isKnown*/);
+    };
+    EntityPlugin.prototype.getExistingEntities = function (shadowEntityOnly) {
+        return this.editor
+            .queryElements(roosterjs_editor_dom_1.getEntitySelector())
+            .map(roosterjs_editor_dom_1.getEntityFromElement)
+            .filter(function (x) { return !!x && (!shadowEntityOnly || !!x.wrapper.shadowRoot); });
+    };
+    EntityPlugin.prototype.createShadowRoot = function (wrapper, shadowContentContainer) {
+        if (wrapper.attachShadow) {
+            var shadowRoot = wrapper.attachShadow({
+                mode: 'open',
+                delegatesFocus: true,
+            });
+            wrapper.contentEditable = 'false';
+            this.triggerEvent(wrapper, 9 /* AddShadowRoot */);
+            roosterjs_editor_dom_1.moveChildNodes(shadowRoot, shadowContentContainer);
+            return shadowRoot;
+        }
+    };
+    EntityPlugin.prototype.cacheShadowEntities = function (cache) {
+        this.getExistingEntities(true /*shadowEntityOnly*/).forEach(function (_a) {
+            var wrapper = _a.wrapper, id = _a.id;
+            cache[id] = wrapper;
+        });
+    };
+    EntityPlugin.prototype.ensureUniqueId = function (type, id, knownIds) {
         var match = ENTITY_ID_REGEX.exec(id);
         var baseId = (match ? id.substr(0, id.length - match[0].length) : id) || type;
         // Make sure entity id is unique
@@ -6064,19 +6239,20 @@ var EntityPlugin = /** @class */ (function () {
                 break;
             }
         }
-        roosterjs_editor_dom_1.commitEntity(wrapper, type, isReadonly, newId);
-        this.triggerEvent(wrapper, 0 /* NewEntity */);
+        return newId;
     };
-    EntityPlugin.prototype.triggerEvent = function (element, operation, rawEvent) {
-        var entity = element && roosterjs_editor_dom_1.getEntityFromElement(element);
-        if (entity) {
-            this.editor.triggerPluginEvent(15 /* EntityOperation */, {
-                operation: operation,
-                rawEvent: rawEvent,
-                entity: entity,
-            });
+    EntityPlugin.prototype.setIsEntityKnown = function (wrapper, isKnown) {
+        var index = this.state.knownEntityElements.indexOf(wrapper);
+        if (isKnown && index < 0) {
+            this.state.knownEntityElements.push(wrapper);
+        }
+        else if (!isKnown && index >= 0) {
+            this.state.knownEntityElements.splice(index, 1);
         }
     };
+    EntityPlugin.prototype.isEntityKnown = function (wrapper) {
+        return this.state.knownEntityElements.indexOf(wrapper) >= 0;
+    };
     return EntityPlugin;
 }());
 exports.default = EntityPlugin;
@@ -6088,13 +6264,10 @@ var workaroundSelectionIssueForIE = roosterjs_editor_dom_1.Browser.isIE
     ? function (editor) {
         editor.runAsync(function (editor) {
             var workaroundButton = editor.getCustomData('ENTITY_IE_FOCUS_BUTTON', function () {
-                var button = editor.getDocument().createElement('button');
-                button.style.overflow = 'hidden';
-                button.style.position = 'fixed';
-                button.style.width = '0';
-                button.style.height = '0';
-                button.style.left = '0';
-                button.style.top = '-1000px';
+                var button = roosterjs_editor_dom_1.createElement({
+                    tag: 'button',
+                    style: 'overflow:hidden;position:fixed;width:0;height:0;top:-1000px',
+                }, editor.getDocument());
                 button.onblur = function () {
                     button.style.display = 'none';
                 };
@@ -6104,13 +6277,7 @@ var workaroundSelectionIssueForIE = roosterjs_editor_dom_1.Browser.isIE
                 return button;
             });
             workaroundButton.style.display = '';
-            var range = editor.getDocument().createRange();
-            range.setStart(workaroundButton, 0);
-            try {
-                window.getSelection().removeAllRanges();
-                window.getSelection().addRange(range);
-            }
-            catch (_a) { }
+            roosterjs_editor_dom_1.addRangeToSelection(roosterjs_editor_dom_1.createRange(workaroundButton, 0));
         });
     }
     : function () { };
@@ -7313,15 +7480,19 @@ var Editor = /** @class */ (function () {
     /**
      * Run a callback function asynchronously
      * @param callback The callback function to run
+     * @returns a function to cancel this async run
      */
     Editor.prototype.runAsync = function (callback) {
         var _this = this;
         var win = this.core.contentDiv.ownerDocument.defaultView || window;
-        win.requestAnimationFrame(function () {
+        var handle = win.requestAnimationFrame(function () {
             if (!_this.isDisposed() && callback) {
                 callback(_this);
             }
         });
+        return function () {
+            win.cancelAnimationFrame(handle);
+        };
     };
     /**
      * Set DOM attribute of editor content DIV
@@ -9883,6 +10054,8 @@ exports.createElement = createElement_1.default;
 exports.KnownCreateElementData = createElement_1.KnownCreateElementData;
 var moveChildNodes_1 = __webpack_require__(/*! ./utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 exports.moveChildNodes = moveChildNodes_1.default;
+var setListItemStyle_1 = __webpack_require__(/*! ./utils/setListItemStyle */ "./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts");
+exports.setListItemStyle = setListItemStyle_1.default;
 var VTable_1 = __webpack_require__(/*! ./table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
 exports.VTable = VTable_1.default;
 var VList_1 = __webpack_require__(/*! ./list/VList */ "./packages/roosterjs-editor-dom/lib/list/VList.ts");
@@ -11054,6 +11227,7 @@ var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./package
 var isBlockElement_1 = __webpack_require__(/*! ../utils/isBlockElement */ "./packages/roosterjs-editor-dom/lib/utils/isBlockElement.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+var setListItemStyle_1 = __webpack_require__(/*! ../utils/setListItemStyle */ "./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts");
 var toArray_1 = __webpack_require__(/*! ../utils/toArray */ "./packages/roosterjs-editor-dom/lib/utils/toArray.ts");
 var unwrap_1 = __webpack_require__(/*! ../utils/unwrap */ "./packages/roosterjs-editor-dom/lib/utils/unwrap.ts");
 var wrap_1 = __webpack_require__(/*! ../utils/wrap */ "./packages/roosterjs-editor-dom/lib/utils/wrap.ts");
@@ -11231,7 +11405,14 @@ var VListItem = /** @class */ (function () {
         // 3. Add current node into deepest list element
         listStack[listStack.length - 1].appendChild(this.node);
         this.node.style.display = this.dummy ? 'block' : null;
-        // 4. If this is not a list item now, need to unwrap the LI node and do proper handling
+        // 4. Inherit styles of the childelement to the li, so we are able to apply the styles to the ::marker
+        if (this.listTypes.length > 1) {
+            if (!(this.node.style.fontSize || this.node.style.color || this.node.style.fontFamily)) {
+                var stylesToInherit = ['font-size', 'font-family', 'color'];
+                setListItemStyle_1.default(this.node, stylesToInherit);
+            }
+        }
+        // 5. If this is not a list item now, need to unwrap the LI node and do proper handling
         if (this.listTypes.length <= 1) {
             wrapIfNotBlockNode(getTagOfNode_1.default(this.node) == 'LI' ? getChildrenAndUnwrap(this.node) : [this.node], true /*checkFirst*/, true /*checkLast*/);
         }
@@ -14991,6 +15172,65 @@ function setColor(element, color, isBackgroundColor, isDarkMode) {
 exports.default = setColor;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts":
+/*!*********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/setListItemStyle.ts ***!
+  \*********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+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__(/*! ./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__(/*! ./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.
+ */
+function setListItemStyle(element, styles) {
+    var elementsStyles = getInlineChildElementsStyle(element);
+    var stylesToApply = getStyles_1.default(element);
+    styles.forEach(function (styleName) {
+        var styleValues = elementsStyles.map(function (style) {
+            return style[styleName] !== undefined ? style[styleName] : '';
+        });
+        if (styleValues &&
+            (styleValues.length == 1 || new Set(styleValues).size == 1) &&
+            styleValues[0]) {
+            stylesToApply[styleName] = styleValues[0];
+        }
+    });
+    setStyles_1.default(element, stylesToApply);
+}
+exports.default = setListItemStyle;
+function getInlineChildElementsStyle(element) {
+    var result = [];
+    var contentTraverser = ContentTraverser_1.default.createBodyTraverser(element);
+    var currentInlineElement;
+    while (contentTraverser.currentInlineElement != currentInlineElement) {
+        currentInlineElement = contentTraverser.currentInlineElement;
+        var currentNode = currentInlineElement.getContainerNode();
+        currentNode = findClosestElementAncestor_1.default(currentNode);
+        if (safeInstanceOf_1.default(currentNode, 'HTMLElement')) {
+            var childStyle = getStyles_1.default(currentNode);
+            if (childStyle) {
+                result.push(childStyle);
+            }
+        }
+        contentTraverser.getNextInlineElement();
+    }
+    return result;
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/shouldSkipNode.ts":
@@ -15906,6 +16146,7 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
         if (collapseOnly && !range.collapsed) {
             return null;
         }
+        range.commonAncestorContainer.normalize();
         var pos = roosterjs_editor_dom_1.Position.getEnd(range).normalize();
         var isAtBeginOrEnd = pos.offset == 0 || pos.isAtEnd;
         var entityNode = null;
@@ -16087,27 +16328,29 @@ var AutoBullet = {
         editor.insertContent('&nbsp;');
         event.rawEvent.preventDefault();
         editor.addUndoSnapshot(function () {
+            var _a;
             var regions;
             var searcher = editor.getContentSearcherOfCursor();
             var textBeforeCursor = searcher.getSubStringBefore(4);
-            var rangeToDelete = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
-            if (!rangeToDelete) {
+            var textRange = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/);
+            if (!textRange) {
                 // no op if the range can't be found
             }
             else if (textBeforeCursor.indexOf('*') == 0 ||
                 textBeforeCursor.indexOf('-') == 0) {
-                prepareAutoBullet(editor, rangeToDelete);
+                prepareAutoBullet(editor, textRange);
                 roosterjs_editor_api_1.toggleBullet(editor);
             }
             else if (isAListPattern(textBeforeCursor)) {
-                prepareAutoBullet(editor, rangeToDelete);
+                prepareAutoBullet(editor, textRange);
                 roosterjs_editor_api_1.toggleNumbering(editor);
             }
             else if ((regions = editor.getSelectedRegions()) && regions.length == 1) {
                 var num = parseInt(textBeforeCursor);
-                prepareAutoBullet(editor, rangeToDelete);
+                prepareAutoBullet(editor, textRange);
                 roosterjs_editor_api_1.toggleNumbering(editor, num);
             }
+            (_a = searcher.getRangeFromText(textBeforeCursor, true /*exactMatch*/)) === null || _a === void 0 ? void 0 : _a.deleteContents();
         }, null /*changeSource*/, true /*canUndoByBackspace*/);
     },
 };
@@ -16152,7 +16395,6 @@ function getCacheNextSibiling(event, editor) {
     return element;
 }
 function prepareAutoBullet(editor, range) {
-    range.deleteContents();
     var block = editor.getBlockElementAtNode(range.startContainer);
     var endNode = block === null || block === void 0 ? void 0 : block.getEndNode();
     if (endNode && roosterjs_editor_dom_1.getTagOfNode(endNode) != 'BR' && (block === null || block === void 0 ? void 0 : block.getTextContent().trim()) === '') {
@@ -17426,7 +17668,6 @@ var ImageEdit = /** @class */ (function () {
             var img = wrapper === null || wrapper === void 0 ? void 0 : wrapper.querySelector('img');
             if (img && parent) {
                 img.style.position = '';
-                img.style.maxWidth = '100%';
                 img.style.margin = null;
                 img.style.textAlign = null;
                 parent.insertBefore(img, wrapper);
@@ -17485,6 +17726,7 @@ var ImageEdit = /** @class */ (function () {
                     if ((context === null || context === void 0 ? void 0 : context.elementClass) == "r_resizeH" /* ResizeHandle */) {
                         var clientWidth = wrapper.clientWidth;
                         var clientHeight = wrapper.clientHeight;
+                        _this.wasResized = true;
                         Resizer_1.doubleCheckResize(_this.editInfo, _this.options.preserveRatio, clientWidth, clientHeight);
                         _this.updateWrapper();
                     }
@@ -17595,7 +17837,7 @@ var ImageEdit = /** @class */ (function () {
             // When there is image in editing, clean up any cached objects and elements
             this.clearDndHelpers();
             // Apply the changes, and add undo snapshot if necessary
-            if (applyChange_1.default(this.editor, this.image, this.editInfo, this.lastSrc)) {
+            if (applyChange_1.default(this.editor, this.image, this.editInfo, this.lastSrc, this.wasResized)) {
                 this.editor.addUndoSnapshot(function () { return _this.image; }, "ImageResize" /* ImageResize */);
             }
             // Remove editing wrapper
@@ -17616,6 +17858,8 @@ var ImageEdit = /** @class */ (function () {
             this.image = image;
             // Get initial edit info
             this.editInfo = editInfo_1.getEditInfoFromImage(image);
+            //Check if the image was resized by the user
+            this.wasResized = checkIfImageWasResized(this.image);
             operation =
                 (canRegenerateImage_1.default(image) ? operation : 3 /* Resize */) &
                     this.allowedOperations;
@@ -17748,6 +17992,28 @@ function updateHandleCursor(handles, angleRad) {
         handle.style.cursor = rotateHandles(handle, angleRad) + "-resize";
     });
 }
+/**
+ * Check if the current image was resized by the user
+ * @param image the current image
+ * @returns if the user resized the image, returns true, otherwise, returns false
+ */
+function checkIfImageWasResized(image) {
+    var width = image.width, height = image.height, style = image.style;
+    if (style.maxWidth === 'initial' &&
+        (isFixedNumberValue(style.height) ||
+            isFixedNumberValue(style.width) ||
+            isFixedNumberValue(width) ||
+            isFixedNumberValue(height))) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function isFixedNumberValue(value) {
+    var numberValue = typeof value === 'string' ? parseInt(value) : value;
+    return !isNaN(numberValue);
+}
 
 
 /***/ }),
@@ -17882,7 +18148,7 @@ function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
                 editInfo.widthPx = Math.max(width, minWidth);
                 editInfo.heightPx = Math.max(height, minHeight);
                 editor.addUndoSnapshot(function () {
-                    applyChange_1.default(editor, image, editInfo, lastSrc_1);
+                    applyChange_1.default(editor, image, editInfo, lastSrc_1, true /*wasResized*/);
                 }, "ImageResize" /* ImageResize */);
             }
         });
@@ -17929,7 +18195,7 @@ var editInfo_1 = __webpack_require__(/*! ./editInfo */ "./packages/roosterjs-edi
  * @param previousSrc Last src value of the image before the change was made
  * @returns True if the image is changed, otherwise false
  */
-function applyChange(editor, image, editInfo, previousSrc) {
+function applyChange(editor, image, editInfo, previousSrc, wasResized) {
     var newSrc = '';
     var initEditInfo = editInfo_1.getEditInfoFromImage(image);
     var state = checkEditInfoState_1.default(editInfo, initEditInfo);
@@ -17973,15 +18239,32 @@ function applyChange(editor, image, editInfo, previousSrc) {
     // Write back the change to image, and set its new size
     var _a = getGeneratedImageSize_1.default(editInfo), targetWidth = _a.targetWidth, targetHeight = _a.targetHeight;
     image.src = newSrc;
-    image.style.width = targetWidth + 'px';
-    image.style.height = targetHeight + 'px';
-    image.width = targetWidth;
-    image.height = targetHeight;
+    setImageSize(image, wasResized, targetWidth, targetHeight);
     return (srcChanged ||
         editInfo.widthPx != initEditInfo.widthPx ||
         editInfo.heightPx != initEditInfo.heightPx);
 }
 exports.default = applyChange;
+/**
+ * @param img The current image.
+ * @param wasResized the current resize state of the image
+ */
+function setImageSize(image, wasResized, targetWidth, targetHeight) {
+    if (wasResized) {
+        image.style.maxWidth = 'initial';
+        image.width = targetWidth;
+        image.height = targetHeight;
+        image.style.width = targetWidth + 'px';
+        image.style.height = targetHeight + 'px';
+    }
+    else {
+        image.style.maxWidth = '100%';
+        image.style.height = 'initial';
+        image.style.width = 'initial';
+        image.removeAttribute('height');
+        image.removeAttribute('width');
+    }
+}
 
 
 /***/ }),