Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@
"@mantine/utils": "^6.0.22",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"@y-sweet/react": "^0.6.3"
"y-partykit": "^0.0.25",
"yjs": "^13.6.27"
},
"devDependencies": {
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.1",
"@vitejs/plugin-react": "^4.7.0",
"vite": "^5.4.20"
}
}
}
30 changes: 11 additions & 19 deletions examples/07-collaboration/06-comments-with-sidebar/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ import {
ThreadsSidebar,
useCreateBlockNote,
} from "@blocknote/react";
import { YDocProvider, useYDoc, useYjsProvider } from "@y-sweet/react";
import { useMemo, useState } from "react";
import YPartyKitProvider from "y-partykit/provider";
import * as Y from "yjs";

import { SettingsSelect } from "./SettingsSelect";
import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata";
Expand All @@ -31,23 +32,19 @@ async function resolveUsers(userIds: string[]) {
return HARDCODED_USERS.filter((user) => userIds.includes(user.id));
}

// Sets up Yjs document and PartyKit Yjs provider.
const doc = new Y.Doc();
const provider = new YPartyKitProvider(
"blocknote-dev.yousefed.partykit.dev",
// Use a unique name as a "room" for your application.
"comments-with-sidebar",
doc,
);

// This follows the Y-Sweet example to setup a collabotive editor
// (but of course, you also use other collaboration providers
// see the docs for more information)
export default function App() {
const docId = "my-blocknote-document-with-comments-2";

return (
<YDocProvider
docId={docId}
authEndpoint="https://demos.y-sweet.dev/api/auth"
>
<Document />
</YDocProvider>
);
}

function Document() {
const [activeUser, setActiveUser] = useState<MyUserType>(HARDCODED_USERS[0]);
const [commentFilter, setCommentFilter] = useState<
"open" | "resolved" | "all"
Expand All @@ -56,11 +53,6 @@ function Document() {
"position" | "recent-activity" | "oldest"
>("position");

const provider = useYjsProvider();

// take the Y.Doc collaborative document from Y-Sweet
const doc = useYDoc();

// setup the thread store which stores / and syncs thread / comment data
const threadStore = useMemo(() => {
// (alternative, use TiptapCollabProvider)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ export abstract class YjsThreadStoreBase extends ThreadStore {
public getThreads(): Map<string, ThreadData> {
const threadMap = new Map<string, ThreadData>();
this.threadsYMap.forEach((yThread, id) => {
threadMap.set(id, yMapToThread(yThread));
if (yThread instanceof Y.Map) {
threadMap.set(id, yMapToThread(yThread));
}
});
return threadMap;
}
Expand Down
4 changes: 0 additions & 4 deletions packages/mantine/src/blocknoteStyles.css
Original file line number Diff line number Diff line change
Expand Up @@ -635,10 +635,6 @@
box-shadow: none;
}

.bn-mantine .bn-thread:not(.selected) {
cursor: pointer;
}

.bn-mantine .bn-thread-comments,
.bn-mantine .bn-thread-composer {
display: flex;
Expand Down
9 changes: 6 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading