diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx index b5a5abb6bc..900f1c6080 100644 --- a/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx +++ b/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx @@ -18,6 +18,39 @@ import { import { BlueButton } from "./BlueButton"; +const CustomFormattingToolbar = () => ( + + + + {/* Extra button to toggle blue text & background */} + + + + + + + + + + {/* Extra button to toggle code styles */} + + + + + + + + + + + + + +); + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -80,61 +113,7 @@ export default function App() { // Renders the editor instance. return ( - ( - - - - {/* Extra button to toggle blue text & background */} - - - - - - - - - - {/* Extra button to toggle code styles */} - - - - - - - - - - - - - - )} - /> + ); } diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx index 2ee1da2771..54f6f43d3f 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx @@ -5,6 +5,7 @@ import "@blocknote/mantine/style.css"; import { FormattingToolbarController, blockTypeSelectItems, + useBlockNoteEditor, useCreateBlockNote, BlockTypeSelectItem, FormattingToolbar, @@ -24,6 +25,31 @@ const schema = BlockNoteSchema.create({ }, }); +const CustomFormattingToolbar = () => { + const editor = useBlockNoteEditor< + typeof schema.blockSchema, + typeof schema.inlineContentSchema, + typeof schema.styleSchema + >(); + + return ( + // Uses the default Formatting Toolbar. + + ); +}; + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -53,24 +79,7 @@ export default function App() { return ( {/* Replaces the default Formatting Toolbar */} - ( - // Uses the default Formatting Toolbar. - - )} - /> + ); } diff --git a/examples/03-ui-components/04-side-menu-buttons/src/App.tsx b/examples/03-ui-components/04-side-menu-buttons/src/App.tsx index 96ef099ef3..29e82e9f2f 100644 --- a/examples/03-ui-components/04-side-menu-buttons/src/App.tsx +++ b/examples/03-ui-components/04-side-menu-buttons/src/App.tsx @@ -5,11 +5,20 @@ import { DragHandleButton, SideMenu, SideMenuController, + SideMenuProps, useCreateBlockNote, } from "@blocknote/react"; import { RemoveBlockButton } from "./RemoveBlockButton"; +const CustomSideMenu = (props: SideMenuProps) => ( + + {/* Button which removes the hovered block. */} + + + +); + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -35,15 +44,7 @@ export default function App() { // Renders the editor instance. return ( - ( - - {/* Button which removes the hovered block. */} - - - - )} - /> + ); } diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx index 0ff3a07174..f734898e1a 100644 --- a/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx +++ b/examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx @@ -7,6 +7,7 @@ import { RemoveBlockItem, SideMenu, SideMenuController, + SideMenuProps, useCreateBlockNote, } from "@blocknote/react"; @@ -24,6 +25,10 @@ const CustomDragHandleMenu = () => ( ); +const CustomSideMenu = (props: SideMenuProps) => ( + +); + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -50,11 +55,7 @@ export default function App() { // Renders the editor instance. return ( - ( - - )} - /> + ); } diff --git a/examples/03-ui-components/11-uppy-file-panel/src/App.tsx b/examples/03-ui-components/11-uppy-file-panel/src/App.tsx index 8f4ed37a5b..aa66eedd49 100644 --- a/examples/03-ui-components/11-uppy-file-panel/src/App.tsx +++ b/examples/03-ui-components/11-uppy-file-panel/src/App.tsx @@ -5,6 +5,7 @@ import { FilePanelController, FormattingToolbar, FormattingToolbarController, + FormattingToolbarProps, getFormattingToolbarItems, useCreateBlockNote, } from "@blocknote/react"; @@ -12,6 +13,18 @@ import { import { FileReplaceButton } from "./FileReplaceButton"; import { uploadFile, UppyFilePanel } from "./UppyFilePanel"; +const CustomFormattingToolbar = (props: FormattingToolbarProps) => { + // Replaces default file replace button with one that opens Uppy. + const items = getFormattingToolbarItems(); + items.splice( + items.findIndex((c) => c.key === "replaceFileButton"), + 1, + , + ); + + return {items}; +}; + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -37,19 +50,7 @@ export default function App() { // Renders the editor instance using a React component. return ( - { - // Replaces default file replace button with one that opens Uppy. - const items = getFormattingToolbarItems(); - items.splice( - items.findIndex((c) => c.key === "replaceFileButton"), - 1, - , - ); - - return {items}; - }} - /> + {/* Replaces default file panel with Uppy one. */} diff --git a/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx b/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx index 1714e18a0d..4b44b399d9 100644 --- a/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx +++ b/examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx @@ -6,12 +6,32 @@ import { EditLinkButton, LinkToolbar, LinkToolbarController, + LinkToolbarProps, OpenLinkButton, useCreateBlockNote, } from "@blocknote/react"; import { AlertButton } from "./AlertButton"; +const CustomLinkToolbar = (props: LinkToolbarProps) => ( + + + + + {/* Extra button to open alert. */} + + +); + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -49,26 +69,7 @@ export default function App() { // Renders the editor instance. return ( - ( - - - - - {/* Extra button to open alert. */} - - - )} - /> + ); } diff --git a/examples/06-custom-schema/03-font-style/src/App.tsx b/examples/06-custom-schema/03-font-style/src/App.tsx index 4cae9935b1..25667f9d70 100644 --- a/examples/06-custom-schema/03-font-style/src/App.tsx +++ b/examples/06-custom-schema/03-font-style/src/App.tsx @@ -60,6 +60,36 @@ const SetFontStyleButton = () => { ); }; +const CustomFormattingToolbar = () => ( + + + + + + + + + + + {/* Adds SetFontStyleButton */} + + + + + + + + + + + + + +); + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -100,55 +130,7 @@ export default function App() { return ( {/* Replaces the default Formatting Toolbar. */} - ( - - - - - - - - - - - {/* Adds SetFontStyleButton */} - - - - - - - - - - - - - - )} - /> + ); } diff --git a/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx b/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx index 625dcce896..09393854b6 100644 --- a/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx +++ b/examples/06-custom-schema/05-alert-block-full-ux/src/App.tsx @@ -13,6 +13,7 @@ import { SuggestionMenuController, blockTypeSelectItems, getDefaultReactSlashMenuItems, + useBlockNoteEditor, useCreateBlockNote, } from "@blocknote/react"; @@ -28,6 +29,31 @@ const schema = BlockNoteSchema.create().extend({ }, }); +const CustomFormattingToolbar = () => { + const editor = useBlockNoteEditor< + typeof schema.blockSchema, + typeof schema.inlineContentSchema, + typeof schema.styleSchema + >(); + + return ( + // Uses the default Formatting Toolbar. + + ); +}; + // Slash menu item to insert an Alert block const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({ title: "Alert", @@ -85,24 +111,7 @@ export default function App() { return ( {/* Replaces the default Formatting Toolbar */} - ( - // Uses the default Formatting Toolbar. - - )} - /> + {/* Replaces the default Slash Menu. */} ( + + {...getFormattingToolbarItems()} + {/* Add the AI button */} + + +); + +// Slash menu items with the AI option added +const getSlashMenuItemsWithAI = (editor: BlockNoteEditor) => [ + ...getDefaultReactSlashMenuItems(editor), + // add the default AI slash menu items, or define your own + ...getAISlashMenuItems(editor), +]; + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -84,54 +99,23 @@ export default function App() { {/* Add the AI Command menu to the editor */} - {/* We disabled the default formatting toolbar with `formattingToolbar=false` - and replace it for one with an "AI button" (defined below). + {/* We disabled the default formatting toolbar with `formattingToolbar=false` + and replace it for one with an "AI button" (defined below). (See "Formatting Toolbar" in docs) */} - + - {/* We disabled the default SlashMenu with `slashMenu=false` - and replace it for one with an AI option (defined below). + {/* We disabled the default SlashMenu with `slashMenu=false` + and replace it for one with an AI option (defined below). (See "Suggestion Menus" in docs) */} - + + filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) + } + /> ); } - -// Formatting toolbar with the `AIToolbarButton` added -function FormattingToolbarWithAI() { - return ( - ( - - {...getFormattingToolbarItems()} - {/* Add the AI button */} - - - )} - /> - ); -} - -// Slash menu with the AI option added -function SuggestionMenuWithAI(props: { - editor: BlockNoteEditor; -}) { - return ( - - filterSuggestionItems( - [ - ...getDefaultReactSlashMenuItems(props.editor), - // add the default AI slash menu items, or define your own - ...getAISlashMenuItems(props.editor), - ], - query, - ) - } - /> - ); -} diff --git a/examples/09-ai/02-playground/src/App.tsx b/examples/09-ai/02-playground/src/App.tsx index ace8b47d79..008b17b40a 100644 --- a/examples/09-ai/02-playground/src/App.tsx +++ b/examples/09-ai/02-playground/src/App.tsx @@ -33,6 +33,20 @@ import { getEnv } from "./getEnv"; const BASE_URL = getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai"; +// Formatting toolbar with the `AIToolbarButton` added +const FormattingToolbarWithAI = () => ( + + {...getFormattingToolbarItems()} + + +); + +// Slash menu items with the AI option added +const getSlashMenuItemsWithAI = (editor: BlockNoteEditor) => [ + ...getDefaultReactSlashMenuItems(editor), + ...getAISlashMenuItems(editor), +]; + export default function App() { const [model, setModel] = useState( "groq.chat/llama-3.3-70b-versatile", @@ -129,52 +143,23 @@ export default function App() { {/* Add the AI Command menu to the editor */} - {/* We disabled the default formatting toolbar with `formattingToolbar=false` - and replace it for one with an "AI button" (defined below). + {/* We disabled the default formatting toolbar with `formattingToolbar=false` + and replace it for one with an "AI button" (defined below). (See "Formatting Toolbar" in docs) */} - + {/* We disabled the default SlashMenu with `slashMenu=false` and replace it for one with an AI option (defined below). (See "Suggestion Menus" in docs) */} - + + filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) + } + /> ); } - -// Formatting toolbar with the `AIToolbarButton` added -function FormattingToolbarWithAI() { - return ( - ( - - {...getFormattingToolbarItems()} - - - )} - /> - ); -} - -// Slash menu with the AI option added -function SuggestionMenuWithAI(props: { - editor: BlockNoteEditor; -}) { - return ( - - filterSuggestionItems( - [ - ...getDefaultReactSlashMenuItems(props.editor), - ...getAISlashMenuItems(props.editor), - ], - query, - ) - } - /> - ); -} diff --git a/examples/09-ai/03-custom-ai-menu-items/src/App.tsx b/examples/09-ai/03-custom-ai-menu-items/src/App.tsx index 8eee964b9f..3646cc8d9e 100644 --- a/examples/09-ai/03-custom-ai-menu-items/src/App.tsx +++ b/examples/09-ai/03-custom-ai-menu-items/src/App.tsx @@ -30,6 +30,63 @@ import { addRelatedTopics, makeInformal } from "./customAIMenuItems"; const BASE_URL = getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai"; +function CustomAIMenu() { + return ( + , + aiResponseStatus: + | "user-input" + | "thinking" + | "ai-writing" + | "error" + | "user-reviewing" + | "closed", + ) => { + if (aiResponseStatus === "user-input") { + // Returns different items based on whether the AI Menu was + // opened via the Formatting Toolbar or the Slash Menu. + if (editor.getSelection()) { + return [ + // Gets the default AI Menu items + ...getDefaultAIMenuItems(editor, aiResponseStatus), + // Adds our custom item to make the text more casual. + // Only appears when the AI Menu is opened via the + // Formatting Toolbar. + makeInformal(editor), + ]; + } else { + return [ + // Gets the default AI Menu items + ...getDefaultAIMenuItems(editor, aiResponseStatus), + // Adds our custom item to find related topics. Only + // appears when the AI Menu is opened via the Slash + // Menu. + addRelatedTopics(editor), + ]; + } + } + // for other states, return the default items + return getDefaultAIMenuItems(editor, aiResponseStatus); + }} + /> + ); +} + +// Formatting toolbar with the `AIToolbarButton` added +const FormattingToolbarWithAI = () => ( + + {...getFormattingToolbarItems()} + + +); + +// Slash menu items with the AI option added +const getSlashMenuItemsWithAI = (editor: BlockNoteEditor) => [ + ...getDefaultReactSlashMenuItems(editor), + ...getAISlashMenuItems(editor), +]; + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -85,95 +142,23 @@ export default function App() { as well as our custom ones. */} - {/* We disabled the default formatting toolbar with `formattingToolbar=false` - and replace it for one with an "AI button" (defined below). + {/* We disabled the default formatting toolbar with `formattingToolbar=false` + and replace it for one with an "AI button" (defined below). (See "Formatting Toolbar" in docs) */} - + {/* We disabled the default SlashMenu with `slashMenu=false` and replace it for one with an AI option (defined below). (See "Suggestion Menus" in docs) */} - + + filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) + } + /> ); } - -function CustomAIMenu() { - return ( - , - aiResponseStatus: - | "user-input" - | "thinking" - | "ai-writing" - | "error" - | "user-reviewing" - | "closed", - ) => { - if (aiResponseStatus === "user-input") { - // Returns different items based on whether the AI Menu was - // opened via the Formatting Toolbar or the Slash Menu. - if (editor.getSelection()) { - return [ - // Gets the default AI Menu items - ...getDefaultAIMenuItems(editor, aiResponseStatus), - // Adds our custom item to make the text more casual. - // Only appears when the AI Menu is opened via the - // Formatting Toolbar. - makeInformal(editor), - ]; - } else { - return [ - // Gets the default AI Menu items - ...getDefaultAIMenuItems(editor, aiResponseStatus), - // Adds our custom item to find related topics. Only - // appears when the AI Menu is opened via the Slash - // Menu. - addRelatedTopics(editor), - ]; - } - } - // for other states, return the default items - return getDefaultAIMenuItems(editor, aiResponseStatus); - }} - /> - ); -} - -// Formatting toolbar with the `AIToolbarButton` added -function FormattingToolbarWithAI() { - return ( - ( - - {...getFormattingToolbarItems()} - - - )} - /> - ); -} - -// Slash menu with the AI option added -function SuggestionMenuWithAI(props: { - editor: BlockNoteEditor; -}) { - return ( - - filterSuggestionItems( - [ - ...getDefaultReactSlashMenuItems(props.editor), - ...getAISlashMenuItems(props.editor), - ], - query, - ) - } - /> - ); -} diff --git a/examples/09-ai/04-with-collaboration/src/App.tsx b/examples/09-ai/04-with-collaboration/src/App.tsx index 3fd8076ccd..9073141352 100644 --- a/examples/09-ai/04-with-collaboration/src/App.tsx +++ b/examples/09-ai/04-with-collaboration/src/App.tsx @@ -58,6 +58,22 @@ if (isGhostWriting) { const ghostContent = "This demo shows a two-way sync of documents. It allows you to test collaboration features, and see how stable the editor is. "; +// Formatting toolbar with the `AIToolbarButton` added +const FormattingToolbarWithAI = () => ( + + {...getFormattingToolbarItems()} + {/* Add the AI button */} + + +); + +// Slash menu items with the AI option added +const getSlashMenuItemsWithAI = (editor: BlockNoteEditor) => [ + ...getDefaultReactSlashMenuItems(editor), + // add the default AI slash menu items, or define your own + ...getAISlashMenuItems(editor), +]; + export default function App() { const [numGhostWriters, setNumGhostWriters] = useState(1); const [isPaused, setIsPaused] = useState(false); @@ -176,17 +192,22 @@ export default function App() { {/* Add the AI Command menu to the editor */} - {/* We disabled the default formatting toolbar with `formattingToolbar=false` - and replace it for one with an "AI button" (defined below). + {/* We disabled the default formatting toolbar with `formattingToolbar=false` + and replace it for one with an "AI button" (defined below). (See "Formatting Toolbar" in docs) */} - + {/* We disabled the default SlashMenu with `slashMenu=false` and replace it for one with an AI option (defined below). (See "Suggestion Menus" in docs) */} - + + filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) + } + /> {!isGhostWriting && ( @@ -205,39 +226,3 @@ export default function App() { ); } - -// Formatting toolbar with the `AIToolbarButton` added -function FormattingToolbarWithAI() { - return ( - ( - - {...getFormattingToolbarItems()} - {/* Add the AI button */} - - - )} - /> - ); -} - -// Slash menu with the AI option added -function SuggestionMenuWithAI(props: { - editor: BlockNoteEditor; -}) { - return ( - - filterSuggestionItems( - [ - ...getDefaultReactSlashMenuItems(props.editor), - // add the default AI slash menu items, or define your own - ...getAISlashMenuItems(props.editor), - ], - query, - ) - } - /> - ); -} diff --git a/examples/09-ai/06-client-side-transport/src/App.tsx b/examples/09-ai/06-client-side-transport/src/App.tsx index ca7b64518e..14ed72abdb 100644 --- a/examples/09-ai/06-client-side-transport/src/App.tsx +++ b/examples/09-ai/06-client-side-transport/src/App.tsx @@ -28,6 +28,22 @@ import { getEnv } from "./getEnv"; const BASE_URL = getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai"; +// Formatting toolbar with the `AIToolbarButton` added +const FormattingToolbarWithAI = () => ( + + {...getFormattingToolbarItems()} + {/* Add the AI button */} + + +); + +// Slash menu items with the AI option added +const getSlashMenuItemsWithAI = (editor: BlockNoteEditor) => [ + ...getDefaultReactSlashMenuItems(editor), + // add the default AI slash menu items, or define your own + ...getAISlashMenuItems(editor), +]; + // We define the model directly in our app using the Vercel AI SDK const model = createGroq({ // We supply a custom fetch function so that requests are routed through our proxy server @@ -97,54 +113,23 @@ export default function App() { {/* Add the AI Command menu to the editor */} - {/* We disabled the default formatting toolbar with `formattingToolbar=false` - and replace it for one with an "AI button" (defined below). + {/* We disabled the default formatting toolbar with `formattingToolbar=false` + and replace it for one with an "AI button" (defined below). (See "Formatting Toolbar" in docs) */} - + {/* We disabled the default SlashMenu with `slashMenu=false` and replace it for one with an AI option (defined below). (See "Suggestion Menus" in docs) */} - + + filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) + } + /> ); } - -// Formatting toolbar with the `AIToolbarButton` added -function FormattingToolbarWithAI() { - return ( - ( - - {...getFormattingToolbarItems()} - {/* Add the AI button */} - - - )} - /> - ); -} - -// Slash menu with the AI option added -function SuggestionMenuWithAI(props: { - editor: BlockNoteEditor; -}) { - return ( - - filterSuggestionItems( - [ - ...getDefaultReactSlashMenuItems(props.editor), - // add the default AI slash menu items, or define your own - ...getAISlashMenuItems(props.editor), - ], - query, - ) - } - /> - ); -} diff --git a/examples/09-ai/07-server-persistence/src/App.tsx b/examples/09-ai/07-server-persistence/src/App.tsx index a22d9c9e1c..1d07beafac 100644 --- a/examples/09-ai/07-server-persistence/src/App.tsx +++ b/examples/09-ai/07-server-persistence/src/App.tsx @@ -26,6 +26,22 @@ import { getEnv } from "./getEnv"; const BASE_URL = getEnv("BLOCKNOTE_AI_SERVER_BASE_URL") || "https://localhost:3000/ai"; +// Formatting toolbar with the `AIToolbarButton` added +const FormattingToolbarWithAI = () => ( + + {...getFormattingToolbarItems()} + {/* Add the AI button */} + + +); + +// Slash menu items with the AI option added +const getSlashMenuItemsWithAI = (editor: BlockNoteEditor) => [ + ...getDefaultReactSlashMenuItems(editor), + // add the default AI slash menu items, or define your own + ...getAISlashMenuItems(editor), +]; + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ @@ -112,54 +128,23 @@ export default function App() { {/* Add the AI Command menu to the editor */} - {/* We disabled the default formatting toolbar with `formattingToolbar=false` - and replace it for one with an "AI button" (defined below). + {/* We disabled the default formatting toolbar with `formattingToolbar=false` + and replace it for one with an "AI button" (defined below). (See "Formatting Toolbar" in docs) */} - + {/* We disabled the default SlashMenu with `slashMenu=false` and replace it for one with an AI option (defined below). (See "Suggestion Menus" in docs) */} - + + filterSuggestionItems(getSlashMenuItemsWithAI(editor), query) + } + /> ); } - -// Formatting toolbar with the `AIToolbarButton` added -function FormattingToolbarWithAI() { - return ( - ( - - {...getFormattingToolbarItems()} - {/* Add the AI button */} - - - )} - /> - ); -} - -// Slash menu with the AI option added -function SuggestionMenuWithAI(props: { - editor: BlockNoteEditor; -}) { - return ( - - filterSuggestionItems( - [ - ...getDefaultReactSlashMenuItems(props.editor), - // add the default AI slash menu items, or define your own - ...getAISlashMenuItems(props.editor), - ], - query, - ) - } - /> - ); -}