roosterjs 8.42.0 → 8.44.0

package/dist/rooster.js

@@ -2844,6 +2844,7 @@ function getElementBasedFormatState(editor, event) {
         canUnlink: !!editor.queryElements('a[href]', 1 /* OnSelection */)[0],
         canAddImageAltText: !!editor.queryElements('img', 1 /* OnSelection */)[0],
         isBlockQuote: !!editor.queryElements('blockquote', 1 /* OnSelection */)[0],
+        isCodeInline: !!editor.queryElements('code', 1 /* OnSelection */)[0],
         isCodeBlock: !!editor.queryElements('pre>code', 1 /* OnSelection */)[0],
         isInTable: !!table,
         tableFormat: tableFormat,
@@ -2972,6 +2973,14 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
         wrapper.parentNode.insertBefore(br, wrapper.nextSibling);
     }
     var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(wrapper);
+    if (!isBlock &&
+        isReadonly &&
+        editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+        (0, roosterjs_editor_dom_1.addDelimiters)(entity.wrapper);
+        if (entity.wrapper.nextElementSibling) {
+            editor.select(new roosterjs_editor_dom_1.Position(entity.wrapper.nextElementSibling, -3 /* After */));
+        }
+    }
     editor.triggerContentChangedEvent("InsertEntity" /* InsertEntity */, entity);
     return entity;
 }
@@ -4377,9 +4386,11 @@ function blockFormat(editor, callback, beforeRunCallback, apiName) {
     (0, formatUndoSnapshot_1.default)(editor, function (start, end) {
         if (!beforeRunCallback || beforeRunCallback()) {
             var regions = editor.getSelectedRegions();
-            var chains_1 = roosterjs_editor_dom_1.VListChain.createListChains(regions, start === null || start === void 0 ? void 0 : start.node);
-            regions.forEach(function (region) { return callback(region, start, end, chains_1); });
-            (0, commitListChains_1.default)(editor, chains_1);
+            if (regions.length > 0) {
+                var chains_1 = roosterjs_editor_dom_1.VListChain.createListChains(regions, start === null || start === void 0 ? void 0 : start.node);
+                regions.forEach(function (region) { return callback(region, start, end, chains_1); });
+                (0, commitListChains_1.default)(editor, chains_1);
+            }
         }
         if (selection.type == 0 /* Normal */) {
             editor.select(start, end);
@@ -4792,6 +4803,7 @@ var addUndoSnapshot = function (core, callback, changeSource, canUndoByBackspace
 };
 exports.addUndoSnapshot = addUndoSnapshot;
 function addUndoSnapshotInternal(core, canUndoByBackspace) {
+    var _a;
     if (!core.lifecycle.shadowEditFragment) {
         var rangeEx = core.api.getSelectionRangeEx(core);
         var isDarkMode = core.lifecycle.isDarkMode;
@@ -4799,6 +4811,7 @@ function addUndoSnapshotInternal(core, canUndoByBackspace) {
         core.undo.snapshotsService.addSnapshot({
             html: core.contentDiv.innerHTML,
             metadata: metadata,
+            knownColors: ((_a = core.darkColorHandler) === null || _a === void 0 ? void 0 : _a.getKnownColorsCopy()) || [],
         }, canUndoByBackspace);
         core.undo.hasNewContent = false;
     }
@@ -5312,7 +5325,7 @@ var getContent = function (core, mode) {
                     : 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.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */, !!core.darkColorHandler, core.lifecycle.isDarkMode);
         }
         if (triggerExtractContentEvent) {
             core.api.triggerEvent(core, {
@@ -5634,6 +5647,8 @@ var getStyleBasedFormatState = function (core, node) {
             'line-height',
             'margin-top',
             'margin-bottom',
+            'text-align',
+            'direction',
         ])
         : [];
     var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler, isDarkMode = core.lifecycle.isDarkMode;
@@ -5677,6 +5692,8 @@ var getStyleBasedFormatState = function (core, node) {
             lineHeight: styles[4],
             marginTop: styles[5],
             marginBottom: styles[6],
+            textAlign: styles[7],
+            direction: styles[8],
         };
     }
     else {
@@ -5710,6 +5727,8 @@ var getStyleBasedFormatState = function (core, node) {
                 }
                 : undefined,
             lineHeight: styles[4],
+            textAlign: styles[7],
+            direction: styles[8],
         };
     }
 };
@@ -5951,6 +5970,13 @@ var restoreUndoSnapshot = function (core, step) {
         try {
             core.undo.isRestoring = true;
             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);
+                });
+            }
         }
         finally {
             core.undo.isRestoring = false;
@@ -6284,7 +6310,7 @@ var setContent = function (core, content, triggerContentChangedEvent, metadata)
     }
     var isDarkMode = core.lifecycle.isDarkMode;
     if ((!metadata && isDarkMode) || (metadata && !!metadata.isDarkMode != !!isDarkMode)) {
-        core.api.transformColor(core, core.contentDiv, false /*includeSelf*/, null /*callback*/, isDarkMode ? 0 /* LightToDark */ : 1 /* DarkToLight */, true /*forceTransform*/);
+        core.api.transformColor(core, core.contentDiv, false /*includeSelf*/, null /*callback*/, isDarkMode ? 0 /* LightToDark */ : 1 /* DarkToLight */, true /*forceTransform*/, metadata === null || metadata === void 0 ? void 0 : metadata.isDarkMode);
         contentChanged = true;
     }
     if (triggerContentChangedEvent && contentChanged) {
@@ -6452,14 +6478,14 @@ var ColorAttributeName = [
  * @param forceTransform By default this function will only work when editor core is in dark mode.
  * Pass true to this value to force do color transformation even editor core is in light mode
  */
-var transformColor = function (core, rootNode, includeSelf, callback, direction, forceTransform) {
+var transformColor = function (core, rootNode, includeSelf, callback, direction, forceTransform, fromDarkMode) {
     var darkColorHandler = core.darkColorHandler;
     var elements = rootNode && (forceTransform || core.lifecycle.isDarkMode)
         ? getAll(rootNode, includeSelf)
         : [];
     callback === null || callback === void 0 ? void 0 : callback();
     if (darkColorHandler) {
-        transformV2(elements, darkColorHandler, direction == 0 /* LightToDark */);
+        transformV2(elements, darkColorHandler, !!fromDarkMode, direction == 0 /* LightToDark */);
     }
     else {
         if (direction == 1 /* DarkToLight */) {
@@ -6474,11 +6500,13 @@ var transformColor = function (core, rootNode, includeSelf, callback, direction,
     }
 };
 exports.transformColor = transformColor;
-function transformV2(elements, darkColorHandler, toDark) {
+function transformV2(elements, darkColorHandler, fromDark, toDark) {
     elements.forEach(function (element) {
         ColorAttributeName.forEach(function (names, i) {
             var color = darkColorHandler.parseColorValue(element.style.getPropertyValue(names[0 /* CssColor */]) ||
-                element.getAttribute(names[1 /* HtmlColor */])).lightModeColor;
+                element.getAttribute(names[1 /* HtmlColor */]), fromDark).lightModeColor;
+            element.style.setProperty(names[0 /* CssColor */], null);
+            element.removeAttribute(names[1 /* HtmlColor */]);
             if (color && color != 'inherit') {
                 (0, roosterjs_editor_dom_1.setColor)(element, color, i != 0, toDark, false /*shouldAdaptFontColor*/, darkColorHandler);
             }
@@ -7225,6 +7253,7 @@ exports.default = EditPlugin;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var inlineEntityOnPluginEvent_1 = __webpack_require__(/*! ./utils/inlineEntityOnPluginEvent */ "./packages/roosterjs-editor-core/lib/corePlugins/utils/inlineEntityOnPluginEvent.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var ENTITY_ID_REGEX = /_(\d{1,8})$/;
 var ENTITY_CSS_REGEX = '^' + "_Entity" /* ENTITY_INFO_NAME */ + '$';
@@ -7311,6 +7340,7 @@ var EntityPlugin = /** @class */ (function () {
      * @param event PluginEvent object
      */
     EntityPlugin.prototype.onPluginEvent = function (event) {
+        var _a;
         switch (event.eventType) {
             case 6 /* MouseUp */:
                 this.handleMouseUpEvent(event);
@@ -7345,6 +7375,9 @@ var EntityPlugin = /** @class */ (function () {
                 this.handleEntityOperationEvent(event);
                 break;
         }
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+            (0, inlineEntityOnPluginEvent_1.inlineEntityOnPluginEvent)(event, this.editor);
+        }
     };
     EntityPlugin.prototype.handleContextMenuEvent = function (event) {
         var _a;
@@ -7394,6 +7427,8 @@ var EntityPlugin = /** @class */ (function () {
     };
     EntityPlugin.prototype.handleContentChangedEvent = function (event) {
         var _this = this;
+        var _a;
+        var shouldNormalizeDelimiters = false;
         // 1. find removed entities
         for (var i = this.state.knownEntityElements.length - 1; i >= 0; i--) {
             var element = this.state.knownEntityElements[i];
@@ -7402,6 +7437,11 @@ var EntityPlugin = /** @class */ (function () {
                 if (element.shadowRoot) {
                     this.triggerEvent(element, 10 /* RemoveShadowRoot */);
                 }
+                if (!shouldNormalizeDelimiters &&
+                    !element.isContentEditable &&
+                    !(0, roosterjs_editor_dom_1.isBlockElement)(element)) {
+                    shouldNormalizeDelimiters = true;
+                }
             }
         }
         // 2. collect all new entities
@@ -7425,6 +7465,10 @@ var EntityPlugin = /** @class */ (function () {
             _this.triggerEvent(_this.state.shadowEntityCache[id], 6 /* Overwrite */);
             delete _this.state.shadowEntityCache[id];
         });
+        if (shouldNormalizeDelimiters &&
+            ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */))) {
+            (0, inlineEntityOnPluginEvent_1.normalizeDelimitersInEditor)(this.editor);
+        }
     };
     EntityPlugin.prototype.handleEntityOperationEvent = function (event) {
         var _this = this;
@@ -7601,6 +7645,7 @@ var workaroundSelectionIssueForIE = roosterjs_editor_dom_1.Browser.isIE
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 var Escape = 'Escape';
+var Delete = 'Delete';
 var mouseRightButton = 2;
 var mouseLeftButton = 0;
 /**
@@ -7672,6 +7717,10 @@ var ImageSelection = /** @class */ (function () {
                             (_a = this.editor.getSelectionRange()) === null || _a === void 0 ? void 0 : _a.collapse();
                             event.rawEvent.stopPropagation();
                         }
+                        else if (key === Delete) {
+                            this.editor.deleteNode(keyDownSelection.image);
+                            event.rawEvent.preventDefault();
+                        }
                         else {
                             this.editor.select(keyDownSelection.ranges[0]);
                         }
@@ -8623,7 +8672,7 @@ function createUndoSnapshotServiceBridge(service) {
         ? {
             canMove: function (delta) { return service.canMove(delta); },
             move: function (delta) {
-                return (html = service.move(delta)) ? { html: html, metadata: null } : null;
+                return (html = service.move(delta)) ? { html: html, metadata: null, knownColors: [] } : null;
             },
             addSnapshot: function (snapshot, isAutoCompleteSnapshot) {
                 return service.addSnapshot(snapshot.html +
@@ -8741,6 +8790,222 @@ var forEachSelectedCell = function (vTable, callback) {
 exports.forEachSelectedCell = forEachSelectedCell;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/corePlugins/utils/inlineEntityOnPluginEvent.ts":
+/*!*******************************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/corePlugins/utils/inlineEntityOnPluginEvent.ts ***!
+  \*******************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeDelimitersInEditor = exports.inlineEntityOnPluginEvent = void 0;
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var DELIMITER_SELECTOR = '.' + "entityDelimiterAfter" /* DELIMITER_AFTER */ + ',.' + "entityDelimiterBefore" /* DELIMITER_BEFORE */;
+var ZERO_WIDTH_SPACE = '\u200B';
+var INLINE_ENTITY_SELECTOR = 'span' + (0, roosterjs_editor_dom_1.getEntitySelector)();
+var NBSP = '\u00A0';
+function inlineEntityOnPluginEvent(event, editor) {
+    switch (event.eventType) {
+        case 7 /* ContentChanged */:
+            if (event.source === "SetContent" /* SetContent */) {
+                normalizeDelimitersInEditor(editor);
+            }
+            break;
+        case 11 /* EditorReady */:
+            normalizeDelimitersInEditor(editor);
+            break;
+        case 10 /* BeforePaste */:
+            addDelimitersIfNeeded(event.fragment.querySelectorAll(INLINE_ENTITY_SELECTOR));
+            break;
+        case 8 /* ExtractContentWithDom */:
+        case 9 /* BeforeCutCopy */:
+            event.clonedRoot.querySelectorAll(DELIMITER_SELECTOR).forEach(removeNode);
+            break;
+        case 0 /* KeyDown */:
+            handleKeyDownEvent(editor, event);
+            break;
+    }
+}
+exports.inlineEntityOnPluginEvent = inlineEntityOnPluginEvent;
+function preventTypeInDelimiter(delimiter) {
+    var _a, _b, _c, _d;
+    delimiter.normalize();
+    var textNode = delimiter.firstChild;
+    var index = (_b = (_a = textNode.nodeValue) === null || _a === void 0 ? void 0 : _a.indexOf(ZERO_WIDTH_SPACE)) !== null && _b !== void 0 ? _b : -1;
+    if (index >= 0) {
+        (0, roosterjs_editor_dom_1.splitTextNode)(textNode, index == 0 ? 1 : index, false /* returnFirstPart */);
+        var nodeToMove_1;
+        delimiter.childNodes.forEach(function (node) {
+            if (node.nodeValue !== ZERO_WIDTH_SPACE) {
+                nodeToMove_1 = node;
+            }
+        });
+        if (nodeToMove_1) {
+            (_c = delimiter.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(nodeToMove_1, delimiter.className == "entityDelimiterBefore" /* DELIMITER_BEFORE */
+                ? delimiter
+                : delimiter.nextSibling);
+            var selection = (_d = nodeToMove_1.ownerDocument) === null || _d === void 0 ? void 0 : _d.getSelection();
+            if (selection) {
+                selection.setPosition(nodeToMove_1, new roosterjs_editor_dom_1.Position(nodeToMove_1, -1 /* End */).offset);
+            }
+        }
+    }
+}
+/**
+ * @internal
+ */
+function normalizeDelimitersInEditor(editor) {
+    removeInvalidDelimiters(editor.queryElements(DELIMITER_SELECTOR));
+    addDelimitersIfNeeded(editor.queryElements(INLINE_ENTITY_SELECTOR));
+}
+exports.normalizeDelimitersInEditor = normalizeDelimitersInEditor;
+function addDelimitersIfNeeded(nodes) {
+    nodes.forEach(function (node) {
+        if (tryGetEntityFromNode(node)) {
+            (0, roosterjs_editor_dom_1.addDelimiters)(node);
+        }
+    });
+}
+function tryGetEntityFromNode(node) {
+    return !!(node &&
+        (0, roosterjs_editor_dom_1.safeInstanceOf)(node, 'HTMLElement') &&
+        isReadOnly((0, roosterjs_editor_dom_1.getEntityFromElement)(node)));
+}
+function removeNode(el) {
+    var _a;
+    (_a = el === null || el === void 0 ? void 0 : el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(el);
+}
+function isReadOnly(entity) {
+    return ((entity === null || entity === void 0 ? void 0 : entity.isReadonly) &&
+        !(0, roosterjs_editor_dom_1.isBlockElement)(entity.wrapper) &&
+        (0, roosterjs_editor_dom_1.safeInstanceOf)(entity.wrapper, 'HTMLElement'));
+}
+function removeInvalidDelimiters(nodes) {
+    nodes.forEach(function (node) {
+        if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(node)) {
+            var sibling = node.classList.contains("entityDelimiterBefore" /* DELIMITER_BEFORE */)
+                ? node.nextElementSibling
+                : node.previousElementSibling;
+            if (!((0, roosterjs_editor_dom_1.safeInstanceOf)(sibling, 'HTMLElement') && (0, roosterjs_editor_dom_1.getEntityFromElement)(sibling))) {
+                removeNode(node);
+            }
+        }
+        else {
+            removeDelimiterAttr(node);
+        }
+    });
+}
+function removeDelimiterAttr(node) {
+    if (!node) {
+        return;
+    }
+    var isAfter = node.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
+    var entitySibling = isAfter ? node.previousElementSibling : node.nextElementSibling;
+    if (entitySibling && tryGetEntityFromNode(entitySibling)) {
+        return;
+    }
+    node.classList.remove("entityDelimiterAfter" /* DELIMITER_AFTER */, "entityDelimiterBefore" /* DELIMITER_BEFORE */);
+    node.normalize();
+    node.childNodes.forEach(function (cn) {
+        var _a, _b, _c;
+        var index = (_b = (_a = cn.textContent) === null || _a === void 0 ? void 0 : _a.indexOf(ZERO_WIDTH_SPACE)) !== null && _b !== void 0 ? _b : -1;
+        if (index >= 0) {
+            (_c = (0, roosterjs_editor_dom_1.createRange)(cn, index, cn, index + 1)) === null || _c === void 0 ? void 0 : _c.deleteContents();
+        }
+    });
+}
+function handleCollapsedEnter(editor, delimiter) {
+    var isAfter = delimiter.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
+    var sibling = isAfter ? delimiter.nextSibling : delimiter.previousSibling;
+    var positionToUse;
+    var element;
+    if (sibling) {
+        positionToUse = new roosterjs_editor_dom_1.Position(sibling, isAfter ? 0 /* Begin */ : -1 /* End */);
+    }
+    else {
+        element = delimiter.insertAdjacentElement(isAfter ? 'afterend' : 'beforebegin', (0, roosterjs_editor_dom_1.createElement)({
+            tag: 'span',
+            children: [NBSP],
+        }, editor.getDocument()));
+        if (!element) {
+            return;
+        }
+        positionToUse = new roosterjs_editor_dom_1.Position(element, 0 /* Begin */);
+    }
+    if (positionToUse) {
+        editor.select(positionToUse);
+        editor.runAsync(function (aEditor) {
+            var elAfter = aEditor.getElementAtCursor();
+            removeDelimiterAttr(elAfter);
+            removeNode(element);
+        });
+    }
+}
+var getPosition = function (container) {
+    if (container && (0, roosterjs_editor_dom_1.getDelimiterFromElement)(container)) {
+        var isAfter = container.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */);
+        return new roosterjs_editor_dom_1.Position(container, isAfter ? -3 /* After */ : -2 /* Before */);
+    }
+    return undefined;
+};
+function handleSelectionNotCollapsed(editor, range, event) {
+    var startContainer = range.startContainer, endContainer = range.endContainer, startOffset = range.startOffset, endOffset = range.endOffset;
+    var startElement = editor.getElementAtCursor(DELIMITER_SELECTOR, startContainer);
+    var endElement = editor.getElementAtCursor(DELIMITER_SELECTOR, endContainer);
+    var startUpdate = getPosition(startElement);
+    var endUpdate = getPosition(endElement);
+    if (startUpdate || endUpdate) {
+        editor.select(startUpdate !== null && startUpdate !== void 0 ? startUpdate : new roosterjs_editor_dom_1.Position(startContainer, startOffset), endUpdate !== null && endUpdate !== void 0 ? endUpdate : new roosterjs_editor_dom_1.Position(endContainer, endOffset));
+    }
+    editor.runAsync(function (aEditor) {
+        var delimiter = aEditor.getElementAtCursor(DELIMITER_SELECTOR);
+        if (delimiter) {
+            preventTypeInDelimiter(delimiter);
+            if (event.which === 13 /* ENTER */) {
+                removeDelimiterAttr(delimiter);
+            }
+        }
+    });
+}
+function handleKeyDownEvent(editor, event) {
+    var _a, _b;
+    var range = editor.getSelectionRangeEx();
+    var rawEvent = event.rawEvent;
+    if (range.type != 0 /* Normal */) {
+        return;
+    }
+    if (range.areAllCollapsed && ((0, roosterjs_editor_dom_1.isCharacterValue)(rawEvent) || rawEvent.which === 13 /* ENTER */)) {
+        var position = (_a = editor.getFocusedPosition()) === null || _a === void 0 ? void 0 : _a.normalize();
+        if (!position) {
+            return;
+        }
+        var element = position.element, node = position.node;
+        var refNode = element == node ? element.childNodes.item(position.offset) : element;
+        var delimiter_1 = editor.getElementAtCursor(DELIMITER_SELECTOR, refNode);
+        if (!delimiter_1) {
+            return;
+        }
+        if (rawEvent.which === 13 /* ENTER */) {
+            handleCollapsedEnter(editor, delimiter_1);
+        }
+        else if (((_b = delimiter_1.firstChild) === null || _b === void 0 ? void 0 : _b.nodeType) == 3 /* Text */) {
+            editor.runAsync(function () { return preventTypeInDelimiter(delimiter_1); });
+        }
+    }
+    else if (!range.areAllCollapsed && !rawEvent.shiftKey && rawEvent.which != 16 /* SHIFT */) {
+        var currentRange = range.ranges[0];
+        if (!currentRange) {
+            return;
+        }
+        handleSelectionNotCollapsed(editor, currentRange, rawEvent);
+    }
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/corePlugins/utils/removeCellsOutsideSelection.ts":
@@ -8812,6 +9077,13 @@ var DarkColorHandlerImpl = /** @class */ (function () {
         this.getDarkColor = getDarkColor;
         this.knownColors = {};
     }
+    /**
+     * Get a copy of known colors
+     * @returns
+     */
+    DarkColorHandlerImpl.prototype.getKnownColorsCopy = function () {
+        return Object.values(this.knownColors);
+    };
     /**
      * Given a light mode color value and an optional dark mode color value, register this color
      * so that editor can handle it, then return the CSS color value for current color mode.
@@ -8853,11 +9125,13 @@ var DarkColorHandlerImpl = /** @class */ (function () {
      * Parse an existing color value, if it is in variable-based color format, extract color key,
      * light color and query related dark color if any
      * @param color The color string to parse
+     * @param isInDarkMode Whether current content is in dark mode. When set to true, if the color value is not in dark var format,
+     * we will treat is as a dark mode color and try to find a matched dark mode color.
      */
-    DarkColorHandlerImpl.prototype.parseColorValue = function (color) {
+    DarkColorHandlerImpl.prototype.parseColorValue = function (color, isInDarkMode) {
         var _a;
         var key;
-        var lightModeColor = color || '';
+        var lightModeColor = '';
         var darkModeColor;
         if (color) {
             var match = color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
@@ -8871,9 +9145,42 @@ var DarkColorHandlerImpl = /** @class */ (function () {
                     lightModeColor = '';
                 }
             }
+            else if (isInDarkMode) {
+                // If editor is in dark mode but the color is not in dark color format, it is possible the color was inserted from external code
+                // without any light color info. So we first try to see if there is a known dark color can match this color, and use its related
+                // light color as light mode color. Otherwise we need to drop this color to avoid show "white on white" content.
+                lightModeColor = this.findLightColorFromDarkColor(color) || '';
+                if (lightModeColor) {
+                    darkModeColor = color;
+                }
+            }
+            else {
+                lightModeColor = color;
+            }
         }
         return { key: key, lightModeColor: lightModeColor, darkModeColor: darkModeColor };
     };
+    /**
+     * Find related light mode color from dark mode color.
+     * @param darkColor The existing dark color
+     */
+    DarkColorHandlerImpl.prototype.findLightColorFromDarkColor = function (darkColor) {
+        var _this = this;
+        var rgbSearch = (0, roosterjs_editor_dom_1.parseColor)(darkColor);
+        if (rgbSearch) {
+            var key = (0, roosterjs_editor_dom_1.getObjectKeys)(this.knownColors).find(function (key) {
+                var rgbCurrent = (0, roosterjs_editor_dom_1.parseColor)(_this.knownColors[key].darkModeColor);
+                return (rgbCurrent &&
+                    rgbCurrent[0] == rgbSearch[0] &&
+                    rgbCurrent[1] == rgbSearch[1] &&
+                    rgbCurrent[2] == rgbSearch[2]);
+            });
+            if (key) {
+                return this.knownColors[key].lightModeColor;
+            }
+        }
+        return null;
+    };
     return DarkColorHandlerImpl;
 }());
 exports.default = DarkColorHandlerImpl;
@@ -9650,13 +9957,14 @@ var Editor = /** @class */ (function () {
      * @param nextDarkMode The next status of dark mode. True if the editor should be in dark mode, false if not.
      */
     Editor.prototype.setDarkModeState = function (nextDarkMode) {
-        if (this.isDarkMode() == !!nextDarkMode) {
+        var isDarkMode = this.isDarkMode();
+        if (isDarkMode == !!nextDarkMode) {
             return;
         }
         var core = this.getCore();
         core.api.transformColor(core, core.contentDiv, false /*includeSelf*/, null /*callback*/, nextDarkMode
             ? 0 /* LightToDark */
-            : 1 /* DarkToLight */, true /*forceTransform*/);
+            : 1 /* DarkToLight */, true /*forceTransform*/, isDarkMode);
         this.triggerContentChangedEvent(nextDarkMode ? "SwitchToDarkMode" /* SwitchToDarkMode */ : "SwitchToLightMode" /* SwitchToLightMode */);
     };
     /**
@@ -11130,6 +11438,110 @@ var SelectionScoper = /** @class */ (function () {
 exports.default = SelectionScoper;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/delimiter/addDelimiters.ts":
+/*!**********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/delimiter/addDelimiters.ts ***!
+  \**********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addDelimiterBefore = exports.addDelimiterAfter = void 0;
+var createElement_1 = __webpack_require__(/*! ../utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
+var getDelimiterFromElement_1 = __webpack_require__(/*! ./getDelimiterFromElement */ "./packages/roosterjs-editor-dom/lib/delimiter/getDelimiterFromElement.ts");
+var ZERO_WIDTH_SPACE = '\u200B';
+/**
+ * Adds delimiters to the element provided. If the delimiters already exists, will not be added
+ * @param node the node to add the delimiters
+ */
+function addDelimiters(node) {
+    var _a = getDelimiters(node), delimiterAfter = _a[0], delimiterBefore = _a[1];
+    if (!delimiterAfter) {
+        delimiterAfter = addDelimiterAfter(node);
+    }
+    if (!delimiterBefore) {
+        delimiterBefore = addDelimiterBefore(node);
+    }
+    return [delimiterAfter, delimiterBefore];
+}
+exports.default = addDelimiters;
+/**
+ * Adds delimiter after the element provided.
+ * @param element element to use
+ */
+function addDelimiterAfter(element) {
+    return insertDelimiter(element, "entityDelimiterAfter" /* DELIMITER_AFTER */);
+}
+exports.addDelimiterAfter = addDelimiterAfter;
+/**
+ * Adds delimiter before the element provided.
+ * @param element element to use
+ */
+function addDelimiterBefore(element) {
+    return insertDelimiter(element, "entityDelimiterBefore" /* DELIMITER_BEFORE */);
+}
+exports.addDelimiterBefore = addDelimiterBefore;
+function getDelimiters(entityWrapper) {
+    var result = [];
+    var nextElementSibling = entityWrapper.nextElementSibling, previousElementSibling = entityWrapper.previousElementSibling;
+    result.push(isDelimiter(nextElementSibling, "entityDelimiterAfter" /* DELIMITER_AFTER */), isDelimiter(previousElementSibling, "entityDelimiterBefore" /* DELIMITER_BEFORE */));
+    return result;
+}
+function isDelimiter(el, className) {
+    return el && (0, getDelimiterFromElement_1.default)(el) && el.classList.contains(className) ? el : undefined;
+}
+function insertDelimiter(element, delimiterClass) {
+    var span = (0, createElement_1.default)({
+        tag: 'span',
+        className: delimiterClass,
+        children: [ZERO_WIDTH_SPACE],
+    }, element.ownerDocument);
+    if (span) {
+        var insertPosition = delimiterClass == "entityDelimiterAfter" /* DELIMITER_AFTER */ ? 'afterend' : 'beforebegin';
+        element.insertAdjacentElement(insertPosition, span);
+    }
+    return element;
+}
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/delimiter/getDelimiterFromElement.ts":
+/*!********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/delimiter/getDelimiterFromElement.ts ***!
+  \********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
+var ZERO_WIDTH_SPACE = '\u200B';
+/**
+ * Retrieves Delimiter information from a provided element.
+ * @param element element to try to retrieve a delimiter
+ * @returns delimiter info if it is a Delimiter, else null
+ */
+function getDelimiterFromElement(element) {
+    if (!element) {
+        return null;
+    }
+    if ((0, safeInstanceOf_1.default)(element, 'HTMLSpanElement') &&
+        (element.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */) ||
+            element.classList.contains("entityDelimiterBefore" /* DELIMITER_BEFORE */)) &&
+        element.textContent === ZERO_WIDTH_SPACE) {
+        return element;
+    }
+    return null;
+}
+exports.default = getDelimiterFromElement;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/edit/adjustInsertPosition.ts":
@@ -12512,7 +12924,6 @@ var DEFAULT_STYLE_VALUES = {
     'outline-style': 'none',
     'outline-width': '0px',
     overflow: 'visible',
-    'text-decoration': 'none',
     '-webkit-text-stroke-width': '0px',
     'word-wrap': 'break-word',
     'margin-left': '0px',
@@ -12741,9 +13152,9 @@ exports.isCssVariable = isCssVariable;
 "use strict";
 
 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.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;
+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.getDelimiterFromElement = exports.addDelimiterBefore = exports.addDelimiterAfter = exports.addDelimiters = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
+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.parseColor = exports.isNodeAfter = exports.getIntersectedRect = exports.moveChildNodes = exports.KnownCreateElementData = exports.createElement = 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 = exports.getStyles = exports.isCtrlOrMetaPressed = exports.isCharacterValue = exports.isModifierKey = exports.clearEventDataCache = 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");
@@ -12752,6 +13163,12 @@ var ContentTraverser_1 = __webpack_require__(/*! ./contentTraverser/ContentTrave
 Object.defineProperty(exports, "ContentTraverser", { enumerable: true, get: function () { return ContentTraverser_1.default; } });
 var PositionContentSearcher_1 = __webpack_require__(/*! ./contentTraverser/PositionContentSearcher */ "./packages/roosterjs-editor-dom/lib/contentTraverser/PositionContentSearcher.ts");
 Object.defineProperty(exports, "PositionContentSearcher", { enumerable: true, get: function () { return PositionContentSearcher_1.default; } });
+var addDelimiters_1 = __webpack_require__(/*! ./delimiter/addDelimiters */ "./packages/roosterjs-editor-dom/lib/delimiter/addDelimiters.ts");
+Object.defineProperty(exports, "addDelimiters", { enumerable: true, get: function () { return addDelimiters_1.default; } });
+Object.defineProperty(exports, "addDelimiterAfter", { enumerable: true, get: function () { return addDelimiters_1.addDelimiterAfter; } });
+Object.defineProperty(exports, "addDelimiterBefore", { enumerable: true, get: function () { return addDelimiters_1.addDelimiterBefore; } });
+var getDelimiterFromElement_1 = __webpack_require__(/*! ./delimiter/getDelimiterFromElement */ "./packages/roosterjs-editor-dom/lib/delimiter/getDelimiterFromElement.ts");
+Object.defineProperty(exports, "getDelimiterFromElement", { enumerable: true, get: function () { return getDelimiterFromElement_1.default; } });
 var getInlineElementAtNode_1 = __webpack_require__(/*! ./inlineElements/getInlineElementAtNode */ "./packages/roosterjs-editor-dom/lib/inlineElements/getInlineElementAtNode.ts");
 Object.defineProperty(exports, "getInlineElementAtNode", { enumerable: true, get: function () { return getInlineElementAtNode_1.default; } });
 var ImageInlineElement_1 = __webpack_require__(/*! ./inlineElements/ImageInlineElement */ "./packages/roosterjs-editor-dom/lib/inlineElements/ImageInlineElement.ts");
@@ -12839,6 +13256,8 @@ var getIntersectedRect_1 = __webpack_require__(/*! ./utils/getIntersectedRect */
 Object.defineProperty(exports, "getIntersectedRect", { enumerable: true, get: function () { return getIntersectedRect_1.default; } });
 var isNodeAfter_1 = __webpack_require__(/*! ./utils/isNodeAfter */ "./packages/roosterjs-editor-dom/lib/utils/isNodeAfter.ts");
 Object.defineProperty(exports, "isNodeAfter", { enumerable: true, get: function () { return isNodeAfter_1.default; } });
+var parseColor_1 = __webpack_require__(/*! ./utils/parseColor */ "./packages/roosterjs-editor-dom/lib/utils/parseColor.ts");
+Object.defineProperty(exports, "parseColor", { enumerable: true, get: function () { return parseColor_1.default; } });
 var VTable_1 = __webpack_require__(/*! ./table/VTable */ "./packages/roosterjs-editor-dom/lib/table/VTable.ts");
 Object.defineProperty(exports, "VTable", { enumerable: true, get: function () { return VTable_1.default; } });
 var isWholeTableSelected_1 = __webpack_require__(/*! ./table/isWholeTableSelected */ "./packages/roosterjs-editor-dom/lib/table/isWholeTableSelected.ts");
@@ -19417,6 +19836,51 @@ function normalizeRect(clientRect) {
 exports.default = normalizeRect;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/parseColor.ts":
+/*!***************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/parseColor.ts ***!
+  \***************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var HEX3_REGEX = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/;
+var HEX6_REGEX = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/;
+var RGB_REGEX = /^rgb\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
+var RGBA_REGEX = /^rgba\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*\)$/;
+/**
+ * Parse color string to r/g/b value.
+ * If the given color is not in a recognized format, return null
+ */
+function parseColor(color) {
+    color = (color || '').trim();
+    var match;
+    if ((match = color.match(HEX3_REGEX))) {
+        return [
+            parseInt(match[1] + match[1], 16),
+            parseInt(match[2] + match[2], 16),
+            parseInt(match[3] + match[3], 16),
+        ];
+    }
+    else if ((match = color.match(HEX6_REGEX))) {
+        return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
+    }
+    else if ((match = color.match(RGB_REGEX) || color.match(RGBA_REGEX))) {
+        return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
+    }
+    else {
+        // CSS color names such as red, green is not included for now.
+        // If need, we can add those colors from https://www.w3.org/wiki/CSS/Properties/color/keywords
+        return null;
+    }
+}
+exports.default = parseColor;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/queryElements.ts":
@@ -19586,6 +20050,7 @@ exports.default = safeInstanceOf;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var parseColor_1 = __webpack_require__(/*! ./parseColor */ "./packages/roosterjs-editor-dom/lib/utils/parseColor.ts");
 var WHITE = '#ffffff';
 var GRAY = '#333333';
 var BLACK = '#000000';
@@ -19680,40 +20145,19 @@ function isADarkOrBrightColor(color) {
  * @returns
  */
 function calculateLightness(color) {
-    var _a, _b;
-    var r;
-    var g;
-    var b;
-    if (color.substring(0, 1) == '#') {
-        _a = getColorsFromHEX(color), r = _a[0], g = _a[1], b = _a[2];
-    }
-    else {
-        _b = getColorsFromRGB(color), r = _b[0], g = _b[1], b = _b[2];
-    }
+    var colorValues = (0, parseColor_1.default)(color);
     // Use the values of r,g,b to calculate the lightness in the HSl representation
     //First calculate the fraction of the light in each color, since in css the value of r,g,b is in the interval of [0,255], we have
-    var red = r / 255;
-    var green = g / 255;
-    var blue = b / 255;
-    //Then the lightness in the HSL representation is the average between maximum fraction of r,g,b and the minimum fraction
-    return (Math.max(red, green, blue) + Math.min(red, green, blue)) * 50;
-}
-function getColorsFromHEX(color) {
-    if (color.length === 4) {
-        color = color.replace(/(.)/g, '$1$1');
+    if (colorValues) {
+        var red = colorValues[0] / 255;
+        var green = colorValues[1] / 255;
+        var blue = colorValues[2] / 255;
+        //Then the lightness in the HSL representation is the average between maximum fraction of r,g,b and the minimum fraction
+        return (Math.max(red, green, blue) + Math.min(red, green, blue)) * 50;
+    }
+    else {
+        return 255;
     }
-    var colors = color.replace('#', '');
-    var r = parseInt(colors.substr(0, 2), 16);
-    var g = parseInt(colors.substr(2, 2), 16);
-    var b = parseInt(colors.substr(4, 2), 16);
-    return [r, g, b];
-}
-function getColorsFromRGB(color) {
-    var colors = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
-    var r = parseInt(colors[1]);
-    var g = parseInt(colors[2]);
-    var b = parseInt(colors[3]);
-    return [r, g, b];
 }
 
 
@@ -20403,6 +20847,9 @@ var DragAndDropHelper = /** @class */ (function () {
         this.onSubmit = onSubmit;
         this.handler = handler;
         this.zoomScale = zoomScale;
+        this.initX = 0;
+        this.initY = 0;
+        this.initValue = undefined;
         this.onMouseDown = function (e) {
             var _a;
             var _b, _c;
@@ -20418,7 +20865,8 @@ var DragAndDropHelper = /** @class */ (function () {
             var _d = _this.dndMouse.getPageXY(e), pageX = _d[0], pageY = _d[1];
             var deltaX = (pageX - _this.initX) / _this.zoomScale;
             var deltaY = (pageY - _this.initY) / _this.zoomScale;
-            if ((_b = (_a = _this.handler).onDragging) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue, deltaX, deltaY)) {
+            if (_this.initValue &&
+                ((_b = (_a = _this.handler).onDragging) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue, deltaX, deltaY))) {
                 (_c = _this.onSubmit) === null || _c === void 0 ? void 0 : _c.call(_this, _this.context, _this.trigger);
             }
         };
@@ -20520,7 +20968,7 @@ var AutoFormat = /** @class */ (function () {
             event.eventType === 6 /* MouseUp */) {
             this.lastKeyTyped = '';
         }
-        if (event.eventType === 0 /* KeyDown */) {
+        if (event.eventType === 1 /* KeyPress */) {
             var keyTyped = event.rawEvent.key;
             if (keyTyped && keyTyped.length > 1) {
                 this.lastKeyTyped = '';
@@ -20861,11 +21309,14 @@ function cacheGetReadonlyEntityElement(event, editor, operation) {
         return entityElement && !entityElement.isContentEditable ? entityElement : null;
     });
     if (element && operation !== undefined) {
-        editor.triggerPluginEvent(15 /* EntityOperation */, {
-            operation: operation,
-            rawEvent: event.rawEvent,
-            entity: (0, roosterjs_editor_dom_1.getEntityFromElement)(element),
-        });
+        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        if (entity) {
+            editor.triggerPluginEvent(15 /* EntityOperation */, {
+                operation: operation,
+                rawEvent: event.rawEvent,
+                entity: entity,
+            });
+        }
     }
     return element;
 }
@@ -20881,20 +21332,23 @@ var EnterBeforeReadonlyEntityFeature = {
         return cacheGetNeighborEntityElement(event, editor, true /*isNext*/, false /*collapseOnly*/);
     },
     handleEvent: function (event, editor) {
-        var _a;
+        var _a, _b, _c;
         event.rawEvent.preventDefault();
         var range = editor.getSelectionRange();
+        if (!range) {
+            return;
+        }
         var node = roosterjs_editor_dom_1.Position.getEnd(range).normalize().node;
         var br = editor.getDocument().createElement('BR');
-        node.parentNode.insertBefore(br, node.nextSibling);
+        (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(br, node.nextSibling);
         var block = editor.getBlockElementAtNode(node);
         var newContainer;
         if (block) {
             newContainer = block.collapseToSingleElement();
-            (_a = br.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(br);
+            (_b = br.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(br);
         }
-        editor.getSelectionRange().deleteContents();
-        if (newContainer.nextSibling) {
+        (_c = editor.getSelectionRange()) === null || _c === void 0 ? void 0 : _c.deleteContents();
+        if (newContainer === null || newContainer === void 0 ? void 0 : newContainer.nextSibling) {
             editor.select(newContainer.nextSibling, 0 /* Begin */);
         }
     },
@@ -20947,7 +21401,7 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
             var node = sibling && sibling.getContainerNode();
             if (!collapseOnly) {
                 var block = editor.getBlockElementAtNode(pos.node);
-                if (!block || !block.contains(node)) {
+                if (!block || (node && !block.contains(node))) {
                     node = null;
                 }
             }
@@ -20956,14 +21410,205 @@ function cacheGetNeighborEntityElement(event, editor, isNext, collapseOnly, oper
         return entityNode;
     });
     if (element && operation !== undefined) {
-        editor.triggerPluginEvent(15 /* EntityOperation */, {
-            operation: operation,
-            rawEvent: event.rawEvent,
-            entity: (0, roosterjs_editor_dom_1.getEntityFromElement)(element),
-        });
+        var entity = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        if (entity) {
+            triggerOperation(entity, editor, operation, event);
+        }
     }
     return element;
 }
+/**
+ * @requires ExperimentalFeatures.InlineEntityReadOnlyDelimiters to be enabled
+ * Content edit feature to move the cursor from Delimiters around Entities when using Right or Left Arrow Keys
+ */
+var MoveBetweenDelimitersFeature = {
+    keys: [39 /* RIGHT */, 37 /* LEFT */],
+    shouldHandleEvent: function (event, editor) {
+        if (!editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+            return false;
+        }
+        var element = editor.getElementAtCursor();
+        if (!element) {
+            return false;
+        }
+        var isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'direction') === 'rtl';
+        var shouldCheckBefore = isRTL == (event.rawEvent.which === 37 /* LEFT */);
+        return getIsDelimiterAtCursor(event, editor, shouldCheckBefore);
+    },
+    handleEvent: function (event, editor) {
+        var checkBefore = cacheGetCheckBefore(event);
+        var delimiter = cacheDelimiter(event, checkBefore);
+        if (!delimiter) {
+            return;
+        }
+        var _a = getRelatedElements(delimiter, checkBefore), delimiterPair = _a.delimiterPair, entity = _a.entity;
+        if (delimiterPair && entity && (0, roosterjs_editor_dom_1.matchesSelector)(entity, (0, roosterjs_editor_dom_1.getEntitySelector)())) {
+            event.rawEvent.preventDefault();
+            editor.runAsync(function () {
+                var positionType = checkBefore
+                    ? event.rawEvent.shiftKey
+                        ? -3 /* After */
+                        : -1 /* End */
+                    : -2 /* Before */;
+                var position = new roosterjs_editor_dom_1.Position(delimiterPair, positionType);
+                if (event.rawEvent.shiftKey) {
+                    var selection = delimiterPair.ownerDocument.getSelection();
+                    selection === null || selection === void 0 ? void 0 : selection.extend(position.node, position.offset);
+                }
+                else {
+                    editor.select(position);
+                }
+            });
+        }
+    },
+};
+/**
+ * @requires ExperimentalFeatures.InlineEntityReadOnlyDelimiters to be enabled
+ * Content edit Feature to trigger a Delete Entity Operation when one of the Delimiter is about to be removed with DELETE or Backspace
+ */
+var RemoveEntityBetweenDelimitersFeature = {
+    keys: [8 /* BACKSPACE */, 46 /* DELETE */],
+    shouldHandleEvent: function (event, editor) {
+        if (!editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+            return false;
+        }
+        var range = editor.getSelectionRange();
+        if (!(range === null || range === void 0 ? void 0 : range.collapsed)) {
+            return false;
+        }
+        var checkBefore = event.rawEvent.which === 46 /* DELETE */;
+        var isDelimiter = getIsDelimiterAtCursor(event, editor, checkBefore);
+        if (isDelimiter) {
+            var delimiter = cacheDelimiter(event, checkBefore);
+            var entityElement = checkBefore
+                ? delimiter === null || delimiter === void 0 ? void 0 : delimiter.nextElementSibling
+                : delimiter === null || delimiter === void 0 ? void 0 : delimiter.previousElementSibling;
+            return !!cacheEntityBetweenDelimiter(event, editor, checkBefore, entityElement);
+        }
+        return false;
+    },
+    handleEvent: function (event, editor) {
+        var checkBefore = event.rawEvent.which === 46 /* DELETE */;
+        cacheEntityBetweenDelimiter(event, editor, checkBefore, null, checkBefore ? 4 /* RemoveFromStart */ : 5 /* RemoveFromEnd */);
+    },
+};
+function getIsDelimiterAtCursor(event, editor, checkBefore) {
+    var _a;
+    var position = (_a = editor.getFocusedPosition()) === null || _a === void 0 ? void 0 : _a.normalize();
+    cacheGetCheckBefore(event, checkBefore);
+    if (!position) {
+        return false;
+    }
+    var focusedElement = position.node.nodeType == 3 /* Text */
+        ? position.node
+        : position.node == position.element
+            ? position.element.childNodes.item(position.offset)
+            : position.element;
+    var searcher = editor.getContentSearcherOfCursor(event);
+    var data = checkBefore
+        ? {
+            class: "entityDelimiterBefore" /* DELIMITER_BEFORE */,
+            pairClass: "entityDelimiterAfter" /* DELIMITER_AFTER */,
+            getDelimiterPair: function (element) { var _a; return (_a = element.nextElementSibling) === null || _a === void 0 ? void 0 : _a.nextElementSibling; },
+            getNextSibling: function () {
+                var _a;
+                return (_a = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementAfter()) === null || _a === void 0 ? void 0 : _a.getContainerNode();
+            },
+            isAtEndOrBeginning: position.isAtEnd,
+        }
+        : {
+            class: "entityDelimiterAfter" /* DELIMITER_AFTER */,
+            pairClass: "entityDelimiterBefore" /* DELIMITER_BEFORE */,
+            getDelimiterPair: function (element) { var _a; return (_a = element.previousElementSibling) === null || _a === void 0 ? void 0 : _a.previousElementSibling; },
+            getNextSibling: function () {
+                var _a;
+                return (_a = searcher === null || searcher === void 0 ? void 0 : searcher.getInlineElementBefore()) === null || _a === void 0 ? void 0 : _a.getContainerNode();
+            },
+            isAtEndOrBeginning: position.offset == 0,
+        };
+    var sibling = data.getNextSibling();
+    if (data.isAtEndOrBeginning && sibling) {
+        var elAtCursor = editor.getElementAtCursor('.' + data.class, sibling);
+        if (elAtCursor && !!shouldHandle(elAtCursor)) {
+            return true;
+        }
+    }
+    var entityAtCursor = editor.getElementAtCursor('.' + data.class, focusedElement);
+    return !!shouldHandle(entityAtCursor);
+    function shouldHandle(element) {
+        var _a;
+        return (element &&
+            (((_a = data.getDelimiterPair(element)) === null || _a === void 0 ? void 0 : _a.className) || '').indexOf(data.pairClass) > -1 &&
+            cacheDelimiter(event, checkBefore, element));
+    }
+}
+function cacheDelimiter(event, checkBefore, delimiter) {
+    return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'delimiter_cache_key_' + checkBefore, function () { return delimiter; });
+}
+function cacheEntityBetweenDelimiter(event, editor, checkBefore, entity, operation) {
+    var element = (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'entity_delimiter_cache_key_' + checkBefore, function () { return entity && editor.getElementAtCursor((0, roosterjs_editor_dom_1.getEntitySelector)(), entity); });
+    if (element && operation !== undefined) {
+        var entity_1 = (0, roosterjs_editor_dom_1.getEntityFromElement)(element);
+        if (entity_1) {
+            triggerOperation(entity_1, editor, operation, event);
+        }
+    }
+    return element;
+}
+function triggerOperation(entity, editor, operation, event) {
+    var _a = entity.wrapper, nextElementSibling = _a.nextElementSibling, previousElementSibling = _a.previousElementSibling;
+    editor.triggerPluginEvent(15 /* EntityOperation */, {
+        operation: operation,
+        rawEvent: event.rawEvent,
+        entity: entity,
+    });
+    if (entity.isReadonly &&
+        !(0, roosterjs_editor_dom_1.isBlockElement)(entity.wrapper) &&
+        editor.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
+        if (event.rawEvent.defaultPrevented) {
+            editor.runAsync(function () {
+                if (!editor.contains(entity.wrapper)) {
+                    removeDelimiters(nextElementSibling, previousElementSibling);
+                }
+                else {
+                    var delimiterAfter = (0, roosterjs_editor_dom_1.addDelimiters)(entity.wrapper)[0];
+                    if (delimiterAfter) {
+                        editor.select(delimiterAfter, -3 /* After */);
+                    }
+                }
+            });
+        }
+        else if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(nextElementSibling) &&
+            (0, roosterjs_editor_dom_1.getDelimiterFromElement)(previousElementSibling)) {
+            editor.select((0, roosterjs_editor_dom_1.createRange)(previousElementSibling, nextElementSibling));
+        }
+    }
+}
+function removeDelimiters(nextElementSibling, previousElementSibling) {
+    [nextElementSibling, previousElementSibling].forEach(function (sibling) {
+        var _a;
+        if ((0, roosterjs_editor_dom_1.getDelimiterFromElement)(sibling)) {
+            (_a = sibling === null || sibling === void 0 ? void 0 : sibling.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(sibling);
+        }
+    });
+}
+function cacheGetCheckBefore(event, checkBefore) {
+    return !!(0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'Check_Before', function () { return checkBefore; });
+}
+function getRelatedElements(delimiter, checkBefore) {
+    var _a, _b;
+    var entity;
+    var delimiterPair;
+    if (checkBefore) {
+        entity = delimiter.nextElementSibling;
+        delimiterPair = (_a = entity === null || entity === void 0 ? void 0 : entity.nextElementSibling) !== null && _a !== void 0 ? _a : null;
+    }
+    else {
+        entity = delimiter.previousElementSibling;
+        delimiterPair = (_b = entity === null || entity === void 0 ? void 0 : entity.previousElementSibling) !== null && _b !== void 0 ? _b : null;
+    }
+    return { entity: entity, delimiterPair: delimiterPair };
+}
 /**
  * @internal
  */
@@ -20973,6 +21618,8 @@ exports.EntityFeatures = {
     enterBeforeReadonlyEntity: EnterBeforeReadonlyEntityFeature,
     backspaceAfterEntity: BackspaceAfterEntityFeature,
     deleteBeforeEntity: DeleteBeforeEntityFeature,
+    moveBetweenDelimitersFeature: MoveBetweenDelimitersFeature,
+    removeEntityBetweenDelimiters: RemoveEntityBetweenDelimitersFeature,
 };
 
 
@@ -21050,9 +21697,11 @@ var MergeInNewLine = {
         if (li.previousSibling) {
             (0, roosterjs_editor_api_1.blockFormat)(editor, function (region, start, end) {
                 var vList = (0, roosterjs_editor_dom_1.createVListFromRegion)(region, false /*includeSiblingList*/, li);
-                vList.setIndentation(start, end, 1 /* Decrease */, true /*softOutdent*/);
-                vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
-                event.rawEvent.preventDefault();
+                if (vList) {
+                    vList.setIndentation(start, end, 1 /* Decrease */, true /*softOutdent*/);
+                    vList.writeBack(editor.isFeatureEnabled("ReuseAllAncestorListElements" /* ReuseAllAncestorListElements */));
+                    event.rawEvent.preventDefault();
+                }
             });
         }
         else {
@@ -21860,7 +22509,8 @@ var TabInTable = {
             }
             var cell = vtable.getCell(row, col);
             if (cell.td) {
-                editor.select(cell.td, 0 /* Begin */);
+                var newPos = new roosterjs_editor_dom_1.Position(cell.td, 0 /* Begin */).normalize();
+                editor.select(newPos);
                 break;
             }
         }
@@ -21937,7 +22587,7 @@ var UpDownInTable = {
                         selection_1 === null || selection_1 === void 0 ? void 0 : selection_1.setBaseAndExtent(anchorNode_1, anchorOffset_1, newPos.node, newPos.offset);
                     }
                     else {
-                        editor.select(newPos);
+                        editor.select(newPos.normalize());
                     }
                 }
             });
@@ -21945,6 +22595,23 @@ var UpDownInTable = {
     },
     defaultDisabled: !roosterjs_editor_dom_1.Browser.isChrome && !roosterjs_editor_dom_1.Browser.isSafari,
 };
+/**
+ * Requires @see ExperimentalFeatures.DeleteTableWithBackspace
+ * Delete a table selected with the table selector pressing Backspace key
+ */
+var DeleteTableWithBackspace = {
+    keys: [8 /* BACKSPACE */],
+    shouldHandleEvent: function (event, editor) {
+        return editor.isFeatureEnabled("DeleteTableWithBackspace" /* DeleteTableWithBackspace */) &&
+            cacheIsWholeTableSelected(event, editor);
+    },
+    handleEvent: function (event, editor) {
+        var td = cacheGetTableCell(event, editor);
+        var vtable = new roosterjs_editor_dom_1.VTable(td);
+        vtable.edit(4 /* DeleteTable */);
+        vtable.writeBack();
+    },
+};
 function cacheGetTableCell(event, editor) {
     return (0, roosterjs_editor_dom_1.cacheGetEventData)(event, 'TABLE_CELL_FOR_TABLE_FEATURES', function () {
         var pos = editor.getFocusedPosition();
@@ -21973,6 +22640,7 @@ exports.TableFeatures = {
     tabInTable: TabInTable,
     upDownInTable: UpDownInTable,
     indentTableOnTab: IndentTableOnTab,
+    deleteTableWithBackspace: DeleteTableWithBackspace,
 };
 
 
@@ -23088,7 +23756,7 @@ var DefaultOptions = {
     preserveRatio: false,
     minRotateDeg: 5,
     imageSelector: 'img',
-    rotateIconHTML: null,
+    rotateIconHTML: '',
     disableCrop: false,
     disableRotate: false,
     disableSideResize: false,
@@ -23127,6 +23795,34 @@ var ImageEdit = /** @class */ (function () {
     function ImageEdit(options, onShowResizeHandle) {
         var _this = this;
         this.onShowResizeHandle = onShowResizeHandle;
+        this.editor = null;
+        this.disposer = null;
+        // Current editing image
+        this.image = null;
+        // Image cloned from the current editing image
+        this.clonedImage = null;
+        // The image wrapper
+        this.wrapper = null;
+        // Current edit info of the image. All changes user made will be stored in this object.
+        // We use this object to update the editing UI, and finally we will use this object to generate
+        // the new image if necessary
+        this.editInfo = null;
+        // Src of the image before current editing
+        this.lastSrc = null;
+        // Drag and drop helper objects
+        this.dndHelpers = [];
+        /**
+         * Identify if the image was resized by the user.
+         */
+        this.wasResized = false;
+        /**
+         * The span element that wraps the image and opens shadow dom
+         */
+        this.shadowSpan = null;
+        /**
+         * The span element that wraps the image and opens shadow dom
+         */
+        this.isCropping = false;
         /**
          * quit editing mode when editor lose focus
          */
@@ -23137,7 +23833,11 @@ var ImageEdit = /** @class */ (function () {
          * Remove the temp wrapper of the image
          */
         this.removeWrapper = function () {
-            if (_this.editor.contains(_this.image) && _this.wrapper) {
+            if (_this.editor &&
+                _this.image &&
+                _this.image.parentNode &&
+                _this.editor.contains(_this.image) &&
+                _this.wrapper) {
                 (0, roosterjs_editor_dom_1.unwrap)(_this.image.parentNode);
             }
             _this.wrapper = null;
@@ -23148,8 +23848,14 @@ var ImageEdit = /** @class */ (function () {
          * @param context
          */
         this.updateWrapper = function (context) {
+            var _a, _b;
             var wrapper = _this.wrapper;
-            if (wrapper) {
+            if (wrapper &&
+                _this.editInfo &&
+                _this.image &&
+                _this.clonedImage &&
+                _this.options &&
+                ((_a = _this.shadowSpan) === null || _a === void 0 ? void 0 : _a.parentElement)) {
                 // Prepare: get related editing elements
                 var cropContainers = getEditElements(wrapper, "r_cropC" /* CropContainer */);
                 var cropOverlays = getEditElements(wrapper, "r_cropO" /* CropOverlay */);
@@ -23159,9 +23865,9 @@ var ImageEdit = /** @class */ (function () {
                 var cropHandles = getEditElements(wrapper, "r_cropH" /* CropHandle */);
                 // Cropping and resizing will show different UI, so check if it is cropping here first
                 _this.isCropping = cropContainers.length == 1 && cropOverlays.length == 4;
-                var _a = _this.editInfo, angleRad = _a.angleRad, bottomPercent = _a.bottomPercent, leftPercent = _a.leftPercent, rightPercent = _a.rightPercent, topPercent = _a.topPercent;
+                var _c = _this.editInfo, angleRad = _c.angleRad, bottomPercent = _c.bottomPercent, leftPercent = _c.leftPercent, rightPercent = _c.rightPercent, topPercent = _c.topPercent;
                 // Width/height of the image
-                var _b = (0, getGeneratedImageSize_1.default)(_this.editInfo, _this.isCropping), targetWidth = _b.targetWidth, targetHeight = _b.targetHeight, originalWidth = _b.originalWidth, originalHeight = _b.originalHeight, visibleWidth = _b.visibleWidth, visibleHeight = _b.visibleHeight;
+                var _d = (0, getGeneratedImageSize_1.default)(_this.editInfo, _this.isCropping), targetWidth = _d.targetWidth, targetHeight = _d.targetHeight, originalWidth = _d.originalWidth, originalHeight = _d.originalHeight, visibleWidth = _d.visibleWidth, visibleHeight = _d.visibleHeight;
                 var marginHorizontal = (targetWidth - visibleWidth) / 2;
                 var marginVertical = (targetHeight - visibleHeight) / 2;
                 var cropLeftPx = originalWidth * leftPercent;
@@ -23195,12 +23901,12 @@ var ImageEdit = /** @class */ (function () {
                         var clientWidth = wrapper.clientWidth;
                         var clientHeight = wrapper.clientHeight;
                         _this.wasResized = true;
-                        (0, Resizer_1.doubleCheckResize)(_this.editInfo, _this.options.preserveRatio, clientWidth, clientHeight);
+                        (0, Resizer_1.doubleCheckResize)(_this.editInfo, _this.options.preserveRatio || false, clientWidth, clientHeight);
                         _this.updateWrapper();
                     }
-                    var viewport = _this.editor.getVisibleViewport();
+                    var viewport = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getVisibleViewport();
                     if (rotateHandle && rotateCenter && viewport) {
-                        (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, _this.editor.getVisibleViewport(), marginVertical, rotateCenter, rotateHandle);
+                        (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, viewport, marginVertical, rotateCenter, rotateHandle);
                     }
                     updateHandleCursor(resizeHandles, angleRad);
                 }
@@ -23239,8 +23945,9 @@ var ImageEdit = /** @class */ (function () {
      * Dispose this plugin
      */
     ImageEdit.prototype.dispose = function () {
+        var _a;
         this.clearDndHelpers();
-        this.disposer();
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
         this.disposer = null;
         this.editor = null;
     };
@@ -23249,10 +23956,13 @@ var ImageEdit = /** @class */ (function () {
      * @param e PluginEvent object
      */
     ImageEdit.prototype.onPluginEvent = function (e) {
+        var _a;
         switch (e.eventType) {
             case 22 /* SelectionChanged */:
                 if (e.selectionRangeEx &&
-                    e.selectionRangeEx.type === 2 /* ImageSelection */) {
+                    e.selectionRangeEx.type === 2 /* ImageSelection */ &&
+                    this.options &&
+                    this.options.onSelectState !== undefined) {
                     this.setEditingImage(e.selectionRangeEx.image, this.options.onSelectState);
                 }
                 break;
@@ -23275,9 +23985,11 @@ var ImageEdit = /** @class */ (function () {
                 break;
             case 8 /* ExtractContentWithDom */:
                 // When extract content, remove all image info since they may not be valid when load the content again
-                (0, roosterjs_editor_dom_1.toArray)(e.clonedRoot.querySelectorAll(this.options.imageSelector)).forEach(function (img) {
-                    (0, editInfo_1.deleteEditInfo)(img);
-                });
+                if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.imageSelector) {
+                    (0, roosterjs_editor_dom_1.toArray)(e.clonedRoot.querySelectorAll(this.options.imageSelector)).forEach(function (img) {
+                        (0, editInfo_1.deleteEditInfo)(img);
+                    });
+                }
                 break;
             case 12 /* BeforeDispose */:
                 this.removeWrapper();
@@ -23296,7 +24008,12 @@ var ImageEdit = /** @class */ (function () {
         var _this = this;
         var operation = typeof operationOrSelect === 'number' ? operationOrSelect : 0 /* None */;
         var selectImage = typeof operationOrSelect === 'number' ? false : !!operationOrSelect;
-        if (!image && this.image) {
+        if (!image &&
+            this.image &&
+            this.editor &&
+            this.editInfo &&
+            this.lastSrc &&
+            this.clonedImage) {
             // When there is image in editing, clean up any cached objects and elements
             this.clearDndHelpers();
             // Apply the changes, and add undo snapshot if necessary
@@ -23313,7 +24030,7 @@ var ImageEdit = /** @class */ (function () {
             this.clonedImage = null;
             this.isCropping = false;
         }
-        if (!this.image && (image === null || image === void 0 ? void 0 : image.isContentEditable)) {
+        if (!this.image && (image === null || image === void 0 ? void 0 : image.isContentEditable) && this.editor) {
             // If there is new image to edit, enter editing mode for this image
             this.editor.addUndoSnapshot();
             this.image = image;
@@ -23337,47 +24054,55 @@ var ImageEdit = /** @class */ (function () {
      */
     ImageEdit.prototype.createWrapper = function (operation) {
         var _this = this;
-        //Clone the image and insert the clone in a entity
-        this.clonedImage = this.image.cloneNode(true);
-        this.clonedImage.removeAttribute('id');
-        this.wrapper = (0, roosterjs_editor_dom_1.createElement)(6 /* ImageEditWrapper */, this.image.ownerDocument);
-        this.wrapper.firstChild.appendChild(this.clonedImage);
-        this.wrapper.style.display = roosterjs_editor_dom_1.Browser.isSafari ? 'inline-block' : 'inline-flex';
-        // Cache current src so that we can compare it after edit see if src is changed
-        this.lastSrc = this.image.getAttribute('src');
-        // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
-        this.clonedImage.src = this.editInfo.src;
-        this.clonedImage.style.position = 'absolute';
-        // Get HTML for all edit elements (resize handle, rotate handle, crop handle and overlay, ...) and create HTML element
-        var options = {
-            borderColor: getColorString(this.options.borderColor, this.editor.isDarkMode()),
-            rotateIconHTML: this.options.rotateIconHTML,
-            rotateHandleBackColor: this.editor.isDarkMode()
-                ? DARK_MODE_BGCOLOR
-                : LIGHT_MODE_BGCOLOR,
-            isSmallImage: isASmallImage(this.editInfo),
-        };
-        var htmlData = [(0, Resizer_1.getResizeBordersHTML)(options)];
-        (0, roosterjs_editor_dom_1.getObjectKeys)(ImageEditHTMLMap).forEach(function (thisOperation) {
-            if ((operation & thisOperation) == thisOperation) {
-                (0, roosterjs_editor_dom_1.arrayPush)(htmlData, ImageEditHTMLMap[thisOperation](options, _this.onShowResizeHandle));
-            }
-        });
-        htmlData.forEach(function (data) {
-            var element = (0, roosterjs_editor_dom_1.createElement)(data, _this.image.ownerDocument);
-            if (element) {
-                _this.wrapper.appendChild(element);
-            }
-        });
-        this.insertImageWrapper(this.wrapper);
+        var _a, _b;
+        if (this.image && this.editor && this.options && this.editInfo) {
+            //Clone the image and insert the clone in a entity
+            this.clonedImage = this.image.cloneNode(true);
+            this.clonedImage.removeAttribute('id');
+            this.wrapper = (0, roosterjs_editor_dom_1.createElement)(6 /* ImageEditWrapper */, this.image.ownerDocument);
+            (_b = (_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.appendChild(this.clonedImage);
+            this.wrapper.style.display = roosterjs_editor_dom_1.Browser.isSafari ? 'inline-block' : 'inline-flex';
+            // Cache current src so that we can compare it after edit see if src is changed
+            this.lastSrc = this.image.getAttribute('src');
+            // Set image src to original src to help show editing UI, also it will be used when regenerate image dataURL after editing
+            if (this.clonedImage) {
+                this.clonedImage.src = this.editInfo.src;
+                this.clonedImage.style.position = 'absolute';
+            }
+            // Get HTML for all edit elements (resize handle, rotate handle, crop handle and overlay, ...) and create HTML element
+            var options_1 = {
+                borderColor: getColorString(this.options.borderColor, this.editor.isDarkMode()),
+                rotateIconHTML: this.options.rotateIconHTML,
+                rotateHandleBackColor: this.editor.isDarkMode()
+                    ? DARK_MODE_BGCOLOR
+                    : LIGHT_MODE_BGCOLOR,
+                isSmallImage: isASmallImage(this.editInfo),
+            };
+            var htmlData_1 = [(0, Resizer_1.getResizeBordersHTML)(options_1)];
+            (0, roosterjs_editor_dom_1.getObjectKeys)(ImageEditHTMLMap).forEach(function (thisOperation) {
+                var element = ImageEditHTMLMap[thisOperation](options_1, _this.onShowResizeHandle);
+                if ((operation & thisOperation) == thisOperation && element) {
+                    (0, roosterjs_editor_dom_1.arrayPush)(htmlData_1, element);
+                }
+            });
+            htmlData_1.forEach(function (data) {
+                var element = (0, roosterjs_editor_dom_1.createElement)(data, _this.image.ownerDocument);
+                if (element && _this.wrapper) {
+                    _this.wrapper.appendChild(element);
+                }
+            });
+            this.insertImageWrapper(this.wrapper);
+        }
     };
     ImageEdit.prototype.insertImageWrapper = function (wrapper) {
-        this.shadowSpan = (0, roosterjs_editor_dom_1.wrap)(this.image, 'span');
-        var shadowRoot = this.shadowSpan.attachShadow({
-            mode: 'open',
-        });
-        this.shadowSpan.style.verticalAlign = 'bottom';
-        shadowRoot.appendChild(wrapper);
+        if (this.image) {
+            this.shadowSpan = (0, roosterjs_editor_dom_1.wrap)(this.image, 'span');
+            var shadowRoot = this.shadowSpan.attachShadow({
+                mode: 'open',
+            });
+            this.shadowSpan.style.verticalAlign = 'bottom';
+            shadowRoot.appendChild(wrapper);
+        }
     };
     /**
      * Create drag and drop helpers
@@ -23387,15 +24112,16 @@ var ImageEdit = /** @class */ (function () {
      */
     ImageEdit.prototype.createDndHelpers = function (elementClass, dragAndDrop) {
         var _this = this;
-        var commonContext = {
-            editInfo: this.editInfo,
-            options: this.options,
-            elementClass: elementClass,
-        };
         var wrapper = this.wrapper;
-        return wrapper
+        return wrapper && this.editInfo
             ? getEditElements(wrapper, elementClass).map(function (element) {
-                return new DragAndDropHelper_1.default(element, __assign(__assign({}, commonContext), { x: element.dataset.x, y: element.dataset.y }), _this.updateWrapper, dragAndDrop, _this.editor.getZoomScale());
+                return new DragAndDropHelper_1.default(element, {
+                    editInfo: _this.editInfo,
+                    options: _this.options,
+                    elementClass: elementClass,
+                    x: element.dataset.x,
+                    y: element.dataset.y,
+                }, _this.updateWrapper, dragAndDrop, _this.editor ? _this.editor.getZoomScale() : 1);
             })
             : [];
     };
@@ -23405,18 +24131,18 @@ var ImageEdit = /** @class */ (function () {
     ImageEdit.prototype.clearDndHelpers = function () {
         var _a;
         (_a = this.dndHelpers) === null || _a === void 0 ? void 0 : _a.forEach(function (helper) { return helper.dispose(); });
-        this.dndHelpers = null;
+        this.dndHelpers = [];
     };
     return ImageEdit;
 }());
 exports.default = ImageEdit;
 function setSize(element, left, top, right, bottom, width, height) {
-    element.style.left = getPx(left);
-    element.style.top = getPx(top);
-    element.style.right = getPx(right);
-    element.style.bottom = getPx(bottom);
-    element.style.width = getPx(width);
-    element.style.height = getPx(height);
+    element.style.left = left !== undefined ? getPx(left) : element.style.left;
+    element.style.top = top !== undefined ? getPx(top) : element.style.top;
+    element.style.right = right !== undefined ? getPx(right) : element.style.right;
+    element.style.bottom = bottom !== undefined ? getPx(bottom) : element.style.bottom;
+    element.style.width = width !== undefined ? getPx(width) : element.style.width;
+    element.style.height = height !== undefined ? getPx(height) : element.style.height;
 }
 function setWrapperSizeDimensions(wrapper, image, width, height) {
     var hasBorder = image.style.borderStyle;
@@ -23430,7 +24156,7 @@ function setWrapperSizeDimensions(wrapper, image, width, height) {
     wrapper.style.height = getPx(height);
 }
 function getPx(value) {
-    return value === undefined ? null : value + 'px';
+    return value + 'px';
 }
 function getEditElements(wrapper, elementClass) {
     return (0, roosterjs_editor_dom_1.toArray)(wrapper.querySelectorAll('.' + elementClass));
@@ -23444,12 +24170,12 @@ function handleRadIndexCalculator(angleRad) {
     var idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
     return idx < 0 ? idx + DIRECTIONS : idx;
 }
-function rotateHandles(element, angleRad) {
+function rotateHandles(y, x, angleRad) {
     var radIndex = handleRadIndexCalculator(angleRad);
-    var originalDirection = element.dataset.y + element.dataset.x;
+    var originalDirection = y + x;
     var originalIndex = DirectionOrder.indexOf(originalDirection);
     var rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;
-    return DirectionOrder[rotatedIndex % DIRECTIONS];
+    return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';
 }
 /**
  * Rotate the resizer and cropper handles according to the image position.
@@ -23458,7 +24184,11 @@ function rotateHandles(element, angleRad) {
  */
 function updateHandleCursor(handles, angleRad) {
     handles.map(function (handle) {
-        handle.style.cursor = rotateHandles(handle, angleRad) + "-resize";
+        var y = handle.dataset.y;
+        var x = handle.dataset.x;
+        if (y && x) {
+            handle.style.cursor = rotateHandles(y, x, angleRad) + "-resize";
+        }
     });
 }
 /**
@@ -23486,7 +24216,7 @@ function isFixedNumberValue(value) {
 }
 function isASmallImage(editInfo) {
     var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx;
-    return widthPx && heightPx && widthPx * widthPx < MAX_SMALL_SIZE_IMAGE;
+    return widthPx && heightPx && widthPx * widthPx < MAX_SMALL_SIZE_IMAGE ? true : false;
 }
 function getColorString(color, isDarkMode) {
     if (typeof color === 'string') {
@@ -23523,9 +24253,12 @@ function canRegenerateImage(img) {
         canvas.width = 10;
         canvas.height = 10;
         var context = canvas.getContext('2d');
-        context.drawImage(img, 0, 0);
-        context.getImageData(0, 0, 1, 1);
-        return true;
+        if (context) {
+            context.drawImage(img, 0, 0);
+            context.getImageData(0, 0, 1, 1);
+            return true;
+        }
+        return false;
     }
     catch (_a) {
         return false;
@@ -23555,9 +24288,12 @@ var editInfo_1 = __webpack_require__(/*! ../editInfoUtils/editInfo */ "./package
  */
 function isResizedTo(image, percentage) {
     var editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
-    var _a = (0, getTargetSizeByPercentage_1.default)(editInfo, percentage), width = _a.width, height = _a.height;
-    return (Math.round(width) == Math.round(editInfo.widthPx) &&
-        Math.round(height) == Math.round(editInfo.heightPx));
+    if (editInfo) {
+        var _a = (0, getTargetSizeByPercentage_1.default)(editInfo, percentage), width = _a.width, height = _a.height;
+        return (Math.round(width) == Math.round(editInfo.widthPx) &&
+            Math.round(height) == Math.round(editInfo.heightPx));
+    }
+    return false;
 }
 exports.default = isResizedTo;
 
@@ -23622,13 +24358,13 @@ function resizeByPercentage(editor, image, percentage, minWidth, minHeight) {
     var editInfo = (0, editInfo_1.getEditInfoFromImage)(image);
     if (!(0, isResizedTo_1.default)(image, percentage)) {
         loadImage(image, image.src, function () {
-            if (!editor.isDisposed() && editor.contains(image)) {
+            if (!editor.isDisposed() && editor.contains(image) && editInfo) {
                 var lastSrc_1 = image.getAttribute('src');
                 var _a = (0, getTargetSizeByPercentage_1.default)(editInfo, percentage), width = _a.width, height = _a.height;
                 editInfo.widthPx = Math.max(width, minWidth);
                 editInfo.heightPx = Math.max(height, minHeight);
                 editor.addUndoSnapshot(function () {
-                    (0, applyChange_1.default)(editor, image, editInfo, lastSrc_1, true /*wasResized*/);
+                    (0, applyChange_1.default)(editor, image, editInfo, lastSrc_1 || '', true /*wasResized*/);
                 }, "ImageResize" /* ImageResize */);
             }
         });
@@ -23844,7 +24580,9 @@ exports.deleteEditInfo = deleteEditInfo;
  */
 function getEditInfoFromImage(image) {
     var obj = (0, roosterjs_editor_dom_1.getMetadata)(image);
-    return (0, checkEditInfoState_1.default)(obj) == 0 /* Invalid */ ? getInitialEditInfo(image) : obj;
+    return !obj || (0, checkEditInfoState_1.default)(obj) == 0 /* Invalid */
+        ? getInitialEditInfo(image)
+        : obj;
 }
 exports.getEditInfoFromImage = getEditInfoFromImage;
 function getInitialEditInfo(image) {
@@ -23896,9 +24634,11 @@ function generateDataURL(image, editInfo) {
     canvas.width = targetWidth;
     canvas.height = targetHeight;
     var context = canvas.getContext('2d');
-    context.translate(targetWidth / 2, targetHeight / 2);
-    context.rotate(angle);
-    context.drawImage(image, naturalWidth * left, naturalHeight * top, imageWidth, imageHeight, -width / 2, -height / 2, width, height);
+    if (context) {
+        context.translate(targetWidth / 2, targetHeight / 2);
+        context.rotate(angle);
+        context.drawImage(image, naturalWidth * left, naturalHeight * top, imageWidth, imageHeight, -width / 2, -height / 2, width, height);
+    }
     return canvas.toDataURL('image/png', 1.0);
 }
 exports.default = generateDataURL;
@@ -24031,7 +24771,10 @@ exports.Cropper = {
         var minWidth = options.minWidth, minHeight = options.minHeight;
         var widthPercent = 1 - leftPercent - rightPercent;
         var heightPercent = 1 - topPercent - bottomPercent;
-        if (widthPercent > 0 && heightPercent > 0) {
+        if (widthPercent > 0 &&
+            heightPercent > 0 &&
+            minWidth !== undefined &&
+            minHeight !== undefined) {
             var fullWidth = widthPx / widthPercent;
             var fullHeight = heightPx / heightPercent;
             var newLeft = x != 'e'
@@ -24081,7 +24824,9 @@ function getCropHTML() {
         className: "r_cropC" /* CropContainer */,
         children: [],
     };
-    Xs.forEach(function (x) { return Ys.forEach(function (y) { return containerHTML.children.push(getCropHTMLInternal(x, y)); }); });
+    if (containerHTML) {
+        Xs.forEach(function (x) { return Ys.forEach(function (y) { var _a; return (_a = containerHTML.children) === null || _a === void 0 ? void 0 : _a.push(getCropHTMLInternal(x, y)); }); });
+    }
     return [containerHTML, overlayHTML, overlayHTML, overlayHTML, overlayHTML];
 }
 exports.getCropHTML = getCropHTML;
@@ -24160,36 +24905,41 @@ exports.Resizer = {
         var x = _a.x, y = _a.y, editInfo = _a.editInfo, options = _a.options;
         var ratio = base.widthPx > 0 && base.heightPx > 0 ? (base.widthPx * 1.0) / base.heightPx : 0;
         _b = rotateCoordinate(deltaX, deltaY, editInfo.angleRad), deltaX = _b[0], deltaY = _b[1];
-        var horizontalOnly = x == '';
-        var verticalOnly = y == '';
-        var shouldPreserveRatio = !(horizontalOnly || verticalOnly) && (options.preserveRatio || e.shiftKey);
-        var newWidth = horizontalOnly
-            ? base.widthPx
-            : Math.max(base.widthPx + deltaX * (x == 'w' ? -1 : 1), options.minWidth);
-        var newHeight = verticalOnly
-            ? base.heightPx
-            : Math.max(base.heightPx + deltaY * (y == 'n' ? -1 : 1), options.minHeight);
-        if (shouldPreserveRatio && ratio > 0) {
-            if (ratio > 1) {
-                // first sure newHeight is right，calculate newWidth
-                newWidth = newHeight * ratio;
-                if (newWidth < options.minWidth) {
-                    newWidth = options.minWidth;
-                    newHeight = newWidth / ratio;
-                }
-            }
-            else {
-                // first sure newWidth is right，calculate newHeight
-                newHeight = newWidth / ratio;
-                if (newHeight < options.minHeight) {
-                    newHeight = options.minHeight;
+        if (options.minWidth !== undefined && options.minHeight !== undefined) {
+            var horizontalOnly = x == '';
+            var verticalOnly = y == '';
+            var shouldPreserveRatio = !(horizontalOnly || verticalOnly) && (options.preserveRatio || e.shiftKey);
+            var newWidth = horizontalOnly
+                ? base.widthPx
+                : Math.max(base.widthPx + deltaX * (x == 'w' ? -1 : 1), options.minWidth);
+            var newHeight = verticalOnly
+                ? base.heightPx
+                : Math.max(base.heightPx + deltaY * (y == 'n' ? -1 : 1), options.minHeight);
+            if (shouldPreserveRatio && ratio > 0) {
+                if (ratio > 1) {
+                    // first sure newHeight is right，calculate newWidth
                     newWidth = newHeight * ratio;
+                    if (newWidth < options.minWidth) {
+                        newWidth = options.minWidth;
+                        newHeight = newWidth / ratio;
+                    }
+                }
+                else {
+                    // first sure newWidth is right，calculate newHeight
+                    newHeight = newWidth / ratio;
+                    if (newHeight < options.minHeight) {
+                        newHeight = options.minHeight;
+                        newWidth = newHeight * ratio;
+                    }
                 }
             }
+            editInfo.widthPx = newWidth;
+            editInfo.heightPx = newHeight;
+            return true;
+        }
+        else {
+            return false;
         }
-        editInfo.widthPx = newWidth;
-        editInfo.heightPx = newHeight;
-        return true;
     },
 };
 /**
@@ -24249,10 +24999,12 @@ function getCornerResizeHTML(_a, onShowResizeHandle) {
             var elementData = (x == '') == (y == '')
                 ? getResizeHandleHTML(x, y, resizeBorderColor, 1 /* CircularHandlesCorner */)
                 : null;
-            if (onShowResizeHandle) {
+            if (onShowResizeHandle && elementData) {
                 onShowResizeHandle(elementData, x, y);
             }
-            result.push(elementData);
+            if (elementData) {
+                result.push(elementData);
+            }
         });
     });
     return result;
@@ -24273,10 +25025,12 @@ function getSideResizeHTML(_a, onShowResizeHandle) {
             var elementData = (x == '') != (y == '')
                 ? getResizeHandleHTML(x, y, resizeBorderColor, 1 /* CircularHandlesCorner */)
                 : null;
-            if (onShowResizeHandle) {
+            if (onShowResizeHandle && elementData) {
                 onShowResizeHandle(elementData, x, y);
             }
-            result.push(elementData);
+            if (elementData) {
+                result.push(elementData);
+            }
         });
     });
     return result;
@@ -24369,7 +25123,7 @@ exports.Rotator = {
         var newX = distance * Math.sin(base.angleRad) + deltaX;
         var newY = distance * Math.cos(base.angleRad) - deltaY;
         var angleInRad = Math.atan2(newX, newY);
-        if (!e.altKey) {
+        if (!e.altKey && options && options.minRotateDeg !== undefined) {
             var angleInDeg = angleInRad * DEG_PER_RAD;
             var adjustedAngleInDeg = Math.round(angleInDeg / options.minRotateDeg) * options.minRotateDeg;
             angleInRad = adjustedAngleInDeg / DEG_PER_RAD;
@@ -24391,7 +25145,7 @@ exports.Rotator = {
 function updateRotateHandlePosition(editInfo, editorRect, marginVertical, rotateCenter, rotateHandle) {
     var rotateHandleRect = rotateHandle.getBoundingClientRect();
     if (rotateHandleRect) {
-        var top_1 = rotateHandleRect.top - (editorRect === null || editorRect === void 0 ? void 0 : editorRect.top);
+        var top_1 = rotateHandleRect.top - editorRect.top;
         var angleRad = editInfo.angleRad, heightPx = editInfo.heightPx;
         var cosAngle = Math.cos(angleRad);
         var adjustedDistance = cosAngle <= 0
@@ -25430,6 +26184,7 @@ 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:';
 /**
  * @internal
  * Clear local paths and remove link
@@ -25447,7 +26202,10 @@ function validateLink(link, htmlElement) {
     catch (_a) {
         url = undefined;
     }
-    if (url && (url.protocol === HTTP || url.protocol === HTTPS)) {
+    if (url &&
+        (url.protocol === HTTP ||
+            url.protocol === HTTPS ||
+            url.protocol === NOTES) /* whitelist Notes protocol */) {
         return link;
     }
     htmlElement.removeAttribute('href');
@@ -29227,6 +29985,35 @@ var CompatibleDefinitionType;
 })(CompatibleDefinitionType = exports.CompatibleDefinitionType || (exports.CompatibleDefinitionType = {}));
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/DelimiterClasses.ts":
+/*!********************************************************************************!*\
+  !*** ./packages/roosterjs-editor-types/lib/compatibleEnum/DelimiterClasses.ts ***!
+  \********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompatibleDelimiterClasses = void 0;
+/**
+ * Class names for Delimiter
+ */
+var CompatibleDelimiterClasses;
+(function (CompatibleDelimiterClasses) {
+    /**
+     * Class name to specify this delimiter is before an entity
+     */
+    CompatibleDelimiterClasses["DELIMITER_BEFORE"] = "entityDelimiterBefore";
+    /**
+     *  Class name to specify this delimiter is after an entity
+     */
+    CompatibleDelimiterClasses["DELIMITER_AFTER"] = "entityDelimiterAfter";
+})(CompatibleDelimiterClasses = exports.CompatibleDelimiterClasses || (exports.CompatibleDelimiterClasses = {}));
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-types/lib/compatibleEnum/Direction.ts":
@@ -29666,6 +30453,8 @@ exports.CompatibleExperimentalFeatures = void 0;
  */
 var CompatibleExperimentalFeatures;
 (function (CompatibleExperimentalFeatures) {
+    // #region Graduated and deprecated features.
+    // These features will be removed in next major release
     /**
      * @deprecated This feature is always enabled
      */
@@ -29717,23 +30506,11 @@ var CompatibleExperimentalFeatures;
      * Align table elements to left, center and right using setAlignment API
      */
     CompatibleExperimentalFeatures["TableAlignment"] = "TableAlignment";
-    /**
-     * Provide additional Tab Key Features. Requires Text Features Content Editable Features
-     */
-    CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
     /**
      * @deprecated this feature is always enabled
      * Provide a circular resize handles that adaptive the number od handles to the size of the image
      */
     CompatibleExperimentalFeatures["AdaptiveHandlesResizer"] = "AdaptiveHandlesResizer";
-    /**
-     * Align list elements elements to left, center and right using setAlignment API
-     */
-    CompatibleExperimentalFeatures["ListItemAlignment"] = "ListItemAlignment";
-    /**
-     * Trigger formatting by a especial characters. Ex: (A), 1. i).
-     */
-    CompatibleExperimentalFeatures["AutoFormatList"] = "AutoFormatList";
     /**
      * @deprecated this feature is always disabled
      * Automatically transform -- into hyphen, if typed between two words.
@@ -29757,6 +30534,19 @@ 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
+     */
+    CompatibleExperimentalFeatures["TabKeyTextFeatures"] = "TabKeyTextFeatures";
+    /**
+     * Align list elements elements to left, center and right using setAlignment API
+     */
+    CompatibleExperimentalFeatures["ListItemAlignment"] = "ListItemAlignment";
+    /**
+     * Trigger formatting by a especial characters. Ex: (A), 1. i).
+     */
+    CompatibleExperimentalFeatures["AutoFormatList"] = "AutoFormatList";
     /**
      * With this feature enabled, when writing back a list item we will re-use all
      * ancestor list elements, even if they don't match the types currently in the
@@ -29775,6 +30565,18 @@ var CompatibleExperimentalFeatures;
      * 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";
+    /**
+     * Delete table with Backspace key with the whole was selected with table selector
+     */
+    CompatibleExperimentalFeatures["DeleteTableWithBackspace"] = "DeleteTableWithBackspace";
+    /**
+     * Add entities around a Read Only  Inline entity to prevent cursor to be hidden when cursor is next of it.
+     */
+    CompatibleExperimentalFeatures["InlineEntityReadOnlyDelimiters"] = "InlineEntityReadOnlyDelimiters";
 })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));
 
 
@@ -30740,7 +31542,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.CompatibleKnownCreateElementDataIndex = exports.CompatibleKeys = exports.CompatibleIndentation = exports.CompatibleImageEditOperation = exports.CompatibleGetContentMode = exports.CompatibleFontSizeChange = exports.CompatibleExperimentalFeatures = exports.CompatibleEntityOperation = exports.CompatibleEntityClasses = exports.CompatibleDocumentPosition = exports.CompatibleDocumentCommand = exports.CompatibleDirection = 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.CompatibleNumberingListType = exports.CompatibleNodeType = exports.CompatibleListType = 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");
@@ -30762,6 +31564,8 @@ var DarkModeDatasetNames_1 = __webpack_require__(/*! ./DarkModeDatasetNames */ "
 Object.defineProperty(exports, "CompatibleDarkModeDatasetNames", { enumerable: true, get: function () { return DarkModeDatasetNames_1.CompatibleDarkModeDatasetNames; } });
 var DefinitionType_1 = __webpack_require__(/*! ./DefinitionType */ "./packages/roosterjs-editor-types/lib/compatibleEnum/DefinitionType.ts");
 Object.defineProperty(exports, "CompatibleDefinitionType", { enumerable: true, get: function () { return DefinitionType_1.CompatibleDefinitionType; } });
+var DelimiterClasses_1 = __webpack_require__(/*! ./DelimiterClasses */ "./packages/roosterjs-editor-types/lib/compatibleEnum/DelimiterClasses.ts");
+Object.defineProperty(exports, "CompatibleDelimiterClasses", { enumerable: true, get: function () { return DelimiterClasses_1.CompatibleDelimiterClasses; } });
 var Direction_1 = __webpack_require__(/*! ./Direction */ "./packages/roosterjs-editor-types/lib/compatibleEnum/Direction.ts");
 Object.defineProperty(exports, "CompatibleDirection", { enumerable: true, get: function () { return Direction_1.CompatibleDirection; } });
 var DocumentCommand_1 = __webpack_require__(/*! ./DocumentCommand */ "./packages/roosterjs-editor-types/lib/compatibleEnum/DocumentCommand.ts");