roosterjs 9.52.0 → 9.54.0

package/dist/rooster-react.js

@@ -378,7 +378,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/FocusZone");
 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 +541,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/FocusZone");
 var classNames = (0, Styling_1.mergeStyleSets)({
     colorPickerContainer: {
         width: '192px',
@@ -704,8 +704,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/FocusZone");
+var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/FocusZone");
 /**
  * Create the UI Utilities object for plugins to render additional react components
  * @param container Container DIV of editor
@@ -829,8 +829,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-dom");
-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-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 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 +1055,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-dom");
-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-api");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
 var ListNumberResetMenuItem = {
     key: 'menuNameListNumberReset',
@@ -1128,7 +1128,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 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 +1283,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-dom");
-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-api");
+var ContextualMenu_1 = __webpack_require__(/*! @fluentui/react/lib/ContextualMenu */ "@fluentui/react/lib/FocusZone");
 var renderReactComponent_1 = __webpack_require__(/*! ../../common/utils/renderReactComponent */ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts");
 function normalizeItems(items) {
     var dividerKey = 0;
@@ -1342,7 +1342,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-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 /**
  * A plugin of editor to provide context menu items
  */
@@ -1461,7 +1461,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/FocusZone");
 /**
  * @internal
  * Emoji icon component
@@ -1503,12 +1503,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/FocusZone");
 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-dom");
-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/FocusZone");
+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/FocusZone");
+var Tooltip_1 = __webpack_require__(/*! @fluentui/react/lib/Tooltip */ "@fluentui/react/lib/FocusZone");
 /**
  * @internal
  */
@@ -1550,18 +1550,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/FocusZone");
 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/FocusZone");
 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/FocusZone");
 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/FocusZone");
 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/FocusZone");
+var Theme_1 = __webpack_require__(/*! @fluentui/react/lib/Theme */ "@fluentui/react/lib/FocusZone");
 // "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 +2006,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/FocusZone");
 var NO_SUGGESTIONS = 'emjDNoSuggetions';
 /**
  * @internal
@@ -2046,7 +2046,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/FocusZone");
 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 +2112,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/FocusZone");
 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-dom");
-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-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 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 +3621,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-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 var Common1 = createEmoji('1f60a', ':) :-)');
 var common2 = createEmoji('1f609', ';) ;-)');
 var common3 = createEmoji('02764', '<3');
@@ -4501,10 +4501,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/FocusZone");
+var Dialog_1 = __webpack_require__(/*! @fluentui/react/lib/Dialog */ "@fluentui/react/lib/FocusZone");
 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-dom");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 var InputDialogItem_1 = __webpack_require__(/*! ./InputDialogItem */ "./packages/roosterjs-react/lib/inputDialog/component/InputDialogItem.tsx");
 /**
  * @internal
@@ -4556,8 +4556,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/FocusZone");
+var TextField_1 = __webpack_require__(/*! @fluentui/react/lib/TextField */ "@fluentui/react/lib/FocusZone");
 var classNames = (0, Styling_1.mergeStyleSets)({
     inputBox: {
         width: '100%',
@@ -4660,16 +4660,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-dom");
+var Callout_1 = __webpack_require__(/*! @fluentui/react/lib/Callout */ "@fluentui/react/lib/FocusZone");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 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/FocusZone");
+var Button_1 = __webpack_require__(/*! @fluentui/react/lib/Button */ "@fluentui/react/lib/FocusZone");
+var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/FocusZone");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/FocusZone");
 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/FocusZone");
+var WindowProvider_1 = __webpack_require__(/*! @fluentui/react/lib/WindowProvider */ "@fluentui/react/lib/FocusZone");
 var getPasteOptionClassNames = (0, Utilities_1.memoizeFunction)(function (theme) {
     var palette = theme.palette;
     return (0, Styling_1.mergeStyleSets)({
@@ -4804,8 +4804,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-dom");
-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-api");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
 var showPasteOptionPane_1 = __webpack_require__(/*! ../component/showPasteOptionPane */ "./packages/roosterjs-react/lib/pasteOptions/component/showPasteOptionPane.tsx");
 var PasteOptionPlugin = /** @class */ (function () {
     function PasteOptionPlugin(strings) {
@@ -5017,7 +5017,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Align center" button on the format ribbon
  */
@@ -5042,7 +5042,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Align justify" button on the format ribbon
  */
@@ -5067,7 +5067,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Align left" button on the format ribbon
  */
@@ -5092,7 +5092,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Align right" button on the format ribbon
  */
@@ -5118,7 +5118,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 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';
@@ -5158,7 +5158,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Block quote" button on the format ribbon
  */
@@ -5184,7 +5184,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Bold" button on the format ribbon
  */
@@ -5210,7 +5210,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Bulleted list" button on the format ribbon
  */
@@ -5236,7 +5236,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Clear format" button on the format ribbon
  */
@@ -5261,7 +5261,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Code" button on the format ribbon
  */
@@ -5287,7 +5287,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Decrease font size" button on the format ribbon
  */
@@ -5312,7 +5312,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Decrease indent" button on the format ribbon
  */
@@ -5338,7 +5338,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 var FontNames = [
     { name: 'Arial', family: 'Arial,Helvetica,sans-serif' },
     { name: 'Arial Black', family: "'Arial Black',Arial,sans-serif" },
@@ -5508,7 +5508,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 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
@@ -5542,7 +5542,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Increase font size" button on the format ribbon
  */
@@ -5567,7 +5567,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Increase indent" button on the format ribbon
  */
@@ -5593,7 +5593,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 function createInput(doc) {
     var input = doc.createElement('input');
     input.type = 'file';
@@ -5641,7 +5641,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 var showInputDialog_1 = __webpack_require__(/*! ../../inputDialog/utils/showInputDialog */ "./packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx");
 /**
  * "Insert link" button on the format ribbon
@@ -5697,10 +5697,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-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/Theme");
+var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/FocusZone");
+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/FocusZone");
 var MaxRows = 10;
 var MaxCols = 10;
 var classNames = (0, Styling_1.mergeStyleSets)({
@@ -5839,7 +5839,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Italic" button on the format ribbon
  */
@@ -5865,7 +5865,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Left to right" button on the format ribbon
  */
@@ -5915,7 +5915,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Numbering list" button on the format ribbon
  */
@@ -5941,7 +5941,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-dom");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
 /**
  * "Undo" button on the format ribbon
  */
@@ -5972,7 +5972,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Remove link" button on the format ribbon
  */
@@ -5998,7 +5998,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Right to left" button on the format ribbon
  */
@@ -6023,7 +6023,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 var keys = [
     'buttonNameNoHeading',
     'buttonNameHeading1',
@@ -6077,7 +6077,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Strikethrough" button on the format ribbon
  */
@@ -6103,7 +6103,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Subscript" button on the format ribbon
  */
@@ -6129,7 +6129,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Superscript" button on the format ribbon
  */
@@ -6156,7 +6156,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 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';
@@ -6196,7 +6196,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-dom");
+var roosterjs_content_model_api_1 = __webpack_require__(/*! roosterjs-content-model-api */ "roosterjs-content-model-api");
 /**
  * "Underline" button on the format ribbon
  */
@@ -6222,7 +6222,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-dom");
+var roosterjs_content_model_core_1 = __webpack_require__(/*! roosterjs-content-model-core */ "roosterjs-content-model-api");
 /**
  * "Undo" button on the format ribbon
  */
@@ -6255,12 +6255,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/FocusZone");
+var FocusZone_1 = __webpack_require__(/*! @fluentui/react/lib/FocusZone */ "@fluentui/react/lib/FocusZone");
 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-dom");
-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-api");
+var font_icons_mdl2_1 = __webpack_require__(/*! @fluentui/font-icons-mdl2 */ "@fluentui/react/lib/FocusZone");
+var Styling_1 = __webpack_require__(/*! @fluentui/react/lib/Styling */ "@fluentui/react/lib/FocusZone");
 var moreCommands_1 = __webpack_require__(/*! ../buttons/moreCommands */ "./packages/roosterjs-react/lib/ribbon/buttons/moreCommands.ts");
 var ribbonClassName = (0, Styling_1.mergeStyles)({
     '& .ms-CommandBar': {
@@ -6437,8 +6437,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-dom");
-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-api");
+var roosterjs_content_model_dom_1 = __webpack_require__(/*! roosterjs-content-model-dom */ "roosterjs-content-model-api");
 var RibbonPluginImpl = /** @class */ (function () {
     /**
      * Construct a new instance of RibbonPlugin object
@@ -6602,9 +6602,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-dom");
-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/FocusZone");
+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/FocusZone");
 /**
  * Main component of react wrapper for roosterjs
  * @param props Properties of this component
@@ -6674,7 +6674,7 @@ Object.defineProperty(exports, "Rooster", ({ enumerable: true, get: function ()
 
 /***/ },
 
-/***/ "@fluentui/react/lib/Theme"
+/***/ "@fluentui/react/lib/FocusZone"
 /*!********************************!*\
   !*** external "FluentUIReact" ***!
   \********************************/
@@ -6704,7 +6704,7 @@ module.exports = ReactDOM;
 
 /***/ },
 
-/***/ "roosterjs-content-model-dom"
+/***/ "roosterjs-content-model-api"
 /*!****************************!*\
   !*** external "roosterjs" ***!
   \****************************/