roosterjs 9.32.0 → 9.34.0

package/dist/rooster.js

@@ -2433,9 +2433,9 @@ exports.setModelIndentation = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var findListItemsInSameThread_1 = __webpack_require__(/*! ../list/findListItemsInSameThread */ "./packages/roosterjs-content-model-api/lib/modelApi/list/findListItemsInSameThread.ts");
 var getListAnnounceData_1 = __webpack_require__(/*! ../list/getListAnnounceData */ "./packages/roosterjs-content-model-api/lib/modelApi/list/getListAnnounceData.ts");
+var adjustIndentation_1 = __webpack_require__(/*! ../common/adjustIndentation */ "./packages/roosterjs-content-model-api/lib/modelApi/common/adjustIndentation.ts");
 var splitSelectedParagraphByBr_1 = __webpack_require__(/*! ./splitSelectedParagraphByBr */ "./packages/roosterjs-content-model-api/lib/modelApi/block/splitSelectedParagraphByBr.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var IndentStepInPixel = 40;
 /**
  * @param model The content model to set indentation
  * @param indentation The indentation type, 'indent' to indent, 'outdent' to outdent
@@ -2443,7 +2443,7 @@ var IndentStepInPixel = 40;
  * Set indentation for selected list items or paragraphs
  */
 function setModelIndentation(model, indentation, length, context) {
-    if (length === void 0) { length = IndentStepInPixel; }
+    if (length === void 0) { length = adjustIndentation_1.IndentStepInPixel; }
     (0, splitSelectedParagraphByBr_1.splitSelectedParagraphByBr)(model);
     var paragraphOrListItem = (0, roosterjs_content_model_dom_1.getOperationalBlocks)(model, ['ListItem'], ['TableCell']);
     var isIndent = indentation == 'indent';
@@ -2563,7 +2563,7 @@ function isMultilevelSelection(model, listItem, parent) {
     return false;
 }
 function calculateMarginValue(format, isIndent, length) {
-    if (length === void 0) { length = IndentStepInPixel; }
+    if (length === void 0) { length = adjustIndentation_1.IndentStepInPixel; }
     var marginLeft = format.marginLeft, marginRight = format.marginRight, direction = format.direction;
     var isRtl = direction == 'rtl';
     var originalValue = (0, roosterjs_content_model_dom_1.parseValueWithUnit)(isRtl ? marginRight : marginLeft);
@@ -2725,6 +2725,131 @@ function areAllBlockQuotes(blockAndParents) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-api/lib/modelApi/common/adjustIndentation.ts":
+/*!***************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-api/lib/modelApi/common/adjustIndentation.ts ***!
+  \***************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.adjustTableIndentation = exports.adjustListIndentation = exports.IndentStepInPixel = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var EN_SPACE = '\u2002';
+var REGULAR_SPACE = '\u0020';
+var NON_BREAK_SPACES = '\u00A0';
+/**
+ * @internal
+ */
+exports.IndentStepInPixel = 40;
+function countTabsSpaces(text) {
+    var spaces = countSpacesBeforeText(text);
+    var tabSpaces = Math.floor(spaces / 4);
+    return tabSpaces;
+}
+function countSpacesBeforeText(str) {
+    var e_1, _a;
+    var count = 0;
+    try {
+        for (var str_1 = (0, tslib_1.__values)(str), str_1_1 = str_1.next(); !str_1_1.done; str_1_1 = str_1.next()) {
+            var char = str_1_1.value;
+            if (char === EN_SPACE || char === NON_BREAK_SPACES || char == REGULAR_SPACE) {
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (str_1_1 && !str_1_1.done && (_a = str_1.return)) _a.call(str_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return count;
+}
+/**
+ * @internal
+ */
+function adjustListIndentation(listItem) {
+    var block = listItem.blocks[0];
+    if (block.blockType == 'Paragraph' &&
+        block.segments.length > 0 &&
+        block.segments[0].segmentType == 'Text') {
+        var tabSpaces_1 = countTabsSpaces(block.segments[0].text);
+        if (tabSpaces_1 > 0) {
+            (0, roosterjs_content_model_dom_1.mutateSegment)(block, block.segments[0], function (textSegment) {
+                textSegment.text = textSegment.text.substring(tabSpaces_1 * 4);
+            });
+            listItem.levels[0].format.marginLeft = tabSpaces_1 * exports.IndentStepInPixel + 'px';
+        }
+    }
+}
+exports.adjustListIndentation = adjustListIndentation;
+/**
+ * @internal
+ */
+function adjustTableIndentation(insertPoint, table) {
+    var paragraph = insertPoint.paragraph, marker = insertPoint.marker;
+    var indentationMargin = getTableIndentation(paragraph);
+    if (indentationMargin) {
+        insertPoint.paragraph.segments = [marker];
+        if (insertPoint.paragraph.format.direction == 'rtl') {
+            table.format.marginRight = indentationMargin * exports.IndentStepInPixel + 'px';
+        }
+        else {
+            table.format.marginLeft = indentationMargin * exports.IndentStepInPixel + 'px';
+        }
+    }
+}
+exports.adjustTableIndentation = adjustTableIndentation;
+var getTableIndentation = function (paragraph) {
+    var e_2, _a;
+    var tabsNumber = 0;
+    var segments = paragraph.segments;
+    var isEmptyLine = paragraph.segments.every(function (s) {
+        return (s.segmentType == 'Text' && s.text.trim().length == 0) ||
+            s.segmentType == 'SelectionMarker' ||
+            s.segmentType == 'Br';
+    });
+    if (!isEmptyLine) {
+        return;
+    }
+    var numberOfSegments = 0;
+    try {
+        for (var segments_1 = (0, tslib_1.__values)(segments), segments_1_1 = segments_1.next(); !segments_1_1.done; segments_1_1 = segments_1.next()) {
+            var seg = segments_1_1.value;
+            if (seg.segmentType === 'Text') {
+                tabsNumber = tabsNumber + countTabsSpaces(seg.text);
+                numberOfSegments++;
+            }
+            else {
+                break;
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (segments_1_1 && !segments_1_1.done && (_a = segments_1.return)) _a.call(segments_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    // Text segments must be >= (total segments - 2) to apply margin.
+    // If not, the selection marker is likely between  texts segment, so skip margin adjustment.
+    if (segments.length - 2 <= numberOfSegments) {
+        return tabsNumber;
+    }
+    return;
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-api/lib/modelApi/common/clearModelFormat.ts":
@@ -3698,6 +3823,7 @@ function getListNumber(path, listItem) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setListType = void 0;
+var adjustIndentation_1 = __webpack_require__(/*! ../common/adjustIndentation */ "./packages/roosterjs-content-model-api/lib/modelApi/common/adjustIndentation.ts");
 var splitSelectedParagraphByBr_1 = __webpack_require__(/*! ../block/splitSelectedParagraphByBr */ "./packages/roosterjs-content-model-api/lib/modelApi/block/splitSelectedParagraphByBr.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
@@ -3726,6 +3852,11 @@ function setListType(model, listType, removeMargins) {
             var level = block.levels.pop();
             if (!alreadyInExpectedType && level) {
                 level.listType = listType;
+                (0, roosterjs_content_model_dom_1.updateListMetadata)(level, function (metadata) {
+                    return Object.assign({}, metadata, {
+                        applyListStyleFromLevel: true,
+                    });
+                });
                 block.levels.push(level);
             }
             else if (block.blocks.length == 1) {
@@ -3769,6 +3900,7 @@ function setListType(model, listType, removeMargins) {
                     }
                     var mutableBlock = (0, roosterjs_content_model_dom_1.mutateBlock)(block);
                     newListItem.blocks.push(mutableBlock);
+                    (0, adjustIndentation_1.adjustListIndentation)(newListItem);
                     (0, roosterjs_content_model_dom_1.copyFormat)(newListItem.format, mutableBlock.format, roosterjs_content_model_dom_1.ListFormatsToMove, true /*deleteOriginalFormat*/);
                     (0, roosterjs_content_model_dom_1.copyFormat)(newListItem.format, mutableBlock.format, roosterjs_content_model_dom_1.ListFormatsToKeep);
                     (0, roosterjs_content_model_dom_1.mutateBlock)(parent).blocks.splice(index, 1, newListItem);
@@ -5307,7 +5439,7 @@ function getFormatState(editor, conflictSolution) {
         isDarkMode: editor.isDarkMode(),
     };
     editor.formatContentModel(function (model) {
-        (0, roosterjs_content_model_dom_1.retrieveModelFormatState)(model, pendingFormat, result, conflictSolution, editor.getDOMHelper());
+        (0, roosterjs_content_model_dom_1.retrieveModelFormatState)(model, pendingFormat, result, conflictSolution, editor.getDOMHelper(), editor.isDarkMode(), editor.getColorManager());
         return false;
     }, undefined /*options*/, {
         processorOverride: {
@@ -6941,6 +7073,7 @@ exports.formatTable = formatTable;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.insertTable = void 0;
+var adjustIndentation_1 = __webpack_require__(/*! ../../modelApi/common/adjustIndentation */ "./packages/roosterjs-content-model-api/lib/modelApi/common/adjustIndentation.ts");
 var createTableStructure_1 = __webpack_require__(/*! ../../modelApi/table/createTableStructure */ "./packages/roosterjs-content-model-api/lib/modelApi/table/createTableStructure.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 /**
@@ -6961,6 +7094,7 @@ function insertTable(editor, columns, rows, format) {
             var doc = (0, roosterjs_content_model_dom_1.createContentModelDocument)();
             var table = (0, createTableStructure_1.createTableStructure)(doc, columns, rows);
             (0, roosterjs_content_model_dom_1.normalizeTable)(table, editor.getPendingFormat() || insertPosition.marker.format);
+            (0, adjustIndentation_1.adjustTableIndentation)(insertPosition, table);
             // Assign default vertical align
             format = format || { verticalAlign: 'top' };
             (0, roosterjs_content_model_dom_1.applyTableFormat)(table, format);
@@ -7617,6 +7751,7 @@ var DefaultSanitizingOption = {
     additionalDisallowedTags: [],
     styleSanitizers: {},
     attributeSanitizers: {},
+    processNonVisibleElements: false,
 };
 /**
  * @internal
@@ -8056,26 +8191,37 @@ function isCssVariable(value) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.exportContent = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+// Here I didn't add 'HTMLFast' to ExportContentMode type because it will make this a breaking change and EditorAdapter will see build time error without bumping version
+// Once we are confident that 'HTMLFast' is stable, we can fully switch 'HTML' to use the 'HTMLFast' approach
 function exportContent(editor, mode, optionsOrCallbacks) {
     if (mode === void 0) { mode = 'HTML'; }
-    if (mode == 'PlainTextFast') {
-        return editor.getDOMHelper().getTextContent();
-    }
-    else {
-        var model = editor.getContentModelCopy('clean');
-        if (mode == 'PlainText') {
+    var model;
+    switch (mode) {
+        case 'PlainTextFast':
+            return editor.getDOMHelper().getTextContent();
+        case 'PlainText':
+            model = editor.getContentModelCopy('clean');
             return (0, roosterjs_content_model_dom_1.contentModelToText)(model, undefined /*separator*/, optionsOrCallbacks);
-        }
-        else {
+        case 'HTMLFast':
+            var clonedRoot = editor.getDOMHelper().getClonedRoot();
+            if (editor.isDarkMode()) {
+                (0, roosterjs_content_model_dom_1.transformColor)(clonedRoot, false /*includeSelf*/, 'darkToLight', editor.getColorManager());
+            }
+            return getHTMLFromDOM(editor, clonedRoot);
+        case 'HTML':
+        default:
+            model = editor.getContentModelCopy('clean');
             var doc = editor.getDocument();
             var div = doc.createElement('div');
             (0, roosterjs_content_model_dom_1.contentModelToDom)(doc, div, model, (0, roosterjs_content_model_dom_1.createModelToDomContext)(undefined /*editorContext*/, optionsOrCallbacks));
-            editor.triggerEvent('extractContentWithDom', { clonedRoot: div }, true /*broadcast*/);
-            return div.innerHTML;
-        }
+            return getHTMLFromDOM(editor, div);
     }
 }
 exports.exportContent = exportContent;
+function getHTMLFromDOM(editor, root) {
+    editor.triggerEvent('extractContentWithDom', { clonedRoot: root }, true /*broadcast*/);
+    return root.innerHTML;
+}
 
 
 /***/ }),
@@ -8250,6 +8396,8 @@ function generatePasteOptionFromPlugins(editor, clipboardData, fragment, htmlFro
         processorOverride: {},
         styleSanitizers: {},
         attributeSanitizers: {},
+        processNonVisibleElements: !!editor.getEnvironment().domToModelSettings.customized
+            .processNonVisibleElements,
     };
     var event = {
         eventType: 'beforePaste',
@@ -8931,7 +9079,7 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  */
 var attachDomEvent = function (core, eventMap) {
     var disposers = (0, roosterjs_content_model_dom_1.getObjectKeys)(eventMap || {}).map(function (key) {
-        var _a = eventMap[key], pluginEventType = _a.pluginEventType, beforeDispatch = _a.beforeDispatch;
+        var _a = eventMap[key], pluginEventType = _a.pluginEventType, beforeDispatch = _a.beforeDispatch, capture = _a.capture;
         var eventName = key;
         var onEvent = function (event) {
             if (beforeDispatch) {
@@ -8944,9 +9092,11 @@ var attachDomEvent = function (core, eventMap) {
                 }, false /*broadcast*/);
             }
         };
-        core.logicalRoot.addEventListener(eventName, onEvent);
+        core.logicalRoot.addEventListener(eventName, onEvent, { capture: capture });
         return function () {
-            core.logicalRoot.removeEventListener(eventName, onEvent);
+            core.logicalRoot.removeEventListener(eventName, onEvent, {
+                capture: capture,
+            });
         };
     });
     return function () { return disposers.forEach(function (disposers) { return disposers(); }); };
@@ -15166,8 +15316,10 @@ var DOMHelperImpl = /** @class */ (function () {
     };
     /**
      * Get format of the container element
+     * @param isInDarkMode Optional flag to indicate if the environment is in dark mode
+     * @param darkColorHandler Optional DarkColorHandler to retrieve dark mode colors
      */
-    DOMHelperImpl.prototype.getContainerFormat = function () {
+    DOMHelperImpl.prototype.getContainerFormat = function (isInDarkMode, darkColorHandler) {
         var _a, _b;
         var window = this.contentDiv.ownerDocument.defaultView;
         var style = window === null || window === void 0 ? void 0 : window.getComputedStyle(this.contentDiv);
@@ -15176,8 +15328,8 @@ var DOMHelperImpl = /** @class */ (function () {
                 fontSize: style.fontSize,
                 fontFamily: style.fontFamily,
                 fontWeight: style.fontWeight,
-                textColor: style.color,
-                backgroundColor: style.backgroundColor,
+                textColor: (0, roosterjs_content_model_dom_1.getColor)(this.contentDiv, false /*isBackgroundColor*/, !!isInDarkMode, darkColorHandler, style.color),
+                backgroundColor: (0, roosterjs_content_model_dom_1.getColor)(this.contentDiv, true /*isBackgroundColor*/, !!isInDarkMode, darkColorHandler, style.backgroundColor),
                 italic: style.fontStyle == 'italic',
                 letterSpacing: style.letterSpacing,
                 lineHeight: style.lineHeight,
@@ -15863,6 +16015,13 @@ exports.defaultContentModelFormatMap = {
     code: {
         fontFamily: 'monospace',
     },
+    dd: {
+        marginLeft: '40px',
+    },
+    dl: {
+        marginTop: '1em',
+        marginBottom: '1em',
+    },
     h1: {
         fontWeight: 'bold',
         fontSize: '2em',
@@ -15941,9 +16100,13 @@ exports.defaultHTMLStyleMap = {
         display: 'block',
         textAlign: 'center',
     },
-    dd: blockElement,
+    dd: { display: 'block', marginInlineStart: '40px' },
     div: blockElement,
-    dl: blockElement,
+    dl: {
+        display: 'block',
+        marginTop: '1em',
+        marginBottom: '1em',
+    },
     dt: blockElement,
     em: {
         fontStyle: 'italic',
@@ -16577,6 +16740,7 @@ function createDomToModelConfig(options) {
         formatParsers: buildFormatParsers(options.map(function (x) { return x === null || x === void 0 ? void 0 : x.formatParserOverride; }), options.map(function (x) { return x === null || x === void 0 ? void 0 : x.additionalFormatParsers; })),
         defaultElementProcessors: defaultProcessors_1.defaultProcessorMap,
         defaultFormatParsers: defaultFormatHandlers_1.defaultFormatParsers,
+        processNonVisibleElements: options.some(function (x) { return !!(x === null || x === void 0 ? void 0 : x.processNonVisibleElements); }),
     };
 }
 exports.createDomToModelConfig = createDomToModelConfig;
@@ -16656,8 +16820,11 @@ exports.defaultProcessorMap = {
     blockquote: knownElementProcessor_1.knownElementProcessor,
     br: brProcessor_1.brProcessor,
     code: codeProcessor_1.codeProcessor,
+    dd: formatContainerProcessor_1.formatContainerProcessor,
     del: knownElementProcessor_1.knownElementProcessor,
     div: knownElementProcessor_1.knownElementProcessor,
+    dl: formatContainerProcessor_1.formatContainerProcessor,
+    dt: formatContainerProcessor_1.formatContainerProcessor,
     em: knownElementProcessor_1.knownElementProcessor,
     font: fontProcessor_1.fontProcessor,
     i: knownElementProcessor_1.knownElementProcessor,
@@ -16849,10 +17016,10 @@ exports.childProcessor = childProcessor;
  * @param group The parent block group
  * @param parent Parent DOM node to process
  * @param context DOM to Content Model context
- *
  */
 function processChildNode(group, child, context) {
-    if ((0, isNodeOfType_1.isNodeOfType)(child, 'ELEMENT_NODE') && child.style.display != 'none') {
+    if ((0, isNodeOfType_1.isNodeOfType)(child, 'ELEMENT_NODE') &&
+        (child.style.display != 'none' || context.processNonVisibleElements)) {
         context.elementProcessors.element(group, child, context);
     }
     else if ((0, isNodeOfType_1.isNodeOfType)(child, 'TEXT_NODE')) {
@@ -18203,8 +18370,9 @@ var BLOCK_DISPLAY_STYLES = ['block', 'list-item', 'table', 'table-cell', 'flex']
  * @param context The context of DOM to Content Model conversion
  */
 function isBlockElement(element) {
-    var display = element.style.display || (0, getDefaultStyle_1.getDefaultStyle)(element).display || '';
-    return BLOCK_DISPLAY_STYLES.indexOf(display) >= 0;
+    var display = element.style.display == 'none' ? null : element.style.display;
+    var effectiveDisplay = display || (0, getDefaultStyle_1.getDefaultStyle)(element).display || '';
+    return BLOCK_DISPLAY_STYLES.indexOf(effectiveDisplay) >= 0;
 }
 exports.isBlockElement = isBlockElement;
 
@@ -19652,12 +19820,13 @@ exports.wrap = wrap;
 /*!*************************************************************************************************!*\
   !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/block/directionFormatHandler.ts ***!
   \*************************************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.directionFormatHandler = void 0;
+var isElementOfType_1 = __webpack_require__(/*! ../../domUtils/isElementOfType */ "./packages/roosterjs-content-model-dom/lib/domUtils/isElementOfType.ts");
 /**
  * @internal
  */
@@ -19672,6 +19841,9 @@ exports.directionFormatHandler = {
         if (format.direction) {
             element.style.direction = format.direction;
         }
+        if (format.direction == 'rtl' && (0, isElementOfType_1.isElementOfType)(element, 'table')) {
+            element.style.justifySelf = 'flex-end';
+        }
     },
 };
 
@@ -19794,13 +19966,33 @@ var MarginKeys = [
     'marginBottom',
     'marginLeft',
 ];
+var DefaultMarginKey = {
+    ltr: {
+        marginRight: 'marginInlineEnd',
+        marginLeft: 'marginInlineStart',
+    },
+    rtl: {
+        marginRight: 'marginInlineStart',
+        marginLeft: 'marginInlineEnd',
+    },
+};
+var LTR = {
+    marginLeft: 'marginRight',
+    marginRight: 'marginLeft',
+    marginTop: 'marginTop',
+    marginBottom: 'marginBottom',
+};
 /**
  * @internal
  */
 exports.marginFormatHandler = {
     parse: function (format, element, _, defaultStyle) {
         MarginKeys.forEach(function (key) {
-            var value = element.style[key] || defaultStyle[key];
+            var _a, _b;
+            var alternativeKey = DefaultMarginKey[(_a = format.direction) !== null && _a !== void 0 ? _a : 'ltr'][key];
+            var value = element.style[key] ||
+                defaultStyle[key] ||
+                (alternativeKey ? (_b = defaultStyle[alternativeKey]) === null || _b === void 0 ? void 0 : _b.toString() : '');
             if (value) {
                 switch (key) {
                     case 'marginTop':
@@ -19822,7 +20014,8 @@ exports.marginFormatHandler = {
     apply: function (format, element, context) {
         MarginKeys.forEach(function (key) {
             var value = format[key];
-            if (value != context.implicitFormat[key]) {
+            var ltrKey = format.direction == 'rtl' ? LTR[key] : key;
+            if (value != context.implicitFormat[ltrKey]) {
                 element.style[key] = value || '0';
             }
         });
@@ -20625,6 +20818,7 @@ exports.defaultFormatKeysPerCategory = {
         'size',
         'tableLayout',
         'textColor',
+        'direction',
     ],
     tableBorder: ['borderBox', 'tableSpacing'],
     tableCellBorder: ['borderBox'],
@@ -21550,11 +21744,12 @@ var COLOR_VAR_PREFIX = '--darkColor';
  * @param isBackground True to get background color, false to get text color
  * @param isDarkMode Whether element is in dark mode now
  * @param darkColorHandler @optional The dark color handler object to help manager dark mode color
+ * @param fallback @optional Fallback color to use if no color is found from the element
  */
-function getColor(element, isBackground, isDarkMode, darkColorHandler) {
+function getColor(element, isBackground, isDarkMode, darkColorHandler, fallback) {
     var color = (isBackground ? element.style.backgroundColor : element.style.color) ||
         element.getAttribute(isBackground ? 'bgcolor' : 'color') ||
-        undefined;
+        fallback;
     if (color && exports.DeprecatedColors.indexOf(color) > -1) {
         color = isBackground ? undefined : BlackColor;
     }
@@ -25182,8 +25377,12 @@ var parseValueWithUnit_1 = __webpack_require__(/*! ../../formatHandlers/utils/pa
  * @param pendingFormat Existing pending format, if any
  * @param formatState Existing format state object, used for receiving the result
  * @param conflictSolution The strategy for handling format conflicts
+ * @param domHelper Optional DOMHelper to retrieve container format
+ * @param isInDarkMode Optional flag to indicate if the environment is in dark mode
+ * @param colorHandler Optional DarkColorHandler to handle dark mode colors
+ *
  */
-function retrieveModelFormatState(model, pendingFormat, formatState, conflictSolution, domHelper) {
+function retrieveModelFormatState(model, pendingFormat, formatState, conflictSolution, domHelper, isInDarkMode, colorHandler) {
     if (conflictSolution === void 0) { conflictSolution = 'remove'; }
     var firstTableContext;
     var firstBlock;
@@ -25220,7 +25419,8 @@ function retrieveModelFormatState(model, pendingFormat, formatState, conflictSol
                     // to make sure the current format contains all required format.
                     if (!hasAllRequiredFormat(currentFormat)) {
                         if (!containerFormat) {
-                            containerFormat = (_d = domHelper === null || domHelper === void 0 ? void 0 : domHelper.getContainerFormat()) !== null && _d !== void 0 ? _d : modelFormat;
+                            containerFormat =
+                                (_d = domHelper === null || domHelper === void 0 ? void 0 : domHelper.getContainerFormat(isInDarkMode, colorHandler)) !== null && _d !== void 0 ? _d : modelFormat;
                         }
                         currentFormat = Object.assign({}, containerFormat, currentFormat);
                     }
@@ -26954,6 +27154,7 @@ function calcPosition(pos) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.buildFormatAppliers = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var defaultContentModelFormatMap_1 = __webpack_require__(/*! ../../config/defaultContentModelFormatMap */ "./packages/roosterjs-content-model-dom/lib/config/defaultContentModelFormatMap.ts");
 var defaultContentModelHandlers_1 = __webpack_require__(/*! ./defaultContentModelHandlers */ "./packages/roosterjs-content-model-dom/lib/modelToDom/context/defaultContentModelHandlers.ts");
 var getObjectKeys_1 = __webpack_require__(/*! ../../domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
 var defaultFormatHandlers_1 = __webpack_require__(/*! ../../formatHandlers/defaultFormatHandlers */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts");
@@ -27018,6 +27219,8 @@ function createModelToDomConfig(options) {
         defaultModelHandlers: defaultContentModelHandlers_1.defaultContentModelHandlers,
         defaultFormatAppliers: defaultFormatHandlers_1.defaultFormatAppliers,
         metadataAppliers: Object.assign.apply(Object, (0, tslib_1.__spreadArray)([{}], (0, tslib_1.__read)(options.map(function (x) { return x === null || x === void 0 ? void 0 : x.metadataAppliers; })), false)),
+        defaultContentModelFormatMap: Object.assign.apply(Object, (0, tslib_1.__spreadArray)([{},
+            defaultContentModelFormatMap_1.defaultContentModelFormatMap], (0, tslib_1.__read)(options.map(function (x) { return x === null || x === void 0 ? void 0 : x.defaultContentModelFormatOverride; })), false)),
     };
 }
 exports.createModelToDomConfig = createModelToDomConfig;
@@ -28271,13 +28474,12 @@ exports.handleSegmentCommon = handleSegmentCommon;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.stackFormat = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var defaultContentModelFormatMap_1 = __webpack_require__(/*! ../../config/defaultContentModelFormatMap */ "./packages/roosterjs-content-model-dom/lib/config/defaultContentModelFormatMap.ts");
 /**
  * @internal
  */
 function stackFormat(context, tagNameOrFormat, callback) {
     var newFormat = typeof tagNameOrFormat === 'string'
-        ? defaultContentModelFormatMap_1.defaultContentModelFormatMap[tagNameOrFormat]
+        ? context.defaultContentModelFormatMap[tagNameOrFormat]
         : tagNameOrFormat;
     if (newFormat) {
         var implicitFormat = context.implicitFormat;
@@ -28556,7 +28758,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.applyTextFormatting = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
-var SPLIT_PATTERN = /(\*\*\*.*?\*\*\*|\*\*.*?\*\*|\*.*?\*)/;
+var SPLIT_PATTERN = /(\*\*\*.*?\*\*\*|\*\*.*?\*\*|\*.*?\*|\~\~.*?\~\~)/;
 /**
  * @internal
  */
@@ -28599,6 +28801,10 @@ function createFormattedSegment(text, format, link) {
         text = text.replace(/\*/g, '');
         text = text + ' ';
     }
+    else if (text.startsWith('~~') && text.endsWith('~~')) {
+        format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, format), { strikethrough: true });
+        text = text.replace(/\~\~/g, '');
+    }
     return (0, roosterjs_content_model_dom_1.createText)(text, format, link);
 }
 
@@ -29463,6 +29669,9 @@ function textProcessor(text) {
     if (text.format.fontWeight == 'bold') {
         markdownString = "**" + markdownString + "**";
     }
+    if (text.format.strikethrough) {
+        markdownString = "~~" + markdownString + "~~";
+    }
     if (text.format.italic) {
         markdownString = "*" + markdownString + "*";
     }
@@ -30617,7 +30826,10 @@ function getNumericValue(text, checkFullText) {
     var number = checkFullText ? text : text.substring(0, text.length - ORDINAL_LENGTH);
     var isNumber = /^-?\d+$/.test(number);
     if (isNumber) {
-        return parseInt(text);
+        var numericValue = parseInt(number);
+        return Math.abs(numericValue) < 20
+            ? numericValue
+            : parseInt(number.substring(number.length - 1));
     }
     return null;
 }
@@ -31321,6 +31533,38 @@ var deleteList = function (context) {
 exports.deleteList = deleteList;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteParagraphStyle.ts":
+/*!***********************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteParagraphStyle.ts ***!
+  \***********************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.deleteParagraphStyle = void 0;
+/**
+ * @internal
+ */
+var deleteParagraphStyle = function (context) {
+    if (context.deleteResult === 'nothingToDelete') {
+        var insertPoint = context.insertPoint;
+        var paragraph = insertPoint.paragraph;
+        // If the paragraph is empty, we will delete any style in it
+        // This is to ensure the paragraph style is reset to default when there is no content in the paragraph
+        if (paragraph.segments.every(function (s) { return s.segmentType === 'SelectionMarker' || s.segmentType === 'Br'; }) &&
+            paragraph.segments.filter(function (s) { return s.segmentType === 'Br'; }).length <= 1 &&
+            Object.keys(paragraph.format).length > 0) {
+            paragraph.format = {};
+            context.deleteResult = 'range';
+        }
+    }
+};
+exports.deleteParagraphStyle = deleteParagraphStyle;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteWordSelection.ts":
@@ -31766,6 +32010,7 @@ exports.keyboardDelete = void 0;
 var deleteAllSegmentBefore_1 = __webpack_require__(/*! ./deleteSteps/deleteAllSegmentBefore */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteAllSegmentBefore.ts");
 var deleteEmptyQuote_1 = __webpack_require__(/*! ./deleteSteps/deleteEmptyQuote */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteEmptyQuote.ts");
 var deleteList_1 = __webpack_require__(/*! ./deleteSteps/deleteList */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteList.ts");
+var deleteParagraphStyle_1 = __webpack_require__(/*! ./deleteSteps/deleteParagraphStyle */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteParagraphStyle.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var handleKeyboardEventCommon_1 = __webpack_require__(/*! ./handleKeyboardEventCommon */ "./packages/roosterjs-content-model-plugins/lib/edit/handleKeyboardEventCommon.ts");
 var deleteWordSelection_1 = __webpack_require__(/*! ./deleteSteps/deleteWordSelection */ "./packages/roosterjs-content-model-plugins/lib/edit/deleteSteps/deleteWordSelection.ts");
@@ -31816,6 +32061,7 @@ function getDeleteSteps(rawEvent, isMac) {
         isForward ? null : deleteList_1.deleteList,
         deleteCollapsedSelection,
         deleteQuote,
+        deleteParagraphStyle_1.deleteParagraphStyle,
     ];
 }
 function shouldDeleteWithContentModel(selection, rawEvent, handleExpandedSelection) {
@@ -32920,6 +33166,7 @@ var imageEditUtils_1 = __webpack_require__(/*! ./utils/imageEditUtils */ "./pack
 var createImageWrapper_1 = __webpack_require__(/*! ./utils/createImageWrapper */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts");
 var cropperContext_1 = __webpack_require__(/*! ./Cropper/cropperContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Cropper/cropperContext.ts");
 var findEditingImage_1 = __webpack_require__(/*! ./utils/findEditingImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/findEditingImage.ts");
+var filterInnerResizerHandles_1 = __webpack_require__(/*! ./utils/filterInnerResizerHandles */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/filterInnerResizerHandles.ts");
 var getDropAndDragHelpers_1 = __webpack_require__(/*! ./utils/getDropAndDragHelpers */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getDropAndDragHelpers.ts");
 var getHTMLImageOptions_1 = __webpack_require__(/*! ./utils/getHTMLImageOptions */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getHTMLImageOptions.ts");
 var getSelectedImage_1 = __webpack_require__(/*! ./utils/getSelectedImage */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getSelectedImage.ts");
@@ -32928,6 +33175,7 @@ var ImageEditElementClass_1 = __webpack_require__(/*! ./types/ImageEditElementCl
 var normalizeImageSelection_1 = __webpack_require__(/*! ./utils/normalizeImageSelection */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/normalizeImageSelection.ts");
 var resizerContext_1 = __webpack_require__(/*! ./Resizer/resizerContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/resizerContext.ts");
 var rotatorContext_1 = __webpack_require__(/*! ./Rotator/rotatorContext */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/rotatorContext.ts");
+var updateHandleCursor_1 = __webpack_require__(/*! ./utils/updateHandleCursor */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateHandleCursor.ts");
 var updateRotateHandle_1 = __webpack_require__(/*! ./Rotator/updateRotateHandle */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/updateRotateHandle.ts");
 var updateWrapper_1 = __webpack_require__(/*! ./utils/updateWrapper */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateWrapper.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
@@ -32954,8 +33202,6 @@ var IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
  */
 var ImageEditPlugin = /** @class */ (function () {
     function ImageEditPlugin(options) {
-        if (options === void 0) { options = DefaultOptions; }
-        this.options = options;
         this.editor = null;
         this.shadowSpan = null;
         this.selectedImage = null;
@@ -32973,6 +33219,7 @@ var ImageEditPlugin = /** @class */ (function () {
         this.zoomScale = 1;
         this.disposer = null;
         this.isEditing = false;
+        this.options = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultOptions), options);
     }
     /**
      * Get name of this plugin
@@ -33255,11 +33502,42 @@ var ImageEditPlugin = /** @class */ (function () {
         });
     };
     ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
+        var _this = this;
+        if (!this.imageEditInfo) {
+            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+        }
+        if ((this.imageEditInfo.widthPx == 0 || this.imageEditInfo.heightPx == 0) &&
+            !image.complete) {
+            // Image dimensions are zero and loading is incomplete, wait for image to load.
+            image.onload = function () {
+                _this.updateImageDimensionsIfZero(image);
+                _this.startEditingInternal(editor, image, apiOperation);
+                image.onload = null;
+                image.onerror = null;
+            };
+            image.onerror = function () {
+                image.onload = null;
+                image.onerror = null;
+            };
+        }
+        else {
+            this.updateImageDimensionsIfZero(image);
+            this.startEditingInternal(editor, image, apiOperation);
+        }
+    };
+    ImageEditPlugin.prototype.updateImageDimensionsIfZero = function (image) {
+        var _a, _b;
+        if (((_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.widthPx) === 0 || ((_b = this.imageEditInfo) === null || _b === void 0 ? void 0 : _b.heightPx) === 0) {
+            this.imageEditInfo.widthPx = image.clientWidth;
+            this.imageEditInfo.heightPx = image.clientHeight;
+        }
+    };
+    ImageEditPlugin.prototype.startEditingInternal = function (editor, image, apiOperation) {
         if (!this.imageEditInfo) {
             this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
         }
-        this.lastSrc = image.getAttribute('src');
         this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
+        this.lastSrc = image.getAttribute('src');
         var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
         this.shadowSpan = shadowSpan;
         this.selectedImage = image;
@@ -33277,7 +33555,7 @@ var ImageEditPlugin = /** @class */ (function () {
     };
     ImageEditPlugin.prototype.startRotateAndResize = function (editor, image) {
         var _this = this;
-        var _a;
+        var _a, _b;
         if (this.imageEditInfo) {
             this.startEditing(editor, image, ['resize', 'rotate']);
             if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
@@ -33291,21 +33569,28 @@ var ImageEditPlugin = /** @class */ (function () {
                         _this.wasImageResized = true;
                     }
                 }, this.zoomScale, isMobileOrTable)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
-                    var _a;
+                    var _a, _b;
                     if (_this.imageEditInfo &&
                         _this.selectedImage &&
                         _this.wrapper &&
                         _this.clonedImage) {
                         (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper);
-                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = _this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
+                        _this.updateResizeHandleDirection(_this.resizers, _this.imageEditInfo.angleRad);
                     }
                 }, this.zoomScale, isMobileOrTable)), false);
                 (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
-                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
             }
         }
     };
-    ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad) {
+    ImageEditPlugin.prototype.updateResizeHandleDirection = function (resizers, angleRad) {
+        var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
+        if (angleRad !== undefined) {
+            (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
+        }
+    };
+    ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad, disableSideResize) {
         var viewport = editor.getVisibleViewport();
         var smallImage = (0, imageEditUtils_1.isASmallImage)(image.width, image.height);
         if (viewport && rotators && rotators.length > 0) {
@@ -33313,7 +33598,7 @@ var ImageEditPlugin = /** @class */ (function () {
             var rotatorHandle = rotator.firstElementChild;
             if ((0, roosterjs_content_model_dom_1.isNodeOfType)(rotatorHandle, 'ELEMENT_NODE') &&
                 (0, roosterjs_content_model_dom_1.isElementOfType)(rotatorHandle, 'div')) {
-                (0, updateRotateHandle_1.updateRotateHandle)(viewport, angleRad !== null && angleRad !== void 0 ? angleRad : 0, wrapper, rotator, rotatorHandle, smallImage);
+                (0, updateRotateHandle_1.updateRotateHandle)(viewport, angleRad !== null && angleRad !== void 0 ? angleRad : 0, wrapper, rotator, rotatorHandle, smallImage, disableSideResize);
             }
         }
     };
@@ -33462,7 +33747,6 @@ exports.ImageEditPlugin = ImageEditPlugin;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createImageResizer = void 0;
-var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createElement_1 = __webpack_require__(/*! ../../pluginUtils/CreateElement/createElement */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/CreateElement/createElement.ts");
 var ImageEditElementClass_1 = __webpack_require__(/*! ../types/ImageEditElementClass */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageEditElementClass.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
@@ -33472,17 +33756,18 @@ var RESIZE_HANDLE_SIZE = 10;
 /**
  * @internal
  */
-function createImageResizer(doc, onShowResizeHandle) {
+function createImageResizer(doc, disableSideResize, onShowResizeHandle) {
     var cornerElements = getCornerResizeHTML(onShowResizeHandle);
     var sideElements = getSideResizeHTML(onShowResizeHandle);
-    var handles = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(cornerElements), false), (0, tslib_1.__read)(sideElements), false).map(function (element) {
+    var handles = disableSideResize ? cornerElements : cornerElements.concat(sideElements);
+    return handles
+        .map(function (element) {
         var handle = (0, createElement_1.createElement)(element, doc);
         if ((0, roosterjs_content_model_dom_1.isNodeOfType)(handle, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isElementOfType)(handle, 'div')) {
             return handle;
         }
     })
         .filter(function (element) { return !!element; });
-    return handles;
 }
 exports.createImageResizer = createImageResizer;
 /**
@@ -33684,13 +33969,13 @@ exports.createImageRotator = createImageRotator;
  *
  */
 function getRotateHTML(_a) {
-    var borderColor = _a.borderColor, rotateHandleBackColor = _a.rotateHandleBackColor;
+    var borderColor = _a.borderColor, rotateHandleBackColor = _a.rotateHandleBackColor, disableSideResize = _a.disableSideResize;
     var handleLeft = constants_1.ROTATE_SIZE / 2;
     return [
         {
             tag: 'div',
             className: ImageEditElementClass_1.ImageEditElementClass.RotateCenter,
-            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor + ";top:" + -constants_1.ROTATE_HANDLE_TOP + "px;height:" + constants_1.ROTATE_GAP + "px;margin-left:" + -constants_1.ROTATE_WIDTH + "px;",
+            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor + ";top:" + (disableSideResize ? -constants_1.ROTATE_HANDLE_TOP_NO_SIDE_RESIZE : -constants_1.ROTATE_HANDLE_TOP) + "px;height:" + constants_1.ROTATE_GAP + "px;margin-left:" + -constants_1.ROTATE_WIDTH + "px;",
             children: [
                 {
                     tag: 'div',
@@ -33797,7 +34082,7 @@ var constants_1 = __webpack_require__(/*! ../constants/constants */ "./packages/
  * 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 updateRotateHandle(editorRect, angleRad, wrapper, rotateCenter, rotateHandle, isSmallImage) {
+function updateRotateHandle(editorRect, angleRad, wrapper, rotateCenter, rotateHandle, isSmallImage, disableSideResize) {
     if (isSmallImage) {
         rotateCenter.style.display = 'none';
         rotateHandle.style.display = 'none';
@@ -33835,7 +34120,8 @@ function updateRotateHandle(editorRect, angleRad, wrapper, rotateCenter, rotateH
             }
             var rotateGap = Math.max(Math.min(constants_1.ROTATE_GAP, adjustedDistance), 0);
             var rotateTop = Math.max(Math.min(constants_1.ROTATE_SIZE, adjustedDistance - rotateGap), 0);
-            rotateCenter.style.top = -rotateGap - constants_1.RESIZE_HANDLE_MARGIN + 'px';
+            rotateCenter.style.top =
+                -rotateGap - (disableSideResize ? 0 : constants_1.RESIZE_HANDLE_MARGIN) + 'px';
             rotateCenter.style.height = rotateGap + 'px';
             rotateHandle.style.top = -rotateTop + 'px';
         }
@@ -33855,7 +34141,7 @@ exports.updateRotateHandle = updateRotateHandle;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.RESIZE_IMAGE = exports.MIN_HEIGHT_WIDTH = exports.YS_CROP = exports.XS_CROP = exports.CROP_HANDLE_WIDTH = exports.CROP_HANDLE_SIZE = exports.ROTATE_HANDLE_TOP = exports.ROTATE_WIDTH = exports.Ys = exports.Xs = exports.ROTATION = exports.ROTATE_ICON_MARGIN = exports.DEFAULT_ROTATE_HANDLE_HEIGHT = exports.DEG_PER_RAD = exports.ROTATE_GAP = exports.ROTATE_SIZE = exports.RESIZE_HANDLE_MARGIN = exports.RESIZE_HANDLE_SIZE = void 0;
+exports.RESIZE_IMAGE = exports.MIN_HEIGHT_WIDTH = exports.YS_CROP = exports.XS_CROP = exports.CROP_HANDLE_WIDTH = exports.CROP_HANDLE_SIZE = exports.ROTATE_HANDLE_TOP_NO_SIDE_RESIZE = exports.ROTATE_HANDLE_TOP = exports.ROTATE_WIDTH = exports.Ys = exports.Xs = exports.ROTATION = exports.ROTATE_ICON_MARGIN = exports.DEFAULT_ROTATE_HANDLE_HEIGHT = exports.DEG_PER_RAD = exports.ROTATE_GAP = exports.ROTATE_SIZE = exports.RESIZE_HANDLE_MARGIN = exports.RESIZE_HANDLE_SIZE = void 0;
 /**
  * @internal
  */
@@ -33909,6 +34195,10 @@ exports.ROTATE_WIDTH = 1;
  * @internal
  */
 exports.ROTATE_HANDLE_TOP = exports.ROTATE_GAP + exports.RESIZE_HANDLE_MARGIN;
+/**
+ * @internal
+ */
+exports.ROTATE_HANDLE_TOP_NO_SIDE_RESIZE = exports.ROTATE_GAP;
 /**
  * @internal
  */
@@ -34198,7 +34488,7 @@ function createImageWrapper(editor, image, options, editInfo, htmlOptions, opera
     }
     var resizers = [];
     if (operation.indexOf('resize') > -1) {
-        resizers = (0, createImageResizer_1.createImageResizer)(doc);
+        resizers = (0, createImageResizer_1.createImageResizer)(doc, !!options.disableSideResize);
     }
     var croppers = [];
     if (operation.indexOf('crop') > -1) {
@@ -34215,7 +34505,6 @@ var createShadowSpan = function (wrapper, imageSpan) {
         mode: 'open',
     });
     imageSpan.id = IMAGE_EDIT_SHADOW_ROOT;
-    wrapper.style.verticalAlign = 'bottom';
     shadowRoot.appendChild(wrapper);
     return imageSpan;
 };
@@ -34318,6 +34607,36 @@ function doubleCheckResize(editInfo, preserveRatio, actualWidth, actualHeight) {
 exports.doubleCheckResize = doubleCheckResize;
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/filterInnerResizerHandles.ts":
+/*!***************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/filterInnerResizerHandles.ts ***!
+  \***************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.filterInnerResizerHandles = void 0;
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+/**
+ * @internal
+ */
+function filterInnerResizerHandles(resizeHandles) {
+    return resizeHandles
+        .map(function (resizer) {
+        var resizeHandle = resizer.firstElementChild;
+        if ((0, roosterjs_content_model_dom_1.isNodeOfType)(resizeHandle, 'ELEMENT_NODE') &&
+            (0, roosterjs_content_model_dom_1.isElementOfType)(resizeHandle, 'div')) {
+            return resizeHandle;
+        }
+    })
+        .filter(function (handle) { return !!handle; });
+}
+exports.filterInnerResizerHandles = filterInnerResizerHandles;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/findEditingImage.ts":
@@ -34545,6 +34864,7 @@ var getHTMLImageOptions = function (editor, options, editInfo) {
         borderColor: options.borderColor || (editor.isDarkMode() ? DARK_MODE_BGCOLOR : LIGHT_MODE_BGCOLOR),
         rotateHandleBackColor: editor.isDarkMode() ? DARK_MODE_BGCOLOR : LIGHT_MODE_BGCOLOR,
         isSmallImage: (0, imageEditUtils_1.isASmallImage)((_a = editInfo.widthPx) !== null && _a !== void 0 ? _a : 0, (_b = editInfo.heightPx) !== null && _b !== void 0 ? _b : 0),
+        disableSideResize: !!options.disableSideResize,
     };
 };
 exports.getHTMLImageOptions = getHTMLImageOptions;
@@ -34855,6 +35175,7 @@ exports.getSelectedImageMetadata = getSelectedImageMetadata;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.updateWrapper = void 0;
 var doubleCheckResize_1 = __webpack_require__(/*! ./doubleCheckResize */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/doubleCheckResize.ts");
+var filterInnerResizerHandles_1 = __webpack_require__(/*! ./filterInnerResizerHandles */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/filterInnerResizerHandles.ts");
 var generateImageSize_1 = __webpack_require__(/*! ./generateImageSize */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateImageSize.ts");
 var ImageEditElementClass_1 = __webpack_require__(/*! ../types/ImageEditElementClass */ "./packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageEditElementClass.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
@@ -34878,9 +35199,13 @@ function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers,
     var cropTopPx = originalHeight * (topPercent || 0);
     var cropBottomPx = originalHeight * (bottomPercent || 0);
     // Update size and margin of the wrapper
-    wrapper.style.margin = marginVertical + "px " + marginHorizontal + "px";
+    wrapper.style.marginTop = marginVertical + "px";
+    wrapper.style.marginBottom = marginVertical + 5 + "px "; // 5px to adjust the image on top of the handles
+    wrapper.style.marginLeft = marginHorizontal + "px";
+    wrapper.style.marginRight = marginHorizontal + "px";
     wrapper.style.transform = "rotate(" + angleRad + "rad)";
     (0, imageEditUtils_1.setWrapperSizeDimensions)(wrapper, image, visibleWidth, visibleHeight);
+    wrapper.style.verticalAlign = 'text-bottom';
     // 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
     if ((0, imageEditUtils_1.isRTL)(clonedImage)) {
@@ -34896,7 +35221,6 @@ function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers,
     // Update size of the image
     clonedImage.style.width = (0, imageEditUtils_1.getPx)(originalWidth);
     clonedImage.style.height = (0, imageEditUtils_1.getPx)(originalHeight);
-    clonedImage.style.verticalAlign = 'bottom';
     clonedImage.style.position = 'absolute';
     //Update flip direction
     (0, imageEditUtils_1.setFlipped)(clonedImage.parentElement, flippedHorizontal, flippedVertical);
@@ -34922,15 +35246,7 @@ function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers,
         var clientWidth = wrapper.clientWidth;
         var clientHeight = wrapper.clientHeight;
         (0, doubleCheckResize_1.doubleCheckResize)(editInfo, options.preserveRatio || false, clientWidth, clientHeight);
-        var resizeHandles = resizers
-            .map(function (resizer) {
-            var resizeHandle = resizer.firstElementChild;
-            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(resizeHandle, 'ELEMENT_NODE') &&
-                (0, roosterjs_content_model_dom_1.isElementOfType)(resizeHandle, 'div')) {
-                return resizeHandle;
-            }
-        })
-            .filter(function (handle) { return !!handle; });
+        var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
         if (angleRad !== undefined) {
             (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
         }