roosterjs 8.46.0 → 8.47.0

package/dist/rooster-amd.js

@@ -2907,6 +2907,7 @@ var canMergeTableCell = function (editor) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var commitListChains_1 = __webpack_require__(/*! ../utils/commitListChains */ "./packages/roosterjs-editor-api/lib/utils/commitListChains.ts");
+var getFormatState_1 = __webpack_require__(/*! ./getFormatState */ "./packages/roosterjs-editor-api/lib/format/getFormatState.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Insert an entity into editor.
@@ -2919,10 +2920,13 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  * If isBlock is true, entity will be insert below this position
  * @param insertToRegionRoot @optional When pass true, insert the entity at the root level of current region.
  * Parent nodes will be split if need
+ * @param focusAfterEntity @optional When pass true, focus will be moved next to the entity. For inline entity,
+ * focus will be after right after the entity (and the delimiter if exist). For block entity, focus will be in
+ * the new empty line below the entity
  */
-function insertEntity(editor, type, contentNode, isBlock, isReadonly, position, insertToRegionRoot) {
+function insertEntity(editor, type, contentNode, isBlock, isReadonly, position, insertToRegionRoot, focusAfterEntity) {
     var _a;
-    var wrapper = (0, roosterjs_editor_dom_1.wrap)(contentNode, isBlock ? 'DIV' : 'SPAN');
+    var wrapper = (0, roosterjs_editor_dom_1.wrap)(contentNode, isBlock ? 'div' : 'span');
     // For inline & readonly entity, we need to set display to "inline-block" otherwise
     // there will be some weird behavior when move cursor around the entity node.
     // And we should only do this for readonly entity since "inline-block" has some side effect
@@ -2933,6 +2937,7 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
         wrapper.style.display = 'inline-block';
     }
     (0, roosterjs_editor_dom_1.commitEntity)(wrapper, type, isReadonly);
+    var currentFormat = (0, getFormatState_1.default)(editor);
     if (!editor.contains(wrapper)) {
         var currentRange = null;
         var contentPosition = void 0;
@@ -2975,15 +2980,36 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
             }
         }
     }
+    var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(wrapper);
     if (isBlock) {
         // Insert an extra empty line for block entity to make sure
         // user can still put cursor below the entity.
-        var br = editor.getDocument().createElement('BR');
-        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, wrapper.nextSibling);
-    }
-    var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(wrapper);
-    if (!isBlock &&
-        isReadonly &&
+        var formatOnSpan = editor.isFeatureEnabled("DefaultFormatInSpan" /* DefaultFormatInSpan */);
+        var newLine = (0, roosterjs_editor_dom_1.createElement)(formatOnSpan
+            ? 12 /* EmptyLineFormatInSpan */
+            : 1 /* EmptyLine */, editor.getDocument());
+        (_a = wrapper.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(newLine, wrapper.nextSibling);
+        var formatNode = formatOnSpan ? newLine === null || newLine === void 0 ? void 0 : newLine.querySelector('span') : newLine;
+        if (formatNode) {
+            (0, roosterjs_editor_dom_1.applyFormat)(formatNode, {
+                backgroundColor: currentFormat.backgroundColor,
+                textColor: currentFormat.textColor,
+                bold: currentFormat.isBold,
+                fontFamily: currentFormat.fontName,
+                fontSize: currentFormat.fontSize,
+                italic: currentFormat.isItalic,
+                underline: currentFormat.isUnderline,
+            }, editor.isDarkMode(), editor.getDarkColorHandler());
+        }
+        if (focusAfterEntity) {
+            var br = newLine === null || newLine === void 0 ? void 0 : newLine.querySelector('br');
+            var pos = br && new roosterjs_editor_dom_1.Position(br, -2 /* Before */);
+            if (pos) {
+                editor.select(pos);
+            }
+        }
+    }
+    else if (isReadonly &&
         editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
         (0, roosterjs_editor_dom_1.addDelimiters)(entity.wrapper);
         if (entity.wrapper.nextElementSibling) {
@@ -3185,9 +3211,7 @@ function setAlignment(editor, alignment) {
             (0, roosterjs_editor_dom_1.isWholeTableSelected)(new roosterjs_editor_dom_1.VTable(selection.table), selection.coordinates)) {
             alignTable(selection, alignment);
         }
-        else if (elementAtCursor &&
-            isList(elementAtCursor) &&
-            editor.isFeatureEnabled("ListItemAlignment" /* ListItemAlignment */)) {
+        else if (elementAtCursor && isList(elementAtCursor)) {
             alignList(editor, alignment);
         }
         else {
@@ -5049,12 +5073,13 @@ var createPasteFragment = function (core, clipboardData, position, pasteAsText,
     if (!clipboardData) {
         return null;
     }
+    var pasteType = getPasteType(pasteAsText, applyCurrentStyle, pasteAsImage);
     // Step 1: Prepare BeforePasteEvent object
-    var event = createBeforePasteEvent(core, clipboardData);
+    var event = createBeforePasteEvent(core, clipboardData, pasteType);
     return (0, roosterjs_editor_dom_1.createFragmentFromClipboardData)(core, clipboardData, position, pasteAsText, applyCurrentStyle, pasteAsImage, event);
 };
 exports.createPasteFragment = createPasteFragment;
-function createBeforePasteEvent(core, clipboardData) {
+function createBeforePasteEvent(core, clipboardData, pasteType) {
     var options = (0, roosterjs_editor_dom_1.createDefaultHtmlSanitizerOptions)();
     // Remove "caret-color" style generated by Safari to make sure caret shows in right color after paste
     options.cssStyleCallbacks['caret-color'] = function () { return false; };
@@ -5066,8 +5091,23 @@ function createBeforePasteEvent(core, clipboardData) {
         htmlBefore: '',
         htmlAfter: '',
         htmlAttributes: {},
+        pasteType: pasteType,
     };
 }
+function getPasteType(pasteAsText, applyCurrentStyle, pasteAsImage) {
+    if (pasteAsText) {
+        return 1 /* AsPlainText */;
+    }
+    else if (applyCurrentStyle) {
+        return 2 /* MergeFormat */;
+    }
+    else if (pasteAsImage) {
+        return 3 /* AsImage */;
+    }
+    else {
+        return 0 /* Normal */;
+    }
+}
 
 
 /***/ }),
@@ -5231,7 +5271,7 @@ var getContent = function (core, mode) {
     else if (mode == 3 /* PlainText */) {
         content = (0, roosterjs_editor_dom_1.getTextContent)(root);
     }
-    else if (triggerExtractContentEvent || core.lifecycle.isDarkMode || core.darkColorHandler) {
+    else {
         var clonedRoot = cloneNode(root);
         clonedRoot.normalize();
         var originalRange = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
@@ -5243,9 +5283,7 @@ var getContent = function (core, mode) {
                     ? (0, roosterjs_editor_dom_1.getSelectionPath)(core.contentDiv, originalRange)
                     : null;
         var range = path && (0, roosterjs_editor_dom_1.createRange)(clonedRoot, path.start, path.end);
-        if (core.lifecycle.isDarkMode || core.darkColorHandler) {
-            core.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */, !!core.darkColorHandler, core.lifecycle.isDarkMode);
-        }
+        core.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */, true /*forceTransform*/, core.lifecycle.isDarkMode);
         if (triggerExtractContentEvent) {
             core.api.triggerEvent(core, {
                 eventType: 8 /* ExtractContentWithDom */,
@@ -5261,11 +5299,6 @@ var getContent = function (core, mode) {
             content = clonedRoot.innerHTML;
         }
     }
-    else {
-        content = (0, roosterjs_editor_dom_1.getHtmlWithSelectionPath)(root, includeSelectionMarker
-            ? core.api.getSelectionRange(core, true /*tryGetFromCache*/)
-            : null);
-    }
     return content !== null && content !== void 0 ? content : '';
 };
 exports.getContent = getContent;
@@ -5535,8 +5568,6 @@ function checkAllCollapsed(ranges) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyleBasedFormatState = void 0;
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var ORIGINAL_STYLE_COLOR_SELECTOR = "[data-" + "ogsc" /* OriginalStyleColor */ + "],[data-" + "ogac" /* OriginalAttributeColor */ + "]";
-var ORIGINAL_STYLE_BACK_COLOR_SELECTOR = "[data-" + "ogsb" /* OriginalStyleBackgroundColor */ + "],[data-" + "ogab" /* OriginalAttributeBackgroundColor */ + "]";
 /**
  * @internal
  * Get style based format state from current selection, including font name/size and colors
@@ -5570,86 +5601,48 @@ var getStyleBasedFormatState = function (core, node) {
             'direction',
         ])
         : [];
-    var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler, isDarkMode = core.lifecycle.isDarkMode;
-    if (darkColorHandler) {
-        var styleTextColor = void 0;
-        var styleBackColor = void 0;
-        while (node &&
-            (0, roosterjs_editor_dom_1.contains)(contentDiv, node, true /*treatSameNodeAsContain*/) &&
-            !(styleTextColor && styleBackColor)) {
-            if (node.nodeType == 1 /* Element */) {
-                var element = node;
-                styleTextColor = styleTextColor || element.style.getPropertyValue('color');
-                styleBackColor =
-                    styleBackColor || element.style.getPropertyValue('background-color');
-            }
-            node = node.parentNode;
-        }
-        if (!core.lifecycle.isDarkMode && node == core.contentDiv) {
-            styleTextColor = styleTextColor || styles[2];
-            styleBackColor = styleBackColor || styles[3];
+    var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler;
+    var styleTextColor;
+    var styleBackColor;
+    while (node &&
+        (0, roosterjs_editor_dom_1.contains)(contentDiv, node, true /*treatSameNodeAsContain*/) &&
+        !(styleTextColor && styleBackColor)) {
+        if (node.nodeType == 1 /* Element */) {
+            var element = node;
+            styleTextColor = styleTextColor || element.style.getPropertyValue('color');
+            styleBackColor = styleBackColor || element.style.getPropertyValue('background-color');
         }
-        var textColor = darkColorHandler.parseColorValue(override[2] || styleTextColor);
-        var backColor = darkColorHandler.parseColorValue(override[3] || styleBackColor);
-        return {
-            fontName: override[0] || styles[0],
-            fontSize: override[1] || styles[1],
-            textColor: textColor.lightModeColor,
-            backgroundColor: backColor.lightModeColor,
-            textColors: textColor.darkModeColor
-                ? {
-                    lightModeColor: textColor.lightModeColor,
-                    darkModeColor: textColor.darkModeColor,
-                }
-                : undefined,
-            backgroundColors: backColor.darkModeColor
-                ? {
-                    lightModeColor: backColor.lightModeColor,
-                    darkModeColor: backColor.darkModeColor,
-                }
-                : undefined,
-            lineHeight: styles[4],
-            marginTop: styles[5],
-            marginBottom: styles[6],
-            textAlign: styles[7],
-            direction: styles[8],
-        };
+        node = node.parentNode;
     }
-    else {
-        var ogTextColorNode = isDarkMode &&
-            (override[2]
-                ? pendableFormatSpan
-                : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, contentDiv, ORIGINAL_STYLE_COLOR_SELECTOR));
-        var ogBackgroundColorNode = isDarkMode &&
-            (override[3]
-                ? pendableFormatSpan
-                : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, contentDiv, ORIGINAL_STYLE_BACK_COLOR_SELECTOR));
-        return {
-            fontName: override[0] || styles[0],
-            fontSize: override[1] || styles[1],
-            textColor: override[2] || styles[2],
-            backgroundColor: override[3] || styles[3],
-            textColors: ogTextColorNode
-                ? {
-                    darkModeColor: override[2] || styles[2],
-                    lightModeColor: ogTextColorNode.dataset["ogsc" /* OriginalStyleColor */] ||
-                        ogTextColorNode.dataset["ogac" /* OriginalAttributeColor */] ||
-                        styles[2],
-                }
-                : undefined,
-            backgroundColors: ogBackgroundColorNode
-                ? {
-                    darkModeColor: override[3] || styles[3],
-                    lightModeColor: ogBackgroundColorNode.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
-                        ogBackgroundColorNode.dataset["ogab" /* OriginalAttributeBackgroundColor */] ||
-                        styles[3],
-                }
-                : undefined,
-            lineHeight: styles[4],
-            textAlign: styles[7],
-            direction: styles[8],
-        };
+    if (!core.lifecycle.isDarkMode && node == core.contentDiv) {
+        styleTextColor = styleTextColor || styles[2];
+        styleBackColor = styleBackColor || styles[3];
     }
+    var textColor = darkColorHandler.parseColorValue(override[2] || styleTextColor);
+    var backColor = darkColorHandler.parseColorValue(override[3] || styleBackColor);
+    return {
+        fontName: override[0] || styles[0],
+        fontSize: override[1] || styles[1],
+        textColor: textColor.lightModeColor,
+        backgroundColor: backColor.lightModeColor,
+        textColors: textColor.darkModeColor
+            ? {
+                lightModeColor: textColor.lightModeColor,
+                darkModeColor: textColor.darkModeColor,
+            }
+            : undefined,
+        backgroundColors: backColor.darkModeColor
+            ? {
+                lightModeColor: backColor.lightModeColor,
+                darkModeColor: backColor.darkModeColor,
+            }
+            : undefined,
+        lineHeight: styles[4],
+        marginTop: styles[5],
+        marginBottom: styles[6],
+        textAlign: styles[7],
+        direction: styles[8],
+    };
 };
 exports.getStyleBasedFormatState = getStyleBasedFormatState;
 
@@ -5891,11 +5884,9 @@ var restoreUndoSnapshot = function (core, step) {
             core.api.setContent(core, snapshot.html, true /*triggerContentChangedEvent*/, (_a = snapshot.metadata) !== null && _a !== void 0 ? _a : undefined);
             var darkColorHandler_1 = core.darkColorHandler;
             var isDarkModel_1 = core.lifecycle.isDarkMode;
-            if (darkColorHandler_1) {
-                snapshot.knownColors.forEach(function (color) {
-                    darkColorHandler_1.registerColor(color.lightModeColor, isDarkModel_1, color.darkModeColor);
-                });
-            }
+            snapshot.knownColors.forEach(function (color) {
+                darkColorHandler_1.registerColor(color.lightModeColor, isDarkModel_1, color.darkModeColor);
+            });
         }
         finally {
             core.undo.isRestoring = false;
@@ -6509,14 +6500,10 @@ var ColorAttributeName = [
     (_a = {},
         _a[0 /* CssColor */] = 'color',
         _a[1 /* HtmlColor */] = 'color',
-        _a[2 /* CssDataSet */] = "ogsc" /* OriginalStyleColor */,
-        _a[3 /* HtmlDataSet */] = "ogac" /* OriginalAttributeColor */,
         _a),
     (_b = {},
         _b[0 /* CssColor */] = 'background-color',
         _b[1 /* HtmlColor */] = 'bgcolor',
-        _b[2 /* CssDataSet */] = "ogsb" /* OriginalStyleBackgroundColor */,
-        _b[3 /* HtmlDataSet */] = "ogab" /* OriginalAttributeBackgroundColor */,
         _b),
 ];
 /**
@@ -6536,20 +6523,7 @@ var transformColor = function (core, rootNode, includeSelf, callback, direction,
         ? getAll(rootNode, includeSelf)
         : [];
     callback === null || callback === void 0 ? void 0 : callback();
-    if (darkColorHandler) {
-        transformV2(elements, darkColorHandler, !!fromDarkMode, direction == 0 /* LightToDark */);
-    }
-    else {
-        if (direction == 1 /* DarkToLight */) {
-            transformToLightMode(elements);
-        }
-        else if (core.lifecycle.onExternalContentTransform) {
-            elements.forEach(function (element) { return core.lifecycle.onExternalContentTransform(element); });
-        }
-        else {
-            transformToDarkMode(elements, core.lifecycle.getDarkColor);
-        }
-    }
+    transformV2(elements, darkColorHandler, !!fromDarkMode, direction == 0 /* LightToDark */);
 };
 exports.transformColor = transformColor;
 function transformV2(elements, darkColorHandler, fromDark, toDark) {
@@ -6565,66 +6539,6 @@ function transformV2(elements, darkColorHandler, fromDark, toDark) {
         });
     });
 }
-function transformToLightMode(elements) {
-    elements.forEach(function (element) {
-        ColorAttributeName.forEach(function (names) {
-            // Reset color styles based on the content of the ogsc/ogsb data element.
-            // If those data properties are empty or do not exist, set them anyway to clear the content.
-            element.style.setProperty(names[0 /* CssColor */], getValueOrDefault(element.dataset[names[2 /* CssDataSet */]], ''));
-            delete element.dataset[names[2 /* CssDataSet */]];
-            // Some elements might have set attribute colors. We need to reset these as well.
-            var value = getValueOrDefault(element.dataset[names[3 /* HtmlDataSet */]], null);
-            if (value) {
-                element.setAttribute(names[1 /* HtmlColor */], value);
-            }
-            else {
-                element.removeAttribute(names[1 /* HtmlColor */]);
-            }
-            delete element.dataset[names[3 /* HtmlDataSet */]];
-        });
-    });
-}
-function transformToDarkMode(elements, getDarkColor) {
-    ColorAttributeName.forEach(function (names) {
-        elements
-            .map(function (element) {
-            var styleColor = element.style.getPropertyValue(names[0 /* CssColor */]);
-            var attrColor = element.getAttribute(names[1 /* HtmlColor */]);
-            var existingDataSetCssValue = element.dataset[names[2 /* CssDataSet */]];
-            var existingDataSetHtmlValue = element.dataset[names[3 /* HtmlDataSet */]];
-            var needProcess = (!existingDataSetCssValue || existingDataSetCssValue == styleColor) &&
-                (!existingDataSetHtmlValue || existingDataSetHtmlValue == attrColor) &&
-                (styleColor || attrColor) &&
-                styleColor != 'inherit'; // For inherit style, no need to change it and let it keep inherit from parent element
-            return needProcess
-                ? {
-                    element: element,
-                    styleColor: styleColor,
-                    attrColor: attrColor,
-                    newColor: styleColor || attrColor
-                        ? getDarkColor((styleColor || attrColor))
-                        : null,
-                }
-                : null;
-        })
-            .filter(function (x) { return !!x; })
-            .forEach(function (entry) {
-            if (!entry) {
-                return;
-            }
-            var element = entry.element, styleColor = entry.styleColor, attrColor = entry.attrColor, newColor = entry.newColor;
-            element.style.setProperty(names[0 /* CssColor */], newColor, 'important');
-            element.dataset[names[2 /* CssDataSet */]] = styleColor || '';
-            if (attrColor && newColor) {
-                element.setAttribute(names[1 /* HtmlColor */], newColor);
-                element.dataset[names[3 /* HtmlDataSet */]] = attrColor;
-            }
-        });
-    });
-}
-function getValueOrDefault(value, defaultValue) {
-    return value && value != 'undefined' && value != 'null' ? value : defaultValue;
-}
 function getAll(rootNode, includeSelf) {
     var result = [];
     if ((0, roosterjs_editor_dom_1.safeInstanceOf)(rootNode, 'HTMLElement')) {
@@ -8606,6 +8520,9 @@ var UndoPlugin = /** @class */ (function () {
             case 7 /* ContentChanged */:
                 this.onContentChanged(event);
                 break;
+            case 23 /* BeforeKeyboardEditing */:
+                this.onBeforeKeyboardEditing(event.rawEvent);
+                break;
         }
     };
     UndoPlugin.prototype.onKeyDown = function (evt) {
@@ -8620,7 +8537,7 @@ var UndoPlugin = /** @class */ (function () {
                 this.state.autoCompletePosition = null;
                 this.lastKeyPress = evt.which;
             }
-            else {
+            else if (!evt.defaultPrevented) {
                 var selectionRange = (_b = this.editor) === null || _b === void 0 ? void 0 : _b.getSelectionRange();
                 // Add snapshot when
                 // 1. Something has been selected (not collapsed), or
@@ -8668,22 +8585,21 @@ var UndoPlugin = /** @class */ (function () {
         }
         this.lastKeyPress = evt.which;
     };
-    UndoPlugin.prototype.onContentChanged = function (event) {
-        if (event.source == "Keyboard" /* Keyboard */) {
-            if (Number.isInteger(event.data)) {
-                // For keyboard event (triggered from Content Model), we can get its keycode from event.data
-                // And when user is keep pressing the same key, mark editor with "hasNewContent" so that next time user
-                // do some other action or press a different key, we will add undo snapshot
-                if (event.data != this.lastKeyPress) {
-                    this.addUndoSnapshot();
-                }
-                this.lastKeyPress = event.data;
-                this.state.hasNewContent = true;
-            }
+    UndoPlugin.prototype.onBeforeKeyboardEditing = function (event) {
+        // For keyboard event (triggered from Content Model), we can get its keycode from event.data
+        // And when user is keep pressing the same key, mark editor with "hasNewContent" so that next time user
+        // do some other action or press a different key, we will add undo snapshot
+        if (event.which != this.lastKeyPress) {
+            this.addUndoSnapshot();
         }
-        else if (!(this.state.isRestoring ||
+        this.lastKeyPress = event.which;
+        this.state.hasNewContent = true;
+    };
+    UndoPlugin.prototype.onContentChanged = function (event) {
+        if (!(this.state.isRestoring ||
             event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
-            event.source == "SwitchToLightMode" /* SwitchToLightMode */)) {
+            event.source == "SwitchToLightMode" /* SwitchToLightMode */ ||
+            event.source == "Keyboard" /* Keyboard */)) {
             this.clearRedoForInput();
         }
     };
@@ -9351,12 +9267,11 @@ var EditorBase = /** @class */ (function () {
      * Dispose this editor, dispose all plugins and custom data
      */
     EditorBase.prototype.dispose = function () {
-        var _a;
         var core = this.getCore();
         for (var i = core.plugins.length - 1; i >= 0; i--) {
             core.plugins[i].dispose();
         }
-        (_a = core.darkColorHandler) === null || _a === void 0 ? void 0 : _a.reset();
+        core.darkColorHandler.reset();
         this.core = null;
     };
     /**
@@ -9996,10 +9911,10 @@ var EditorBase = /** @class */ (function () {
         core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
     };
     /**
-     * Get a darkColorHandler object for this editor. It will return null if experimental feature "VariableBasedDarkColor" is not enabled
+     * Get a darkColorHandler object for this editor.
      */
     EditorBase.prototype.getDarkColorHandler = function () {
-        return this.getCore().darkColorHandler || null;
+        return this.getCore().darkColorHandler;
     };
     /**
      * Make the editor in "Shadow Edit" mode.
@@ -10125,7 +10040,6 @@ var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugi
 var DarkColorHandlerImpl_1 = __webpack_require__(/*! ./DarkColorHandlerImpl */ "./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
-var isFeatureEnabled_1 = __webpack_require__(/*! ./isFeatureEnabled */ "./packages/roosterjs-editor-core/lib/editor/isFeatureEnabled.ts");
 /**
  * Create a new instance of Editor Core
  * @param contentDiv The DIV HTML element which will be the container element of editor
@@ -10154,9 +10068,7 @@ var createEditorCore = function (contentDiv, options) {
                 ? [scrollContainer]
                 : [scrollContainer, core.contentDiv]);
         });
-    var core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), originalApi: coreApiMap_1.coreApiMap, plugins: plugins.filter(function (x) { return !!x; }) }, pluginState), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }), getVisibleViewport: getVisibleViewport, imageSelectionBorderColor: options.imageSelectionBorderColor, darkColorHandler: (0, isFeatureEnabled_1.isFeatureEnabled)(options.experimentalFeatures, "VariableBasedDarkColor" /* VariableBasedDarkColor */)
-            ? new DarkColorHandlerImpl_1.default(contentDiv, pluginState.lifecycle.getDarkColor)
-            : undefined });
+    var core = __assign(__assign({ contentDiv: contentDiv, api: __assign(__assign({}, coreApiMap_1.coreApiMap), (options.coreApiOverride || {})), originalApi: coreApiMap_1.coreApiMap, plugins: plugins.filter(function (x) { return !!x; }) }, pluginState), { trustedHTMLHandler: options.trustedHTMLHandler || (function (html) { return html; }), zoomScale: zoomScale, sizeTransformer: options.sizeTransformer || (function (size) { return size / zoomScale; }), getVisibleViewport: getVisibleViewport, imageSelectionBorderColor: options.imageSelectionBorderColor, darkColorHandler: new DarkColorHandlerImpl_1.default(contentDiv, pluginState.lifecycle.getDarkColor) });
     return core;
 };
 exports.createEditorCore = createEditorCore;
@@ -14563,6 +14475,7 @@ var VList = /** @class */ (function () {
             }
             item.writeBack(listStack, _this.rootList, shouldReuseAllAncestorListElements);
             var topList = listStack[1];
+            item.applyListStyle(_this.rootList, start);
             if ((0, safeInstanceOf_1.default)(topList, 'HTMLOListElement')) {
                 if (lastList != topList) {
                     if (start == 1) {
@@ -14576,8 +14489,6 @@ var VList = /** @class */ (function () {
                     start++;
                 }
             }
-            var itemIndex = _this.getListItemIndex(item.getNode());
-            item.applyListStyle(_this.rootList, itemIndex);
             lastList = topList;
         });
         // Restore the content to the position of placeholder
@@ -14946,7 +14857,13 @@ var VListChain = /** @class */ (function () {
         var lastNumber = 0;
         for (var i = 0; i < lists.length; i++) {
             var list = lists[i];
-            list.start = list.start > 1 ? list.start : lastNumber + 1;
+            //If there is a list chain sequence, ensure the list chain keep increasing correctly
+            if (list.start > 1) {
+                list.start = list.start === lastNumber ? lastNumber + 1 : list.start;
+            }
+            else {
+                list.start = lastNumber + 1;
+            }
             var vlist = new VList_1.default(list);
             lastNumber = vlist.getLastItemNumber() || 0;
             delete list.dataset[CHAIN_DATASET_NAME];
@@ -20617,7 +20534,6 @@ var TRANSPARENT = 'transparent';
 var DARK_COLORS_LIGHTNESS = 20;
 //If the value of the lightness is more than 80, the color is bright
 var BRIGHT_COLORS_LIGHTNESS = 80;
-var TRANSPARENT_COLOR = 'transparent';
 /**
  * Set text color or background color to the given element
  * @param element The element to set color to
@@ -20625,7 +20541,8 @@ var TRANSPARENT_COLOR = 'transparent';
  * @param isBackgroundColor Whether set background color or text color
  * @param isDarkMode Whether current mode is dark mode. @default false
  * @param shouldAdaptTheFontColor Whether the font color needs to be adapted to be visible in a dark or bright background color. @default false
- * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
+ * @param darkColorHandler A dark color handler object. This is now required.
+ * We keep it optional only for backward compatibility. If it is not passed, color will not be set.
  */
 function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheFontColor, darkColorHandler) {
     var colorString = typeof color === 'string' ? color.trim() : '';
@@ -20636,22 +20553,6 @@ function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheF
             var colorValue = darkColorHandler.registerColor((modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString, !!isDarkMode, modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor);
             element.style.setProperty(cssName, colorValue);
         }
-        else {
-            element.style.setProperty(cssName, (isDarkMode
-                ? modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor
-                : modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString);
-            if (element.dataset) {
-                var dataSetName = isBackgroundColor
-                    ? "ogsb" /* OriginalStyleBackgroundColor */
-                    : "ogsc" /* OriginalStyleColor */;
-                if (!isDarkMode || color == TRANSPARENT_COLOR) {
-                    delete element.dataset[dataSetName];
-                }
-                else if (modeIndependentColor) {
-                    element.dataset[dataSetName] = modeIndependentColor.lightModeColor;
-                }
-            }
-        }
         if (isBackgroundColor && shouldAdaptTheFontColor) {
             adaptFontColorToBackgroundColor(element, (modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString, isDarkMode, darkColorHandler);
         }
@@ -20663,7 +20564,8 @@ exports.default = setColor;
  * @param element The element that contains text.
  * @param lightModeBackgroundColor Existing background color in light mode
  * @param isDarkMode Whether the content is in dark mode
- * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
+ * @param darkColorHandler A dark color handler object.  This is now required.
+ * We keep it optional only for backward compatibility. If it is not passed, color will not be set.
  */
 function adaptFontColorToBackgroundColor(element, lightModeBackgroundColor, isDarkMode, darkColorHandler) {
     if (!lightModeBackgroundColor || lightModeBackgroundColor === TRANSPARENT) {
@@ -26237,8 +26139,11 @@ var Paste = /** @class */ (function () {
                     break;
                 case 1 /* ExcelDesktop */:
                 case 2 /* ExcelOnline */:
-                    // Handle HTML copied from Excel
-                    (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
+                    if (event.pasteType === 0 /* Normal */ ||
+                        event.pasteType === 2 /* MergeFormat */) {
+                        // Handle HTML copied from Excel
+                        (0, convertPastedContentFromExcel_1.default)(event, trustedHTMLHandler);
+                    }
                     break;
                 case 3 /* PowerPointDesktop */:
                     (0, convertPastedContentFromPowerPoint_1.default)(event, trustedHTMLHandler);
@@ -27053,9 +26958,7 @@ exports.default = sanitizeHtmlColorsFromPastedContent;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-var HTTP = 'http:';
-var HTTPS = 'https:';
-var NOTES = 'notes:';
+var SUPPORTED_PROTOCOLS = ['http:', 'https:', 'notes:', 'mailto:', 'onenote:'];
 /**
  * @internal
  * Clear local paths and remove link
@@ -27073,10 +26976,8 @@ function validateLink(link, htmlElement) {
     catch (_a) {
         url = undefined;
     }
-    if (url &&
-        (url.protocol === HTTP ||
-            url.protocol === HTTPS ||
-            url.protocol === NOTES) /* whitelist Notes protocol */) {
+    /* whitelist supported protocols */
+    if (url && SUPPORTED_PROTOCOLS.indexOf(url.protocol) > -1) {
         return link;
     }
     htmlElement.removeAttribute('href');
@@ -28311,13 +28212,17 @@ var PickerPlugin = /** @class */ (function () {
     };
     PickerPlugin.prototype.tryRemoveNode = function (event) {
         var searcher = this.editor.getContentSearcherOfCursor(event);
+        if (!searcher) {
+            return false;
+        }
         var inlineElementBefore = searcher.getInlineElementBefore();
         var nodeBeforeCursor = inlineElementBefore
             ? inlineElementBefore.getContainerNode()
             : null;
         var nodeId = nodeBeforeCursor ? this.getIdValue(nodeBeforeCursor) : null;
         var inlineElementAfter = searcher.getInlineElementAfter();
-        if (nodeId &&
+        if (nodeBeforeCursor &&
+            nodeId &&
             nodeId.indexOf(this.pickerOptions.elementIdPrefix) == 0 &&
             (inlineElementAfter == null || !(inlineElementAfter instanceof roosterjs_editor_dom_1.PartialInlineElement))) {
             var replacementNode_1 = this.dataProvider.onRemove(nodeBeforeCursor, true);
@@ -28331,11 +28236,13 @@ var PickerPlugin = /** @class */ (function () {
                 else {
                     this.editor.select(replacementNode_1, -3 /* After */);
                 }
+                return true;
             }
             else {
-                this.editor.deleteNode(nodeBeforeCursor);
+                // Select the node then let browser delete it
+                this.editor.select(nodeBeforeCursor);
+                return false;
             }
-            return true;
         }
         return false;
     };
@@ -30940,6 +30847,7 @@ var CompatibleContentType;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompatibleDarkModeDatasetNames = void 0;
 /**
+ * @deprecated
  * Constants string for dataset names used by dark mode
  */
 var CompatibleDarkModeDatasetNames;
@@ -31557,15 +31465,23 @@ var CompatibleExperimentalFeatures;
      * When a html image is selected, the selected image data will be stored by editor core.
      */
     CompatibleExperimentalFeatures["ImageSelection"] = "ImageSelection";
-    //#endregion
     /**
-     * Provide additional Tab Key Features. Requires Text Features Content Editable Features
+     * @deprecated this feature is always enabled
+     * Use variable-based dark mode solution rather than dataset-based solution.
+     * When enable this feature, need to pass in a DarkModelHandler object to each call of setColor and applyFormat
+     * if you need them work for dark mode
      */
-    CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
+    CompatibleExperimentalFeatures["VariableBasedDarkColor"] = "VariableBasedDarkColor";
     /**
+     * @deprecated this feature is always enabled
      * Align list elements elements to left, center and right using setAlignment API
      */
     CompatibleExperimentalFeatures["ListItemAlignment"] = "ListItemAlignment";
+    //#endregion
+    /**
+     * Provide additional Tab Key Features. Requires Text Features Content Editable Features
+     */
+    CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
     /**
      * Trigger formatting by a especial characters. Ex: (A), 1. i).
      */
@@ -31582,16 +31498,14 @@ var CompatibleExperimentalFeatures;
      * the block element (In most case, the DIV element) so keep the block element clean.
      */
     CompatibleExperimentalFeatures["DefaultFormatInSpan"] = "DefaultFormatInSpan";
-    /**
-     * Use variable-based dark mode solution rather than dataset-based solution.
-     * When enable this feature, need to pass in a DarkModelHandler object to each call of setColor and applyFormat
-     * if you need them work for dark mode
-     */
-    CompatibleExperimentalFeatures["VariableBasedDarkColor"] = "VariableBasedDarkColor";
     /**
      * Reuse existing DOM structure if possible when convert Content Model back to DOM tree
      */
     CompatibleExperimentalFeatures["ReusableContentModel"] = "ReusableContentModel";
+    /**
+     * Handle keyboard editing event with Content Model
+     */
+    CompatibleExperimentalFeatures["EditWithContentModel"] = "EditWithContentModel";
     /**
      * Apply default format on editor container
      */
@@ -32141,6 +32055,43 @@ var CompatibleNumberingListType;
 })(CompatibleNumberingListType = exports.CompatibleNumberingListType || (exports.CompatibleNumberingListType = {}));
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/PasteType.ts":
+/*!*************************************************************************!*\
+  !*** ./packages/roosterjs-editor-types/lib/compatibleEnum/PasteType.ts ***!
+  \*************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompatiblePasteType = void 0;
+/**
+ * Enum for paste options
+ */
+var CompatiblePasteType;
+(function (CompatiblePasteType) {
+    /**
+     * Default paste behavior
+     */
+    CompatiblePasteType[CompatiblePasteType["Normal"] = 0] = "Normal";
+    /**
+     * Paste only the plain text
+     */
+    CompatiblePasteType[CompatiblePasteType["AsPlainText"] = 1] = "AsPlainText";
+    /**
+     * Apply the current style to pasted content
+     */
+    CompatiblePasteType[CompatiblePasteType["MergeFormat"] = 2] = "MergeFormat";
+    /**
+     * If there is a image uri in the clipboard, paste the content as image element
+     */
+    CompatiblePasteType[CompatiblePasteType["AsImage"] = 3] = "AsImage";
+})(CompatiblePasteType = exports.CompatiblePasteType || (exports.CompatiblePasteType = {}));
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/PluginEventType.ts":
@@ -32256,6 +32207,12 @@ var CompatiblePluginEventType;
      * Editor changed the selection.
      */
     CompatiblePluginEventType[CompatiblePluginEventType["SelectionChanged"] = 22] = "SelectionChanged";
+    /**
+     * EXPERIMENTAL FEATURE
+     * Editor content is about to be changed by keyboard event.
+     * This is only used by Content Model editing
+     */
+    CompatiblePluginEventType[CompatiblePluginEventType["BeforeKeyboardEditing"] = 23] = "BeforeKeyboardEditing";
 })(CompatiblePluginEventType = exports.CompatiblePluginEventType || (exports.CompatiblePluginEventType = {}));
 
 
@@ -32602,7 +32559,7 @@ var CompatibleTableOperation;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompatibleTableOperation = exports.CompatibleTableBorderFormat = exports.CompatibleSelectionRangeTypes = exports.CompatibleRegionType = exports.CompatibleQueryScope = exports.CompatiblePositionType = exports.CompatiblePluginEventType = exports.CompatibleNumberingListType = exports.CompatibleNodeType = exports.CompatibleListType = exports.CompatibleKnownPasteSourceType = exports.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = exports.CompatibleDelimiterClasses = exports.CompatibleDefinitionType = exports.CompatibleDarkModeDatasetNames = exports.CompatibleContentType = exports.CompatibleContentTypePrefix = exports.CompatibleContentPosition = exports.CompatibleColorTransformDirection = exports.CompatibleClearFormatMode = exports.CompatibleChangeSource = exports.CompatibleCapitalization = exports.CompatibleBulletListType = exports.CompatibleAlignment = void 0;
+exports.CompatibleTableOperation = exports.CompatibleTableBorderFormat = exports.CompatibleSelectionRangeTypes = exports.CompatibleRegionType = exports.CompatibleQueryScope = exports.CompatiblePositionType = exports.CompatiblePluginEventType = exports.CompatiblePasteType = exports.CompatibleNumberingListType = exports.CompatibleNodeType = exports.CompatibleListType = exports.CompatibleKnownPasteSourceType = exports.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = exports.CompatibleDelimiterClasses = exports.CompatibleDefinitionType = exports.CompatibleDarkModeDatasetNames = exports.CompatibleContentType = exports.CompatibleContentTypePrefix = exports.CompatibleContentPosition = exports.CompatibleColorTransformDirection = exports.CompatibleClearFormatMode = exports.CompatibleChangeSource = exports.CompatibleCapitalization = exports.CompatibleBulletListType = exports.CompatibleAlignment = void 0;
 var Alignment_1 = __webpack_require__(/*! ./Alignment */ "./packages/roosterjs-editor-types/lib/compatibleEnum/Alignment.ts");
 Object.defineProperty(exports, "CompatibleAlignment", { enumerable: true, get: function () { return Alignment_1.CompatibleAlignment; } });
 var BulletListType_1 = __webpack_require__(/*! ./BulletListType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/BulletListType.ts");
@@ -32658,6 +32615,8 @@ var NodeType_1 = __webpack_require__(/*! ./NodeType */ "./packages/roosterjs-edi
 Object.defineProperty(exports, "CompatibleNodeType", { enumerable: true, get: function () { return NodeType_1.CompatibleNodeType; } });
 var NumberingListType_1 = __webpack_require__(/*! ./NumberingListType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/NumberingListType.ts");
 Object.defineProperty(exports, "CompatibleNumberingListType", { enumerable: true, get: function () { return NumberingListType_1.CompatibleNumberingListType; } });
+var PasteType_1 = __webpack_require__(/*! ./PasteType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PasteType.ts");
+Object.defineProperty(exports, "CompatiblePasteType", { enumerable: true, get: function () { return PasteType_1.CompatiblePasteType; } });
 var PluginEventType_1 = __webpack_require__(/*! ./PluginEventType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PluginEventType.ts");
 Object.defineProperty(exports, "CompatiblePluginEventType", { enumerable: true, get: function () { return PluginEventType_1.CompatiblePluginEventType; } });
 var PositionType_1 = __webpack_require__(/*! ./PositionType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/PositionType.ts");