roosterjs 8.40.2 → 8.41.0

package/dist/rooster-amd.js

@@ -2843,9 +2843,11 @@ 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],
+        isCodeBlock: !!editor.queryElements('pre>code', 1 /* OnSelection */)[0],
         isInTable: !!table,
         tableFormat: tableFormat,
         tableHasHeader: hasHeader,
+        canMergeTableCell: canMergeTableCell(editor),
     };
 }
 exports.getElementBasedFormatState = getElementBasedFormatState;
@@ -2863,6 +2865,23 @@ function getFormatState(editor, event) {
     return __assign(__assign(__assign(__assign(__assign({}, editor.getPendableFormatState(false /* forceGetStateFromDom */)), getElementBasedFormatState(editor, event)), editor.getStyleBasedFormatState()), editor.getUndoState()), { isDarkMode: editor.isDarkMode(), zoomScale: editor.getZoomScale() });
 }
 exports.default = getFormatState;
+/**
+ * Checks whether the editor selection range is starting and ending at a table element.
+ * @param editor Editor Instance
+ * @returns
+ */
+var canMergeTableCell = function (editor) {
+    var selection = editor.getSelectionRangeEx();
+    var isATable = selection && selection.type === 1 /* TableSelection */;
+    if (isATable && selection.coordinates) {
+        var _a = selection.coordinates, firstCell = _a.firstCell, lastCell = _a.lastCell;
+        if (firstCell.x !== lastCell.x || firstCell.y !== lastCell.y) {
+            return true;
+        }
+        return false;
+    }
+    return false;
+};
 
 
 /***/ }),
@@ -3237,7 +3256,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  **/
 function setBackgroundColor(editor, color) {
     (0, applyInlineStyle_1.default)(editor, function (element, isInnerNode) {
-        (0, roosterjs_editor_dom_1.setColor)(element, isInnerNode ? '' : color, true /*isBackground*/, editor.isDarkMode());
+        (0, roosterjs_editor_dom_1.setColor)(element, isInnerNode ? '' : color, true /*isBackground*/, editor.isDarkMode(), false /*shouldAdaptFontColor*/, editor.getDarkColorHandler());
     }, 'setBackgroundColor');
 }
 exports.default = setBackgroundColor;
@@ -3542,7 +3561,7 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
 function setTextColor(editor, color, shouldApplyInlineStyle) {
     (0, applyListItemWrap_1.default)(editor, 'color', function (element, isInnerNode) {
         if (!shouldApplyInlineStyle || shouldApplyInlineStyle(element)) {
-            (0, roosterjs_editor_dom_1.setColor)(element, isInnerNode ? '' : color, false /*isBackground*/, editor.isDarkMode());
+            (0, roosterjs_editor_dom_1.setColor)(element, isInnerNode ? '' : color, false /*isBackground*/, editor.isDarkMode(), false /*shouldAdaptFontColor*/, editor.getDarkColorHandler());
         }
     }, 'setTextColor');
 }
@@ -4025,7 +4044,7 @@ function applyCellShading(editor, color) {
         var regions = editor.getSelectedRegions();
         regions.forEach(function (region) {
             if ((0, roosterjs_editor_dom_1.safeInstanceOf)(region.rootNode, 'HTMLTableCellElement')) {
-                (0, roosterjs_editor_dom_1.setColor)(region.rootNode, color, true /* isBackgroundColor */, editor.isDarkMode(), true /** shouldAdaptFontColor */);
+                (0, roosterjs_editor_dom_1.setColor)(region.rootNode, color, true /* isBackgroundColor */, editor.isDarkMode(), true /** shouldAdaptFontColor */, editor.getDarkColorHandler());
                 (0, roosterjs_editor_dom_1.saveTableCellMetadata)(region.rootNode, { bgColorOverride: true });
             }
         });
@@ -5177,7 +5196,7 @@ var ensureTypeInContainer = function (core, position, keyboardEvent, applyFormat
         position = new roosterjs_editor_dom_1.Position(formatNode, 0 /* Begin */);
     }
     if (formatNode && core.lifecycle.defaultFormat) {
-        (0, roosterjs_editor_dom_1.applyFormat)(formatNode, core.lifecycle.defaultFormat, core.lifecycle.isDarkMode);
+        (0, roosterjs_editor_dom_1.applyFormat)(formatNode, core.lifecycle.defaultFormat, core.lifecycle.isDarkMode, core.darkColorHandler);
     }
     // If this is triggered by a keyboard event, let's select the new position
     if (keyboardEvent) {
@@ -5273,7 +5292,7 @@ var getContent = function (core, mode) {
     else if (mode == 3 /* PlainText */) {
         content = (0, roosterjs_editor_dom_1.getTextContent)(root);
     }
-    else if (triggerExtractContentEvent || core.lifecycle.isDarkMode) {
+    else if (triggerExtractContentEvent || core.lifecycle.isDarkMode || core.darkColorHandler) {
         var clonedRoot = cloneNode(root);
         clonedRoot.normalize();
         var originalRange = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
@@ -5285,8 +5304,8 @@ var getContent = function (core, mode) {
                     ? (0, roosterjs_editor_dom_1.getSelectionPath)(core.contentDiv, originalRange)
                     : null;
         var range = path && (0, roosterjs_editor_dom_1.createRange)(clonedRoot, path.start, path.end);
-        if (core.lifecycle.isDarkMode) {
-            core.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */);
+        if (core.lifecycle.isDarkMode || core.darkColorHandler) {
+            core.api.transformColor(core, clonedRoot, false /*includeSelf*/, null /*callback*/, 1 /* DarkToLight */, !!core.darkColorHandler);
         }
         if (triggerExtractContentEvent) {
             core.api.triggerEvent(core, {
@@ -5600,38 +5619,78 @@ var getStyleBasedFormatState = function (core, node) {
         ];
     }
     var styles = node ? (0, roosterjs_editor_dom_1.getComputedStyles)(node) : [];
-    var isDarkMode = core.lifecycle.isDarkMode;
-    var root = core.contentDiv;
-    var ogTextColorNode = isDarkMode &&
-        (override[2]
-            ? pendableFormatSpan
-            : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_COLOR_SELECTOR));
-    var ogBackgroundColorNode = isDarkMode &&
-        (override[3]
-            ? pendableFormatSpan
-            : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_BACK_COLOR_SELECTOR));
-    return {
-        fontName: override[0] || styles[0],
-        fontSize: override[1] || styles[1],
-        textColor: override[2] || styles[2],
-        backgroundColor: override[3] || styles[3],
-        textColors: ogTextColorNode
-            ? {
-                darkModeColor: override[2] || styles[2],
-                lightModeColor: ogTextColorNode.dataset["ogsc" /* OriginalStyleColor */] ||
-                    ogTextColorNode.dataset["ogac" /* OriginalAttributeColor */] ||
-                    styles[2],
+    var contentDiv = core.contentDiv, darkColorHandler = core.darkColorHandler, isDarkMode = core.lifecycle.isDarkMode;
+    if (darkColorHandler) {
+        var styleTextColor = void 0;
+        var styleBackColor = void 0;
+        while (node &&
+            (0, roosterjs_editor_dom_1.contains)(contentDiv, node, true /*treatSameNodeAsContain*/) &&
+            !(styleTextColor && styleBackColor)) {
+            if (node.nodeType == 1 /* Element */) {
+                var element = node;
+                styleTextColor = styleTextColor || element.style.getPropertyValue('color');
+                styleBackColor =
+                    styleBackColor || element.style.getPropertyValue('background-color');
             }
-            : undefined,
-        backgroundColors: ogBackgroundColorNode
-            ? {
-                darkModeColor: override[3] || styles[3],
-                lightModeColor: ogBackgroundColorNode.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
-                    ogBackgroundColorNode.dataset["ogab" /* OriginalAttributeBackgroundColor */] ||
-                    styles[3],
-            }
-            : undefined,
-    };
+            node = node.parentNode;
+        }
+        if (!core.lifecycle.isDarkMode && node == core.contentDiv) {
+            styleTextColor = styleTextColor || styles[2];
+            styleBackColor = styleBackColor || styles[3];
+        }
+        var textColor = darkColorHandler.parseColorValue(override[2] || styleTextColor);
+        var backColor = darkColorHandler.parseColorValue(override[3] || styleBackColor);
+        return {
+            fontName: override[0] || styles[0],
+            fontSize: override[1] || styles[1],
+            textColor: textColor.lightModeColor,
+            backgroundColor: backColor.lightModeColor,
+            textColors: textColor.darkModeColor
+                ? {
+                    lightModeColor: textColor.lightModeColor,
+                    darkModeColor: textColor.darkModeColor,
+                }
+                : undefined,
+            backgroundColors: backColor.darkModeColor
+                ? {
+                    lightModeColor: backColor.lightModeColor,
+                    darkModeColor: backColor.darkModeColor,
+                }
+                : undefined,
+        };
+    }
+    else {
+        var ogTextColorNode = isDarkMode &&
+            (override[2]
+                ? pendableFormatSpan
+                : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, contentDiv, ORIGINAL_STYLE_COLOR_SELECTOR));
+        var ogBackgroundColorNode = isDarkMode &&
+            (override[3]
+                ? pendableFormatSpan
+                : (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, contentDiv, ORIGINAL_STYLE_BACK_COLOR_SELECTOR));
+        return {
+            fontName: override[0] || styles[0],
+            fontSize: override[1] || styles[1],
+            textColor: override[2] || styles[2],
+            backgroundColor: override[3] || styles[3],
+            textColors: ogTextColorNode
+                ? {
+                    darkModeColor: override[2] || styles[2],
+                    lightModeColor: ogTextColorNode.dataset["ogsc" /* OriginalStyleColor */] ||
+                        ogTextColorNode.dataset["ogac" /* OriginalAttributeColor */] ||
+                        styles[2],
+                }
+                : undefined,
+            backgroundColors: ogBackgroundColorNode
+                ? {
+                    darkModeColor: override[3] || styles[3],
+                    lightModeColor: ogBackgroundColorNode.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
+                        ogBackgroundColorNode.dataset["ogab" /* OriginalAttributeBackgroundColor */] ||
+                        styles[3],
+                }
+                : undefined,
+        };
+    }
 };
 exports.getStyleBasedFormatState = getStyleBasedFormatState;
 
@@ -6373,21 +6432,38 @@ var ColorAttributeName = [
  * 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 darkColorHandler = core.darkColorHandler;
     var elements = rootNode && (forceTransform || core.lifecycle.isDarkMode)
         ? getAll(rootNode, includeSelf)
         : [];
     callback === null || callback === void 0 ? void 0 : callback();
-    if (direction == 1 /* DarkToLight */) {
-        transformToLightMode(elements);
-    }
-    else if (core.lifecycle.onExternalContentTransform) {
-        elements.forEach(function (element) { return core.lifecycle.onExternalContentTransform(element); });
+    if (darkColorHandler) {
+        transformV2(elements, darkColorHandler, direction == 0 /* LightToDark */);
     }
     else {
-        transformToDarkMode(elements, core.lifecycle.getDarkColor);
+        if (direction == 1 /* DarkToLight */) {
+            transformToLightMode(elements);
+        }
+        else if (core.lifecycle.onExternalContentTransform) {
+            elements.forEach(function (element) { return core.lifecycle.onExternalContentTransform(element); });
+        }
+        else {
+            transformToDarkMode(elements, core.lifecycle.getDarkColor);
+        }
     }
 };
 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;
+            if (color && color != 'inherit') {
+                (0, roosterjs_editor_dom_1.setColor)(element, color, i != 0, toDark, false /*shouldAdaptFontColor*/, darkColorHandler);
+            }
+        });
+    });
+}
 function transformToLightMode(elements) {
     elements.forEach(function (element) {
         ColorAttributeName.forEach(function (names) {
@@ -7665,10 +7741,12 @@ var LifecyclePlugin = /** @class */ (function () {
         this.adjustColor = options.doNotAdjustEditorColor
             ? function () { }
             : function () {
+                var _a;
                 var textColors = DARK_MODE_DEFAULT_FORMAT.textColors, backgroundColors = DARK_MODE_DEFAULT_FORMAT.backgroundColors;
                 var isDarkMode = _this.state.isDarkMode;
-                (0, roosterjs_editor_dom_1.setColor)(contentDiv, textColors, false /*isBackground*/, isDarkMode);
-                (0, roosterjs_editor_dom_1.setColor)(contentDiv, backgroundColors, true /*isBackground*/, isDarkMode);
+                var darkColorHandler = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getDarkColorHandler();
+                (0, roosterjs_editor_dom_1.setColor)(contentDiv, textColors, false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
+                (0, roosterjs_editor_dom_1.setColor)(contentDiv, backgroundColors, true /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
             };
         this.state = {
             customData: {},
@@ -8148,7 +8226,10 @@ var PendingFormatStatePlugin = /** @class */ (function () {
                     event.rawEvent.which <= 40 /* DOWN */) ||
                     (this.state.pendableFormatPosition &&
                         (currentPosition = this.getCurrentPosition()) &&
-                        !this.state.pendableFormatPosition.equalTo(currentPosition))) {
+                        !this.state.pendableFormatPosition.equalTo(currentPosition)) ||
+                    (event.eventType == 7 /* ContentChanged */ &&
+                        (event.source == "SwitchToDarkMode" /* SwitchToDarkMode */ ||
+                            event.source == "SwitchToLightMode" /* SwitchToLightMode */))) {
                     // If content or position is changed (by keyboard, mouse, or code),
                     // check if current position is still the same with the cached one (if exist),
                     // and clear cached format if position is changed since it is out-of-date now
@@ -8179,11 +8260,12 @@ var PendingFormatStatePlugin = /** @class */ (function () {
             span.appendChild(doc.createTextNode(ZERO_WIDTH_SPACE));
             span.style.setProperty('font-family', (_a = currentStyle.fontName) !== null && _a !== void 0 ? _a : null);
             span.style.setProperty('font-size', (_b = currentStyle.fontSize) !== null && _b !== void 0 ? _b : null);
+            var darkColorHandler = this.editor.getDarkColorHandler();
             if (currentStyle.textColors || currentStyle.textColor) {
-                (0, roosterjs_editor_dom_1.setColor)(span, (currentStyle.textColors || currentStyle.textColor), false /*isBackground*/, isDarkMode);
+                (0, roosterjs_editor_dom_1.setColor)(span, (currentStyle.textColors || currentStyle.textColor), false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
             }
             if (currentStyle.backgroundColors || currentStyle.backgroundColor) {
-                (0, roosterjs_editor_dom_1.setColor)(span, (currentStyle.backgroundColors || currentStyle.backgroundColor), true /*isBackground*/, isDarkMode);
+                (0, roosterjs_editor_dom_1.setColor)(span, (currentStyle.backgroundColors || currentStyle.backgroundColor), true /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
             }
         }
         if (span) {
@@ -8684,6 +8766,98 @@ var removeCellsOutsideSelection = function (vTable) {
 exports.removeCellsOutsideSelection = removeCellsOutsideSelection;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts":
+/*!***************************************************************************!*\
+  !*** ./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts ***!
+  \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var VARIABLE_REGEX = /^\s*var\(\s*(\-\-[a-zA-Z0-9\-_]+)\s*(?:,\s*(.*))?\)\s*$/;
+var VARIABLE_PREFIX = 'var(';
+var COLOR_VAR_PREFIX = 'darkColor';
+/**
+ * @internal
+ */
+var DarkColorHandlerImpl = /** @class */ (function () {
+    function DarkColorHandlerImpl(contentDiv, getDarkColor) {
+        this.contentDiv = contentDiv;
+        this.getDarkColor = getDarkColor;
+        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.
+     * @param lightModeColor Light mode color value
+     * @param isDarkMode Whether current color mode is dark mode
+     * @param darkModeColor Optional dark mode color value. If not passed, we will calculate one.
+     */
+    DarkColorHandlerImpl.prototype.registerColor = function (lightModeColor, isDarkMode, darkModeColor) {
+        var parsedColor = this.parseColorValue(lightModeColor);
+        var colorKey;
+        if (parsedColor) {
+            lightModeColor = parsedColor.lightModeColor;
+            darkModeColor = parsedColor.darkModeColor || darkModeColor;
+            colorKey = parsedColor.key;
+        }
+        if (isDarkMode && lightModeColor) {
+            colorKey =
+                colorKey || "--" + COLOR_VAR_PREFIX + "_" + lightModeColor.replace(/[^\d\w]/g, '_');
+            if (!this.knownColors[colorKey]) {
+                darkModeColor = darkModeColor || this.getDarkColor(lightModeColor);
+                this.knownColors[colorKey] = { lightModeColor: lightModeColor, darkModeColor: darkModeColor };
+                this.contentDiv.style.setProperty(colorKey, darkModeColor);
+            }
+            return "var(" + colorKey + ", " + lightModeColor + ")";
+        }
+        else {
+            return lightModeColor;
+        }
+    };
+    /**
+     * Reset known color record, clean up registered color variables.
+     */
+    DarkColorHandlerImpl.prototype.reset = function () {
+        var _this = this;
+        (0, roosterjs_editor_dom_1.getObjectKeys)(this.knownColors).forEach(function (key) { return _this.contentDiv.style.removeProperty(key); });
+        this.knownColors = {};
+    };
+    /**
+     * 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
+     */
+    DarkColorHandlerImpl.prototype.parseColorValue = function (color) {
+        var _a;
+        var key;
+        var lightModeColor = color || '';
+        var darkModeColor;
+        if (color) {
+            var match = color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
+            if (match) {
+                if (match[2]) {
+                    key = match[1];
+                    lightModeColor = match[2];
+                    darkModeColor = (_a = this.knownColors[key]) === null || _a === void 0 ? void 0 : _a.darkModeColor;
+                }
+                else {
+                    lightModeColor = '';
+                }
+            }
+        }
+        return { key: key, lightModeColor: lightModeColor, darkModeColor: darkModeColor };
+    };
+    return DarkColorHandlerImpl;
+}());
+exports.default = DarkColorHandlerImpl;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-core/lib/editor/Editor.ts":
@@ -8708,6 +8882,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var createCorePlugins_1 = __webpack_require__(/*! ../corePlugins/createCorePlugins */ "./packages/roosterjs-editor-core/lib/corePlugins/createCorePlugins.ts");
+var DarkColorHandlerImpl_1 = __webpack_require__(/*! ./DarkColorHandlerImpl */ "./packages/roosterjs-editor-core/lib/editor/DarkColorHandlerImpl.ts");
 var coreApiMap_1 = __webpack_require__(/*! ../coreApi/coreApiMap */ "./packages/roosterjs-editor-core/lib/coreApi/coreApiMap.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
@@ -8750,6 +8925,9 @@ var Editor = /** @class */ (function () {
                         ? [scrollContainer]
                         : [scrollContainer, contentDiv]);
                 }), imageSelectionBorderColor: options.imageSelectionBorderColor });
+        if (this.isFeatureEnabled("VariableBasedDarkColor" /* VariableBasedDarkColor */)) {
+            this.core.darkColorHandler = new DarkColorHandlerImpl_1.default(contentDiv, this.core.lifecycle.getDarkColor);
+        }
         // 3. Initialize plugins
         this.core.plugins.forEach(function (plugin) { return plugin.initialize(_this); });
         // 4. Ensure user will type in a container node, not the editor content DIV
@@ -8759,10 +8937,12 @@ var Editor = /** @class */ (function () {
      * Dispose this editor, dispose all plugins and custom data
      */
     Editor.prototype.dispose = function () {
+        var _a;
         var core = this.getCore();
         for (var i = core.plugins.length - 1; i >= 0; i--) {
             core.plugins[i].dispose();
         }
+        (_a = core.darkColorHandler) === null || _a === void 0 ? void 0 : _a.reset();
         this.core = null;
     };
     /**
@@ -9473,6 +9653,12 @@ var Editor = /** @class */ (function () {
         var core = this.getCore();
         core.api.transformColor(core, node, true /*includeSelf*/, null /*callback*/, 0 /* LightToDark */);
     };
+    /**
+     * Get a darkColorHandler object for this editor. It will return null if experimental feature "VariableBasedDarkColor" is not enabled
+     */
+    Editor.prototype.getDarkColorHandler = function () {
+        return this.getCore().darkColorHandler || null;
+    };
     /**
      * Make the editor in "Shadow Edit" mode.
      * In Shadow Edit mode, all format change will finally be ignored.
@@ -18118,8 +18304,10 @@ var setColor_1 = __webpack_require__(/*! ./setColor */ "./packages/roosterjs-edi
  * Apply format to an HTML element
  * @param element The HTML element to apply format to
  * @param format The format to apply
+ * @param isDarkMode Whether the content should be formatted in dark mode
+ * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
  */
-function applyFormat(element, format, isDarkMode) {
+function applyFormat(element, format, isDarkMode, darkColorHandler) {
     if (format) {
         var elementStyle = element.style;
         var fontFamily = format.fontFamily, fontSize = format.fontSize, textColor = format.textColor, textColors = format.textColors, backgroundColor = format.backgroundColor, backgroundColors = format.backgroundColors, bold = format.bold, italic = format.italic, underline = format.underline;
@@ -18130,16 +18318,16 @@ function applyFormat(element, format, isDarkMode) {
             elementStyle.fontSize = fontSize;
         }
         if (textColors) {
-            (0, setColor_1.default)(element, textColors, false /*isBackground*/, isDarkMode);
+            (0, setColor_1.default)(element, textColors, false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
         }
         else if (textColor) {
-            (0, setColor_1.default)(element, textColor, false /*isBackground*/, isDarkMode);
+            (0, setColor_1.default)(element, textColor, false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
         }
         if (backgroundColors) {
-            (0, setColor_1.default)(element, backgroundColors, true /*isBackground*/, isDarkMode);
+            (0, setColor_1.default)(element, backgroundColors, true /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
         }
         else if (backgroundColor) {
-            (0, setColor_1.default)(element, backgroundColor, true /*isBackground*/, isDarkMode);
+            (0, setColor_1.default)(element, backgroundColor, true /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
         }
         if (bold) {
             elementStyle.fontWeight = 'bold';
@@ -18376,7 +18564,7 @@ exports.KnownCreateElementData = (_a = {},
     },
     _a[6 /* ImageEditWrapper */] = {
         tag: 'span',
-        style: 'max-width:100%;position:fixed',
+        style: 'max-width:100%;vertical-align:bottom',
         children: [
             {
                 tag: 'div',
@@ -19393,28 +19581,35 @@ var TRANSPARENT_COLOR = 'transparent';
  * @param isBackgroundColor Whether set background color or text color
  * @param isDarkMode Whether current mode is dark mode. @default false
  * @param shouldAdaptTheFontColor Whether the font color needs to be adapted to be visible in a dark or bright background color. @default false
- * @param defaultFontColor Set the default colors that needs to be set to the to be visible.
+ * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
  */
-function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheFontColor) {
+function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheFontColor, darkColorHandler) {
     var colorString = typeof color === 'string' ? color.trim() : '';
     var modeIndependentColor = typeof color === 'string' ? null : color;
+    var cssName = isBackgroundColor ? 'background-color' : 'color';
     if (colorString || modeIndependentColor) {
-        element.style.setProperty(isBackgroundColor ? 'background-color' : 'color', (isDarkMode
-            ? modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor
-            : modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString);
-        if (element.dataset) {
-            var dataSetName = isBackgroundColor
-                ? "ogsb" /* OriginalStyleBackgroundColor */
-                : "ogsc" /* OriginalStyleColor */;
-            if (!isDarkMode || color == TRANSPARENT_COLOR) {
-                delete element.dataset[dataSetName];
-            }
-            else if (modeIndependentColor) {
-                element.dataset[dataSetName] = modeIndependentColor.lightModeColor;
+        if (darkColorHandler) {
+            var colorValue = darkColorHandler.registerColor((modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString, !!isDarkMode, modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor);
+            element.style.setProperty(cssName, colorValue);
+        }
+        else {
+            element.style.setProperty(cssName, (isDarkMode
+                ? modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.darkModeColor
+                : modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString);
+            if (element.dataset) {
+                var dataSetName = isBackgroundColor
+                    ? "ogsb" /* OriginalStyleBackgroundColor */
+                    : "ogsc" /* OriginalStyleColor */;
+                if (!isDarkMode || color == TRANSPARENT_COLOR) {
+                    delete element.dataset[dataSetName];
+                }
+                else if (modeIndependentColor) {
+                    element.dataset[dataSetName] = modeIndependentColor.lightModeColor;
+                }
             }
         }
         if (isBackgroundColor && shouldAdaptTheFontColor) {
-            adaptFontColorToBackgroundColor(element, isDarkMode);
+            adaptFontColorToBackgroundColor(element, (modeIndependentColor === null || modeIndependentColor === void 0 ? void 0 : modeIndependentColor.lightModeColor) || colorString, isDarkMode, darkColorHandler);
         }
     }
 }
@@ -19422,17 +19617,11 @@ exports.default = setColor;
 /**
  * Change the font color to white or some other color, so the text can be visible with a darker background
  * @param element The element that contains text.
+ * @param lightModeBackgroundColor Existing background color in light mode
+ * @param isDarkMode Whether the content is in dark mode
+ * @param darkColorHandler An optional dark color handler object. When it is passed, we will use this handler to do variable-based dark color instead of original dataset base dark color
  */
-function adaptFontColorToBackgroundColor(element, isDarkMode) {
-    var _a;
-    if ((_a = element.firstElementChild) === null || _a === void 0 ? void 0 : _a.hasAttribute('style')) {
-        return;
-    }
-    var backgroundColor = element.style.getPropertyValue('background-color');
-    var lightModeBackgroundColor = (isDarkMode &&
-        (element.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
-            element.dataset["ogab" /* OriginalAttributeBackgroundColor */])) ||
-        backgroundColor;
+function adaptFontColorToBackgroundColor(element, lightModeBackgroundColor, isDarkMode, darkColorHandler) {
     if (!lightModeBackgroundColor || lightModeBackgroundColor === TRANSPARENT) {
         return;
     }
@@ -19443,14 +19632,14 @@ function adaptFontColorToBackgroundColor(element, isDarkMode) {
                 lightModeColor: WHITE,
                 darkModeColor: GRAY,
             };
-            setColor(element, fontForDark, false /*isBackground*/, isDarkMode);
+            setColor(element, fontForDark, false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
             break;
         case 0 /* BRIGHT */:
             var fontForLight = {
                 lightModeColor: BLACK,
                 darkModeColor: WHITE,
             };
-            setColor(element, fontForLight, false /*isBackground*/, isDarkMode);
+            setColor(element, fontForLight, false /*isBackground*/, isDarkMode, false /*shouldAdaptFontColor*/, darkColorHandler);
             break;
     }
 }
@@ -22857,7 +23046,6 @@ var applyChange_1 = __webpack_require__(/*! ./editInfoUtils/applyChange */ "./pa
 var canRegenerateImage_1 = __webpack_require__(/*! ./api/canRegenerateImage */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/api/canRegenerateImage.ts");
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../pluginUtils/DragAndDropHelper */ "./packages/roosterjs-editor-plugins/lib/pluginUtils/DragAndDropHelper.ts");
 var getGeneratedImageSize_1 = __webpack_require__(/*! ./editInfoUtils/getGeneratedImageSize */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getGeneratedImageSize.ts");
-var getLastZIndex_1 = __webpack_require__(/*! ./editInfoUtils/getLastZIndex */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getLastZIndex.ts");
 var Cropper_1 = __webpack_require__(/*! ./imageEditors/Cropper */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Cropper.ts");
 var editInfo_1 = __webpack_require__(/*! ./editInfoUtils/editInfo */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/editInfo.ts");
 var Rotator_1 = __webpack_require__(/*! ./imageEditors/Rotator */ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/imageEditors/Rotator.ts");
@@ -22926,14 +23114,11 @@ var ImageEdit = /** @class */ (function () {
          * Remove the temp wrapper of the image
          */
         this.removeWrapper = function () {
-            var _a, _b;
-            var doc = _this.editor.getDocument();
-            if (_this.zoomWrapper && ((_a = doc.body) === null || _a === void 0 ? void 0 : _a.contains(_this.zoomWrapper))) {
-                (_b = doc.body) === null || _b === void 0 ? void 0 : _b.removeChild(_this.zoomWrapper);
-                _this.toggleImageVisibility(_this.image, true /** showImage */);
+            if (_this.editor.contains(_this.image) && _this.wrapper) {
+                (0, roosterjs_editor_dom_1.unwrap)(_this.image.parentNode);
             }
             _this.wrapper = null;
-            _this.zoomWrapper = null;
+            _this.shadowSpan = null;
         };
         /**
          * Update image edit elements to reflect current editing result
@@ -22946,12 +23131,14 @@ var ImageEdit = /** @class */ (function () {
                 var cropContainers = getEditElements(wrapper, "r_cropC" /* CropContainer */);
                 var cropOverlays = getEditElements(wrapper, "r_cropO" /* CropOverlay */);
                 var resizeHandles = getEditElements(wrapper, "r_resizeH" /* ResizeHandle */);
+                var rotateCenter = getEditElements(wrapper, "r_rotateC" /* RotateCenter */)[0];
+                var rotateHandle = getEditElements(wrapper, "r_rotateH" /* RotateHandle */)[0];
                 var cropHandles = getEditElements(wrapper, "r_cropH" /* CropHandle */);
                 // Cropping and resizing will show different UI, so check if it is cropping here first
-                var isCropping = cropContainers.length == 1 && cropOverlays.length == 4;
+                _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;
                 // Width/height of the image
-                var _b = (0, getGeneratedImageSize_1.default)(_this.editInfo, isCropping), targetWidth = _b.targetWidth, targetHeight = _b.targetHeight, originalWidth = _b.originalWidth, originalHeight = _b.originalHeight, visibleWidth = _b.visibleWidth, visibleHeight = _b.visibleHeight;
+                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 marginHorizontal = (targetWidth - visibleWidth) / 2;
                 var marginVertical = (targetHeight - visibleHeight) / 2;
                 var cropLeftPx = originalWidth * leftPercent;
@@ -22963,16 +23150,15 @@ var ImageEdit = /** @class */ (function () {
                 wrapper.style.height = getPx(visibleHeight);
                 wrapper.style.margin = marginVertical + "px " + marginHorizontal + "px";
                 wrapper.style.transform = "rotate(" + angleRad + "rad)";
-                _this.zoomWrapper.style.width = getPx(visibleWidth);
-                _this.zoomWrapper.style.height = getPx(visibleHeight);
-                fitImageContainer(_this.editor, _this.zoomWrapper, angleRad);
+                _this.wrapper.style.width = getPx(visibleWidth);
+                _this.wrapper.style.height = getPx(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';
                 // Update size of the image
                 _this.clonedImage.style.width = getPx(originalWidth);
                 _this.clonedImage.style.height = getPx(originalHeight);
-                if (isCropping) {
+                if (_this.isCropping) {
                     // For crop, we also need to set position of the overlays
                     setSize(cropContainers[0], cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
                     setSize(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);
@@ -22992,6 +23178,7 @@ var ImageEdit = /** @class */ (function () {
                         (0, Resizer_1.doubleCheckResize)(_this.editInfo, _this.options.preserveRatio, clientWidth, clientHeight);
                         _this.updateWrapper();
                     }
+                    (0, Rotator_1.updateRotateHandlePosition)(_this.editInfo, _this.editor.getVisibleViewport(), marginVertical, rotateCenter, rotateHandle);
                     updateHandleCursor(resizeHandles, angleRad);
                 }
             }
@@ -23014,8 +23201,16 @@ var ImageEdit = /** @class */ (function () {
      * @param editor Editor instance
      */
     ImageEdit.prototype.initialize = function (editor) {
+        var _this = this;
         this.editor = editor;
-        this.disposer = editor.addDomEventHandler('blur', this.onBlur);
+        this.disposer = editor.addDomEventHandler({
+            blur: function () { return _this.onBlur; },
+            dragstart: function (e) {
+                if (_this.image) {
+                    e.preventDefault();
+                }
+            },
+        });
     };
     /**
      * Dispose this plugin
@@ -23039,7 +23234,14 @@ var ImageEdit = /** @class */ (function () {
                 }
                 break;
             case 5 /* MouseDown */:
-                this.setEditingImage(null);
+                // When left click in a image that already in editing mode, do not quit edit mode
+                var mouseTarget = e.rawEvent.target;
+                var button = e.rawEvent.button;
+                if (this.shadowSpan !== mouseTarget ||
+                    (this.shadowSpan === mouseTarget && button !== 0) ||
+                    this.isCropping) {
+                    this.setEditingImage(null);
+                }
                 break;
             case 0 /* KeyDown */:
                 this.setEditingImage(null);
@@ -23054,8 +23256,8 @@ var ImageEdit = /** @class */ (function () {
                     (0, editInfo_1.deleteEditInfo)(img);
                 });
                 break;
-            case 14 /* Scroll */:
-                this.setEditingImage(null);
+            case 12 /* BeforeDispose */:
+                this.removeWrapper();
                 break;
         }
     };
@@ -23086,6 +23288,7 @@ var ImageEdit = /** @class */ (function () {
             this.editInfo = null;
             this.lastSrc = null;
             this.clonedImage = null;
+            this.isCropping = false;
         }
         if (!this.image && (image === null || image === void 0 ? void 0 : image.isContentEditable)) {
             // If there is new image to edit, enter editing mode for this image
@@ -23104,7 +23307,6 @@ var ImageEdit = /** @class */ (function () {
             // Init drag and drop
             this.dndHelpers = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], this.createDndHelpers("r_resizeH" /* ResizeHandle */, Resizer_1.Resizer), true), this.createDndHelpers("r_rotateH" /* RotateHandle */, Rotator_1.Rotator), true), this.createDndHelpers("r_cropH" /* CropHandle */, Cropper_1.Cropper), true), this.createDndHelpers("r_cropC" /* CropContainer */, Cropper_1.Cropper), true);
             this.editor.select(this.image);
-            this.toggleImageVisibility(this.image, false /** showImage */);
         }
     };
     /**
@@ -23117,18 +23319,12 @@ var ImageEdit = /** @class */ (function () {
         this.clonedImage.removeAttribute('id');
         this.wrapper = (0, roosterjs_editor_dom_1.createElement)(6 /* ImageEditWrapper */, this.image.ownerDocument);
         this.wrapper.firstChild.appendChild(this.clonedImage);
-        // keep the same vertical align
-        var originalVerticalAlign = getStylePropertyValue(this.image, 'vertical-align');
-        if (originalVerticalAlign) {
-            this.wrapper.style.verticalAlign = originalVerticalAlign;
-        }
         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';
-        this.clonedImage.style.maxWidth = null;
         // 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()),
@@ -23150,24 +23346,15 @@ var ImageEdit = /** @class */ (function () {
                 _this.wrapper.appendChild(element);
             }
         });
-        this.insertImageWrapper(this.editor, this.image, this.wrapper, this.editor.getZoomScale());
+        this.insertImageWrapper(this.wrapper);
     };
-    ImageEdit.prototype.toggleImageVisibility = function (image, showImage) {
-        var editorId = this.editor.getEditorDomAttribute('id');
-        var doc = this.editor.getDocument();
-        var editingId = 'editingId' + editorId;
-        if (showImage) {
-            (0, roosterjs_editor_dom_1.removeGlobalCssStyle)(doc, editingId);
-        }
-        else {
-            var cssRule = "#" + editorId + " #" + image.id + " {visibility: hidden}";
-            (0, roosterjs_editor_dom_1.setGlobalCssStyles)(doc, cssRule, editingId);
-        }
-    };
-    ImageEdit.prototype.insertImageWrapper = function (editor, image, wrapper, scale) {
-        this.zoomWrapper = copyElementRect(image, createZoomWrapper(editor, wrapper, scale));
-        this.zoomWrapper.style.zIndex = "" + ((0, getLastZIndex_1.default)(editor.getScrollContainer()) + 1);
-        this.editor.getDocument().body.appendChild(this.zoomWrapper);
+    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);
     };
     /**
      * Create drag and drop helpers
@@ -23273,40 +23460,6 @@ function getColorString(color, isDarkMode) {
     }
     return isDarkMode ? color.darkModeColor.trim() : color.lightModeColor.trim();
 }
-function fitImageContainer(editor, zoomWrapper, angle) {
-    var _a, _b;
-    var angleIndex = handleRadIndexCalculator(angle);
-    var isVertical = (angleIndex >= 2 && angleIndex < 4) || angleIndex >= 6;
-    var editorTop = (_b = (_a = editor.getScrollContainer()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.top;
-    var _c = zoomWrapper === null || zoomWrapper === void 0 ? void 0 : zoomWrapper.getBoundingClientRect(), top = _c.top, width = _c.width, height = _c.height;
-    if (editorTop > top) {
-        var rotatePercent = 100 * Math.abs(angle);
-        var zoomWrapperHeight = editorTop - top;
-        var zoomWrapperHeightPercent = isVertical
-            ? rotatePercent * (zoomWrapperHeight / width)
-            : 100 * (zoomWrapperHeight / height);
-        zoomWrapper.style.clipPath = "polygon(0 " + zoomWrapperHeightPercent + "%, 100% " + zoomWrapperHeightPercent + "%, 100% " + (isVertical ? rotatePercent : '100') + "%, 0  " + (isVertical ? rotatePercent : '100') + "%)";
-    }
-}
-function copyElementRect(originalElement, element) {
-    var _a = originalElement.getBoundingClientRect(), top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom;
-    element.style.top = top + "px";
-    element.style.bottom = bottom + "px";
-    element.style.right = right + "px";
-    element.style.left = left + "px";
-    return element;
-}
-function createZoomWrapper(editor, wrapper, scale) {
-    var zoomWrapper = editor.getDocument().createElement('div');
-    zoomWrapper.style.transform = "scale(" + (scale || 1) + ")";
-    zoomWrapper.style.transformOrigin = 'top left';
-    zoomWrapper.style.position = 'fixed';
-    zoomWrapper.appendChild(wrapper);
-    return zoomWrapper;
-}
-function getStylePropertyValue(element, property) {
-    return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
-}
 
 
 /***/ }),
@@ -23533,7 +23686,6 @@ function applyChange(editor, image, editInfo, previousSrc, wasResized, editingIm
     var _a = (0, getGeneratedImageSize_1.default)(editInfo), targetWidth = _a.targetWidth, targetHeight = _a.targetHeight;
     image.src = newSrc;
     if (wasResized || state == 3 /* FullyChanged */) {
-        image.style.maxWidth = 'initial';
         image.width = targetWidth;
         image.height = targetHeight;
         image.style.width = targetWidth + 'px';
@@ -23765,40 +23917,6 @@ function getGeneratedImageSize(editInfo, beforeCrop) {
 exports.default = getGeneratedImageSize;
 
 
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getLastZIndex.ts":
-/*!************************************************************************************************!*\
-  !*** ./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getLastZIndex.ts ***!
-  \************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
-/**
- * @internal
- * Search through from editor div to it's root for the latest z-index value
- * @param editorDiv the editor div element
- * @returns the z index value
- */
-function getLatestZIndex(editorDiv) {
-    var child = editorDiv;
-    var zIndex = 0;
-    while (child && (0, roosterjs_editor_dom_1.getTagOfNode)(child) !== 'BODY') {
-        var childZIndex = parseInt(child.style.zIndex || getComputedStyle(child).zIndex, 10);
-        if (childZIndex) {
-            zIndex = Math.max(zIndex, childZIndex);
-        }
-        child = child.parentElement;
-    }
-    return zIndex;
-}
-exports.default = getLatestZIndex;
-
-
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-plugins/lib/plugins/ImageEdit/editInfoUtils/getTargetSizeByPercentage.ts":
@@ -24196,7 +24314,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRotateHTML = exports.Rotator = void 0;
+exports.getRotateHTML = exports.updateRotateHandlePosition = exports.Rotator = void 0;
 var ROTATE_SIZE = 32;
 var ROTATE_GAP = 15;
 var DEG_PER_RAD = 180 / Math.PI;
@@ -24231,6 +24349,26 @@ exports.Rotator = {
         }
     },
 };
+/**
+ * @internal
+ * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
+ * 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';
+}
+exports.updateRotateHandlePosition = updateRotateHandlePosition;
 /**
  * @internal
  * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image
@@ -28546,7 +28684,7 @@ var Watermark = /** @class */ (function () {
                 this.removeWatermark(wrapper);
             }
             else if (event.operation == 0 /* NewEntity */) {
-                (0, roosterjs_editor_dom_1.applyFormat)(wrapper, this.format, this.editor.isDarkMode());
+                (0, roosterjs_editor_dom_1.applyFormat)(wrapper, this.format, this.editor.isDarkMode(), this.editor.getDarkColorHandler());
                 wrapper.spellcheck = false;
             }
         }
@@ -29595,6 +29733,12 @@ var CompatibleExperimentalFeatures;
      * the block element (In most case, the DIV element) so keep the block element clean.
      */
     CompatibleExperimentalFeatures["DefaultFormatInSpan"] = "DefaultFormatInSpan";
+    /**
+     * Use variable-based dark mode solution rather than dataset-based solution.
+     * When enable this feature, need to pass in a DarkModelHandler object to each call of setColor and applyFormat
+     * if you need them work for dark mode
+     */
+    CompatibleExperimentalFeatures["VariableBasedDarkColor"] = "VariableBasedDarkColor";
 })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));