roosterjs 9.16.0 → 9.18.0

package/dist/rooster-react-amd.d.ts

@@ -3,7 +3,7 @@
 
 import * as FluentUIReact from '@fluentui/react/dist/react';
 
-// Type definitions for roosterjs (Version 9.0.0)
+// Type definitions for roosterjs (Version 9.0.1)
 // Generated by dts tool from roosterjs
 // Project: https://github.com/Microsoft/roosterjs
 

package/dist/rooster-react-amd.js

@@ -1,4 +1,4 @@
-define(["React","ReactDOM","FluentUIReact","roosterjs"], (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE__fluentui_react_lib_Theme__, __WEBPACK_EXTERNAL_MODULE_roosterjs_content_model_dom__) => { return /******/ (() => { // webpackBootstrap
+define(["React","ReactDOM","FluentUIReact","roosterjs"], (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE__fluentui_react_lib_Theme__, __WEBPACK_EXTERNAL_MODULE_roosterjs_content_model_api__) => { return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
@@ -464,8 +464,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;
@@ -690,8 +690,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',
@@ -763,7 +763,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");
@@ -918,7 +918,7 @@ 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 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 renderReactComponent_1 = __webpack_require__(/*! ../../common/utils/renderReactComponent */ "./packages/roosterjs-react/lib/common/utils/renderReactComponent.ts");
 function normalizeItems(items) {
@@ -977,7 +977,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
  */
@@ -1141,7 +1141,7 @@ var React = __webpack_require__(/*! react */ "react");
 var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
 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 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");
 /**
@@ -1500,7 +1500,7 @@ var calcPaneWidth = function () {
 };
 var getEmojiPaneClassName = (0, Utilities_1.memoizeFunction)(function (theme) {
     var palette = theme.palette;
-    return (0, Styling_1.mergeStyleSets)({
+    var styles = {
         quickPicker: {
             overflowY: 'hidden',
             ':after': {
@@ -1624,7 +1624,8 @@ var getEmojiPaneClassName = (0, Utilities_1.memoizeFunction)(function (theme) {
             left: '0',
             padding: '0 8px',
         },
-    });
+    };
+    return (0, Styling_1.mergeStyleSets)(styles);
 });
 
 
@@ -1749,8 +1750,8 @@ var React = __webpack_require__(/*! react */ "react");
 var Utilities_1 = __webpack_require__(/*! @fluentui/react/lib/Utilities */ "@fluentui/react/lib/Theme");
 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;
@@ -3255,7 +3256,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');
@@ -4138,7 +4139,7 @@ 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 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
@@ -4295,7 +4296,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 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 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");
@@ -4438,8 +4439,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) {
@@ -4651,7 +4652,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
  */
@@ -4676,7 +4677,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
  */
@@ -4701,7 +4702,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
  */
@@ -4726,7 +4727,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
  */
@@ -4752,7 +4753,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';
@@ -4792,7 +4793,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
  */
@@ -4818,7 +4819,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
  */
@@ -4844,7 +4845,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
  */
@@ -4870,7 +4871,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
  */
@@ -4895,7 +4896,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
  */
@@ -4921,7 +4922,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
  */
@@ -4946,7 +4947,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
  */
@@ -4972,7 +4973,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" },
@@ -5142,7 +5143,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
@@ -5176,7 +5177,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
  */
@@ -5201,7 +5202,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
  */
@@ -5227,7 +5228,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';
@@ -5275,7 +5276,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
@@ -5332,8 +5333,8 @@ 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 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 MaxRows = 10;
 var MaxCols = 10;
@@ -5462,7 +5463,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
  */
@@ -5488,7 +5489,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
  */
@@ -5538,7 +5539,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
  */
@@ -5564,7 +5565,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
  */
@@ -5595,7 +5596,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
  */
@@ -5621,7 +5622,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
  */
@@ -5646,7 +5647,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',
@@ -5700,7 +5701,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
  */
@@ -5726,7 +5727,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
  */
@@ -5752,7 +5753,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
  */
@@ -5779,7 +5780,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';
@@ -5819,7 +5820,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
  */
@@ -5845,7 +5846,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
  */
@@ -5881,7 +5882,8 @@ 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 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");
+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 moreCommands_1 = __webpack_require__(/*! ../buttons/moreCommands */ "./packages/roosterjs-react/lib/ribbon/buttons/moreCommands.ts");
 var ribbonClassName = (0, Styling_1.mergeStyles)({
@@ -5892,6 +5894,7 @@ var ribbonClassName = (0, Styling_1.mergeStyles)({
 var rtlIcon = (0, Styling_1.mergeStyles)({
     transform: 'scaleX(-1)',
 });
+var iconInitialized = false;
 /**
  * The format ribbon component of roosterjs-react
  * @param props Properties of format ribbon component
@@ -5901,6 +5904,10 @@ function Ribbon(props) {
     var plugin = props.plugin, buttons = props.buttons, strings = props.strings, dir = props.dir;
     var _a = (0, tslib_1.__read)(React.useState(null), 2), formatState = _a[0], setFormatState = _a[1];
     var isRtl = dir == 'rtl';
+    if (!iconInitialized) {
+        iconInitialized = true;
+        (0, font_icons_mdl2_1.initializeIcons)();
+    }
     var onClick = React.useCallback(function (_, item) {
         if (item) {
             plugin === null || plugin === void 0 ? void 0 : plugin.onButtonClick(item.data, item.key, strings);
@@ -6054,8 +6061,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
@@ -6218,7 +6225,7 @@ var tslib_1 = __webpack_require__(/*! tslib */ "./node_modules/tslib/tslib.es6.m
 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 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");
 /**
  * Main component of react wrapper for roosterjs
@@ -6319,13 +6326,13 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
 
 /***/ }),
 
-/***/ "roosterjs-content-model-dom":
+/***/ "roosterjs-content-model-api":
 /*!****************************!*\
   !*** external "roosterjs" ***!
   \****************************/
 /***/ ((module) => {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_roosterjs_content_model_dom__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_roosterjs_content_model_api__;
 
 /***/ }),