roosterjs 8.41.0 → 8.43.0

package/dist/rooster-amd.js

@@ -2971,6 +2971,11 @@ 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);
+    }
     editor.triggerContentChangedEvent("InsertEntity" /* InsertEntity */, entity);
     return entity;
 }
@@ -2991,12 +2996,18 @@ exports.default = insertEntity;
 Object.defineProperty(exports, "__esModule", { value: true });
 var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-function insertImage(editor, imageFile, attributes) {
-    if (typeof imageFile == 'string') {
-        insertImageWithSrc(editor, imageFile, attributes);
+/**
+ * Insert an image to editor at current selection
+ * @param editor The editor instance
+ * @param imageFileOrSrc Either the image file blob or source string of the image.
+ * @param attributes Optional image element attributes
+ */
+function insertImage(editor, imageFileOrSrc, attributes) {
+    if (typeof imageFileOrSrc == 'string') {
+        insertImageWithSrc(editor, imageFileOrSrc, attributes);
     }
     else {
-        (0, roosterjs_editor_dom_1.readFile)(imageFile, function (dataUrl) {
+        (0, roosterjs_editor_dom_1.readFile)(imageFileOrSrc, function (dataUrl) {
             if (dataUrl && !editor.isDisposed()) {
                 insertImageWithSrc(editor, dataUrl, attributes);
             }
@@ -4785,6 +4796,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;
@@ -4792,6 +4804,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;
     }
@@ -5618,7 +5631,19 @@ var getStyleBasedFormatState = function (core, node) {
             pendableFormatSpan.style.backgroundColor,
         ];
     }
-    var styles = node ? (0, roosterjs_editor_dom_1.getComputedStyles)(node) : [];
+    var styles = node
+        ? (0, roosterjs_editor_dom_1.getComputedStyles)(node, [
+            'font-family',
+            'font-size',
+            'color',
+            'background-color',
+            'line-height',
+            'margin-top',
+            'margin-bottom',
+            'text-align',
+            'direction',
+        ])
+        : [];
     var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler, isDarkMode = core.lifecycle.isDarkMode;
     if (darkColorHandler) {
         var styleTextColor = void 0;
@@ -5657,6 +5682,11 @@ var getStyleBasedFormatState = function (core, node) {
                     darkModeColor: backColor.darkModeColor,
                 }
                 : undefined,
+            lineHeight: styles[4],
+            marginTop: styles[5],
+            marginBottom: styles[6],
+            textAlign: styles[7],
+            direction: styles[8],
         };
     }
     else {
@@ -5689,6 +5719,9 @@ var getStyleBasedFormatState = function (core, node) {
                         styles[3],
                 }
                 : undefined,
+            lineHeight: styles[4],
+            textAlign: styles[7],
+            direction: styles[8],
         };
     }
 };
@@ -5930,6 +5963,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;
@@ -6456,8 +6496,9 @@ exports.transformColor = transformColor;
 function transformV2(elements, darkColorHandler, 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;
+            var color = tryFetchAndClearFontColor(element, toDark, darkColorHandler, names) ||
+                darkColorHandler.parseColorValue(element.style.getPropertyValue(names[0 /* CssColor */]) ||
+                    element.getAttribute(names[1 /* HtmlColor */])).lightModeColor;
             if (color && color != 'inherit') {
                 (0, roosterjs_editor_dom_1.setColor)(element, color, i != 0, toDark, false /*shouldAdaptFontColor*/, darkColorHandler);
             }
@@ -6546,6 +6587,27 @@ 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;
+}
 
 
 /***/ }),
@@ -7204,6 +7266,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 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 */ + '$';
@@ -7290,6 +7353,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);
@@ -7324,6 +7388,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);
+        }
     };
     EntityPlugin.prototype.handleContextMenuEvent = function (event) {
         var _a;
@@ -8218,7 +8285,7 @@ var PendingFormatStatePlugin = /** @class */ (function () {
                     this.state.pendableFormatSpan) {
                     this.state.pendableFormatSpan.removeAttribute('contentEditable');
                     this.editor.insertNode(this.state.pendableFormatSpan);
-                    this.editor.select(this.state.pendableFormatSpan, -2 /* Before */, this.state.pendableFormatSpan, -1 /* End */);
+                    this.editor.select(this.state.pendableFormatSpan, 0 /* Begin */, this.state.pendableFormatSpan, -1 /* End */);
                     this.clear();
                 }
                 else if ((event.eventType == 0 /* KeyDown */ &&
@@ -8602,7 +8669,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 +
@@ -8685,6 +8752,68 @@ 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":
@@ -8791,6 +8920,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,6 +8989,27 @@ var DarkColorHandlerImpl = /** @class */ (function () {
         }
         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;
@@ -11109,6 +11266,76 @@ 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 });
+var createElement_1 = __webpack_require__(/*! ../utils/createElement */ "./packages/roosterjs-editor-dom/lib/utils/createElement.ts");
+var ZERO_WIDTH_SPACE = '\u200B';
+/**
+ * Adds delimiters to the element provided.
+ * @param element element to be between 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);
+        }
+    }
+    insertDelimiter("entityDelimiterAfter" /* DELIMITER_AFTER */);
+    insertDelimiter("entityDelimiterBefore" /* DELIMITER_BEFORE */);
+}
+exports.default = addDelimiters;
+
+
+/***/ }),
+
+/***/ "./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 getTagOfNode_1 = __webpack_require__(/*! ../utils/getTagOfNode */ "./packages/roosterjs-editor-dom/lib/utils/getTagOfNode.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, getTagOfNode_1.default)(element) == 'SPAN' &&
+        (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":
@@ -12491,7 +12718,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',
@@ -12720,9 +12946,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.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;
 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");
@@ -12731,6 +12957,10 @@ 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; } });
+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");
@@ -12818,6 +13048,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");
@@ -18853,8 +19085,8 @@ function getIntersectedRect(elements, additionalRects) {
     if (additionalRects === void 0) { additionalRects = []; }
     var rects = elements
         .map(function (element) { return (0, normalizeRect_1.default)(element.getBoundingClientRect()); })
-        .filter(function (element) { return !!element; })
-        .concat(additionalRects);
+        .concat(additionalRects)
+        .filter(function (element) { return !!element; });
     var result = {
         top: Math.max.apply(Math, rects.map(function (r) { return r.top; })),
         bottom: Math.min.apply(Math, rects.map(function (r) { return r.bottom; })),
@@ -19396,6 +19628,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":
@@ -19565,6 +19842,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';
@@ -19659,40 +19937,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];
 }
 
 
@@ -20382,6 +20639,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;
@@ -20397,7 +20657,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);
             }
         };
@@ -20405,7 +20666,8 @@ var DragAndDropHelper = /** @class */ (function () {
             var _a, _b, _c;
             e.preventDefault();
             _this.removeDocumentEvents();
-            if ((_b = (_a = _this.handler).onDragEnd) === null || _b === void 0 ? void 0 : _b.call(_a, _this.context, e, _this.initValue)) {
+            if (_this.initValue &&
+                ((_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);
             }
         };
@@ -21001,6 +21263,7 @@ var IndentWhenTab = {
     shouldHandleEvent: shouldHandleIndentationEvent(true),
     handleEvent: handleIndentationEvent(true),
     allowFunctionKeys: true,
+    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
 };
 /**
  * OutdentWhenShiftTab edit feature, provides the ability to outdent current list when user press Shift+TAB
@@ -21010,6 +21273,7 @@ var OutdentWhenShiftTab = {
     shouldHandleEvent: shouldHandleIndentationEvent(false),
     handleEvent: handleIndentationEvent(false),
     allowFunctionKeys: true,
+    defaultDisabled: roosterjs_editor_dom_1.Browser.isMac,
 };
 /**
  * MergeInNewLine edit feature, provides the ability to merge current line into a new line when user press
@@ -21307,7 +21571,7 @@ function shouldTriggerList(event, editor, getListStyle, listType) {
     var textBeforeCursor = searcher.getSubStringBefore(4);
     var traverser = editor.getBlockTraverser();
     var text = traverser && traverser.currentBlockElement
-        ? traverser.currentBlockElement.getTextContent()
+        ? traverser.currentBlockElement.getTextContent().slice(0, textBeforeCursor.length)
         : null;
     var isATheBeginning = text && text === textBeforeCursor;
     var listChains = getListChains(editor);
@@ -21922,6 +22186,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();
@@ -21950,6 +22231,7 @@ exports.TableFeatures = {
     tabInTable: TabInTable,
     upDownInTable: UpDownInTable,
     indentTableOnTab: IndentTableOnTab,
+    deleteTableWithBackspace: DeleteTableWithBackspace,
 };
 
 
@@ -23065,7 +23347,7 @@ var DefaultOptions = {
     preserveRatio: false,
     minRotateDeg: 5,
     imageSelector: 'img',
-    rotateIconHTML: null,
+    rotateIconHTML: '',
     disableCrop: false,
     disableRotate: false,
     disableSideResize: false,
@@ -23104,6 +23386,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
          */
@@ -23114,7 +23424,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;
@@ -23125,8 +23439,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 */);
@@ -23136,9 +23456,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;
@@ -23146,15 +23466,12 @@ var ImageEdit = /** @class */ (function () {
                 var cropTopPx = originalHeight * topPercent;
                 var cropBottomPx = originalHeight * bottomPercent;
                 // Update size and margin of the wrapper
-                wrapper.style.width = getPx(visibleWidth);
-                wrapper.style.height = getPx(visibleHeight);
                 wrapper.style.margin = marginVertical + "px " + marginHorizontal + "px";
                 wrapper.style.transform = "rotate(" + angleRad + "rad)";
-                _this.wrapper.style.width = getPx(visibleWidth);
-                _this.wrapper.style.height = getPx(visibleHeight);
+                setWrapperSizeDimensions(wrapper, _this.image, visibleWidth, visibleHeight);
                 // Update the text-alignment to avoid the image to overflow if the parent element have align center or right
                 // or if the direction is Right To Left
-                wrapper.style.textAlign = isRtl(wrapper.parentNode) ? 'right' : 'left';
+                wrapper.style.textAlign = isRtl(_this.shadowSpan.parentElement) ? 'right' : 'left';
                 // Update size of the image
                 _this.clonedImage.style.width = getPx(originalWidth);
                 _this.clonedImage.style.height = getPx(originalHeight);
@@ -23175,10 +23492,13 @@ 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();
                     }
-                    (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, _this.editor.getVisibleViewport(), marginVertical, rotateCenter, rotateHandle);
+                    var viewport = (_b = _this.editor) === null || _b === void 0 ? void 0 : _b.getVisibleViewport();
+                    if (rotateHandle && rotateCenter && viewport) {
+                        (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, viewport, marginVertical, rotateCenter, rotateHandle);
+                    }
                     updateHandleCursor(resizeHandles, angleRad);
                 }
             }
@@ -23204,7 +23524,7 @@ var ImageEdit = /** @class */ (function () {
         var _this = this;
         this.editor = editor;
         this.disposer = editor.addDomEventHandler({
-            blur: function () { return _this.onBlur; },
+            blur: function () { return _this.onBlur(); },
             dragstart: function (e) {
                 if (_this.image) {
                     e.preventDefault();
@@ -23216,8 +23536,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;
     };
@@ -23226,10 +23547,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;
@@ -23252,9 +23576,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();
@@ -23273,7 +23599,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
@@ -23290,7 +23621,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;
@@ -23314,47 +23645,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
@@ -23364,15 +23703,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);
             })
             : [];
     };
@@ -23382,21 +23722,32 @@ 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;
+    if (hasBorder) {
+        var borderWidth = image.style.borderWidth ? 2 * parseInt(image.style.borderWidth) : 2;
+        wrapper.style.width = getPx(width + borderWidth);
+        wrapper.style.height = getPx(height + borderWidth);
+        return;
+    }
+    wrapper.style.width = getPx(width);
+    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));
@@ -23410,12 +23761,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.
@@ -23424,7 +23775,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";
+        }
     });
 }
 /**
@@ -23452,7 +23807,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') {
@@ -23489,9 +23844,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;
@@ -23521,9 +23879,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;
 
@@ -23588,13 +23949,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 */);
             }
         });
@@ -23810,7 +24171,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) {
@@ -23862,9 +24225,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;
@@ -23997,7 +24362,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'
@@ -24047,7 +24415,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;
@@ -24126,36 +24496,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;
     },
 };
 /**
@@ -24215,10 +24590,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;
@@ -24239,10 +24616,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;
@@ -24335,7 +24714,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;
@@ -24355,18 +24734,20 @@ exports.Rotator = {
  * Fix it by reduce the distance from image to rotate handle
  */
 function updateRotateHandlePosition(editInfo, editorRect, marginVertical, rotateCenter, rotateHandle) {
-    var _a;
-    var top = ((_a = rotateHandle.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) - (editorRect === null || editorRect === void 0 ? void 0 : editorRect.top);
-    var angleRad = editInfo.angleRad, heightPx = editInfo.heightPx;
-    var cosAngle = Math.cos(angleRad);
-    var adjustedDistance = cosAngle <= 0
-        ? Number.MAX_SAFE_INTEGER
-        : (top + heightPx / 2 + marginVertical) / cosAngle - heightPx / 2;
-    var rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);
-    var rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
-    rotateCenter.style.top = -rotateGap + 'px';
-    rotateCenter.style.height = rotateGap + 'px';
-    rotateHandle.style.top = -rotateTop + 'px';
+    var rotateHandleRect = rotateHandle.getBoundingClientRect();
+    if (rotateHandleRect) {
+        var top_1 = rotateHandleRect.top - editorRect.top;
+        var angleRad = editInfo.angleRad, heightPx = editInfo.heightPx;
+        var cosAngle = Math.cos(angleRad);
+        var adjustedDistance = cosAngle <= 0
+            ? Number.MAX_SAFE_INTEGER
+            : (top_1 + heightPx / 2 + marginVertical) / cosAngle - heightPx / 2;
+        var rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);
+        var rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);
+        rotateCenter.style.top = -rotateGap + 'px';
+        rotateCenter.style.height = rotateGap + 'px';
+        rotateHandle.style.top = -rotateTop + 'px';
+    }
 }
 exports.updateRotateHandlePosition = updateRotateHandlePosition;
 /**
@@ -29191,6 +29572,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":
@@ -29739,6 +30149,14 @@ var CompatibleExperimentalFeatures;
      * if you need them work for dark mode
      */
     CompatibleExperimentalFeatures["VariableBasedDarkColor"] = "VariableBasedDarkColor";
+    /**
+     * 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 = {}));
 
 
@@ -30704,7 +31122,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");
@@ -30726,6 +31144,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");