Skip to content

Commit f426528

Browse files
nperez0111nperez0111
committed
feat: add multi-doc versioning example
1 parent 1949208 commit f426528

25 files changed

Lines changed: 6918 additions & 10 deletions

‎examples/07-collaboration/10-versioning/src/style.css‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
.mantine-AppShell-main {
2+
padding-inline-start: 0 !important;
3+
padding-inline-end: 0 !important;
4+
padding: 0 !important;
5+
height: 100%;
6+
}
17
.wrapper {
2-
height: calc(100vh - 20px);
8+
height: 100%;
39
}
410

511
.wrapper > .bn-container {
@@ -11,14 +17,14 @@
1117
.layout {
1218
display: flex;
1319
gap: 8px;
14-
height: calc(100vh - 20px);
20+
height: 100vh;
21+
margin-left: 8px;
1522
}
1623

1724
.editor-panel {
1825
display: flex;
1926
flex: 1;
2027
flex-direction: column;
21-
height: calc(100vh - 20px);
2228
min-width: 0;
2329
overflow: auto;
2430
}
@@ -39,7 +45,7 @@
3945
background-color: var(--bn-colors-disabled-background);
4046
display: flex;
4147
flex-direction: column;
42-
height: calc(100vh - 20px);
48+
height: 100vh;
4349
overflow: auto;
4450
width: 350px;
4551
}
@@ -164,7 +170,7 @@ ins {
164170
}
165171

166172
ins:hover::after {
167-
content: attr(data-user);
173+
content: attr(data-description);
168174
position: absolute;
169175
top: 100%;
170176
left: 50%;
@@ -198,7 +204,7 @@ del {
198204
}
199205

200206
del:hover::after {
201-
content: attr(data-user);
207+
content: attr(data-description);
202208
position: absolute;
203209
top: 100%;
204210
left: 50%;

‎examples/07-collaboration/11-yhub/src/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ ins {
55
}
66

77
ins:hover::after {
8-
content: attr(data-user);
8+
content: attr(data-description);
99
position: absolute;
1010
top: 100%;
1111
left: 50%;
@@ -39,7 +39,7 @@ del {
3939
}
4040

4141
del:hover::after {
42-
content: attr(data-user);
42+
content: attr(data-description);
4343
position: absolute;
4444
top: 100%;
4545
left: 50%;

‎examples/07-collaboration/14-multi-doc-versioning/.bnexample.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"playground": true,
3+
"docs": false,
4+
"author": "nperez0111",
5+
"tags": ["Advanced", "Collaboration"],
6+
"dependencies": {
7+
"@y/protocols": "^1.0.6-rc.1",
8+
"@y/websocket": "^4.0.0-3",
9+
"@y/y": "^14.0.0-rc.16",
10+
"lib0": "1.0.0-rc.13"
11+
}
12+
}

‎examples/07-collaboration/14-multi-doc-versioning/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Multi-Document Collaboration with Version History
2+
3+
This example shows a multi-document collaborative editor with per-document version history, using BlockNote's `VersioningExtension` and Y.js v14.
4+
5+
**Features:**
6+
7+
- User picker (per-tab identity via `sessionStorage`)
8+
- Left sidebar with document list (create, rename, delete)
9+
- Collaborative editing with Y.js (including suggestion mode)
10+
- Right sidebar with version history powered by `VersioningSidebar`
11+
- Per-document versioning backed by `localStorage`
12+
- Open multiple tabs with different users via the `?as=` URL param
13+
14+
**Relevant Docs:**
15+
16+
- [Versioning](https://www.blocknotejs.org/docs/collaboration/versioning)
17+
- [Y.js Collaboration](https://www.blocknotejs.org/docs/collaboration)

‎examples/07-collaboration/14-multi-doc-versioning/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Multi-Document Collaboration with Version History</title>
6+
<script>
7+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
8+
</script>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/07-collaboration/14-multi-doc-versioning/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./src/App.jsx";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
);

‎examples/07-collaboration/14-multi-doc-versioning/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@blocknote/example-collaboration-multi-doc-versioning",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"type": "module",
5+
"private": true,
6+
"version": "0.12.4",
7+
"scripts": {
8+
"start": "vp dev",
9+
"dev": "vp dev",
10+
"build:prod": "tsc && vp build",
11+
"preview": "vp preview"
12+
},
13+
"dependencies": {
14+
"@blocknote/ariakit": "latest",
15+
"@blocknote/core": "latest",
16+
"@blocknote/mantine": "latest",
17+
"@blocknote/react": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"@mantine/core": "^9.0.2",
20+
"@mantine/hooks": "^9.0.2",
21+
"react": "^19.2.3",
22+
"react-dom": "^19.2.3",
23+
"@y/protocols": "^1.0.6-rc.1",
24+
"@y/websocket": "^4.0.0-3",
25+
"@y/y": "^14.0.0-rc.16",
26+
"lib0": "1.0.0-rc.13"
27+
},
28+
"devDependencies": {
29+
"@types/react": "^19.2.3",
30+
"@types/react-dom": "^19.2.3",
31+
"@vitejs/plugin-react": "^6.0.1",
32+
"vite-plus": "catalog:"
33+
}
34+
}

0 commit comments

Comments
 (0)