-
-
Notifications
You must be signed in to change notification settings - Fork 440
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add collaborative initial content example
- Loading branch information
Martin Anselmo
authored and
Martin Anselmo
committed
Aug 7, 2024
1 parent
823f151
commit e026105
Showing
17 changed files
with
18,774 additions
and
0 deletions.
There are no files selected for viewing
6 changes: 6 additions & 0 deletions
6
examples/07-collaboration/03-collaborative-initial-content/.bnexample.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"playground": true, | ||
"docs": true, | ||
"author": "mfanselmo", | ||
"tags": ["Advanced", "Blocks", "yjs", "Collaboration"] | ||
} |
3 changes: 3 additions & 0 deletions
3
examples/07-collaboration/03-collaborative-initial-content/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
node_modules | ||
client/node_modules | ||
server/node_modules |
7 changes: 7 additions & 0 deletions
7
examples/07-collaboration/03-collaborative-initial-content/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
# Initial content with server-util and yjs | ||
|
||
This example shows how to instantiate a collaborative editor with existing content, using the `@blocknote/server-util` API | ||
|
||
## Relevant documentation | ||
- https://docs.yjs.dev/api/document-updates | ||
- https://www.blocknotejs.org/docs/editor-api/server-processing |
64 changes: 64 additions & 0 deletions
64
examples/07-collaboration/03-collaborative-initial-content/client/App.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import { BlockNoteSchema } from '@blocknote/core'; | ||
import '@blocknote/core/fonts/inter.css'; | ||
import { useCreateBlockNote } from '@blocknote/react'; | ||
import { BlockNoteView } from '@blocknote/ariakit'; | ||
import '@blocknote/ariakit/style.css'; | ||
import * as Y from 'yjs'; | ||
import { useEffect, useMemo } from 'react'; | ||
import { useQuery } from '@tanstack/react-query'; | ||
import { toUint8Array } from 'js-base64'; | ||
|
||
const schema = BlockNoteSchema.create(); | ||
|
||
export default function App() { | ||
// Just fetches the initial contents | ||
const { data: initialContentsUpdateVector, refetch } = useQuery({ | ||
queryKey: [1], | ||
queryFn: async () => | ||
fetch('http://localhost:3000/') | ||
.then((res) => res.text()) | ||
.then((res) => toUint8Array(res)), // API returns initial doc as a yjs update encoded as base64 | ||
}); | ||
|
||
const ydoc = useMemo(() => { | ||
const doc = new Y.Doc(); | ||
if (initialContentsUpdateVector) { | ||
// https://docs.yjs.dev/api/document-updates | ||
Y.applyUpdateV2(doc, initialContentsUpdateVector); | ||
} | ||
|
||
return doc; | ||
}, [initialContentsUpdateVector]); | ||
|
||
// Cleanup of the ydoc it is re-initialized | ||
useEffect(() => { | ||
return () => { | ||
if (ydoc) { | ||
ydoc.destroy(); | ||
} | ||
}; | ||
}, [ydoc]); | ||
|
||
// Creates a new editor instance. | ||
const editor = useCreateBlockNote( | ||
{ | ||
collaboration: { | ||
fragment: ydoc.getXmlFragment('document-store'), | ||
provider: null, | ||
user: { | ||
name: 'me', | ||
color: 'white', | ||
}, | ||
}, | ||
schema, | ||
}, | ||
[ydoc] // Since we are changing the doc we need to re-initialize the editor | ||
); | ||
|
||
return ( | ||
<> | ||
<button onClick={() => refetch()}>refetch initial contents</button> | ||
<BlockNoteView editor={editor}></BlockNoteView> | ||
</> | ||
); | ||
} |
11 changes: 11 additions & 0 deletions
11
examples/07-collaboration/03-collaborative-initial-content/client/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
# Alert Block | ||
|
||
In this example, we create a custom `Alert` block which is used to emphasize text. In addition, we create a Slash Menu item which inserts an `Alert` block. | ||
|
||
**Try it out:** Press the "/" key to open the Slash Menu and insert an `Alert` block! | ||
|
||
**Relevant Docs:** | ||
|
||
- [Custom Blocks](/docs/custom-schemas/custom-blocks) | ||
- [Changing Slash Menu Items](/docs/ui-components/suggestion-menus#changing-slash-menu-items) | ||
- [Editor Setup](/docs/editor-basics/setup) |
14 changes: 14 additions & 0 deletions
14
examples/07-collaboration/03-collaborative-initial-content/client/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<html lang="en"> | ||
<head> | ||
<script> | ||
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> | ||
</script> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Alert Block</title> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="./main.tsx"></script> | ||
</body> | ||
</html> |
16 changes: 16 additions & 0 deletions
16
examples/07-collaboration/03-collaborative-initial-content/client/main.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY | ||
import React from 'react'; | ||
import { createRoot } from 'react-dom/client'; | ||
import App from './App'; | ||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | ||
|
||
const root = createRoot(document.getElementById('root')!); | ||
const queryClient = new QueryClient(); | ||
|
||
root.render( | ||
<React.StrictMode> | ||
<QueryClientProvider client={queryClient}> | ||
<App /> | ||
</QueryClientProvider> | ||
</React.StrictMode> | ||
); |
Oops, something went wrong.