Add back roosterjs-react (#2689)

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

demo/index.html

@@ -22,6 +22,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fluentui-react/8.60.1/fluentui-react.min.js"></script>
         <script src="rooster-min.js"></script>
+        <script src="rooster-react-min.js"></script>
         <script src="demo.js"></script>
     </body>
 </html>

demo/scripts/controlsV2/demoButtons/changeImageButton.ts

@@ -1,5 +1,5 @@
 import { changeImage } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 function createInput(doc: Document): HTMLInputElement {
     const input = doc.createElement('input');

demo/scripts/controlsV2/demoButtons/createImageEditButtons.ts

@@ -1,5 +1,5 @@
 import { ImageEditor } from 'roosterjs-content-model-types';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal

demo/scripts/controlsV2/demoButtons/darkModeButton.ts

@@ -1,5 +1,5 @@
 import { MainPane } from '../mainPane/MainPane';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * Key of localized strings of Dark mode button

demo/scripts/controlsV2/demoButtons/exportContentButton.ts

@@ -1,6 +1,6 @@
 import { exportContent } from 'roosterjs-content-model-core';
 import { ModelToTextCallbacks } from 'roosterjs-content-model-types';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * Key of localized strings of Zoom button

demo/scripts/controlsV2/demoButtons/formatPainterButton.ts

@@ -1,5 +1,5 @@
 import { FormatPainterHandler } from '../plugins/FormatPainterPlugin';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal

demo/scripts/controlsV2/demoButtons/formatTableButton.ts

@@ -1,7 +1,7 @@
 import { formatTable } from 'roosterjs-content-model-api';
 import { TableBorderFormat } from 'roosterjs-content-model-dom';
 import { TableMetadataFormat } from 'roosterjs-content-model-types';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const PREDEFINED_STYLES: Record<
     string,

demo/scripts/controlsV2/demoButtons/imageBorderColorButton.ts

@@ -1,30 +1,13 @@
-import { renderColorPicker } from '../roosterjsReact/colorPicker/component/renderColorPicker';
+import { getColorPickerDropDown, getTextColorValue } from 'roosterjs-react';
 import { setImageBorder } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
-import {
-    getColorPickerContainerClassName,
-    getColorPickerItemClassName,
-} from '../roosterjsReact/colorPicker/utils/getClassNamesForColorPicker';
-import {
-    getTextColorValue,
-    TextColorDropDownItems,
-    TextColors,
-} from '../roosterjsReact/colorPicker/utils/textColors';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal
  * "Image Border Color" button on the format ribbon
  */
 export const imageBorderColorButton: RibbonButton<'buttonNameImageBorderColor'> = {
-    dropDownMenu: {
-        items: TextColorDropDownItems,
-        itemClassName: getColorPickerItemClassName(),
-        allowLivePreview: true,
-        itemRender: (item, onClick) => renderColorPicker(item, TextColors, onClick),
-        commandBarSubMenuProperties: {
-            className: getColorPickerContainerClassName(),
-        },
-    },
+    dropDownMenu: getColorPickerDropDown('text'),
     key: 'buttonNameImageBorderColor',
     unlocalizedText: 'Image Border Color',
     iconName: 'Photo2',

demo/scripts/controlsV2/demoButtons/imageBorderRemoveButton.ts

@@ -1,5 +1,5 @@
 import { setImageBorder } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal

demo/scripts/controlsV2/demoButtons/imageBorderStyleButton.ts

@@ -1,5 +1,5 @@
 import { setImageBorder } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const STYLES: Record<string, string> = {
     dashed: 'dashed',

demo/scripts/controlsV2/demoButtons/imageBorderWidthButton.ts

@@ -1,5 +1,5 @@
 import { setImageBorder } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const WIDTH = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
 

demo/scripts/controlsV2/demoButtons/imageBoxShadowButton.ts

@@ -1,5 +1,5 @@
-import { RibbonButton } from '../roosterjsReact/ribbon';
 import { setImageBoxShadow } from 'roosterjs-content-model-api';
+import type { RibbonButton } from 'roosterjs-react';
 
 const STYLES_NAMES: Record<string, string> = {
     noShadow: 'noShadow',

demo/scripts/controlsV2/demoButtons/listStartNumberButton.ts

@@ -1,7 +1,6 @@
-import { CancelButtonStringKey, OkButtonStringKey } from '../roosterjsReact/common';
-import { RibbonButton } from '../roosterjsReact/ribbon';
+import { CancelButtonStringKey, OkButtonStringKey, showInputDialog } from 'roosterjs-react';
 import { setListStartNumber } from 'roosterjs-content-model-api';
-import { showInputDialog } from '../roosterjsReact/inputDialog';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal

demo/scripts/controlsV2/demoButtons/pasteButton.ts

@@ -1,6 +1,6 @@
 import { extractClipboardItems } from 'roosterjs-content-model-dom';
 import { paste } from 'roosterjs-content-model-core';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal

demo/scripts/controlsV2/demoButtons/popoutButton.ts

@@ -1,5 +1,5 @@
 import { MainPane } from '../mainPane/MainPane';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * Key of localized strings of Popout button

demo/scripts/controlsV2/demoButtons/setBulletedListStyleButton.ts

@@ -1,6 +1,6 @@
 import { BulletListType } from 'roosterjs-content-model-dom';
 import { setListStyle } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const dropDownMenuItems = {
     [BulletListType.Disc]: 'Disc',

demo/scripts/controlsV2/demoButtons/setNumberedListStyleButton.ts

@@ -1,6 +1,6 @@
 import { NumberingListType } from 'roosterjs-content-model-dom';
 import { setListStyle } from 'roosterjs-content-model-api';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const dropDownMenuItems = {
     [NumberingListType.Decimal]: 'Decimal',

demo/scripts/controlsV2/demoButtons/setTableCellShadeButton.ts

@@ -1,29 +1,15 @@
-import { BackgroundColorKeys } from '../roosterjsReact/colorPicker/types/stringKeys';
-import { renderColorPicker } from '../roosterjsReact/colorPicker/component/renderColorPicker';
-import { setTableCellShade } from 'roosterjs-content-model-api';
-import {
-    getColorPickerContainerClassName,
-    getColorPickerItemClassName,
-} from '../roosterjsReact/colorPicker/utils/getClassNamesForColorPicker';
 import {
-    BackgroundColorDropDownItems,
-    BackgroundColors,
+    BackgroundColorKeys,
     getBackgroundColorValue,
-} from '../roosterjsReact/colorPicker/utils/backgroundColors';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+    getColorPickerDropDown,
+} from 'roosterjs-react';
+import { setTableCellShade } from 'roosterjs-content-model-api';
+import type { RibbonButton } from 'roosterjs-react';
 
 export const setTableCellShadeButton: RibbonButton<
     'ribbonButtonSetTableCellShade' | BackgroundColorKeys
 > = {
-    dropDownMenu: {
-        items: BackgroundColorDropDownItems,
-        itemClassName: getColorPickerItemClassName(),
-        allowLivePreview: true,
-        itemRender: (item, onClick) => renderColorPicker(item, BackgroundColors, onClick),
-        commandBarSubMenuProperties: {
-            className: getColorPickerContainerClassName(),
-        },
-    },
+    dropDownMenu: getColorPickerDropDown('background'),
     key: 'ribbonButtonSetTableCellShade',
     unlocalizedText: 'Set table shade color',
     iconName: 'BackgroundColor',

demo/scripts/controlsV2/demoButtons/spaceBeforeAfterButtons.ts

@@ -1,5 +1,5 @@
 import { getFormatState, setParagraphMargin } from 'roosterjs-content-model-api';
-import { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const spaceAfterButtonKey = 'buttonNameSpaceAfter';
 const spaceBeforeButtonKey = 'buttonNameSpaceBefore';

demo/scripts/controlsV2/demoButtons/spacingButton.ts

@@ -1,5 +1,5 @@
-import { RibbonButton } from '../roosterjsReact/ribbon';
 import { setSpacing } from 'roosterjs-content-model-api';
+import type { RibbonButton } from 'roosterjs-react';
 
 const SPACING_OPTIONS = ['1.0', '1.15', '1.5', '2.0'];
 const NORMAL_SPACING = 1.2;

demo/scripts/controlsV2/demoButtons/tableBorderApplyButton.ts

@@ -1,7 +1,7 @@
 import { applyTableBorderFormat } from 'roosterjs-content-model-api';
 import { BorderOperations } from 'roosterjs-content-model-types';
 import { MainPane } from '../mainPane/MainPane';
-import { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const TABLE_OPERATIONS: Record<string, BorderOperations> = {
     menuNameTableAllBorder: 'allBorders',

demo/scripts/controlsV2/demoButtons/tableBorderColorButton.ts

@@ -1,30 +1,13 @@
+import { getColorPickerDropDown, getTextColorValue } from 'roosterjs-react';
 import { MainPane } from '../mainPane/MainPane';
-import { renderColorPicker } from '../roosterjsReact/colorPicker/component/renderColorPicker';
-import {
-    getColorPickerContainerClassName,
-    getColorPickerItemClassName,
-} from '../roosterjsReact/colorPicker/utils/getClassNamesForColorPicker';
-import {
-    getTextColorValue,
-    TextColorDropDownItems,
-    TextColors,
-} from '../roosterjsReact/colorPicker/utils/textColors';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 /**
  * @internal
  * "Table Border Color" button on the format ribbon
  */
 export const tableBorderColorButton: RibbonButton<'buttonNameTableBorderColor'> = {
-    dropDownMenu: {
-        items: TextColorDropDownItems,
-        itemClassName: getColorPickerItemClassName(),
-        allowLivePreview: true,
-        itemRender: (item, onClick) => renderColorPicker(item, TextColors, onClick),
-        commandBarSubMenuProperties: {
-            className: getColorPickerContainerClassName(),
-        },
-    },
+    dropDownMenu: getColorPickerDropDown('text'),
     key: 'buttonNameTableBorderColor',
     unlocalizedText: 'Table Border Color',
     iconName: 'ColorSolid',

demo/scripts/controlsV2/demoButtons/tableBorderStyleButton.ts

@@ -1,5 +1,5 @@
 import { MainPane } from '../mainPane/MainPane';
-import { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const STYLES: Record<string, string> = {
     dashed: 'dashed',

demo/scripts/controlsV2/demoButtons/tableBorderWidthButton.ts

@@ -1,5 +1,5 @@
 import { MainPane } from '../mainPane/MainPane';
-import { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const WIDTH = [0.25, 0.5, 0.75, 1, 1.5, 2.25, 3, 4.5, 6];
 

demo/scripts/controlsV2/demoButtons/tableEditButtons.ts

@@ -1,15 +1,15 @@
 import { editTable } from 'roosterjs-content-model-api';
 import { TableOperation } from 'roosterjs-content-model-types';
-import {
+import type {
+    RibbonButton,
     TableEditAlignMenuItemStringKey,
     TableEditAlignTableMenuItemStringKey,
     TableEditDeleteMenuItemStringKey,
     TableEditInsertMenuItemStringKey,
     TableEditMenuItemStringKey,
     TableEditMergeMenuItemStringKey,
     TableEditSplitMenuItemStringKey,
-} from '../roosterjsReact/contextMenu';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+} from 'roosterjs-react';
 
 const TableEditOperationMap: Partial<Record<TableEditMenuItemStringKey, TableOperation>> = {
     menuNameTableInsertAbove: 'insertAbove',

demo/scripts/controlsV2/demoButtons/tableOptionsButton.ts

@@ -1,6 +1,6 @@
 import { formatTable, getFormatState } from 'roosterjs-content-model-api';
 import { TableMetadataFormat } from 'roosterjs-content-model-types';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const TableEditOperationMap: Partial<Record<
     TableOptionsMenuItemStringKey,

demo/scripts/controlsV2/demoButtons/zoomButton.ts

@@ -1,5 +1,5 @@
 import { MainPane } from '../mainPane/MainPane';
-import type { RibbonButton } from '../roosterjsReact/ribbon';
+import type { RibbonButton } from 'roosterjs-react';
 
 const DropDownItems = {
     'zoom50%': '50%',

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -3,11 +3,6 @@ import * as ReactDOM from 'react-dom';
 import SampleEntityPlugin from '../plugins/SampleEntityPlugin';
 import { ApiPlaygroundPlugin } from '../sidePane/apiPlayground/ApiPlaygroundPlugin';
 import { ContentModelPanePlugin } from '../sidePane/contentModel/ContentModelPanePlugin';
-import { createEmojiPlugin } from '../roosterjsReact/emoji';
-import { createImageEditMenuProvider } from '../roosterjsReact/contextMenu/menus/createImageEditMenuProvider';
-import { createListEditMenuProvider } from '../roosterjsReact/contextMenu/menus/createListEditMenuProvider';
-import { createPasteOptionPlugin } from '../roosterjsReact/pasteOptions';
-import { createRibbonPlugin, Ribbon, RibbonButton, RibbonPlugin } from '../roosterjsReact/ribbon';
 import { darkModeButton } from '../demoButtons/darkModeButton';
 import { Editor } from 'roosterjs-content-model-core';
 import { EditorOptionsPlugin } from '../sidePane/editorOptions/EditorOptionsPlugin';
@@ -23,20 +18,31 @@ import { getTheme } from '../theme/themes';
 import { OptionState, UrlPlaceholder } from '../sidePane/editorOptions/OptionState';
 import { popoutButton } from '../demoButtons/popoutButton';
 import { PresetPlugin } from '../sidePane/presets/PresetPlugin';
-import { redoButton } from '../roosterjsReact/ribbon/buttons/redoButton';
 import { registerWindowForCss, unregisterWindowForCss } from '../../utils/cssMonitor';
-import { Rooster } from '../roosterjsReact/rooster';
 import { SamplePickerPlugin } from '../plugins/SamplePickerPlugin';
 import { SidePane } from '../sidePane/SidePane';
 import { SidePanePlugin } from '../sidePane/SidePanePlugin';
 import { SnapshotPlugin } from '../sidePane/snapshot/SnapshotPlugin';
 import { ThemeProvider } from '@fluentui/react/lib/Theme';
 import { TitleBar } from '../titleBar/TitleBar';
 import { trustedHTMLHandler } from '../../utils/trustedHTMLHandler';
-import { undoButton } from '../roosterjsReact/ribbon/buttons/undoButton';
 import { UpdateContentPlugin } from '../plugins/UpdateContentPlugin';
 import { WindowProvider } from '@fluentui/react/lib/WindowProvider';
 import { zoomButton } from '../demoButtons/zoomButton';
+import type { RibbonButton, RibbonPlugin } from 'roosterjs-react';
+import {
+    createContextMenuPlugin,
+    createEmojiPlugin,
+    createImageEditMenuProvider,
+    createListEditMenuProvider,
+    createPasteOptionPlugin,
+    createRibbonPlugin,
+    createTableEditMenuProvider,
+    redoButton,
+    Rooster,
+    undoButton,
+    Ribbon,
+} from 'roosterjs-react';
 import {
     Border,
     Colors,
@@ -59,10 +65,6 @@ import {
     TableEditPlugin,
     WatermarkPlugin,
 } from 'roosterjs-content-model-plugins';
-import {
-    createContextMenuPlugin,
-    createTableEditMenuProvider,
-} from '../roosterjsReact/contextMenu';
 
 const styles = require('./MainPane.scss');
 

demo/scripts/controlsV2/plugins/SamplePickerPlugin.tsx

@@ -3,7 +3,7 @@ import { Callout } from '@fluentui/react/lib/Callout';
 import { DOMInsertPoint } from 'roosterjs-content-model-types';
 import { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
-import { ReactEditorPlugin, UIUtilities } from '../roosterjsReact/common';
+import { ReactEditorPlugin, UIUtilities } from 'roosterjs-react';
 import {
     PickerDirection,
     PickerHandler,