Skip to content

Commit 638bab7

Browse files
matthewlipskimatthewlipski
committed
Merge branch 'main' into releases
2 parents fe1c634 + 88565cc commit 638bab7

File tree

254 files changed

+6214
-820
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

254 files changed

+6214
-820
lines changed

‎docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"react": "^18",
3232
"react-dom": "^18",
3333
"react-github-btn": "^1.4.0",
34-
"react-icons": "^4.3.1",
34+
"react-icons": "^5.2.1",
3535
"y-partykit": "^0.0.25",
3636
"yjs": "^13.6.1"
3737
},

‎docs/pages/docs/advanced/vanilla-js.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ While it's up to you to decide how you want the elements to be rendered, BlockNo
4949
type UIElement =
5050
| "formattingToolbar"
5151
| "linkToolbar"
52-
| "imageToolbar"
52+
| "filePanel"
5353
| "sideMenu"
5454
| "suggestionMenu"
5555
| "tableHandles"

‎docs/pages/docs/editor-basics/setup.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export type BlockNoteViewProps = {
9696
linkToolbar?: boolean;
9797
sideMenu?: boolean;
9898
slashMenu?: boolean;
99-
imageToolbar?: boolean;
99+
filePanel?: boolean;
100100
tableHandles?: boolean;
101101
children?:
102102
} & HTMLAttributes<HTMLDivElement>;
@@ -120,7 +120,7 @@ export type BlockNoteViewProps = {
120120

121121
`slashMenu`: Whether the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu) should be enabled.
122122

123-
`imageToolbar`: Whether the Image Toolbar should be enabled.
123+
`filePanel`: Whether the File Toolbar should be enabled.
124124

125125
`tableHandles`: Whether the Table Handles should be enabled.
126126

‎examples/01-basic/03-all-blocks/App.tsx

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@ export default function App() {
4040
type: "numberedListItem",
4141
content: "Numbered List Item",
4242
},
43-
{
44-
type: "image",
45-
},
4643
{
4744
type: "table",
4845
content: {
@@ -60,6 +57,33 @@ export default function App() {
6057
],
6158
},
6259
},
60+
{
61+
type: "file",
62+
},
63+
{
64+
type: "image",
65+
props: {
66+
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
67+
caption:
68+
"From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
69+
},
70+
},
71+
{
72+
type: "video",
73+
props: {
74+
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
75+
caption:
76+
"From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
77+
},
78+
},
79+
{
80+
type: "audio",
81+
props: {
82+
url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
83+
caption:
84+
"From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
85+
},
86+
},
6387
{
6488
type: "paragraph",
6589
},

‎examples/01-basic/testing/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
22
import "@blocknote/core/fonts/inter.css";
3-
import { useCreateBlockNote } from "@blocknote/react";
43
import { BlockNoteView } from "@blocknote/mantine";
54
import "@blocknote/mantine/style.css";
5+
import { useCreateBlockNote } from "@blocknote/react";
66

77
export default function App() {
88
// Creates a new editor instance.

‎examples/02-ui-components/01-ui-elements-remove/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "@blocknote/core/fonts/inter.css";
2-
import { useCreateBlockNote } from "@blocknote/react";
32
import { BlockNoteView } from "@blocknote/mantine";
43
import "@blocknote/mantine/style.css";
4+
import { useCreateBlockNote } from "@blocknote/react";
55

66
export default function App() {
77
// Creates a new editor instance.
@@ -34,7 +34,7 @@ export default function App() {
3434
// Removes all menus and toolbars.
3535
formattingToolbar={false}
3636
linkToolbar={false}
37-
imageToolbar={false}
37+
filePanel={false}
3838
sideMenu={false}
3939
slashMenu={false}
4040
tableHandles={false}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import "@blocknote/core/fonts/inter.css";
2+
import { BlockNoteView } from "@blocknote/mantine";
3+
import "@blocknote/mantine/style.css";
24
import {
35
BasicTextStyleButton,
46
BlockTypeSelect,
57
ColorStyleButton,
68
CreateLinkButton,
9+
FileCaptionButton,
10+
FileReplaceButton,
711
FormattingToolbar,
812
FormattingToolbarController,
9-
ImageCaptionButton,
1013
NestBlockButton,
11-
ReplaceImageButton,
1214
TextAlignButton,
1315
UnnestBlockButton,
1416
useCreateBlockNote,
1517
} from "@blocknote/react";
16-
import { BlockNoteView } from "@blocknote/mantine";
17-
import "@blocknote/mantine/style.css";
1818

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

@@ -77,8 +77,8 @@ export default function App() {
7777
{/* Extra button to toggle blue text & background */}
7878
<BlueButton key={"customButton"} />
7979

80-
<ImageCaptionButton key={"imageCaptionButton"} />
81-
<ReplaceImageButton key={"replaceImageButton"} />
80+
<FileCaptionButton key={"fileCaptionButton"} />
81+
<FileReplaceButton key={"replaceFileButton"} />
8282

8383
<BasicTextStyleButton
8484
basicTextStyle={"bold"}

‎examples/02-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
"tags": ["Intermediate", "Blocks", "UI Components", "Formatting Toolbar", "Custom Schemas"],
66
"dependencies": {
77
"@mantine/core": "^7.7.1",
8-
"react-icons": "^4.3.1"
8+
"react-icons": "^5.2.1"
99
}
1010
}

‎examples/02-ui-components/03-formatting-toolbar-block-type-items/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
2121
"@mantine/core": "^7.7.1",
22-
"react-icons": "^4.3.1"
22+
"react-icons": "^5.2.1"
2323
},
2424
"devDependencies": {
2525
"@types/react": "^18.0.25",

‎examples/02-ui-components/04-side-menu-buttons/.bnexample.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
"author": "matthewlipski",
55
"tags": ["Intermediate", "Blocks", "UI Components", "Block Side Menu"],
66
"dependencies": {
7-
"react-icons": "^4.3.1"
7+
"react-icons": "^5.2.1"
88
}
99
}

‎examples/02-ui-components/04-side-menu-buttons/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@blocknote/shadcn": "^0.13.0",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
21-
"react-icons": "^4.3.1"
21+
"react-icons": "^5.2.1"
2222
},
2323
"devDependencies": {
2424
"@types/react": "^18.0.25",

‎examples/02-ui-components/05-side-menu-drag-handle-items/.bnexample.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
"author": "matthewlipski",
55
"tags": ["Intermediate", "Blocks", "UI Components", "Block Side Menu"],
66
"dependencies": {
7-
"react-icons": "^4.3.1"
7+
"react-icons": "^5.2.1"
88
}
99
}

‎examples/02-ui-components/05-side-menu-drag-handle-items/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@blocknote/shadcn": "^0.13.0",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
21-
"react-icons": "^4.3.1"
21+
"react-icons": "^5.2.1"
2222
},
2323
"devDependencies": {
2424
"@types/react": "^18.0.25",

‎examples/02-ui-components/06-suggestion-menus-slash-menu-items/.bnexample.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
"Slash Menu"
1111
],
1212
"dependencies": {
13-
"react-icons": "^4.3.1"
13+
"react-icons": "^5.2.1"
1414
}
1515
}

‎examples/02-ui-components/06-suggestion-menus-slash-menu-items/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@blocknote/shadcn": "^0.13.0",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
21-
"react-icons": "^4.3.1"
21+
"react-icons": "^5.2.1"
2222
},
2323
"devDependencies": {
2424
"@types/react": "^18.0.25",

‎examples/02-ui-components/08-custom-ui/.bnexample.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
"author": "matthewlipski",
55
"tags": ["Advanced", "Inline Content", "UI Components", "Block Side Menu", "Formatting Toolbar", "Suggestion Menus", "Slash Menu", "Appearance & Styling"],
66
"dependencies": {
7-
"react-icons": "^4.3.1"
7+
"react-icons": "^5.2.1"
88
}
99
}

‎examples/02-ui-components/08-custom-ui/CustomFormattingToolbar.tsx

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
useBlockNoteEditor,
3-
useEditorChange,
4-
useEditorSelectionChange,
3+
useEditorContentOrSelectionChange,
54
} from "@blocknote/react";
65
import { useState } from "react";
76
import {
@@ -16,6 +15,7 @@ import {
1615
MdFormatUnderlined,
1716
} from "react-icons/md";
1817

18+
import { checkBlockHasDefaultProp } from "@blocknote/core";
1919
import { ColorMenu } from "./ColorMenu";
2020
import { LinkMenu } from "./LinkMenu";
2121

@@ -24,7 +24,7 @@ type CustomFormattingToolbarState = {
2424
italic: boolean;
2525
underline: boolean;
2626

27-
textAlignment: "left" | "center" | "right" | "justify";
27+
textAlignment: "left" | "center" | "right" | "justify" | undefined;
2828

2929
textColor: string;
3030
backgroundColor: string;
@@ -35,6 +35,7 @@ export function CustomFormattingToolbar() {
3535
const editor = useBlockNoteEditor();
3636

3737
// Function to get the state of toolbar buttons (active/inactive).
38+
// TODO: this is a bit weird, better to use useSelectedBlocks and useActiveStyles hooks
3839
const getState = (): CustomFormattingToolbarState => {
3940
const block = editor.getTextCursorPosition().block;
4041
const activeStyles = editor.getActiveStyles();
@@ -44,7 +45,9 @@ export function CustomFormattingToolbar() {
4445
italic: (activeStyles.italic as boolean) || false,
4546
underline: (activeStyles.underline as boolean) || false,
4647

47-
textAlignment: block.props.textAlignment,
48+
textAlignment: checkBlockHasDefaultProp("textAlignment", block, editor)
49+
? block.props.textAlignment
50+
: undefined,
4851

4952
textColor: (activeStyles.textColor as string) || "default",
5053
backgroundColor: (activeStyles.backgroundColor as string) || "default",
@@ -80,8 +83,7 @@ export function CustomFormattingToolbar() {
8083
const [linkMenuOpen, setLinkMenuOpen] = useState(false);
8184

8285
// Updates toolbar state when the editor content or selection changes.
83-
useEditorChange(() => setState(getState()), editor);
84-
useEditorSelectionChange(() => setState(getState()), editor);
86+
useEditorContentOrSelectionChange(() => setState(getState()), editor);
8587

8688
return (
8789
<div className={"formatting-toolbar"}>
@@ -111,40 +113,42 @@ export function CustomFormattingToolbar() {
111113
</button>
112114
</div>
113115
{/* Button group for text alignment */}
114-
<div className={"formatting-toolbar-group"}>
115-
{/*Left align button*/}
116-
<button
117-
className={`formatting-toolbar-button${
118-
state.textAlignment === "left" ? " active" : ""
119-
}`}
120-
onClick={() => setTextAlignment("left")}>
121-
<MdFormatAlignLeft />
122-
</button>
123-
{/* Center align button */}
124-
<button
125-
className={`formatting-toolbar-button${
126-
state.textAlignment === "center" ? " active" : ""
127-
}`}
128-
onClick={() => setTextAlignment("center")}>
129-
<MdFormatAlignCenter />
130-
</button>
131-
{/* Right align button */}
132-
<button
133-
className={`formatting-toolbar-button${
134-
state.textAlignment === "right" ? " active" : ""
135-
}`}
136-
onClick={() => setTextAlignment("right")}>
137-
<MdFormatAlignRight />
138-
</button>
139-
{/* Justify text button */}
140-
<button
141-
className={`formatting-toolbar-button${
142-
state.textAlignment === "justify" ? " active" : ""
143-
}`}
144-
onClick={() => setTextAlignment("justify")}>
145-
<MdFormatAlignJustify />
146-
</button>
147-
</div>
116+
{state.textAlignment && (
117+
<div className={"formatting-toolbar-group"}>
118+
{/*Left align button*/}
119+
<button
120+
className={`formatting-toolbar-button${
121+
state.textAlignment === "left" ? " active" : ""
122+
}`}
123+
onClick={() => setTextAlignment("left")}>
124+
<MdFormatAlignLeft />
125+
</button>
126+
{/* Center align button */}
127+
<button
128+
className={`formatting-toolbar-button${
129+
state.textAlignment === "center" ? " active" : ""
130+
}`}
131+
onClick={() => setTextAlignment("center")}>
132+
<MdFormatAlignCenter />
133+
</button>
134+
{/* Right align button */}
135+
<button
136+
className={`formatting-toolbar-button${
137+
state.textAlignment === "right" ? " active" : ""
138+
}`}
139+
onClick={() => setTextAlignment("right")}>
140+
<MdFormatAlignRight />
141+
</button>
142+
{/* Justify text button */}
143+
<button
144+
className={`formatting-toolbar-button${
145+
state.textAlignment === "justify" ? " active" : ""
146+
}`}
147+
onClick={() => setTextAlignment("justify")}>
148+
<MdFormatAlignJustify />
149+
</button>
150+
</div>
151+
)}
148152
{/* Button group for color menu */}
149153
<div className={"formatting-toolbar-group"}>
150154
<div className={"color-menu-button"}>

‎examples/02-ui-components/08-custom-ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@blocknote/shadcn": "^0.13.0",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
21-
"react-icons": "^4.3.1"
21+
"react-icons": "^5.2.1"
2222
},
2323
"devDependencies": {
2424
"@types/react": "^18.0.25",

‎examples/05-custom-schema/01-alert-block/.bnexample.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
"tags": ["Intermediate", "Blocks", "Custom Schemas", "Suggestion Menus", "Slash Menu"],
66
"dependencies": {
77
"@mantine/core": "^7.7.1",
8-
"react-icons": "^4.3.1"
8+
"react-icons": "^5.2.1"
99
}
1010
}

‎examples/05-custom-schema/01-alert-block/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
2121
"@mantine/core": "^7.7.1",
22-
"react-icons": "^4.3.1"
22+
"react-icons": "^5.2.1"
2323
},
2424
"devDependencies": {
2525
"@types/react": "^18.0.25",

0 commit comments

Comments
 (0)