Skip to content

Commit 703f86e

Browse files
matthewlipskimatthewlipski
committed
Merge branch 'default-blocks' of github.com:TypeCellOS/BlockNote into default-blocks
2 parents a6ea62d + cf31ed6 commit 703f86e

File tree

90 files changed

+3579
-3313
lines changed

Some content is hidden

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

90 files changed

+3579
-3313
lines changed

‎docs/app/(home)/hero/DemoEditor.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
getMultiColumnSlashMenuItems,
1717
locales as multiColumnLocales,
1818
multiColumnDropCursor,
19-
withMultiColumn,
19+
ColumnListBlock,
20+
ColumnBlock,
2021
} from "@blocknote/xl-multi-column";
2122
import "@blocknote/mantine/style.css";
2223
import { useTheme } from "next-themes";
@@ -90,7 +91,12 @@ export default function DemoEditor() {
9091
...locales.en,
9192
multi_column: multiColumnLocales.en,
9293
},
93-
schema: withMultiColumn(BlockNoteSchema.create()),
94+
schema: BlockNoteSchema.create().extend({
95+
blockSpecs: {
96+
column: ColumnBlock,
97+
columnList: ColumnListBlock,
98+
},
99+
}),
94100
dropCursor: multiColumnDropCursor,
95101
collaboration: {
96102
provider,

‎docs/app/global.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,128 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
23
@import "fumadocs-ui/css/vitepress.css";
34
@import "fumadocs-ui/css/preset.css";
45
@import "fumadocs-twoslash/twoslash.css";
56

67
@source ".";
78
@source "../components";
89
@source "../content";
10+
11+
/* Code below needed for ShadCN examples, check docs for more info. */
12+
@source "../node_modules/@blocknote/shadcn";
13+
14+
@custom-variant dark (&:is(.dark *));
15+
16+
:root {
17+
--radius: 0.625rem;
18+
--background: oklch(1 0 0);
19+
--foreground: oklch(0.145 0 0);
20+
--card: oklch(1 0 0);
21+
--card-foreground: oklch(0.145 0 0);
22+
--popover: oklch(1 0 0);
23+
--popover-foreground: oklch(0.145 0 0);
24+
--primary: oklch(0.205 0 0);
25+
--primary-foreground: oklch(0.985 0 0);
26+
--secondary: oklch(0.97 0 0);
27+
--secondary-foreground: oklch(0.205 0 0);
28+
--muted: oklch(0.97 0 0);
29+
--muted-foreground: oklch(0.556 0 0);
30+
--accent: oklch(0.97 0 0);
31+
--accent-foreground: oklch(0.205 0 0);
32+
--destructive: oklch(0.577 0.245 27.325);
33+
--border: oklch(0.922 0 0);
34+
--input: oklch(0.922 0 0);
35+
--ring: oklch(0.708 0 0);
36+
--chart-1: oklch(0.646 0.222 41.116);
37+
--chart-2: oklch(0.6 0.118 184.704);
38+
--chart-3: oklch(0.398 0.07 227.392);
39+
--chart-4: oklch(0.828 0.189 84.429);
40+
--chart-5: oklch(0.769 0.188 70.08);
41+
--sidebar: oklch(0.985 0 0);
42+
--sidebar-foreground: oklch(0.145 0 0);
43+
--sidebar-primary: oklch(0.205 0 0);
44+
--sidebar-primary-foreground: oklch(0.985 0 0);
45+
--sidebar-accent: oklch(0.97 0 0);
46+
--sidebar-accent-foreground: oklch(0.205 0 0);
47+
--sidebar-border: oklch(0.922 0 0);
48+
--sidebar-ring: oklch(0.708 0 0);
49+
}
50+
51+
.dark {
52+
--background: oklch(0.145 0 0);
53+
--foreground: oklch(0.985 0 0);
54+
--card: oklch(0.205 0 0);
55+
--card-foreground: oklch(0.985 0 0);
56+
--popover: oklch(0.205 0 0);
57+
--popover-foreground: oklch(0.985 0 0);
58+
--primary: oklch(0.922 0 0);
59+
--primary-foreground: oklch(0.205 0 0);
60+
--secondary: oklch(0.269 0 0);
61+
--secondary-foreground: oklch(0.985 0 0);
62+
--muted: oklch(0.269 0 0);
63+
--muted-foreground: oklch(0.708 0 0);
64+
--accent: oklch(0.269 0 0);
65+
--accent-foreground: oklch(0.985 0 0);
66+
--destructive: oklch(0.704 0.191 22.216);
67+
--border: oklch(1 0 0 / 10%);
68+
--input: oklch(1 0 0 / 15%);
69+
--ring: oklch(0.556 0 0);
70+
--chart-1: oklch(0.488 0.243 264.376);
71+
--chart-2: oklch(0.696 0.17 162.48);
72+
--chart-3: oklch(0.769 0.188 70.08);
73+
--chart-4: oklch(0.627 0.265 303.9);
74+
--chart-5: oklch(0.645 0.246 16.439);
75+
--sidebar: oklch(0.205 0 0);
76+
--sidebar-foreground: oklch(0.985 0 0);
77+
--sidebar-primary: oklch(0.488 0.243 264.376);
78+
--sidebar-primary-foreground: oklch(0.985 0 0);
79+
--sidebar-accent: oklch(0.269 0 0);
80+
--sidebar-accent-foreground: oklch(0.985 0 0);
81+
--sidebar-border: oklch(1 0 0 / 10%);
82+
--sidebar-ring: oklch(0.556 0 0);
83+
}
84+
85+
@theme inline {
86+
--color-background: var(--background);
87+
--color-foreground: var(--foreground);
88+
--color-card: var(--card);
89+
--color-card-foreground: var(--card-foreground);
90+
--color-popover: var(--popover);
91+
--color-popover-foreground: var(--popover-foreground);
92+
--color-primary: var(--primary);
93+
--color-primary-foreground: var(--primary-foreground);
94+
--color-secondary: var(--secondary);
95+
--color-secondary-foreground: var(--secondary-foreground);
96+
--color-muted: var(--muted);
97+
--color-muted-foreground: var(--muted-foreground);
98+
--color-accent: var(--accent);
99+
--color-accent-foreground: var(--accent-foreground);
100+
--color-destructive: var(--destructive);
101+
--color-destructive-foreground: var(--destructive-foreground);
102+
--color-border: var(--border);
103+
--color-input: var(--input);
104+
--color-ring: var(--ring);
105+
--color-chart-1: var(--chart-1);
106+
--color-chart-2: var(--chart-2);
107+
--color-chart-3: var(--chart-3);
108+
--color-chart-4: var(--chart-4);
109+
--color-chart-5: var(--chart-5);
110+
--radius-sm: calc(var(--radius) - 4px);
111+
--radius-md: calc(var(--radius) - 2px);
112+
--radius-lg: var(--radius);
113+
--radius-xl: calc(var(--radius) + 4px);
114+
--color-sidebar: var(--sidebar);
115+
--color-sidebar-foreground: var(--sidebar-foreground);
116+
--color-sidebar-primary: var(--sidebar-primary);
117+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
118+
--color-sidebar-accent: var(--sidebar-accent);
119+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
120+
--color-sidebar-border: var(--sidebar-border);
121+
--color-sidebar-ring: var(--sidebar-ring);
122+
}
123+
124+
@layer base {
125+
.bn-shadcn * {
126+
@apply border-border outline-ring/50;
127+
}
128+
}

‎docs/content/docs/getting-started/ariakit.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ imageTitle: BlockNote with Ariakit
66

77
# Getting Started With Ariakit
88

9-
[Ariakit](https://ariakit.org/) is an open-source library of unstyled (headless), primitive components with a focus on Accessibility. To use BlockNote with Ariakit, you can import `BlockNoteView` from `@blocknote/ariakit`
9+
[Ariakit](https://ariakit.org/) is an open-source library of unstyled (headless), primitive components with a focus on Accessibility.
1010

1111
```console tab="npm"
1212
npm install @blocknote/core @blocknote/react @blocknote/ariakit
@@ -20,6 +20,6 @@ pnpm add @blocknote/core @blocknote/react @blocknote/ariakit
2020
bun add @blocknote/core @blocknote/react @blocknote/ariakit
2121
```
2222

23-
You can fully style the components with your own CSS, or import the provided default styles using the CSS file from `@blocknote/ariakit/style.css`.
23+
To use BlockNote with Ariakit, you can import `BlockNoteView` from `@blocknote/ariakit`. You can fully style the components with your own CSS, or import the provided default styles using the `@blocknote/ariakit/style.css` stylesheet.
2424

2525
<Example name="basic/ariakit" />

‎docs/content/docs/getting-started/shadcn.mdx‎

Lines changed: 143 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ imageTitle: ShadCN rich text editor using BlockNote
66

77
# Getting Started With ShadCN
88

9-
[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and Tailwind.
9+
[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and [TailwindCSS](https://tailwindcss.com/).
1010

1111
```console tab="npm"
1212
npm install @blocknote/core @blocknote/react @blocknote/shadcn
@@ -20,10 +20,151 @@ pnpm add @blocknote/core @blocknote/react @blocknote/shadcn
2020
bun add @blocknote/core @blocknote/react @blocknote/shadcn
2121
```
2222

23-
To use BlockNote with shadcn, you can import `BlockNoteView` from `@blocknote/shadcn` and the stylesheet from `@blocknote/shadcn/style.css`.
23+
To use BlockNote with ShadCN, you can import `BlockNoteView` from `@blocknote/shadcn` and the stylesheet from `@blocknote/shadcn/style.css`. This version of `BlockNoteView` is expected to be used in apps that are already using ShadCN/TailwindCSS, so it does not import any of those styles itself.
24+
25+
To ensure Tailwind generates the necessary CSS for all utility classes used by BlockNote components, make sure to add the `@source` directive to your stylesheet that imports Tailwind:
26+
27+
```css
28+
@import tailwindcss;
29+
...
30+
/* Path to your installed `@blocknote/shadcn` package. */
31+
@source "../node_modules/@blocknote/shadcn";
32+
```
2433

2534
<Example name="basic/shadcn" />
2635

36+
## Usage with Tailwind Only
37+
38+
If your app doesn't use ShadCN components and only uses TailwindCSS, you just need to extend your Tailwind theme with ShadCN utility classes to get ecerything working. You can do this by simply copying the styles below into your stylesheet that imports Tailwind.
39+
40+
```css
41+
@import tailwindcss;
42+
...
43+
@custom-variant dark (&:is(.dark *));
44+
45+
/* Light theme ShadCN CSS variables. */
46+
:root {
47+
--radius: 0.625rem;
48+
--background: oklch(1 0 0);
49+
--foreground: oklch(0.145 0 0);
50+
--card: oklch(1 0 0);
51+
--card-foreground: oklch(0.145 0 0);
52+
--popover: oklch(1 0 0);
53+
--popover-foreground: oklch(0.145 0 0);
54+
--primary: oklch(0.205 0 0);
55+
--primary-foreground: oklch(0.985 0 0);
56+
--secondary: oklch(0.97 0 0);
57+
--secondary-foreground: oklch(0.205 0 0);
58+
--muted: oklch(0.97 0 0);
59+
--muted-foreground: oklch(0.556 0 0);
60+
--accent: oklch(0.97 0 0);
61+
--accent-foreground: oklch(0.205 0 0);
62+
--destructive: oklch(0.577 0.245 27.325);
63+
--border: oklch(0.922 0 0);
64+
--input: oklch(0.922 0 0);
65+
--ring: oklch(0.708 0 0);
66+
--chart-1: oklch(0.646 0.222 41.116);
67+
--chart-2: oklch(0.6 0.118 184.704);
68+
--chart-3: oklch(0.398 0.07 227.392);
69+
--chart-4: oklch(0.828 0.189 84.429);
70+
--chart-5: oklch(0.769 0.188 70.08);
71+
--sidebar: oklch(0.985 0 0);
72+
--sidebar-foreground: oklch(0.145 0 0);
73+
--sidebar-primary: oklch(0.205 0 0);
74+
--sidebar-primary-foreground: oklch(0.985 0 0);
75+
--sidebar-accent: oklch(0.97 0 0);
76+
--sidebar-accent-foreground: oklch(0.205 0 0);
77+
--sidebar-border: oklch(0.922 0 0);
78+
--sidebar-ring: oklch(0.708 0 0);
79+
}
80+
81+
/* Dark theme ShadCN CSS variables. */
82+
.dark {
83+
--background: oklch(0.145 0 0);
84+
--foreground: oklch(0.985 0 0);
85+
--card: oklch(0.205 0 0);
86+
--card-foreground: oklch(0.985 0 0);
87+
--popover: oklch(0.205 0 0);
88+
--popover-foreground: oklch(0.985 0 0);
89+
--primary: oklch(0.922 0 0);
90+
--primary-foreground: oklch(0.205 0 0);
91+
--secondary: oklch(0.269 0 0);
92+
--secondary-foreground: oklch(0.985 0 0);
93+
--muted: oklch(0.269 0 0);
94+
--muted-foreground: oklch(0.708 0 0);
95+
--accent: oklch(0.269 0 0);
96+
--accent-foreground: oklch(0.985 0 0);
97+
--destructive: oklch(0.704 0.191 22.216);
98+
--border: oklch(1 0 0 / 10%);
99+
--input: oklch(1 0 0 / 15%);
100+
--ring: oklch(0.556 0 0);
101+
--chart-1: oklch(0.488 0.243 264.376);
102+
--chart-2: oklch(0.696 0.17 162.48);
103+
--chart-3: oklch(0.769 0.188 70.08);
104+
--chart-4: oklch(0.627 0.265 303.9);
105+
--chart-5: oklch(0.645 0.246 16.439);
106+
--sidebar: oklch(0.205 0 0);
107+
--sidebar-foreground: oklch(0.985 0 0);
108+
--sidebar-primary: oklch(0.488 0.243 264.376);
109+
--sidebar-primary-foreground: oklch(0.985 0 0);
110+
--sidebar-accent: oklch(0.269 0 0);
111+
--sidebar-accent-foreground: oklch(0.985 0 0);
112+
--sidebar-border: oklch(1 0 0 / 10%);
113+
--sidebar-ring: oklch(0.556 0 0);
114+
}
115+
116+
/* Extending Tailwind theme with ShadCN utility classes. */
117+
@theme inline {
118+
--color-background: var(--background);
119+
--color-foreground: var(--foreground);
120+
--color-card: var(--card);
121+
--color-card-foreground: var(--card-foreground);
122+
--color-popover: var(--popover);
123+
--color-popover-foreground: var(--popover-foreground);
124+
--color-primary: var(--primary);
125+
--color-primary-foreground: var(--primary-foreground);
126+
--color-secondary: var(--secondary);
127+
--color-secondary-foreground: var(--secondary-foreground);
128+
--color-muted: var(--muted);
129+
--color-muted-foreground: var(--muted-foreground);
130+
--color-accent: var(--accent);
131+
--color-accent-foreground: var(--accent-foreground);
132+
--color-destructive: var(--destructive);
133+
--color-destructive-foreground: var(--destructive-foreground);
134+
--color-border: var(--border);
135+
--color-input: var(--input);
136+
--color-ring: var(--ring);
137+
--color-chart-1: var(--chart-1);
138+
--color-chart-2: var(--chart-2);
139+
--color-chart-3: var(--chart-3);
140+
--color-chart-4: var(--chart-4);
141+
--color-chart-5: var(--chart-5);
142+
--radius-sm: calc(var(--radius) - 4px);
143+
--radius-md: calc(var(--radius) - 2px);
144+
--radius-lg: var(--radius);
145+
--radius-xl: calc(var(--radius) + 4px);
146+
--color-sidebar: var(--sidebar);
147+
--color-sidebar-foreground: var(--sidebar-foreground);
148+
--color-sidebar-primary: var(--sidebar-primary);
149+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
150+
--color-sidebar-accent: var(--sidebar-accent);
151+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
152+
--color-sidebar-border: var(--sidebar-border);
153+
--color-sidebar-ring: var(--sidebar-ring);
154+
}
155+
156+
/* Applies some additional necessary border styles within the editor. */
157+
@layer base {
158+
.bn-shadcn * {
159+
@apply border-border outline-ring/50;
160+
}
161+
}
162+
```
163+
164+
The values used are for the Neutral ShadCN color theme (used in demo above), but you can customize them however you'd like.
165+
166+
This website uses the exact same setup as the one described above, which you can see in [this file](https://github.com/TypeCellOS/BlockNote/blob/main/docs/app/global.css).
167+
27168
## ShadCN Customization
28169

29170
BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project.

‎docs/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,9 +134,10 @@
134134
"postcss": "^8.5.6",
135135
"react-email": "^4.0.16",
136136
"react-icons": "^5.5.0",
137-
"tailwindcss": "^4.1.10",
137+
"tailwindcss": "^4.1.12",
138+
"tw-animate-css": "^1.3.7",
138139
"typescript": "^5.8.3",
139140
"y-partykit": "^0.0.33",
140141
"yjs": "^13.6.27"
141142
}
142-
}
143+
}

‎docs/postcss.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
22
plugins: {
3-
'@tailwindcss/postcss': {},
3+
"@tailwindcss/postcss": {},
44
},
55
};

‎examples/01-basic/03-multi-column/src/App.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,23 @@ import {
1313
useCreateBlockNote,
1414
} from "@blocknote/react";
1515
import {
16+
ColumnBlock,
17+
ColumnListBlock,
1618
getMultiColumnSlashMenuItems,
1719
multiColumnDropCursor,
1820
locales as multiColumnLocales,
19-
withMultiColumn,
2021
} from "@blocknote/xl-multi-column";
2122
import { useMemo } from "react";
2223
export default function App() {
2324
// Creates a new editor instance.
2425
const editor = useCreateBlockNote({
2526
// Adds column and column list blocks to the schema.
26-
schema: withMultiColumn(BlockNoteSchema.create()),
27+
schema: BlockNoteSchema.create().extend({
28+
blockSpecs: {
29+
column: ColumnBlock,
30+
columnList: ColumnListBlock,
31+
},
32+
}),
2733
// The default drop cursor only shows up above and below blocks - we replace
2834
// it with the multi-column one that also shows up on the sides of blocks.
2935
dropCursor: multiColumnDropCursor,

0 commit comments

Comments
 (0)