roosterjs 9.18.0 → 9.19.0

package/dist/rooster.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for roosterjs (Version 9.18.0)
+// Type definitions for roosterjs (Version 9.19.0)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 
@@ -81,7 +81,7 @@ type ContentModelBlockFormat = BackgroundColorFormat & DirectionFormat & TextAli
     /**
  * Format of table cell
  */
-type ContentModelTableCellFormat = ContentModelBlockFormat & BorderBoxFormat & VerticalAlignFormat & WordBreakFormat & TextColorFormat & SizeFormat;
+type ContentModelTableCellFormat = ContentModelBlockFormat & BorderBoxFormat & VerticalAlignFormat & WordBreakFormat & TextColorFormat & SizeFormat & BoldFormat;
 
     /**
  * The format object for a list item in Content Model
@@ -3553,6 +3553,7 @@ type ExperimentalFeature = /**
  */
 'PersistCache'
 /**
+ * @deprecated
  * Workaround for the Legacy Image Edit
  */
  | 'LegacyImageSelection'
@@ -4596,8 +4597,13 @@ interface FormatContentModelContext {
      * @optional
      * When pass true, skip adding undo snapshot when write Content Model back to DOM.
      * Need to be set by the formatter function
+     * Default value is false, which means add undo snapshot
+     * When set to true, it will skip adding undo snapshot but mark "hasNewContent" so that next undo snapshot will be added, this is same with "MarkNewContent"
+     * When set to 'DoNotSkip', it will add undo snapshot (default behavior)
+     * When set to 'MarkNewContent', it will skip adding undo snapshot but mark "hasNewContent" so that next undo snapshot will be added
+     * When set to 'SkipAll', it will skip adding undo snapshot and not mark "hasNewContent", as if no change is made
      */
-    skipUndoSnapshot?: boolean;
+    skipUndoSnapshot?: boolean | 'DoNotSkip' | 'MarkNewContent' | 'SkipAll';
     /**
      * @optional
      * When set to true, formatWithContentModel API will not keep cached Content Model. Next time when we need a Content Model, a new one will be created
@@ -8704,6 +8710,7 @@ class AutoFormatPlugin implements EditorPlugin  {
      * @param options An optional parameter that takes in an object of type AutoFormatOptions, which includes the following properties:
      *  - autoBullet: A boolean that enables or disables automatic bullet list formatting. Defaults to false.
      *  - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to false.
+     *  - removeListMargins: A boolean to remove list margins when it is automatically triggered. Defaults to false.
      *  - autoHyphen: A boolean that enables or disables automatic hyphen transformation. Defaults to false.
      *  - autoFraction: A boolean that enables or disables automatic fraction transformation. Defaults to false.
      *  - autoOrdinals: A boolean that enables or disables automatic ordinal number transformation. Defaults to false.
@@ -8766,6 +8773,10 @@ interface AutoFormatOptions extends AutoLinkOptions  {
      * Transform ordinal numbers into superscript
      */
     autoOrdinals?: boolean;
+    /**
+     * Remove the margins of auto triggered list
+     */
+    removeListMargins?: boolean;
 }
 
     /**
@@ -9504,6 +9515,9 @@ class ImageEditPlugin implements ImageEditor, EditorPlugin  {
     private mouseDownHandler;
     private onDropHandler;
     private keyDownHandler;
+    private setContentHandler;
+    private formatEventHandler;
+    private contentChangedHandler;
     /**
      * EXPOSED FOR TESTING PURPOSE ONLY
      */

package/dist/rooster.js

@@ -8944,8 +8944,8 @@ var scrollCaretIntoView_1 = __webpack_require__(/*! ./scrollCaretIntoView */ "./
  * @param options More options, see FormatContentModelOptions
  */
 var formatContentModel = function (core, formatter, options, domToModelOptions) {
-    var _a;
-    var _b = options || {}, onNodeCreated = _b.onNodeCreated, getChangeData = _b.getChangeData, rawEvent = _b.rawEvent, selectionOverride = _b.selectionOverride, scroll = _b.scrollCaretIntoView;
+    var _a, _b;
+    var _c = options || {}, onNodeCreated = _c.onNodeCreated, rawEvent = _c.rawEvent, selectionOverride = _c.selectionOverride, scroll = _c.scrollCaretIntoView;
     var model = core.api.createContentModel(core, domToModelOptions, selectionOverride);
     var context = {
         newEntities: [],
@@ -8958,7 +8958,8 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
     var skipUndoSnapshot = context.skipUndoSnapshot, clearModelCache = context.clearModelCache, entityStates = context.entityStates, canUndoByBackspace = context.canUndoByBackspace;
     if (changed) {
         var isNested = core.undo.isNested;
-        var shouldAddSnapshot = !skipUndoSnapshot && !isNested;
+        var shouldAddSnapshot = (!skipUndoSnapshot || skipUndoSnapshot == 'DoNotSkip') && !isNested;
+        var shouldMarkNewContent = (skipUndoSnapshot === true || skipUndoSnapshot == 'MarkNewContent') && !isNested;
         var selection = void 0;
         if (shouldAddSnapshot) {
             core.undo.isNested = true;
@@ -8978,7 +8979,7 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
                 contentModel: clearModelCache ? undefined : model,
                 selection: clearModelCache ? undefined : selection,
                 source: (options === null || options === void 0 ? void 0 : options.changeSource) || roosterjs_content_model_dom_1.ChangeSource.Format,
-                data: getChangeData === null || getChangeData === void 0 ? void 0 : getChangeData(),
+                data: (_b = options === null || options === void 0 ? void 0 : options.getChangeData) === null || _b === void 0 ? void 0 : _b.call(options),
                 formatApiName: options === null || options === void 0 ? void 0 : options.apiName,
                 changedEntities: getChangedEntities(context, rawEvent),
             };
@@ -8992,7 +8993,7 @@ var formatContentModel = function (core, formatter, options, domToModelOptions)
             if (shouldAddSnapshot) {
                 core.api.addUndoSnapshot(core, false /*canUndoByBackspace*/, entityStates);
             }
-            else {
+            if (shouldMarkNewContent) {
                 core.undo.snapshotsManager.hasNewContent = true;
             }
         }
@@ -13026,7 +13027,6 @@ var isSingleImageInSelection_1 = __webpack_require__(/*! ./isSingleImageInSelect
 var normalizePos_1 = __webpack_require__(/*! ./normalizePos */ "./packages/roosterjs-content-model-core/lib/corePlugin/selection/normalizePos.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var MouseLeftButton = 0;
-var MouseMiddleButton = 1;
 var MouseRightButton = 2;
 var Up = 'ArrowUp';
 var Down = 'ArrowDown';
@@ -13232,7 +13232,7 @@ var SelectionPlugin = /** @class */ (function () {
                 this.onMouseDown(this.editor, event.rawEvent);
                 break;
             case 'mouseUp':
-                this.onMouseUp(this.editor, event);
+                this.onMouseUp();
                 break;
             case 'keyDown':
                 this.onKeyDown(this.editor, event.rawEvent);
@@ -13248,40 +13248,25 @@ var SelectionPlugin = /** @class */ (function () {
         }
     };
     SelectionPlugin.prototype.onMouseDown = function (editor, rawEvent) {
-        var _a, _b;
+        var _a;
         var selection = editor.getDOMSelection();
         var image;
         // Image selection
-        if (editor.isExperimentalFeatureEnabled('LegacyImageSelection')) {
-            if (rawEvent.button === MouseRightButton &&
-                (image =
-                    (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
-                image.isContentEditable) {
-                this.selectImageWithRange(image, rawEvent);
-                return;
-            }
-            else if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image !== rawEvent.target) {
-                this.selectBeforeOrAfterElement(editor, selection.image);
-                return;
-            }
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+            (rawEvent.button == MouseLeftButton ||
+                (rawEvent.button == MouseRightButton &&
+                    !this.getClickingImage(rawEvent) &&
+                    !this.getContainedTargetImage(rawEvent, selection)))) {
+            this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/);
         }
-        else {
-            if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
-                (rawEvent.button == MouseLeftButton ||
-                    (rawEvent.button == MouseRightButton &&
-                        !this.getClickingImage(rawEvent) &&
-                        !this.getContainedTargetImage(rawEvent, selection)))) {
-                this.setDOMSelection(null /*domSelection*/, null /*tableSelection*/);
-            }
-            if ((image =
-                (_b = this.getClickingImage(rawEvent)) !== null && _b !== void 0 ? _b : this.getContainedTargetImage(rawEvent, selection)) &&
-                image.isContentEditable) {
-                this.setDOMSelection({
-                    type: 'image',
-                    image: image,
-                }, null);
-                return;
-            }
+        if ((image =
+            (_a = this.getClickingImage(rawEvent)) !== null && _a !== void 0 ? _a : this.getContainedTargetImage(rawEvent, selection)) &&
+            image.isContentEditable) {
+            this.setDOMSelection({
+                type: 'image',
+                image: image,
+            }, null);
+            return;
         }
         // Table selection
         if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'table' && rawEvent.button == MouseLeftButton) {
@@ -13309,33 +13294,7 @@ var SelectionPlugin = /** @class */ (function () {
             });
         }
     };
-    SelectionPlugin.prototype.selectImageWithRange = function (image, event) {
-        var _a;
-        var range = image.ownerDocument.createRange();
-        range.selectNode(image);
-        var domSelection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-        if ((domSelection === null || domSelection === void 0 ? void 0 : domSelection.type) == 'image' && image == domSelection.image) {
-            event.preventDefault();
-        }
-        else {
-            this.setDOMSelection({
-                type: 'range',
-                isReverted: false,
-                range: range,
-            }, null);
-        }
-    };
-    SelectionPlugin.prototype.onMouseUp = function (editor, event) {
-        var image;
-        if (editor.isExperimentalFeatureEnabled('LegacyImageSelection') &&
-            (image = this.getClickingImage(event.rawEvent)) &&
-            image.isContentEditable &&
-            event.rawEvent.button != MouseMiddleButton &&
-            (event.rawEvent.button ==
-                MouseRightButton /* it's not possible to drag using right click */ ||
-                event.isClicking)) {
-            this.selectImageWithRange(image, event.rawEvent);
-        }
+    SelectionPlugin.prototype.onMouseUp = function () {
         this.detachMouseEvent();
     };
     SelectionPlugin.prototype.onKeyDown = function (editor, rawEvent) {
@@ -15279,6 +15238,9 @@ exports.defaultContentModelFormatMap = {
         marginTop: '1em',
         marginBottom: '1em',
     },
+    th: {
+        fontWeight: 'bold',
+    },
 };
 
 
@@ -15411,6 +15373,7 @@ exports.defaultHTMLStyleMap = {
     },
     th: {
         display: 'table-cell',
+        fontWeight: 'bold',
     },
     u: {
         textDecoration: 'underline',
@@ -22708,6 +22671,9 @@ function setFirstColumnFormatBorders(rows, format) {
                 switch (rowIndex) {
                     case 0:
                         cell.isHeader = !!format.hasHeaderRow;
+                        if (cell.isHeader) {
+                            cell.format.fontWeight = 'bold';
+                        }
                         break;
                     case rows.length - 1:
                         setBorderColor(cell.format, 'borderTop');
@@ -22735,6 +22701,7 @@ function setHeaderRowFormat(rows, format, metaOverrides) {
     (_a = rows[rowIndex]) === null || _a === void 0 ? void 0 : _a.cells.forEach(function (readonlyCell, cellIndex) {
         var cell = (0, mutate_1.mutateBlock)(readonlyCell);
         cell.isHeader = true;
+        cell.format.fontWeight = 'bold';
         if (format.headerRowColor) {
             if (!metaOverrides.bgColorOverrides[rowIndex][cellIndex]) {
                 (0, setTableCellBackgroundColor_1.setTableCellBackgroundColor)(cell, format.headerRowColor, false /*isColorOverride*/, true /*applyToSegments*/);
@@ -26643,6 +26610,7 @@ var updateMetadata_1 = __webpack_require__(/*! ../../modelApi/metadata/updateMet
 var isEmpty_1 = __webpack_require__(/*! ../../modelApi/common/isEmpty */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/isEmpty.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../../domUtils/moveChildNodes */ "./packages/roosterjs-content-model-dom/lib/domUtils/moveChildNodes.ts");
 var reuseCachedElement_1 = __webpack_require__(/*! ../../domUtils/reuseCachedElement */ "./packages/roosterjs-content-model-dom/lib/domUtils/reuseCachedElement.ts");
+var stackFormat_1 = __webpack_require__(/*! ../utils/stackFormat */ "./packages/roosterjs-content-model-dom/lib/modelToDom/utils/stackFormat.ts");
 /**
  * @internal
  */
@@ -26688,7 +26656,7 @@ var handleTable = function (doc, parent, table, context, refNode) {
             (0, applyFormat_1.applyFormat)(tr, context.formatAppliers.tableRow, tableRow.format, context);
         }
         (_b = context.onNodeCreated) === null || _b === void 0 ? void 0 : _b.call(context, tableRow, tr);
-        for (var col = 0; col < tableRow.cells.length; col++) {
+        var _loop_1 = function (col) {
             var cell = tableRow.cells[col];
             if (cell.isSelected) {
                 var tableSelection = context.tableSelection || {
@@ -26706,9 +26674,9 @@ var handleTable = function (doc, parent, table, context, refNode) {
                 context.tableSelection = tableSelection;
             }
             if (!cell.spanAbove && !cell.spanLeft) {
-                var td = (context.allowCacheElement && cell.cachedElement) ||
-                    doc.createElement(cell.isHeader ? 'th' : 'td');
-                tr.appendChild(td);
+                var tag = cell.isHeader ? 'th' : 'td';
+                var td_1 = (context.allowCacheElement && cell.cachedElement) || doc.createElement(tag);
+                tr.appendChild(td_1);
                 var rowSpan = 1;
                 var colSpan = 1;
                 var width = table.widths[col];
@@ -26720,31 +26688,36 @@ var handleTable = function (doc, parent, table, context, refNode) {
                     width += table.widths[col + colSpan];
                 }
                 if (rowSpan > 1) {
-                    td.rowSpan = rowSpan;
+                    td_1.rowSpan = rowSpan;
                 }
                 if (colSpan > 1) {
-                    td.colSpan = colSpan;
+                    td_1.colSpan = colSpan;
                 }
                 if (!cell.cachedElement || (cell.format.useBorderBox && (0, updateMetadata_1.hasMetadata)(table))) {
-                    if (width > 0 && !td.style.width) {
-                        td.style.width = width + 'px';
+                    if (width > 0 && !td_1.style.width) {
+                        td_1.style.width = width + 'px';
                     }
-                    if (height > 0 && !td.style.height) {
-                        td.style.height = height + 'px';
+                    if (height > 0 && !td_1.style.height) {
+                        td_1.style.height = height + 'px';
                     }
                 }
-                if (!cell.cachedElement) {
-                    if (context.allowCacheElement) {
-                        cell.cachedElement = td;
+                (0, stackFormat_1.stackFormat)(context, tag, function () {
+                    if (!cell.cachedElement) {
+                        if (context.allowCacheElement) {
+                            cell.cachedElement = td_1;
+                        }
+                        (0, applyFormat_1.applyFormat)(td_1, context.formatAppliers.block, cell.format, context);
+                        (0, applyFormat_1.applyFormat)(td_1, context.formatAppliers.tableCell, cell.format, context);
+                        (0, applyFormat_1.applyFormat)(td_1, context.formatAppliers.tableCellBorder, cell.format, context);
+                        (0, applyFormat_1.applyFormat)(td_1, context.formatAppliers.dataset, cell.dataset, context);
                     }
-                    (0, applyFormat_1.applyFormat)(td, context.formatAppliers.block, cell.format, context);
-                    (0, applyFormat_1.applyFormat)(td, context.formatAppliers.tableCell, cell.format, context);
-                    (0, applyFormat_1.applyFormat)(td, context.formatAppliers.tableCellBorder, cell.format, context);
-                    (0, applyFormat_1.applyFormat)(td, context.formatAppliers.dataset, cell.dataset, context);
-                }
-                context.modelHandlers.blockGroupChildren(doc, td, cell, context);
-                (_f = context.onNodeCreated) === null || _f === void 0 ? void 0 : _f.call(context, cell, td);
+                    context.modelHandlers.blockGroupChildren(doc, td_1, cell, context);
+                });
+                (_f = context.onNodeCreated) === null || _f === void 0 ? void 0 : _f.call(context, cell, td_1);
             }
+        };
+        for (var col = 0; col < tableRow.cells.length; col++) {
+            _loop_1(col);
         }
     }
     (_g = context.domIndexer) === null || _g === void 0 ? void 0 : _g.onTable(tableNode, table);
@@ -27192,6 +27165,7 @@ var DefaultOptions = {
     autoHyphen: false,
     autoFraction: false,
     autoOrdinals: false,
+    removeListMargins: false,
 };
 /**
  * Auto Format plugin handles auto formatting, such as transforming * characters into a bullet list.
@@ -27202,6 +27176,7 @@ var AutoFormatPlugin = /** @class */ (function () {
      * @param options An optional parameter that takes in an object of type AutoFormatOptions, which includes the following properties:
      *  - autoBullet: A boolean that enables or disables automatic bullet list formatting. Defaults to false.
      *  - autoNumbering: A boolean that enables or disables automatic numbering formatting. Defaults to false.
+     *  - removeListMargins: A boolean to remove list margins when it is automatically triggered. Defaults to false.
      *  - autoHyphen: A boolean that enables or disables automatic hyphen transformation. Defaults to false.
      *  - autoFraction: A boolean that enables or disables automatic fraction transformation. Defaults to false.
      *  - autoOrdinals: A boolean that enables or disables automatic ordinal number transformation. Defaults to false.
@@ -27272,24 +27247,29 @@ var AutoFormatPlugin = /** @class */ (function () {
                     var formatOptions_1 = {
                         changeSource: '',
                         apiName: '',
+                        getChangeData: undefined,
                     };
                     (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, previousSegment, paragraph, _markerFormat, context) {
-                        var _a = _this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, autoLink = _a.autoLink, autoHyphen = _a.autoHyphen, autoFraction = _a.autoFraction, autoOrdinals = _a.autoOrdinals, autoMailto = _a.autoMailto, autoTel = _a.autoTel;
+                        var _a;
+                        var _b = _this.options, autoBullet = _b.autoBullet, autoNumbering = _b.autoNumbering, autoLink = _b.autoLink, autoHyphen = _b.autoHyphen, autoFraction = _b.autoFraction, autoOrdinals = _b.autoOrdinals, autoMailto = _b.autoMailto, autoTel = _b.autoTel, removeListMargins = _b.removeListMargins;
                         var shouldHyphen = false;
                         var shouldLink = false;
                         var shouldList = false;
                         var shouldFraction = false;
                         var shouldOrdinals = false;
                         if (autoBullet || autoNumbering) {
-                            shouldList = (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering);
+                            shouldList = (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering, removeListMargins);
                         }
                         if (autoLink || autoTel || autoMailto) {
-                            shouldLink = !!(0, roosterjs_content_model_api_1.promoteLink)(previousSegment, paragraph, {
+                            var linkSegment = (0, roosterjs_content_model_api_1.promoteLink)(previousSegment, paragraph, {
                                 autoLink: autoLink,
                                 autoTel: autoTel,
                                 autoMailto: autoMailto,
                             });
-                            if (shouldLink) {
+                            if (linkSegment) {
+                                var anchor_1 = createAnchor(((_a = linkSegment.link) === null || _a === void 0 ? void 0 : _a.format.href) || '', linkSegment.text);
+                                formatOptions_1.getChangeData = function () { return anchor_1; };
+                                shouldLink = true;
                                 context.canUndoByBackspace = true;
                             }
                         }
@@ -27327,10 +27307,10 @@ var AutoFormatPlugin = /** @class */ (function () {
                 case 'Tab':
                     if (!rawEvent.shiftKey) {
                         (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(editor, function (model, _previousSegment, paragraph, _markerFormat, context) {
-                            var _a = _this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering;
+                            var _a = _this.options, autoBullet = _a.autoBullet, autoNumbering = _a.autoNumbering, removeListMargins = _a.removeListMargins;
                             var shouldList = false;
                             if (autoBullet || autoNumbering) {
-                                shouldList = (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering);
+                                shouldList = (0, keyboardListTrigger_1.keyboardListTrigger)(model, paragraph, context, autoBullet, autoNumbering, removeListMargins);
                                 context.canUndoByBackspace = shouldList;
                             }
                             if (shouldList) {
@@ -27368,6 +27348,12 @@ var getChangeSource = function (shouldList, shouldHyphen, shouldLink) {
             ? roosterjs_content_model_dom_1.ChangeSource.AutoLink
             : '';
 };
+var createAnchor = function (url, text) {
+    var anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.textContent = text;
+    return anchor;
+};
 
 
 /***/ }),
@@ -27840,14 +27826,14 @@ var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-mo
 /**
  * @internal
  */
-function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, shouldSearchForNumbering) {
+function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, shouldSearchForNumbering, removeListMargins) {
     if (shouldSearchForBullet === void 0) { shouldSearchForBullet = true; }
     if (shouldSearchForNumbering === void 0) { shouldSearchForNumbering = true; }
     var listStyleType = (0, getListTypeStyle_1.getListTypeStyle)(model, shouldSearchForBullet, shouldSearchForNumbering);
     if (listStyleType) {
         paragraph.segments.splice(0, 1);
         var listType = listStyleType.listType, styleType = listStyleType.styleType, index = listStyleType.index;
-        triggerList(model, listType, styleType, index);
+        triggerList(model, listType, styleType, index, removeListMargins);
         context.canUndoByBackspace = true;
         setAnnounceData(model, context);
         return true;
@@ -27855,8 +27841,8 @@ function keyboardListTrigger(model, paragraph, context, shouldSearchForBullet, s
     return false;
 }
 exports.keyboardListTrigger = keyboardListTrigger;
-var triggerList = function (model, listType, styleType, index) {
-    (0, roosterjs_content_model_api_1.setListType)(model, listType);
+var triggerList = function (model, listType, styleType, index, removeListMargins) {
+    (0, roosterjs_content_model_api_1.setListType)(model, listType, removeListMargins);
     var isOrderedList = listType == 'OL';
     if (index && index > 0 && isOrderedList) {
         (0, roosterjs_content_model_api_1.setModelListStartNumber)(model, index);
@@ -29006,8 +28992,8 @@ var handleEnterOnList = function (context) {
                         }
                     });
                     if (listItem.levels.length == 0) {
-                        var index_1 = findIndex(listParent.blocks, nextBlock.levels.length, listIndex);
-                        nextBlock.levels[nextBlock.levels.length - 1].format.startNumberOverride = index_1;
+                        var nextBlockIndex = findIndex(listParent.blocks, nextBlock.levels.length);
+                        nextBlock.levels[nextBlock.levels.length - 1].format.startNumberOverride = nextBlockIndex;
                     }
                 }
             }
@@ -29051,16 +29037,16 @@ var createNewListLevel = function (listItem) {
         return (0, roosterjs_content_model_dom_1.createListLevel)(level.listType, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, level.format), { startNumberOverride: undefined, displayForDummyItem: undefined }), level.dataset);
     });
 };
-var findIndex = function (blocks, levelLength, index) {
+var findIndex = function (blocks, levelLength) {
     var counter = 1;
-    for (var i = index; i > -1; i--) {
+    for (var i = 0; i < blocks.length; i++) {
         var listItem = blocks[i];
         if ((0, roosterjs_content_model_dom_1.isBlockGroupOfType)(listItem, 'ListItem') &&
             listItem.levels.length === levelLength) {
             counter++;
         }
-        else if (!((0, roosterjs_content_model_dom_1.isBlockGroupOfType)(listItem, 'ListItem') &&
-            listItem.levels.length == 0)) {
+        else if ((0, roosterjs_content_model_dom_1.isBlockGroupOfType)(listItem, 'ListItem') &&
+            listItem.levels.length == 0) {
             return counter;
         }
     }
@@ -30134,6 +30120,7 @@ var MouseRightButton = 2;
 var DRAG_ID = '_dragging';
 var IMAGE_EDIT_CLASS = 'imageEdit';
 var IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
+var IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
 /**
  * ImageEdit plugin handles the following image editing features:
  * - Resize image
@@ -30243,9 +30230,7 @@ var ImageEditPlugin = /** @class */ (function () {
                 this.keyDownHandler(this.editor, event);
                 break;
             case 'contentChanged':
-                if (event.source == roosterjs_content_model_dom_1.ChangeSource.Drop) {
-                    this.onDropHandler(this.editor);
-                }
+                this.contentChangedHandler(this.editor, event);
                 break;
             case 'extractContentWithDom':
                 this.removeImageEditing(event.clonedRoot);
@@ -30322,6 +30307,32 @@ var ImageEditPlugin = /** @class */ (function () {
             }
         }
     };
+    ImageEditPlugin.prototype.setContentHandler = function (editor) {
+        var selection = editor.getDOMSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image' && selection.image.dataset.isEditing && !this.isEditing) {
+            delete selection.image.dataset.isEditing;
+        }
+    };
+    ImageEditPlugin.prototype.formatEventHandler = function (event) {
+        if (this.isEditing && event.formatApiName !== IMAGE_EDIT_FORMAT_EVENT) {
+            this.cleanInfo();
+            this.isEditing = false;
+            this.isCropMode = false;
+        }
+    };
+    ImageEditPlugin.prototype.contentChangedHandler = function (editor, event) {
+        switch (event.source) {
+            case roosterjs_content_model_dom_1.ChangeSource.SetContent:
+                this.setContentHandler(editor);
+                break;
+            case roosterjs_content_model_dom_1.ChangeSource.Format:
+                this.formatEventHandler(event);
+                break;
+            case roosterjs_content_model_dom_1.ChangeSource.Drop:
+                this.onDropHandler(editor);
+                break;
+        }
+    };
     /**
      * EXPOSED FOR TESTING PURPOSE ONLY
      */
@@ -30400,6 +30411,7 @@ var ImageEditPlugin = /** @class */ (function () {
                     }
                 }
             },
+            apiName: IMAGE_EDIT_FORMAT_EVENT,
         }, {
             tryGetFromCache: true,
         });
@@ -35478,7 +35490,15 @@ function createCellResizer(editor, td, table, isRTL, isHorizontal, onStart, onEn
     var zoomScale = editor.getDOMHelper().calculateZoomScale();
     var div = (0, createElement_1.createElement)(createElementData, document);
     (anchorContainer || document.body).appendChild(div);
-    var context = { editor: editor, td: td, table: table, isRTL: isRTL, zoomScale: zoomScale, onStart: onStart };
+    var context = {
+        editor: editor,
+        td: td,
+        table: table,
+        isRTL: isRTL,
+        zoomScale: zoomScale,
+        onStart: onStart,
+        originalWidth: (0, roosterjs_content_model_dom_1.parseValueWithUnit)(table.style.width),
+    };
     var setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;
     setPosition(context, div);
     var handler = {
@@ -35599,6 +35619,11 @@ function onDraggingVertical(context, event, initValue, deltaX) {
                 tableRow.cells[col].style.width = cmTable.widths[col] + 'px';
             }
         }
+        if (context.originalWidth > 0) {
+            var newWidth = context.originalWidth + change + 'px';
+            mutableTable.format.width = newWidth;
+            table.style.width = newWidth;
+        }
         return true;
     }
     else {