Skip to content

Commit 329709d

Browse files
matthewlipskiYousefED
matthewlipski
and
YousefED
authored
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]>
1 parent a205478 commit 329709d

File tree

85 files changed

+1788
-439
lines changed

Some content is hidden

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

85 files changed

+1788
-439
lines changed

‎docs/pages/docs/collaboration/comments.mdx

+29-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: Learn how to enable comments in your BlockNote editor
44
imageTitle: Comments
55
---
66

7-
import { Example } from "@/components/example";
7+
import {Example} from "@/components/example";
88

99
# Comments
1010

@@ -33,7 +33,7 @@ const editor = useCreateBlockNote({
3333

3434
**Demo**
3535

36-
<Example name="collaboration/comments" />
36+
<Example name="collaboration/comments"/>
3737

3838
## ThreadStores
3939

@@ -63,7 +63,10 @@ The `RESTYjsThreadStore` combines Yjs storage with a REST API backend, providing
6363
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.
6464

6565
```tsx
66-
import { RESTYjsThreadStore, DefaultThreadStoreAuth } from "@blocknote/core/comments";
66+
import {
67+
RESTYjsThreadStore,
68+
DefaultThreadStoreAuth,
69+
} from "@blocknote/core/comments";
6770

6871
const threadStore = new RESTYjsThreadStore(
6972
"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
8487
The `TiptapThreadStore` integrates with Tiptap's collaboration provider for comment management. This implementation is designed specifically for use with Tiptap's collaborative editing features.
8588

8689
```tsx
87-
import { TiptapThreadStore, DefaultThreadStoreAuth } from "@blocknote/core/comments";
90+
import {
91+
TiptapThreadStore,
92+
DefaultThreadStoreAuth,
93+
} from "@blocknote/core/comments";
8894
import { TiptapCollabProvider } from "@hocuspocus/provider";
8995

9096
// Create a TiptapCollabProvider (you probably have this already)
@@ -130,9 +136,27 @@ async function myResolveUsers(userIds: string[]): Promise<User[]> {
130136
// fetch user information from your database / backend
131137
// and return an array of User objects
132138

133-
return await callYourBackend(userIds); //
139+
return await callYourBackend(userIds);
134140

135141
// Return a list of users
136142
return users;
137143
}
138144
```
145+
146+
## Sidebar View
147+
148+
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:
149+
150+
<Example name="collaboration/comments-with-sidebar"/>
151+
152+
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.
153+
154+
`ThreadsSidebar` also takes 2 props:
155+
156+
**`filter`**: Filter the comments in the sidebar. Can pass `"open"`, `"resolved"`, or `"all"`, to only show open, resolved, or all comments. Defaults to `"all"`.
157+
158+
**`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"`.
159+
160+
**`maxCommentsBeforeCollapse`**: The maximum number of comments that can be in a thread before the replies get collapsed. Defaults to 5.
161+
162+
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
useCreateBlockNote,
1717
} from "@blocknote/react";
1818

19-
import { BlueButton } from "./BlueButton";
19+
import { BlueButton } from "./BlueButton.js";
2020

2121
export default function App() {
2222
// Creates a new editor instance.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
useCreateBlockNote,
99
} from "@blocknote/react";
1010

11-
import { RemoveBlockButton } from "./RemoveBlockButton";
11+
import { RemoveBlockButton } from "./RemoveBlockButton.js";
1212

1313
export default function App() {
1414
// Creates a new editor instance.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
useCreateBlockNote,
1111
} from "@blocknote/react";
1212

13-
import { ResetBlockTypeItem } from "./ResetBlockTypeItem";
13+
import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
1414

1515
export default function App() {
1616
// Creates a new editor instance.

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
useCreateBlockNote,
1313
} from "@blocknote/react";
1414

15-
import { Mention } from "./Mention";
15+
import { Mention } from "./Mention.js";
1616

1717
// Our schema with inline content specs, which contain the configs and
1818
// implementations for inline content that we want our editor to use.

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import {
99
useCreateBlockNote,
1010
} from "@blocknote/react";
1111

12-
import { FileReplaceButton } from "./FileReplaceButton";
13-
import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
12+
import { FileReplaceButton } from "./FileReplaceButton.js";
13+
import { uploadFile, UppyFilePanel } from "./UppyFilePanel.js";
1414

1515
export default function App() {
1616
// Creates a new editor instance.

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {
1313
import { useEffect, useState } from "react";
1414

1515
import { RiImageEditFill } from "react-icons/ri";
16-
import { UppyFilePanel } from "./UppyFilePanel";
16+
17+
import { UppyFilePanel } from "./UppyFilePanel.js";
1718

1819
// Copied with minor changes from:
1920
// https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import "@blocknote/react/style.css";
1111
import { createTheme, ThemeProvider, useMediaQuery } from "@mui/material";
1212
import { useMemo } from "react";
1313

14-
import { schema } from "./schema";
15-
import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar";
16-
import { CustomMUISideMenu } from "./MUISideMenu";
17-
import { MUISuggestionMenu } from "./MUISuggestionMenu";
14+
import { schema } from "./schema.js";
15+
import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar.js";
16+
import { CustomMUISideMenu } from "./MUISideMenu.js";
17+
import { MUISuggestionMenu } from "./MUISuggestionMenu.js";
1818

1919
import "./style.css";
2020

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ import {
4242
ReactNode,
4343
} from "react";
4444

45-
import { TextBlockSchema } from "./schema";
45+
import { TextBlockSchema } from "./schema.js";
4646

4747
// This replaces the generic Mantine `ToolbarSelect` component with a simplified
4848
// MUI version:

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
} from "@mui/material";
1212
import { MouseEvent, ReactNode, useCallback, useMemo, useState } from "react";
1313

14-
import { TextBlockSchema } from "./schema";
14+
import { TextBlockSchema } from "./schema.js";
1515

1616
// This replaces the default `RemoveBlockItem` component with a simplified
1717
// MUI version:

‎examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from "@mui/material";
1717
import { useEffect, useMemo, useRef } from "react";
1818

19-
import { TextBlockSchema } from "./schema";
19+
import { TextBlockSchema } from "./schema.js";
2020

2121
// If you want to change the items in a Suggestion Menu, like the Slash Menu,
2222
// you don't need to modify any of the components in this file. Instead, you

‎examples/03-ui-components/link-toolbar-buttons/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useCreateBlockNote,
88
} from "@blocknote/react";
99

10-
import { AlertButton } from "./AlertButton";
10+
import { AlertButton } from "./AlertButton.js";
1111

1212
export default function App() {
1313
// Creates a new editor instance.

‎examples/06-custom-schema/01-alert-block/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from "@blocknote/react";
1515

1616
import { RiAlertFill } from "react-icons/ri";
17-
import { Alert } from "./Alert";
17+
import { Alert } from "./Alert.js";
1818

1919
// Our schema with block specs, which contain the configs and implementations for blocks
2020
// that we want our editor to use.

‎examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
useCreateBlockNote,
1313
} from "@blocknote/react";
1414

15-
import { Mention } from "./Mention";
15+
import { Mention } from "./Mention.js";
1616

1717
// Our schema with inline content specs, which contain the configs and
1818
// implementations for inline content that we want our editor to use.

‎examples/06-custom-schema/03-font-style/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121

2222
import { RiText } from "react-icons/ri";
2323

24-
import { Font } from "./Font";
24+
import { Font } from "./Font.js";
2525

2626
// Our schema with style specs, which contain the configs and implementations for styles
2727
// that we want our editor to use.

‎examples/06-custom-schema/04-pdf-file-block/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515

1616
import { RiFilePdfFill } from "react-icons/ri";
1717

18-
import { PDF } from "./PDF";
18+
import { PDF } from "./PDF.js";
1919

2020
// Our schema with block specs, which contain the configs and implementations for blocks
2121
// that we want our editor to use.

‎examples/07-collaboration/04-comments/App.tsx

+39-39
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ import {
77
import { BlockNoteView } from "@blocknote/mantine";
88
import "@blocknote/mantine/style.css";
99
import { useCreateBlockNote } from "@blocknote/react";
10-
import { MantineProvider, Select } from "@mantine/core";
1110
import { YDocProvider, useYDoc, useYjsProvider } from "@y-sweet/react";
1211
import { useMemo, useState } from "react";
12+
13+
import { SettingsSelect } from "./SettingsSelect.js";
1314
import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata.js";
1415

16+
import "./style.css";
17+
1518
// The resolveUsers function fetches information about your users
1619
// (e.g. their name, avatar, etc.). Usually, you'd fetch this from your
1720
// own database or user management system.
@@ -27,21 +30,20 @@ async function resolveUsers(userIds: string[]) {
2730
// (but of course, you also use other collaboration providers
2831
// see the docs for more information)
2932
export default function App() {
30-
const docId = "my-blocknote-document-with-comments";
33+
const docId = "my-blocknote-document-with-comments-1";
3134

3235
return (
33-
<MantineProvider>
34-
<YDocProvider
35-
docId={docId}
36-
authEndpoint="https://demos.y-sweet.dev/api/auth">
37-
<Document />
38-
</YDocProvider>
39-
</MantineProvider>
36+
<YDocProvider
37+
docId={docId}
38+
authEndpoint="https://demos.y-sweet.dev/api/auth">
39+
<Document />
40+
</YDocProvider>
4041
);
4142
}
4243

4344
function Document() {
44-
const [user, setUser] = useState<MyUserType>(HARDCODED_USERS[0]);
45+
const [activeUser, setActiveUser] = useState<MyUserType>(HARDCODED_USERS[0]);
46+
4547
const provider = useYjsProvider();
4648

4749
// take the Y.Doc collaborative document from Y-Sweet
@@ -57,16 +59,16 @@ function Document() {
5759
// document: doc,
5860
// });
5961
// return new TiptapThreadStore(
60-
// user.id,
62+
// activeUser.id,
6163
// provider,
62-
// new DefaultThreadStoreAuth(user.id, user.role)
64+
// new DefaultThreadStoreAuth(activeUser.id, activeUser.role)
6365
// );
6466
return new YjsThreadStore(
65-
user.id,
67+
activeUser.id,
6668
doc.getMap("threads"),
67-
new DefaultThreadStoreAuth(user.id, user.role)
69+
new DefaultThreadStoreAuth(activeUser.id, activeUser.role)
6870
);
69-
}, [doc, user]);
71+
}, [doc, activeUser]);
7072

7173
// setup the editor with comments and collaboration
7274
const editor = useCreateBlockNote(
@@ -78,34 +80,32 @@ function Document() {
7880
collaboration: {
7981
provider,
8082
fragment: doc.getXmlFragment("blocknote"),
81-
user: { color: getRandomColor(), name: user.username },
83+
user: { color: getRandomColor(), name: activeUser.username },
8284
},
8385
},
84-
[user, threadStore]
86+
[activeUser, threadStore]
8587
);
8688

8789
return (
88-
<div>
89-
{/* This is a simple user selector to switch between users, for demo purposes */}
90-
<Select
91-
style={{ maxWidth: "300px" }}
92-
required
93-
label="Active user:"
94-
placeholder="Pick value"
95-
data={HARDCODED_USERS.map((user) => ({
96-
value: user.id,
97-
label: user.username + " (" + user.role + ")",
98-
}))}
99-
onChange={(value) => {
100-
if (!value) {
101-
return;
102-
}
103-
setUser(HARDCODED_USERS.find((user) => user.id === value)!);
104-
}}
105-
value={user.id}
106-
/>
107-
{/* render the actual editor */}
108-
<BlockNoteView editor={editor} editable={user.role === "editor"} />
109-
</div>
90+
<BlockNoteView
91+
className={"comments-main-container"}
92+
editor={editor}
93+
editable={activeUser.role === "editor"}>
94+
{/* We place user settings select within `BlockNoteView` as it uses
95+
BlockNote UI components and needs the context for them. */}
96+
<div className={"settings"}>
97+
<SettingsSelect
98+
label={"User"}
99+
items={HARDCODED_USERS.map((user) => ({
100+
text: `${user.username} (${
101+
user.role === "editor" ? "Editor" : "Commenter"
102+
})`,
103+
icon: null,
104+
onClick: () => setActiveUser(user),
105+
isSelected: user.id === activeUser.id,
106+
}))}
107+
/>
108+
</div>
109+
</BlockNoteView>
110110
);
111111
}

‎examples/07-collaboration/04-comments/README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# Comments & Threads
22

3-
In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments.
3+
In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text.
44

55
**Try it out:** Click the "Add comment" button in the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) to add a comment!
66

77
**Relevant Docs:**
88

9-
- [Editor Setup](/docs/editor-basics/setup)
9+
- [Comments](/docs/collaboration/comments)
1010
- [Real-time collaboration](/docs/collaboration/real-time-collaboration)
1111
- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)
12-
- [Comments](/docs/collaboration/comments)
12+
- [Editor Setup](/docs/editor-basics/setup)
1313

‎examples/07-collaboration/04-comments/SettingsSelect.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentProps, useComponentsContext } from "@blocknote/react";
2+
3+
// This component is used to display a selection dropdown with a label. By using
4+
// the useComponentsContext hook, we can create it out of existing components
5+
// within the same UI library that `BlockNoteView` uses (Mantine, Ariakit, or
6+
// ShadCN), to match the design of the editor.
7+
export const SettingsSelect = (props: {
8+
label: string;
9+
items: ComponentProps["FormattingToolbar"]["Select"]["items"];
10+
}) => {
11+
const Components = useComponentsContext()!;
12+
13+
return (
14+
<div className={"settings-select"}>
15+
<Components.Generic.Toolbar.Root className={"bn-toolbar"}>
16+
<h2>{props.label + ":"}</h2>
17+
<Components.Generic.Toolbar.Select
18+
className={"bn-select"}
19+
items={props.items}
20+
/>
21+
</Components.Generic.Toolbar.Root>
22+
</div>
23+
);
24+
};

0 commit comments

Comments
 (0)