Skip to content

Commit 218758d

Browse files
YousefEDmatthewlipski
YousefED
and
matthewlipski
authored
feat: multi UI libs (shadcn + ariakit) + i18n (#652)
* wip * Refactored image toolbar * Refactored image toolbar, hyperlink toolbar, and table handles * Implemented PR feedback * Implemented PR feedback * Cleaned up component code * wip: ariakit * wip * fix * fix merge * wip * wip * fix * wip * wip * wip: suggestionmenu * extract suggestion menu * wip * side menu button * move mantine elements to mantine dir * shadcn wip * wip * fix * shadcn fixes * refactor: Extract image panel components (#684) * Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * Revert "refactor: Extract image panel components (#684)" (#716) This reverts commit 600f0c5. * refactor: Extract image panel components (#717) * Extracted Mantine panel components * Added ShadCN panel implementation * Added Ariakit image panel components * refactor: Extract Mantine & Ariakit packages (#689) * Extracted mantine & ariakit packages * fix: ShadCN color styles button & form components (#696) * Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]> * Updated package versions * Updated screenshots * Updated screenshots * Updated screenshots * Updated screenshots * Updated docs * Addressed most TODOs and small fixes * Added ShadCN form * update docs * i18n + docs * Updated theming code * fix build and lint --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>
1 parent f97a241 commit 218758d

File tree

369 files changed

+11182
-3020
lines changed

Some content is hidden

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

369 files changed

+11182
-3020
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ module.exports = {
2424
},
2525
},
2626
},
27+
ignorePatterns: ["**/ui/*"],
2728
rules: {
2829
curly: 1,
2930
"import/no-extraneous-dependencies": [

‎docs/components/pages/landing/hero/DemoEditor.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
22
import "@blocknote/core/fonts/inter.css";
3-
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
4-
import "@blocknote/react/style.css";
3+
import { useCreateBlockNote } from "@blocknote/react";
4+
import { BlockNoteView } from "@blocknote/mantine";
5+
import "@blocknote/mantine/style.css";
56
import { useCallback, useMemo, useState } from "react";
67
import YPartyKitProvider from "y-partykit/provider";
78
import * as Y from "yjs";

‎docs/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
"dependencies": {
1212
"@blocknote/core": "^0.12.4",
1313
"@blocknote/react": "^0.12.4",
14+
"@blocknote/ariakit": "^0.12.4",
15+
"@blocknote/mantine": "^0.12.4",
16+
"@blocknote/shadcn": "^0.12.4",
1417
"@headlessui/react": "^1.7.18",
1518
"@mantine/core": "^7.7.1",
1619
"@next/bundle-analyzer": "^14.1.0",

‎docs/pages/docs/advanced/ariakit.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: BlockNote with Ariakit
3+
description: Ariakit rich text editor with BlockNote
4+
imageTitle: BlockNote with Ariakit
5+
---
6+
7+
import { Example } from "@/components/example";
8+
import { Callout } from "nextra/components";
9+
10+
## Using Ariakit with BlockNote
11+
12+
[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` (instead of from `@blocknote/mantine`).
13+
14+
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`.
15+
16+
<Example name="basic/ariakit" />

‎docs/pages/docs/advanced/component-libraries.mdx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Using Other Component Libraries
3+
description: While BlockNote's default UI uses the Mantine component library, you can configure it to use other libraries instead.
4+
imageTitle: Use with Other Component Libraries
5+
path: /docs/component-libraries
6+
---
7+
8+
import { Callout } from "nextra/components";
9+
import { Example } from "@/components/example";
10+
11+
# Using Other Component Libraries
12+
13+
While BlockNote's default UI uses the [Mantine](https://mantine.dev/) component library, you can configure it to use other libraries instead.
14+
15+
## Using Ariakit/ShadCN
16+
17+
BlockNote has plug & play support for [Ariakit](https://ariakit.org/) and [ShadCN](https://ui.shadcn.com/). You can switch to them just by importing `BlockNoteView` from either `@blocknote/ariakit` or `@blocknote/shadcn` instead of `@blocknote/mantine`, as well as the corresponding CSS file.
18+
19+
<Example name="basic/ariakit" />
20+
21+
<Example name="basic/shadcn" />
22+
23+
## ShadCN Customization
24+
25+
If you want BlockNote to use customized ShadCN components instead of the default ones, you can pass them using the `shadCNComponents` prop of `BlockNoteView`:
26+
27+
```tsx
28+
return (
29+
<BlockNoteView editor={editor} shadCNComponents={{
30+
Select: {
31+
SelectTrigger: ...,
32+
SelectContent: ...,
33+
...
34+
},
35+
Button: {
36+
...
37+
},
38+
...
39+
}} />
40+
);
41+
```
42+
43+
You can pass components from the following ShadCN modules:
44+
45+
- Badge
46+
- Button
47+
- Card
48+
- DropdownMenu
49+
- Form
50+
- Input
51+
- Label
52+
- Popover
53+
- Select
54+
- Tabs
55+
- Toggle
56+
- Tooltip
57+
58+
<Callout type="warning" emoji="⚠️">
59+
To ensure compatibility, your ShadCN components should not use Portals, as styling and CSS variables are scoped to only the editor.
60+
</Callout>
61+
62+
## Using Your Own Components
63+
64+
If you want to use a different component library to Mantine/Ariakit/ShadCN, you will have to provide your own `BlockNoteView` implementation using the `BlockNoteViewRaw` component and a `ComponentsContext`:
65+
66+
```tsx
67+
import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
68+
import {
69+
BlockNoteViewRaw,
70+
Components,
71+
ComponentsContext,
72+
} from "@blocknote/react";
73+
import { ComponentProps } from "react";
74+
75+
export const components: Components = {
76+
...
77+
};
78+
79+
export const BlockNoteView = <
80+
BSchema extends BlockSchema,
81+
ISchema extends InlineContentSchema,
82+
SSchema extends StyleSchema
83+
>(
84+
props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>
85+
) => {
86+
return (
87+
<ComponentsContext.Provider value={components}>
88+
<BlockNoteViewRaw {...props} />
89+
</ComponentsContext.Provider>
90+
);
91+
};
92+
```
93+
94+
The components you want BlockNote to use should be added to `components`. To see exactly how this object is structured, which components you need to provide, and what props each component should take, see [this source file](https://github.com/TypeCellOS/BlockNote/tree/main/packages/react/src/editor/ComponentsContext.tsx).
95+

‎docs/pages/docs/advanced/nextjs.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
title: Next.js and BlockNote
33
description: Details on integrating BlockNote with Next.js
44
imageTitle: Next.js and BlockNote
5-
path: /docs/nextjs
65
---
76

87
# Next.js and BlockNote

‎docs/pages/docs/advanced/real-time-collaboration.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
title: Real-time Collaborative rich text editor
33
description: Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs)
44
imageTitle: Real-time Collaboration
5-
path: /docs/real-time-collaboration
65
---
76

87
# Real-time Collaboration (multiplayer text editor)

‎docs/pages/docs/advanced/shadcn.mdx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: BlockNote with ShadCN and Tailwind
3+
description: ShadCN + Tailwind rich text editor using BlockNote
4+
imageTitle: BlockNote with ShadCN and Tailwind
5+
---
6+
7+
import { Example } from "@/components/example";
8+
import { Callout } from "nextra/components";
9+
10+
## Using ShadCN, Radix and Tailwind with BlockNote
11+
12+
[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and Tailwind. To use BlockNote with shadcn, you can import `BlockNoteView` from `@blocknote/shadcn` (instead of from `@blocknote/mantine`) and the stylesheet from `@blocknote/shadcn/style.css`.
13+
14+
<Example name="basic/shadcn" />
15+
16+
## ShadCN Customization
17+
18+
BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project.
19+
To make BlockNote use the ShadCN components from your project instead of the default ones, you can pass them using the `shadCNComponents` prop of `BlockNoteView`:
20+
21+
```tsx
22+
import * as Button from "@/components/ui/button"
23+
import * as Select from "@/components/ui/select"
24+
25+
return (
26+
<BlockNoteView editor={editor} shadCNComponents={{
27+
Select,
28+
Button,
29+
...
30+
}} />
31+
);
32+
```
33+
34+
You can pass components from the following ShadCN modules:
35+
36+
- Badge
37+
- Button
38+
- Card
39+
- DropdownMenu
40+
- Form
41+
- Input
42+
- Label
43+
- Popover
44+
- Select
45+
- Tabs
46+
- Toggle
47+
- Tooltip
48+
49+
<Callout type="warning" emoji="⚠️">
50+
To ensure compatibility, your ShadCN components should not use Portals
51+
(comment these out from your DropdownMenu, Popover and Select components).
52+
</Callout>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
title: Usage Without React (Vanilla JS)
33
description: BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps.
44
imageTitle: Usage Without React (Vanilla JS)
5-
path: /docs/vanilla-js
65
---
76

87
import { Callout } from "nextra/components";

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ type BlockNoteEditorOptions = {
2424
defaultStyles?: boolean;
2525
uploadFile?: (file: File) => Promise<string>;
2626
collaboration?: CollaborationOptions;
27+
dictionary?: Dictionary;
2728
schema?: BlockNoteSchema;
2829
trailingBlock?: boolean;
2930
};
@@ -43,6 +44,8 @@ The hook takes two optional parameters:
4344

4445
`collaboration`: Options for enabling real-time collaboration. See [Real-time Collaboration](/docs/advanced/real-time-collaboration) for more info.
4546

47+
`dictionary`: Provide strings for localization. See the [Localization / i18n example](/examples/basic/localization).
48+
4649
`schema` (_advanced_): The editor schema if you want to extend your editor with custom blocks, styles, or inline content [Custom Schemas](/docs/custom-schemas).
4750

4851
`trailingBlock`: An option which user can pass with `false` value to disable the automatic creation of a trailing new block on the next line when the user types or edits any block. Defaults to `true` if undefined.

0 commit comments

Comments
 (0)