roosterjs 8.16.0 → 8.17.0

package/dist/rooster-amd.js

@@ -3017,6 +3017,7 @@ exports.default = rotateElement;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/roosterjs-editor-api/lib/utils/execCommand.ts");
+var roosterjs_editor_dom_1 = __webpack_require__(/*! roosterjs-editor-dom */ "./packages/roosterjs-editor-dom/lib/index.ts");
 /**
  * Set content alignment
  * @param editor The editor instance
@@ -3024,8 +3025,52 @@ var execCommand_1 = __webpack_require__(/*! ../utils/execCommand */ "./packages/
  * Alignment.Center, Alignment.Left, Alignment.Right
  */
 function setAlignment(editor, alignment) {
-    var command = "justifyLeft" /* JustifyLeft */;
+    var selection = editor.getSelectionRangeEx();
+    var isATable = selection && selection.type === 1 /* TableSelection */;
+    editor.addUndoSnapshot(function () {
+        if (editor.isFeatureEnabled("TableAlignment" /* TableAlignment */) &&
+            isATable &&
+            isWholeTableSelected(selection)) {
+            alignTable(selection, alignment);
+        }
+        else {
+            alignText(editor, alignment);
+        }
+    }, "Format" /* Format */);
+}
+exports.default = setAlignment;
+/**
+ * Align text using the margins
+ * @param editor
+ * @param element
+ * @param alignment
+ * @param addUndoSnapshot
+ * @returns
+ */
+function alignTable(selection, alignment) {
+    var table = selection.table;
+    if (alignment == 1 /* Center */) {
+        table.style.marginLeft = 'auto';
+        table.style.marginRight = 'auto';
+    }
+    else if (alignment == 2 /* Right */) {
+        table.style.marginLeft = 'auto';
+        table.style.marginRight = '';
+    }
+    else {
+        table.style.marginLeft = '';
+        table.style.marginRight = 'auto';
+    }
+}
+/**
+ * Align text using the text-align
+ * @param editor
+ * @param alignment
+ * @returns
+ */
+function alignText(editor, alignment) {
     var align = 'left';
+    var command = "justifyLeft" /* JustifyLeft */;
     if (alignment == 1 /* Center */) {
         command = "justifyCenter" /* JustifyCenter */;
         align = 'center';
@@ -3034,12 +3079,28 @@ function setAlignment(editor, alignment) {
         command = "justifyRight" /* JustifyRight */;
         align = 'right';
     }
-    editor.addUndoSnapshot(function () {
-        (0, execCommand_1.default)(editor, command);
-        editor.queryElements('[align]', 1 /* OnSelection */, function (node) { return (node.style.textAlign = align); });
-    }, "Format" /* Format */);
+    (0, execCommand_1.default)(editor, command);
+    editor.queryElements('[align]', 1 /* OnSelection */, function (node) { return (node.style.textAlign = align); });
+}
+/**
+ * Check if the whole table is selected
+ * @param selection
+ * @returns
+ */
+function isWholeTableSelected(selection) {
+    if (!selection) {
+        return false;
+    }
+    var vTable = new roosterjs_editor_dom_1.VTable(selection.table);
+    var _a = selection.coordinates, firstCell = _a.firstCell, lastCell = _a.lastCell;
+    var rowsLength = vTable.cells.length - 1;
+    var colIndex = vTable.cells[rowsLength].length - 1;
+    var firstX = firstCell.x;
+    var firstY = firstCell.y;
+    var lastX = lastCell.x;
+    var lastY = lastCell.y;
+    return firstX == 0 && firstY == 0 && lastX == colIndex && lastY == rowsLength;
 }
-exports.default = setAlignment;
 
 
 /***/ }),
@@ -3848,6 +3909,8 @@ function editTable(editor, operation) {
             var vtable = new roosterjs_editor_dom_1.VTable(td);
             vtable.edit(operation);
             vtable.writeBack();
+            //Adding replaceNode to transform color when the theme is switched to dark.
+            editor.replaceNode(vtable.table, vtable.table, true /**transformColorForDarkMode*/);
             editor.focus();
             var cellToSelect = calculateCellToSelect(operation, vtable.row, vtable.col);
             editor.select(vtable.getCell(cellToSelect.newRow, cellToSelect.newCol).td, 0 /* Begin */);
@@ -3907,6 +3970,8 @@ function formatTable(editor, format, table) {
             var vtable = new roosterjs_editor_dom_1.VTable(table);
             vtable.applyFormat(format);
             vtable.writeBack();
+            //Adding replaceNode to transform color when the theme is switched to dark.
+            editor.replaceNode(vtable.table, vtable.table, true /**transformColorForDarkMode*/);
             editor.focus();
             editor.select(start, end);
         }, "Format" /* Format */);
@@ -5675,7 +5740,8 @@ var switchShadowEdit = function (core, isOn) {
             var range = core.api.getSelectionRange(core, true /*tryGetFromCache*/);
             shadowEditSelectionPath = range && (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range);
             shadowEditTableSelectionPath =
-                selection && selection.ranges.map(function (range) { return (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range); });
+                (selection === null || selection === void 0 ? void 0 : selection.type) == 1 /* TableSelection */ &&
+                    selection.ranges.map(function (range) { return (0, roosterjs_editor_dom_1.getSelectionPath)(contentDiv, range); });
             shadowEditFragment = core.contentDiv.ownerDocument.createDocumentFragment();
             (0, roosterjs_editor_dom_1.moveChildNodes)(shadowEditFragment, contentDiv);
             shadowEditFragment.normalize();
@@ -13933,7 +13999,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var applyTableFormat_1 = __webpack_require__(/*! ../utils/applyTableFormat */ "./packages/roosterjs-editor-dom/lib/utils/applyTableFormat.ts");
+var applyTableFormat_1 = __webpack_require__(/*! ./applyTableFormat */ "./packages/roosterjs-editor-dom/lib/table/applyTableFormat.ts");
 var moveChildNodes_1 = __webpack_require__(/*! ../utils/moveChildNodes */ "./packages/roosterjs-editor-dom/lib/utils/moveChildNodes.ts");
 var normalizeRect_1 = __webpack_require__(/*! ../utils/normalizeRect */ "./packages/roosterjs-editor-dom/lib/utils/normalizeRect.ts");
 var safeInstanceOf_1 = __webpack_require__(/*! ../utils/safeInstanceOf */ "./packages/roosterjs-editor-dom/lib/utils/safeInstanceOf.ts");
@@ -14004,8 +14070,10 @@ var VTable = /** @class */ (function () {
     }
     /**
      * Write the virtual table back to DOM tree to represent the change of VTable
+     * @param skipApplyFormat Do not reapply table format when write back.
+     * Only use this parameter when you are pretty sure there is no format or table structure change during the process.
      */
-    VTable.prototype.writeBack = function () {
+    VTable.prototype.writeBack = function (skipApplyFormat) {
         var _this = this;
         if (this.cells) {
             (0, moveChildNodes_1.default)(this.table);
@@ -14019,7 +14087,7 @@ var VTable = /** @class */ (function () {
                     }
                 });
             });
-            if (this.formatInfo) {
+            if (this.formatInfo && !skipApplyFormat) {
                 (0, tableFormatInfo_1.saveTableInfo)(this.table, this.formatInfo);
                 (0, applyTableFormat_1.default)(this.table, this.cells, this.formatInfo);
             }
@@ -14040,7 +14108,7 @@ var VTable = /** @class */ (function () {
         this.deleteCellShadeDataset(this.cells);
     };
     /**
-     * Remove the cellshade dataset to apply a new style format at the cell.
+     * Remove the cellShade dataset to apply a new style format at the cell.
      * @param cells
      */
     VTable.prototype.deleteCellShadeDataset = function (cells) {
@@ -14472,224 +14540,9 @@ function cloneNode(node) {
 
 /***/ }),
 
-/***/ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts":
-/*!********************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts ***!
-  \********************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveTableInfo = exports.getTableFormatInfo = void 0;
-var TABLE_STYLE_INFO = 'roosterTableInfo';
-/**
- * @internal
- * Get the format info of a table
- * If the table does not have a info saved, it will be retrieved from the css styles
- * @param table The table that has the info
- */
-function getTableFormatInfo(table) {
-    var obj = safeParseJSON(table === null || table === void 0 ? void 0 : table.dataset[TABLE_STYLE_INFO]);
-    return checkIfTableFormatIsValid(obj) ? obj : null;
-}
-exports.getTableFormatInfo = getTableFormatInfo;
-/**
- * @internal
- * Save the format info of a table
- * @param table The table the info will be saved
- * @param format The format of the table
- */
-function saveTableInfo(table, format) {
-    if (table && format) {
-        table.dataset[TABLE_STYLE_INFO] = JSON.stringify(format);
-    }
-}
-exports.saveTableInfo = saveTableInfo;
-function checkIfTableFormatIsValid(format) {
-    if (!format) {
-        return false;
-    }
-    var topBorderColor = format.topBorderColor, verticalBorderColor = format.verticalBorderColor, bottomBorderColor = format.bottomBorderColor, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven, hasBandedColumns = format.hasBandedColumns, hasBandedRows = format.hasBandedRows, hasFirstColumn = format.hasFirstColumn, hasHeaderRow = format.hasHeaderRow, tableBorderFormat = format.tableBorderFormat;
-    var colorsValues = [
-        topBorderColor,
-        verticalBorderColor,
-        bottomBorderColor,
-        bgColorOdd,
-        bgColorEven,
-    ];
-    var stateValues = [hasBandedColumns, hasBandedRows, hasFirstColumn, hasHeaderRow];
-    if (colorsValues.some(function (key) { return !isAValidColor(key); }) ||
-        stateValues.some(function (key) { return !isBoolean(key); }) ||
-        !isAValidTableBorderType(tableBorderFormat)) {
-        return false;
-    }
-    return true;
-}
-function isAValidColor(color) {
-    if (color === null || color === undefined || typeof color === 'string') {
-        return true;
-    }
-    return false;
-}
-function isBoolean(a) {
-    if (typeof a === 'boolean') {
-        return true;
-    }
-    return false;
-}
-function isAValidTableBorderType(border) {
-    if (-1 < border && border < 8) {
-        return true;
-    }
-    return false;
-}
-function safeParseJSON(json) {
-    if (!json) {
-        return null;
-    }
-    try {
-        return JSON.parse(json);
-    }
-    catch (_a) {
-        return null;
-    }
-}
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts":
-/*!************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/Browser.ts ***!
-  \************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Browser = exports.getBrowserInfo = void 0;
-var isAndroidRegex = /android/i;
-/**
- * Get current browser information from user agent string
- * @param userAgent The userAgent string of a browser
- * @param appVersion The appVersion string of a browser
- * @returns The BrowserInfo object calculated from the given userAgent and appVersion
- */
-function getBrowserInfo(userAgent, appVersion) {
-    // checks whether the browser is running in IE
-    // IE11 will use rv in UA instead of MSIE. Unfortunately Firefox also uses this. We should also look for "Trident" to confirm this.
-    // There have been cases where companies using older version of IE and custom UserAgents have broken this logic (e.g. IE 10 and KellyServices)
-    // therefore we should check that the Trident/rv combo is not just from an older IE browser
-    var isIE11OrGreater = userAgent.indexOf('rv:') != -1 && userAgent.indexOf('Trident') != -1;
-    var isIE = userAgent.indexOf('MSIE') != -1 || isIE11OrGreater;
-    // IE11+ may also have 'Chrome', 'Firefox' and 'Safari' in user agent. But it will have 'trident' as well
-    var isChrome = false;
-    var isFirefox = false;
-    var isSafari = false;
-    var isEdge = false;
-    var isWebKit = userAgent.indexOf('WebKit') != -1;
-    if (!isIE) {
-        isChrome = userAgent.indexOf('Chrome') != -1;
-        isFirefox = userAgent.indexOf('Firefox') != -1;
-        if (userAgent.indexOf('Safari') != -1) {
-            // Android and Chrome have Safari in the user string
-            isSafari = userAgent.indexOf('Chrome') == -1 && userAgent.indexOf('Android') == -1;
-        }
-        // Sample Edge UA: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10121
-        isEdge = userAgent.indexOf('Edge') != -1;
-        // When it is edge, it should not be chrome or firefox. and it is also not webkit
-        if (isEdge) {
-            isWebKit = isChrome = isFirefox = false;
-        }
-    }
-    var isMac = appVersion.indexOf('Mac') != -1;
-    var isWin = appVersion.indexOf('Win') != -1 || appVersion.indexOf('NT') != -1;
-    var isAndroid = isAndroidRegex.test(userAgent);
-    return {
-        isMac: isMac,
-        isWin: isWin,
-        isWebKit: isWebKit,
-        isIE: isIE,
-        isIE11OrGreater: isIE11OrGreater,
-        isSafari: isSafari,
-        isChrome: isChrome,
-        isFirefox: isFirefox,
-        isEdge: isEdge,
-        isIEOrEdge: isIE || isEdge,
-        isAndroid: isAndroid,
-    };
-}
-exports.getBrowserInfo = getBrowserInfo;
-/**
- * Browser object contains browser and operating system information of current environment
- */
-exports.Browser = window
-    ? getBrowserInfo(window.navigator.userAgent, window.navigator.appVersion)
-    : {};
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/applyFormat.ts":
-/*!****************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/applyFormat.ts ***!
-  \****************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var setColor_1 = __webpack_require__(/*! ./setColor */ "./packages/roosterjs-editor-dom/lib/utils/setColor.ts");
-/**
- * Apply format to an HTML element
- * @param element The HTML element to apply format to
- * @param format The format to apply
- */
-function applyFormat(element, format, isDarkMode) {
-    if (format) {
-        var elementStyle = element.style;
-        var fontFamily = format.fontFamily, fontSize = format.fontSize, textColor = format.textColor, textColors = format.textColors, backgroundColor = format.backgroundColor, backgroundColors = format.backgroundColors, bold = format.bold, italic = format.italic, underline = format.underline;
-        if (fontFamily) {
-            elementStyle.fontFamily = fontFamily;
-        }
-        if (fontSize) {
-            elementStyle.fontSize = fontSize;
-        }
-        if (textColors) {
-            (0, setColor_1.default)(element, textColors, false /*isBackground*/, isDarkMode);
-        }
-        else if (textColor) {
-            (0, setColor_1.default)(element, textColor, false /*isBackground*/, isDarkMode);
-        }
-        if (backgroundColors) {
-            (0, setColor_1.default)(element, backgroundColors, true /*isBackground*/, isDarkMode);
-        }
-        else if (backgroundColor) {
-            (0, setColor_1.default)(element, backgroundColor, true /*isBackground*/, isDarkMode);
-        }
-        if (bold) {
-            elementStyle.fontWeight = 'bold';
-        }
-        if (italic) {
-            elementStyle.fontStyle = 'italic';
-        }
-        if (underline) {
-            elementStyle.textDecoration = 'underline';
-        }
-    }
-}
-exports.default = applyFormat;
-
-
-/***/ }),
-
-/***/ "./packages/roosterjs-editor-dom/lib/utils/applyTableFormat.ts":
+/***/ "./packages/roosterjs-editor-dom/lib/table/applyTableFormat.ts":
 /*!*********************************************************************!*\
-  !*** ./packages/roosterjs-editor-dom/lib/utils/applyTableFormat.ts ***!
+  !*** ./packages/roosterjs-editor-dom/lib/table/applyTableFormat.ts ***!
   \*********************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
@@ -14697,7 +14550,8 @@ exports.default = applyFormat;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var changeElementTag_1 = __webpack_require__(/*! ./changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
+var changeElementTag_1 = __webpack_require__(/*! ../utils/changeElementTag */ "./packages/roosterjs-editor-dom/lib/utils/changeElementTag.ts");
+var setColor_1 = __webpack_require__(/*! ../utils/setColor */ "./packages/roosterjs-editor-dom/lib/utils/setColor.ts");
 var TRANSPARENT = 'transparent';
 var TABLE_CELL_TAG_NAME = 'TD';
 var TABLE_HEADER_TAG_NAME = 'TH';
@@ -14713,7 +14567,7 @@ function applyTableFormat(table, cells, format) {
     }
     table.style.borderCollapse = 'collapse';
     setBordersType(cells, format);
-    setColor(cells, format);
+    setCellColor(cells, format);
     setFirstColumnFormat(cells, format);
     setHeaderRowFormat(cells, format);
 }
@@ -14734,7 +14588,7 @@ function hasCellShade(cell) {
  * Set color to the table
  * @param format the format that must be applied
  */
-function setColor(cells, format) {
+function setCellColor(cells, format) {
     var color = function (index) { return (index % 2 === 0 ? format.bgColorEven : format.bgColorOdd); };
     var hasBandedRows = format.hasBandedRows, hasBandedColumns = format.hasBandedColumns, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven;
     var shouldColorWholeTable = !hasBandedRows && bgColorOdd === bgColorEven ? true : false;
@@ -14743,13 +14597,13 @@ function setColor(cells, format) {
             if (cell.td && !hasCellShade(cell)) {
                 if (hasBandedRows) {
                     var backgroundColor = color(index);
-                    cell.td.style.backgroundColor = backgroundColor || TRANSPARENT;
+                    (0, setColor_1.default)(cell.td, backgroundColor || TRANSPARENT, true /** isBackgroundColor*/);
                 }
                 else if (shouldColorWholeTable) {
-                    cell.td.style.backgroundColor = format.bgColorOdd || TRANSPARENT;
+                    (0, setColor_1.default)(cell.td, format.bgColorOdd || TRANSPARENT, true /** isBackgroundColor*/);
                 }
                 else {
-                    cell.td.style.backgroundColor = TRANSPARENT;
+                    (0, setColor_1.default)(cell.td, TRANSPARENT, true /** isBackgroundColor*/);
                 }
             }
         });
@@ -14759,7 +14613,7 @@ function setColor(cells, format) {
             row.forEach(function (cell, index) {
                 var backgroundColor = color(index);
                 if (cell.td && backgroundColor && !hasCellShade(cell)) {
-                    cell.td.style.backgroundColor = backgroundColor;
+                    (0, setColor_1.default)(cell.td, backgroundColor, true /** isBackgroundColor*/);
                 }
             });
         });
@@ -14926,7 +14780,7 @@ function setFirstColumnFormat(cells, format) {
             if (cell.td && cellIndex === 0) {
                 if (rowIndex !== 0) {
                     cell.td.style.borderTopColor = TRANSPARENT;
-                    cell.td.style.backgroundColor = TRANSPARENT;
+                    (0, setColor_1.default)(cell.td, TRANSPARENT, true /** isBackgroundColor*/);
                 }
                 if (rowIndex !== cells.length - 1 && rowIndex !== 0) {
                     cell.td.style.borderBottomColor = TRANSPARENT;
@@ -14955,7 +14809,7 @@ function setHeaderRowFormat(cells, format) {
     }
     (_b = cells[0]) === null || _b === void 0 ? void 0 : _b.forEach(function (cell) {
         if (cell.td && format.headerRowColor) {
-            cell.td.style.backgroundColor = format.headerRowColor;
+            (0, setColor_1.default)(cell.td, format.headerRowColor, true /** isBackgroundColor*/);
             cell.td.style.borderRightColor = format.headerRowColor;
             cell.td.style.borderLeftColor = format.headerRowColor;
             cell.td.style.borderTopColor = format.headerRowColor;
@@ -14970,6 +14824,221 @@ function getBorderStyle(style) {
 }
 
 
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts":
+/*!********************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/table/tableFormatInfo.ts ***!
+  \********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveTableInfo = exports.getTableFormatInfo = void 0;
+var TABLE_STYLE_INFO = 'roosterTableInfo';
+/**
+ * @internal
+ * Get the format info of a table
+ * If the table does not have a info saved, it will be retrieved from the css styles
+ * @param table The table that has the info
+ */
+function getTableFormatInfo(table) {
+    var obj = safeParseJSON(table === null || table === void 0 ? void 0 : table.dataset[TABLE_STYLE_INFO]);
+    return checkIfTableFormatIsValid(obj) ? obj : null;
+}
+exports.getTableFormatInfo = getTableFormatInfo;
+/**
+ * @internal
+ * Save the format info of a table
+ * @param table The table the info will be saved
+ * @param format The format of the table
+ */
+function saveTableInfo(table, format) {
+    if (table && format) {
+        table.dataset[TABLE_STYLE_INFO] = JSON.stringify(format);
+    }
+}
+exports.saveTableInfo = saveTableInfo;
+function checkIfTableFormatIsValid(format) {
+    if (!format) {
+        return false;
+    }
+    var topBorderColor = format.topBorderColor, verticalBorderColor = format.verticalBorderColor, bottomBorderColor = format.bottomBorderColor, bgColorOdd = format.bgColorOdd, bgColorEven = format.bgColorEven, hasBandedColumns = format.hasBandedColumns, hasBandedRows = format.hasBandedRows, hasFirstColumn = format.hasFirstColumn, hasHeaderRow = format.hasHeaderRow, tableBorderFormat = format.tableBorderFormat;
+    var colorsValues = [
+        topBorderColor,
+        verticalBorderColor,
+        bottomBorderColor,
+        bgColorOdd,
+        bgColorEven,
+    ];
+    var stateValues = [hasBandedColumns, hasBandedRows, hasFirstColumn, hasHeaderRow];
+    if (colorsValues.some(function (key) { return !isAValidColor(key); }) ||
+        stateValues.some(function (key) { return !isBoolean(key); }) ||
+        !isAValidTableBorderType(tableBorderFormat)) {
+        return false;
+    }
+    return true;
+}
+function isAValidColor(color) {
+    if (color === null || color === undefined || typeof color === 'string') {
+        return true;
+    }
+    return false;
+}
+function isBoolean(a) {
+    if (typeof a === 'boolean') {
+        return true;
+    }
+    return false;
+}
+function isAValidTableBorderType(border) {
+    if (-1 < border && border < 8) {
+        return true;
+    }
+    return false;
+}
+function safeParseJSON(json) {
+    if (!json) {
+        return null;
+    }
+    try {
+        return JSON.parse(json);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/Browser.ts":
+/*!************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/Browser.ts ***!
+  \************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Browser = exports.getBrowserInfo = void 0;
+var isAndroidRegex = /android/i;
+/**
+ * Get current browser information from user agent string
+ * @param userAgent The userAgent string of a browser
+ * @param appVersion The appVersion string of a browser
+ * @returns The BrowserInfo object calculated from the given userAgent and appVersion
+ */
+function getBrowserInfo(userAgent, appVersion) {
+    // checks whether the browser is running in IE
+    // IE11 will use rv in UA instead of MSIE. Unfortunately Firefox also uses this. We should also look for "Trident" to confirm this.
+    // There have been cases where companies using older version of IE and custom UserAgents have broken this logic (e.g. IE 10 and KellyServices)
+    // therefore we should check that the Trident/rv combo is not just from an older IE browser
+    var isIE11OrGreater = userAgent.indexOf('rv:') != -1 && userAgent.indexOf('Trident') != -1;
+    var isIE = userAgent.indexOf('MSIE') != -1 || isIE11OrGreater;
+    // IE11+ may also have 'Chrome', 'Firefox' and 'Safari' in user agent. But it will have 'trident' as well
+    var isChrome = false;
+    var isFirefox = false;
+    var isSafari = false;
+    var isEdge = false;
+    var isWebKit = userAgent.indexOf('WebKit') != -1;
+    if (!isIE) {
+        isChrome = userAgent.indexOf('Chrome') != -1;
+        isFirefox = userAgent.indexOf('Firefox') != -1;
+        if (userAgent.indexOf('Safari') != -1) {
+            // Android and Chrome have Safari in the user string
+            isSafari = userAgent.indexOf('Chrome') == -1 && userAgent.indexOf('Android') == -1;
+        }
+        // Sample Edge UA: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10121
+        isEdge = userAgent.indexOf('Edge') != -1;
+        // When it is edge, it should not be chrome or firefox. and it is also not webkit
+        if (isEdge) {
+            isWebKit = isChrome = isFirefox = false;
+        }
+    }
+    var isMac = appVersion.indexOf('Mac') != -1;
+    var isWin = appVersion.indexOf('Win') != -1 || appVersion.indexOf('NT') != -1;
+    var isAndroid = isAndroidRegex.test(userAgent);
+    return {
+        isMac: isMac,
+        isWin: isWin,
+        isWebKit: isWebKit,
+        isIE: isIE,
+        isIE11OrGreater: isIE11OrGreater,
+        isSafari: isSafari,
+        isChrome: isChrome,
+        isFirefox: isFirefox,
+        isEdge: isEdge,
+        isIEOrEdge: isIE || isEdge,
+        isAndroid: isAndroid,
+    };
+}
+exports.getBrowserInfo = getBrowserInfo;
+/**
+ * Browser object contains browser and operating system information of current environment
+ */
+exports.Browser = window
+    ? getBrowserInfo(window.navigator.userAgent, window.navigator.appVersion)
+    : {};
+
+
+/***/ }),
+
+/***/ "./packages/roosterjs-editor-dom/lib/utils/applyFormat.ts":
+/*!****************************************************************!*\
+  !*** ./packages/roosterjs-editor-dom/lib/utils/applyFormat.ts ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var setColor_1 = __webpack_require__(/*! ./setColor */ "./packages/roosterjs-editor-dom/lib/utils/setColor.ts");
+/**
+ * Apply format to an HTML element
+ * @param element The HTML element to apply format to
+ * @param format The format to apply
+ */
+function applyFormat(element, format, isDarkMode) {
+    if (format) {
+        var elementStyle = element.style;
+        var fontFamily = format.fontFamily, fontSize = format.fontSize, textColor = format.textColor, textColors = format.textColors, backgroundColor = format.backgroundColor, backgroundColors = format.backgroundColors, bold = format.bold, italic = format.italic, underline = format.underline;
+        if (fontFamily) {
+            elementStyle.fontFamily = fontFamily;
+        }
+        if (fontSize) {
+            elementStyle.fontSize = fontSize;
+        }
+        if (textColors) {
+            (0, setColor_1.default)(element, textColors, false /*isBackground*/, isDarkMode);
+        }
+        else if (textColor) {
+            (0, setColor_1.default)(element, textColor, false /*isBackground*/, isDarkMode);
+        }
+        if (backgroundColors) {
+            (0, setColor_1.default)(element, backgroundColors, true /*isBackground*/, isDarkMode);
+        }
+        else if (backgroundColor) {
+            (0, setColor_1.default)(element, backgroundColor, true /*isBackground*/, isDarkMode);
+        }
+        if (bold) {
+            elementStyle.fontWeight = 'bold';
+        }
+        if (italic) {
+            elementStyle.fontStyle = 'italic';
+        }
+        if (underline) {
+            elementStyle.textDecoration = 'underline';
+        }
+    }
+}
+exports.default = applyFormat;
+
+
 /***/ }),
 
 /***/ "./packages/roosterjs-editor-dom/lib/utils/arrayPush.ts":
@@ -22154,11 +22223,12 @@ var TableCellSelection = /** @class */ (function () {
                     if (selection.type == 1 /* TableSelection */) {
                         this.tableRange = selection.coordinates;
                         this.firstTable = selection.table;
+                        this.tableSelection = true;
                         this.editor.select(selection.table, null);
                     }
                     break;
                 case 18 /* LeavingShadowEdit */:
-                    if (this.firstTable && this.tableRange) {
+                    if (this.firstTable && this.tableSelection && this.tableRange) {
                         var table = this.editor.queryElements('#' + this.firstTable.id);
                         if (table.length == 1) {
                             this.firstTable = table[0];
@@ -22310,6 +22380,7 @@ var TableCellSelection = /** @class */ (function () {
                     : -3 /* After */);
                 var sel = this.editor.getDocument().defaultView.getSelection();
                 var anchorNode = sel.anchorNode, anchorOffset = sel.anchorOffset;
+                this.editor.select(sel.getRangeAt(0));
                 sel.setBaseAndExtent(anchorNode, anchorOffset, position.node, position.offset);
                 this.lastTarget = position.node;
                 event.rawEvent.preventDefault();
@@ -22942,7 +23013,7 @@ function createCellResizer(td, zoomScale, isRTL, isHorizontal, onStart, onEnd) {
     return { node: td, div: div, featureHandler: featureHandler };
 }
 exports.default = createCellResizer;
-function onDragStart(context, event) {
+function onDragStart(context) {
     var td = context.td, isRTL = context.isRTL, zoomScale = context.zoomScale, onStart = context.onStart;
     var vTable = new roosterjs_editor_dom_1.VTable(td, true /*normalizeSize*/, zoomScale);
     var rect = (0, roosterjs_editor_dom_1.normalizeRect)(td.getBoundingClientRect());
@@ -22971,10 +23042,11 @@ function onDraggingHorizontal(context, event, initValue, deltaX, deltaY) {
             cell.td.style.height = cell.td == td ? cell.height / zoomScale + deltaY + "px" : null;
         }
     });
-    vTable.writeBack();
+    // To avoid apply format styles when the table is being resizing, the skipApplyFormat is set to true.
+    vTable.writeBack(true /**skipApplyFormat*/);
     return true;
 }
-function onDraggingVertical(context, event, initValue, deltaX, deltaY) {
+function onDraggingVertical(context, event, initValue) {
     var isRTL = context.isRTL, zoomScale = context.zoomScale;
     var vTable = initValue.vTable, nextCells = initValue.nextCells, currentCells = initValue.currentCells;
     if (!canResizeColumns(event.pageX, currentCells, nextCells, isRTL, zoomScale)) {
@@ -23010,7 +23082,8 @@ function onDraggingVertical(context, event, initValue, deltaX, deltaY) {
             td.style.width = null;
         });
     }
-    vTable.writeBack();
+    // To avoid apply format styles when the table is being resizing, the skipApplyFormat is set to true.
+    vTable.writeBack(true /**skipApplyFormat*/);
     return true;
 }
 function getHorizontalDistance(rect, pos, toLeft) {
@@ -23125,14 +23198,18 @@ var TableEditor = /** @class */ (function () {
         this.table = table;
         this.onChanged = onChanged;
         this.onFinishEditing = function () {
+            _this.editor.focus();
             _this.editor.select(_this.start, _this.end);
             _this.editor.addUndoSnapshot(null /*callback*/, "Format" /* Format */);
-            _this.editor.focus();
             _this.onChanged();
             return false;
         };
+        this.onStartTableResize = function () {
+            _this.onStartResize();
+        };
         this.onStartCellResize = function () {
             _this.disposeTableResizer();
+            _this.onStartResize();
         };
         this.onInserted = function () {
             _this.disposeTableResizer();
@@ -23163,12 +23240,8 @@ var TableEditor = /** @class */ (function () {
             }
         };
         this.isRTL = (0, roosterjs_editor_dom_1.getComputedStyle)(table, 'direction') == 'rtl';
-        this.tableResizer = (0, TableResizer_1.default)(table, editor.getZoomScale(), this.isRTL, this.onFinishEditing);
+        this.tableResizer = (0, TableResizer_1.default)(table, editor.getZoomScale(), this.isRTL, this.onStartTableResize, this.onFinishEditing);
         this.tableSelector = (0, TableSelector_1.default)(table, editor.getZoomScale(), this.onSelect);
-        this.editor.addUndoSnapshot(function (start, end) {
-            _this.start = start;
-            _this.end = end;
-        });
     }
     TableEditor.prototype.dispose = function () {
         this.disposeTableResizer();
@@ -23272,6 +23345,14 @@ var TableEditor = /** @class */ (function () {
             this.tableSelector = null;
         }
     };
+    TableEditor.prototype.onStartResize = function () {
+        var range = this.editor.getSelectionRange();
+        if (range) {
+            this.start = roosterjs_editor_dom_1.Position.getStart(range);
+            this.end = roosterjs_editor_dom_1.Position.getEnd(range);
+        }
+        this.editor.addUndoSnapshot();
+    };
     return TableEditor;
 }());
 exports.default = TableEditor;
@@ -23344,29 +23425,31 @@ function createTableInserter(editor, td, isRTL, isHorizontal, onInsert) {
             div.firstChild.style.height = tableRect.bottom - tableRect.top + "px";
         }
         document_1.body.appendChild(div);
-        var handler = new TableInsertHandler(div, td, isHorizontal, editor.getZoomScale(), onInsert);
+        var handler = new TableInsertHandler(div, td, isHorizontal, editor, onInsert);
         return { div: div, featureHandler: handler, node: td };
     }
 }
 exports.default = createTableInserter;
 var TableInsertHandler = /** @class */ (function () {
-    function TableInsertHandler(div, td, isHorizontal, zoomScale, onInsert) {
+    function TableInsertHandler(div, td, isHorizontal, editor, onInsert) {
         var _this = this;
         this.div = div;
         this.td = td;
         this.isHorizontal = isHorizontal;
-        this.zoomScale = zoomScale;
+        this.editor = editor;
         this.onInsert = onInsert;
         this.insertTd = function () {
             var vtable = new roosterjs_editor_dom_1.VTable(_this.td);
             if (!_this.isHorizontal) {
-                vtable.normalizeTableCellSize(_this.zoomScale);
+                vtable.normalizeTableCellSize(_this.editor.getZoomScale());
                 // Since adding new column will cause table width to change, we need to remove width properties
                 vtable.table.removeAttribute('width');
                 vtable.table.style.width = null;
             }
             vtable.edit(_this.isHorizontal ? 1 /* InsertBelow */ : 3 /* InsertRight */);
             vtable.writeBack();
+            //Adding replaceNode to transform color when the theme is switched to dark.
+            _this.editor.replaceNode(vtable.table, vtable.table, true /**transformColorForDarkMode*/);
             _this.onInsert();
         };
         this.div.addEventListener('click', this.insertTd);
@@ -23374,6 +23457,7 @@ var TableInsertHandler = /** @class */ (function () {
     TableInsertHandler.prototype.dispose = function () {
         this.div.removeEventListener('click', this.insertTd);
         this.div = null;
+        this.editor = null;
     };
     return TableInsertHandler;
 }());
@@ -23417,7 +23501,7 @@ var MIN_CELL_HEIGHT = 20;
 /**
  * @internal
  */
-function createTableResizer(table, zoomScale, isRTL, onDragEnd) {
+function createTableResizer(table, zoomScale, isRTL, onStart, onDragEnd) {
     var document = table.ownerDocument;
     var div = (0, roosterjs_editor_dom_1.createElement)(isRTL
         ? 10 /* TableResizerRTL */
@@ -23429,6 +23513,7 @@ function createTableResizer(table, zoomScale, isRTL, onDragEnd) {
         isRTL: isRTL,
         table: table,
         zoomScale: zoomScale,
+        onStart: onStart,
     };
     setResizeDivPosition(context, div);
     var featureHandler = new DragAndDropHelper_1.default(div, context, setResizeDivPosition, {
@@ -23439,7 +23524,8 @@ function createTableResizer(table, zoomScale, isRTL, onDragEnd) {
     return { node: table, div: div, featureHandler: featureHandler };
 }
 exports.default = createTableResizer;
-function onDragStart(context, event) {
+function onDragStart(context) {
+    context.onStart();
     return {
         originalRect: context.table.getBoundingClientRect(),
         vTable: new roosterjs_editor_dom_1.VTable(context.table, true /*normalizeTable*/, context.zoomScale),
@@ -23484,7 +23570,8 @@ function onDragging(context, event, initValue, deltaX, deltaY) {
                 }
             }
         }
-        vTable.writeBack();
+        // To avoid apply format styles when the table is being resizing, the skipApplyFormat is set to true.
+        vTable.writeBack(true /**skipApplyFormat*/);
         return true;
     }
     else {