roosterjs 8.28.1 → 8.29.2

package/dist/rooster.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 8.28.1)
+// Type definitions for roosterjs (Version 8.29.2)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -2778,6 +2778,11 @@ interface PendingFormatStatePluginState {
      * The position of last pendable format state changing
      */
     pendableFormatPosition: NodePosition;
+    /**
+     * A temporary SPAN element to hold pending format change. it will be inserted into content when user type something,
+     * or discard if focus position is moved
+     */
+    pendableFormatSpan: HTMLElement;
 }
 
     /**
@@ -3495,7 +3500,13 @@ const enum ExperimentalFeatures {
      * @deprecated this feature is always disabled
      * Automatically transform -- into hyphen, if typed between two words.
      */
-    AutoHyphen = "AutoHyphen"
+    AutoHyphen = "AutoHyphen",
+    /**
+     * Use pending format strategy to do style based format, e.g. Font size, Color.
+     * With this feature enabled, we don't need to insert temp ZeroWidthSpace character to hold pending format
+     * when selection is collapsed. Instead, we will hold the pending format in memory and only apply it when type something
+     */
+    PendingStyleBasedFormat = "PendingStyleBasedFormat"
 }
 
     /**
@@ -3932,7 +3943,11 @@ const enum TableBorderFormat {
      *    |
      *    |
      */
-    ESPECIAL_TYPE_3 = 7
+    ESPECIAL_TYPE_3 = 7,
+    /**
+     * No border
+     */
+    CLEAR = 8
 }
 
     /**
@@ -4497,14 +4512,28 @@ interface CompatibleExtractContentWithDomEvent extends ExtractContentWithDomEven
  * An event fired when pending format state (bold, italic, underline, ... with collapsed selection) is changed
  */
 interface PendingFormatStateChangedEvent extends BasePluginEvent<PluginEventType.PendingFormatStateChanged> {
+    /**
+     * The new format state to apply. If null is passed, clear existing pending format state if any
+     */
     formatState: PendableFormatState;
+    /**
+     * A callback to do format change to a temp element. This is used for style-based format such as font and color
+     */
+    formatCallback?: (element: HTMLElement, isInnerNode?: boolean) => any;
 }
 
     /**
  * An event fired when pending format state (bold, italic, underline, ... with collapsed selection) is changed
  */
 interface CompatiblePendingFormatStateChangedEvent extends BasePluginEvent<CompatiblePluginEventType.PendingFormatStateChanged> {
+    /**
+     * The new format state to apply. If null is passed, clear existing pending format state if any
+     */
     formatState: PendableFormatState;
+    /**
+     * A callback to do format change to a temp element. This is used for style-based format such as font and color
+     */
+    formatCallback?: (element: HTMLElement, isInnerNode?: boolean) => any;
 }
 
     /**
@@ -5038,6 +5067,10 @@ interface ElementBasedFormatState {
      * Whether unlink command can be called to the text
      */
     canUnlink?: boolean;
+    /**
+     * Whether the selected text is multiline
+     */
+    isMultilineSelection?: boolean;
     /**
      * Whether add image alt text command can be called to the text
      */
@@ -7722,7 +7755,13 @@ enum CompatibleExperimentalFeatures {
      * @deprecated this feature is always disabled
      * Automatically transform -- into hyphen, if typed between two words.
      */
-    AutoHyphen = "AutoHyphen"
+    AutoHyphen = "AutoHyphen",
+    /**
+     * Use pending format strategy to do style based format, e.g. Font size, Color.
+     * With this feature enabled, we don't need to insert temp ZeroWidthSpace character to hold pending format
+     * when selection is collapsed. Instead, we will hold the pending format in memory and only apply it when type something
+     */
+    PendingStyleBasedFormat = "PendingStyleBasedFormat"
 }
 
     /**
@@ -8040,7 +8079,11 @@ enum CompatibleTableBorderFormat {
      *    |
      *    |
      */
-    ESPECIAL_TYPE_3 = 7
+    ESPECIAL_TYPE_3 = 7,
+    /**
+     * No border
+     */
+    CLEAR = 8
 }
 
     /**

package/dist/rooster.js

@@ -2312,7 +2312,7 @@ function changeFontSize(editor, change, fontSizes) {
     if (fontSizes === void 0) { fontSizes = exports.FONT_SIZES; }
     var changeBase = change == 0 /* Increase */ ? 1 : -1;
     (0, applyInlineStyle_1.default)(editor, function (element) {
-        var pt = parseFloat((0, roosterjs_editor_dom_1.getComputedStyle)(element, 'font-size'));
+        var pt = parseFloat((0, roosterjs_editor_dom_1.getComputedStyle)(element, 'font-size') || element.style.fontSize);
         element.style.fontSize = getNewFontSize(pt, changeBase, fontSizes) + 'pt';
         var lineHeight = (0, roosterjs_editor_dom_1.getComputedStyle)(element, 'line-height');
         if (lineHeight != 'normal') {
@@ -2809,10 +2809,19 @@ var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./
  */
 function getElementBasedFormatState(editor, event) {
     var listTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('OL,UL', null /*startFrom*/, event));
+    // Check if selection is multiline, spans more than one block
+    var range = editor.getSelectionRange();
+    var multiline = false;
+    if (range && !range.collapsed) {
+        var startingBlock = editor.getBlockElementAtNode(range.startContainer);
+        var endingBlock = editor.getBlockElementAtNode(range.endContainer);
+        multiline = !endingBlock.equals(startingBlock);
+    }
     var headerTag = (0, roosterjs_editor_dom_1.getTagOfNode)(editor.getElementAtCursor('H1,H2,H3,H4,H5,H6', null /*startFrom*/, event));
     return {
         isBullet: listTag == 'UL',
         isNumbering: listTag == 'OL',
+        isMultilineSelection: multiline,
         headerLevel: (headerTag && parseInt(headerTag[1])) || 0,
         canUnlink: !!editor.queryElements('a[href]', 1 /* OnSelection */)[0],
         canAddImageAltText: !!editor.queryElements('img', 1 /* OnSelection */)[0],
@@ -4106,6 +4115,7 @@ exports.default = formatTable;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var formatUndoSnapshot_1 = __webpack_require__(/*! ../utils/formatUndoSnapshot */ "./packages/roosterjs-editor-api/lib/utils/formatUndoSnapshot.ts");
+var setBackgroundColor_1 = __webpack_require__(/*! ../format/setBackgroundColor */ "./packages/roosterjs-editor-api/lib/format/setBackgroundColor.ts");
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Insert table into editor at current selection
@@ -4135,6 +4145,10 @@ function insertTable(editor, columns, rows, format) {
     }
     editor.focus();
     (0, formatUndoSnapshot_1.default)(editor, function () {
+        var element = editor.getElementAtCursor();
+        if (element === null || element === void 0 ? void 0 : element.style.backgroundColor) {
+            (0, setBackgroundColor_1.default)(editor, 'transparent');
+        }
         var vtable = new roosterjs_editor_dom_1.VTable(table);
         vtable.applyFormat(format);
         vtable.writeBack();
@@ -4182,6 +4196,9 @@ var ZERO_WIDTH_SPACE = '\u200B';
 function applyInlineStyle(editor, callback, apiName) {
     editor.focus();
     var selection = editor.getSelectionRangeEx();
+    var safeCallback = function (element, isInnerNode) {
+        return element.isContentEditable && callback(element, isInnerNode);
+    };
     if (selection && selection.areAllCollapsed) {
         var range = selection.ranges[0];
         var node = range.startContainer;
@@ -4190,7 +4207,14 @@ function applyInlineStyle(editor, callback, apiName) {
                 ((0, roosterjs_editor_dom_1.getTagOfNode)(node.firstChild) == 'BR' && !node.firstChild.nextSibling));
         if (isEmptySpan) {
             editor.addUndoSnapshot();
-            callback(node);
+            safeCallback(node);
+        }
+        else if (editor.isFeatureEnabled("PendingStyleBasedFormat" /* PendingStyleBasedFormat */)) {
+            editor.triggerPluginEvent(13 /* PendingFormatStateChanged */, {
+                formatState: {},
+                formatCallback: safeCallback,
+            });
+            editor.triggerContentChangedEvent("Format" /* Format */);
         }
         else {
             var isZWSNode = node &&
@@ -4205,7 +4229,7 @@ function applyInlineStyle(editor, callback, apiName) {
                 node = editor.getDocument().createTextNode(ZERO_WIDTH_SPACE);
                 range.insertNode(node);
             }
-            (0, roosterjs_editor_dom_1.applyTextStyle)(node, callback);
+            (0, roosterjs_editor_dom_1.applyTextStyle)(node, safeCallback);
             editor.select(node, -1 /* End */);
         }
     }
@@ -4221,7 +4245,7 @@ function applyInlineStyle(editor, callback, apiName) {
                 while (inlineElement) {
                     var nextInlineElement = contentTraverser.getNextInlineElement();
                     inlineElement.applyStyle(function (element, isInnerNode) {
-                        callback(element, isInnerNode);
+                        safeCallback(element, isInnerNode);
                         firstNode = firstNode || element;
                         lastNode = element;
                     });
@@ -5405,19 +5429,35 @@ var getStyleBasedFormatState = function (core, node) {
     if (!node) {
         return {};
     }
+    var override = [];
+    var pendableFormatSpan = core.pendingFormatState.pendableFormatSpan;
+    if (pendableFormatSpan) {
+        override = [
+            pendableFormatSpan.style.fontFamily,
+            pendableFormatSpan.style.fontSize,
+            pendableFormatSpan.style.color,
+            pendableFormatSpan.style.backgroundColor,
+        ];
+    }
     var styles = node ? (0, roosterjs_editor_dom_1.getComputedStyles)(node) : [];
     var isDarkMode = core.lifecycle.isDarkMode;
     var root = core.contentDiv;
-    var ogTextColorNode = isDarkMode && (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_COLOR_SELECTOR);
-    var ogBackgroundColorNode = isDarkMode && (0, roosterjs_editor_dom_1.findClosestElementAncestor)(node, root, ORIGINAL_STYLE_BACK_COLOR_SELECTOR);
+    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: styles[0],
-        fontSize: styles[1],
-        textColor: styles[2],
-        backgroundColor: styles[3],
+        fontName: override[0] || styles[0],
+        fontSize: override[1] || styles[1],
+        textColor: override[2] || styles[2],
+        backgroundColor: override[3] || styles[3],
         textColors: ogTextColorNode
             ? {
-                darkModeColor: styles[2],
+                darkModeColor: override[2] || styles[2],
                 lightModeColor: ogTextColorNode.dataset["ogsc" /* OriginalStyleColor */] ||
                     ogTextColorNode.dataset["ogac" /* OriginalAttributeColor */] ||
                     styles[2],
@@ -5425,7 +5465,7 @@ var getStyleBasedFormatState = function (core, node) {
             : undefined,
         backgroundColors: ogBackgroundColorNode
             ? {
-                darkModeColor: styles[3],
+                darkModeColor: override[3] || styles[3],
                 lightModeColor: ogBackgroundColorNode.dataset["ogsb" /* OriginalStyleBackgroundColor */] ||
                     ogBackgroundColorNode.dataset["ogab" /* OriginalAttributeBackgroundColor */] ||
                     styles[3],
@@ -7516,6 +7556,7 @@ function normalizeTables(tables) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
+var ZERO_WIDTH_SPACE = '\u200B';
 /**
  * @internal
  * PendingFormatStatePlugin handles pending format state management
@@ -7530,6 +7571,7 @@ var PendingFormatStatePlugin = /** @class */ (function () {
         this.state = {
             pendableFormatPosition: null,
             pendableFormatState: null,
+            pendableFormatSpan: null,
         };
     }
     /**
@@ -7565,18 +7607,37 @@ var PendingFormatStatePlugin = /** @class */ (function () {
     PendingFormatStatePlugin.prototype.onPluginEvent = function (event) {
         switch (event.eventType) {
             case 13 /* PendingFormatStateChanged */:
-                // Got PendingFormatStateChanged event, cache current position and pending format
-                this.state.pendableFormatPosition = this.getCurrentPosition();
-                this.state.pendableFormatState = event.formatState;
+                // Got PendingFormatStateChanged event, cache current position and pending format if a format is passed in
+                // otherwise clear existing pending format.
+                if (event.formatState) {
+                    this.state.pendableFormatPosition = this.getCurrentPosition();
+                    this.state.pendableFormatState = event.formatState;
+                    this.state.pendableFormatSpan = event.formatCallback
+                        ? this.createPendingFormatSpan(event.formatCallback)
+                        : null;
+                }
+                else {
+                    this.clear();
+                }
                 break;
             case 0 /* KeyDown */:
             case 5 /* MouseDown */:
             case 7 /* ContentChanged */:
-                // 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
-                if (this.state.pendableFormatPosition &&
-                    !this.state.pendableFormatPosition.equalTo(this.getCurrentPosition())) {
+                if (event.eventType == 0 /* KeyDown */ &&
+                    (0, roosterjs_editor_dom_1.isCharacterValue)(event.rawEvent) &&
+                    this.state.pendableFormatSpan) {
+                    this.editor.insertNode(this.state.pendableFormatSpan);
+                    this.editor.select(this.state.pendableFormatSpan, -2 /* Before */, this.state.pendableFormatSpan, -1 /* End */);
+                    this.clear();
+                }
+                else if ((event.eventType == 0 /* KeyDown */ &&
+                    event.rawEvent.which >= 33 /* PAGEUP */ &&
+                    event.rawEvent.which <= 40 /* DOWN */) ||
+                    (this.state.pendableFormatPosition &&
+                        !this.state.pendableFormatPosition.equalTo(this.getCurrentPosition()))) {
+                    // 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
                     this.clear();
                 }
                 break;
@@ -7585,11 +7646,29 @@ var PendingFormatStatePlugin = /** @class */ (function () {
     PendingFormatStatePlugin.prototype.clear = function () {
         this.state.pendableFormatPosition = null;
         this.state.pendableFormatState = null;
+        this.state.pendableFormatSpan = null;
     };
     PendingFormatStatePlugin.prototype.getCurrentPosition = function () {
         var range = this.editor.getSelectionRange();
         return range && roosterjs_editor_dom_1.Position.getStart(range).normalize();
     };
+    PendingFormatStatePlugin.prototype.createPendingFormatSpan = function (callback) {
+        var span = this.state.pendableFormatSpan;
+        if (!span) {
+            var currentStyle = this.editor.getStyleBasedFormatState();
+            var doc = this.editor.getDocument();
+            var isDarkMode = this.editor.isDarkMode();
+            span = doc.createElement('span');
+            span.contentEditable = 'true';
+            span.appendChild(doc.createTextNode(ZERO_WIDTH_SPACE));
+            span.style.fontFamily = currentStyle.fontName;
+            span.style.fontSize = currentStyle.fontSize;
+            (0, roosterjs_editor_dom_1.setColor)(span, currentStyle.textColors || currentStyle.textColor, false /*isBackground*/, isDarkMode);
+            (0, roosterjs_editor_dom_1.setColor)(span, currentStyle.backgroundColors || currentStyle.backgroundColor, true /*isBackground*/, isDarkMode);
+        }
+        callback(span);
+        return span;
+    };
     return PendingFormatStatePlugin;
 }());
 exports.default = PendingFormatStatePlugin;
@@ -10047,6 +10126,7 @@ exports.default = SelectionScoper;
 Object.defineProperty(exports, "__esModule", { value: true });
 var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
 var contains_1 = __webpack_require__(/*! ../utils/contains */ "./packages/roosterjs-editor-dom/lib/utils/contains.ts");
+var ContentTraverser_1 = __webpack_require__(/*! ../contentTraverser/ContentTraverser */ "./packages/roosterjs-editor-dom/lib/contentTraverser/ContentTraverser.ts");
 var createRange_1 = __webpack_require__(/*! ../selection/createRange */ "./packages/roosterjs-editor-dom/lib/selection/createRange.ts");
 var findClosestElementAncestor_1 = __webpack_require__(/*! ../utils/findClosestElementAncestor */ "./packages/roosterjs-editor-dom/lib/utils/findClosestElementAncestor.ts");
 var getBlockElementAtNode_1 = __webpack_require__(/*! ../blockElements/getBlockElementAtNode */ "./packages/roosterjs-editor-dom/lib/blockElements/getBlockElementAtNode.ts");
@@ -10072,6 +10152,7 @@ var adjustSteps = [
     adjustInsertPositionForVoidElement,
     adjustInsertPositionForMoveCursorOutOfALink,
     adjustInsertPositionForNotEditableNode,
+    adjustInsertPositionForTable,
 ];
 /**
  * Adjust position for A tag don't be nested inside another A tag.
@@ -10232,6 +10313,37 @@ function adjustInsertPositionForNotEditableNode(root, nodeToInsert, position, ra
     }
     return position;
 }
+/**
+ * Adjust the position of a table to be one line after another table.
+ */
+function adjustInsertPositionForTable(root, nodeToInsert, position, range) {
+    if ((nodeToInsert.childNodes.length == 1 &&
+        (0, getTagOfNode_1.default)(nodeToInsert.childNodes[0]) == 'TABLE') ||
+        (0, getTagOfNode_1.default)(nodeToInsert) == 'TABLE') {
+        var element = position.element;
+        var posBefore = new Position_1.default(element, -2 /* Before */);
+        var rangeToTraverse = (0, createRange_1.default)(posBefore, position);
+        var contentTraverser = ContentTraverser_1.default.createSelectionTraverser(root, rangeToTraverse);
+        var blockElement = contentTraverser && contentTraverser.currentBlockElement;
+        var nextBlockElement = blockElement;
+        while (!nextBlockElement) {
+            nextBlockElement = contentTraverser.getNextBlockElement();
+            if (nextBlockElement) {
+                blockElement = nextBlockElement;
+            }
+        }
+        var prevElement = blockElement === null || blockElement === void 0 ? void 0 : blockElement.getEndNode();
+        if (prevElement && (0, findClosestElementAncestor_1.default)(prevElement, root, 'TABLE')) {
+            var tempRange = (0, createRange_1.default)(position);
+            tempRange.collapse(false /* toStart */);
+            var br = root.ownerDocument.createElement('br');
+            tempRange.insertNode(br);
+            tempRange = (0, createRange_1.default)(br);
+            position = Position_1.default.getEnd(tempRange);
+        }
+    }
+    return position;
+}
 /**
  *
  * @param root the contentDiv of the ditor
@@ -10294,7 +10406,12 @@ function deleteSelectedContent(root, range) {
         if (!regionRange) {
             return null;
         }
-        var startContainer = regionRange.startContainer, endContainer = regionRange.endContainer, startOffset = regionRange.startOffset, endOffset = regionRange.endOffset;
+        var startContainer = regionRange.startContainer, endContainer = regionRange.endContainer, startOffset = regionRange.startOffset, endOffset = regionRange.endOffset, commonAncestorContainer = regionRange.commonAncestorContainer;
+        // Disallow merging of readonly elements
+        if ((0, safeInstanceOf_1.default)(commonAncestorContainer, 'HTMLElement') &&
+            !commonAncestorContainer.isContentEditable) {
+            return null;
+        }
         // Make sure there are node before and after the merging point.
         // This is required by mergeBlocksInRegion API.
         // This may create some empty text node as anchor
@@ -10307,8 +10424,8 @@ function deleteSelectedContent(root, range) {
         return { region: region, beforeStart: beforeStart, afterEnd: afterEnd };
     })
         .filter(function (x) { return !!x; });
-    // 3. Delete all nodes that we found
-    nodesToDelete.forEach(function (node) { var _a; return (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node); });
+    // 3. Delete all nodes that we found, whose parent is editable
+    nodesToDelete.forEach(function (node) { var _a; return ((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable) && node.parentElement.removeChild(node); });
     // 4. Merge lines for each region, so that after we don't see extra line breaks
     nodesPairToMerge.forEach(function (nodes) {
         if (nodes) {
@@ -17805,6 +17922,7 @@ var TRANSPARENT = 'transparent';
 var DARK_COLORS_LIGHTNESS = 20;
 //If the value of the lightness is more than 80, the color is bright
 var BRIGHT_COLORS_LIGHTNESS = 80;
+var TRANSPARENT_COLOR = 'transparent';
 /**
  * Set text color or background color to the given element
  * @param element The element to set color to
@@ -17825,7 +17943,7 @@ function setColor(element, color, isBackgroundColor, isDarkMode, shouldAdaptTheF
             var dataSetName = isBackgroundColor
                 ? "ogsb" /* OriginalStyleBackgroundColor */
                 : "ogsc" /* OriginalStyleColor */;
-            if (!isDarkMode) {
+            if (!isDarkMode || color == TRANSPARENT_COLOR) {
                 delete element.dataset[dataSetName];
             }
             else if (modeIndependentColor) {
@@ -21330,7 +21448,11 @@ var ImageEdit = /** @class */ (function () {
         var wrapper = (0, roosterjs_editor_api_1.insertEntity)(this.editor, IMAGE_EDIT_WRAPPER_ENTITY_TYPE, (0, roosterjs_editor_dom_1.wrap)(this.image, 6 /* ImageEditWrapper */), false /*isBlock*/, true /*isReadonly*/).wrapper;
         wrapper.style.position = 'relative';
         wrapper.style.maxWidth = '100%';
-        wrapper.style.verticalAlign = 'bottom';
+        // keep the same vertical align
+        var originalVerticalAlign = this.image.ownerDocument.defaultView.getComputedStyle(this.image).getPropertyValue('vertical-align');
+        if (originalVerticalAlign) {
+            wrapper.style.verticalAlign = originalVerticalAlign;
+        }
         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');
@@ -21701,29 +21823,15 @@ function applyChange(editor, image, editInfo, previousSrc, wasResized) {
     // Write back the change to image, and set its new size
     var _a = (0, getGeneratedImageSize_1.default)(editInfo), targetWidth = _a.targetWidth, targetHeight = _a.targetHeight;
     image.src = newSrc;
-    setImageSize(image, wasResized, targetWidth, targetHeight);
-}
-exports.default = applyChange;
-/**
- * @param img The current image.
- * @param wasResized the current resize state of the image
- */
-function setImageSize(image, wasResized, targetWidth, targetHeight) {
-    if (wasResized) {
+    if (wasResized || state == 3 /* FullyChanged */) {
         image.style.maxWidth = 'initial';
         image.width = targetWidth;
         image.height = targetHeight;
         image.style.width = targetWidth + 'px';
         image.style.height = targetHeight + 'px';
     }
-    else {
-        image.style.maxWidth = '100%';
-        image.style.height = 'initial';
-        image.style.width = 'initial';
-        image.removeAttribute('height');
-        image.removeAttribute('width');
-    }
 }
+exports.default = applyChange;
 
 
 /***/ }),
@@ -22175,13 +22283,21 @@ exports.Resizer = {
             ? base.heightPx
             : Math.max(base.heightPx + deltaY * (y == 'n' ? -1 : 1), options.minHeight);
         if (shouldPreserveRatio && ratio > 0) {
-            newHeight = Math.min(newHeight, newWidth / ratio);
-            newWidth = Math.min(newWidth, newHeight * ratio);
-            if (newWidth < newHeight * ratio) {
+            if (ratio > 1) {
+                // first sure newHeight is right，calculate newWidth
                 newWidth = newHeight * ratio;
+                if (newWidth < options.minWidth) {
+                    newWidth = options.minWidth;
+                    newHeight = newWidth / ratio;
+                }
             }
             else {
+                // first sure newWidth is right，calculate newHeight
                 newHeight = newWidth / ratio;
+                if (newHeight < options.minHeight) {
+                    newHeight = options.minHeight;
+                    newWidth = newHeight * ratio;
+                }
             }
         }
         editInfo.widthPx = newWidth;
@@ -27431,6 +27547,12 @@ var CompatibleExperimentalFeatures;
      * Automatically transform -- into hyphen, if typed between two words.
      */
     CompatibleExperimentalFeatures["AutoHyphen"] = "AutoHyphen";
+    /**
+     * Use pending format strategy to do style based format, e.g. Font size, Color.
+     * With this feature enabled, we don't need to insert temp ZeroWidthSpace character to hold pending format
+     * when selection is collapsed. Instead, we will hold the pending format in memory and only apply it when type something
+     */
+    CompatibleExperimentalFeatures["PendingStyleBasedFormat"] = "PendingStyleBasedFormat";
 })(CompatibleExperimentalFeatures = exports.CompatibleExperimentalFeatures || (exports.CompatibleExperimentalFeatures = {}));
 
 
@@ -28249,6 +28371,10 @@ var CompatibleTableBorderFormat;
      *    |
      */
     CompatibleTableBorderFormat[CompatibleTableBorderFormat["ESPECIAL_TYPE_3"] = 7] = "ESPECIAL_TYPE_3";
+    /**
+     * No border
+     */
+    CompatibleTableBorderFormat[CompatibleTableBorderFormat["CLEAR"] = 8] = "CLEAR";
 })(CompatibleTableBorderFormat = exports.CompatibleTableBorderFormat || (exports.CompatibleTableBorderFormat = {}));