docs: Update getting started & comments pages (#2218)

* Updated docs

* Revert "Updated docs"

This reverts commit 2e78c2d.

* Updated docs

Author: matthewlipski

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.
 

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

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