Skip to content

Commit 02cc748

Browse files
nperez0111nperez0111
committed
fix: get the example working with the latest version of comments
1 parent c8f9ee0 commit 02cc748

File tree

6 files changed

+5388
-2453
lines changed

6 files changed

+5388
-2453
lines changed

‎hocuspocus-server/package-lock.json

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎hocuspocus-server/package.json

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,36 +18,37 @@
1818
"clean": "rimraf dist && rimraf types"
1919
},
2020
"dependencies": {
21-
"react": "^19.0.0",
22-
"react-dom": "^19.0.0",
23-
"@blocknote/react": "^0.25.1",
2421
"@blocknote/core": "^0.25.1",
25-
"@hono/node-ws": "^1.0.8",
22+
"@blocknote/react": "^0.25.1",
23+
"@blocknote/server-util": "^0.25.0",
24+
"@hocuspocus/extension-sqlite": "^2.15.2",
25+
"@hocuspocus/server": "^2.15.2",
2626
"@hono/node-server": "^1.0.8",
27+
"@hono/node-ws": "^1.0.8",
28+
"@tiptap/core": "2.11.5",
2729
"hono": "^4.7.2",
28-
"@hocuspocus/server": "^2.15.2",
29-
"@hocuspocus/extension-sqlite": "^2.15.2",
30+
"prosemirror-state": "^1.4.1",
31+
"react": "^19.0.0",
32+
"react-dom": "^19.0.0",
3033
"y-prosemirror": "^1.2.15",
31-
"@blocknote/server-util": "^0.25.0",
32-
"yjs": "^13.6.23",
33-
"prosemirror-state": "^1.4.1"
34+
"yjs": "^13.6.23"
3435
},
3536
"devDependencies": {
37+
"@typescript-eslint/eslint-plugin": "^5.5.0",
38+
"@typescript-eslint/parser": "^5.5.0",
3639
"eslint": "^8.10.0",
40+
"eslint-config-react-app": "^7.0.0",
41+
"eslint-plugin-import": "^2.31.0",
3742
"prettier": "^2.7.1",
3843
"rimraf": "^5.0.5",
3944
"rollup-plugin-webpack-stats": "^0.2.2",
4045
"typescript": "^5.3.3",
46+
"undici": "^6",
4147
"vite": "^5.3.4",
4248
"vite-node": "^2.1.6",
4349
"vite-plugin-eslint": "^1.8.1",
4450
"vite-plugin-externalize-deps": "^0.8.0",
45-
"vitest": "^2.0.3",
46-
"undici": "^6",
47-
"@typescript-eslint/eslint-plugin": "^5.5.0",
48-
"@typescript-eslint/parser": "^5.5.0",
49-
"eslint-config-react-app": "^7.0.0",
50-
"eslint-plugin-import": "^2.31.0"
51+
"vitest": "^2.0.3"
5152
},
5253
"eslintConfig": {
5354
"extends": [

‎hocuspocus-server/src/setMark.ts

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ServerBlockNoteEditor } from "@blocknote/server-util";
2+
import { Mark, mergeAttributes } from "@tiptap/core";
23
import { Document } from "@hocuspocus/server";
34
import { EditorState, TextSelection } from "prosemirror-state";
45
import {
@@ -23,7 +24,75 @@ export function setMark(
2324
) {
2425
// needed to get the pmSchema
2526
// if you use a BlockNote custom schema, make sure to pass it to the create options
26-
const editor = ServerBlockNoteEditor.create();
27+
const editor = ServerBlockNoteEditor.create({
28+
_extensions: {
29+
// TODO to get this to work, I needed to pass a copy of the comment mark to get it into the schema
30+
comments: Mark.create({
31+
name: "comment",
32+
excludes: "",
33+
inclusive: false,
34+
keepOnSplit: true,
35+
group: "blocknoteIgnore", // ignore in blocknote json
36+
37+
addAttributes() {
38+
// Return an object with attribute configuration
39+
return {
40+
// orphans are marks that currently don't have an active thread. It could be
41+
// that users have resolved the thread. Resolved threads by default are not shown in the document,
42+
// but we need to keep the mark (positioning) data so we can still "revive" it when the thread is unresolved
43+
// or we enter a "comments" view that includes resolved threads.
44+
orphan: {
45+
parseHTML: (element) => !!element.getAttribute("data-orphan"),
46+
renderHTML: (attributes) => {
47+
return (attributes as { orphan: boolean }).orphan
48+
? {
49+
"data-orphan": "true",
50+
}
51+
: {};
52+
},
53+
default: false,
54+
},
55+
threadId: {
56+
parseHTML: (element) => element.getAttribute("data-bn-thread-id"),
57+
renderHTML: (attributes) => {
58+
return {
59+
"data-bn-thread-id": (attributes as { threadId: string })
60+
.threadId,
61+
};
62+
},
63+
default: "",
64+
},
65+
};
66+
},
67+
68+
renderHTML({
69+
HTMLAttributes,
70+
}: {
71+
HTMLAttributes: Record<string, any>;
72+
}) {
73+
return [
74+
"span",
75+
mergeAttributes(HTMLAttributes, {
76+
class: "bn-thread-mark",
77+
}),
78+
];
79+
},
80+
81+
parseHTML() {
82+
return [{ tag: "span.bn-thread-mark" }];
83+
},
84+
85+
extendMarkSchema(extension) {
86+
if (extension.name === "comment") {
87+
return {
88+
blocknoteIgnore: true,
89+
};
90+
}
91+
return {};
92+
},
93+
}),
94+
},
95+
});
2796

2897
// get the prosemirror document
2998
const { doc: pNode, mapping } = initProseMirrorDoc(

‎next-app/components/Editor.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
"use client"; // this registers <Editor> as a Client Component
2-
import { DefaultThreadStoreAuth, RESTYjsThreadStore } from "@blocknote/core";
2+
import {
3+
DefaultThreadStoreAuth,
4+
RESTYjsThreadStore,
5+
} from "@blocknote/core/comments";
36
import "@blocknote/core/fonts/inter.css";
47
import { BlockNoteView } from "@blocknote/mantine";
58
import "@blocknote/mantine/style.css";

‎next-app/next.config.ts

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { NextConfig } from "next";
2+
import path from "path";
23

34
const nextConfig: NextConfig = {
45
/* config options here */
@@ -11,31 +12,31 @@ const nextConfig: NextConfig = {
1112
// };
1213

1314
// uncomment to directly load blocknote local blocknote dev
14-
// config.resolve.alias = {
15-
// yjs: path.resolve(__dirname, "./node_modules/yjs"),
16-
// "@blocknote/core/fonts/inter.css": path.resolve(
17-
// __dirname,
18-
// "../../BlockNote/packages/core/src/fonts/inter.css"
19-
// ),
20-
// "@blocknote/mantine/style.css": path.resolve(
21-
// __dirname,
22-
// "../../BlockNote/packages/mantine/dist/style.css"
23-
// ),
15+
config.resolve.alias = {
16+
yjs: path.resolve(__dirname, "./node_modules/yjs"),
17+
// "@blocknote/core/fonts/inter.css": path.resolve(
18+
// __dirname,
19+
// "../../BlockNote/packages/core/src/fonts/inter.css"
20+
// ),
21+
// "@blocknote/mantine/style.css": path.resolve(
22+
// __dirname,
23+
// "../../BlockNote/packages/mantine/dist/style.css"
24+
// ),
2425

25-
// "@blocknote/core": path.resolve(
26-
// __dirname,
27-
// "../../BlockNote/packages/core/"
28-
// ),
29-
// "@blocknote/react": path.resolve(
30-
// __dirname,
31-
// "../../BlockNote/packages/react/"
32-
// ),
33-
// "@blocknote/mantine": path.resolve(
34-
// __dirname,
35-
// "../../BlockNote/packages/mantine/"
36-
// ),
37-
// ...config.resolve.alias,
38-
// };
26+
// "@blocknote/core": path.resolve(
27+
// __dirname,
28+
// "../../BlockNote/packages/core/"
29+
// ),
30+
// "@blocknote/react": path.resolve(
31+
// __dirname,
32+
// "../../BlockNote/packages/react/"
33+
// ),
34+
// "@blocknote/mantine": path.resolve(
35+
// __dirname,
36+
// "../../BlockNote/packages/mantine/"
37+
// ),
38+
...config.resolve.alias,
39+
};
3940

4041
return config;
4142
},

0 commit comments

Comments
 (0)