Skip to content

Commit 677fbbf

Browse files
matthewlipskimatthewlipski
authored
docs: refactor custom components in examples (BLO-869) (#2705)
1 parent 5edef6a commit 677fbbf

14 files changed

Lines changed: 361 additions & 469 deletions

File tree

  • examples
    • 03-ui-components
      • 02-formatting-toolbar-buttons/src
      • 03-formatting-toolbar-block-type-items/src
      • 04-side-menu-buttons/src
      • 05-side-menu-drag-handle-items/src
      • 11-uppy-file-panel/src
    • 06-custom-schema
    • 09-ai

‎examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx‎

Lines changed: 34 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,39 @@ import {
1818

1919
import { BlueButton } from "./BlueButton";
2020

21+
const CustomFormattingToolbar = () => (
22+
<FormattingToolbar>
23+
<BlockTypeSelect key={"blockTypeSelect"} />
24+
25+
{/* Extra button to toggle blue text & background */}
26+
<BlueButton key={"customButton"} />
27+
28+
<FileCaptionButton key={"fileCaptionButton"} />
29+
<FileReplaceButton key={"replaceFileButton"} />
30+
31+
<BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
32+
<BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
33+
<BasicTextStyleButton
34+
basicTextStyle={"underline"}
35+
key={"underlineStyleButton"}
36+
/>
37+
<BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
38+
{/* Extra button to toggle code styles */}
39+
<BasicTextStyleButton key={"codeStyleButton"} basicTextStyle={"code"} />
40+
41+
<TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
42+
<TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
43+
<TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />
44+
45+
<ColorStyleButton key={"colorStyleButton"} />
46+
47+
<NestBlockButton key={"nestBlockButton"} />
48+
<UnnestBlockButton key={"unnestBlockButton"} />
49+
50+
<CreateLinkButton key={"createLinkButton"} />
51+
</FormattingToolbar>
52+
);
53+
2154
export default function App() {
2255
// Creates a new editor instance.
2356
const editor = useCreateBlockNote({
@@ -80,61 +113,7 @@ export default function App() {
80113
// Renders the editor instance.
81114
return (
82115
<BlockNoteView editor={editor} formattingToolbar={false}>
83-
<FormattingToolbarController
84-
formattingToolbar={() => (
85-
<FormattingToolbar>
86-
<BlockTypeSelect key={"blockTypeSelect"} />
87-
88-
{/* Extra button to toggle blue text & background */}
89-
<BlueButton key={"customButton"} />
90-
91-
<FileCaptionButton key={"fileCaptionButton"} />
92-
<FileReplaceButton key={"replaceFileButton"} />
93-
94-
<BasicTextStyleButton
95-
basicTextStyle={"bold"}
96-
key={"boldStyleButton"}
97-
/>
98-
<BasicTextStyleButton
99-
basicTextStyle={"italic"}
100-
key={"italicStyleButton"}
101-
/>
102-
<BasicTextStyleButton
103-
basicTextStyle={"underline"}
104-
key={"underlineStyleButton"}
105-
/>
106-
<BasicTextStyleButton
107-
basicTextStyle={"strike"}
108-
key={"strikeStyleButton"}
109-
/>
110-
{/* Extra button to toggle code styles */}
111-
<BasicTextStyleButton
112-
key={"codeStyleButton"}
113-
basicTextStyle={"code"}
114-
/>
115-
116-
<TextAlignButton
117-
textAlignment={"left"}
118-
key={"textAlignLeftButton"}
119-
/>
120-
<TextAlignButton
121-
textAlignment={"center"}
122-
key={"textAlignCenterButton"}
123-
/>
124-
<TextAlignButton
125-
textAlignment={"right"}
126-
key={"textAlignRightButton"}
127-
/>
128-
129-
<ColorStyleButton key={"colorStyleButton"} />
130-
131-
<NestBlockButton key={"nestBlockButton"} />
132-
<UnnestBlockButton key={"unnestBlockButton"} />
133-
134-
<CreateLinkButton key={"createLinkButton"} />
135-
</FormattingToolbar>
136-
)}
137-
/>
116+
<FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
138117
</BlockNoteView>
139118
);
140119
}

‎examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import "@blocknote/mantine/style.css";
55
import {
66
FormattingToolbarController,
77
blockTypeSelectItems,
8+
useBlockNoteEditor,
89
useCreateBlockNote,
910
BlockTypeSelectItem,
1011
FormattingToolbar,
@@ -24,6 +25,31 @@ const schema = BlockNoteSchema.create({
2425
},
2526
});
2627

28+
const CustomFormattingToolbar = () => {
29+
const editor = useBlockNoteEditor<
30+
typeof schema.blockSchema,
31+
typeof schema.inlineContentSchema,
32+
typeof schema.styleSchema
33+
>();
34+
35+
return (
36+
// Uses the default Formatting Toolbar.
37+
<FormattingToolbar
38+
// Sets the items in the Block Type Select.
39+
blockTypeSelectItems={[
40+
// Gets the default Block Type Select items.
41+
...blockTypeSelectItems(editor.dictionary),
42+
// Adds an item for the Alert block.
43+
{
44+
name: "Alert",
45+
type: "alert",
46+
icon: RiAlertFill,
47+
} satisfies BlockTypeSelectItem,
48+
]}
49+
/>
50+
);
51+
};
52+
2753
export default function App() {
2854
// Creates a new editor instance.
2955
const editor = useCreateBlockNote({
@@ -53,24 +79,7 @@ export default function App() {
5379
return (
5480
<BlockNoteView editor={editor} formattingToolbar={false}>
5581
{/* Replaces the default Formatting Toolbar */}
56-
<FormattingToolbarController
57-
formattingToolbar={() => (
58-
// Uses the default Formatting Toolbar.
59-
<FormattingToolbar
60-
// Sets the items in the Block Type Select.
61-
blockTypeSelectItems={[
62-
// Gets the default Block Type Select items.
63-
...blockTypeSelectItems(editor.dictionary),
64-
// Adds an item for the Alert block.
65-
{
66-
name: "Alert",
67-
type: "alert",
68-
icon: RiAlertFill,
69-
} satisfies BlockTypeSelectItem,
70-
]}
71-
/>
72-
)}
73-
/>
82+
<FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
7483
</BlockNoteView>
7584
);
7685
}

‎examples/03-ui-components/04-side-menu-buttons/src/App.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,20 @@ import {
55
DragHandleButton,
66
SideMenu,
77
SideMenuController,
8+
SideMenuProps,
89
useCreateBlockNote,
910
} from "@blocknote/react";
1011

1112
import { RemoveBlockButton } from "./RemoveBlockButton";
1213

14+
const CustomSideMenu = (props: SideMenuProps) => (
15+
<SideMenu {...props}>
16+
{/* Button which removes the hovered block. */}
17+
<RemoveBlockButton />
18+
<DragHandleButton {...props} />
19+
</SideMenu>
20+
);
21+
1322
export default function App() {
1423
// Creates a new editor instance.
1524
const editor = useCreateBlockNote({
@@ -35,15 +44,7 @@ export default function App() {
3544
// Renders the editor instance.
3645
return (
3746
<BlockNoteView editor={editor} sideMenu={false}>
38-
<SideMenuController
39-
sideMenu={(props) => (
40-
<SideMenu {...props}>
41-
{/* Button which removes the hovered block. */}
42-
<RemoveBlockButton />
43-
<DragHandleButton {...props} />
44-
</SideMenu>
45-
)}
46-
/>
47+
<SideMenuController sideMenu={CustomSideMenu} />
4748
</BlockNoteView>
4849
);
4950
}

‎examples/03-ui-components/05-side-menu-drag-handle-items/src/App.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
RemoveBlockItem,
88
SideMenu,
99
SideMenuController,
10+
SideMenuProps,
1011
useCreateBlockNote,
1112
} from "@blocknote/react";
1213

@@ -24,6 +25,10 @@ const CustomDragHandleMenu = () => (
2425
</DragHandleMenu>
2526
);
2627

28+
const CustomSideMenu = (props: SideMenuProps) => (
29+
<SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
30+
);
31+
2732
export default function App() {
2833
// Creates a new editor instance.
2934
const editor = useCreateBlockNote({
@@ -50,11 +55,7 @@ export default function App() {
5055
// Renders the editor instance.
5156
return (
5257
<BlockNoteView editor={editor} sideMenu={false}>
53-
<SideMenuController
54-
sideMenu={(props) => (
55-
<SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
56-
)}
57-
/>
58+
<SideMenuController sideMenu={CustomSideMenu} />
5859
</BlockNoteView>
5960
);
6061
}

‎examples/03-ui-components/11-uppy-file-panel/src/App.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,26 @@ import {
55
FilePanelController,
66
FormattingToolbar,
77
FormattingToolbarController,
8+
FormattingToolbarProps,
89
getFormattingToolbarItems,
910
useCreateBlockNote,
1011
} from "@blocknote/react";
1112

1213
import { FileReplaceButton } from "./FileReplaceButton";
1314
import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
1415

16+
const CustomFormattingToolbar = (props: FormattingToolbarProps) => {
17+
// Replaces default file replace button with one that opens Uppy.
18+
const items = getFormattingToolbarItems();
19+
items.splice(
20+
items.findIndex((c) => c.key === "replaceFileButton"),
21+
1,
22+
<FileReplaceButton key={"fileReplaceButton"} />,
23+
);
24+
25+
return <FormattingToolbar {...props}>{items}</FormattingToolbar>;
26+
};
27+
1528
export default function App() {
1629
// Creates a new editor instance.
1730
const editor = useCreateBlockNote({
@@ -37,19 +50,7 @@ export default function App() {
3750
// Renders the editor instance using a React component.
3851
return (
3952
<BlockNoteView editor={editor} formattingToolbar={false} filePanel={false}>
40-
<FormattingToolbarController
41-
formattingToolbar={(props) => {
42-
// Replaces default file replace button with one that opens Uppy.
43-
const items = getFormattingToolbarItems();
44-
items.splice(
45-
items.findIndex((c) => c.key === "replaceFileButton"),
46-
1,
47-
<FileReplaceButton key={"fileReplaceButton"} />,
48-
);
49-
50-
return <FormattingToolbar {...props}>{items}</FormattingToolbar>;
51-
}}
52-
/>
53+
<FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
5354
{/* Replaces default file panel with Uppy one. */}
5455
<FilePanelController filePanel={UppyFilePanel} />
5556
</BlockNoteView>

‎examples/03-ui-components/16-link-toolbar-buttons/src/App.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,32 @@ import {
66
EditLinkButton,
77
LinkToolbar,
88
LinkToolbarController,
9+
LinkToolbarProps,
910
OpenLinkButton,
1011
useCreateBlockNote,
1112
} from "@blocknote/react";
1213

1314
import { AlertButton } from "./AlertButton";
1415

16+
const CustomLinkToolbar = (props: LinkToolbarProps) => (
17+
<LinkToolbar {...props}>
18+
<EditLinkButton
19+
url={props.url}
20+
text={props.text}
21+
range={props.range}
22+
setToolbarOpen={props.setToolbarOpen}
23+
setToolbarPositionFrozen={props.setToolbarPositionFrozen}
24+
/>
25+
<OpenLinkButton url={props.url} />
26+
<DeleteLinkButton
27+
range={props.range}
28+
setToolbarOpen={props.setToolbarOpen}
29+
/>
30+
{/* Extra button to open alert. */}
31+
<AlertButton {...props} />
32+
</LinkToolbar>
33+
);
34+
1535
export default function App() {
1636
// Creates a new editor instance.
1737
const editor = useCreateBlockNote({
@@ -49,26 +69,7 @@ export default function App() {
4969
// Renders the editor instance.
5070
return (
5171
<BlockNoteView editor={editor} linkToolbar={false}>
52-
<LinkToolbarController
53-
linkToolbar={(props) => (
54-
<LinkToolbar {...props}>
55-
<EditLinkButton
56-
url={props.url}
57-
text={props.text}
58-
range={props.range}
59-
setToolbarOpen={props.setToolbarOpen}
60-
setToolbarPositionFrozen={props.setToolbarPositionFrozen}
61-
/>
62-
<OpenLinkButton url={props.url} />
63-
<DeleteLinkButton
64-
range={props.range}
65-
setToolbarOpen={props.setToolbarOpen}
66-
/>
67-
{/* Extra button to open alert. */}
68-
<AlertButton {...props} />
69-
</LinkToolbar>
70-
)}
71-
/>
72+
<LinkToolbarController linkToolbar={CustomLinkToolbar} />
7273
</BlockNoteView>
7374
);
7475
}

0 commit comments

Comments
 (0)