roosterjs 8.43.0 → 8.44.1

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,
@@ -2976,6 +2977,9 @@ function insertEntity(editor, type, contentNode, isBlock, isReadonly, position,
         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;
@@ -4382,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);
@@ -5319,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, {
@@ -6304,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) {
@@ -6472,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 */) {
@@ -6494,12 +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 = tryFetchAndClearFontColor(element, toDark, darkColorHandler, names) ||
-                darkColorHandler.parseColorValue(element.style.getPropertyValue(names[0 /* CssColor */]) ||
-                    element.getAttribute(names[1 /* HtmlColor */])).lightModeColor;
+            var color = darkColorHandler.parseColorValue(element.style.getPropertyValue(names[0 /* CssColor */]) ||
+                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);
             }
@@ -6588,27 +6595,6 @@ function isHTMLElement(element) {
     var htmlElement = element;
     return !!htmlElement.style && !!htmlElement.dataset;
 }
-/**
- * There is a known issue that when input with IME in Chrome, it is possible Chrome insert a new FONT tag with colors.
- * If editor is in dark mode, this color will cause the FONT tag doesn't have light mode color info so that after convert
- * to light mode the color will be wrong.
- * To workaround it, we check if this is a known color (for light mode with VariableBasedDarkColor enabled, all used colors
- * are stored in darkColorHandler), then use the related light mode color instead.
- */
-function tryFetchAndClearFontColor(element, toDark, darkColorHandler, names) {
-    var darkColor;
-    if ((0, roosterjs_editor_dom_1.getTagOfNode)(element) == 'FONT' &&
-        !element.style.getPropertyValue(names[0 /* CssColor */]) &&
-        !toDark &&
-        (darkColor = element.getAttribute(names[1 /* HtmlColor */]))) {
-        var lightColor = darkColorHandler.findLightColorFromDarkColor(darkColor);
-        if (lightColor) {
-            element.removeAttribute(names[1 /* HtmlColor */]);
-            return lightColor;
-        }
-    }
-    return null;
-}
 
 
 /***/ }),
@@ -7267,7 +7253,7 @@ exports.default = EditPlugin;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var inlineEntityOnPluginEvent_1 = __webpack_require__(/*! ./utils/InlineEntityHandlers/inlineEntityOnPluginEvent */ "./packages/roosterjs-editor-core/lib/corePlugins/utils/InlineEntityHandlers/inlineEntityOnPluginEvent.ts");
+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 */ + '$';
@@ -7390,7 +7376,7 @@ var EntityPlugin = /** @class */ (function () {
                 break;
         }
         if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isFeatureEnabled("InlineEntityReadOnlyDelimiters" /* InlineEntityReadOnlyDelimiters */)) {
-            (0, inlineEntityOnPluginEvent_1.inlineEntityOnPluginEvent)(event);
+            (0, inlineEntityOnPluginEvent_1.inlineEntityOnPluginEvent)(event, this.editor);
         }
     };
     EntityPlugin.prototype.handleContextMenuEvent = function (event) {
@@ -7441,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];
@@ -7449,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
@@ -7472,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;
@@ -7648,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;
 /**
@@ -7719,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]);
                         }
@@ -8753,68 +8755,6 @@ function getPluginState(corePlugins) {
 exports.getPluginState = getPluginState;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-core/lib/corePlugins/utils/InlineEntityHandlers/inlineEntityOnPluginEvent.ts":
-/*!****************************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-core/lib/corePlugins/utils/InlineEntityHandlers/inlineEntityOnPluginEvent.ts ***!
-  \****************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-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 */;
-function inlineEntityOnPluginEvent(event) {
-    switch (event.eventType) {
-        case 8 /* ExtractContentWithDom */:
-        case 9 /* BeforeCutCopy */:
-            event.clonedRoot.querySelectorAll(DELIMITER_SELECTOR).forEach(function (node) {
-                var _a;
-                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-            });
-            break;
-        case 15 /* EntityOperation */:
-            var wrapper = event.entity.wrapper;
-            switch (event.operation) {
-                case 4 /* RemoveFromStart */:
-                case 5 /* RemoveFromEnd */:
-                case 6 /* Overwrite */:
-                    var entity = event.entity;
-                    // If the entity removed is a readonly entity, try to remove delimiters around it.
-                    if (isReadOnly(entity)) {
-                        removeDelimiters(wrapper);
-                    }
-                    break;
-            }
-            break;
-    }
-}
-exports.inlineEntityOnPluginEvent = inlineEntityOnPluginEvent;
-function getDelimiter(entityWrapper, after) {
-    var el = after ? entityWrapper.nextElementSibling : entityWrapper.previousElementSibling;
-    return el && (0, roosterjs_editor_dom_1.safeInstanceOf)(el, 'HTMLElement') && (0, roosterjs_editor_dom_1.getDelimiterFromElement)(el) ? el : undefined;
-}
-function removeDelimiters(entityWrapper) {
-    var _a, _b;
-    var el = undefined;
-    if ((el = getDelimiter(entityWrapper, true))) {
-        (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(el);
-    }
-    if ((el = getDelimiter(entityWrapper, false))) {
-        (_b = el.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(el);
-    }
-}
-function isReadOnly(entity) {
-    return (entity.isReadonly &&
-        !(0, roosterjs_editor_dom_1.isBlockElement)(entity.wrapper) &&
-        (0, roosterjs_editor_dom_1.safeInstanceOf)(entity.wrapper, 'HTMLElement'));
-}
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/corePlugins/utils/forEachSelectedCell.ts":
@@ -8850,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":
@@ -8969,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;
@@ -8987,6 +9145,18 @@ 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 };
     };
@@ -9787,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 */);
     };
     /**
@@ -11279,28 +11450,62 @@ exports.default = SelectionScoper;
 "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.
- * @param element element to be between delimiters
+ * 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(element) {
-    function insertDelimiter(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);
-        }
+function addDelimiters(node) {
+    var _a = getDelimiters(node), delimiterAfter = _a[0], delimiterBefore = _a[1];
+    if (!delimiterAfter) {
+        delimiterAfter = addDelimiterAfter(node);
+    }
+    if (!delimiterBefore) {
+        delimiterBefore = addDelimiterBefore(node);
     }
-    insertDelimiter("entityDelimiterAfter" /* DELIMITER_AFTER */);
-    insertDelimiter("entityDelimiterBefore" /* DELIMITER_BEFORE */);
+    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;
+}
 
 
 /***/ }),
@@ -11315,7 +11520,7 @@ exports.default = addDelimiters;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.ts");
+var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
 var ZERO_WIDTH_SPACE = '\u200B';
 /**
  * Retrieves Delimiter information from a provided element.
@@ -11326,7 +11531,7 @@ function getDelimiterFromElement(element) {
     if (!element) {
         return null;
     }
-    if ((0, getTagOfNode_1.default)(element) == 'SPAN' &&
+    if ((0, safeInstanceOf_1.default)(element, 'HTMLSpanElement') &&
         (element.classList.contains("entityDelimiterAfter" /* DELIMITER_AFTER */) ||
             element.classList.contains("entityDelimiterBefore" /* DELIMITER_BEFORE */)) &&
         element.textContent === ZERO_WIDTH_SPACE) {
@@ -12947,9 +13152,9 @@ exports.isCssVariable = isCssVariable;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-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.getDelimiterFromElement = exports.addDelimiters = exports.PositionContentSearcher = exports.ContentTraverser = exports.getFirstLastBlockElement = exports.getBlockElementAtNode = void 0;
-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.parseColor = exports.isNodeAfter = exports.getIntersectedRect = exports.moveChildNodes = 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 = 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");
@@ -12960,6 +13165,8 @@ var PositionContentSearcher_1 = __webpack_require__(/*! ./contentTraverser/Posit
 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");
@@ -20667,8 +20874,7 @@ var DragAndDropHelper = /** @class */ (function () {
             var _a, _b, _c;
             e.preventDefault();
             _this.removeDocumentEvents();
-            if (_this.initValue &&
-                ((_b = (_a = _this.handler).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue))) {
+            if ((_b = (_a = _this.handler).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue)) {
                 (_c = _this.onSubmit) === null || _c === void 0 ? void 0 : _c.call(_this, _this.context, _this.trigger);
             }
         };
@@ -20762,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 = '';
@@ -21103,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;
 }
@@ -21123,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 */);
         }
     },
@@ -21189,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;
                 }
             }
@@ -21198,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
  */
@@ -21215,6 +21618,8 @@ exports.EntityFeatures = {
     enterBeforeReadonlyEntity: EnterBeforeReadonlyEntityFeature,
     backspaceAfterEntity: BackspaceAfterEntityFeature,
     deleteBeforeEntity: DeleteBeforeEntityFeature,
+    moveBetweenDelimitersFeature: MoveBetweenDelimitersFeature,
+    removeEntityBetweenDelimiters: RemoveEntityBetweenDelimitersFeature,
 };
 
 
@@ -21292,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 {
@@ -22102,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;
             }
         }
@@ -22179,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());
                     }
                 }
             });
@@ -23425,12 +23833,8 @@ var ImageEdit = /** @class */ (function () {
          * Remove the temp wrapper of the image
          */
         this.removeWrapper = function () {
-            if (_this.editor &&
-                _this.image &&
-                _this.image.parentNode &&
-                _this.editor.contains(_this.image) &&
-                _this.wrapper) {
-                (0, roosterjs_editor_dom_1.unwrap)(_this.image.parentNode);
+            if (_this.shadowSpan) {
+                (0, roosterjs_editor_dom_1.unwrap)(_this.shadowSpan);
             }
             _this.wrapper = null;
             _this.shadowSpan = null;
@@ -25776,6 +26180,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
@@ -25793,7 +26198,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');
@@ -30041,6 +30449,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
      */
@@ -30092,23 +30502,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.
@@ -30132,6 +30530,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
@@ -30150,6 +30561,10 @@ 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
      */