feat: Threads sidebar (#1454)

* wip: better liveblocks support

* misc fixes

* misc

* revert minimal

* simplify setup

* update config

* fix

* fix

* markview

* cleanup

* wip

* wip

* wip

* wip

* misc

* add threadstore tests

* document recommended auth rules

* resolve

* basic userstore impl

* user auth

* Big comments UX WIP

* Updated reactions UX

* change reaction implementation

* reactions improvements

* small cleanup

* cleanups + mark some todos

* comments

* fix locales

* fix build

* cleanup + sample

* fix build

* fix lint

* disable liveblocks for now

* lint

* fix linkify warning + make toggle editable comment

* fix content reset bug

* Implemented PR feedback

* fix placeholder

* clean comment editor

* fix build

* fix placeholders

* - Adjusted comment spacing
- Changed emoji icon
- Changed "More actions" dropdown alignment
- Made toolbar button tooltips with spaces not become multi-line
- Made "More actions" and emoji buttons hide tooltips when dropdown is open
- Made emoji picker close when emoji is picked

* Implemented PR feedback

* fix build

* implement TipTapThreadStore

* address feedback

* add comment

* wip

* add autofocus

* Simplified tooltip + popover interaction

* wip

* feat: ShadCN comments (#1445)

* Added ShadCN comments implementation

* Removed unneeded state

* Fixed menu stealing focus

* Updated screenshots

* Added ariakit comments implementation (#1448)

* change reaction auth

* make emoji optional

* fix bug

* Extracted reaction badge WIP

* fix useUsers

* Fixed formatting toolbar not showing up when editor is non-editable

* Fixed reaction badge tooltip line breaks and made leaving comment not hide popovers/menus in it

* Improved badge UX and made reactions hide when editing

* wip

* refactor: add renderEditor boolean to BlockNoteView

* Fixed new comments sometimes not being selectable

* fix unnecessary rerender

* remove unused files

* Improved UX/UI

* rest thread store

* fix copy/paste

* add shift

* add docs

* update docs

* revert liveblocks, will be separate PR

* clean lockfile

* fix some todos

* adress number of comments

* address more comments

* address some comments

* clean commentsplugin

* ForceSelectionVisible

* fix floatingcomposercontroller

* fix unit test

* close threads on esc

* remove debugger

* small fix

* Fixed badge styles on docs

* Fixed badge click handler

* Added remaining UX fixes from Mantine to Ariakit/ShadCN

* Externalized strings

* Small styling fix

* Small styling fix

* Fix lint

* Fixed side menu regression issue

* Implemented PR feedback

* Implemented PR feedback

* Updated emoji picker screenshots

* Revert "Updated emoji picker screenshots"

This reverts commit a647ec3.

* Updated `package-lock.json`

* Fixed `no` locale

* Updated `package-lock.json`

* Added temp test pass

* Fixed merge issues

* Fixed issues and build

* Separated open and resolved comments

* Small fixes

* BlockNoteView changes and major UX improvements

* Small user select change

* - Renamed `ThreadStreamView` to `ThreadsSidebar`
- Added filtering and sorting options
- Polished comments demo UX

* Small cleanup

* Fix build and cleanup

* `BlockNoteView` fix

* WIP feedback TODOs

* WIP feedback

* Small fix

* Small fix

* WIP feedback

* WIP feedback

* WIP feedback

* WIP feedback

* Shrunk emoji picker

* Fixed build

* Fixed lint

* Small styling fix

* Fixed docs build

* Updated `Thread` and `Comment` props + small changes

* Implemented PR feedback

* Updated demo styles

* Added file name extensions to examples

* Added docs & minor changes

* Fixed i18n

* Styling changes

* Fixed lint/build

* improve commentplugin state

* clean threadssidebar and fix performance

* Implemented PR feedback

* Moved styles

* Reverted doc ID

* Resolved remaining feedback

* Small fix

* Fixed TODOs

* Small fix

* Implemented remaining TODO

* Implemented PR feedback

* Small examples update

* Small styling fix

---------

Co-authored-by: yousefed <[email protected]>

Author: matthewlipski

docs/pages/docs/collaboration/comments.mdx

@@ -4,7 +4,7 @@ description: Learn how to enable comments in your BlockNote editor
 imageTitle: Comments
 ---
 
-import { Example } from "@/components/example";
+import {Example} from "@/components/example";
 
 # Comments
 
@@ -33,7 +33,7 @@ const editor = useCreateBlockNote({
 
 **Demo**
 
-<Example name="collaboration/comments" />
+<Example name="collaboration/comments"/>
 
 ## ThreadStores
 
@@ -63,7 +63,10 @@ The `RESTYjsThreadStore` combines Yjs storage with a REST API backend, providing
 In this implementation, data is written to the Yjs document via a REST API which can handle access control. Data is still retrieved from the Yjs document directly (after it's been updated by the REST API), this way all comment information automatically syncs between clients using the existing collaboration provider.
 
 ```tsx
-import { RESTYjsThreadStore, DefaultThreadStoreAuth } from "@blocknote/core/comments";
+import {
+  RESTYjsThreadStore,
+  DefaultThreadStoreAuth,
+} from "@blocknote/core/comments";
 
 const threadStore = new RESTYjsThreadStore(
   "https://api.example.com/comments", // Base URL for the REST API
@@ -84,7 +87,10 @@ _Note: Because writes are executed via a REST API, the `RESTYjsThreadStore` is n
 The `TiptapThreadStore` integrates with Tiptap's collaboration provider for comment management. This implementation is designed specifically for use with Tiptap's collaborative editing features.
 
 ```tsx
-import { TiptapThreadStore, DefaultThreadStoreAuth } from "@blocknote/core/comments";
+import {
+  TiptapThreadStore,
+  DefaultThreadStoreAuth,
+} from "@blocknote/core/comments";
 import { TiptapCollabProvider } from "@hocuspocus/provider";
 
 // Create a TiptapCollabProvider (you probably have this already)
@@ -130,9 +136,27 @@ async function myResolveUsers(userIds: string[]): Promise<User[]> {
   // fetch user information from your database / backend
   // and return an array of User objects
 
-  return await callYourBackend(userIds); //
+  return await callYourBackend(userIds);
 
   // Return a list of users
   return users;
 }
 ```
+
+## Sidebar View
+
+BlockNote also offers a different way of viewing and interacting with comments, via a sidebar instead of floating in the editor, using the `ThreadsSidebar` component:
+
+<Example name="collaboration/comments-with-sidebar"/>
+
+The only requirement for `ThreadsSidebar` is that it should be placed somewhere within your `BlockNoteView`, other than that you can position and style it however you want.
+
+`ThreadsSidebar` also takes 2 props:
+
+**`filter`**: Filter the comments in the sidebar. Can pass `"open"`, `"resolved"`, or `"all"`, to only show open, resolved, or all comments. Defaults to `"all"`.
+
+**`sort`**: Sort the comments in the sidebar. Can pass `"position"`, `"recent-activity"`, or `"oldest"`. Sorting by `"recent-activity"` uses the most recently added comment to sort threads, while `"oldest"` uses the thread creation date. Sorting by `"position"` puts comments in the same order as their reference text in the editor. Defaults to `"position"`.
+
+**`maxCommentsBeforeCollapse`**: The maximum number of comments that can be in a thread before the replies get collapsed. Defaults to 5.
+
+See [here](https://playground.blocknotejs.org/collaboration/comments-with-sidebar?hideMenu=true) for a standalone example of the `ThreadsSidebar` component.

examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx

@@ -16,7 +16,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { BlueButton } from "./BlueButton";
+import { BlueButton } from "./BlueButton.js";
 
 export default function App() {
   // Creates a new editor instance.

examples/03-ui-components/04-side-menu-buttons/App.tsx

@@ -8,7 +8,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { RemoveBlockButton } from "./RemoveBlockButton";
+import { RemoveBlockButton } from "./RemoveBlockButton.js";
 
 export default function App() {
   // Creates a new editor instance.

examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx

@@ -10,7 +10,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { ResetBlockTypeItem } from "./ResetBlockTypeItem";
+import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
 
 export default function App() {
   // Creates a new editor instance.

examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx

@@ -12,7 +12,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { Mention } from "./Mention";
+import { Mention } from "./Mention.js";
 
 // Our schema with inline content specs, which contain the configs and
 // implementations for inline content  that we want our editor to use.

examples/03-ui-components/11-uppy-file-panel/App.tsx

@@ -9,8 +9,8 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { FileReplaceButton } from "./FileReplaceButton";
-import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
+import { FileReplaceButton } from "./FileReplaceButton.js";
+import { uploadFile, UppyFilePanel } from "./UppyFilePanel.js";
 
 export default function App() {
   // Creates a new editor instance.

examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx

@@ -13,7 +13,8 @@ import {
 import { useEffect, useState } from "react";
 
 import { RiImageEditFill } from "react-icons/ri";
-import { UppyFilePanel } from "./UppyFilePanel";
+
+import { UppyFilePanel } from "./UppyFilePanel.js";
 
 // Copied with minor changes from:
 // https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx

examples/03-ui-components/13-custom-ui/App.tsx

@@ -11,10 +11,10 @@ import "@blocknote/react/style.css";
 import { createTheme, ThemeProvider, useMediaQuery } from "@mui/material";
 import { useMemo } from "react";
 
-import { schema } from "./schema";
-import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar";
-import { CustomMUISideMenu } from "./MUISideMenu";
-import { MUISuggestionMenu } from "./MUISuggestionMenu";
+import { schema } from "./schema.js";
+import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar.js";
+import { CustomMUISideMenu } from "./MUISideMenu.js";
+import { MUISuggestionMenu } from "./MUISuggestionMenu.js";
 
 import "./style.css";
 

examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx

@@ -42,7 +42,7 @@ import {
   ReactNode,
 } from "react";
 
-import { TextBlockSchema } from "./schema";
+import { TextBlockSchema } from "./schema.js";
 
 // This replaces the generic Mantine `ToolbarSelect` component with a simplified
 // MUI version:

examples/03-ui-components/13-custom-ui/MUISideMenu.tsx

@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import { MouseEvent, ReactNode, useCallback, useMemo, useState } from "react";
 
-import { TextBlockSchema } from "./schema";
+import { TextBlockSchema } from "./schema.js";
 
 // This replaces the default `RemoveBlockItem` component with a simplified
 // MUI version: