roosterjs 9.44.0 → 9.45.1

package/dist/rooster.js

@@ -2343,6 +2343,10 @@ function setModelDirection(model, direction) {
                 item.levels.forEach(function (level) {
                     level.format.direction = calcDirection;
                 });
+                // We already set direction on levels, no need to keep it on list item level
+                delete item.format.direction;
+                // Remove textAlign to let it be calculated based on direction change
+                delete item.format.textAlign;
                 item.blocks.forEach(function (block) { return internalSetDirection(block, calcDirection); });
             });
         }
@@ -4363,9 +4367,18 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.alignTableCellVertically = exports.alignTableCellHorizontally = void 0;
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TextAlignValueMap = {
-    alignCellLeft: 'start',
-    alignCellCenter: 'center',
-    alignCellRight: 'end',
+    alignCellLeft: {
+        ltr: 'start',
+        rtl: 'end',
+    },
+    alignCellCenter: {
+        ltr: 'center',
+        rtl: 'center',
+    },
+    alignCellRight: {
+        ltr: 'end',
+        rtl: 'start',
+    },
 };
 var VerticalAlignValueMap = {
     alignCellTop: 'top',
@@ -4377,7 +4390,8 @@ var VerticalAlignValueMap = {
  */
 function alignTableCellHorizontally(table, operation) {
     alignTableCellInternal(table, function (cell) {
-        cell.format.textAlign = TextAlignValueMap[operation];
+        cell.format.textAlign =
+            TextAlignValueMap[operation][cell.format.direction == 'rtl' ? 'rtl' : 'ltr'];
     });
 }
 exports.alignTableCellHorizontally = alignTableCellHorizontally;
@@ -4540,12 +4554,12 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
 /**
  * @internal
  */
-function createTableStructure(parent, columns, rows) {
+function createTableStructure(parent, columns, rows, cellFormat) {
     var table = (0, roosterjs_content_model_dom_1.createTable)(rows);
     (0, roosterjs_content_model_dom_1.addBlock)(parent, table);
     table.rows.forEach(function (row) {
         for (var i = 0; i < columns; i++) {
-            var cell = (0, roosterjs_content_model_dom_1.createTableCell)();
+            var cell = (0, roosterjs_content_model_dom_1.createTableCell)(undefined /*spanLeftOrColSpan */, undefined /*spanAboveOrRowSpan */, undefined /* isHeader */, cellFormat);
             row.cells.push(cell);
         }
     });
@@ -7137,19 +7151,21 @@ var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-mo
  * @param rows Number of rows in table
  * @param tableMetadataFormat (Optional) The table format that are stored as metadata. If not passed, the default format will be applied: background color: #FFF; border color: #ABABAB
  * @param format (Optional) The table format used for style attributes
+ * @param cellFormat (Optional) custom format for table cells, except for borders styles, for borders use tableMetadataFormat
  */
-function insertTable(editor, columns, rows, tableMetadataFormat, format) {
+function insertTable(editor, columns, rows, tableMetadataFormat, format, customCellFormat) {
     editor.focus();
     editor.formatContentModel(function (model, context) {
         var _a, _b, _c;
         var insertPosition = (0, roosterjs_content_model_dom_1.deleteSelection)(model, [], context).insertPoint;
         if (insertPosition) {
             var doc = (0, roosterjs_content_model_dom_1.createContentModelDocument)();
-            var table = (0, createTableStructure_1.createTableStructure)(doc, columns, rows);
+            var table = (0, createTableStructure_1.createTableStructure)(doc, columns, rows, customCellFormat);
             if (format) {
                 table.format = (0, tslib_1.__assign)({}, format);
             }
             (0, roosterjs_content_model_dom_1.normalizeTable)(table, editor.getPendingFormat() || insertPosition.marker.format);
+            initCellWidth(table);
             (0, adjustIndentation_1.adjustTableIndentation)(insertPosition, table);
             // Assign default vertical align
             tableMetadataFormat = tableMetadataFormat || { verticalAlign: 'top' };
@@ -7174,6 +7190,28 @@ function insertTable(editor, columns, rows, tableMetadataFormat, format) {
     });
 }
 exports.insertTable = insertTable;
+function initCellWidth(table) {
+    var columns = Math.max.apply(Math, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(table.rows.map(function (row) { return row.cells.length; })), false));
+    for (var i = 0; i < columns; i++) {
+        if (table.widths[i] === undefined) {
+            table.widths[i] = getTableCellWidth(columns);
+        }
+        else if (table.widths[i] < roosterjs_content_model_dom_1.MIN_ALLOWED_TABLE_CELL_WIDTH) {
+            table.widths[i] = roosterjs_content_model_dom_1.MIN_ALLOWED_TABLE_CELL_WIDTH;
+        }
+    }
+}
+function getTableCellWidth(columns) {
+    if (columns <= 4) {
+        return 120;
+    }
+    else if (columns <= 6) {
+        return 100;
+    }
+    else {
+        return 70;
+    }
+}
 
 
 /***/ }),
@@ -8610,7 +8648,9 @@ function exportContent(editor, mode, optionsOrCallbacks) {
         case 'HTMLFast':
             var clonedRoot = editor.getDOMHelper().getClonedRoot();
             if (editor.isDarkMode()) {
-                (0, roosterjs_content_model_dom_1.transformColor)(clonedRoot, false /*includeSelf*/, 'darkToLight', editor.getColorManager());
+                (0, roosterjs_content_model_dom_1.transformColor)(clonedRoot, false /*includeSelf*/, 'darkToLight', editor.getColorManager(), {
+                    tableBorders: editor.isExperimentalFeatureEnabled('TransformTableBorderColors'),
+                });
             }
             return getHTMLFromDOM(editor, clonedRoot);
         case 'HTML':
@@ -10051,7 +10091,9 @@ function restoreSnapshotColors(core, snapshot) {
     var isDarkMode = core.lifecycle.isDarkMode;
     core.darkColorHandler.updateKnownColor(isDarkMode); // Pass no parameter to force update all colors
     if (!!snapshot.isDarkMode != !!isDarkMode) {
-        (0, roosterjs_content_model_dom_1.transformColor)(core.physicalRoot, false /*includeSelf*/, isDarkMode ? 'lightToDark' : 'darkToLight', core.darkColorHandler);
+        (0, roosterjs_content_model_dom_1.transformColor)(core.physicalRoot, false /*includeSelf*/, isDarkMode ? 'lightToDark' : 'darkToLight', core.darkColorHandler, {
+            tableBorders: core.experimentalFeatures.indexOf('TransformTableBorderColors') > -1,
+        });
     }
 }
 exports.restoreSnapshotColors = restoreSnapshotColors;
@@ -12716,7 +12758,9 @@ var EntityPlugin = /** @class */ (function () {
                         canPersist: eventResult === null || eventResult === void 0 ? void 0 : eventResult.shouldPersist,
                     };
                     if (editor.isDarkMode()) {
-                        (0, roosterjs_content_model_dom_1.transformColor)(wrapper, true /*includeSelf*/, 'lightToDark', editor.getColorManager());
+                        (0, roosterjs_content_model_dom_1.transformColor)(wrapper, true /*includeSelf*/, 'lightToDark', editor.getColorManager(), {
+                            tableBorders: editor.isExperimentalFeatureEnabled('TransformTableBorderColors'),
+                        });
                     }
                 }
                 else if (id) {
@@ -14985,7 +15029,9 @@ var Editor = /** @class */ (function () {
             var result = node.cloneNode(true /*deep*/);
             if (_this.isDarkMode()) {
                 var colorHandler = _this.getColorManager();
-                (0, roosterjs_content_model_dom_1.transformColor)(result, true /*includeSelf*/, 'darkToLight', colorHandler);
+                (0, roosterjs_content_model_dom_1.transformColor)(result, true /*includeSelf*/, 'darkToLight', colorHandler, {
+                    tableBorders: _this.isExperimentalFeatureEnabled('TransformTableBorderColors'),
+                });
                 result.style.color = result.style.color || 'inherit';
                 result.style.backgroundColor = result.style.backgroundColor || 'inherit';
             }
@@ -15123,7 +15169,7 @@ var Editor = /** @class */ (function () {
      * @returns The HTML document which contains this editor
      */
     Editor.prototype.getDocument = function () {
-        return this.getCore().physicalRoot.ownerDocument;
+        return this.getCore().environment.document;
     };
     /**
      * Focus to this editor, the selection was restored to where it was before, no unexpected scroll.
@@ -15185,7 +15231,9 @@ var Editor = /** @class */ (function () {
     Editor.prototype.setDarkModeState = function (isDarkMode) {
         var core = this.getCore();
         if (!!isDarkMode != core.lifecycle.isDarkMode) {
-            (0, roosterjs_content_model_dom_1.transformColor)(core.physicalRoot, false /*includeSelf*/, isDarkMode ? 'lightToDark' : 'darkToLight', core.darkColorHandler);
+            (0, roosterjs_content_model_dom_1.transformColor)(core.physicalRoot, false /*includeSelf*/, isDarkMode ? 'lightToDark' : 'darkToLight', core.darkColorHandler, {
+                tableBorders: this.isExperimentalFeatureEnabled('TransformTableBorderColors'),
+            });
             core.lifecycle.isDarkMode = !!isDarkMode;
             core.api.triggerEvent(core, {
                 eventType: 'contentChanged',
@@ -15576,12 +15624,13 @@ function createEditorEnvironment(contentDiv, options) {
     var userAgent = (_b = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) !== null && _b !== void 0 ? _b : '';
     var appVersion = (_c = navigator === null || navigator === void 0 ? void 0 : navigator.appVersion) !== null && _c !== void 0 ? _c : '';
     return {
+        document: contentDiv.ownerDocument,
         domToModelSettings: (0, createEditorDefaultSettings_1.createDomToModelSettings)(options),
         modelToDomSettings: (0, createEditorDefaultSettings_1.createModelToDomSettings)(options),
         isMac: appVersion.indexOf('Mac') != -1,
         isAndroid: /android/i.test(userAgent),
         isIOS: /iPad|iPhone/.test(userAgent),
-        isSafari: userAgent.indexOf('Safari') >= 0 &&
+        isSafari: userAgent.indexOf('AppleWebKit') >= 0 &&
             userAgent.indexOf('Chrome') < 0 &&
             userAgent.indexOf('Android') < 0,
         isMobileOrTablet: getIsMobileOrTablet(userAgent),
@@ -17407,7 +17456,12 @@ exports.ContextStyles = [
     'paddingRight',
 ];
 /**
- * @internal
+ * Content Model Element Processor for format container elements (e.g., blockquote, div)
+ * Processes elements that create FormatContainer blocks in the content model.
+ * This processor can be used in processorOverride to customize how specific elements are processed.
+ * @param group The parent block group
+ * @param element The DOM element to process
+ * @param context DOM to Content Model context
  */
 var formatContainerProcessor = function (group, element, context) {
     (0, stackFormat_1.stackFormat)(context, { segment: 'shallowCloneForBlock', paragraph: 'shallowClone' }, function () {
@@ -20013,25 +20067,50 @@ function process(fontFamily, result, start, end) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.transformColor = void 0;
+var borderKeys_1 = __webpack_require__(/*! ../../formatHandlers/utils/borderKeys */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts");
+var isElementOfType_1 = __webpack_require__(/*! ../isElementOfType */ "./packages/roosterjs-content-model-dom/lib/domUtils/isElementOfType.ts");
 var color_1 = __webpack_require__(/*! ../../formatHandlers/utils/color */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts");
 /**
  * Edit and transform color of elements between light mode and dark mode
+ * By default, text and background colors are transformed for all elements.
  * @param rootNode The root DOM node to transform
  * @param includeSelf True to transform the root node as well, otherwise false
  * @param direction To specify the transform direction, light to dark, or dark to light
  * @param darkColorHandler The dark color handler object to help do color transformation
+ * @param transformColorOptions Configuration options for controlling which elements and styles undergo color transformation.
  */
-function transformColor(rootNode, includeSelf, direction, darkColorHandler) {
+function transformColor(rootNode, includeSelf, direction, darkColorHandler, transformColorOptions) {
     var toDarkMode = direction == 'lightToDark';
+    var tableBorders = (transformColorOptions === null || transformColorOptions === void 0 ? void 0 : transformColorOptions.tableBorders) || false;
     var transformer = function (element) {
         var textColor = (0, color_1.getColor)(element, false /*isBackground*/, !toDarkMode, darkColorHandler);
         var backColor = (0, color_1.getColor)(element, true /*isBackground*/, !toDarkMode, darkColorHandler);
         (0, color_1.setColor)(element, textColor, false /*isBackground*/, toDarkMode, darkColorHandler);
         (0, color_1.setColor)(element, backColor, true /*isBackground*/, toDarkMode, darkColorHandler);
+        if (tableBorders) {
+            transformBorderColor(element, toDarkMode, darkColorHandler);
+        }
     };
     iterateElements(rootNode, transformer, includeSelf);
 }
 exports.transformColor = transformColor;
+function transformBorderColor(element, toDarkMode, darkColorHandler) {
+    if ((0, isElementOfType_1.isElementOfType)(element, 'td') || (0, isElementOfType_1.isElementOfType)(element, 'th')) {
+        borderKeys_1.BorderKeys.forEach(function (key) {
+            var borderColorProperty = borderKeys_1.BorderColorKeyMap[key];
+            var style = element.style.getPropertyValue(borderColorProperty);
+            if (style) {
+                var lightColor = (0, color_1.getLightModeColor)(style, !toDarkMode, darkColorHandler);
+                if (lightColor) {
+                    var transformedColor = (0, color_1.adaptColor)(element, lightColor, 'border', toDarkMode, darkColorHandler);
+                    if (transformedColor) {
+                        element.style.setProperty(borderColorProperty, transformedColor);
+                    }
+                }
+            }
+        });
+    }
+}
 function iterateElements(root, transformer, includeSelf) {
     if (includeSelf && isHTMLElement(root)) {
         transformer(root);
@@ -20479,30 +20558,14 @@ exports.textAlignFormatHandler = {
         var _a;
         directionFormatHandler_1.directionFormatHandler.parse(format, element, context, defaultStyle);
         var textAlign = element.style.textAlign || defaultStyle.textAlign;
-        if (element.tagName == 'LI' &&
-            ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.style.display) === 'flex' &&
-            element.parentElement.style.flexDirection === 'column' &&
-            element.style.alignSelf) {
-            // For LI element with flex style applied, we use its "align-self" style value instead since LI has a different implementation for align
-            textAlign = element.style.alignSelf;
-        }
-        if (textAlign) {
+        if (textAlign && ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.style.display) !== 'flex') {
             format.textAlign = (0, dir_1.calcAlign)(textAlign, format.direction);
         }
     },
     apply: function (format, element) {
         var dir = format.direction == 'rtl' ? 'rtl' : 'ltr';
         if (format.textAlign) {
-            var parent_1 = element.parentElement;
-            var parentTag = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.tagName;
-            if (element.tagName == 'LI' && parent_1 && (parentTag == 'OL' || parentTag == 'UL')) {
-                element.style.alignSelf = format.textAlign;
-                element.parentElement.style.flexDirection = 'column';
-                element.parentElement.style.display = 'flex';
-            }
-            else {
-                element.style.textAlign = dir_1.ResultMap[format.textAlign][dir];
-            }
+            element.style.textAlign = dir_1.ResultMap[format.textAlign][dir];
         }
     },
 };
@@ -20669,27 +20732,96 @@ exports.borderBoxFormatHandler = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderColorFormatHandler.ts":
+/*!****************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderColorFormatHandler.ts ***!
+  \****************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.borderColorFormatHandler = void 0;
+var color_1 = __webpack_require__(/*! ../utils/color */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts");
+var borderKeys_1 = __webpack_require__(/*! ../utils/borderKeys */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts");
+var borderValues_1 = __webpack_require__(/*! ../../domUtils/style/borderValues */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/borderValues.ts");
+/**
+ * Keys of border width
+ */
+var BorderWidthKeyMap = {
+    borderTop: 'border-top-width',
+    borderRight: 'border-right-width',
+    borderBottom: 'border-bottom-width',
+    borderLeft: 'border-left-width',
+};
+/**
+ * Keys of border styles
+ */
+var BorderStyleKeyMap = {
+    borderTop: 'border-top-style',
+    borderRight: 'border-right-style',
+    borderBottom: 'border-bottom-style',
+    borderLeft: 'border-left-style',
+};
+/**
+ * @internal
+ */
+exports.borderColorFormatHandler = {
+    parse: function (format, element, context) {
+        if (context.experimentalFeatures &&
+            context.experimentalFeatures.indexOf('TransformTableBorderColors') > -1) {
+            borderKeys_1.BorderKeys.forEach(function (key) {
+                var width = element.style.getPropertyValue(BorderWidthKeyMap[key]);
+                var style = element.style.getPropertyValue(BorderStyleKeyMap[key]);
+                var borderColor = (0, color_1.retrieveElementColor)(element, key);
+                if (borderColor) {
+                    var lightModeColor = (0, color_1.getLightModeColor)(borderColor, !!context.isDarkMode, context.darkColorHandler);
+                    format[key] = (0, borderValues_1.combineBorderValue)({
+                        width: width,
+                        style: style,
+                        color: lightModeColor,
+                    });
+                }
+            });
+        }
+    },
+    apply: function (format, element, context) {
+        if (context.experimentalFeatures &&
+            context.experimentalFeatures.indexOf('TransformTableBorderColors') > -1) {
+            borderKeys_1.BorderKeys.forEach(function (key) {
+                var value = format[key];
+                if (value) {
+                    var borderValues = (0, borderValues_1.extractBorderValues)(value);
+                    if (borderValues.color) {
+                        var transformedColor = (0, color_1.adaptColor)(element, borderValues.color, 'border', !!context.isDarkMode, context.darkColorHandler);
+                        if (transformedColor) {
+                            var borderColorProperty = borderKeys_1.BorderColorKeyMap[key];
+                            element.style.setProperty(borderColorProperty, transformedColor);
+                        }
+                    }
+                }
+            });
+        }
+    },
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts":
 /*!***********************************************************************************************!*\
   !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts ***!
   \***********************************************************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.borderFormatHandler = exports.BorderKeys = void 0;
-/**
- * Keys of border items
- */
-exports.BorderKeys = [
-    'borderTop',
-    'borderRight',
-    'borderBottom',
-    'borderLeft',
-];
+exports.borderFormatHandler = void 0;
+var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var borderKeys_1 = __webpack_require__(/*! ../utils/borderKeys */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts");
 // This array needs to match BorderKeys array
 var BorderWidthKeys = [
     'borderTopWidth',
@@ -20703,13 +20835,13 @@ var BorderRadiusKeys = [
     'borderBottomLeftRadius',
     'borderBottomRightRadius',
 ];
-var AllKeys = exports.BorderKeys.concat(BorderRadiusKeys);
+var AllKeys = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(borderKeys_1.BorderKeys), false), (0, tslib_1.__read)(BorderRadiusKeys), false);
 /**
  * @internal
  */
 exports.borderFormatHandler = {
     parse: function (format, element, _, defaultStyle) {
-        exports.BorderKeys.forEach(function (key, i) {
+        borderKeys_1.BorderKeys.forEach(function (key, i) {
             var _a;
             var value = element.style[key];
             var defaultWidth = (_a = defaultStyle[BorderWidthKeys[i]]) !== null && _a !== void 0 ? _a : '0px';
@@ -21064,6 +21196,7 @@ var ariaFormatHandler_1 = __webpack_require__(/*! ./common/ariaFormatHandler */
 var backgroundColorFormatHandler_1 = __webpack_require__(/*! ./common/backgroundColorFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/backgroundColorFormatHandler.ts");
 var boldFormatHandler_1 = __webpack_require__(/*! ./segment/boldFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/boldFormatHandler.ts");
 var borderBoxFormatHandler_1 = __webpack_require__(/*! ./common/borderBoxFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderBoxFormatHandler.ts");
+var borderColorFormatHandler_1 = __webpack_require__(/*! ./common/borderColorFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderColorFormatHandler.ts");
 var borderFormatHandler_1 = __webpack_require__(/*! ./common/borderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts");
 var boxShadowFormatHandler_1 = __webpack_require__(/*! ./common/boxShadowFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/boxShadowFormatHandler.ts");
 var datasetFormatHandler_1 = __webpack_require__(/*! ./common/datasetFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/datasetFormatHandler.ts");
@@ -21078,9 +21211,11 @@ var htmlAlignFormatHandler_1 = __webpack_require__(/*! ./block/htmlAlignFormatHa
 var idFormatHandler_1 = __webpack_require__(/*! ./common/idFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/idFormatHandler.ts");
 var imageStateFormatHandler_1 = __webpack_require__(/*! ./segment/imageStateFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/imageStateFormatHandler.ts");
 var italicFormatHandler_1 = __webpack_require__(/*! ./segment/italicFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/italicFormatHandler.ts");
+var legacyTableBorderFormatHandler_1 = __webpack_require__(/*! ./table/legacyTableBorderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/table/legacyTableBorderFormatHandler.ts");
 var letterSpacingFormatHandler_1 = __webpack_require__(/*! ./segment/letterSpacingFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/letterSpacingFormatHandler.ts");
 var lineHeightFormatHandler_1 = __webpack_require__(/*! ./block/lineHeightFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/block/lineHeightFormatHandler.ts");
 var linkFormatHandler_1 = __webpack_require__(/*! ./segment/linkFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/segment/linkFormatHandler.ts");
+var listItemAlignFormatHandler_1 = __webpack_require__(/*! ./list/listItemAlignFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listItemAlignFormatHandler.ts");
 var listItemThreadFormatHandler_1 = __webpack_require__(/*! ./list/listItemThreadFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listItemThreadFormatHandler.ts");
 var listLevelThreadFormatHandler_1 = __webpack_require__(/*! ./list/listLevelThreadFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listLevelThreadFormatHandler.ts");
 var listStyleFormatHandler_1 = __webpack_require__(/*! ./list/listStyleFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listStyleFormatHandler.ts");
@@ -21107,6 +21242,7 @@ var defaultFormatHandlerMap = {
     bold: boldFormatHandler_1.boldFormatHandler,
     border: borderFormatHandler_1.borderFormatHandler,
     borderBox: borderBoxFormatHandler_1.borderBoxFormatHandler,
+    borderColor: borderColorFormatHandler_1.borderColorFormatHandler,
     boxShadow: boxShadowFormatHandler_1.boxShadowFormatHandler,
     dataset: datasetFormatHandler_1.datasetFormatHandler,
     direction: directionFormatHandler_1.directionFormatHandler,
@@ -21119,9 +21255,11 @@ var defaultFormatHandlerMap = {
     id: idFormatHandler_1.idFormatHandler,
     imageState: imageStateFormatHandler_1.imageStateFormatHandler,
     italic: italicFormatHandler_1.italicFormatHandler,
+    legacyTableBorder: legacyTableBorderFormatHandler_1.legacyTableBorderFormatHandler,
     letterSpacing: letterSpacingFormatHandler_1.letterSpacingFormatHandler,
     lineHeight: lineHeightFormatHandler_1.lineHeightFormatHandler,
     link: linkFormatHandler_1.linkFormatHandler,
+    listItemAlign: listItemAlignFormatHandler_1.listItemAlignFormatHandler,
     listItemThread: listItemThreadFormatHandler_1.listItemThreadFormatHandler,
     listLevelThread: listLevelThreadFormatHandler_1.listLevelThreadFormatHandler,
     listStyle: listStyleFormatHandler_1.listStyleFormatHandler,
@@ -21175,13 +21313,7 @@ exports.defaultFormatKeysPerCategory = {
     block: sharedBlockFormats,
     listItemThread: ['listItemThread'],
     listLevelThread: ['listLevelThread'],
-    listItemElement: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedBlockFormats), false), [
-        'direction',
-        'textAlign',
-        'lineHeight',
-        'margin',
-        'listStyle',
-    ], false),
+    listItemElement: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedBlockFormats), false), ['listItemAlign', 'margin', 'listStyle'], false),
     listLevel: ['direction', 'textAlign', 'margin', 'padding', 'listStyle', 'backgroundColor'],
     styleBasedSegment: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(styleBasedSegmentFormats), false), ['textColor', 'backgroundColor', 'lineHeight'], false),
     elementBasedSegment: elementBasedSegmentFormats,
@@ -21196,6 +21328,7 @@ exports.defaultFormatKeysPerCategory = {
     ], false),
     tableCell: [
         'border',
+        'borderColor',
         'backgroundColor',
         'padding',
         'verticalAlign',
@@ -21220,7 +21353,7 @@ exports.defaultFormatKeysPerCategory = {
         'direction',
         'role',
     ],
-    tableBorder: ['borderBox', 'tableSpacing'],
+    tableBorder: ['borderBox', 'tableSpacing', 'legacyTableBorder'],
     tableCellBorder: ['borderBox'],
     image: [
         'id',
@@ -21306,6 +21439,53 @@ exports.entityFormatHandler = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listItemAlignFormatHandler.ts":
+/*!****************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listItemAlignFormatHandler.ts ***!
+  \****************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.listItemAlignFormatHandler = void 0;
+var dir_1 = __webpack_require__(/*! ../utils/dir */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/dir.ts");
+/**
+ * @internal
+ */
+exports.listItemAlignFormatHandler = {
+    parse: function (format, element, context) {
+        var _a;
+        // For list, we usually use align-self to implement alignment
+        if (element.style.alignSelf) {
+            format.textAlign = (0, dir_1.calcAlign)(element.style.alignSelf, context.blockFormat.direction);
+        }
+        else if (element.style.textAlign && ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.style.display) !== 'flex') {
+            var align = element.style.textAlign;
+            // For RTL environment, 'start' and 'end' in textAlign means opposite direction compared to LTR unless parent is using flex display
+            if (context.blockFormat.direction === 'rtl' && (align == 'start' || align == 'end')) {
+                align = align == 'start' ? 'end' : 'start';
+            }
+            format.textAlign = (0, dir_1.calcAlign)(align, context.blockFormat.direction);
+        }
+    },
+    apply: function (format, element) {
+        if (format.textAlign) {
+            var parent_1 = element.parentElement;
+            element.style.alignSelf = format.textAlign;
+            // For list item we use align-self to implement textAlign rather than text-align
+            element.style.removeProperty('text-align');
+            if (parent_1) {
+                parent_1.style.flexDirection = 'column';
+                parent_1.style.display = 'flex';
+            }
+        }
+    },
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/list/listItemThreadFormatHandler.ts":
@@ -21981,6 +22161,50 @@ exports.underlineFormatHandler = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/table/legacyTableBorderFormatHandler.ts":
+/*!*********************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/table/legacyTableBorderFormatHandler.ts ***!
+  \*********************************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.legacyTableBorderFormatHandler = void 0;
+/**
+ * @internal
+ */
+exports.legacyTableBorderFormatHandler = {
+    parse: function (format, element) {
+        var border = element.getAttribute('border');
+        var cellSpacing = element.getAttribute('cellspacing');
+        var cellpadding = element.getAttribute('cellpadding');
+        if (border) {
+            format.legacyTableBorder = border;
+        }
+        if (cellSpacing) {
+            format.cellSpacing = cellSpacing;
+        }
+        if (cellpadding) {
+            format.cellPadding = cellpadding;
+        }
+    },
+    apply: function (format, element) {
+        if (format.legacyTableBorder) {
+            element.setAttribute('border', format.legacyTableBorder);
+        }
+        if (format.cellSpacing) {
+            element.setAttribute('cellspacing', format.cellSpacing);
+        }
+        if (format.cellPadding) {
+            element.setAttribute('cellpadding', format.cellPadding);
+        }
+    },
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/table/tableLayoutFormatHandler.ts":
@@ -22025,7 +22249,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.tableSpacingFormatHandler = void 0;
 var BorderCollapsed = 'collapse';
 var BorderSeparate = 'separate';
-var CellPadding = 'cellPadding';
 /**
  * @internal
  */
@@ -22034,12 +22257,6 @@ exports.tableSpacingFormatHandler = {
         if (element.style.borderCollapse == BorderCollapsed) {
             format.borderCollapse = true;
         }
-        else {
-            var cellPadding = element.getAttribute(CellPadding);
-            if (cellPadding) {
-                format.borderCollapse = true;
-            }
-        }
         if (element.style.borderCollapse == BorderSeparate) {
             format.borderSeparate = true;
         }
@@ -22087,6 +22304,38 @@ exports.textColorOnTableCellFormatHandler = {
 };
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts":
+/*!*************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts ***!
+  \*************************************************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.BorderColorKeyMap = exports.BorderKeys = void 0;
+/**
+ * Keys of border items
+ */
+exports.BorderKeys = [
+    'borderTop',
+    'borderRight',
+    'borderBottom',
+    'borderLeft',
+];
+/**
+ * @internal
+ */
+exports.BorderColorKeyMap = {
+    borderTop: 'border-top-color',
+    borderRight: 'border-right-color',
+    borderBottom: 'border-bottom-color',
+    borderLeft: 'border-left-color',
+};
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts":
@@ -22098,8 +22347,9 @@ exports.textColorOnTableCellFormatHandler = {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.parseColor = exports.defaultGenerateColorKey = exports.setColor = exports.getColor = exports.DeprecatedColors = void 0;
+exports.parseColor = exports.defaultGenerateColorKey = exports.adaptColor = exports.setColor = exports.retrieveElementColor = exports.getLightModeColor = exports.getColor = exports.DeprecatedColors = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
+var borderKeys_1 = __webpack_require__(/*! ./borderKeys */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts");
 var getObjectKeys_1 = __webpack_require__(/*! ../../domUtils/getObjectKeys */ "./packages/roosterjs-content-model-dom/lib/domUtils/getObjectKeys.ts");
 /**
  * List of deprecated colors
@@ -22147,13 +22397,20 @@ var COLOR_VAR_PREFIX = '--darkColor';
  * @param fallback @optional Fallback color to use if no color is found from the element
  */
 function getColor(element, isBackground, isDarkMode, darkColorHandler, fallback) {
-    var color = (isBackground ? element.style.backgroundColor : element.style.color) ||
-        element.getAttribute(isBackground ? 'bgcolor' : 'color') ||
-        fallback;
-    if (color && exports.DeprecatedColors.indexOf(color) > -1) {
-        color = isBackground ? undefined : BlackColor;
+    var color = retrieveElementColor(element, isBackground ? 'background' : 'text', fallback);
+    return color
+        ? getLightModeColor(color, isDarkMode, darkColorHandler, isBackground ? undefined : BlackColor)
+        : undefined;
+}
+exports.getColor = getColor;
+/**
+ * @internal
+ */
+function getLightModeColor(color, isDarkMode, darkColorHandler, fallback) {
+    if (exports.DeprecatedColors.indexOf(color) > -1) {
+        return fallback;
     }
-    else if (darkColorHandler && color) {
+    else if (darkColorHandler) {
         var match = color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
         if (match) {
             color = match[2] || '';
@@ -22162,12 +22419,26 @@ function getColor(element, isBackground, isDarkMode, darkColorHandler, fallback)
             // If editor is in dark mode but the color is not in dark color format, it is possible the color was inserted from external code
             // without any light color info. So we first try to see if there is a known dark color can match this color, and use its related
             // light color as light mode color. Otherwise we need to drop this color to avoid show "white on white" content.
-            color = findLightColorFromDarkColor(color, darkColorHandler.knownColors) || '';
+            return findLightColorFromDarkColor(color, darkColorHandler.knownColors) || '';
         }
     }
     return color;
 }
-exports.getColor = getColor;
+exports.getLightModeColor = getLightModeColor;
+/**
+ * @internal
+ */
+function retrieveElementColor(element, source, fallback) {
+    switch (source) {
+        case 'text':
+            return element.style.color || element.getAttribute('color') || fallback;
+        case 'background':
+            return element.style.backgroundColor || element.getAttribute('bgcolor') || fallback;
+        default:
+            return element.style.getPropertyValue(borderKeys_1.BorderColorKeyMap[source]) || fallback;
+    }
+}
+exports.retrieveElementColor = retrieveElementColor;
 /**
  * Set color to given HTML element
  * @param element The element to set color to
@@ -22177,12 +22448,20 @@ exports.getColor = getColor;
  * @param darkColorHandler @optional The dark color handler object to help manager dark mode color
  */
 function setColor(element, color, isBackground, isDarkMode, darkColorHandler) {
+    var newColor = adaptColor(element, color, isBackground ? 'background' : 'text', isDarkMode, darkColorHandler);
+    element.removeAttribute(isBackground ? 'bgcolor' : 'color');
+    element.style.setProperty(isBackground ? 'background-color' : 'color', newColor || null);
+}
+exports.setColor = setColor;
+/**
+ * @internal
+ */
+function adaptColor(element, color, colorType, isDarkMode, darkColorHandler) {
     var _a, _b;
     var match = color && color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
     var _c = (0, tslib_1.__read)(match !== null && match !== void 0 ? match : [], 3), _ = _c[0], existingKey = _c[1], fallbackColor = _c[2];
     color = fallbackColor !== null && fallbackColor !== void 0 ? fallbackColor : color;
     if (darkColorHandler && color) {
-        var colorType = isBackground ? 'background' : 'text';
         var key = existingKey ||
             darkColorHandler.generateColorKey(color, undefined /*baseLValue*/, colorType, element);
         var darkModeColor = ((_b = (_a = darkColorHandler.knownColors) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.darkModeColor) ||
@@ -22193,10 +22472,9 @@ function setColor(element, color, isBackground, isDarkMode, darkColorHandler) {
         });
         color = isDarkMode ? "" + VARIABLE_PREFIX + key + ", " + color + VARIABLE_POSTFIX : color;
     }
-    element.removeAttribute(isBackground ? 'bgcolor' : 'color');
-    element.style.setProperty(isBackground ? 'background-color' : 'color', color || null);
+    return color;
 }
-exports.setColor = setColor;
+exports.adaptColor = adaptColor;
 /**
  * Generate color key for dark color
  * @param lightColor The input light color
@@ -22432,10 +22710,10 @@ exports.shouldSetValue = shouldSetValue;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.createContentModelDocument = exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.isLinkUndeletable = exports.setLinkUndeletable = exports.scrollRectIntoView = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.unwrap = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getSafeIdSelector = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
-exports.isModifierKey = exports.isCharacterValue = exports.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.ParagraphFormats = exports.ListFormatsToMove = exports.ListFormatsToKeep = exports.ListFormats = exports.copyFormat = exports.setParagraphNotImplicit = exports.normalizeSegmentFormat = exports.mergeTextSegments = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = void 0;
-exports.updateTableCellMetadata = exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = exports.getRangesByText = exports.getImageState = exports.setImageState = exports.getParagraphMarker = exports.setParagraphMarker = exports.cacheGetEventData = exports.extractClipboardItems = exports.normalizeFontFamily = exports.transformColor = exports.retrieveDocumentMetadata = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = void 0;
-exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = void 0;
+exports.createImage = exports.createText = exports.createTableCell = exports.createTable = exports.createSelectionMarker = exports.createParagraph = exports.createFormatContainer = exports.createListItem = exports.createBr = exports.isLinkUndeletable = exports.setLinkUndeletable = exports.scrollRectIntoView = exports.normalizeRect = exports.isWhiteSpacePreserved = exports.reuseCachedElement = exports.findClosestBlockEntityContainer = exports.isBlockEntityContainer = exports.isEntityDelimiter = exports.addDelimiters = exports.generateEntityClassNames = exports.parseEntityFormat = exports.getAllEntityWrappers = exports.findClosestEntityWrapper = exports.isEntityElement = exports.unwrap = exports.wrap = exports.wrapAllChildNodes = exports.moveChildNodes = exports.toArray = exports.getSafeIdSelector = exports.getObjectKeys = exports.isElementOfType = exports.isNodeOfType = exports.hasMetadata = exports.getMetadata = exports.updateMetadata = exports.buildSelectionMarker = exports.isBlockElement = exports.areSameFormats = exports.parseFormat = exports.getRegularSelectionOffsets = exports.formatContainerProcessor = exports.tableProcessor = exports.entityProcessor = exports.processChildNode = exports.handleRegularSelection = exports.childProcessor = exports.contentModelToText = exports.contentModelToDom = exports.domToContentModel = void 0;
+exports.isCharacterValue = exports.getDOMInsertPointRect = exports.getSelectionRootNode = exports.isBold = exports.createModelToDomConfig = exports.createModelToDomContextWithConfig = exports.createModelToDomContext = exports.createDomToModelConfig = exports.createDomToModelContextWithConfig = exports.createDomToModelContext = exports.defaultGenerateColorKey = exports.parseColor = exports.setColor = exports.getColor = exports.DeprecatedColors = exports.BorderKeys = exports.parseValueWithUnit = exports.getAutoListStyleType = exports.getOrderedListNumberStr = exports.ParagraphFormats = exports.ListFormatsToMove = exports.ListFormatsToKeep = exports.ListFormats = exports.copyFormat = exports.setParagraphNotImplicit = exports.normalizeSegmentFormat = exports.mergeTextSegments = exports.normalizeSingleSegment = exports.isEmpty = exports.addSegment = exports.unwrapBlock = exports.isGeneralSegment = exports.normalizeContentModel = exports.normalizeParagraph = exports.addTextSegment = exports.addLink = exports.addCode = exports.addBlock = exports.mutateSegment = exports.mutateSegments = exports.mutateBlock = exports.createTableRow = exports.createEmptyModel = exports.createListLevel = exports.createDivider = exports.createEntity = exports.createGeneralBlock = exports.createGeneralSegment = exports.createParagraphDecorator = exports.createContentModelDocument = void 0;
+exports.getImageMetadata = exports.updateImageMetadata = exports.runEditSteps = exports.getClosestAncestorBlockGroupIndex = exports.getSegmentTextFormat = exports.getListStyleTypeFromString = exports.retrieveModelFormatState = exports.setTableCellBackgroundColor = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = exports.MIN_ALLOWED_TABLE_CELL_WIDTH = exports.normalizeTable = exports.setFirstColumnFormatBorders = exports.applyTableFormat = exports.deleteBlock = exports.deleteSegment = exports.deleteSelection = exports.mergeModel = exports.cloneModel = exports.setSelection = exports.hasSelectionInBlockGroup = exports.hasSelectionInSegment = exports.hasSelectionInBlock = exports.getSelectedCells = exports.getSelectedSegmentsAndParagraphs = exports.getSelectedSegments = exports.getSelectedParagraphs = exports.getOperationalBlocks = exports.getFirstSelectedTable = exports.getFirstSelectedListItem = exports.iterateSelections = exports.isBlockGroupOfType = exports.getRangesByText = exports.getImageState = exports.setImageState = exports.getParagraphMarker = exports.setParagraphMarker = exports.cacheGetEventData = exports.extractClipboardItems = exports.normalizeFontFamily = exports.transformColor = exports.retrieveDocumentMetadata = exports.readFile = exports.parseTableCells = exports.normalizeText = exports.isSpace = exports.isPunctuation = exports.extractBorderValues = exports.combineBorderValue = exports.isCursorMovingKey = exports.isModifierKey = void 0;
+exports.EmptySegmentFormat = exports.UnorderedListStyleMap = exports.OrderedListStyleMap = exports.TableBorderFormat = exports.NumberingListType = exports.BulletListType = exports.ChangeSource = exports.ListMetadataDefinition = exports.getListMetadata = exports.updateListMetadata = exports.getTableMetadata = exports.updateTableMetadata = exports.getTableCellMetadata = exports.updateTableCellMetadata = void 0;
 var domToContentModel_1 = __webpack_require__(/*! ./domToModel/domToContentModel */ "./packages/roosterjs-content-model-dom/lib/domToModel/domToContentModel.ts");
 Object.defineProperty(exports, "domToContentModel", ({ enumerable: true, get: function () { return domToContentModel_1.domToContentModel; } }));
 var contentModelToDom_1 = __webpack_require__(/*! ./modelToDom/contentModelToDom */ "./packages/roosterjs-content-model-dom/lib/modelToDom/contentModelToDom.ts");
@@ -22450,6 +22728,8 @@ var entityProcessor_1 = __webpack_require__(/*! ./domToModel/processors/entityPr
 Object.defineProperty(exports, "entityProcessor", ({ enumerable: true, get: function () { return entityProcessor_1.entityProcessor; } }));
 var tableProcessor_1 = __webpack_require__(/*! ./domToModel/processors/tableProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/tableProcessor.ts");
 Object.defineProperty(exports, "tableProcessor", ({ enumerable: true, get: function () { return tableProcessor_1.tableProcessor; } }));
+var formatContainerProcessor_1 = __webpack_require__(/*! ./domToModel/processors/formatContainerProcessor */ "./packages/roosterjs-content-model-dom/lib/domToModel/processors/formatContainerProcessor.ts");
+Object.defineProperty(exports, "formatContainerProcessor", ({ enumerable: true, get: function () { return formatContainerProcessor_1.formatContainerProcessor; } }));
 var getRegularSelectionOffsets_1 = __webpack_require__(/*! ./domToModel/utils/getRegularSelectionOffsets */ "./packages/roosterjs-content-model-dom/lib/domToModel/utils/getRegularSelectionOffsets.ts");
 Object.defineProperty(exports, "getRegularSelectionOffsets", ({ enumerable: true, get: function () { return getRegularSelectionOffsets_1.getRegularSelectionOffsets; } }));
 var parseFormat_1 = __webpack_require__(/*! ./domToModel/utils/parseFormat */ "./packages/roosterjs-content-model-dom/lib/domToModel/utils/parseFormat.ts");
@@ -22582,8 +22862,8 @@ var getAutoListStyleType_1 = __webpack_require__(/*! ./modelApi/list/getAutoList
 Object.defineProperty(exports, "getAutoListStyleType", ({ enumerable: true, get: function () { return getAutoListStyleType_1.getAutoListStyleType; } }));
 var parseValueWithUnit_1 = __webpack_require__(/*! ./formatHandlers/utils/parseValueWithUnit */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/parseValueWithUnit.ts");
 Object.defineProperty(exports, "parseValueWithUnit", ({ enumerable: true, get: function () { return parseValueWithUnit_1.parseValueWithUnit; } }));
-var borderFormatHandler_1 = __webpack_require__(/*! ./formatHandlers/common/borderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts");
-Object.defineProperty(exports, "BorderKeys", ({ enumerable: true, get: function () { return borderFormatHandler_1.BorderKeys; } }));
+var borderKeys_1 = __webpack_require__(/*! ./formatHandlers/utils/borderKeys */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts");
+Object.defineProperty(exports, "BorderKeys", ({ enumerable: true, get: function () { return borderKeys_1.BorderKeys; } }));
 var color_1 = __webpack_require__(/*! ./formatHandlers/utils/color */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts");
 Object.defineProperty(exports, "DeprecatedColors", ({ enumerable: true, get: function () { return color_1.DeprecatedColors; } }));
 Object.defineProperty(exports, "getColor", ({ enumerable: true, get: function () { return color_1.getColor; } }));
@@ -23586,10 +23866,10 @@ function normalizeLastTextSegment(paragraph, segment, lastInlineSegment) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.normalizeSegmentFormat = void 0;
 var createContentModelDocument_1 = __webpack_require__(/*! ../creators/createContentModelDocument */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createContentModelDocument.ts");
+var createDomToModelContext_1 = __webpack_require__(/*! ../../domToModel/context/createDomToModelContext */ "./packages/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts");
+var createModelToDomContext_1 = __webpack_require__(/*! ../../modelToDom/context/createModelToDomContext */ "./packages/roosterjs-content-model-dom/lib/modelToDom/context/createModelToDomContext.ts");
 var createText_1 = __webpack_require__(/*! ../creators/createText */ "./packages/roosterjs-content-model-dom/lib/modelApi/creators/createText.ts");
 var ensureParagraph_1 = __webpack_require__(/*! ./ensureParagraph */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/ensureParagraph.ts");
-var createModelToDomContext_1 = __webpack_require__(/*! ../../modelToDom/context/createModelToDomContext */ "./packages/roosterjs-content-model-dom/lib/modelToDom/context/createModelToDomContext.ts");
-var createDomToModelContext_1 = __webpack_require__(/*! ../../domToModel/context/createDomToModelContext */ "./packages/roosterjs-content-model-dom/lib/domToModel/context/createDomToModelContext.ts");
 /**
  * Some format values can be changed when apply to DOM, such as font family.
  * This function will normalize the format and return the same string after DOM modification.
@@ -23598,7 +23878,7 @@ var createDomToModelContext_1 = __webpack_require__(/*! ../../domToModel/context
  */
 function normalizeSegmentFormat(format, environment) {
     var _a, _b;
-    var span = document.createElement('span');
+    var span = environment.document.createElement('span');
     var segment = (0, createText_1.createText)('text', format);
     var domToModelContext = (0, createDomToModelContext_1.createDomToModelContextWithConfig)(environment.domToModelSettings.calculated);
     var modelToDomContext = (0, createModelToDomContext_1.createModelToDomContextWithConfig)(environment.modelToDomSettings.calculated);
@@ -24235,7 +24515,7 @@ var _a;
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setFirstColumnFormatBorders = exports.applyTableFormat = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var borderFormatHandler_1 = __webpack_require__(/*! ../../formatHandlers/common/borderFormatHandler */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts");
+var borderKeys_1 = __webpack_require__(/*! ../../formatHandlers/utils/borderKeys */ "./packages/roosterjs-content-model-dom/lib/formatHandlers/utils/borderKeys.ts");
 var borderValues_1 = __webpack_require__(/*! ../../domUtils/style/borderValues */ "./packages/roosterjs-content-model-dom/lib/domUtils/style/borderValues.ts");
 var mutate_1 = __webpack_require__(/*! ../common/mutate */ "./packages/roosterjs-content-model-dom/lib/modelApi/common/mutate.ts");
 var setTableCellBackgroundColor_1 = __webpack_require__(/*! ./setTableCellBackgroundColor */ "./packages/roosterjs-content-model-dom/lib/modelApi/editing/setTableCellBackgroundColor.ts");
@@ -24398,7 +24678,7 @@ function formatCells(rows, format, metaOverrides) {
                 ];
                 transparentBorderMatrix === null || transparentBorderMatrix === void 0 ? void 0 : transparentBorderMatrix.forEach(function (alwaysUseTransparent, i) {
                     var borderColor = (!alwaysUseTransparent && formatColor_1[i]) || '';
-                    cell.format[borderFormatHandler_1.BorderKeys[i]] = (0, borderValues_1.combineBorderValue)({
+                    cell.format[borderKeys_1.BorderKeys[i]] = (0, borderValues_1.combineBorderValue)({
                         style: getBorderStyleFromColor(borderColor),
                         width: '1px',
                         color: borderColor,
@@ -25658,7 +25938,7 @@ exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = 22;
  * Normalize a Content Model table, make sure:
  * 1. Fist cells are not spanned
  * 2. Only first column and row can have headers
- * 3. All cells have content and width
+ * 3. All cells have content
  * 4. Table and table row have correct width/height
  * 5. Spanned cell has no child blocks
  * 6. default format is correctly applied
@@ -25668,9 +25948,10 @@ exports.MIN_ALLOWED_TABLE_CELL_HEIGHT = 22;
 function normalizeTable(readonlyTable, defaultSegmentFormat) {
     var _a;
     var table = (0, mutate_1.mutateBlock)(readonlyTable);
-    // Always collapse border and use border box for table in roosterjs to make layout simpler
+    // Collapse border and use border box for table in roosterjs to make layout simpler
+    // But if this is a legacy style table (table with deprecated border attributes), we should not change its border model
     var format = table.format;
-    if (!format.borderCollapse || !format.useBorderBox) {
+    if (!format.cellSpacing && !format.cellPadding && !format.legacyTableBorder) {
         format.borderCollapse = true;
         format.useBorderBox = true;
     }
@@ -25702,15 +25983,6 @@ function normalizeTable(readonlyTable, defaultSegmentFormat) {
             row.height = exports.MIN_ALLOWED_TABLE_CELL_HEIGHT;
         }
     });
-    var columns = Math.max.apply(Math, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(table.rows.map(function (row) { return row.cells.length; })), false));
-    for (var i = 0; i < columns; i++) {
-        if (table.widths[i] === undefined) {
-            table.widths[i] = getTableCellWidth(columns);
-        }
-        else if (table.widths[i] < exports.MIN_ALLOWED_TABLE_CELL_WIDTH) {
-            table.widths[i] = exports.MIN_ALLOWED_TABLE_CELL_WIDTH;
-        }
-    }
     // Move blocks from spanned cell to its main cell if any,
     // and remove rows/columns if all cells in it are spanned
     var colCount = ((_a = table.rows[0]) === null || _a === void 0 ? void 0 : _a.cells.length) || 0;
@@ -25724,7 +25996,13 @@ function normalizeTable(readonlyTable, defaultSegmentFormat) {
         });
         if (table.rows.every(function (row) { var _a; return (_a = row.cells[colIndex]) === null || _a === void 0 ? void 0 : _a.spanLeft; })) {
             table.rows.forEach(function (row) { return row.cells.splice(colIndex, 1); });
-            table.widths.splice(colIndex - 1, 2, table.widths[colIndex - 1] + table.widths[colIndex]);
+            if (typeof table.widths[colIndex] === 'number' &&
+                typeof table.widths[colIndex - 1] === 'number') {
+                table.widths.splice(colIndex - 1, 2, table.widths[colIndex - 1] + table.widths[colIndex]);
+            }
+            else {
+                table.widths.splice(colIndex, 1);
+            }
         }
     };
     for (var colIndex = colCount - 1; colIndex > 0; colIndex--) {
@@ -25749,17 +26027,6 @@ function normalizeTable(readonlyTable, defaultSegmentFormat) {
     }
 }
 exports.normalizeTable = normalizeTable;
-function getTableCellWidth(columns) {
-    if (columns <= 4) {
-        return 120;
-    }
-    else if (columns <= 6) {
-        return 100;
-    }
-    else {
-        return 70;
-    }
-}
 function tryMoveBlocks(targetCell, sourceCell) {
     var _a;
     var onlyHasEmptyOrBr = sourceCell.blocks.every(function (block) { return block.blockType == 'Paragraph' && hasOnlyBrSegment(block.segments); });
@@ -28110,7 +28377,7 @@ var parseValueWithUnit_1 = __webpack_require__(/*! ../../formatHandlers/utils/pa
  */
 var handleImage = function (doc, parent, imageModel, context, segmentNodes) {
     var img = doc.createElement('img');
-    var element = document.createElement('span');
+    var element = doc.createElement('span');
     parent.appendChild(element);
     element.appendChild(img);
     img.src = imageModel.src;
@@ -30591,8 +30858,12 @@ function retrieveStringFromParsedTable(tsInfo) {
     var parsedTable = tsInfo.parsedTable, firstCo = tsInfo.firstCo, lastCo = tsInfo.lastCo;
     var result = '';
     if (lastCo) {
-        for (var r = firstCo.row; r <= lastCo.row; r++) {
-            for (var c = firstCo.col; c <= lastCo.col; c++) {
+        var firstCol = Math.min(firstCo.col, lastCo.col);
+        var lastCol = Math.max(firstCo.col, lastCo.col);
+        var firstRow = Math.min(firstCo.row, lastCo.row);
+        var lastRow = Math.max(firstCo.row, lastCo.row);
+        for (var r = firstRow; r <= lastRow; r++) {
+            for (var c = firstCol; c <= lastCol; c++) {
                 var cell = parsedTable[r] && parsedTable[r][c];
                 if (cell && typeof cell != 'string') {
                     result += ' ' + cell.innerText + ',';
@@ -30640,13 +30911,6 @@ function getIsSelectingOrUnselecting(prevTableSelection, newTableSelection) {
         // Same area but different positions
         return 'selecting';
     }
-    if (prevFirstColumn !== newFirstColumn ||
-        prevFirstRow !== newFirstRow ||
-        prevLastColumn !== newLastColumn ||
-        prevLastRow !== newLastRow) {
-        return 'selecting';
-    }
-    return null;
 }
 exports.getIsSelectingOrUnselecting = getIsSelectingOrUnselecting;
 
@@ -30722,8 +30986,8 @@ var AutoFormatPlugin = /** @class */ (function () {
                     autoTel: autoTel,
                     autoMailto: autoMailto,
                 });
-                if (linkSegment) {
-                    return createAnchor(((_a = linkSegment.link) === null || _a === void 0 ? void 0 : _a.format.href) || '', linkSegment.text);
+                if (linkSegment && _this.editor) {
+                    return createAnchor(_this.editor.getDocument(), ((_a = linkSegment.link) === null || _a === void 0 ? void 0 : _a.format.href) || '', linkSegment.text);
                 }
                 return false;
             },
@@ -30952,8 +31216,8 @@ var AutoFormatPlugin = /** @class */ (function () {
     return AutoFormatPlugin;
 }());
 exports.AutoFormatPlugin = AutoFormatPlugin;
-var createAnchor = function (url, text) {
-    var anchor = document.createElement('a');
+var createAnchor = function (doc, url, text) {
+    var anchor = doc.createElement('a');
     anchor.href = url;
     anchor.textContent = text;
     return anchor;
@@ -31651,7 +31915,8 @@ var ORDINAL_LENGTH = 2;
             var numericValue = null;
             if (numberSegment &&
                 numberSegment.segmentType == 'Text' &&
-                (numericValue = getNumericValue(numberSegment.text, true /* checkFullText */)) &&
+                (numericValue = getNumericValue(numberSegment.text, true /* checkFullText */)) !==
+                    null &&
                 getOrdinal(numericValue) === value) {
                 shouldAddSuperScript = true;
             }
@@ -31659,7 +31924,7 @@ var ORDINAL_LENGTH = 2;
         else {
             var ordinal = value.substring(value.length - ORDINAL_LENGTH); // This value  is equal st, nd, rd, th
             var numericValue = getNumericValue(value); //This is the numeric part. Ex: 10th, numeric value =
-            if (numericValue && getOrdinal(numericValue) === ordinal) {
+            if (numericValue !== null && getOrdinal(numericValue) === ordinal) {
                 shouldAddSuperScript = true;
             }
         }
@@ -32388,25 +32653,55 @@ var insertNewLine = function (quote, parent, quoteIndex, paragraph) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.deleteList = 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");
 /**
  * @internal
  */
 var deleteList = function (context) {
+    var _a, _b;
     if (context.deleteResult != 'notDeleted') {
         return;
     }
-    var _a = context.insertPoint, paragraph = _a.paragraph, marker = _a.marker, path = _a.path;
-    if (paragraph.segments[0] == marker) {
-        var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem'], ['TableCell', 'FormatContainer']);
-        var item = path[index];
-        var lastLevel = item === null || item === void 0 ? void 0 : item.levels[item.levels.length - 1];
-        if (lastLevel && (item === null || item === void 0 ? void 0 : item.blocks[0]) == paragraph) {
-            if (lastLevel.format.displayForDummyItem == 'block') {
-                item.levels.pop();
+    var _c = context.insertPoint, paragraph = _c.paragraph, marker = _c.marker, path = _c.path;
+    var index = (0, roosterjs_content_model_dom_1.getClosestAncestorBlockGroupIndex)(path, ['ListItem'], ['TableCell', 'FormatContainer']);
+    var item = path[index];
+    var parent = path[index + 1];
+    if ((item === null || item === void 0 ? void 0 : item.blockGroupType) == 'ListItem' &&
+        item.levels.length > 0 &&
+        paragraph.segments[0] == marker &&
+        parent) {
+        var mutableList = (0, roosterjs_content_model_dom_1.mutateBlock)(item);
+        var lastLevel = mutableList.levels[mutableList.levels.length - 1];
+        var listItemIndex = parent.blocks.indexOf(item);
+        var previousItem = parent.blocks[listItemIndex - 1];
+        // 1. If the last level is dummy, just remove it (legacy behavior)
+        // 2. If focus is at the beginning of list item and previous block is a list item with the same level count,
+        //    merge current list item into previous one
+        // 3. Otherwise, split the list item. Keep the blocks before the paragraph in the current list item,
+        //    move the rest to a new list item (if there are multiple levels) or directly to parent (if only one level)
+        if (lastLevel.format.displayForDummyItem == 'block') {
+            mutableList.levels.pop();
+            context.deleteResult = 'range';
+        }
+        else if (item.blocks[0] == paragraph &&
+            (previousItem === null || previousItem === void 0 ? void 0 : previousItem.blockType) == 'BlockGroup' &&
+            previousItem.blockGroupType == 'ListItem' &&
+            previousItem.levels.length == mutableList.levels.length) {
+            var mutablePreviousItem = (0, roosterjs_content_model_dom_1.mutateBlock)(previousItem);
+            (_a = mutablePreviousItem.blocks).push.apply(_a, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(mutableList.blocks), false));
+            (0, roosterjs_content_model_dom_1.mutateBlock)(parent).blocks.splice(listItemIndex, 1);
+            context.deleteResult = 'range';
+        }
+        else {
+            var removedBlocks = mutableList.blocks.splice(mutableList.blocks.indexOf(paragraph), mutableList.blocks.length);
+            if (mutableList.levels.length > 1) {
+                var newListItem = (0, roosterjs_content_model_dom_1.createListItem)(mutableList.levels.slice(0, -1), mutableList.format);
+                newListItem.blocks = removedBlocks.map(function (block) { return (0, roosterjs_content_model_dom_1.mutateBlock)(block); });
+                (0, roosterjs_content_model_dom_1.mutateBlock)(parent).blocks.splice(listItemIndex + 1, 0, newListItem);
             }
             else {
-                lastLevel.format.displayForDummyItem = 'block';
+                (_b = (0, roosterjs_content_model_dom_1.mutateBlock)(parent).blocks).splice.apply(_b, (0, tslib_1.__spreadArray)([listItemIndex + 1, 0], (0, tslib_1.__read)(removedBlocks), false));
             }
             context.deleteResult = 'range';
         }
@@ -33679,11 +33974,12 @@ var FindReplacePlugin = /** @class */ (function () {
      * @param editor The editor object
      */
     FindReplacePlugin.prototype.initialize = function (editor) {
-        var _a;
         this.editor = editor;
-        var win = (_a = editor.getDocument().defaultView) !== null && _a !== void 0 ? _a : window;
-        this.context.findHighlight.initialize(win);
-        this.context.replaceHighlight.initialize(win);
+        var win = editor.getDocument().defaultView;
+        if (win) {
+            this.context.findHighlight.initialize(win);
+            this.context.replaceHighlight.initialize(win);
+        }
         this.editor.setEditorStyle(constants_1.FindHighlightRuleKey, this.findHighlightStyle, [
             constants_1.FindHighlightSelector,
         ]);
@@ -36253,9 +36549,11 @@ function generateDataURL(image, editInfo) {
     var height = heightPx || image.clientHeight;
     var imageWidth = nWidth * (1 - left - right);
     var imageHeight = nHeight * (1 - top - bottom);
+    var doc = image.ownerDocument;
+    var win = doc.defaultView;
     // Adjust the canvas size and scaling for high display resolution
-    var devicePixelRatio = window.devicePixelRatio || 1;
-    var canvas = document.createElement('canvas');
+    var devicePixelRatio = (win === null || win === void 0 ? void 0 : win.devicePixelRatio) || 1;
+    var canvas = doc.createElement('canvas');
     var targetWidth = generatedImageSize.targetWidth, targetHeight = generatedImageSize.targetHeight;
     canvas.width = targetWidth * devicePixelRatio;
     canvas.height = targetHeight * devicePixelRatio;
@@ -40421,13 +40719,13 @@ var TableEditPlugin = /** @class */ (function () {
             }
         };
         this.onMouseMove = function (event) {
-            var _a;
+            var _a, _b;
             var e = event;
-            if (e.buttons > 0 || !_this.editor) {
+            var editorWindow = (_a = _this.editor) === null || _a === void 0 ? void 0 : _a.getDocument().defaultView;
+            if (e.buttons > 0 || !editorWindow) {
                 return;
             }
             _this.ensureTableRects();
-            var editorWindow = _this.editor.getDocument().defaultView || window;
             var x = e.pageX - editorWindow.scrollX;
             var y = e.pageY - editorWindow.scrollY;
             var currentTable = null;
@@ -40446,7 +40744,7 @@ var TableEditPlugin = /** @class */ (function () {
                 }
             }
             _this.setTableEditor(currentTable, e);
-            (_a = _this.tableEditor) === null || _a === void 0 ? void 0 : _a.onMouseMove(x, y);
+            (_b = _this.tableEditor) === null || _b === void 0 ? void 0 : _b.onMouseMove(x, y);
         };
         this.invalidateTableRects = function () {
             _this.tableRectMap = null;
@@ -40566,6 +40864,7 @@ var CellResizer_1 = __webpack_require__(/*! ./features/CellResizer */ "./package
 var TableInserter_1 = __webpack_require__(/*! ./features/TableInserter */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableInserter.ts");
 var TableMover_1 = __webpack_require__(/*! ./features/TableMover */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableMover.ts");
 var TableResizer_1 = __webpack_require__(/*! ./features/TableResizer */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts");
+var TableRowColumnSelector_1 = __webpack_require__(/*! ./features/TableRowColumnSelector */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableRowColumnSelector.ts");
 var TableEditFeature_1 = __webpack_require__(/*! ./features/TableEditFeature */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableEditFeature.ts");
 var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var INSERTER_HOVER_OFFSET = 6;
@@ -40625,6 +40924,9 @@ var TableEditor = /** @class */ (function () {
         this.tableResizer = null;
         // 6 - Move as well as select whole table
         this.tableMover = null;
+        // 7 - Select whole column or row
+        this.tableColumnSelector = null;
+        this.tableRowSelector = null;
         this.range = null;
         this.onEditorCreated = function (featureType, element) {
             var _a;
@@ -40666,6 +40968,7 @@ var TableEditor = /** @class */ (function () {
             _this.disposeTableResizer();
             _this.disposeTableInserter();
             _this.disposeCellResizers();
+            _this.disposeTableSelector();
         };
         this.onEndTableMove = function (disposeHandler) {
             if (disposeHandler) {
@@ -40721,6 +41024,7 @@ var TableEditor = /** @class */ (function () {
         this.disposeCellResizers();
         this.disposeTableInserter();
         this.disposeTableMover();
+        this.disposeTableSelector();
     };
     TableEditor.prototype.isEditing = function () {
         return this.isCurrentlyEditing;
@@ -40733,9 +41037,11 @@ var TableEditor = /** @class */ (function () {
             this.verticalInserter,
             this.horizontalResizer,
             this.verticalResizer,
+            this.tableColumnSelector,
+            this.tableRowSelector,
         ]
             .filter(function (feature) { return !!(feature === null || feature === void 0 ? void 0 : feature.div); })
-            .some(function (feature) { return (feature === null || feature === void 0 ? void 0 : feature.div) == node; });
+            .some(function (feature) { return (feature === null || feature === void 0 ? void 0 : feature.div) == node || ((feature === null || feature === void 0 ? void 0 : feature.div) && feature.div.contains(node)); });
     };
     /**
      * public only for testing purposes
@@ -40811,6 +41117,17 @@ var TableEditor = /** @class */ (function () {
                 break;
             }
         }
+        if (topOrSide == 0 /* top */) {
+            !this.isFeatureDisabled('TableColumnSelector') &&
+                this.setSelectorRowColumn(false /*isRow*/);
+        }
+        else if (topOrSide == 1 /* side */) {
+            !this.isFeatureDisabled('TableRowSelector') &&
+                this.setSelectorRowColumn(true /*isRow*/);
+        }
+        else {
+            this.setSelectorRowColumn(null);
+        }
         // Create Mover and Resizer
         this.setEditorFeatures();
     };
@@ -40852,6 +41169,14 @@ var TableEditor = /** @class */ (function () {
             }
         }
     };
+    TableEditor.prototype.setSelectorRowColumn = function (isRowSelector /*undefined means to clear both*/) {
+        if (isRowSelector !== null && !this.tableRowSelector && !this.tableColumnSelector) {
+            this.tableRowSelector = (0, TableRowColumnSelector_1.createTableRowColumnSelector)(this.editor, this.table, !!isRowSelector, this.anchorContainer, this.onEditorCreated);
+        }
+        else {
+            this.disposeTableSelector();
+        }
+    };
     TableEditor.prototype.disposeTableResizer = function () {
         if (this.tableResizer) {
             (0, TableEditFeature_1.disposeTableEditFeature)(this.tableResizer);
@@ -40868,6 +41193,16 @@ var TableEditor = /** @class */ (function () {
             this.verticalInserter = null;
         }
     };
+    TableEditor.prototype.disposeTableSelector = function () {
+        if (this.tableColumnSelector) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableColumnSelector);
+            this.tableColumnSelector = null;
+        }
+        if (this.tableRowSelector) {
+            (0, TableEditFeature_1.disposeTableEditFeature)(this.tableRowSelector);
+            this.tableRowSelector = null;
+        }
+    };
     TableEditor.prototype.disposeCellResizers = function () {
         if (this.horizontalResizer) {
             (0, TableEditFeature_1.disposeTableEditFeature)(this.horizontalResizer);
@@ -40984,40 +41319,61 @@ function onDragStart(context, event) {
     var td = context.td, onStart = context.onStart;
     var rect = (0, roosterjs_content_model_dom_1.normalizeRect)(td.getBoundingClientRect());
     // Get cell coordinates
-    var columnIndex = td.cellIndex;
-    var row = td.parentElement && (0, roosterjs_content_model_dom_1.isElementOfType)(td.parentElement, 'tr') ? td.parentElement : undefined;
-    var rowIndex = row === null || row === void 0 ? void 0 : row.rowIndex;
-    if (rowIndex == undefined) {
-        return {
-            cmTable: undefined,
-            anchorColumn: undefined,
-            anchorRow: undefined,
-            anchorRowHeight: -1,
-            allWidths: [],
-        }; // Just a fallback
-    }
+    var rowIndex;
+    var columnIndex;
+    var nextColumnIndex = -1;
     var editor = context.editor, table = context.table;
     // Get Table block in content model
     var cmTable = (0, getTableFromContentModel_1.getCMTableFromTable)(editor, table);
     if (rect && cmTable) {
+        for (var r = 0; r < (cmTable === null || cmTable === void 0 ? void 0 : cmTable.rows.length); r++) {
+            for (var c = 0; c < cmTable.rows[r].cells.length; c++) {
+                var cell = cmTable.rows[r].cells[c];
+                if (cell.cachedElement == td) {
+                    // Target cell found, record its position
+                    rowIndex = r;
+                    columnIndex = c;
+                }
+                else if (rowIndex != undefined && columnIndex != undefined) {
+                    // rowIndex and columnIndex are already found, we can find nextColumnIndex now
+                    if (!cell.cachedElement) {
+                        // No cached element means this cell is merged, so this could potentially be the right side of column
+                        // We are trying to find the last merged cell so we can modify its width later
+                        columnIndex = c;
+                    }
+                    else {
+                        // Since we already found the target cell, the first cell with cachedElement after that must be the next column
+                        nextColumnIndex = c;
+                        break;
+                    }
+                }
+            }
+            // As long as rowIndex is found, we can break here, no matter if nextColumnIndex is found or not
+            // because for the last column case, nextColumnIndex will be -1
+            if (rowIndex != undefined) {
+                break;
+            }
+        }
         onStart();
-        return {
-            cmTable: cmTable,
-            anchorColumn: columnIndex,
-            anchorRow: rowIndex,
-            anchorRowHeight: cmTable.rows[rowIndex].height,
-            allWidths: (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(cmTable.widths), false),
-        };
-    }
-    else {
-        return {
-            cmTable: cmTable,
-            anchorColumn: undefined,
-            anchorRow: undefined,
-            anchorRowHeight: -1,
-            allWidths: [],
-        }; // Just a fallback
+        if (rowIndex !== undefined) {
+            return {
+                cmTable: cmTable,
+                anchorColumn: columnIndex,
+                nextColumn: nextColumnIndex,
+                anchorRow: rowIndex,
+                anchorRowHeight: cmTable.rows[rowIndex].height,
+                allWidths: (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(cmTable.widths), false),
+            };
+        }
     }
+    return {
+        cmTable: cmTable,
+        anchorColumn: undefined,
+        anchorRow: undefined,
+        anchorRowHeight: -1,
+        allWidths: [],
+        nextColumn: -1,
+    }; // Just a fallback
 }
 exports.onDragStart = onDragStart;
 /**
@@ -41025,7 +41381,6 @@ exports.onDragStart = onDragStart;
  * Exported for testing
  */
 function onDraggingHorizontal(context, event, initValue, deltaX, deltaY) {
-    var table = context.table;
     var cmTable = initValue.cmTable, anchorRow = initValue.anchorRow, anchorRowHeight = initValue.anchorRowHeight;
     // Assign new widths and heights to the CM table
     if (cmTable && anchorRow != undefined && cmTable.rows[anchorRow] != undefined) {
@@ -41034,11 +41389,13 @@ function onDraggingHorizontal(context, event, initValue, deltaX, deltaY) {
         // Normalize the new height value
         var newHeight = Math.max(cmTable.rows[anchorRow].height, roosterjs_content_model_dom_1.MIN_ALLOWED_TABLE_CELL_HEIGHT);
         // Writeback CM Table size changes to DOM Table
-        var tableRow = table.rows[anchorRow];
-        for (var col = 0; col < tableRow.cells.length; col++) {
-            var td = tableRow.cells[col];
-            td.style.height = newHeight + 'px';
-            td.style.boxSizing = 'border-box';
+        var tableRow = cmTable.rows[anchorRow].cells;
+        for (var col = 0; col < tableRow.length; col++) {
+            var td = tableRow[col].cachedElement;
+            if (td) {
+                td.style.height = newHeight + 'px';
+                td.style.boxSizing = 'border-box';
+            }
         }
         return true;
     }
@@ -41053,15 +41410,13 @@ exports.onDraggingHorizontal = onDraggingHorizontal;
  */
 function onDraggingVertical(context, event, initValue, deltaX) {
     var table = context.table, isRTL = context.isRTL;
-    var cmTable = initValue.cmTable, anchorColumn = initValue.anchorColumn, allWidths = initValue.allWidths;
+    var cmTable = initValue.cmTable, anchorColumn = initValue.anchorColumn, nextColumn = initValue.nextColumn, allWidths = initValue.allWidths;
     // Assign new widths and heights to the CM table
     if (cmTable && anchorColumn != undefined) {
         var mutableTable = (0, roosterjs_content_model_dom_1.mutateBlock)(cmTable);
-        // Modify the CM Table size
-        var lastColumn = anchorColumn == cmTable.widths.length - 1;
         var change = deltaX * (isRTL ? -1 : 1);
         // This is the last column
-        if (lastColumn) {
+        if (nextColumn == -1) {
             // Only the last column changes
             // Normalize the new width value
             var newWidth = Math.max(allWidths[anchorColumn] + change, roosterjs_content_model_dom_1.MIN_ALLOWED_TABLE_CELL_WIDTH);
@@ -41070,21 +41425,37 @@ function onDraggingVertical(context, event, initValue, deltaX) {
         else {
             // Any other two columns
             var anchorChange = allWidths[anchorColumn] + change;
-            var nextAnchorChange = allWidths[anchorColumn + 1] - change;
+            var nextAnchorChange = allWidths[nextColumn] - change;
             if (anchorChange < roosterjs_content_model_dom_1.MIN_ALLOWED_TABLE_CELL_WIDTH ||
                 nextAnchorChange < roosterjs_content_model_dom_1.MIN_ALLOWED_TABLE_CELL_WIDTH) {
                 return false;
             }
             mutableTable.widths[anchorColumn] = anchorChange;
-            mutableTable.widths[anchorColumn + 1] = nextAnchorChange;
+            mutableTable.widths[nextColumn] = nextAnchorChange;
         }
-        // Writeback CM Table size changes to DOM Table
-        for (var row = 0; row < table.rows.length; row++) {
-            var tableRow = table.rows[row];
-            for (var col = 0; col < tableRow.cells.length; col++) {
-                var td = tableRow.cells[col];
-                td.style.width = cmTable.widths[col] + 'px';
-                td.style.boxSizing = 'border-box';
+        // Write back CM Table size changes to DOM Table
+        for (var row = 0; row < cmTable.rows.length; row++) {
+            var tableRow = cmTable.rows[row].cells;
+            var lastTd = null;
+            var lastWidth = 0;
+            for (var col = 0; col < tableRow.length; col++) {
+                var td = tableRow[col].cachedElement;
+                if (td) {
+                    td.style.boxSizing = 'border-box';
+                    lastTd = td;
+                    lastWidth = cmTable.widths[col];
+                }
+                else if (lastTd && tableRow[col].spanLeft) {
+                    lastWidth += cmTable.widths[col];
+                }
+                else if (tableRow[col].spanAbove) {
+                    // For span above case, we don't need to adjust width, just clear lastTd and lastWidth
+                    lastTd = null;
+                    lastWidth = 0;
+                }
+                if (lastTd) {
+                    lastTd.style.width = lastWidth + 'px';
+                }
             }
         }
         if (context.originalWidth > 0) {
@@ -41303,8 +41674,8 @@ var createElement_1 = __webpack_require__(/*! ../../../pluginUtils/CreateElement
 var DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
 var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "./packages/roosterjs-content-model-api/lib/index.ts");
 var getTableFromContentModel_1 = __webpack_require__(/*! ../utils/getTableFromContentModel */ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var getNodePositionFromEvent_1 = __webpack_require__(/*! ../../../utils/getNodePositionFromEvent */ "./packages/roosterjs-content-model-plugins/lib/utils/getNodePositionFromEvent.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
 var TABLE_MOVER_LENGTH = 12;
 /**
  * @internal
@@ -41404,7 +41775,7 @@ function onDragStart(context) {
         tag: 'div',
         style: 'position: fixed; user-select: none; border: 1px solid #808080',
     };
-    var tableRect = (0, createElement_1.createElement)(createElementData, document);
+    var tableRect = (0, createElement_1.createElement)(createElementData, editor.getDocument());
     tableRect.style.width = trect.width + "px";
     tableRect.style.height = trect.height + "px";
     tableRect.style.top = trect.top + "px";
@@ -41732,6 +42103,239 @@ function isTableBottomVisible(editor, rect, contentDiv) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableRowColumnSelector.ts":
+/*!***********************************************************************************************************!*\
+  !*** ./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableRowColumnSelector.ts ***!
+  \***********************************************************************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.onDragEnd = exports.onDragging = exports.onDragStart = exports.createTableRowColumnSelector = 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 DragAndDropHelper_1 = __webpack_require__(/*! ../../../pluginUtils/DragAndDrop/DragAndDropHelper */ "./packages/roosterjs-content-model-plugins/lib/pluginUtils/DragAndDrop/DragAndDropHelper.ts");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "./packages/roosterjs-content-model-dom/lib/index.ts");
+var STABLE_DOWN_ARROW_CURSOR = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGV4dCB4PSI4IiB5PSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNCIgZmlsbD0iYmxhY2siPiYjMTI5MDk1OzwvdGV4dD48L3N2Zz4=';
+var STABLE_RIGHT_ARROW_CURSOR = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48dGV4dCB4PSI4IiB5PSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxNCIgZmlsbD0iYmxhY2siIHRyYW5zZm9ybT0icm90YXRlKC05MCA4IDgpIj4mIzEyOTA5NTs8L3RleHQ+PC9zdmc+';
+/**
+ * @internal
+ */
+function createTableRowColumnSelector(editor, table, isRowSelector, anchorContainer, onTableEditorCreated) {
+    var _a;
+    var doc = editor.getDocument();
+    var zoomScale = editor.getDOMHelper().calculateZoomScale();
+    var containerDiv = doc.createElement('div');
+    containerDiv.style.cssText = 'position: fixed; pointer-events: none;';
+    var cells = isRowSelector
+        ? Array.from(table.rows)
+            .map(function (row) { return row.cells[0]; })
+            .filter(function (cell) { return cell; })
+        : Array.from(((_a = table.rows[0]) === null || _a === void 0 ? void 0 : _a.cells) || []);
+    var handlers = [];
+    cells.forEach(function (cell) {
+        var cellRect = (0, roosterjs_content_model_dom_1.normalizeRect)(cell.getBoundingClientRect());
+        if (cellRect) {
+            var createElementData = getInsertElementData(cellRect, isRowSelector);
+            var cellDiv = (0, createElement_1.createElement)(createElementData, doc);
+            containerDiv.appendChild(cellDiv);
+            var context = {
+                table: table,
+                zoomScale: zoomScale,
+                editor: editor,
+                div: cellDiv,
+                isRow: isRowSelector,
+            };
+            var handler = new TableRowColumnSelectorHandler(cellDiv, isRowSelector, context, {
+                onDragStart: onDragStart,
+                onDragging: onDragging,
+                onDragEnd: onDragEnd,
+            }, zoomScale, onTableEditorCreated, editor.getEnvironment().isMobileOrTablet);
+            handlers.push(handler);
+        }
+    });
+    (anchorContainer || doc.body).appendChild(containerDiv);
+    var compositeHandler = {
+        dispose: function () {
+            handlers.forEach(function (h) { return h.dispose(); });
+        },
+    };
+    return { div: containerDiv, featureHandler: compositeHandler, node: table };
+}
+exports.createTableRowColumnSelector = createTableRowColumnSelector;
+var TableRowColumnSelectorHandler = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(TableRowColumnSelectorHandler, _super);
+    function TableRowColumnSelectorHandler(div, isRow, context, handler, zoomScale, onTableEditorCreated, forceMobile) {
+        var _this = _super.call(this, div, context, function () { }, handler, zoomScale, forceMobile) || this;
+        _this.isRow = isRow;
+        _this.disposer = onTableEditorCreated === null || onTableEditorCreated === void 0 ? void 0 : onTableEditorCreated(_this.isRow ? 'TableRowSelector' : 'TableColumnSelector', div);
+        return _this;
+    }
+    TableRowColumnSelectorHandler.prototype.dispose = function () {
+        var _a;
+        (_a = this.disposer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.disposer = undefined;
+    };
+    return TableRowColumnSelectorHandler;
+}(DragAndDropHelper_1.DragAndDropHelper));
+/**
+ * @internal
+ * Helper function to calculate current row/column index from mouse coordinates during drag
+ */
+function getCurrentIndexFromMouse(table, x, y, isRow) {
+    if (isRow) {
+        for (var i = 0; i < table.rows.length; i++) {
+            var row = table.rows[i];
+            for (var j = 0; j < row.cells.length; j++) {
+                var cell = row.cells[j];
+                var cellRect = (0, roosterjs_content_model_dom_1.normalizeRect)(cell.getBoundingClientRect());
+                if (cellRect && y >= cellRect.top && y <= cellRect.bottom) {
+                    return i;
+                }
+            }
+        }
+        return Math.max(0, table.rows.length - 1);
+    }
+    else {
+        if (!table.rows[0]) {
+            return 0;
+        }
+        var firstRow = table.rows[0];
+        for (var i = 0; i < firstRow.cells.length; i++) {
+            var cell = firstRow.cells[i];
+            var cellRect = (0, roosterjs_content_model_dom_1.normalizeRect)(cell.getBoundingClientRect());
+            if (cellRect && x >= cellRect.left && x <= cellRect.right) {
+                return i;
+            }
+        }
+        return firstRow.cells.length - 1;
+    }
+}
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragStart(context, event) {
+    var table = context.table, editor = context.editor, isRow = context.isRow;
+    editor.setDOMSelection(null);
+    var parsedTable = (0, roosterjs_content_model_dom_1.parseTableCells)(table);
+    var startIndex = getCurrentIndexFromMouse(table, event.clientX, event.clientY, isRow);
+    if (isRow) {
+        var columnNumber = parsedTable[startIndex].length - 1;
+        var initialSelection = {
+            type: 'table',
+            table: table,
+            firstRow: startIndex,
+            lastRow: startIndex,
+            firstColumn: 0,
+            lastColumn: columnNumber,
+        };
+        return {
+            cmTable: undefined,
+            initialSelection: initialSelection,
+            parsedTable: parsedTable,
+            startIndex: startIndex,
+        };
+    }
+    else {
+        var rowNumber = parsedTable.length - 1;
+        var initialSelection = {
+            type: 'table',
+            table: table,
+            firstRow: 0,
+            lastRow: rowNumber,
+            firstColumn: startIndex,
+            lastColumn: startIndex,
+        };
+        return {
+            cmTable: undefined,
+            initialSelection: initialSelection,
+            parsedTable: parsedTable,
+            startIndex: startIndex,
+        };
+    }
+}
+exports.onDragStart = onDragStart;
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragging(context, event, initValue) {
+    if (!initValue) {
+        return false;
+    }
+    var table = context.table, editor = context.editor, isRow = context.isRow;
+    var parsedTable = initValue.parsedTable, startIndex = initValue.startIndex;
+    var currentIndex = getCurrentIndexFromMouse(table, event.clientX, event.clientY, isRow);
+    if (isRow) {
+        var columnNumber = parsedTable[startIndex].length - 1;
+        var firstRow = Math.min(startIndex, currentIndex);
+        var lastRow = Math.max(startIndex, currentIndex);
+        editor.setDOMSelection({
+            type: 'table',
+            table: table,
+            firstRow: firstRow,
+            firstColumn: 0,
+            lastRow: lastRow,
+            lastColumn: columnNumber,
+        });
+    }
+    else {
+        var firstColumn = Math.min(startIndex, currentIndex);
+        var lastColumn = Math.max(startIndex, currentIndex);
+        var rowNumber = parsedTable.length - 1;
+        editor.setDOMSelection({
+            type: 'table',
+            table: table,
+            firstRow: 0,
+            firstColumn: firstColumn,
+            lastColumn: lastColumn,
+            lastRow: rowNumber,
+        });
+    }
+    return true;
+}
+exports.onDragging = onDragging;
+/**
+ * @internal
+ * Exported for testing
+ */
+function onDragEnd(context, event, initValue) {
+    if (!initValue) {
+        return false;
+    }
+    var editor = context.editor;
+    var selection = editor.getDOMSelection();
+    if ((selection === null || selection === void 0 ? void 0 : selection.type) !== 'table') {
+        editor.setDOMSelection(initValue.initialSelection);
+    }
+    return true;
+}
+exports.onDragEnd = onDragEnd;
+function getInsertElementData(rect, isRowSelector) {
+    var MIN_DISTANCE_FROM_BOUNDARY = 5;
+    var GAP_FROM_CELL = 5;
+    var cellLength = isRowSelector ? rect.bottom - rect.top : rect.right - rect.left;
+    var maxSelectorSize = Math.max(16, cellLength - MIN_DISTANCE_FROM_BOUNDARY * 2);
+    var SELECTOR_SIZE = cellLength >= 32 ? Math.min(cellLength - 16, maxSelectorSize) : 16;
+    var centerOffset = (cellLength - SELECTOR_SIZE) / 2;
+    var size = isRowSelector
+        ? "width: 5px; height: " + SELECTOR_SIZE + "px; top: " + (rect.top + centerOffset) + "px; left: " + (rect.left - 5 - GAP_FROM_CELL) + "px"
+        : "width: " + SELECTOR_SIZE + "px; height: 5px; top: " + (rect.top - 5 - GAP_FROM_CELL) + "px; left: " + (rect.left + centerOffset) + "px";
+    var cursor = isRowSelector
+        ? "url(\"" + STABLE_RIGHT_ARROW_CURSOR + "\"), auto"
+        : "url(\"" + STABLE_DOWN_ARROW_CURSOR + "\") , auto";
+    var outerDivStyle = "position: fixed; " + size + "; background-color: transparent; cursor: " + cursor + "; pointer-events: auto;";
+    return {
+        tag: 'div',
+        style: outerDivStyle,
+    };
+}
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-content-model-plugins/lib/tableEdit/editors/utils/getTableFromContentModel.ts":
@@ -41754,6 +42358,7 @@ function getCMTableFromTable(editor, table) {
     var context = (0, roosterjs_content_model_dom_1.createDomToModelContext)({
         zoomScale: editor.getDOMHelper().calculateZoomScale(),
         recalculateTableSize: true,
+        allowCacheElement: true, // We need this cache so we can retrieve TD element and update TD width and height when resizing table
     });
     context.elementProcessors.element(model, table, context);
     var firstBlock = model.blocks[0];
@@ -41823,7 +42428,7 @@ var TouchPlugin = /** @class */ (function () {
      */
     TouchPlugin.prototype.onPluginEvent = function (event) {
         var _this = this;
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (!this.editor) {
             return;
         }
@@ -41832,57 +42437,59 @@ var TouchPlugin = /** @class */ (function () {
                 this.isDblClicked = false;
                 this.isTouchPenPointerEvent = true;
                 event.originalEvent.preventDefault();
-                var targetWindow = ((_a = this.editor.getDocument()) === null || _a === void 0 ? void 0 : _a.defaultView) || window;
-                if (this.timer) {
-                    targetWindow.clearTimeout(this.timer);
-                }
-                this.timer = targetWindow.setTimeout(function () {
-                    _this.timer = 0;
-                    if (_this.editor) {
-                        if (!_this.isDblClicked) {
-                            _this.editor.focus();
-                            var caretPosition = (0, getNodePositionFromEvent_1.getNodePositionFromEvent)(_this.editor, event.rawEvent.x, event.rawEvent.y);
-                            var newRange = _this.editor.getDocument().createRange();
-                            if (caretPosition) {
-                                var node = caretPosition.node, offset = caretPosition.offset;
-                                // Place cursor at same position of browser handler by default
-                                newRange.setStart(node, offset);
-                                newRange.setEnd(node, offset);
-                                var nodeTextContent = node.textContent || '';
-                                var charAtSelection = nodeTextContent[offset];
-                                if (node.nodeType === Node.TEXT_NODE &&
-                                    charAtSelection &&
-                                    !SPACE_MATCHING_REGEX.test(charAtSelection) &&
-                                    !PUNCTUATION_MATCHING_REGEX.test(charAtSelection)) {
-                                    var _a = findWordBoundaries(nodeTextContent, offset), wordStart = _a.wordStart, wordEnd = _a.wordEnd;
-                                    // Move cursor to the calculated offset
-                                    var leftCursorWordLength = offset - wordStart;
-                                    var rightCursorWordLength = wordEnd - offset;
-                                    var movingOffset = leftCursorWordLength >= rightCursorWordLength
-                                        ? rightCursorWordLength
-                                        : -leftCursorWordLength;
-                                    movingOffset =
-                                        Math.abs(movingOffset) > MAX_TOUCH_MOVE_DISTANCE
-                                            ? 0
-                                            : movingOffset;
-                                    var newOffsetPosition = offset + movingOffset;
-                                    if (movingOffset !== 0 &&
-                                        nodeTextContent.length >= newOffsetPosition) {
-                                        newRange.setStart(node, newOffsetPosition);
-                                        newRange.setEnd(node, newOffsetPosition);
+                var targetWindow = this.editor.getDocument().defaultView;
+                if (targetWindow) {
+                    if (this.timer) {
+                        targetWindow.clearTimeout(this.timer);
+                    }
+                    this.timer = targetWindow.setTimeout(function () {
+                        _this.timer = 0;
+                        if (_this.editor) {
+                            if (!_this.isDblClicked) {
+                                _this.editor.focus();
+                                var caretPosition = (0, getNodePositionFromEvent_1.getNodePositionFromEvent)(_this.editor, event.rawEvent.x, event.rawEvent.y);
+                                var newRange = _this.editor.getDocument().createRange();
+                                if (caretPosition) {
+                                    var node = caretPosition.node, offset = caretPosition.offset;
+                                    // Place cursor at same position of browser handler by default
+                                    newRange.setStart(node, offset);
+                                    newRange.setEnd(node, offset);
+                                    var nodeTextContent = node.textContent || '';
+                                    var charAtSelection = nodeTextContent[offset];
+                                    if (node.nodeType === Node.TEXT_NODE &&
+                                        charAtSelection &&
+                                        !SPACE_MATCHING_REGEX.test(charAtSelection) &&
+                                        !PUNCTUATION_MATCHING_REGEX.test(charAtSelection)) {
+                                        var _a = findWordBoundaries(nodeTextContent, offset), wordStart = _a.wordStart, wordEnd = _a.wordEnd;
+                                        // Move cursor to the calculated offset
+                                        var leftCursorWordLength = offset - wordStart;
+                                        var rightCursorWordLength = wordEnd - offset;
+                                        var movingOffset = leftCursorWordLength >= rightCursorWordLength
+                                            ? rightCursorWordLength
+                                            : -leftCursorWordLength;
+                                        movingOffset =
+                                            Math.abs(movingOffset) > MAX_TOUCH_MOVE_DISTANCE
+                                                ? 0
+                                                : movingOffset;
+                                        var newOffsetPosition = offset + movingOffset;
+                                        if (movingOffset !== 0 &&
+                                            nodeTextContent.length >= newOffsetPosition) {
+                                            newRange.setStart(node, newOffsetPosition);
+                                            newRange.setEnd(node, newOffsetPosition);
+                                        }
                                     }
                                 }
+                                _this.editor.setDOMSelection({
+                                    type: 'range',
+                                    range: newRange,
+                                    isReverted: false,
+                                });
+                                // reset values
+                                _this.isTouchPenPointerEvent = false;
                             }
-                            _this.editor.setDOMSelection({
-                                type: 'range',
-                                range: newRange,
-                                isReverted: false,
-                            });
-                            // reset values
-                            _this.isTouchPenPointerEvent = false;
                         }
-                    }
-                }, POINTER_DETECTION_DELAY);
+                    }, POINTER_DETECTION_DELAY);
+                }
                 break;
             case 'doubleClick':
                 if (this.isTouchPenPointerEvent) {
@@ -41898,7 +42505,7 @@ var TouchPlugin = /** @class */ (function () {
                         var char = nodeTextContent.charAt(offset);
                         // Check if the clicked character is a punctuation mark, then highlight that character only
                         if (PUNCTUATION_MATCHING_REGEX.test(char)) {
-                            var newRange = (_b = this.editor.getDocument()) === null || _b === void 0 ? void 0 : _b.createRange();
+                            var newRange = (_a = this.editor.getDocument()) === null || _a === void 0 ? void 0 : _a.createRange();
                             if (newRange) {
                                 newRange.setStart(node, offset);
                                 newRange.setEnd(node, offset + 1);
@@ -41920,7 +42527,7 @@ var TouchPlugin = /** @class */ (function () {
                                     SPACE_MATCHING_REGEX.test(nodeTextContent.charAt(start - 1))) {
                                     start--;
                                 }
-                                var newRange = (_c = this.editor.getDocument()) === null || _c === void 0 ? void 0 : _c.createRange();
+                                var newRange = (_b = this.editor.getDocument()) === null || _b === void 0 ? void 0 : _b.createRange();
                                 if (newRange) {
                                     newRange.setStart(node, start);
                                     newRange.setEnd(node, start + 1);
@@ -41933,8 +42540,8 @@ var TouchPlugin = /** @class */ (function () {
                             }
                         }
                         else {
-                            var _e = findWordBoundaries(nodeTextContent, offset), wordStart = _e.wordStart, wordEnd = _e.wordEnd;
-                            var newRange = (_d = this.editor.getDocument()) === null || _d === void 0 ? void 0 : _d.createRange();
+                            var _d = findWordBoundaries(nodeTextContent, offset), wordStart = _d.wordStart, wordEnd = _d.wordEnd;
+                            var newRange = (_c = this.editor.getDocument()) === null || _c === void 0 ? void 0 : _c.createRange();
                             if (newRange) {
                                 newRange.setStart(node, wordStart);
                                 newRange.setEnd(node, wordEnd);