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`.