diff --git a/demo/index.html b/demo/index.html index e252bcae25e..f655db7f2d4 100644 --- a/demo/index.html +++ b/demo/index.html @@ -22,6 +22,7 @@ + diff --git a/demo/scripts/controlsV2/demoButtons/changeImageButton.ts b/demo/scripts/controlsV2/demoButtons/changeImageButton.ts index 98c000be494..046178a3a18 100644 --- a/demo/scripts/controlsV2/demoButtons/changeImageButton.ts +++ b/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'); diff --git a/demo/scripts/controlsV2/demoButtons/createImageEditButtons.ts b/demo/scripts/controlsV2/demoButtons/createImageEditButtons.ts index f87e669a6ae..ded34f732c3 100644 --- a/demo/scripts/controlsV2/demoButtons/createImageEditButtons.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/darkModeButton.ts b/demo/scripts/controlsV2/demoButtons/darkModeButton.ts index 00d03c1a5d7..a05fc9ee083 100644 --- a/demo/scripts/controlsV2/demoButtons/darkModeButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/exportContentButton.ts b/demo/scripts/controlsV2/demoButtons/exportContentButton.ts index 729d336fcee..5569f8f0c5c 100644 --- a/demo/scripts/controlsV2/demoButtons/exportContentButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/formatPainterButton.ts b/demo/scripts/controlsV2/demoButtons/formatPainterButton.ts index ee406679c60..29312f40f22 100644 --- a/demo/scripts/controlsV2/demoButtons/formatPainterButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/formatTableButton.ts b/demo/scripts/controlsV2/demoButtons/formatTableButton.ts index 6a5ba0535f3..e2e253f61e0 100644 --- a/demo/scripts/controlsV2/demoButtons/formatTableButton.ts +++ b/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, diff --git a/demo/scripts/controlsV2/demoButtons/imageBorderColorButton.ts b/demo/scripts/controlsV2/demoButtons/imageBorderColorButton.ts index 4bf91649859..56581ddc2dd 100644 --- a/demo/scripts/controlsV2/demoButtons/imageBorderColorButton.ts +++ b/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', diff --git a/demo/scripts/controlsV2/demoButtons/imageBorderRemoveButton.ts b/demo/scripts/controlsV2/demoButtons/imageBorderRemoveButton.ts index 7444cab02ea..355d349d22b 100644 --- a/demo/scripts/controlsV2/demoButtons/imageBorderRemoveButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/imageBorderStyleButton.ts b/demo/scripts/controlsV2/demoButtons/imageBorderStyleButton.ts index 9a28e432849..73b097b6f7d 100644 --- a/demo/scripts/controlsV2/demoButtons/imageBorderStyleButton.ts +++ b/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 = { dashed: 'dashed', diff --git a/demo/scripts/controlsV2/demoButtons/imageBorderWidthButton.ts b/demo/scripts/controlsV2/demoButtons/imageBorderWidthButton.ts index e148f088401..c20a745034e 100644 --- a/demo/scripts/controlsV2/demoButtons/imageBorderWidthButton.ts +++ b/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]; diff --git a/demo/scripts/controlsV2/demoButtons/imageBoxShadowButton.ts b/demo/scripts/controlsV2/demoButtons/imageBoxShadowButton.ts index e5cca2a83c1..441722bfb6f 100644 --- a/demo/scripts/controlsV2/demoButtons/imageBoxShadowButton.ts +++ b/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 = { noShadow: 'noShadow', diff --git a/demo/scripts/controlsV2/demoButtons/listStartNumberButton.ts b/demo/scripts/controlsV2/demoButtons/listStartNumberButton.ts index 4fa960e156c..1af6c10aeca 100644 --- a/demo/scripts/controlsV2/demoButtons/listStartNumberButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/pasteButton.ts b/demo/scripts/controlsV2/demoButtons/pasteButton.ts index d880ba95596..dc507f5ac79 100644 --- a/demo/scripts/controlsV2/demoButtons/pasteButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/popoutButton.ts b/demo/scripts/controlsV2/demoButtons/popoutButton.ts index 98b214ed413..a57fcd6715e 100644 --- a/demo/scripts/controlsV2/demoButtons/popoutButton.ts +++ b/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 diff --git a/demo/scripts/controlsV2/demoButtons/setBulletedListStyleButton.ts b/demo/scripts/controlsV2/demoButtons/setBulletedListStyleButton.ts index 708a9e8d23a..ab585097120 100644 --- a/demo/scripts/controlsV2/demoButtons/setBulletedListStyleButton.ts +++ b/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', diff --git a/demo/scripts/controlsV2/demoButtons/setNumberedListStyleButton.ts b/demo/scripts/controlsV2/demoButtons/setNumberedListStyleButton.ts index 6796b38e870..a9b6505d153 100644 --- a/demo/scripts/controlsV2/demoButtons/setNumberedListStyleButton.ts +++ b/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', diff --git a/demo/scripts/controlsV2/demoButtons/setTableCellShadeButton.ts b/demo/scripts/controlsV2/demoButtons/setTableCellShadeButton.ts index 8af31da39ff..64e4c07fdc5 100644 --- a/demo/scripts/controlsV2/demoButtons/setTableCellShadeButton.ts +++ b/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', diff --git a/demo/scripts/controlsV2/demoButtons/spaceBeforeAfterButtons.ts b/demo/scripts/controlsV2/demoButtons/spaceBeforeAfterButtons.ts index 8a7413ed482..7c4fec4d027 100644 --- a/demo/scripts/controlsV2/demoButtons/spaceBeforeAfterButtons.ts +++ b/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'; diff --git a/demo/scripts/controlsV2/demoButtons/spacingButton.ts b/demo/scripts/controlsV2/demoButtons/spacingButton.ts index 2b9768da5eb..ab99e72abcc 100644 --- a/demo/scripts/controlsV2/demoButtons/spacingButton.ts +++ b/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; diff --git a/demo/scripts/controlsV2/demoButtons/tableBorderApplyButton.ts b/demo/scripts/controlsV2/demoButtons/tableBorderApplyButton.ts index 8c4a4f720da..1838f527663 100644 --- a/demo/scripts/controlsV2/demoButtons/tableBorderApplyButton.ts +++ b/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 = { menuNameTableAllBorder: 'allBorders', diff --git a/demo/scripts/controlsV2/demoButtons/tableBorderColorButton.ts b/demo/scripts/controlsV2/demoButtons/tableBorderColorButton.ts index e56ce19e940..c3445260a3c 100644 --- a/demo/scripts/controlsV2/demoButtons/tableBorderColorButton.ts +++ b/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', diff --git a/demo/scripts/controlsV2/demoButtons/tableBorderStyleButton.ts b/demo/scripts/controlsV2/demoButtons/tableBorderStyleButton.ts index d7c6c8d3d6b..0b7c743f375 100644 --- a/demo/scripts/controlsV2/demoButtons/tableBorderStyleButton.ts +++ b/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 = { dashed: 'dashed', diff --git a/demo/scripts/controlsV2/demoButtons/tableBorderWidthButton.ts b/demo/scripts/controlsV2/demoButtons/tableBorderWidthButton.ts index 7becc29f296..3535792aaed 100644 --- a/demo/scripts/controlsV2/demoButtons/tableBorderWidthButton.ts +++ b/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]; diff --git a/demo/scripts/controlsV2/demoButtons/tableEditButtons.ts b/demo/scripts/controlsV2/demoButtons/tableEditButtons.ts index e4bea2ba057..1a374b2f7e5 100644 --- a/demo/scripts/controlsV2/demoButtons/tableEditButtons.ts +++ b/demo/scripts/controlsV2/demoButtons/tableEditButtons.ts @@ -1,6 +1,7 @@ import { editTable } from 'roosterjs-content-model-api'; import { TableOperation } from 'roosterjs-content-model-types'; -import { +import type { + RibbonButton, TableEditAlignMenuItemStringKey, TableEditAlignTableMenuItemStringKey, TableEditDeleteMenuItemStringKey, @@ -8,8 +9,7 @@ import { TableEditMenuItemStringKey, TableEditMergeMenuItemStringKey, TableEditSplitMenuItemStringKey, -} from '../roosterjsReact/contextMenu'; -import type { RibbonButton } from '../roosterjsReact/ribbon'; +} from 'roosterjs-react'; const TableEditOperationMap: Partial> = { menuNameTableInsertAbove: 'insertAbove', diff --git a/demo/scripts/controlsV2/demoButtons/tableOptionsButton.ts b/demo/scripts/controlsV2/demoButtons/tableOptionsButton.ts index d5be61d9517..e6319c75e25 100644 --- a/demo/scripts/controlsV2/demoButtons/tableOptionsButton.ts +++ b/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 = { key: 'buttonNameExport', diff --git a/demo/scripts/controlsV2/sidePane/contentModel/buttons/importModelButton.ts b/demo/scripts/controlsV2/sidePane/contentModel/buttons/importModelButton.ts index ab153a4975d..deada1a56d1 100644 --- a/demo/scripts/controlsV2/sidePane/contentModel/buttons/importModelButton.ts +++ b/demo/scripts/controlsV2/sidePane/contentModel/buttons/importModelButton.ts @@ -1,6 +1,6 @@ import { isBlockGroupOfType } from 'roosterjs-content-model-dom'; -import { showInputDialog } from '../../../roosterjsReact/inputDialog/utils/showInputDialog'; -import type { RibbonButton } from '../../../roosterjsReact/ribbon/type/RibbonButton'; +import { showInputDialog } from 'roosterjs-react'; +import type { RibbonButton } from 'roosterjs-react'; /** * @internal diff --git a/demo/scripts/controlsV2/sidePane/contentModel/buttons/refreshButton.ts b/demo/scripts/controlsV2/sidePane/contentModel/buttons/refreshButton.ts index 01c6faa486b..3d4b119d0fb 100644 --- a/demo/scripts/controlsV2/sidePane/contentModel/buttons/refreshButton.ts +++ b/demo/scripts/controlsV2/sidePane/contentModel/buttons/refreshButton.ts @@ -1,5 +1,5 @@ import { ContentModelPanePlugin } from '../ContentModelPanePlugin'; -import { RibbonButton } from '../../../roosterjsReact/ribbon'; +import type { RibbonButton } from 'roosterjs-react'; export function getRefreshButton( plugin: ContentModelPanePlugin diff --git a/demo/scripts/controlsV2/tabs/getTabs.ts b/demo/scripts/controlsV2/tabs/getTabs.ts index cbb2474d08b..2d19408f5cf 100644 --- a/demo/scripts/controlsV2/tabs/getTabs.ts +++ b/demo/scripts/controlsV2/tabs/getTabs.ts @@ -1,5 +1,5 @@ import { MainPane } from '../mainPane/MainPane'; -import { RibbonButton } from '../roosterjsReact/ribbon'; +import type { RibbonButton } from 'roosterjs-react'; const styles = require('../mainPane/MainPane.scss'); diff --git a/demo/scripts/controlsV2/tabs/ribbonButtons.ts b/demo/scripts/controlsV2/tabs/ribbonButtons.ts index 292b80b3875..6911f0aa9c5 100644 --- a/demo/scripts/controlsV2/tabs/ribbonButtons.ts +++ b/demo/scripts/controlsV2/tabs/ribbonButtons.ts @@ -1,20 +1,6 @@ -import { alignCenterButton } from '../roosterjsReact/ribbon/buttons/alignCenterButton'; -import { alignJustifyButton } from '../roosterjsReact/ribbon/buttons/alignJustifyButton'; -import { alignLeftButton } from '../roosterjsReact/ribbon/buttons/alignLeftButton'; -import { alignRightButton } from '../roosterjsReact/ribbon/buttons/alignRightButton'; -import { backgroundColorButton } from '../roosterjsReact/ribbon/buttons/backgroundColorButton'; -import { blockQuoteButton } from '../roosterjsReact/ribbon/buttons/blockQuoteButton'; -import { boldButton } from '../roosterjsReact/ribbon/buttons/boldButton'; -import { bulletedListButton } from '../roosterjsReact/ribbon/buttons/bulletedListButton'; import { changeImageButton } from '../demoButtons/changeImageButton'; -import { clearFormatButton } from '../roosterjsReact/ribbon/buttons/clearFormatButton'; -import { codeButton } from '../roosterjsReact/ribbon/buttons/codeButton'; import { createFormatPainterButton } from '../demoButtons/formatPainterButton'; import { createImageEditButtons } from '../demoButtons/createImageEditButtons'; -import { decreaseFontSizeButton } from '../roosterjsReact/ribbon/buttons/decreaseFontSizeButton'; -import { decreaseIndentButton } from '../roosterjsReact/ribbon/buttons/decreaseIndentButton'; -import { fontButton } from '../roosterjsReact/ribbon/buttons/fontButton'; -import { fontSizeButton } from '../roosterjsReact/ribbon/buttons/fontSizeButton'; import { FormatPainterPlugin } from '../plugins/FormatPainterPlugin'; import { formatTableButton } from '../demoButtons/formatTableButton'; import { imageBorderColorButton } from '../demoButtons/imageBorderColorButton'; @@ -23,35 +9,19 @@ import { imageBorderStyleButton } from '../demoButtons/imageBorderStyleButton'; import { imageBorderWidthButton } from '../demoButtons/imageBorderWidthButton'; import { imageBoxShadowButton } from '../demoButtons/imageBoxShadowButton'; import { ImageEditor } from 'roosterjs-content-model-types'; -import { increaseFontSizeButton } from '../roosterjsReact/ribbon/buttons/increaseFontSizeButton'; -import { increaseIndentButton } from '../roosterjsReact/ribbon/buttons/increaseIndentButton'; -import { insertImageButton } from '../roosterjsReact/ribbon/buttons/insertImageButton'; -import { insertLinkButton } from '../roosterjsReact/ribbon/buttons/insertLinkButton'; -import { insertTableButton } from '../roosterjsReact/ribbon/buttons/insertTableButton'; -import { italicButton } from '../roosterjsReact/ribbon/buttons/italicButton'; import { listStartNumberButton } from '../demoButtons/listStartNumberButton'; -import { ltrButton } from '../roosterjsReact/ribbon/buttons/ltrButton'; -import { numberedListButton } from '../roosterjsReact/ribbon/buttons/numberedListButton'; import { pasteButton } from '../demoButtons/pasteButton'; -import { removeLinkButton } from '../roosterjsReact/ribbon/buttons/removeLinkButton'; -import { rtlButton } from '../roosterjsReact/ribbon/buttons/rtlButton'; import { setBulletedListStyleButton } from '../demoButtons/setBulletedListStyleButton'; -import { setHeadingLevelButton } from '../roosterjsReact/ribbon/buttons/setHeadingLevelButton'; import { setNumberedListStyleButton } from '../demoButtons/setNumberedListStyleButton'; import { setTableCellShadeButton } from '../demoButtons/setTableCellShadeButton'; import { spaceAfterButton, spaceBeforeButton } from '../demoButtons/spaceBeforeAfterButtons'; import { spacingButton } from '../demoButtons/spacingButton'; -import { strikethroughButton } from '../roosterjsReact/ribbon/buttons/strikethroughButton'; -import { subscriptButton } from '../roosterjsReact/ribbon/buttons/subscriptButton'; -import { superscriptButton } from '../roosterjsReact/ribbon/buttons/superscriptButton'; import { tableBorderApplyButton } from '../demoButtons/tableBorderApplyButton'; import { tableBorderColorButton } from '../demoButtons/tableBorderColorButton'; import { tableBorderStyleButton } from '../demoButtons/tableBorderStyleButton'; import { tableBorderWidthButton } from '../demoButtons/tableBorderWidthButton'; import { tableOptionsButton } from '../demoButtons/tableOptionsButton'; import { tabNames } from './getTabs'; -import { textColorButton } from '../roosterjsReact/ribbon/buttons/textColorButton'; -import { underlineButton } from '../roosterjsReact/ribbon/buttons/underlineButton'; import { tableAlignCellButton, tableAlignTableButton, @@ -60,7 +30,39 @@ import { tableMergeButton, tableSplitButton, } from '../demoButtons/tableEditButtons'; -import type { RibbonButton } from '../roosterjsReact/ribbon'; +import type { RibbonButton } from 'roosterjs-react'; +import { + alignCenterButton, + alignJustifyButton, + alignLeftButton, + alignRightButton, + backgroundColorButton, + blockQuoteButton, + boldButton, + bulletedListButton, + clearFormatButton, + codeButton, + decreaseFontSizeButton, + decreaseIndentButton, + fontButton, + fontSizeButton, + increaseFontSizeButton, + increaseIndentButton, + insertImageButton, + insertLinkButton, + insertTableButton, + italicButton, + ltrButton, + numberedListButton, + removeLinkButton, + rtlButton, + setHeadingLevelButton, + strikethroughButton, + subscriptButton, + superscriptButton, + textColorButton, + underlineButton, +} from 'roosterjs-react'; const textButtons: RibbonButton[] = [ boldButton, diff --git a/demo/scripts/tsconfig.json b/demo/scripts/tsconfig.json index e901de513c9..501fbac8712 100644 --- a/demo/scripts/tsconfig.json +++ b/demo/scripts/tsconfig.json @@ -11,23 +11,14 @@ "preserveConstEnums": false, "noUnusedLocals": true, "paths": { - "roosterjs": ["packages/roosterjs/lib/index"], - "roosterjs/lib/*": ["packages/roosterjs/lib/*"], "roosterjs-color-utils": ["packages/roosterjs-color-utils/lib/index"], - "roosterjs-color-utils/lib/*": ["packages/roosterjs-color-utils/lib/*"], + "roosterjs-react": ["packages/roosterjs-react/lib/index"], "roosterjs-content-model-types": ["packages/roosterjs-content-model-types/lib/index"], - "roosterjs-content-model-types/lib/*": ["packages/roosterjs-content-model-types/lib/*"], "roosterjs-content-model-dom": ["packages/roosterjs-content-model-dom/lib/index"], - "roosterjs-content-model-dom/lib/*": ["packages/roosterjs-content-model-dom/lib/*"], "roosterjs-content-model-core": ["packages/roosterjs-content-model-core/lib/index"], - "roosterjs-content-model-core/lib/*": ["packages/roosterjs-content-model-core/lib/*"], "roosterjs-content-model-api": ["packages/roosterjs-content-model-api/lib/index"], - "roosterjs-content-model-api/lib/*": ["packages/roosterjs-content-model-api/lib/*"], "roosterjs-content-model-plugins": [ "packages/roosterjs-content-model-plugins/lib/index" - ], - "roosterjs-content-model-plugins/lib/*": [ - "packages/roosterjs-content-model-plugins/lib/*" ] } }, diff --git a/package.json b/package.json index 1c84946b287..a600126896a 100644 --- a/package.json +++ b/package.json @@ -88,11 +88,7 @@ }, "dependencies": { "roosterjs-editor-types": "^8.62.0", - "roosterjs-editor-types-compatible": "^8.62.0", - "roosterjs-editor-dom": "^8.62.0", - "roosterjs-editor-core": "^8.62.0", - "roosterjs-editor-api": "^8.62.0", - "roosterjs-editor-plugins": "^8.62.0" + "roosterjs-editor-dom": "^8.62.0" }, "husky": { "hooks": { diff --git a/packages/roosterjs-react/README.md b/packages/roosterjs-react/README.md new file mode 100644 index 00000000000..9336751268a --- /dev/null +++ b/packages/roosterjs-react/README.md @@ -0,0 +1,18 @@ +`roosterjs-react` is a demo package for the following purposes only: + +1. Demonstrate how to use `roosterjs` with `react` +2. Build quick prototype with `roosterjs` +3. Build demo site for roosterjs +4. Test the features of `roosterjs` working with `react` + +We publish this package in order to provide a basic support of the above purposes. + +If this package can fully satisfy your requirement, you also use it in your production code. Otherwise, we recommend to build your +own UI wrapper. We don't provide feature support to this package, including but not limited to: + +- New feature requirement +- Dependency upgrade (e.g. Fluent UI) +- Accessibility issue +- UI layout issue +- Localization issue +- any other issue that is not directly related to `roosterjs` package diff --git a/demo/scripts/controlsV2/roosterjsReact/colorPicker/component/renderColorPicker.tsx b/packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx similarity index 53% rename from demo/scripts/controlsV2/roosterjsReact/colorPicker/component/renderColorPicker.tsx rename to packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx index 7995cfe9d32..97a6120d5ea 100644 --- a/demo/scripts/controlsV2/roosterjsReact/colorPicker/component/renderColorPicker.tsx +++ b/packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx @@ -1,5 +1,12 @@ import * as React from 'react'; +import { BackgroundColorDropDownItems, BackgroundColors } from '../utils/backgroundColors'; import { mergeStyleSets } from '@fluentui/react/lib/Styling'; +import { TextColorDropDownItems, TextColors } from '../utils/textColors'; +import { + getColorPickerContainerClassName, + getColorPickerItemClassName, +} from '../utils/getClassNamesForColorPicker'; +import type { RibbonButtonDropDown } from '../../ribbon/type/RibbonButtonDropDown'; import type { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu'; import type { Colors } from 'roosterjs-content-model-types'; @@ -24,6 +31,10 @@ const classNames = mergeStyleSets({ /** * @internal + * Render a color picker + * @param item Color items + * @param colorDef Definition of colors + * @param onClick On click event handler */ export function renderColorPicker( item: IContextualMenuItem, @@ -52,3 +63,23 @@ export function renderColorPicker( ); } + +/** + * Get a drop down data object of color picker used by drop down button + * @param colorSet The set of color, text or background + * @returns The color picker drop down for ribbon button + */ +export function getColorPickerDropDown(colorSet: 'text' | 'background'): RibbonButtonDropDown { + return { + items: colorSet == 'background' ? BackgroundColorDropDownItems : TextColorDropDownItems, + itemClassName: getColorPickerItemClassName(), + allowLivePreview: true, + itemRender: + colorSet == 'background' + ? (item, onClick) => renderColorPicker(item, BackgroundColors, onClick) + : (item, onClick) => renderColorPicker(item, TextColors, onClick), + commandBarSubMenuProperties: { + className: getColorPickerContainerClassName(), + }, + }; +} diff --git a/demo/scripts/controlsV2/roosterjsReact/colorPicker/index.ts b/packages/roosterjs-react/lib/colorPicker/index.ts similarity index 73% rename from demo/scripts/controlsV2/roosterjsReact/colorPicker/index.ts rename to packages/roosterjs-react/lib/colorPicker/index.ts index f9dbdcfe6e4..3e69b7449ba 100644 --- a/demo/scripts/controlsV2/roosterjsReact/colorPicker/index.ts +++ b/packages/roosterjs-react/lib/colorPicker/index.ts @@ -1,3 +1,4 @@ export { BackgroundColorKeys, TextColorKeys } from './types/stringKeys'; export { getBackgroundColorValue } from './utils/backgroundColors'; export { getTextColorValue } from './utils/textColors'; +export { getColorPickerDropDown } from './component/renderColorPicker'; diff --git a/demo/scripts/controlsV2/roosterjsReact/colorPicker/types/stringKeys.ts b/packages/roosterjs-react/lib/colorPicker/types/stringKeys.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/colorPicker/types/stringKeys.ts rename to packages/roosterjs-react/lib/colorPicker/types/stringKeys.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/colorPicker/utils/backgroundColors.ts b/packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/colorPicker/utils/backgroundColors.ts rename to packages/roosterjs-react/lib/colorPicker/utils/backgroundColors.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/colorPicker/utils/getClassNamesForColorPicker.ts b/packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/colorPicker/utils/getClassNamesForColorPicker.ts rename to packages/roosterjs-react/lib/colorPicker/utils/getClassNamesForColorPicker.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/colorPicker/utils/textColors.ts b/packages/roosterjs-react/lib/colorPicker/utils/textColors.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/colorPicker/utils/textColors.ts rename to packages/roosterjs-react/lib/colorPicker/utils/textColors.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/common/index.ts b/packages/roosterjs-react/lib/common/index.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/index.ts rename to packages/roosterjs-react/lib/common/index.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/common/type/LocalizedStrings.ts b/packages/roosterjs-react/lib/common/type/LocalizedStrings.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/type/LocalizedStrings.ts rename to packages/roosterjs-react/lib/common/type/LocalizedStrings.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/common/type/ReactEditorPlugin.ts b/packages/roosterjs-react/lib/common/type/ReactEditorPlugin.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/type/ReactEditorPlugin.ts rename to packages/roosterjs-react/lib/common/type/ReactEditorPlugin.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/common/type/UIUtilities.ts b/packages/roosterjs-react/lib/common/type/UIUtilities.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/type/UIUtilities.ts rename to packages/roosterjs-react/lib/common/type/UIUtilities.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/common/utils/createUIUtilities.tsx b/packages/roosterjs-react/lib/common/utils/createUIUtilities.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/utils/createUIUtilities.tsx rename to packages/roosterjs-react/lib/common/utils/createUIUtilities.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/common/utils/getLocalizedString.ts b/packages/roosterjs-react/lib/common/utils/getLocalizedString.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/utils/getLocalizedString.ts rename to packages/roosterjs-react/lib/common/utils/getLocalizedString.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/common/utils/renderReactComponent.ts b/packages/roosterjs-react/lib/common/utils/renderReactComponent.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/common/utils/renderReactComponent.ts rename to packages/roosterjs-react/lib/common/utils/renderReactComponent.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/index.ts b/packages/roosterjs-react/lib/contextMenu/index.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/index.ts rename to packages/roosterjs-react/lib/contextMenu/index.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createImageEditMenuProvider.tsx b/packages/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx similarity index 85% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createImageEditMenuProvider.tsx rename to packages/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx index 01faeba620f..66ebe4f9371 100644 --- a/demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createImageEditMenuProvider.tsx +++ b/packages/roosterjs-react/lib/contextMenu/menus/createImageEditMenuProvider.tsx @@ -1,9 +1,8 @@ import { createContextMenuProvider } from '../utils/createContextMenuProvider'; -import { EditorPlugin, IEditor, ImageEditor } from 'roosterjs-content-model-types'; -import { formatImageWithContentModel } from 'roosterjs-content-model-api'; +import { formatImageWithContentModel, setImageAltText } from 'roosterjs-content-model-api'; import { iterateSelections, mutateBlock, updateImageMetadata } from 'roosterjs-content-model-dom'; -import { setImageAltText } from 'roosterjs-content-model-api'; import { showInputDialog } from '../../inputDialog/utils/showInputDialog'; +import type { EditorPlugin, IEditor, ImageEditor } from 'roosterjs-content-model-types'; import type { ContextMenuItem } from '../types/ContextMenuItem'; import type { ImageEditMenuItemStringKey } from '../types/ContextMenuItemStringKeys'; import type { LocalizedStrings } from '../../common/type/LocalizedStrings'; @@ -11,7 +10,7 @@ import type { LocalizedStrings } from '../../common/type/LocalizedStrings'; const MIN_WIDTH = 10; const MIN_HEIGHT = 10; -const ImageAltTextMenuItem: ContextMenuItem = { +const ImageAltTextMenuItem: ContextMenuItem = { key: 'menuNameImageAltText', unlocalizedText: 'Add alternate text', onClick: (_, editor, node, strings, uiUtilities) => { @@ -51,7 +50,7 @@ const sizeMap: { [key in ImageEditMenuItemStringKey]?: number } = { menuNameImageSizeOriginal: 1, }; -const ImageResizeMenuItem: ContextMenuItem = { +const ImageResizeMenuItem: ContextMenuItem = { key: 'menuNameImageResize', unlocalizedText: 'Size', subItems: { @@ -62,11 +61,11 @@ const ImageResizeMenuItem: ContextMenuItem = { }, onClick: (key, editor, _) => { const selection = editor.getDOMSelection(); - if (selection.type !== 'image') { + if (!selection || selection.type !== 'image') { return; } - const percentage = sizeMap[key]; + const percentage = sizeMap[key] ?? 0; if (percentage > 0) { const { naturalWidth, naturalHeight } = selection.image; @@ -142,7 +141,7 @@ const ImageCropMenuItem: ContextMenuItem = { +const ImageRemoveMenuItem: ContextMenuItem = { key: 'menuNameImageRemove', unlocalizedText: 'Remove image', onClick: (_, editor, node) => { @@ -150,7 +149,7 @@ const ImageRemoveMenuItem: ContextMenuItem = { }, }; -const ImageCopyMenuItem: ContextMenuItem = { +const ImageCopyMenuItem: ContextMenuItem = { key: 'menuNameImageCopy', unlocalizedText: 'Copy image', onClick: (_, editor) => { @@ -158,7 +157,7 @@ const ImageCopyMenuItem: ContextMenuItem = { }, }; -const ImageCutMenuItem: ContextMenuItem = { +const ImageCutMenuItem: ContextMenuItem = { key: 'menuNameImageCut', unlocalizedText: 'Cut image', onClick: (_, editor) => { @@ -168,7 +167,7 @@ const ImageCutMenuItem: ContextMenuItem = { function shouldShowImageEditItems(editor: IEditor, _: Node) { const selection = editor.getDOMSelection(); - return selection.type === 'image' && !!selection.image; + return selection?.type === 'image' && !!selection.image; } /** @@ -231,30 +230,37 @@ function resizeByPercentage( ) { formatImageWithContentModel(editor, 'resizeImage', segment => { updateImageMetadata(segment, format => { - format = format || { - naturalWidth, - naturalHeight, - leftPercent: 0, - rightPercent: 0, - topPercent: 0, - bottomPercent: 0, - angleRad: 0, - }; + const validFormat = Object.assign( + { + naturalWidth, + naturalHeight, + leftPercent: 0, + rightPercent: 0, + topPercent: 0, + bottomPercent: 0, + angleRad: 0, + }, + format + ); const newWidth = Math.max( MIN_WIDTH, - format.naturalWidth * (1 - format.leftPercent - format.rightPercent) * percentage + validFormat.naturalWidth * + (1 - validFormat.leftPercent - validFormat.rightPercent) * + percentage ); const newHeight = Math.max( MIN_HEIGHT, - format.naturalHeight * (1 - format.topPercent - format.bottomPercent) * percentage + validFormat.naturalHeight * + (1 - validFormat.topPercent - validFormat.bottomPercent) * + percentage ); - format.widthPx = newWidth; - format.heightPx = newHeight; + validFormat.widthPx = newWidth; + validFormat.heightPx = newHeight; segment.format.width = newWidth + 'px'; segment.format.height = newHeight + 'px'; - return format; + return validFormat; }); }); } diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createListEditMenuProvider.ts b/packages/roosterjs-react/lib/contextMenu/menus/createListEditMenuProvider.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createListEditMenuProvider.ts rename to packages/roosterjs-react/lib/contextMenu/menus/createListEditMenuProvider.ts index 797fc93c375..0c61cbbbcad 100644 --- a/demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createListEditMenuProvider.ts +++ b/packages/roosterjs-react/lib/contextMenu/menus/createListEditMenuProvider.ts @@ -1,8 +1,8 @@ import { createContextMenuProvider } from '../utils/createContextMenuProvider'; -import { EditorPlugin, IEditor } from 'roosterjs-content-model-types'; import { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom'; import { setListStartNumber } from 'roosterjs-content-model-api'; import { showInputDialog } from '../../inputDialog/utils/showInputDialog'; +import type { EditorPlugin, IEditor } from 'roosterjs-content-model-types'; import type { ContextMenuItem } from '../types/ContextMenuItem'; import type { ListNumberMenuItemStringKey } from '../types/ContextMenuItemStringKeys'; import type { LocalizedStrings } from '../../common/type/LocalizedStrings'; diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createTableEditMenuProvider.ts b/packages/roosterjs-react/lib/contextMenu/menus/createTableEditMenuProvider.ts similarity index 96% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createTableEditMenuProvider.ts rename to packages/roosterjs-react/lib/contextMenu/menus/createTableEditMenuProvider.ts index 09771202e49..2ed58ab2765 100644 --- a/demo/scripts/controlsV2/roosterjsReact/contextMenu/menus/createTableEditMenuProvider.ts +++ b/packages/roosterjs-react/lib/contextMenu/menus/createTableEditMenuProvider.ts @@ -1,7 +1,7 @@ -import { Colors, EditorPlugin, IEditor, TableOperation } from 'roosterjs-content-model-types'; import { createContextMenuProvider } from '../utils/createContextMenuProvider'; import { editTable, setTableCellShade } from 'roosterjs-content-model-api'; import { renderColorPicker } from '../../colorPicker/component/renderColorPicker'; +import type { Colors, EditorPlugin, IEditor, TableOperation } from 'roosterjs-content-model-types'; import type { ContextMenuItem } from '../types/ContextMenuItem'; import type { LocalizedStrings } from '../../common/type/LocalizedStrings'; import { @@ -56,7 +56,11 @@ const ColorValues = { }; function onClick(key: TableEditMenuItemStringKey, editor: IEditor) { - editTable(editor, TableEditOperationMap[key]); + const operation = TableEditOperationMap[key]; + + if (operation) { + editTable(editor, operation); + } } const TableEditInsertMenuItem: ContextMenuItem = { diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/plugin/createContextMenuPlugin.tsx b/packages/roosterjs-react/lib/contextMenu/plugin/createContextMenuPlugin.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/plugin/createContextMenuPlugin.tsx rename to packages/roosterjs-react/lib/contextMenu/plugin/createContextMenuPlugin.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/types/ContextMenuItem.ts b/packages/roosterjs-react/lib/contextMenu/types/ContextMenuItem.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/types/ContextMenuItem.ts rename to packages/roosterjs-react/lib/contextMenu/types/ContextMenuItem.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/types/ContextMenuItemStringKeys.ts b/packages/roosterjs-react/lib/contextMenu/types/ContextMenuItemStringKeys.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/types/ContextMenuItemStringKeys.ts rename to packages/roosterjs-react/lib/contextMenu/types/ContextMenuItemStringKeys.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/contextMenu/utils/createContextMenuProvider.ts b/packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts similarity index 98% rename from demo/scripts/controlsV2/roosterjsReact/contextMenu/utils/createContextMenuProvider.ts rename to packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts index 7c350acf928..a99574f9734 100644 --- a/demo/scripts/controlsV2/roosterjsReact/contextMenu/utils/createContextMenuProvider.ts +++ b/packages/roosterjs-react/lib/contextMenu/utils/createContextMenuProvider.ts @@ -56,7 +56,7 @@ class ContextMenuProviderImpl this.targetNode = node; - return editor && this.shouldAddMenuItems?.(this.editor, node) + return editor && this.shouldAddMenuItems?.(editor, node) ? this.items .filter(item => !item.shouldShow || item.shouldShow(editor, node, this.context)) .map(item => this.convertMenuItems(item, node)) diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiIcon.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiIcon.tsx rename to packages/roosterjs-react/lib/emoji/components/EmojiIcon.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiNavBar.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiNavBar.tsx rename to packages/roosterjs-react/lib/emoji/components/EmojiNavBar.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiPane.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx similarity index 99% rename from demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiPane.tsx rename to packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx index 17db04b65c1..50c855cd67a 100644 --- a/demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiPane.tsx +++ b/packages/roosterjs-react/lib/emoji/components/EmojiPane.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout'; -import { CommonEmojis, EmojiFamilyKeys, EmojiList, MoreEmoji } from '../utils/emojiList'; +import { CommonEmojis, EmojiList, MoreEmoji } from '../utils/emojiList'; import { css, KeyCodes, memoizeFunction } from '@fluentui/react/lib/Utilities'; import { EmojiIcon } from './EmojiIcon'; import { EmojiNavBar } from './EmojiNavBar'; @@ -11,6 +11,7 @@ import { mergeStyleSets } from '@fluentui/react/lib/Styling'; import { searchEmojis } from '../utils/searchEmojis'; import { TextField } from '@fluentui/react/lib/TextField'; import { useTheme } from '@fluentui/react/lib/Theme'; +import type { EmojiFamilyKeys } from '../utils/emojiList'; import type { EmojiIconProps } from './EmojiIcon'; import type { EmojiNavBarProps } from './EmojiNavBar'; import type { EmojiStatusBarProps } from './EmojiStatusBar'; diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiStatusBar.tsx b/packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/components/EmojiStatusBar.tsx rename to packages/roosterjs-react/lib/emoji/components/EmojiStatusBar.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/components/showEmojiCallout.tsx b/packages/roosterjs-react/lib/emoji/components/showEmojiCallout.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/components/showEmojiCallout.tsx rename to packages/roosterjs-react/lib/emoji/components/showEmojiCallout.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/index.ts b/packages/roosterjs-react/lib/emoji/index.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/index.ts rename to packages/roosterjs-react/lib/emoji/index.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/plugin/createEmojiPlugin.ts b/packages/roosterjs-react/lib/emoji/plugin/createEmojiPlugin.ts similarity index 93% rename from demo/scripts/controlsV2/roosterjsReact/emoji/plugin/createEmojiPlugin.ts rename to packages/roosterjs-react/lib/emoji/plugin/createEmojiPlugin.ts index 5713bc3d07e..77bcb35c8b7 100644 --- a/demo/scripts/controlsV2/roosterjsReact/emoji/plugin/createEmojiPlugin.ts +++ b/packages/roosterjs-react/lib/emoji/plugin/createEmojiPlugin.ts @@ -1,14 +1,14 @@ import * as React from 'react'; +import { KeyCodes } from '@fluentui/react/lib/Utilities'; +import { MoreEmoji } from '../utils/emojiList'; +import { showEmojiCallout } from '../components/showEmojiCallout'; +import { undo } from 'roosterjs-content-model-core'; import { isModifierKey, isNodeOfType, iterateSelections, mutateSegment, } from 'roosterjs-content-model-dom'; -import { KeyCodes } from '@fluentui/react/lib/Utilities'; -import { MoreEmoji } from '../utils/emojiList'; -import { showEmojiCallout } from '../components/showEmojiCallout'; -import { undo } from 'roosterjs-content-model-core'; import type { EmojiICallout } from '../components/showEmojiCallout'; import type { Emoji } from '../type/Emoji'; import type { EmojiPane } from '../components/EmojiPane'; @@ -77,10 +77,14 @@ class EmojiPlugin implements ReactEditorPlugin { } public onPluginEvent(event: PluginEvent): void { + if (!this.editor) { + return; + } + if (event.eventType === 'keyDown') { this.eventHandledOnKeyDown = false; if (this.isSuggesting) { - this.onKeyDownSuggestingDomEvent(event); + this.onKeyDownSuggestingDomEvent(this.editor, event); } else if (event.rawEvent.key === 'Backspace' && this.canUndoEmoji) { //TODO: 1051 // If KeyDown is backspace and canUndoEmoji, call editor undo @@ -91,9 +95,9 @@ class EmojiPlugin implements ReactEditorPlugin { } } else if (event.eventType === 'keyUp' && !isModifierKey(event.rawEvent)) { if (this.isSuggesting) { - this.onKeyUpSuggestingDomEvent(event); + this.onKeyUpSuggestingDomEvent(this.editor, event); } else { - this.onKeyUpDomEvent(event); + this.onKeyUpDomEvent(this.editor, event); } } else if (event.eventType === 'mouseUp') { //TODO: 1052 @@ -108,11 +112,11 @@ class EmojiPlugin implements ReactEditorPlugin { * Try to insert emoji is possible * Intercept arrow keys to move selection if popup is shown */ - private onKeyDownSuggestingDomEvent(event: KeyDownEvent): void { + private onKeyDownSuggestingDomEvent(editor: IEditor, event: KeyDownEvent): void { // If key is enter, try insert emoji at selection // If key is space and selection is shortcut, try insert emoji - const wordBeforeCursor = this.getWordBeforeCursor(event); + const wordBeforeCursor = this.getWordBeforeCursor(editor); switch (event.rawEvent.key) { case 'Enter': const selectedEmoji = this.paneRef.current?.getSelectedEmoji(); @@ -159,7 +163,7 @@ class EmojiPlugin implements ReactEditorPlugin { * If key is character, update search term * Otherwise set isSuggesting to false */ - private onKeyUpSuggestingDomEvent(event: KeyUpEvent): void { + private onKeyUpSuggestingDomEvent(editor: IEditor, event: KeyUpEvent): void { if (this.eventHandledOnKeyDown) { return; } @@ -175,7 +179,7 @@ class EmojiPlugin implements ReactEditorPlugin { this.emojiCalloutRef.current?.dismiss(); } - const wordBeforeCursor = this.getWordBeforeCursor(event); + const wordBeforeCursor = this.getWordBeforeCursor(editor); if (wordBeforeCursor) { if (this.paneRef) { this.paneRef.current?.setSearch(wordBeforeCursor); @@ -187,7 +191,7 @@ class EmojiPlugin implements ReactEditorPlugin { } } - private onKeyUpDomEvent(event: KeyUpEvent): void { + private onKeyUpDomEvent(editor: IEditor, event: KeyUpEvent): void { if (this.eventHandledOnKeyDown) { return; } @@ -195,7 +199,7 @@ class EmojiPlugin implements ReactEditorPlugin { if ( (event.rawEvent.which === KEYCODE_COLON || event.rawEvent.which === KEYCODE_COLON_FIREFOX) && - this.getWordBeforeCursor(event) === ':' + this.getWordBeforeCursor(editor) === ':' ) { this.setIsSuggesting(true); } @@ -206,7 +210,7 @@ class EmojiPlugin implements ReactEditorPlugin { const rangeNode = selection?.type == 'range' ? selection.range.startContainer : null; const rangeElement = isNodeOfType(rangeNode, 'ELEMENT_NODE') ? rangeNode - : rangeNode.parentElement; + : rangeNode?.parentElement; const rect = rangeElement?.getBoundingClientRect(); if (this.uiUtilities && rect) { @@ -288,10 +292,10 @@ class EmojiPlugin implements ReactEditorPlugin { this.emojiCalloutRef.current?.dismiss(); } - private getWordBeforeCursor(event: PluginEvent): string | null { + private getWordBeforeCursor(editor: IEditor): string | null { let wordBeforeCursor: string | null = null; - this.editor.formatContentModel(model => { + editor.formatContentModel(model => { iterateSelections(model, (_, __, block, segments) => { if ( block?.blockType == 'Paragraph' && diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/type/Emoji.ts b/packages/roosterjs-react/lib/emoji/type/Emoji.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/type/Emoji.ts rename to packages/roosterjs-react/lib/emoji/type/Emoji.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/type/EmojiPaneStyles.ts b/packages/roosterjs-react/lib/emoji/type/EmojiPaneStyles.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/type/EmojiPaneStyles.ts rename to packages/roosterjs-react/lib/emoji/type/EmojiPaneStyles.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/type/EmojiStringKeys.ts b/packages/roosterjs-react/lib/emoji/type/EmojiStringKeys.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/type/EmojiStringKeys.ts rename to packages/roosterjs-react/lib/emoji/type/EmojiStringKeys.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/type/EmojiStrings.ts b/packages/roosterjs-react/lib/emoji/type/EmojiStrings.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/type/EmojiStrings.ts rename to packages/roosterjs-react/lib/emoji/type/EmojiStrings.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/utils/emojiList.ts b/packages/roosterjs-react/lib/emoji/utils/emojiList.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/utils/emojiList.ts rename to packages/roosterjs-react/lib/emoji/utils/emojiList.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/emoji/utils/searchEmojis.ts b/packages/roosterjs-react/lib/emoji/utils/searchEmojis.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/emoji/utils/searchEmojis.ts rename to packages/roosterjs-react/lib/emoji/utils/searchEmojis.ts diff --git a/packages/roosterjs-react/lib/index.ts b/packages/roosterjs-react/lib/index.ts new file mode 100644 index 00000000000..57d3e4a8ce2 --- /dev/null +++ b/packages/roosterjs-react/lib/index.ts @@ -0,0 +1,8 @@ +export * from './common/index'; +export * from './rooster/index'; +export * from './ribbon/index'; +export * from './contextMenu/index'; +export * from './pasteOptions/index'; +export * from './colorPicker/index'; +export * from './emoji/index'; +export * from './inputDialog/index'; diff --git a/demo/scripts/controlsV2/roosterjsReact/inputDialog/component/InputDialog.tsx b/packages/roosterjs-react/lib/inputDialog/component/InputDialog.tsx similarity index 92% rename from demo/scripts/controlsV2/roosterjsReact/inputDialog/component/InputDialog.tsx rename to packages/roosterjs-react/lib/inputDialog/component/InputDialog.tsx index 9576cdd066b..747a977bcc2 100644 --- a/demo/scripts/controlsV2/roosterjsReact/inputDialog/component/InputDialog.tsx +++ b/packages/roosterjs-react/lib/inputDialog/component/InputDialog.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; -import InputDialogItem from './InputDialogItem'; import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button'; +import { Dialog, DialogFooter, DialogType } from '@fluentui/react/lib/Dialog'; import { getLocalizedString } from '../../common/index'; import { getObjectKeys } from 'roosterjs-content-model-dom'; -import { Dialog, DialogFooter, DialogType, IDialogContentProps } from '@fluentui/react/lib/Dialog'; +import { InputDialogItem } from './InputDialogItem'; +import type { IDialogContentProps } from '@fluentui/react/lib/Dialog'; import type { DialogItem } from '../type/DialogItem'; import type { CancelButtonStringKey, @@ -32,7 +33,7 @@ export interface InputDialogProps( +export function InputDialog( props: InputDialogProps ) { const { diff --git a/demo/scripts/controlsV2/roosterjsReact/inputDialog/component/InputDialogItem.tsx b/packages/roosterjs-react/lib/inputDialog/component/InputDialogItem.tsx similarity index 95% rename from demo/scripts/controlsV2/roosterjsReact/inputDialog/component/InputDialogItem.tsx rename to packages/roosterjs-react/lib/inputDialog/component/InputDialogItem.tsx index 69a62c97249..ae968144229 100644 --- a/demo/scripts/controlsV2/roosterjsReact/inputDialog/component/InputDialogItem.tsx +++ b/packages/roosterjs-react/lib/inputDialog/component/InputDialogItem.tsx @@ -31,7 +31,7 @@ const classNames = mergeStyleSets({ /** * @internal */ -export default function InputDialogItem( +export function InputDialogItem( props: InputDialogItemProps ) { const { itemName, strings, items, currentValues, onChanged, onEnterKey, rows } = props; diff --git a/demo/scripts/controlsV2/roosterjsReact/inputDialog/index.ts b/packages/roosterjs-react/lib/inputDialog/index.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/inputDialog/index.ts rename to packages/roosterjs-react/lib/inputDialog/index.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/inputDialog/type/DialogItem.ts b/packages/roosterjs-react/lib/inputDialog/type/DialogItem.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/inputDialog/type/DialogItem.ts rename to packages/roosterjs-react/lib/inputDialog/type/DialogItem.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/inputDialog/utils/showInputDialog.tsx b/packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/inputDialog/utils/showInputDialog.tsx rename to packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx index 1e7746ae38e..1ffddcb3d2e 100644 --- a/demo/scripts/controlsV2/roosterjsReact/inputDialog/utils/showInputDialog.tsx +++ b/packages/roosterjs-react/lib/inputDialog/utils/showInputDialog.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import InputDialog from '../component/InputDialog'; +import { InputDialog } from '../component/InputDialog'; import { renderReactComponent } from '../../common/utils/renderReactComponent'; import type { DialogItem } from '../type/DialogItem'; import type { diff --git a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/component/showPasteOptionPane.tsx b/packages/roosterjs-react/lib/pasteOptions/component/showPasteOptionPane.tsx similarity index 98% rename from demo/scripts/controlsV2/roosterjsReact/pasteOptions/component/showPasteOptionPane.tsx rename to packages/roosterjs-react/lib/pasteOptions/component/showPasteOptionPane.tsx index 809931ca623..8338a521483 100644 --- a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/component/showPasteOptionPane.tsx +++ b/packages/roosterjs-react/lib/pasteOptions/component/showPasteOptionPane.tsx @@ -106,7 +106,10 @@ const PasteOptionComponent = React.forwardRef(function PasteOptionFunc( const classNames = getPasteOptionClassNames(theme); const [selectedKey, setSelectedKey] = React.useState(null); - const rect = getDOMInsertPointRect(useWindow().document, { node: container, offset }); + const rect = getDOMInsertPointRect((useWindow() ?? window).document, { + node: container, + offset, + }); const target = rect && { x: props.isRtl ? rect.left : rect.right, y: rect.bottom }; React.useImperativeHandle( diff --git a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/index.ts b/packages/roosterjs-react/lib/pasteOptions/index.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/pasteOptions/index.ts rename to packages/roosterjs-react/lib/pasteOptions/index.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/plugin/createPasteOptionPlugin.ts b/packages/roosterjs-react/lib/pasteOptions/plugin/createPasteOptionPlugin.ts similarity index 94% rename from demo/scripts/controlsV2/roosterjsReact/pasteOptions/plugin/createPasteOptionPlugin.ts rename to packages/roosterjs-react/lib/pasteOptions/plugin/createPasteOptionPlugin.ts index 949c0cdf73a..bf69967daec 100644 --- a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/plugin/createPasteOptionPlugin.ts +++ b/packages/roosterjs-react/lib/pasteOptions/plugin/createPasteOptionPlugin.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { ButtonKeys, Buttons } from '../utils/buttons'; import { ChangeSource } from 'roosterjs-content-model-dom'; -import { ClipboardData, IEditor, PluginEvent } from 'roosterjs-content-model-types'; import { paste } from 'roosterjs-content-model-core'; import { showPasteOptionPane } from '../component/showPasteOptionPane'; +import type { ClipboardData, IEditor, PluginEvent } from 'roosterjs-content-model-types'; import type { PasteOptionPane } from '../component/showPasteOptionPane'; import type { LocalizedStrings, ReactEditorPlugin, UIUtilities } from '../../common/index'; import type { PasteOptionButtonKeys, PasteOptionStringKeys } from '../type/PasteOptionStringKeys'; @@ -30,9 +30,13 @@ class PasteOptionPlugin implements ReactEditorPlugin { } onPluginEvent(event: PluginEvent) { + if (!this.editor) { + return; + } + if (event.eventType == 'scroll') { if (this.pasteOptionRef.current) { - this.showPasteOptionPane(); + this.showPasteOptionPane(this.editor); } } else if (this.pasteOptionRef.current) { this.handlePasteOptionPaneEvent(event); @@ -43,7 +47,7 @@ class PasteOptionPlugin implements ReactEditorPlugin { // Only show paste option when we pasted HTML with some format if (clipboardData?.text && clipboardData.types?.indexOf('text/html') >= 0) { this.clipboardData = clipboardData; - this.showPasteOptionPane(); + this.showPasteOptionPane(this.editor); } } } @@ -149,10 +153,10 @@ class PasteOptionPlugin implements ReactEditorPlugin { } }; - private showPasteOptionPane() { + private showPasteOptionPane(editor: IEditor) { this.pasteOptionRef.current?.dismiss(); - const selection = this.editor.getDOMSelection(); + const selection = editor.getDOMSelection(); if (selection?.type == 'range' && this.uiUtilities) { showPasteOptionPane( diff --git a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/type/PasteOptionStringKeys.ts b/packages/roosterjs-react/lib/pasteOptions/type/PasteOptionStringKeys.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/pasteOptions/type/PasteOptionStringKeys.ts rename to packages/roosterjs-react/lib/pasteOptions/type/PasteOptionStringKeys.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/pasteOptions/utils/buttons.ts b/packages/roosterjs-react/lib/pasteOptions/utils/buttons.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/pasteOptions/utils/buttons.ts rename to packages/roosterjs-react/lib/pasteOptions/utils/buttons.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignCenterButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/alignCenterButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignCenterButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/alignCenterButton.ts index fe77283fa25..1df2b3c5872 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignCenterButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/alignCenterButton.ts @@ -3,7 +3,6 @@ import type { AlignCenterButtonStringKey } from '../type/RibbonButtonStringKeys' import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Align center" button on the format ribbon */ export const alignCenterButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignJustifyButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/alignJustifyButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignJustifyButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/alignJustifyButton.ts index d565027111e..7ad48b6f1b9 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignJustifyButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/alignJustifyButton.ts @@ -2,7 +2,6 @@ import { setAlignment } from 'roosterjs-content-model-api'; import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Align justify" button on the format ribbon */ export const alignJustifyButton: RibbonButton<'buttonNameAlignJustify'> = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignLeftButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/alignLeftButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignLeftButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/alignLeftButton.ts index ad2c1872ad7..bf6889419a5 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignLeftButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/alignLeftButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { AlignLeftButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Align left" button on the format ribbon */ export const alignLeftButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignRightButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/alignRightButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignRightButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/alignRightButton.ts index bc04dd564ea..394507cbd16 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/alignRightButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/alignRightButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { AlignRightButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Align right" button on the format ribbon */ export const alignRightButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/backgroundColorButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/backgroundColorButton.ts similarity index 99% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/backgroundColorButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/backgroundColorButton.ts index 10332fdba47..f80a92bb882 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/backgroundColorButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/backgroundColorButton.ts @@ -15,7 +15,6 @@ import type { BackgroundColorButtonStringKey } from '../type/RibbonButtonStringK const Key: 'buttonNameBackgroundColor' = 'buttonNameBackgroundColor'; /** - * @internal * "Background color" button on the format ribbon */ export const backgroundColorButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/blockQuoteButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/blockQuoteButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/blockQuoteButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/blockQuoteButton.ts index 4cfad41efea..5afc58f7ec4 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/blockQuoteButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/blockQuoteButton.ts @@ -3,7 +3,6 @@ import type { QuoteButtonStringKey } from '../type/RibbonButtonStringKeys'; import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Block quote" button on the format ribbon */ export const blockQuoteButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/boldButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/boldButton.ts similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/boldButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/boldButton.ts index 8f427c602f8..0fd742471b4 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/boldButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/boldButton.ts @@ -3,14 +3,13 @@ import type { BoldButtonStringKey } from '../type/RibbonButtonStringKeys'; import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Bold" button on the format ribbon */ export const boldButton: RibbonButton = { key: 'buttonNameBold', unlocalizedText: 'Bold', iconName: 'Bold', - isChecked: formatState => formatState.isBold, + isChecked: formatState => !!formatState.isBold, onClick: editor => { toggleBold(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/bulletedListButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/bulletedListButton.ts similarity index 88% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/bulletedListButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/bulletedListButton.ts index 11a9a28a7d0..056d41903f3 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/bulletedListButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/bulletedListButton.ts @@ -3,14 +3,13 @@ import type { BulletedListButtonStringKey } from '../type/RibbonButtonStringKeys import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Bulleted list" button on the format ribbon */ export const bulletedListButton: RibbonButton = { key: 'buttonNameBulletedList', unlocalizedText: 'Bulleted list', iconName: 'BulletedList', - isChecked: formatState => formatState.isBullet, + isChecked: formatState => !!formatState.isBullet, onClick: editor => { toggleBullet(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/clearFormatButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/clearFormatButton.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/clearFormatButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/clearFormatButton.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/codeButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/codeButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/codeButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/codeButton.ts index 373155efd48..15b69e99d75 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/codeButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/codeButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { CodeButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Code" button on the format ribbon */ export const codeButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/decreaseFontSizeButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/decreaseFontSizeButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/decreaseFontSizeButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/decreaseFontSizeButton.ts index f0b649721c4..7aaa8e0a565 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/decreaseFontSizeButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/decreaseFontSizeButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { DecreaseFontSizeButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Decrease font size" button on the format ribbon */ export const decreaseFontSizeButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/decreaseIndentButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/decreaseIndentButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/decreaseIndentButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/decreaseIndentButton.ts index ce5f514cd79..65b2e2835a2 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/decreaseIndentButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/decreaseIndentButton.ts @@ -3,7 +3,6 @@ import type { DecreaseIndentButtonStringKey } from '../type/RibbonButtonStringKe import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Decrease indent" button on the format ribbon */ export const decreaseIndentButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/fontButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/fontButton.ts similarity index 99% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/fontButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/fontButton.ts index 42b088221e5..14b796aaa4d 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/fontButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/fontButton.ts @@ -147,7 +147,6 @@ const LowerCaseFontMap = FontNames.reduce((items, font) => { const FirstFontRegex = /^['"]?([^'",]+)/i; /** - * @internal * "Font" button on the format ribbon */ export const fontButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/fontSizeButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/fontSizeButton.ts similarity index 91% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/fontSizeButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/fontSizeButton.ts index fbe32c8f8bd..2e1daeeaa32 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/fontSizeButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/fontSizeButton.ts @@ -5,7 +5,6 @@ import type { FontSizeButtonStringKey } from '../type/RibbonButtonStringKeys'; const FONT_SIZES = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72]; /** - * @internal * "Font Size" button on the format ribbon */ export const fontSizeButton: RibbonButton = { @@ -17,7 +16,7 @@ export const fontSizeButton: RibbonButton = { map[size + 'pt'] = size.toString(); return map; }, >{}), - getSelectedItemKey: formatState => formatState.fontSize, + getSelectedItemKey: formatState => formatState.fontSize ?? '', allowLivePreview: true, }, onClick: (editor, size) => { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/increaseFontSizeButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/increaseFontSizeButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/increaseFontSizeButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/increaseFontSizeButton.ts index e6984d42723..d06f13aeac6 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/increaseFontSizeButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/increaseFontSizeButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { IncreaseFontSizeButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Increase font size" button on the format ribbon */ export const increaseFontSizeButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/increaseIndentButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/increaseIndentButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/increaseIndentButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/increaseIndentButton.ts index 5c38106d897..56f845726a2 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/increaseIndentButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/increaseIndentButton.ts @@ -3,7 +3,6 @@ import type { IncreaseIndentButtonStringKey } from '../type/RibbonButtonStringKe import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Increase indent" button on the format ribbon */ export const increaseIndentButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertImageButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/insertImageButton.ts similarity index 88% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertImageButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/insertImageButton.ts index 87a6ed89b04..52d551f6fe6 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertImageButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/insertImageButton.ts @@ -1,6 +1,6 @@ import { insertImage } from 'roosterjs-content-model-api'; -import { InsertImageButtonStringKey } from '../type/RibbonButtonStringKeys'; -import { RibbonButton } from '../type/RibbonButton'; +import type { InsertImageButtonStringKey } from '../type/RibbonButtonStringKeys'; +import type { RibbonButton } from '../type/RibbonButton'; function createInput(doc: Document): HTMLInputElement { const input = doc.createElement('input'); @@ -13,7 +13,6 @@ function createInput(doc: Document): HTMLInputElement { } /** - * @internal * "Insert image" button on the format ribbon */ export const insertImageButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertLinkButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/insertLinkButton.ts similarity index 93% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertLinkButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/insertLinkButton.ts index 3ec86029495..e46e2ad31a6 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertLinkButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/insertLinkButton.ts @@ -1,10 +1,9 @@ import { adjustLinkSelection, insertLink } from 'roosterjs-content-model-api'; -import { showInputDialog } from '../../inputDialog'; +import { showInputDialog } from '../../inputDialog/utils/showInputDialog'; import type { InsertLinkButtonStringKey } from '../type/RibbonButtonStringKeys'; import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Insert link" button on the format ribbon */ export const insertLinkButton: RibbonButton = { @@ -18,7 +17,7 @@ export const insertLinkButton: RibbonButton = { autoFocus: true, labelKey: 'insertLinkDialogUrl' as const, unlocalizedLabel: 'Web address (URL)', - initValue: url, + initValue: url ?? '', }, displayText: { labelKey: 'insertLinkDialogDisplayAs' as const, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertTableButton.tsx b/packages/roosterjs-react/lib/ribbon/buttons/insertTableButton.tsx similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertTableButton.tsx rename to packages/roosterjs-react/lib/ribbon/buttons/insertTableButton.tsx index 37418851440..d5c1025ef36 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/insertTableButton.tsx +++ b/packages/roosterjs-react/lib/ribbon/buttons/insertTableButton.tsx @@ -3,7 +3,7 @@ import { FocusZone, FocusZoneDirection } from '@fluentui/react/lib/FocusZone'; import { insertTable } from 'roosterjs-content-model-api'; import { isNodeOfType } from 'roosterjs-content-model-dom'; import { mergeStyleSets } from '@fluentui/react/lib/Styling'; -import { TableCellCoordinate } from 'roosterjs-content-model-types'; +import type { TableCellCoordinate } from 'roosterjs-content-model-types'; import type { RibbonButton } from '../type/RibbonButton'; import type { InsertTableButtonStringKey } from '../type/RibbonButtonStringKeys'; import type { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu'; @@ -37,6 +37,9 @@ const classNames = mergeStyleSets({ }, }); +/** + * "Insert table" button on the format ribbon + */ export const insertTableButton: RibbonButton = { key: 'buttonNameInsertTable', unlocalizedText: 'Insert table', diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/italicButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/italicButton.ts similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/italicButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/italicButton.ts index d98d9ee61da..8604b71b31e 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/italicButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/italicButton.ts @@ -3,14 +3,13 @@ import type { ItalicButtonStringKey } from '../type/RibbonButtonStringKeys'; import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Italic" button on the format ribbon */ export const italicButton: RibbonButton = { key: 'buttonNameItalic', unlocalizedText: 'Italic', iconName: 'Italic', - isChecked: formatState => formatState.isItalic, + isChecked: formatState => !!formatState.isItalic, onClick: editor => { toggleItalic(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/ltrButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/ltrButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/ltrButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/ltrButton.ts index a071d419dee..abb4da52fea 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/ltrButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/ltrButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { LtrButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Left to right" button on the format ribbon */ export const ltrButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/moreCommands.ts b/packages/roosterjs-react/lib/ribbon/buttons/moreCommands.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/moreCommands.ts rename to packages/roosterjs-react/lib/ribbon/buttons/moreCommands.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/numberedListButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/numberedListButton.ts similarity index 88% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/numberedListButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/numberedListButton.ts index b28e54f207b..8033c7e11de 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/numberedListButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/numberedListButton.ts @@ -3,14 +3,13 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { NumberedListButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Numbering list" button on the format ribbon */ export const numberedListButton: RibbonButton = { key: 'buttonNameNumberedList', unlocalizedText: 'Numbered List', iconName: 'NumberedList', - isChecked: formatState => formatState.isNumbering, + isChecked: formatState => !!formatState.isNumbering, onClick: editor => { toggleNumbering(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/redoButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/redoButton.ts similarity index 77% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/redoButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/redoButton.ts index 0f2a68cb78a..3e70cdabb37 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/redoButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/redoButton.ts @@ -1,9 +1,8 @@ import { redo } from 'roosterjs-content-model-core'; -import { RedoButtonStringKey } from '../type/RibbonButtonStringKeys'; -import { RibbonButton } from '../type/RibbonButton'; +import type { RedoButtonStringKey } from '../type/RibbonButtonStringKeys'; +import type { RibbonButton } from '../type/RibbonButton'; /** - * @internal * "Undo" button on the format ribbon */ export const redoButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/removeLinkButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/removeLinkButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/removeLinkButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/removeLinkButton.ts index 8621ddc5bdf..f7735de02c9 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/removeLinkButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/removeLinkButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { RemoveLinkButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Remove link" button on the format ribbon */ export const removeLinkButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/rtlButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/rtlButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/rtlButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/rtlButton.ts index b757d28ad3c..547a1ea12d5 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/rtlButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/rtlButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { RtlButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Right to left" button on the format ribbon */ export const rtlButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/setHeadingLevelButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/setHeadingLevelButton.ts similarity index 95% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/setHeadingLevelButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/setHeadingLevelButton.ts index fd4116db2d8..1294ce48d2a 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/setHeadingLevelButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/setHeadingLevelButton.ts @@ -22,6 +22,9 @@ const headings: Partial> = { buttonNameNoHeading: 'No heading', }; +/** + * "Set header level" button on the format ribbon + */ export const setHeadingLevelButton: RibbonButton = { key: 'buttonNameHeading', unlocalizedText: 'Heading', diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/strikethroughButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/strikethroughButton.ts similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/strikethroughButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/strikethroughButton.ts index c8a5a348e89..0f64a93775c 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/strikethroughButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/strikethroughButton.ts @@ -3,14 +3,13 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { StrikethroughButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Strikethrough" button on the format ribbon */ export const strikethroughButton: RibbonButton = { key: 'buttonNameStrikethrough', unlocalizedText: 'Strikethrough', iconName: 'Strikethrough', - isChecked: formatState => formatState.isStrikeThrough, + isChecked: formatState => !!formatState.isStrikeThrough, onClick: editor => { toggleStrikethrough(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/subscriptButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/subscriptButton.ts similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/subscriptButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/subscriptButton.ts index d6647a5418d..f373351d7ea 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/subscriptButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/subscriptButton.ts @@ -3,14 +3,13 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { SubscriptButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Subscript" button on the format ribbon */ export const subscriptButton: RibbonButton = { key: 'buttonNameSubscript', unlocalizedText: 'Subscript', iconName: 'Subscript', - isChecked: formatState => formatState.isSubscript, + isChecked: formatState => !!formatState.isSubscript, onClick: editor => { toggleSubscript(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/superscriptButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/superscriptButton.ts similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/superscriptButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/superscriptButton.ts index d9bdae7ec43..0c2ef635570 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/superscriptButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/superscriptButton.ts @@ -3,14 +3,13 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { SuperscriptButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Superscript" button on the format ribbon */ export const superscriptButton: RibbonButton = { key: 'buttonNameSuperscript', unlocalizedText: 'Superscript', iconName: 'Superscript', - isChecked: formatState => formatState.isSuperscript, + isChecked: formatState => !!formatState.isSuperscript, onClick: editor => { toggleSuperscript(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/textColorButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/textColorButton.ts similarity index 89% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/textColorButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/textColorButton.ts index 0dbb81d7a29..9cc75005aca 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/textColorButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/textColorButton.ts @@ -1,7 +1,7 @@ import { renderColorPicker } from '../../colorPicker/component/renderColorPicker'; -import { RibbonButton } from '../type/RibbonButton'; import { setTextColor } from 'roosterjs-content-model-api'; -import { TextColorButtonStringKey } from '../type/RibbonButtonStringKeys'; +import type { RibbonButton } from '../type/RibbonButton'; +import type { TextColorButtonStringKey } from '../type/RibbonButtonStringKeys'; import { getTextColorValue, TextColorDropDownItems, @@ -15,7 +15,6 @@ import { const Key: 'buttonNameTextColor' = 'buttonNameTextColor'; /** - * @internal * "Text color" button on the format ribbon */ export const textColorButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/underlineButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/underlineButton.ts similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/underlineButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/underlineButton.ts index 1f0969ece62..e29a7528353 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/underlineButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/underlineButton.ts @@ -3,14 +3,13 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { UnderlineButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Underline" button on the format ribbon */ export const underlineButton: RibbonButton = { key: 'buttonNameUnderline', unlocalizedText: 'Underline', iconName: 'Underline', - isChecked: formatState => formatState.isUnderline, + isChecked: formatState => !!formatState.isUnderline, onClick: editor => { toggleUnderline(editor); }, diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/undoButton.ts b/packages/roosterjs-react/lib/ribbon/buttons/undoButton.ts similarity index 97% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/undoButton.ts rename to packages/roosterjs-react/lib/ribbon/buttons/undoButton.ts index 8b59d345335..04b0bc6ea2f 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/buttons/undoButton.ts +++ b/packages/roosterjs-react/lib/ribbon/buttons/undoButton.ts @@ -3,7 +3,6 @@ import type { RibbonButton } from '../type/RibbonButton'; import type { UndoButtonStringKey } from '../type/RibbonButtonStringKeys'; /** - * @internal * "Undo" button on the format ribbon */ export const undoButton: RibbonButton = { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/component/Ribbon.tsx b/packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx similarity index 87% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/component/Ribbon.tsx rename to packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx index fefa6ffd407..0de2e7d2d44 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/component/Ribbon.tsx +++ b/packages/roosterjs-react/lib/ribbon/component/Ribbon.tsx @@ -1,15 +1,19 @@ import * as React from 'react'; -import { CommandBar, ICommandBarItemProps, ICommandBarProps } from '@fluentui/react/lib/CommandBar'; +import { CommandBar } from '@fluentui/react/lib/CommandBar'; import { FocusZoneDirection } from '@fluentui/react/lib/FocusZone'; -import { getLocalizedString, LocalizedStrings } from '../../common'; +import { getLocalizedString } from '../../common/utils/getLocalizedString'; import { getObjectKeys } from 'roosterjs-content-model-dom'; -import { IContextualMenuItem, IContextualMenuItemProps } from '@fluentui/react/lib/ContextualMenu'; -import { IRenderFunction } from '@fluentui/react/lib/Utilities'; import { mergeStyles } from '@fluentui/react/lib/Styling'; import { moreCommands } from '../buttons/moreCommands'; -import { RibbonPlugin } from '../type/RibbonPlugin'; +import type { + IContextualMenuItem, + IContextualMenuItemProps, +} from '@fluentui/react/lib/ContextualMenu'; +import type { IRenderFunction } from '@fluentui/react/lib/Utilities'; +import type { ICommandBarItemProps } from '@fluentui/react/lib/CommandBar'; import type { RibbonButton } from '../type/RibbonButton'; import type { ContentModelFormatState } from 'roosterjs-content-model-types'; +import type { RibbonProps } from '../type/RibbonProps'; const ribbonClassName = mergeStyles({ '& .ms-CommandBar': { @@ -21,24 +25,6 @@ const rtlIcon = mergeStyles({ transform: 'scaleX(-1)', }); -interface RibbonProps extends Partial { - /** - * The ribbon plugin used for connect editor and the ribbon - */ - plugin: RibbonPlugin; - - /** - * Buttons in this ribbon - */ - buttons: RibbonButton[]; - - /** - * A dictionary of localized strings for all buttons. - * Key of the dictionary is the key of each button, value will be the string or a function to return the string - */ - strings?: LocalizedStrings; -} - /** * The format ribbon component of roosterjs-react * @param props Properties of format ribbon component diff --git a/packages/roosterjs-react/lib/ribbon/index.ts b/packages/roosterjs-react/lib/ribbon/index.ts new file mode 100644 index 00000000000..574da09537d --- /dev/null +++ b/packages/roosterjs-react/lib/ribbon/index.ts @@ -0,0 +1,77 @@ +export { RibbonPlugin } from './type/RibbonPlugin'; +export { RibbonButton } from './type/RibbonButton'; +export { RibbonButtonDropDown } from './type/RibbonButtonDropDown'; +export { RibbonProps } from './type/RibbonProps'; +export { + BoldButtonStringKey, + ItalicButtonStringKey, + UnderlineButtonStringKey, + FontButtonStringKey, + FontSizeButtonStringKey, + IncreaseFontSizeButtonStringKey, + DecreaseFontSizeButtonStringKey, + TextColorButtonStringKey, + BackgroundColorButtonStringKey, + BulletedListButtonStringKey, + NumberedListButtonStringKey, + MoreCommandsButtonStringKey, + DecreaseIndentButtonStringKey, + IncreaseIndentButtonStringKey, + QuoteButtonStringKey, + AlignLeftButtonStringKey, + AlignCenterButtonStringKey, + AlignRightButtonStringKey, + AlignJustifyButtonStringKey, + InsertLinkButtonStringKey, + RemoveLinkButtonStringKey, + InsertTableButtonStringKey, + InsertImageButtonStringKey, + SuperscriptButtonStringKey, + SubscriptButtonStringKey, + StrikethroughButtonStringKey, + HeadingButtonStringKey, + HeaderButtonStringKey, + CodeButtonStringKey, + LtrButtonStringKey, + RtlButtonStringKey, + UndoButtonStringKey, + RedoButtonStringKey, + ClearFormatButtonStringKey, + AllButtonStringKeys, + CellShadeButtonStringKey, +} from './type/RibbonButtonStringKeys'; + +export { Ribbon } from './component/Ribbon'; +export { createRibbonPlugin } from './plugin/createRibbonPlugin'; +export { redoButton } from './buttons/redoButton'; +export { undoButton } from './buttons/undoButton'; +export { alignCenterButton } from './buttons/alignCenterButton'; +export { alignJustifyButton } from './buttons/alignJustifyButton'; +export { alignLeftButton } from './buttons/alignLeftButton'; +export { alignRightButton } from './buttons/alignRightButton'; +export { backgroundColorButton } from './buttons/backgroundColorButton'; +export { blockQuoteButton } from './buttons/blockQuoteButton'; +export { boldButton } from './buttons/boldButton'; +export { bulletedListButton } from './buttons/bulletedListButton'; +export { clearFormatButton } from './buttons/clearFormatButton'; +export { codeButton } from './buttons/codeButton'; +export { decreaseFontSizeButton } from './buttons/decreaseFontSizeButton'; +export { decreaseIndentButton } from './buttons/decreaseIndentButton'; +export { fontButton } from './buttons/fontButton'; +export { fontSizeButton } from './buttons/fontSizeButton'; +export { increaseFontSizeButton } from './buttons/increaseFontSizeButton'; +export { increaseIndentButton } from './buttons/increaseIndentButton'; +export { insertImageButton } from './buttons/insertImageButton'; +export { insertLinkButton } from './buttons/insertLinkButton'; +export { insertTableButton } from './buttons/insertTableButton'; +export { italicButton } from './buttons/italicButton'; +export { ltrButton } from './buttons/ltrButton'; +export { numberedListButton } from './buttons/numberedListButton'; +export { removeLinkButton } from './buttons/removeLinkButton'; +export { rtlButton } from './buttons/rtlButton'; +export { setHeadingLevelButton } from './buttons/setHeadingLevelButton'; +export { strikethroughButton } from './buttons/strikethroughButton'; +export { subscriptButton } from './buttons/subscriptButton'; +export { superscriptButton } from './buttons/superscriptButton'; +export { textColorButton } from './buttons/textColorButton'; +export { underlineButton } from './buttons/underlineButton'; diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/plugin/createRibbonPlugin.ts b/packages/roosterjs-react/lib/ribbon/plugin/createRibbonPlugin.ts similarity index 94% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/plugin/createRibbonPlugin.ts rename to packages/roosterjs-react/lib/ribbon/plugin/createRibbonPlugin.ts index 316f9520651..b77a32a4284 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/plugin/createRibbonPlugin.ts +++ b/packages/roosterjs-react/lib/ribbon/plugin/createRibbonPlugin.ts @@ -1,8 +1,9 @@ -import { ContentModelFormatState, IEditor, PluginEvent } from 'roosterjs-content-model-types'; import { getFormatState } from 'roosterjs-content-model-api'; import { getObjectKeys } from 'roosterjs-content-model-dom'; -import { LocalizedStrings, UIUtilities } from '../../common'; -import { RibbonButton } from '../type/RibbonButton'; +import type { ContentModelFormatState, IEditor, PluginEvent } from 'roosterjs-content-model-types'; +import type { LocalizedStrings } from '../../common/type/LocalizedStrings'; +import type { UIUtilities } from '../../common/type/UIUtilities'; +import type { RibbonButton } from '../type/RibbonButton'; import type { RibbonPlugin } from '../type/RibbonPlugin'; class RibbonPluginImpl implements RibbonPlugin { diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButton.ts b/packages/roosterjs-react/lib/ribbon/type/RibbonButton.ts similarity index 95% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButton.ts rename to packages/roosterjs-react/lib/ribbon/type/RibbonButton.ts index 188bd87004b..fda2938afd3 100644 --- a/demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButton.ts +++ b/packages/roosterjs-react/lib/ribbon/type/RibbonButton.ts @@ -1,5 +1,6 @@ import type { RibbonButtonDropDown } from './RibbonButtonDropDown'; -import type { LocalizedStrings, UIUtilities } from '../../common'; +import type { LocalizedStrings } from '../../common/type/LocalizedStrings'; +import type { UIUtilities } from '../../common/type/UIUtilities'; import type { ContentModelFormatState, IEditor } from 'roosterjs-content-model-types'; import type { ICommandBarItemProps } from '@fluentui/react/lib/CommandBar'; diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButtonDropDown.ts b/packages/roosterjs-react/lib/ribbon/type/RibbonButtonDropDown.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButtonDropDown.ts rename to packages/roosterjs-react/lib/ribbon/type/RibbonButtonDropDown.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButtonStringKeys.ts b/packages/roosterjs-react/lib/ribbon/type/RibbonButtonStringKeys.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonButtonStringKeys.ts rename to packages/roosterjs-react/lib/ribbon/type/RibbonButtonStringKeys.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonPlugin.ts b/packages/roosterjs-react/lib/ribbon/type/RibbonPlugin.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonPlugin.ts rename to packages/roosterjs-react/lib/ribbon/type/RibbonPlugin.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonProps.ts b/packages/roosterjs-react/lib/ribbon/type/RibbonProps.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/ribbon/type/RibbonProps.ts rename to packages/roosterjs-react/lib/ribbon/type/RibbonProps.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/rooster/component/Rooster.tsx b/packages/roosterjs-react/lib/rooster/component/Rooster.tsx similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/rooster/component/Rooster.tsx rename to packages/roosterjs-react/lib/rooster/component/Rooster.tsx diff --git a/demo/scripts/controlsV2/roosterjsReact/rooster/index.ts b/packages/roosterjs-react/lib/rooster/index.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/rooster/index.ts rename to packages/roosterjs-react/lib/rooster/index.ts diff --git a/demo/scripts/controlsV2/roosterjsReact/rooster/type/RoosterProps.ts b/packages/roosterjs-react/lib/rooster/type/RoosterProps.ts similarity index 100% rename from demo/scripts/controlsV2/roosterjsReact/rooster/type/RoosterProps.ts rename to packages/roosterjs-react/lib/rooster/type/RoosterProps.ts diff --git a/packages/roosterjs-react/package.json b/packages/roosterjs-react/package.json new file mode 100644 index 00000000000..e0aa4b9b0e9 --- /dev/null +++ b/packages/roosterjs-react/package.json @@ -0,0 +1,20 @@ +{ + "name": "roosterjs-react", + "description": "React wrapper of roosterjs", + "dependencies": { + "tslib": "^2.3.1", + "roosterjs-content-model-types": "", + "roosterjs-content-model-dom": "", + "roosterjs-content-model-core": "", + "roosterjs-content-model-api": "", + "roosterjs-content-model-plugins": "", + "roosterjs-color-utils": "" + }, + "peerDependencies": { + "react": ">=16.0.0", + "react-dom": ">=16.0.0", + "@fluentui/react": ">=8.0.0" + }, + "version": "0.0.0", + "main": "./lib/index.ts" +} diff --git a/tools/build.js b/tools/build.js index 80f05d76d3f..e5761ea6348 100644 --- a/tools/build.js +++ b/tools/build.js @@ -26,22 +26,22 @@ const allTasks = [ buildMjsStep, buildCommonJsStep, buildTestStep, - // pack.commonJsDebugUi, - // pack.commonJsProdUi, - // pack.amdDebugUi, - // pack.amdProductionUi, pack.commonJsDebugMain, pack.commonJsProdMain, pack.amdDebugMain, pack.amdProdMain, + pack.commonJsDebugUi, + pack.commonJsProdUi, + pack.amdDebugUi, + pack.amdProductionUi, pack.commonJsDebugAdapter, pack.commonJsProdAdapter, pack.amdDebugAdapter, pack.amdProdAdapter, - // dts.dtsCommonJsUi, - // dts.dtsAmdUi, dts.dtsCommonJsMain, dts.dtsAmdMain, + dts.dtsCommonJsUi, + dts.dtsAmdUi, // dts.dtsCommonJsAdapter, // dts.dtsAmdAdapter, buildDemoStep, diff --git a/tools/buildTools/buildCommonJs.js b/tools/buildTools/buildCommonJs.js index 63be5759358..105f174b8b8 100644 --- a/tools/buildTools/buildCommonJs.js +++ b/tools/buildTools/buildCommonJs.js @@ -28,7 +28,14 @@ function buildCommonJs() { const target = path.join(distPath, packageName, fileName); fs.copyFileSync(source, target); }; - copy('README.md'); + + const sourceReadme = path.join(packagesPath, packageName, 'README.md'); + if (fs.existsSync(sourceReadme)) { + fs.copyFileSync(sourceReadme, path.join(distPath, packageName, 'README.md')); + } else { + copy('README.md'); + } + copy('LICENSE'); }); } diff --git a/tools/buildTools/buildDemo.js b/tools/buildTools/buildDemo.js index 780e61dce9f..d1350acf1fd 100644 --- a/tools/buildTools/buildDemo.js +++ b/tools/buildTools/buildDemo.js @@ -68,7 +68,12 @@ async function buildDemoSite() { }, ], }, - externals: getWebpackExternalCallback([[/^roosterjs-content-model.*/, 'roosterjs']]), + externals: getWebpackExternalCallback([ + [/^roosterjs-editor-plugins\/.*$/, 'roosterjsLegacy'], + [/^roosterjs-react\/.*$/, 'roosterjsReact'], + [/^roosterjs-react$/, 'roosterjsReact'], + [/^roosterjs-content-model.*/, 'roosterjs'], + ]), stats: 'minimal', mode: 'production', optimization: { diff --git a/tools/buildTools/common.js b/tools/buildTools/common.js index dd8edb94048..2e5db4d7dc7 100644 --- a/tools/buildTools/common.js +++ b/tools/buildTools/common.js @@ -140,6 +140,7 @@ const mainPackages = [ 'roosterjs-color-utils', ]; const legacyAdapterPackages = ['roosterjs-editor-adapter']; +const reactPackages = ['roosterjs-react']; const buildConfig = { main: { @@ -162,8 +163,15 @@ const buildConfig = { packages: legacyAdapterPackages, entry: 'roosterjs-editor-adapter', }, - fakeEntry: { - packages: ['roosterjs-legacy'], + react: { + jsFileBaseName: 'rooster-react', + libraryName: 'roosterjsReact', + externalHandler: getWebpackExternalCallback(mainPackages.map(p => [p, 'roosterjs'])), + dependsOnLegacy: false, + dependsOnMain: true, + dependsOnReact: true, + packages: reactPackages, + entry: 'roosterjs-react', }, }; diff --git a/tools/buildTools/dts.js b/tools/buildTools/dts.js index 501bdfdbf6e..26e47fc379b 100644 --- a/tools/buildTools/dts.js +++ b/tools/buildTools/dts.js @@ -475,23 +475,23 @@ function dts(isAmd, target) { } module.exports = { - // dtsCommonJsUi: { - // message: `Generating type definition file (rooster-react.d.ts) for CommonJs...`, - // callback: () => dts(false /*isAmd*/, 'react'), - // enabled: options => options.dts, - // }, - // dtsAmdUi: { - // message: `Generating type definition file (rooster-react-amd.d.ts) for AMD...`, - // callback: () => dts(true /*isAmd*/, 'react'), - // enabled: options => options.dts, - // }, + dtsCommonJsUi: { + message: `Generating type definition file (rooster-react.d.ts) for CommonJs...`, + callback: () => dts(false /*isAmd*/, 'react'), + enabled: options => options.dts, + }, + dtsAmdUi: { + message: `Generating type definition file (rooster-react-amd.d.ts) for AMD...`, + callback: () => dts(true /*isAmd*/, 'react'), + enabled: options => options.dts, + }, dtsCommonJsMain: { - message: `Generating type definition file (rooster-content-model.d.ts) for CommonJs...`, + message: `Generating type definition file (rooster.d.ts) for CommonJs...`, callback: () => dts(false /*isAmd*/, 'main'), enabled: options => options.dts, }, dtsAmdMain: { - message: `Generating type definition file (rooster-content-model-amd.d.ts) for AMD...`, + message: `Generating type definition file (rooster-amd.d.ts) for AMD...`, callback: () => dts(true /*isAmd*/, 'main'), enabled: options => options.dts, }, diff --git a/tools/buildTools/pack.js b/tools/buildTools/pack.js index 0ca1638fe9f..efa2de17283 100644 --- a/tools/buildTools/pack.js +++ b/tools/buildTools/pack.js @@ -67,10 +67,10 @@ function createStep(isProduction, isAmd, target) { } module.exports = { - // commonJsDebugUi: createStep(false /*isProduction*/, false /*isAmd*/, 'react'), - // commonJsProdUi: createStep(true /*isProduction*/, false /*isAmd*/, 'react'), - // amdDebugUi: createStep(false /*isProduction*/, true /*isAmd*/, 'react'), - // amdProductionUi: createStep(true /*isProduction*/, true /*isAmd*/, 'react'), + commonJsDebugUi: createStep(false /*isProduction*/, false /*isAmd*/, 'react'), + commonJsProdUi: createStep(true /*isProduction*/, false /*isAmd*/, 'react'), + amdDebugUi: createStep(false /*isProduction*/, true /*isAmd*/, 'react'), + amdProductionUi: createStep(true /*isProduction*/, true /*isAmd*/, 'react'), commonJsDebugMain: createStep(false /*isProduction*/, false /*isAmd*/, 'main'), commonJsProdMain: createStep(true /*isProduction*/, false /*isAmd*/, 'main'), diff --git a/tools/tsconfig.doc.json b/tools/tsconfig.doc.json index ee9308ee8e6..cd2ec5a0906 100644 --- a/tools/tsconfig.doc.json +++ b/tools/tsconfig.doc.json @@ -21,6 +21,7 @@ "typedocOptions": { "entryPoints": [ "../packages/roosterjs-color-utils/lib/index.ts", + "../packages/roosterjs-react/lib/index.ts", "../packages/roosterjs-content-model-types/lib/index.ts", "../packages/roosterjs-content-model-dom/lib/index.ts", "../packages/roosterjs-content-model-core/lib/index.ts", diff --git a/yarn.lock b/yarn.lock index 123aaf1365c..f216a2a5ad8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5834,24 +5834,6 @@ rimraf@^2.6.3: dependencies: glob "^7.1.3" -roosterjs-editor-api@^8.62.0: - version "8.62.0" - resolved "https://registry.yarnpkg.com/roosterjs-editor-api/-/roosterjs-editor-api-8.62.0.tgz#60831df79835e5c096da1b0136177ef9ad144efb" - integrity sha512-q/uzfPkXQzaGOzSTjDqI/nwEfl59WBfyvyW9tF2dgmqjq+ZH9BAwkRbCb8Qgtz3wkRLuUUzzHIKzIhTvxvcFWQ== - dependencies: - roosterjs-editor-dom "^8.62.0" - roosterjs-editor-types "^8.62.0" - tslib "^2.3.1" - -roosterjs-editor-core@^8.62.0: - version "8.62.0" - resolved "https://registry.yarnpkg.com/roosterjs-editor-core/-/roosterjs-editor-core-8.62.0.tgz#4150b3d63dee8ac4bb458799b8695e73478f799c" - integrity sha512-M6zWXu4MDmZVtlz6BEHCyebNvITbEECg5z4pWIC7ln3vegMgbUjxA3IagYsYeU012TXOq7bYPi21TrTeuKmXSg== - dependencies: - roosterjs-editor-dom "^8.62.0" - roosterjs-editor-types "^8.62.0" - tslib "^2.3.1" - roosterjs-editor-dom@, roosterjs-editor-dom@^8.62.0: version "8.62.0" resolved "https://registry.yarnpkg.com/roosterjs-editor-dom/-/roosterjs-editor-dom-8.62.0.tgz#71a25a724eebf49d4c761532b8126b097874d77a" @@ -5860,23 +5842,6 @@ roosterjs-editor-dom@, roosterjs-editor-dom@^8.62.0: roosterjs-editor-types "^8.62.0" tslib "^2.3.1" -roosterjs-editor-plugins@^8.62.0: - version "8.62.0" - resolved "https://registry.yarnpkg.com/roosterjs-editor-plugins/-/roosterjs-editor-plugins-8.62.0.tgz#d1f9457adb996ae68c9926b1a5444aedb193f6a4" - integrity sha512-+yNMu+mrRyiTEBrJ2PzqOqzRoU31MgxeZClGFQSzoBN2+ZjCm3fZ9XWeIkIT5jg8cpFQ7m0krlQGBU16VuPo9Q== - dependencies: - roosterjs-editor-api "^8.62.0" - roosterjs-editor-dom "^8.62.0" - roosterjs-editor-types "^8.62.0" - tslib "^2.3.1" - -roosterjs-editor-types-compatible@^8.62.0: - version "8.62.0" - resolved "https://registry.yarnpkg.com/roosterjs-editor-types-compatible/-/roosterjs-editor-types-compatible-8.62.0.tgz#f4d6b038dd2d0b3b378be1717ee75d7ee1b06b0c" - integrity sha512-uGtlXmAO/IdbLCYZJppKCmHDx71FXhiDr87Xd6V2wtlG8QK+Onb+v57zQF5BLizOztJKPA0LZhXIBZaPG+T1nA== - dependencies: - roosterjs-editor-types "^8.62.0" - roosterjs-editor-types@, roosterjs-editor-types@^8.62.0: version "8.62.0" resolved "https://registry.yarnpkg.com/roosterjs-editor-types/-/roosterjs-editor-types-8.62.0.tgz#481d1f69304501986bae6a1a9051eceff12e1243"