docs: update content
This commit is contained in:
@@ -4,6 +4,12 @@
|
|||||||
Using collaborative editing in production? Do the right thing and [sponsor our work](/sponsor)!
|
Using collaborative editing in production? Do the right thing and [sponsor our work](/sponsor)!
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
<!--
|
||||||
|
TODO:
|
||||||
|
- Pass auth token to the provider
|
||||||
|
-
|
||||||
|
-->
|
||||||
|
|
||||||
## toc
|
## toc
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
@@ -27,7 +33,7 @@ npm install @tiptap/extension-collaboration yjs y-webrtc
|
|||||||
yarn add @tiptap/extension-collaboration yjs y-webrtc
|
yarn add @tiptap/extension-collaboration yjs y-webrtc
|
||||||
```
|
```
|
||||||
|
|
||||||
And create a new Y document, and register it with tiptap:
|
Now, create a new Y document, and register it with tiptap:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Editor } from '@tiptap/core'
|
import { Editor } from '@tiptap/core'
|
||||||
@@ -39,15 +45,13 @@ import { WebrtcProvider } from 'y-webrtc'
|
|||||||
const ydoc = new Y.Doc()
|
const ydoc = new Y.Doc()
|
||||||
// Registered with a WebRTC provider
|
// Registered with a WebRTC provider
|
||||||
const provider = new WebrtcProvider('example-document', ydoc)
|
const provider = new WebrtcProvider('example-document', ydoc)
|
||||||
// Point to the ProseMirror schema
|
|
||||||
const type = ydoc.getXmlFragment('prosemirror')
|
|
||||||
|
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
// …
|
// …
|
||||||
// Register the document with tiptap
|
// Register the document with tiptap
|
||||||
Collaboration.configure({
|
Collaboration.configure({
|
||||||
type: type,
|
provider
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@@ -86,15 +90,13 @@ import { WebsocketProvider } from 'y-websocket'
|
|||||||
const ydoc = new Y.Doc()
|
const ydoc = new Y.Doc()
|
||||||
// Registered with a WebSocket provider
|
// Registered with a WebSocket provider
|
||||||
const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
|
const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
|
||||||
// Point to the ProseMirror schema
|
|
||||||
const type = ydoc.getXmlFragment('prosemirror')
|
|
||||||
|
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
// …
|
// …
|
||||||
// Register the document with tiptap
|
// Register the document with tiptap
|
||||||
Collaboration.configure({
|
Collaboration.configure({
|
||||||
type: type,
|
provider
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@@ -144,13 +146,12 @@ import { WebsocketProvider } from 'y-websocket'
|
|||||||
|
|
||||||
const ydoc = new Y.Doc()
|
const ydoc = new Y.Doc()
|
||||||
const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
|
const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
|
||||||
const type = ydoc.getXmlFragment('prosemirror')
|
|
||||||
|
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
extensions: [
|
extensions: [
|
||||||
// …
|
// …
|
||||||
Collaboration.configure({
|
Collaboration.configure({
|
||||||
type: type,
|
provider
|
||||||
}),
|
}),
|
||||||
// Register the collaboration cursor extension
|
// Register the collaboration cursor extension
|
||||||
CollaborationCursor.configure({
|
CollaborationCursor.configure({
|
||||||
@@ -184,7 +185,6 @@ import * as Y from 'yjs'
|
|||||||
import { IndexeddbPersistence } from 'y-indexeddb'
|
import { IndexeddbPersistence } from 'y-indexeddb'
|
||||||
|
|
||||||
const ydoc = new Y.Doc()
|
const ydoc = new Y.Doc()
|
||||||
const type = ydoc.getXmlFragment('prosemirror')
|
|
||||||
// Store the Y document in the browser
|
// Store the Y document in the browser
|
||||||
const indexdb = new IndexeddbPersistence('example-document', ydoc)
|
const indexdb = new IndexeddbPersistence('example-document', ydoc)
|
||||||
|
|
||||||
@@ -192,7 +192,7 @@ const editor = new Editor({
|
|||||||
extensions: [
|
extensions: [
|
||||||
// …
|
// …
|
||||||
Collaboration.configure({
|
Collaboration.configure({
|
||||||
type: type,
|
provider
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
@@ -213,9 +213,7 @@ import { Server } from '@hocuspocus/server'
|
|||||||
|
|
||||||
const server = Server.configure({
|
const server = Server.configure({
|
||||||
onJoinDocument(data, resolve, reject) {
|
onJoinDocument(data, resolve, reject) {
|
||||||
const {
|
const { documentName, clientID, requestHeaders, clientsCount, document } = data
|
||||||
documentName, clientID, requestHeaders, clientsCount, document,
|
|
||||||
} = data
|
|
||||||
// Your code here, for example a request to an API
|
// Your code here, for example a request to an API
|
||||||
|
|
||||||
// If the user is authorized …
|
// If the user is authorized …
|
||||||
@@ -260,9 +258,7 @@ const server = Server.configure({
|
|||||||
|
|
||||||
// executed when the document is changed
|
// executed when the document is changed
|
||||||
onChange(data) {
|
onChange(data) {
|
||||||
const {
|
const { documentName, clientID, requestHeaders, clientsCount, document } = data
|
||||||
documentName, clientID, requestHeaders, clientsCount, document,
|
|
||||||
} = data
|
|
||||||
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user