docs: update content

This commit is contained in:
Hans Pagel
2020-11-30 14:27:36 +01:00
parent b42b39a4c5
commit 24ff5cd237

View File

@@ -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
}, },
}) })