From b155874d9ddeae85e32d81340fd81b7911758407 Mon Sep 17 00:00:00 2001 From: Yousef Date: Wed, 21 Feb 2024 14:16:07 +0100 Subject: [PATCH] suggestion (#588) * suggestion * Fixed block type dropdown API and small refactor --------- Co-authored-by: Matthew Lipski --- .../App.tsx | 4 +- .../CustomFormattingToolbar.tsx | 6 +-- .../side-menu-buttons/CustomSideMenu.tsx | 10 ++-- .../CustomDragHandleMenu.tsx | 6 +-- .../react-custom-styles/App.tsx | 6 +-- .../react-vanilla-custom-styles/App.tsx | 6 +-- .../src/components-shared/UiComponentTypes.ts | 17 ------- .../FormattingToolbarProps.ts | 4 +- .../DefaultButtons/BasicTextStyleButton.tsx | 2 +- .../DefaultButtons/ColorStyleButton.tsx | 6 +-- .../DefaultButtons/CreateLinkButton.tsx | 4 +- .../DefaultButtons/ImageCaptionButton.tsx | 8 +-- .../DefaultButtons/NestBlockButtons.tsx | 2 +- .../DefaultButtons/ReplaceImageButton.tsx | 2 +- .../DefaultButtons/TextAlignButton.tsx | 2 +- .../DefaultDropdowns/BlockTypeDropdown.tsx | 6 +-- .../mantine/FormattingToolbar.tsx | 29 ++++++----- .../EditHyperlinkMenu/EditHyperlinkMenu.tsx | 4 +- .../mantine/HyperlinkToolbar.tsx | 8 +-- .../ImageToolbar/mantine/ImageToolbar.tsx | 6 +-- .../DefaultButtons/BlockColorsButton.tsx | 2 +- .../DragHandleMenu/mantine/DragHandleMenu.tsx | 16 +++--- .../mantine/DragHandleMenuWrapper.tsx | 8 --- .../components/SideMenu/mantine/SideMenu.tsx | 16 +++--- .../SideMenu/mantine/SideMenuWrapper.tsx | 8 --- .../hooks/useTableHandlesPositioning.ts | 2 +- .../mantine-shared}/ColorPicker/ColorIcon.tsx | 0 .../ColorPicker/ColorPicker.tsx | 0 .../mantine-shared/Toolbar/Toolbar.tsx} | 2 +- .../mantine-shared}/Toolbar/ToolbarButton.tsx | 0 .../Toolbar/ToolbarDropdown.tsx | 2 +- .../Toolbar/ToolbarDropdownItem.tsx | 0 .../Toolbar/ToolbarDropdownTarget.tsx | 0 .../Toolbar/ToolbarInputDropdown.tsx | 0 .../Toolbar/ToolbarInputDropdownButton.tsx | 0 .../Toolbar/ToolbarInputDropdownItem.tsx | 0 .../Tooltip/TooltipContent.tsx | 0 .../react/src/hooks/UiComponentPosition.ts | 7 +++ .../src/hooks/useUIElementPositioning.ts | 2 +- packages/react/src/index.ts | 49 +++++++++---------- tests/src/utils/components/Editor.tsx | 27 +++++----- 41 files changed, 136 insertions(+), 143 deletions(-) delete mode 100644 packages/react/src/components-shared/UiComponentTypes.ts delete mode 100644 packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx delete mode 100644 packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx rename packages/react/src/{components-shared => components/mantine-shared}/ColorPicker/ColorIcon.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/ColorPicker/ColorPicker.tsx (100%) rename packages/react/src/{components-shared/Toolbar/ToolbarWrapper.tsx => components/mantine-shared/Toolbar/Toolbar.tsx} (90%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarButton.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarDropdown.tsx (93%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarDropdownItem.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarDropdownTarget.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarInputDropdown.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarInputDropdownButton.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/Toolbar/ToolbarInputDropdownItem.tsx (100%) rename packages/react/src/{components-shared => components/mantine-shared}/Tooltip/TooltipContent.tsx (100%) create mode 100644 packages/react/src/hooks/UiComponentPosition.ts diff --git a/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx b/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx index 2772589cf..8c52d354a 100644 --- a/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx +++ b/examples/02-ui-components/formatting-toolbar-block-type-items/App.tsx @@ -7,8 +7,8 @@ import { useBlockNote, } from "@blocknote/react"; import "@blocknote/react/style.css"; +import { RiImage2Fill } from "react-icons/ri"; -// TODO: Fix export default function App() { // Creates a new editor instance. const editor = useBlockNote(); @@ -19,7 +19,7 @@ export default function App() { ( [ + blockTypeDropdownItems={[ ...blockTypeDropdownItems, { name: "Specific Image", diff --git a/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx b/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx index 6bffffa23..e5223f134 100644 --- a/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx +++ b/examples/02-ui-components/formatting-toolbar-buttons/CustomFormattingToolbar.tsx @@ -3,11 +3,11 @@ import { BlockTypeDropdown, ColorStyleButton, CreateLinkButton, + FormattingToolbar, ImageCaptionButton, NestBlockButton, ReplaceImageButton, TextAlignButton, - ToolbarWrapper, UnnestBlockButton, } from "@blocknote/react"; @@ -15,7 +15,7 @@ import { CustomButton } from "./CustomButton"; export function CustomFormattingToolbar() { return ( - + @@ -48,6 +48,6 @@ export function CustomFormattingToolbar() { - + ); } diff --git a/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx b/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx index 4b87da864..be924a7f7 100644 --- a/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx +++ b/examples/02-ui-components/side-menu-buttons/CustomSideMenu.tsx @@ -1,13 +1,17 @@ -import { DragHandle, SideMenuProps, SideMenuWrapper } from "@blocknote/react"; +import { + DragHandle, + SideMenu, + SideMenuProps, +} from "@blocknote/react"; import "@blocknote/react/style.css"; import { CustomButton } from "./CustomButton"; export function CustomSideMenu(props: SideMenuProps) { return ( - + - + ); } diff --git a/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx b/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx index 4b4a193cb..81993b47c 100644 --- a/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx +++ b/examples/02-ui-components/side-menu-drag-handle-items/CustomDragHandleMenu.tsx @@ -1,21 +1,21 @@ import { BlockColorsButton, + DragHandleMenu, DragHandleMenuItem, DragHandleMenuProps, - DragHandleMenuWrapper, RemoveBlockButton, } from "@blocknote/react"; import "@blocknote/react/style.css"; export function CustomDragHandleMenu(props: DragHandleMenuProps) { return ( - + Delete Colors {/*Custom item which opens an alert when clicked.*/} window.alert("Button Pressed!")}> Open Alert - + ); } diff --git a/examples/06-custom-schema/react-custom-styles/App.tsx b/examples/06-custom-schema/react-custom-styles/App.tsx index e0139d443..8c7627f1f 100644 --- a/examples/06-custom-schema/react-custom-styles/App.tsx +++ b/examples/06-custom-schema/react-custom-styles/App.tsx @@ -7,10 +7,10 @@ import { } from "@blocknote/core"; import { BlockNoteView, + FormattingToolbar, FormattingToolbarController, FormattingToolbarProps, ToolbarButton, - ToolbarWrapper, createReactStyleSpec, useActiveStyles, useBlockNote, @@ -62,7 +62,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => { const activeStyles = useActiveStyles(editor); return ( - + { @@ -83,7 +83,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => { isSelected={!!activeStyles.fontSize}> Font size - + ); }; diff --git a/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx index 8f54aee78..99768bcd9 100644 --- a/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx +++ b/examples/09-vanilla-js/react-vanilla-custom-styles/App.tsx @@ -7,10 +7,10 @@ import { } from "@blocknote/core"; import { BlockNoteView, + FormattingToolbar, FormattingToolbarController, FormattingToolbarProps, ToolbarButton, - ToolbarWrapper, useActiveStyles, useBlockNote, useBlockNoteEditor, @@ -67,7 +67,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => { const activeStyles = useActiveStyles(editor); return ( - + { @@ -88,7 +88,7 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => { isSelected={!!activeStyles.fontSize}> Font size - + ); }; diff --git a/packages/react/src/components-shared/UiComponentTypes.ts b/packages/react/src/components-shared/UiComponentTypes.ts deleted file mode 100644 index cc2b29945..000000000 --- a/packages/react/src/components-shared/UiComponentTypes.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { BlockNoteEditor } from "@blocknote/core"; -import { CSSProperties } from "react"; - -export type UiComponentData< - UiElementData, - UiElementPluginName extends keyof BlockNoteEditor -> = UiElementData & - Omit< - BlockNoteEditor[UiElementPluginName], - "plugin" | "on" | "onPositionUpdate" | "onDataUpdate" | "off" - >; - -export type UiComponentPosition = { - isMounted: boolean; - ref: (node: HTMLElement | null) => void; - style: CSSProperties; -}; diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts index 1c77842fe..158ac4ec3 100644 --- a/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts +++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarProps.ts @@ -1,3 +1,5 @@ +import { BlockTypeDropdownItem } from "./mantine/DefaultDropdowns/BlockTypeDropdown"; + export type FormattingToolbarProps = { - items?: JSX.Element[]; + blockTypeDropdownItems?: BlockTypeDropdownItem[]; }; diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx index 416ee959a..1a4445a8a 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton.tsx @@ -18,7 +18,7 @@ import { IconType } from "react-icons"; import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; type BasicTextStyle = "bold" | "italic" | "underline" | "strike" | "code"; diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx index 3a7af8c2b..e4967e2a2 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton.tsx @@ -11,9 +11,9 @@ import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange"; import { usePreventMenuOverflow } from "../../../../hooks/usePreventMenuOverflow"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; -import { ColorIcon } from "../../../../components-shared/ColorPicker/ColorIcon"; -import { ColorPicker } from "../../../../components-shared/ColorPicker/ColorPicker"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; +import { ColorIcon } from "../../../mantine-shared/ColorPicker/ColorIcon"; +import { ColorPicker } from "../../../mantine-shared/ColorPicker/ColorPicker"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; function checkColorInSchema( color: Color, diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx index 737561192..560803beb 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton.tsx @@ -11,8 +11,8 @@ import { import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; -import { ToolbarInputDropdownButton } from "../../../../components-shared/Toolbar/ToolbarInputDropdownButton"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; +import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton"; import { EditHyperlinkMenu } from "../../../HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu"; // TODO: Make sure Link is in inline content schema diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx index 9300cf259..99c71ff7c 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton.tsx @@ -14,10 +14,10 @@ import { } from "react"; import { RiText } from "react-icons/ri"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; -import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown"; -import { ToolbarInputDropdownButton } from "../../../../components-shared/Toolbar/ToolbarInputDropdownButton"; -import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; +import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown"; +import { ToolbarInputDropdownButton } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownButton"; +import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem"; import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx index 99ddecdf8..aabed5e2d 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx @@ -9,7 +9,7 @@ import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri"; import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; export const NestBlockButton = () => { const editor = useBlockNoteEditor< diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx index 29307ea49..6263817ec 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton.tsx @@ -10,7 +10,7 @@ import { RiImageEditFill } from "react-icons/ri"; import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; import { ImageToolbar } from "../../../ImageToolbar/mantine/ImageToolbar"; export const ReplaceImageButton = () => { diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx index 9557534ae..4ed8d2387 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton.tsx @@ -17,7 +17,7 @@ import { import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; -import { ToolbarButton } from "../../../../components-shared/Toolbar/ToolbarButton"; +import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton"; type TextAlignment = DefaultProps["textAlignment"]; diff --git a/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx index d3a1e7783..105622548 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown.tsx @@ -18,8 +18,8 @@ import { import { useBlockNoteEditor } from "../../../../editor/BlockNoteContext"; import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange"; import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks"; -import { ToolbarDropdownItemProps } from "../../../../components-shared/Toolbar/ToolbarDropdownItem"; -import { ToolbarDropdown } from "../../../../components-shared/Toolbar/ToolbarDropdown"; +import { ToolbarDropdownItemProps } from "../../../mantine-shared/Toolbar/ToolbarDropdownItem"; +import { ToolbarDropdown } from "../../../mantine-shared/Toolbar/ToolbarDropdown"; export type BlockTypeDropdownItem = { name: string; @@ -31,7 +31,7 @@ export type BlockTypeDropdownItem = { ) => boolean; }; -// TODO: Filtering from schema should be done here, not in component +// TODO: Filtering from schema should be done here, not in component? export const blockTypeDropdownItems: BlockTypeDropdownItem[] = [ { name: "Paragraph", diff --git a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx index 9d7e9bd4e..971820d82 100644 --- a/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx +++ b/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx @@ -1,19 +1,19 @@ +import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar"; import { FormattingToolbarProps } from "../FormattingToolbarProps"; -import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper"; -import { - BlockTypeDropdown, - BlockTypeDropdownItem, -} from "./DefaultDropdowns/BlockTypeDropdown"; -import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton"; -import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton"; import { BasicTextStyleButton } from "./DefaultButtons/BasicTextStyleButton"; -import { TextAlignButton } from "./DefaultButtons/TextAlignButton"; import { ColorStyleButton } from "./DefaultButtons/ColorStyleButton"; +import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton"; +import { ImageCaptionButton } from "./DefaultButtons/ImageCaptionButton"; import { NestBlockButton, UnnestBlockButton, } from "./DefaultButtons/NestBlockButtons"; -import { CreateLinkButton } from "./DefaultButtons/CreateLinkButton"; +import { ReplaceImageButton } from "./DefaultButtons/ReplaceImageButton"; +import { TextAlignButton } from "./DefaultButtons/TextAlignButton"; +import { + BlockTypeDropdown, + BlockTypeDropdownItem, +} from "./DefaultDropdowns/BlockTypeDropdown"; export const getFormattingToolbarItems = ( blockTypeDropdownItems?: BlockTypeDropdownItem[] @@ -41,10 +41,13 @@ export const getFormattingToolbarItems = ( ]; // TODO: This is basically the same as `ToolbarWrapper`, seems pretty useless -export const FormattingToolbar = (props: FormattingToolbarProps) => { +export const FormattingToolbar = ( + props: FormattingToolbarProps & { children?: React.ReactNode } +) => { return ( - - {props.items || getFormattingToolbarItems()} - + + {props.children || + getFormattingToolbarItems(props.blockTypeDropdownItems)} + ); }; diff --git a/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx b/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx index bca001770..d5a71daff 100644 --- a/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx +++ b/packages/react/src/components/HyperlinkToolbar/mantine/EditHyperlinkMenu/EditHyperlinkMenu.tsx @@ -9,8 +9,8 @@ import { } from "react"; import { RiLink, RiText } from "react-icons/ri"; -import { ToolbarInputDropdown } from "../../../../components-shared/Toolbar/ToolbarInputDropdown"; -import { ToolbarInputDropdownItem } from "../../../../components-shared/Toolbar/ToolbarInputDropdownItem"; +import { ToolbarInputDropdown } from "../../../mantine-shared/Toolbar/ToolbarInputDropdown"; +import { ToolbarInputDropdownItem } from "../../../mantine-shared/Toolbar/ToolbarInputDropdownItem"; export type EditHyperlinkMenuProps = { url: string; diff --git a/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx b/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx index a25b80edf..88b9ff771 100644 --- a/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx +++ b/packages/react/src/components/HyperlinkToolbar/mantine/HyperlinkToolbar.tsx @@ -3,8 +3,8 @@ import { RiExternalLinkFill, RiLinkUnlink } from "react-icons/ri"; import { HyperlinkToolbarProps } from "../HyperlinkToolbarProps"; import { EditHyperlinkMenu } from "./EditHyperlinkMenu/EditHyperlinkMenu"; -import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper"; -import { ToolbarButton } from "../../../components-shared/Toolbar/ToolbarButton"; +import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar"; +import { ToolbarButton } from "../../mantine-shared/Toolbar/ToolbarButton"; export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => { const [isEditing, setIsEditing] = useState(false); @@ -40,7 +40,7 @@ export const HyperlinkToolbar = (props: HyperlinkToolbarProps) => { } return ( - + { onClick={deleteHyperlink} icon={RiLinkUnlink} /> - + ); }; diff --git a/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx b/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx index dd1ea28bf..bac953ad7 100644 --- a/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx +++ b/packages/react/src/components/ImageToolbar/mantine/ImageToolbar.tsx @@ -23,7 +23,7 @@ import { import { useBlockNoteEditor } from "../../../editor/BlockNoteContext"; import { ImageToolbarProps } from "../ImageToolbarProps"; -import { ToolbarWrapper } from "../../../components-shared/Toolbar/ToolbarWrapper"; +import { Toolbar } from "../../mantine-shared/Toolbar/Toolbar"; export const ImageToolbar = < I extends InlineContentSchema = DefaultInlineContentSchema, @@ -116,7 +116,7 @@ export const ImageToolbar = < }, [editor, props.block, currentURL]); return ( - + {uploading && } @@ -169,6 +169,6 @@ export const ImageToolbar = < - + ); }; diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx index 3e27e26b6..0755b93ee 100644 --- a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx +++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton.tsx @@ -16,7 +16,7 @@ import { useBlockNoteEditor } from "../../../../../editor/BlockNoteContext"; import { usePreventMenuOverflow } from "../../../../../hooks/usePreventMenuOverflow"; import { DragHandleMenuProps } from "../../DragHandleMenuProps"; import { DragHandleMenuItem } from "../DragHandleMenuItem"; -import { ColorPicker } from "../../../../../components-shared/ColorPicker/ColorPicker"; +import { ColorPicker } from "../../../../mantine-shared/ColorPicker/ColorPicker"; export const BlockColorsButton = < BSchema extends BlockSchema = DefaultBlockSchema, diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx index fb9692ba2..0947e4e6f 100644 --- a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx +++ b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenu.tsx @@ -7,8 +7,8 @@ import { StyleSchema, } from "@blocknote/core"; +import { Menu } from "@mantine/core"; import { DragHandleMenuProps } from "../DragHandleMenuProps"; -import { DragHandleMenuWrapper } from "./DragHandleMenuWrapper"; import { BlockColorsButton } from "./DefaultButtons/BlockColorsButton"; import { RemoveBlockButton } from "./DefaultButtons/RemoveBlockButton"; @@ -17,10 +17,14 @@ export const DragHandleMenu = < I extends InlineContentSchema = DefaultInlineContentSchema, S extends StyleSchema = DefaultStyleSchema >( - props: DragHandleMenuProps + props: DragHandleMenuProps & { children?: React.ReactNode } ) => ( - - Delete - Colors - + + {props.children || ( + <> + Delete + Colors + + )} + ); diff --git a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx b/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx deleted file mode 100644 index 702f5ae30..000000000 --- a/packages/react/src/components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Menu } from "@mantine/core"; -import { ReactNode } from "react"; - -export const DragHandleMenuWrapper = (props: { children: ReactNode }) => ( - - {props.children} - -); diff --git a/packages/react/src/components/SideMenu/mantine/SideMenu.tsx b/packages/react/src/components/SideMenu/mantine/SideMenu.tsx index dc7301c9a..5add0472b 100644 --- a/packages/react/src/components/SideMenu/mantine/SideMenu.tsx +++ b/packages/react/src/components/SideMenu/mantine/SideMenu.tsx @@ -7,8 +7,8 @@ import { StyleSchema, } from "@blocknote/core"; +import { Group } from "@mantine/core"; import { SideMenuProps } from "../SideMenuProps"; -import { SideMenuWrapper } from "./SideMenuWrapper"; import { AddBlockButton } from "./DefaultButtons/AddBlockButton"; import { DragHandle } from "./DefaultButtons/DragHandle"; @@ -17,14 +17,18 @@ export const SideMenu = < I extends InlineContentSchema = DefaultInlineContentSchema, S extends StyleSchema = DefaultStyleSchema >( - props: SideMenuProps + props: SideMenuProps & { children?: React.ReactNode } ) => { const { addBlock, ...rest } = props; return ( - - - - + + {props.children || ( + <> + + + + )} + ); }; diff --git a/packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx b/packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx deleted file mode 100644 index 9fc0291ba..000000000 --- a/packages/react/src/components/SideMenu/mantine/SideMenuWrapper.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { Group } from "@mantine/core"; -import { ReactNode } from "react"; - -export const SideMenuWrapper = (props: { children: ReactNode }) => ( - - {props.children} - -); diff --git a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts index 4f1406a81..1c46a8f1a 100644 --- a/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts +++ b/packages/react/src/components/TableHandles/hooks/useTableHandlesPositioning.ts @@ -1,7 +1,7 @@ import { offset, useFloating, useTransitionStyles } from "@floating-ui/react"; import { useEffect, useMemo } from "react"; -import { UiComponentPosition } from "../../../components-shared/UiComponentTypes"; +import { UiComponentPosition } from "../../../hooks/UiComponentPosition"; function getBoundingClientRectRow( referencePosCell: DOMRect | null, diff --git a/packages/react/src/components-shared/ColorPicker/ColorIcon.tsx b/packages/react/src/components/mantine-shared/ColorPicker/ColorIcon.tsx similarity index 100% rename from packages/react/src/components-shared/ColorPicker/ColorIcon.tsx rename to packages/react/src/components/mantine-shared/ColorPicker/ColorIcon.tsx diff --git a/packages/react/src/components-shared/ColorPicker/ColorPicker.tsx b/packages/react/src/components/mantine-shared/ColorPicker/ColorPicker.tsx similarity index 100% rename from packages/react/src/components-shared/ColorPicker/ColorPicker.tsx rename to packages/react/src/components/mantine-shared/ColorPicker/ColorPicker.tsx diff --git a/packages/react/src/components-shared/Toolbar/ToolbarWrapper.tsx b/packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx similarity index 90% rename from packages/react/src/components-shared/Toolbar/ToolbarWrapper.tsx rename to packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx index 207515a77..1bdd7c620 100644 --- a/packages/react/src/components-shared/Toolbar/ToolbarWrapper.tsx +++ b/packages/react/src/components/mantine-shared/Toolbar/Toolbar.tsx @@ -2,7 +2,7 @@ import { mergeCSSClasses } from "@blocknote/core"; import { Group } from "@mantine/core"; import { forwardRef, HTMLAttributes } from "react"; -export const ToolbarWrapper = forwardRef< +export const Toolbar = forwardRef< HTMLDivElement, HTMLAttributes >((props, ref) => { diff --git a/packages/react/src/components-shared/Toolbar/ToolbarButton.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx similarity index 100% rename from packages/react/src/components-shared/Toolbar/ToolbarButton.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx similarity index 93% rename from packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx index 41739565d..d0f76e964 100644 --- a/packages/react/src/components-shared/Toolbar/ToolbarDropdown.tsx +++ b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdown.tsx @@ -4,7 +4,7 @@ import { ToolbarDropdownItemProps, } from "./ToolbarDropdownItem"; import { ToolbarDropdownTarget } from "./ToolbarDropdownTarget"; -import { usePreventMenuOverflow } from "../../hooks/usePreventMenuOverflow"; +import { usePreventMenuOverflow } from "../../../hooks/usePreventMenuOverflow"; export type ToolbarDropdownProps = { items: ToolbarDropdownItemProps[]; diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdownItem.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownItem.tsx similarity index 100% rename from packages/react/src/components-shared/Toolbar/ToolbarDropdownItem.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownItem.tsx diff --git a/packages/react/src/components-shared/Toolbar/ToolbarDropdownTarget.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx similarity index 100% rename from packages/react/src/components-shared/Toolbar/ToolbarDropdownTarget.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdown.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdown.tsx similarity index 100% rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdown.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdown.tsx diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdownButton.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownButton.tsx similarity index 100% rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdownButton.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownButton.tsx diff --git a/packages/react/src/components-shared/Toolbar/ToolbarInputDropdownItem.tsx b/packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownItem.tsx similarity index 100% rename from packages/react/src/components-shared/Toolbar/ToolbarInputDropdownItem.tsx rename to packages/react/src/components/mantine-shared/Toolbar/ToolbarInputDropdownItem.tsx diff --git a/packages/react/src/components-shared/Tooltip/TooltipContent.tsx b/packages/react/src/components/mantine-shared/Tooltip/TooltipContent.tsx similarity index 100% rename from packages/react/src/components-shared/Tooltip/TooltipContent.tsx rename to packages/react/src/components/mantine-shared/Tooltip/TooltipContent.tsx diff --git a/packages/react/src/hooks/UiComponentPosition.ts b/packages/react/src/hooks/UiComponentPosition.ts new file mode 100644 index 000000000..d2f5a18dc --- /dev/null +++ b/packages/react/src/hooks/UiComponentPosition.ts @@ -0,0 +1,7 @@ +import { CSSProperties } from "react"; + +export type UiComponentPosition = { + isMounted: boolean; + ref: (node: HTMLElement | null) => void; + style: CSSProperties; +}; diff --git a/packages/react/src/hooks/useUIElementPositioning.ts b/packages/react/src/hooks/useUIElementPositioning.ts index d69106312..51e0fffab 100644 --- a/packages/react/src/hooks/useUIElementPositioning.ts +++ b/packages/react/src/hooks/useUIElementPositioning.ts @@ -5,7 +5,7 @@ import { } from "@floating-ui/react"; import { useEffect, useMemo } from "react"; -import { UiComponentPosition } from "../components-shared/UiComponentTypes"; +import { UiComponentPosition } from "./UiComponentPosition"; export function useUIElementPositioning( show: boolean, diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 4daeff52f..98eac493b 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -5,59 +5,56 @@ export * from "./editor/BlockNoteTheme"; export * from "./editor/BlockNoteView"; export * from "./editor/defaultThemes"; +export * from "./components/FormattingToolbar/FormattingToolbarController"; +export * from "./components/FormattingToolbar/FormattingToolbarProps"; +export * from "./components/FormattingToolbar/mantine/FormattingToolbar"; +export * from "./components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton"; export * from "./components/FormattingToolbar/mantine/DefaultButtons/ColorStyleButton"; export * from "./components/FormattingToolbar/mantine/DefaultButtons/CreateLinkButton"; export * from "./components/FormattingToolbar/mantine/DefaultButtons/ImageCaptionButton"; export * from "./components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons"; export * from "./components/FormattingToolbar/mantine/DefaultButtons/ReplaceImageButton"; export * from "./components/FormattingToolbar/mantine/DefaultButtons/TextAlignButton"; -export * from "./components/FormattingToolbar/mantine/DefaultButtons/BasicTextStyleButton"; export * from "./components/FormattingToolbar/mantine/DefaultDropdowns/BlockTypeDropdown"; -export * from "./components/FormattingToolbar/mantine/FormattingToolbar"; -export * from "./components/FormattingToolbar/FormattingToolbarProps"; -export * from "./components/FormattingToolbar/FormattingToolbarController"; -export * from "./components/HyperlinkToolbar/mantine/HyperlinkToolbar"; -export * from "./components/HyperlinkToolbar/HyperlinkToolbarProps"; export * from "./components/HyperlinkToolbar/HyperlinkToolbarController"; +export * from "./components/HyperlinkToolbar/HyperlinkToolbarProps"; +export * from "./components/HyperlinkToolbar/mantine/HyperlinkToolbar"; +export * from "./components/SideMenu/SideMenuController"; +export * from "./components/SideMenu/SideMenuProps"; +export * from "./components/SideMenu/mantine/SideMenu"; +export * from "./components/SideMenu/mantine/SideMenuButton"; export * from "./components/SideMenu/mantine/DefaultButtons/AddBlockButton"; export * from "./components/SideMenu/mantine/DefaultButtons/DragHandle"; -export * from "./components/SideMenu/mantine/SideMenuButton"; -export * from "./components/SideMenu/mantine/SideMenuWrapper"; -export * from "./components/SideMenu/mantine/SideMenu"; -export * from "./components/SideMenu/SideMenuProps"; -export * from "./components/SideMenu/SideMenuController"; +export * from "./components/SideMenu/DragHandleMenu/DragHandleMenuProps"; +export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenu"; +export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem"; export * from "./components/SideMenu/DragHandleMenu/mantine/DefaultButtons/BlockColorsButton"; export * from "./components/SideMenu/DragHandleMenu/mantine/DefaultButtons/RemoveBlockButton"; -export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuWrapper"; -export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenuItem"; -export * from "./components/SideMenu/DragHandleMenu/mantine/DragHandleMenu"; -export * from "./components/SideMenu/DragHandleMenu/DragHandleMenuProps"; +export * from "./components/SuggestionMenu/getDefaultReactSlashMenuItems"; +export * from "./components/SuggestionMenu/SuggestionMenuController"; +export * from "./components/SuggestionMenu/SuggestionMenuWrapper"; +export * from "./components/SuggestionMenu/types"; export * from "./components/SuggestionMenu/hooks/useCloseSuggestionMenuNoItems"; export * from "./components/SuggestionMenu/hooks/useLoadSuggestionMenuItems"; export * from "./components/SuggestionMenu/hooks/useSuggestionMenuKeyboardNavigation"; -export * from "./components/SuggestionMenu/mantine/SuggestionMenuItem"; export * from "./components/SuggestionMenu/mantine/SuggestionMenu"; -export * from "./components/SuggestionMenu/SuggestionMenuWrapper"; -export * from "./components/SuggestionMenu/SuggestionMenuController"; -export * from "./components/SuggestionMenu/getDefaultReactSlashMenuItems"; -export * from "./components/SuggestionMenu/types"; +export * from "./components/SuggestionMenu/mantine/SuggestionMenuItem"; -export * from "./components/ImageToolbar/mantine/ImageToolbar"; -export * from "./components/ImageToolbar/ImageToolbarProps"; export * from "./components/ImageToolbar/ImageToolbarController"; +export * from "./components/ImageToolbar/ImageToolbarProps"; +export * from "./components/ImageToolbar/mantine/ImageToolbar"; -export * from "./components/TableHandles/mantine/TableHandle"; export * from "./components/TableHandles/TableHandleProps"; export * from "./components/TableHandles/TableHandlesController"; export * from "./components/TableHandles/hooks/useTableHandlesPositioning"; +export * from "./components/TableHandles/mantine/TableHandle"; -export * from "./components-shared/Toolbar/ToolbarWrapper"; -export * from "./components-shared/Toolbar/ToolbarButton"; -export * from "./components-shared/Toolbar/ToolbarDropdown"; +export * from "./components/mantine-shared/Toolbar/ToolbarButton"; +export * from "./components/mantine-shared/Toolbar/ToolbarDropdown"; export * from "./hooks/useActiveStyles"; export * from "./hooks/useBlockNote"; diff --git a/tests/src/utils/components/Editor.tsx b/tests/src/utils/components/Editor.tsx index 61dfb6dd0..9bfb3cb63 100644 --- a/tests/src/utils/components/Editor.tsx +++ b/tests/src/utils/components/Editor.tsx @@ -1,10 +1,11 @@ -import { filterSuggestionItems } from "@blocknote/core"; +import { BlockSchemaFromSpecs, filterSuggestionItems } from "@blocknote/core"; import "@blocknote/core/style.css"; import { BlockNoteDefaultUI, BlockNoteView, - DefaultPositionedSuggestionMenu, + DefaultReactSuggestionItem, getDefaultReactSlashMenuItems, + SuggestionMenuController, useBlockNote, } from "@blocknote/react"; import { Alert, insertAlert } from "../customblocks/Alert"; @@ -22,8 +23,6 @@ const blockSpecs = { // toc: TableOfContents, }; -const defaultItems = getDefaultReactSlashMenuItems(); - const customItems = [ insertAlert, // insertButton, @@ -33,8 +32,6 @@ const customItems = [ // insertTableOfContents, ]; -const allItems = [...defaultItems, ...customItems]; - export default function Editor() { const editor = useBlockNote({ blockSpecs, @@ -50,11 +47,19 @@ export default function Editor() { // TODO: how to customize slashmenu return ( - - filterSuggestionItems(allItems, query)} - onItemClick={(i) => i.onItemClick(editor)} + + + filterSuggestionItems( + [ + ...getDefaultReactSlashMenuItems(editor), + ...customItems, + ] satisfies DefaultReactSuggestionItem< + BlockSchemaFromSpecs + >[], + query + ) + } // suggestionMenuComponent={MantineSuggestionMenu} triggerCharacter="/" />