roosterjs 9.57.0 → 9.59.0

package/dist/rooster-react.js

@@ -11,6 +11,7 @@ var roosterjsReact;
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   __addDisposableResource: () => (/* binding */ __addDisposableResource),
 /* harmony export */   __assign: () => (/* binding */ __assign),
 /* harmony export */   __asyncDelegator: () => (/* binding */ __asyncDelegator),
 /* harmony export */   __asyncGenerator: () => (/* binding */ __asyncGenerator),
@@ -22,6 +23,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   __classPrivateFieldSet: () => (/* binding */ __classPrivateFieldSet),
 /* harmony export */   __createBinding: () => (/* binding */ __createBinding),
 /* harmony export */   __decorate: () => (/* binding */ __decorate),
+/* harmony export */   __disposeResources: () => (/* binding */ __disposeResources),
 /* harmony export */   __esDecorate: () => (/* binding */ __esDecorate),
 /* harmony export */   __exportStar: () => (/* binding */ __exportStar),
 /* harmony export */   __extends: () => (/* binding */ __extends),
@@ -34,6 +36,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   __propKey: () => (/* binding */ __propKey),
 /* harmony export */   __read: () => (/* binding */ __read),
 /* harmony export */   __rest: () => (/* binding */ __rest),
+/* harmony export */   __rewriteRelativeImportExtension: () => (/* binding */ __rewriteRelativeImportExtension),
 /* harmony export */   __runInitializers: () => (/* binding */ __runInitializers),
 /* harmony export */   __setFunctionName: () => (/* binding */ __setFunctionName),
 /* harmony export */   __spread: () => (/* binding */ __spread),
@@ -56,7 +59,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 var extendStatics = function(d, b) {
   extendStatics = Object.setPrototypeOf ||
@@ -167,8 +170,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 function __generator(thisArg, body) {
-  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-  return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+  var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
   function verb(n) { return function (v) { return step([n, v]); }; }
   function step(op) {
       if (f) throw new TypeError("Generator is already executing.");
@@ -272,8 +275,9 @@ function __await(v) {
 function __asyncGenerator(thisArg, _arguments, generator) {
   if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
   var g = generator.apply(thisArg, _arguments || []), i, q = [];
-  return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-  function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+  return i = Object.create((typeof AsyncIterator === "function" ? AsyncIterator : Object).prototype), verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+  function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+  function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
   function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
   function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
   function fulfill(value) { resume("next", value); }
@@ -306,10 +310,19 @@ var __setModuleDefault = Object.create ? (function(o, v) {
   o["default"] = v;
 };
 
+var ownKeys = function(o) {
+  ownKeys = Object.getOwnPropertyNames || function (o) {
+    var ar = [];
+    for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+    return ar;
+  };
+  return ownKeys(o);
+};
+
 function __importStar(mod) {
   if (mod && mod.__esModule) return mod;
   var result = {};
-  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
   __setModuleDefault(result, mod);
   return result;
 }
@@ -336,12 +349,79 @@ function __classPrivateFieldIn(state, receiver) {
   return typeof state === "function" ? receiver === state : state.has(receiver);
 }
 
+function __addDisposableResource(env, value, async) {
+  if (value !== null && value !== void 0) {
+    if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
+    var dispose, inner;
+    if (async) {
+      if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined.");
+      dispose = value[Symbol.asyncDispose];
+    }
+    if (dispose === void 0) {
+      if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined.");
+      dispose = value[Symbol.dispose];
+      if (async) inner = dispose;
+    }
+    if (typeof dispose !== "function") throw new TypeError("Object not disposable.");
+    if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };
+    env.stack.push({ value: value, dispose: dispose, async: async });
+  }
+  else if (async) {
+    env.stack.push({ async: true });
+  }
+  return value;
+}
+
+var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function __disposeResources(env) {
+  function fail(e) {
+    env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
+    env.hasError = true;
+  }
+  var r, s = 0;
+  function next() {
+    while (r = env.stack.pop()) {
+      try {
+        if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);
+        if (r.dispose) {
+          var result = r.dispose.call(r.value);
+          if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });
+        }
+        else s |= 1;
+      }
+      catch (e) {
+        fail(e);
+      }
+    }
+    if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();
+    if (env.hasError) throw env.error;
+  }
+  return next();
+}
+
+function __rewriteRelativeImportExtension(path, preserveJsx) {
+  if (typeof path === "string" && /^\.\.?\//.test(path)) {
+      return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+          return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+      });
+  }
+  return path;
+}
+
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   __extends,
   __assign,
   __rest,
   __decorate,
   __param,
+  __esDecorate,
+  __runInitializers,
+  __propKey,
+  __setFunctionName,
   __metadata,
   __awaiter,
   __generator,
@@ -362,6 +442,9 @@ function __classPrivateFieldIn(state, receiver) {
   __classPrivateFieldGet,
   __classPrivateFieldSet,
   __classPrivateFieldIn,
+  __addDisposableResource,
+  __disposeResources,
+  __rewriteRelativeImportExtension,
 });
 
 
@@ -378,7 +461,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getColorPickerDropDown = exports.renderColorPicker = void 0;
 var React = __webpack_require__(/*! react */ "react");
 var backgroundColors_1 = __webpack_require__(/*! ../utils/backgroundColors */ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts");
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
 var textColors_1 = __webpack_require__(/*! ../utils/textColors */ "./packages/roosterjs-react/lib/colorPicker/utils/textColors.ts");
 var getClassNamesForColorPicker_1 = __webpack_require__(/*! ../utils/getClassNamesForColorPicker */ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts");
 var classNames = (0, Styling_1.mergeStyleSets)({
@@ -541,7 +624,7 @@ exports.getBackgroundColorValue = getBackgroundColorValue;
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getColorPickerItemClassName = exports.getColorPickerContainerClassName = void 0;
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
 var classNames = (0, Styling_1.mergeStyleSets)({
     colorPickerContainer: {
         width: '192px',
@@ -704,8 +787,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createUIUtilities = void 0;
 var React = __webpack_require__(/*! react */ "react");
 var ReactDOM = __webpack_require__(/*! react-dom */ "react-dom");
-var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Theme");
-var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/Theme");
+var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Utilities");
+var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/Utilities");
 /**
  * Create the UI Utilities object for plugins to render additional react components
  * @param container Container DIV of editor
@@ -829,8 +912,8 @@ Object.defineProperty(exports, "createTableEditMenuProvider", ({ enumerable: tru
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createImageEditMenuProvider = void 0;
 var createContextMenuProvider_1 = __webpack_require__(/*! ../utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
 var MIN_WIDTH = 10;
 var MIN_HEIGHT = 10;
@@ -1055,8 +1138,8 @@ function resetImage(editor) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createListEditMenuProvider = void 0;
 var createContextMenuProvider_1 = __webpack_require__(/*! ../utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
 var ListNumberResetMenuItem = {
     key: 'menuNameListNumberReset',
@@ -1128,7 +1211,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createTableEditMenuProvider = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var createContextMenuProvider_1 = __webpack_require__(/*! ../utils/createContextMenuProvider */ "./packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var renderColorPicker_1 = __webpack_require__(/*! ../../colorPicker/component/renderColorPicker */ "./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx");
 var getClassNamesForColorPicker_1 = __webpack_require__(/*! ../../colorPicker/utils/getClassNamesForColorPicker */ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts");
 var backgroundColors_1 = __webpack_require__(/*! ../../colorPicker/utils/backgroundColors */ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts");
@@ -1283,8 +1366,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createContextMenuPlugin = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var roosterjs_content_model_plugins_1 = __webpack_require__(/*! roosterjs-content-model-plugins */ "roosterjs-content-model-api");
-var ContextualMenu_1 = __webpack_require__(/*! @fluentui/react/lib/ContextualMenu */ "@fluentui/react/lib/Theme");
+var roosterjs_content_model_plugins_1 = __webpack_require__(/*! roosterjs-content-model-plugins */ "roosterjs-content-model-dom");
+var ContextualMenu_1 = __webpack_require__(/*! @fluentui/react/lib/ContextualMenu */ "@fluentui/react/lib/Utilities");
 var renderReactComponent_1 = __webpack_require__(/*! ../../common/utils/renderReactComponent */ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts");
 function normalizeItems(items) {
     var dividerKey = 0;
@@ -1342,7 +1425,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createContextMenuProvider = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var getLocalizedString_1 = __webpack_require__(/*! ../../common/utils/getLocalizedString */ "./packages/roosterjs-react/lib/common/utils/getLocalizedString.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 /**
  * A plugin of editor to provide context menu items
  */
@@ -1461,7 +1544,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.EmojiIcon = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Utilities");
 /**
  * @internal
  * Emoji icon component
@@ -1503,12 +1586,12 @@ function getDataAndAriaProps(props) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.EmojiNavBar = void 0;
 var React = __webpack_require__(/*! react */ "react");
-var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Utilities");
 var emojiList_1 = __webpack_require__(/*! ../utils/emojiList */ "./packages/roosterjs-react/lib/emoji/utils/emojiList.ts");
-var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Theme");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
-var Icon_1 = __webpack_require__(/*! @fluentui/react/lib/Icon */ "@fluentui/react/lib/Theme");
-var Tooltip_1 = __webpack_require__(/*! @fluentui/react/lib/Tooltip */ "@fluentui/react/lib/Theme");
+var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Utilities");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
+var Icon_1 = __webpack_require__(/*! @fluentui/react/lib/Icon */ "@fluentui/react/lib/Utilities");
+var Tooltip_1 = __webpack_require__(/*! @fluentui/react/lib/Tooltip */ "@fluentui/react/lib/Utilities");
 /**
  * @internal
  */
@@ -1550,18 +1633,18 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.showEmojiPane = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/Theme");
+var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/Utilities");
 var emojiList_1 = __webpack_require__(/*! ../utils/emojiList */ "./packages/roosterjs-react/lib/emoji/utils/emojiList.ts");
-var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Utilities");
 var EmojiIcon_1 = __webpack_require__(/*! ./EmojiIcon */ "./packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx");
 var EmojiNavBar_1 = __webpack_require__(/*! ./EmojiNavBar */ "./packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx");
 var EmojiStatusBar_1 = __webpack_require__(/*! ./EmojiStatusBar */ "./packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx");
-var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Theme");
+var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Utilities");
 var index_1 = __webpack_require__(/*! ../../common/index */ "./packages/roosterjs-react/lib/common/index.ts");
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
 var searchEmojis_1 = __webpack_require__(/*! ../utils/searchEmojis */ "./packages/roosterjs-react/lib/emoji/utils/searchEmojis.ts");
-var TextField_1 = __webpack_require__(/*! @fluentui/react/lib/TextField */ "@fluentui/react/lib/Theme");
-var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Theme");
+var TextField_1 = __webpack_require__(/*! @fluentui/react/lib/TextField */ "@fluentui/react/lib/Utilities");
+var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Utilities");
 // "When a div contains an element that is bigger (either taller or wider) than the parent and has the property
 // overflow-x or overflow-y set to any value, then it can receive the focus."
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
@@ -2006,7 +2089,7 @@ var getEmojiPaneClassName = (0, Utilities_1.memoizeFunction)(function (theme) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.EmojiStatusBar = void 0;
 var React = __webpack_require__(/*! react */ "react");
-var Tooltip_1 = __webpack_require__(/*! @fluentui/react/lib/Tooltip */ "@fluentui/react/lib/Theme");
+var Tooltip_1 = __webpack_require__(/*! @fluentui/react/lib/Tooltip */ "@fluentui/react/lib/Utilities");
 var NO_SUGGESTIONS = 'emjDNoSuggetions';
 /**
  * @internal
@@ -2046,7 +2129,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.showEmojiCallout = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/Theme");
+var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/Utilities");
 var renderReactComponent_1 = __webpack_require__(/*! ../../common/utils/renderReactComponent */ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts");
 var EmojiPane_1 = __webpack_require__(/*! ./EmojiPane */ "./packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx");
 var EmojiICallout = React.forwardRef(function EmojiCalloutFunc(props, ref) {
@@ -2112,11 +2195,11 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createEmojiPlugin = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Utilities");
 var emojiList_1 = __webpack_require__(/*! ../utils/emojiList */ "./packages/roosterjs-react/lib/emoji/utils/emojiList.ts");
 var showEmojiCallout_1 = __webpack_require__(/*! ../components/showEmojiCallout */ "./packages/roosterjs-react/lib/emoji/components/showEmojiCallout.tsx");
-var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 var EmojiStrings_1 = __webpack_require__(/*! ../type/EmojiStrings */ "./packages/roosterjs-react/lib/emoji/type/EmojiStrings.ts");
 var KEYCODE_COLON = 186;
 var KEYCODE_COLON_FIREFOX = 59;
@@ -3621,7 +3704,7 @@ exports.EmojiFamilyStrings = {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.forEachEmoji = exports.forEachEmojiFamily = exports.EmojiFabricIconCharacterMap = exports.EmojiList = exports.CommonEmojis = exports.MoreEmoji = 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 */ "roosterjs-content-model-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 var Common1 = createEmoji('1f60a', ':) :-)');
 var common2 = createEmoji('1f609', ';) ;-)');
 var common3 = createEmoji('02764', '<3');
@@ -4501,10 +4584,10 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.InputDialog = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var Button_1 = __webpack_require__(/*! @fluentui/react/lib/Button */ "@fluentui/react/lib/Theme");
-var Dialog_1 = __webpack_require__(/*! @fluentui/react/lib/Dialog */ "@fluentui/react/lib/Theme");
+var Button_1 = __webpack_require__(/*! @fluentui/react/lib/Button */ "@fluentui/react/lib/Utilities");
+var Dialog_1 = __webpack_require__(/*! @fluentui/react/lib/Dialog */ "@fluentui/react/lib/Utilities");
 var index_1 = __webpack_require__(/*! ../../common/index */ "./packages/roosterjs-react/lib/common/index.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 var InputDialogItem_1 = __webpack_require__(/*! ./InputDialogItem */ "./packages/roosterjs-react/lib/inputDialog/component/InputDialogItem.tsx");
 /**
  * @internal
@@ -4556,8 +4639,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.InputDialogItem = void 0;
 var React = __webpack_require__(/*! react */ "react");
 var index_1 = __webpack_require__(/*! ../../common/index */ "./packages/roosterjs-react/lib/common/index.ts");
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
-var TextField_1 = __webpack_require__(/*! @fluentui/react/lib/TextField */ "@fluentui/react/lib/Theme");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
+var TextField_1 = __webpack_require__(/*! @fluentui/react/lib/TextField */ "@fluentui/react/lib/Utilities");
 var classNames = (0, Styling_1.mergeStyleSets)({
     inputBox: {
         width: '100%',
@@ -4662,16 +4745,16 @@ exports.showPasteOptionPane = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
 var buttons_1 = __webpack_require__(/*! ../utils/buttons */ "./packages/roosterjs-react/lib/pasteOptions/utils/buttons.ts");
-var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/Theme");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
+var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/Utilities");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 var index_1 = __webpack_require__(/*! ../../common/index */ "./packages/roosterjs-react/lib/common/index.ts");
-var Icon_1 = __webpack_require__(/*! @fluentui/react/lib/Icon */ "@fluentui/react/lib/Theme");
-var Button_1 = __webpack_require__(/*! @fluentui/react/lib/Button */ "@fluentui/react/lib/Theme");
-var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
+var Icon_1 = __webpack_require__(/*! @fluentui/react/lib/Icon */ "@fluentui/react/lib/Utilities");
+var Button_1 = __webpack_require__(/*! @fluentui/react/lib/Button */ "@fluentui/react/lib/Utilities");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Utilities");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
 var renderReactComponent_1 = __webpack_require__(/*! ../../common/utils/renderReactComponent */ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts");
-var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Theme");
-var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/Theme");
+var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Utilities");
+var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/Utilities");
 var getPasteOptionClassNames = (0, Utilities_1.memoizeFunction)(function (theme) {
     var palette = theme.palette;
     return (0, Styling_1.mergeStyleSets)({
@@ -4806,8 +4889,8 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createPasteOptionPlugin = void 0;
 var React = __webpack_require__(/*! react */ "react");
 var buttons_1 = __webpack_require__(/*! ../utils/buttons */ "./packages/roosterjs-react/lib/pasteOptions/utils/buttons.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
-var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-dom");
 var showPasteOptionPane_1 = __webpack_require__(/*! ../component/showPasteOptionPane */ "./packages/roosterjs-react/lib/pasteOptions/component/showPasteOptionPane.tsx");
 var PasteOptionPlugin = /** @class */ (function () {
     function PasteOptionPlugin(strings) {
@@ -5019,7 +5102,7 @@ exports.ButtonKeys = Object.keys(exports.Buttons);
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.alignCenterButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Align center" button on the format ribbon
  */
@@ -5044,7 +5127,7 @@ exports.alignCenterButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.alignJustifyButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Align justify" button on the format ribbon
  */
@@ -5069,7 +5152,7 @@ exports.alignJustifyButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.alignLeftButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Align left" button on the format ribbon
  */
@@ -5094,7 +5177,7 @@ exports.alignLeftButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.alignRightButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Align right" button on the format ribbon
  */
@@ -5120,7 +5203,7 @@ exports.alignRightButton = {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.backgroundColorButton = void 0;
 var renderColorPicker_1 = __webpack_require__(/*! ../../colorPicker/component/renderColorPicker */ "./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var backgroundColors_1 = __webpack_require__(/*! ../../colorPicker/utils/backgroundColors */ "./packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts");
 var getClassNamesForColorPicker_1 = __webpack_require__(/*! ../../colorPicker/utils/getClassNamesForColorPicker */ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts");
 var Key = 'buttonNameBackgroundColor';
@@ -5160,7 +5243,7 @@ exports.backgroundColorButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.blockQuoteButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Block quote" button on the format ribbon
  */
@@ -5186,7 +5269,7 @@ exports.blockQuoteButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.boldButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Bold" button on the format ribbon
  */
@@ -5212,7 +5295,7 @@ exports.boldButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.bulletedListButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Bulleted list" button on the format ribbon
  */
@@ -5238,7 +5321,7 @@ exports.bulletedListButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.clearFormatButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Clear format" button on the format ribbon
  */
@@ -5263,7 +5346,7 @@ exports.clearFormatButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.codeButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Code" button on the format ribbon
  */
@@ -5289,7 +5372,7 @@ exports.codeButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.decreaseFontSizeButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Decrease font size" button on the format ribbon
  */
@@ -5314,7 +5397,7 @@ exports.decreaseFontSizeButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.decreaseIndentButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Decrease indent" button on the format ribbon
  */
@@ -5340,7 +5423,7 @@ exports.decreaseIndentButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.fontButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var FontNames = [
     { name: 'Arial', family: 'Arial,Helvetica,sans-serif' },
     { name: 'Arial Black', family: "'Arial Black',Arial,sans-serif" },
@@ -5510,7 +5593,7 @@ exports.fontButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.fontSizeButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 /**
  * "Font Size" button on the format ribbon
@@ -5544,7 +5627,7 @@ exports.fontSizeButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.increaseFontSizeButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Increase font size" button on the format ribbon
  */
@@ -5569,7 +5652,7 @@ exports.increaseFontSizeButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.increaseIndentButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Increase indent" button on the format ribbon
  */
@@ -5595,7 +5678,7 @@ exports.increaseIndentButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.insertImageButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 function createInput(doc) {
     var input = doc.createElement('input');
     input.type = 'file';
@@ -5643,7 +5726,7 @@ exports.insertImageButton = {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.insertLinkButton = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
 /**
  * "Insert link" button on the format ribbon
@@ -5699,10 +5782,10 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.insertTableButton = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Theme");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
+var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Utilities");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
 var MaxRows = 10;
 var MaxCols = 10;
 var classNames = (0, Styling_1.mergeStyleSets)({
@@ -5751,13 +5834,11 @@ exports.insertTableButton = {
     },
     onClick: function (editor, key) {
         var _a = parseKey(key), row = _a.row, col = _a.col;
-        (0, roosterjs_content_model_api_1.insertTable)(editor, col, row, editor.isExperimentalFeatureEnabled('TransformTableBorderColors')
-            ? {
-                verticalBorderColor: '#000000',
-                bottomBorderColor: '#000000',
-                topBorderColor: '#000000',
-            }
-            : {}, {
+        (0, roosterjs_content_model_api_1.insertTable)(editor, col, row, {
+            verticalBorderColor: '#000000',
+            bottomBorderColor: '#000000',
+            topBorderColor: '#000000',
+        }, {
             marginBottom: '1px',
         }, {
             minWidth: '15px',
@@ -5841,7 +5922,7 @@ function createKey(row, col) {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.italicButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Italic" button on the format ribbon
  */
@@ -5867,7 +5948,7 @@ exports.italicButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ltrButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Left to right" button on the format ribbon
  */
@@ -5917,7 +5998,7 @@ exports.moreCommands = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.numberedListButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Numbering list" button on the format ribbon
  */
@@ -5927,7 +6008,7 @@ exports.numberedListButton = {
     iconName: 'NumberedList',
     isChecked: function (formatState) { return !!formatState.isNumbering; },
     onClick: function (editor) {
-        (0, roosterjs_content_model_api_1.toggleNumbering)(editor);
+        (0, roosterjs_content_model_api_1.toggleNumbering)(editor, true /* removeLisMargins */);
     },
 };
 
@@ -5943,7 +6024,7 @@ exports.numberedListButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.redoButton = void 0;
-var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-dom");
 /**
  * "Undo" button on the format ribbon
  */
@@ -5974,7 +6055,7 @@ exports.redoButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.removeLinkButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Remove link" button on the format ribbon
  */
@@ -6000,7 +6081,7 @@ exports.removeLinkButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.rtlButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Right to left" button on the format ribbon
  */
@@ -6025,7 +6106,7 @@ exports.rtlButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.setHeadingLevelButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var keys = [
     'buttonNameNoHeading',
     'buttonNameHeading1',
@@ -6079,7 +6160,7 @@ exports.setHeadingLevelButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.strikethroughButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Strikethrough" button on the format ribbon
  */
@@ -6105,7 +6186,7 @@ exports.strikethroughButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.subscriptButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Subscript" button on the format ribbon
  */
@@ -6131,7 +6212,7 @@ exports.subscriptButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.superscriptButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Superscript" button on the format ribbon
  */
@@ -6158,7 +6239,7 @@ exports.superscriptButton = {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.textColorButton = void 0;
 var renderColorPicker_1 = __webpack_require__(/*! ../../colorPicker/component/renderColorPicker */ "./packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx");
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 var textColors_1 = __webpack_require__(/*! ../../colorPicker/utils/textColors */ "./packages/roosterjs-react/lib/colorPicker/utils/textColors.ts");
 var getClassNamesForColorPicker_1 = __webpack_require__(/*! ../../colorPicker/utils/getClassNamesForColorPicker */ "./packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts");
 var Key = 'buttonNameTextColor';
@@ -6198,7 +6279,7 @@ exports.textColorButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.underlineButton = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
 /**
  * "Underline" button on the format ribbon
  */
@@ -6224,7 +6305,7 @@ exports.underlineButton = {
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.undoButton = void 0;
-var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-dom");
 /**
  * "Undo" button on the format ribbon
  */
@@ -6257,12 +6338,12 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Ribbon = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
-var CommandBar_1 = __webpack_require__(/*! @fluentui/react/lib/CommandBar */ "@fluentui/react/lib/Theme");
-var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Theme");
+var CommandBar_1 = __webpack_require__(/*! @fluentui/react/lib/CommandBar */ "@fluentui/react/lib/Utilities");
+var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/Utilities");
 var getLocalizedString_1 = __webpack_require__(/*! ../../common/utils/getLocalizedString */ "./packages/roosterjs-react/lib/common/utils/getLocalizedString.ts");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
-var font_icons_mdl2_1 = __webpack_require__(/*! @fluentui/font-icons-mdl2 */ "@fluentui/react/lib/Theme");
-var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Theme");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
+var font_icons_mdl2_1 = __webpack_require__(/*! @fluentui/font-icons-mdl2 */ "@fluentui/react/lib/Utilities");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/Utilities");
 var moreCommands_1 = __webpack_require__(/*! ../buttons/moreCommands */ "./packages/roosterjs-react/lib/ribbon/buttons/moreCommands.ts");
 var ribbonClassName = (0, Styling_1.mergeStyles)({
     '& .ms-CommandBar': {
@@ -6439,8 +6520,8 @@ Object.defineProperty(exports, "underlineButton", ({ enumerable: true, get: func
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.createRibbonPlugin = void 0;
-var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
-var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-dom");
 var RibbonPluginImpl = /** @class */ (function () {
     /**
      * Construct a new instance of RibbonPlugin object
@@ -6604,9 +6685,9 @@ exports.Rooster = void 0;
 var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.mjs");
 var React = __webpack_require__(/*! react */ "react");
 var index_1 = __webpack_require__(/*! ../../common/index */ "./packages/roosterjs-react/lib/common/index.ts");
-var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
-var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
-var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Theme");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Utilities");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-dom");
+var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/Utilities");
 /**
  * Main component of react wrapper for roosterjs
  * @param props Properties of this component
@@ -6676,7 +6757,7 @@ Object.defineProperty(exports, "Rooster", ({ enumerable: true, get: function ()
 
 /***/ },
 
-/***/ "@fluentui/react/lib/Theme"
+/***/ "@fluentui/react/lib/Utilities"
 /*!********************************!*\
   !*** external "FluentUIReact" ***!
   \********************************/
@@ -6706,7 +6787,7 @@ module.exports = ReactDOM;
 
 /***/ },
 
-/***/ "roosterjs-content-model-api"
+/***/ "roosterjs-content-model-dom"
 /*!****************************!*\
   !*** external "roosterjs" ***!
   \****************************/