From 2e78c2df66a4541eb4c1f1d001cb29bcf82af55a Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Tue, 2 Dec 2025 20:35:22 +0100 Subject: [PATCH 1/3] Updated docs --- docs/app/(home)/hero/DemoEditor.tsx | 2 +- .../docs/features/collaboration/comments.mdx | 34 ++++++++++-------- docs/content/docs/getting-started/index.mdx | 35 +++++++------------ docs/content/docs/getting-started/mantine.mdx | 35 ------------------- docs/content/docs/getting-started/meta.json | 2 +- docs/next.config.ts | 5 +++ examples/01-basic/01-minimal/src/App.tsx | 2 +- 7 files changed, 41 insertions(+), 74 deletions(-) delete mode 100644 docs/content/docs/getting-started/mantine.mdx diff --git a/docs/app/(home)/hero/DemoEditor.tsx b/docs/app/(home)/hero/DemoEditor.tsx index 3712a843ce..d8ffb959ee 100644 --- a/docs/app/(home)/hero/DemoEditor.tsx +++ b/docs/app/(home)/hero/DemoEditor.tsx @@ -1,9 +1,9 @@ import { BlockNoteSchema, combineByGroup, - filterSuggestionItems, uploadToTmpFilesDotOrg_DEV_ONLY, } from "@blocknote/core"; +import { filterSuggestionItems } from "@blocknote/core/extensions"; import * as locales from "@blocknote/core/locales"; import "@blocknote/core/fonts/inter.css"; import { diff --git a/docs/content/docs/features/collaboration/comments.mdx b/docs/content/docs/features/collaboration/comments.mdx index 3b7cfa9035..c6e8165cc2 100644 --- a/docs/content/docs/features/collaboration/comments.mdx +++ b/docs/content/docs/features/collaboration/comments.mdx @@ -10,24 +10,30 @@ BlockNote supports Comments, Comment Threads (replies) and emoji reactions out o To enable comments in your editor, you need to: -- provide a `resolveUsers` so BlockNote can retrieve and display user information (names and avatars). -- provide a `ThreadStore` so BlockNote can store and retrieve comment threads. -- enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) -- optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. +- Create an instance of the `CommentsExtension` and pass it to the `extensions` editor option. +- Pass `resolveUsers` to your `CommentsExtension` instance, so it can retrieve and display user information (names and avatars). +- Provide a `ThreadStore` to your `CommentsExtension` instance, so it can store and retrieve comment threads. +- Enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) +- Optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. ```tsx const editor = useCreateBlockNote({ - resolveUsers: async (userIds: string[]) => { - // return user information for the given userIds (see below) - }, - comments: { - threadStore: yourThreadStore, // see below - schema: BlockNoteSchema.create(...) // optional, can be left undefined - }, - // ... + extensions: [ + CommentsExtension({ + // See below. + threadStore: ..., + // Return user information for the given userIds (see below). + resolveUsers: async (userIds: string[]) => { ... }, + // Optional, can be left undefined + schema: BlockNoteSchema.create(...) + }), + ... + ], collaboration: { - // ... // see real-time collaboration docs + // See real-time collaboration docs + ... }, + ... }); ``` @@ -121,7 +127,7 @@ _Note: The `ThreadStoreAuth` only used to show / hide options in the UI. To secu When a user interacts with a comment, the data is stored in the ThreadStore, along with the active user ID (as specified when initiating the ThreadStore). -To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function in the editor options. +To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function to your `CommentsExtension`. This function is called with an array of user IDs, and should return an array of `User` objects in the same order. diff --git a/docs/content/docs/getting-started/index.mdx b/docs/content/docs/getting-started/index.mdx index f5bf167126..c807bec906 100644 --- a/docs/content/docs/getting-started/index.mdx +++ b/docs/content/docs/getting-started/index.mdx @@ -13,45 +13,32 @@ Getting started with BlockNote is quick and easy. Install the required packages To install BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run: ```console tab="npm" +npm install @mantine/core @mantine/hooks @mantine/utils npm install @blocknote/core @blocknote/react @blocknote/mantine ``` ```console tab="pnpm" +pnpm add @mantine/core @mantine/hooks @mantine/utils pnpm add @blocknote/core @blocknote/react @blocknote/mantine ``` ```console tab="bun" +bun add @mantine/core @mantine/hooks @mantine/utils bun add @blocknote/core @blocknote/react @blocknote/mantine ``` -BlockNote provides multiple UI library options. Choose the one that best fits your project: +This will install the [Mantine UI](https://mantine.dev/) version of BlockNote, which works great out of the box and is recommended for new projects. -- **[Mantine](/docs/getting-started/mantine)** (`@blocknote/mantine`) - Recommended for new projects -- **[Shadcn](/docs/getting-started/shadcn)** (`@blocknote/shadcn`) -- **[Ariakit](/docs/getting-started/ariakit)** (`@blocknote/ariakit`) +BlockNote also provides multiple alternative UI library options. Choose the one that best fits your needs: + +- **[ShadCN](/docs/getting-started/shadcn)** (`@blocknote/shadcn`): Recommended for projects that already use ShadCN components or [Tailwind CSS](https://tailwindcss.com/). +- **[Ariakit](/docs/getting-started/ariakit)** (`@blocknote/ariakit`): Recommended for projects which require unstyled components for the editor. ## Create an editor The fastest way to get started with the BlockNote is by using the `useCreateBlockNote` hook and `BlockNoteView` component: -```tsx -import React from "react"; -import { useCreateBlockNote } from "@blocknote/react"; -// Or, you can use ariakit, shadcn, etc. -import { BlockNoteView } from "@blocknote/mantine"; -// Default styles for the mantine editor -import "@blocknote/mantine/style.css"; -// Include the included Inter font -import "@blocknote/core/fonts/inter.css"; - -export default function MyEditor() { - // Create a new editor instance - const editor = useCreateBlockNote(); - - // Render the editor - return ; -} -``` + For more information about the `useCreateBlockNote` hook and the `BlockNoteView` component, see [React Overview](/docs/react/overview). @@ -64,6 +51,10 @@ For more information about the `useCreateBlockNote` hook and the `BlockNoteView` guide on setting up Next.js + BlockNote](/docs/getting-started/nextjs) +## Usage in Mantine apps + +In the demo above, the `@blocknote/mantine/style.css` stylesheet is imported to style the UI components. If your application already uses Mantine UI though, you should use the `@blocknote/mantine/blocknoteStyles.css` stylesheet instead. It only contains the styles added by BlockNote on top of the Mantine core styles, whereas `@blocknote/mantine/style.css` includes both. + ## Next steps You now know how to integrate BlockNote into your React app! However, this is just scratching the surface of what you can do with BlockNote. diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx deleted file mode 100644 index 73f4db9733..0000000000 --- a/docs/content/docs/getting-started/mantine.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: With Mantine -description: Mantine rich text editor using BlockNote -imageTitle: Mantine rich text editor using BlockNote ---- - -# Getting Started With Mantine - -[Mantine](https://mantine.dev/) is an open-source collection of React components. - -```console tab="npm" -npm install @mantine/core @mantine/hooks @mantine/utils -npm install @blocknote/core @blocknote/react @blocknote/mantine -``` - -```console tab="pnpm" -pnpm add @mantine/core @mantine/hooks @mantine/utils -pnpm add @blocknote/core @blocknote/react @blocknote/mantine -``` - -```console tab="bun" -bun add @mantine/core @mantine/hooks @mantine/utils -bun add @blocknote/core @blocknote/react @blocknote/mantine -``` - -To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/mantine` and the stylesheet from `@blocknote/mantine/style.css`. - - - If your application already uses Mantine UI, you should use the - `@blocknote/mantine/blocknoteStyles.css` stylesheet instead. It only contains - the styles added by BlockNote on top of the Mantine core styles, whereas - `@blocknote/mantine/style.css` includes both. - - - diff --git a/docs/content/docs/getting-started/meta.json b/docs/content/docs/getting-started/meta.json index a0232b9082..32241abd50 100644 --- a/docs/content/docs/getting-started/meta.json +++ b/docs/content/docs/getting-started/meta.json @@ -1,4 +1,4 @@ { "title": "Getting Started", - "pages": ["mantine", "ariakit", "shadcn", "nextjs", "vanilla-js"] + "pages": ["ariakit", "shadcn", "nextjs", "vanilla-js"] } diff --git a/docs/next.config.ts b/docs/next.config.ts index 886e3bcd87..256ed91f9f 100644 --- a/docs/next.config.ts +++ b/docs/next.config.ts @@ -28,6 +28,11 @@ const config = { ], }, redirects: async () => [ + { + source: "/docs/getting-started/mantine", + destination: "/docs/getting-started", + permanent: true, + }, { source: "/docs/editor-api/converting-blocks", destination: "/docs/features/interoperability", diff --git a/examples/01-basic/01-minimal/src/App.tsx b/examples/01-basic/01-minimal/src/App.tsx index a3b92bafd2..c545b7b4dd 100644 --- a/examples/01-basic/01-minimal/src/App.tsx +++ b/examples/01-basic/01-minimal/src/App.tsx @@ -1,7 +1,7 @@ import "@blocknote/core/fonts/inter.css"; +import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; -import { useCreateBlockNote } from "@blocknote/react"; export default function App() { // Creates a new editor instance. From ea5f74f862f1e8697eb8f24581494cc0d5f734b1 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 5 Dec 2025 12:47:26 +0100 Subject: [PATCH 2/3] Revert "Updated docs" This reverts commit 2e78c2df66a4541eb4c1f1d001cb29bcf82af55a. --- docs/app/(home)/hero/DemoEditor.tsx | 2 +- .../docs/features/collaboration/comments.mdx | 34 ++++++++---------- docs/content/docs/getting-started/index.mdx | 35 ++++++++++++------- docs/content/docs/getting-started/mantine.mdx | 35 +++++++++++++++++++ docs/content/docs/getting-started/meta.json | 2 +- docs/next.config.ts | 5 --- examples/01-basic/01-minimal/src/App.tsx | 2 +- 7 files changed, 74 insertions(+), 41 deletions(-) create mode 100644 docs/content/docs/getting-started/mantine.mdx diff --git a/docs/app/(home)/hero/DemoEditor.tsx b/docs/app/(home)/hero/DemoEditor.tsx index d8ffb959ee..3712a843ce 100644 --- a/docs/app/(home)/hero/DemoEditor.tsx +++ b/docs/app/(home)/hero/DemoEditor.tsx @@ -1,9 +1,9 @@ import { BlockNoteSchema, combineByGroup, + filterSuggestionItems, uploadToTmpFilesDotOrg_DEV_ONLY, } from "@blocknote/core"; -import { filterSuggestionItems } from "@blocknote/core/extensions"; import * as locales from "@blocknote/core/locales"; import "@blocknote/core/fonts/inter.css"; import { diff --git a/docs/content/docs/features/collaboration/comments.mdx b/docs/content/docs/features/collaboration/comments.mdx index c6e8165cc2..3b7cfa9035 100644 --- a/docs/content/docs/features/collaboration/comments.mdx +++ b/docs/content/docs/features/collaboration/comments.mdx @@ -10,30 +10,24 @@ BlockNote supports Comments, Comment Threads (replies) and emoji reactions out o To enable comments in your editor, you need to: -- Create an instance of the `CommentsExtension` and pass it to the `extensions` editor option. -- Pass `resolveUsers` to your `CommentsExtension` instance, so it can retrieve and display user information (names and avatars). -- Provide a `ThreadStore` to your `CommentsExtension` instance, so it can store and retrieve comment threads. -- Enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) -- Optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. +- provide a `resolveUsers` so BlockNote can retrieve and display user information (names and avatars). +- provide a `ThreadStore` so BlockNote can store and retrieve comment threads. +- enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) +- optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. ```tsx const editor = useCreateBlockNote({ - extensions: [ - CommentsExtension({ - // See below. - threadStore: ..., - // Return user information for the given userIds (see below). - resolveUsers: async (userIds: string[]) => { ... }, - // Optional, can be left undefined - schema: BlockNoteSchema.create(...) - }), - ... - ], + resolveUsers: async (userIds: string[]) => { + // return user information for the given userIds (see below) + }, + comments: { + threadStore: yourThreadStore, // see below + schema: BlockNoteSchema.create(...) // optional, can be left undefined + }, + // ... collaboration: { - // See real-time collaboration docs - ... + // ... // see real-time collaboration docs }, - ... }); ``` @@ -127,7 +121,7 @@ _Note: The `ThreadStoreAuth` only used to show / hide options in the UI. To secu When a user interacts with a comment, the data is stored in the ThreadStore, along with the active user ID (as specified when initiating the ThreadStore). -To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function to your `CommentsExtension`. +To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function in the editor options. This function is called with an array of user IDs, and should return an array of `User` objects in the same order. diff --git a/docs/content/docs/getting-started/index.mdx b/docs/content/docs/getting-started/index.mdx index c807bec906..f5bf167126 100644 --- a/docs/content/docs/getting-started/index.mdx +++ b/docs/content/docs/getting-started/index.mdx @@ -13,32 +13,45 @@ Getting started with BlockNote is quick and easy. Install the required packages To install BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run: ```console tab="npm" -npm install @mantine/core @mantine/hooks @mantine/utils npm install @blocknote/core @blocknote/react @blocknote/mantine ``` ```console tab="pnpm" -pnpm add @mantine/core @mantine/hooks @mantine/utils pnpm add @blocknote/core @blocknote/react @blocknote/mantine ``` ```console tab="bun" -bun add @mantine/core @mantine/hooks @mantine/utils bun add @blocknote/core @blocknote/react @blocknote/mantine ``` -This will install the [Mantine UI](https://mantine.dev/) version of BlockNote, which works great out of the box and is recommended for new projects. +BlockNote provides multiple UI library options. Choose the one that best fits your project: -BlockNote also provides multiple alternative UI library options. Choose the one that best fits your needs: - -- **[ShadCN](/docs/getting-started/shadcn)** (`@blocknote/shadcn`): Recommended for projects that already use ShadCN components or [Tailwind CSS](https://tailwindcss.com/). -- **[Ariakit](/docs/getting-started/ariakit)** (`@blocknote/ariakit`): Recommended for projects which require unstyled components for the editor. +- **[Mantine](/docs/getting-started/mantine)** (`@blocknote/mantine`) - Recommended for new projects +- **[Shadcn](/docs/getting-started/shadcn)** (`@blocknote/shadcn`) +- **[Ariakit](/docs/getting-started/ariakit)** (`@blocknote/ariakit`) ## Create an editor The fastest way to get started with the BlockNote is by using the `useCreateBlockNote` hook and `BlockNoteView` component: - +```tsx +import React from "react"; +import { useCreateBlockNote } from "@blocknote/react"; +// Or, you can use ariakit, shadcn, etc. +import { BlockNoteView } from "@blocknote/mantine"; +// Default styles for the mantine editor +import "@blocknote/mantine/style.css"; +// Include the included Inter font +import "@blocknote/core/fonts/inter.css"; + +export default function MyEditor() { + // Create a new editor instance + const editor = useCreateBlockNote(); + + // Render the editor + return ; +} +``` For more information about the `useCreateBlockNote` hook and the `BlockNoteView` component, see [React Overview](/docs/react/overview). @@ -51,10 +64,6 @@ For more information about the `useCreateBlockNote` hook and the `BlockNoteView` guide on setting up Next.js + BlockNote](/docs/getting-started/nextjs) -## Usage in Mantine apps - -In the demo above, the `@blocknote/mantine/style.css` stylesheet is imported to style the UI components. If your application already uses Mantine UI though, you should use the `@blocknote/mantine/blocknoteStyles.css` stylesheet instead. It only contains the styles added by BlockNote on top of the Mantine core styles, whereas `@blocknote/mantine/style.css` includes both. - ## Next steps You now know how to integrate BlockNote into your React app! However, this is just scratching the surface of what you can do with BlockNote. diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx new file mode 100644 index 0000000000..73f4db9733 --- /dev/null +++ b/docs/content/docs/getting-started/mantine.mdx @@ -0,0 +1,35 @@ +--- +title: With Mantine +description: Mantine rich text editor using BlockNote +imageTitle: Mantine rich text editor using BlockNote +--- + +# Getting Started With Mantine + +[Mantine](https://mantine.dev/) is an open-source collection of React components. + +```console tab="npm" +npm install @mantine/core @mantine/hooks @mantine/utils +npm install @blocknote/core @blocknote/react @blocknote/mantine +``` + +```console tab="pnpm" +pnpm add @mantine/core @mantine/hooks @mantine/utils +pnpm add @blocknote/core @blocknote/react @blocknote/mantine +``` + +```console tab="bun" +bun add @mantine/core @mantine/hooks @mantine/utils +bun add @blocknote/core @blocknote/react @blocknote/mantine +``` + +To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/mantine` and the stylesheet from `@blocknote/mantine/style.css`. + + + If your application already uses Mantine UI, you should use the + `@blocknote/mantine/blocknoteStyles.css` stylesheet instead. It only contains + the styles added by BlockNote on top of the Mantine core styles, whereas + `@blocknote/mantine/style.css` includes both. + + + diff --git a/docs/content/docs/getting-started/meta.json b/docs/content/docs/getting-started/meta.json index 32241abd50..a0232b9082 100644 --- a/docs/content/docs/getting-started/meta.json +++ b/docs/content/docs/getting-started/meta.json @@ -1,4 +1,4 @@ { "title": "Getting Started", - "pages": ["ariakit", "shadcn", "nextjs", "vanilla-js"] + "pages": ["mantine", "ariakit", "shadcn", "nextjs", "vanilla-js"] } diff --git a/docs/next.config.ts b/docs/next.config.ts index 256ed91f9f..886e3bcd87 100644 --- a/docs/next.config.ts +++ b/docs/next.config.ts @@ -28,11 +28,6 @@ const config = { ], }, redirects: async () => [ - { - source: "/docs/getting-started/mantine", - destination: "/docs/getting-started", - permanent: true, - }, { source: "/docs/editor-api/converting-blocks", destination: "/docs/features/interoperability", diff --git a/examples/01-basic/01-minimal/src/App.tsx b/examples/01-basic/01-minimal/src/App.tsx index c545b7b4dd..a3b92bafd2 100644 --- a/examples/01-basic/01-minimal/src/App.tsx +++ b/examples/01-basic/01-minimal/src/App.tsx @@ -1,7 +1,7 @@ import "@blocknote/core/fonts/inter.css"; -import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; +import { useCreateBlockNote } from "@blocknote/react"; export default function App() { // Creates a new editor instance. From fbf6de35e349357db395b0056121bb1edbaeae40 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Fri, 5 Dec 2025 12:55:32 +0100 Subject: [PATCH 3/3] Updated docs --- docs/app/(home)/hero/DemoEditor.tsx | 2 +- .../docs/features/collaboration/comments.mdx | 34 +++++++++++-------- docs/content/docs/getting-started/index.mdx | 5 ++- docs/content/docs/getting-started/mantine.mdx | 6 ++-- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/docs/app/(home)/hero/DemoEditor.tsx b/docs/app/(home)/hero/DemoEditor.tsx index 3712a843ce..d8ffb959ee 100644 --- a/docs/app/(home)/hero/DemoEditor.tsx +++ b/docs/app/(home)/hero/DemoEditor.tsx @@ -1,9 +1,9 @@ import { BlockNoteSchema, combineByGroup, - filterSuggestionItems, uploadToTmpFilesDotOrg_DEV_ONLY, } from "@blocknote/core"; +import { filterSuggestionItems } from "@blocknote/core/extensions"; import * as locales from "@blocknote/core/locales"; import "@blocknote/core/fonts/inter.css"; import { diff --git a/docs/content/docs/features/collaboration/comments.mdx b/docs/content/docs/features/collaboration/comments.mdx index 3b7cfa9035..c6e8165cc2 100644 --- a/docs/content/docs/features/collaboration/comments.mdx +++ b/docs/content/docs/features/collaboration/comments.mdx @@ -10,24 +10,30 @@ BlockNote supports Comments, Comment Threads (replies) and emoji reactions out o To enable comments in your editor, you need to: -- provide a `resolveUsers` so BlockNote can retrieve and display user information (names and avatars). -- provide a `ThreadStore` so BlockNote can store and retrieve comment threads. -- enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) -- optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. +- Create an instance of the `CommentsExtension` and pass it to the `extensions` editor option. +- Pass `resolveUsers` to your `CommentsExtension` instance, so it can retrieve and display user information (names and avatars). +- Provide a `ThreadStore` to your `CommentsExtension` instance, so it can store and retrieve comment threads. +- Enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration)) +- Optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas. ```tsx const editor = useCreateBlockNote({ - resolveUsers: async (userIds: string[]) => { - // return user information for the given userIds (see below) - }, - comments: { - threadStore: yourThreadStore, // see below - schema: BlockNoteSchema.create(...) // optional, can be left undefined - }, - // ... + extensions: [ + CommentsExtension({ + // See below. + threadStore: ..., + // Return user information for the given userIds (see below). + resolveUsers: async (userIds: string[]) => { ... }, + // Optional, can be left undefined + schema: BlockNoteSchema.create(...) + }), + ... + ], collaboration: { - // ... // see real-time collaboration docs + // See real-time collaboration docs + ... }, + ... }); ``` @@ -121,7 +127,7 @@ _Note: The `ThreadStoreAuth` only used to show / hide options in the UI. To secu When a user interacts with a comment, the data is stored in the ThreadStore, along with the active user ID (as specified when initiating the ThreadStore). -To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function in the editor options. +To display comments, BlockNote needs to retrieve user information (such as the username and avatar) based on the user ID. To do this, you need to provide a `resolveUsers` function to your `CommentsExtension`. This function is called with an array of user IDs, and should return an array of `User` objects in the same order. diff --git a/docs/content/docs/getting-started/index.mdx b/docs/content/docs/getting-started/index.mdx index f5bf167126..0ee82296f4 100644 --- a/docs/content/docs/getting-started/index.mdx +++ b/docs/content/docs/getting-started/index.mdx @@ -14,17 +14,20 @@ To install BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installin ```console tab="npm" npm install @blocknote/core @blocknote/react @blocknote/mantine +npm install @mantine/core @mantine/hooks @mantine/utils ``` ```console tab="pnpm" pnpm add @blocknote/core @blocknote/react @blocknote/mantine +npm install @mantine/core @mantine/hooks @mantine/utils ``` ```console tab="bun" bun add @blocknote/core @blocknote/react @blocknote/mantine +npm install @mantine/core @mantine/hooks @mantine/utils ``` -BlockNote provides multiple UI library options. Choose the one that best fits your project: +This guide uses the [Mantine](https://mantine.dev/) version of BlockNote's UI, which works great out-of-the-box. However, BlockNote provides multiple UI library options. Choose the one that best fits your project: - **[Mantine](/docs/getting-started/mantine)** (`@blocknote/mantine`) - Recommended for new projects - **[Shadcn](/docs/getting-started/shadcn)** (`@blocknote/shadcn`) diff --git a/docs/content/docs/getting-started/mantine.mdx b/docs/content/docs/getting-started/mantine.mdx index 73f4db9733..8dbc70680c 100644 --- a/docs/content/docs/getting-started/mantine.mdx +++ b/docs/content/docs/getting-started/mantine.mdx @@ -9,18 +9,18 @@ imageTitle: Mantine rich text editor using BlockNote [Mantine](https://mantine.dev/) is an open-source collection of React components. ```console tab="npm" -npm install @mantine/core @mantine/hooks @mantine/utils npm install @blocknote/core @blocknote/react @blocknote/mantine +npm install @mantine/core @mantine/hooks @mantine/utils ``` ```console tab="pnpm" -pnpm add @mantine/core @mantine/hooks @mantine/utils pnpm add @blocknote/core @blocknote/react @blocknote/mantine +npm install @mantine/core @mantine/hooks @mantine/utils ``` ```console tab="bun" -bun add @mantine/core @mantine/hooks @mantine/utils bun add @blocknote/core @blocknote/react @blocknote/mantine +npm install @mantine/core @mantine/hooks @mantine/utils ``` To use BlockNote with Mantine, you can import `BlockNoteView` from `@blocknote/mantine` and the stylesheet from `@blocknote/mantine/style.css`.