15 KiB
| tableOfContents |
|---|
| true |
Collaborative editing
Introduction
Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of Y.js. The following guide explains all things to take into account when you consider to make Tiptap collaborative. Don’t worry, a production-grade setup doesn’t require much code.
Configure the editor
The underyling schema Tiptap uses is an excellent foundation to sync documents. With the Collaboration you can tell Tiptap to track changes to the document with Y.js.
Y.js is a conflict-free replicated data types implementation, or in other words: It’s reaaally good in merging changes. And to achieve that, changes don’t have to come in order. It’s totally fine to change a document while being offline and merge it with other changes when the device is online again.
But somehow, all clients need to interchange document modifications at some point. The most popular technologies to do that are WebRTC and WebSockets, so let’s have a closer look at those:
WebRTC
WebRTC uses a server only to connect clients with each other. The actual data is then flowing between the clients, without the server knowing anything about it and that’s great to take the first steps with collaborative editing.
First, install the dependencies:
# with npm
npm install @tiptap/extension-collaboration yjs y-webrtc
# with Yarn
yarn add @tiptap/extension-collaboration yjs y-webrtc
Now, create a new Y document, and register it with Tiptap:
import { Editor } from '@tiptap/core'
import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'
import { WebrtcProvider } from 'y-webrtc'
// A new Y document
const ydoc = new Y.Doc()
// Registered with a WebRTC provider
const provider = new WebrtcProvider('example-document', ydoc)
const editor = new Editor({
extensions: [
// …
// Register the document with Tiptap
Collaboration.configure({
document: ydoc,
}),
],
})
This should be enough to create a collaborative instance of Tiptap. Crazy, isn’t it? Try it out, and open the editor in two different browsers. Changes should be synced between different windows.
So how does this magic work? All clients need to connect with eachother, that’s the job of a provider. The WebRTC provider is the easiest way to get started with, as it requires a public server to connect clients directly with each other, but not to sync the actual changes. This has two downsides, though.
- Browsers refuse to connect with too many clients. With Y.js it’s enough if all clients are connected indirectly, but even that isn’t possible at some point. Or in other words, it doesn’t scale well for more than 100+ clients in the same document.
- It’s likely you want to involve a server to persist changes anyway. But the WebRTC signaling server (which connects all clients with eachother) doesn’t receive the changes and therefore doesn’t know what’s in the document.
Anyway, if you want to dive deeper, head over to the Y WebRTC repository on GitHub.
WebSocket (Recommended)
For most uses cases, the WebSocket provider is the recommended choice. It’s very flexible and can scale very well. For the client, the example is nearly the same, only the provider is different. First, let’s install the dependencies:
# with npm
npm install @tiptap/extension-collaboration yjs y-websocket
# with Yarn
yarn add @tiptap/extension-collaboration yjs y-websocket
And then register the WebSocket provider with Tiptap:
import { Editor } from '@tiptap/core'
import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
// A new Y document
const ydoc = new Y.Doc()
// Registered with a WebSocket provider
const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
const editor = new Editor({
extensions: [
// …
// Register the document with Tiptap
Collaboration.configure({
document: ydoc,
}),
],
})
That example doesn’t work out of the box. As you can see, it’s configured to talk to a WebSocket server which is available under ws://127.0.0.1:1234 (WebSocket protocol ws://, your local IP 127.0.0.1 and the port 1234). You need to set this up, too.
The WebSocket backend
To make the server part as easy as possible, we provide an opinionated server package, called hocuspocus (early access for sponsors). Let’s go through, how this will work once its released.
Create a new project, and install the hocuspocus server as a dependency:
# with npm
npm install @hocuspocus/server
# with Yarn
yarn add @hocuspocus/server
Create an index.js and throw in the following content, to create, configure and start your very own WebSocket server:
import { Server } from '@hocuspocus/server'
import { RocksDB } from '@hocuspocus/extension-rocksdb'
const server = Server.configure({
port: 1234,
extensions: [
new RocksDB({ path: './database' }),
],
})
server.listen()
That’s all. Start the script with:
node ./index.js
Try opening http://127.0.0.1:1234 in your browser. You should see a plain text OK if everything works fine.
Go back to your Tiptap editor and hit reload, it should now connect to the WebSocket server and changes should sync with all other clients. Amazing, isn’t it?
Multiple network providers
You can even combine multiple providers. That’s not needed, but could keep clients connected, even if one connection - for example the WebSocket server - goes down for a while. Here is an example:
new WebrtcProvider('example-document', ydoc)
new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
Yes, that’s all.
Keep in mind that WebRTC needs a signaling server to connect clients. This signaling server doesn’t receive the synced data, but helps to let clients find each other. You can run your own signaling server, if you like. Otherwise it’s using a default URL baked into the package.
Show other cursors
To enable users to see the cursor and text selections of each other, add the CollaborationCursor extension.
import { Editor } from '@tiptap/core'
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
const ydoc = new Y.Doc()
const provider = new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
const editor = new Editor({
extensions: [
Collaboration.configure({
document: ydoc,
}),
// Register the collaboration cursor extension
CollaborationCursor.configure({
provider: provider,
user: {
name: 'Cyndi Lauper',
color: '#f783ac',
},
}),
// …
],
})
As you can see, you can pass a name and color for every user. Look at the collaborative editing example, to see a more advanced example.
Offline support
Adding offline support to your collaborative editor is basically a one-liner, thanks to the fantastic Y IndexedDB adapter. Install it:
# with npm
npm install y-indexeddb
# with Yarn
yarn add y-indexeddb
And connect it with a Y document:
import { Editor } from '@tiptap/core'
import Collaboration from '@tiptap/extension-collaboration'
import * as Y from 'yjs'
import { IndexeddbPersistence } from 'y-indexeddb'
const ydoc = new Y.Doc()
// Store the Y document in the browser
new IndexeddbPersistence('example-document', ydoc)
const editor = new Editor({
extensions: [
// …
Collaboration.configure({
document: ydoc,
}),
],
})
All changes will be stored in the browser then, even if you close the tab, go offline, or make changes while working offline. Next time you are online, the WebSocket provider will try to find a connection and eventually sync the changes.
Yes, it’s magic. As already mentioned, that is all based on the fantastic Y.js framework. And if you’re using it, or our integration, you should definitely sponsor Kevin Jahns on GitHub, he is the brain behind Y.js.
Our plug & play collaboration backend
Our collaborative editing backend handles the syncing, authorization, persistence and scaling. Let’s go through a few common use cases here!
:::warning Request early access Our plug & play collaboration backend hocuspocus is still work in progress. If you want to give it a try, get early access. :::
The document name
The document name is 'example-document' in all examples here, but it could be any string. In a real-world app you’d probably add the name of your entity and the ID of the entity. Here is how that could look like:
const documentName = 'page.140'
In the backend, you can split the string to know the user is typing on a page with the ID 140 to manage authorization and such accordingly. New documents are created on the fly, no need to tell the backend about them, besides passing a string to the provider.
And if you’d like to sync multiple fields with one Y.js document, just pass different fragment names to the collaboration extension:
// a Tiptap instance for the field
Collaboration.configure({
document: ydoc,
field: 'title',
})
// and another instance for the summary, both in the same Y.js document
Collaboration.configure({
document: ydoc,
field: 'summary',
})
If your setup is somehow more complex, for example with nested fragments, you can pass a raw Y.js fragment too. document and field will be ignored then.
// a raw Y.js fragment
Collaboration.configure({
fragment: ydoc.getXmlFragment('custom'),
})
Authentication & Authorization
With the onConnect hook you can check if a client is authenticated and authorized to view the current document. In a real world application this would probably be a request to an API, a database query or something else.
When throwing an error (or rejecting the returned Promise), the connection to the client will be terminated. If the client is authorized and authenticated you can also return contextual data which will be accessible in other hooks. But you don't need to.
import { Server } from '@hocuspocus/server'
const server = Server.configure({
async onConnect(data) {
const { requestParameters } = data
// Example test if a user is authenticated using a
// request parameter
if (requestParameters.access_token !== 'super-secret-token') {
throw new Error('Not authorized!')
}
// You can set contextual data to use it in other hooks
return {
user: {
id: 1234,
name: 'John',
},
}
},
})
server.listen()
Handling Document changes
With the onChange hook you can listen to changes of the document and handle them. It should return
a Promise. It's payload contains the resulting document as well as the actual update in the Y-Doc
binary format.
In a real-world application you would probably save the current document to a database, send it via webhook to an API or something else. If you want to send a webhook to an external API we already have built a simple to use webhook extension you should check out.
It's highly recommended to debounce extensive operations (like API calls) as this hook can be fired up to multiple times a second:
You need to serialize the Y-Doc that hocuspocus gives you to something you can actually display in your views.
This example is not intended to be a primary storage as serializing to and deserializing from JSON will not store the collaboration history steps but only the resulting document. Make sure to always use the RocksDB extension as primary storage.
import { debounce } from 'debounce'
import { Server } from '@hocuspocus/server'
import { TiptapTransformer } from '@hocuspocus/transformer'
import { writeFile } from 'fs'
let debounced
const hocuspocus = Server.configure({
async onChange(data) {
const save = () => {
// Convert the y-doc to something you can actually use in your views.
// In this example we use the TiptapTransformer to get JSON from the given
// ydoc.
const prosemirrorJSON = TiptapTransformer.fromYdoc(data.document)
// Save your document. In a real-world app this could be a database query
// a webhook or something else
writeFile(
`/path/to/your/documents/${data.documentName}.json`,
prosemirrorJSON
)
// Maybe you want to store the user who changed the document?
// Guess what, you have access to your custom context from the
// onConnect hook here.
console.log(`Document ${data.documentName} changed by ${data.context.user.name}`)
}
debounced?.clear()
debounced = debounce(() => save, 4000)
debounced()
},
})
hocuspocus.listen()
Pitfalls
Schema updates
tiptap is very strict with the schema, that means, if you add something that’s not allowed according to the configured schema it’ll be thrown away. That can lead to a strange behaviour when multiple clients with different schemas share changes to a document.
Let’s say you added an editor to your app and the first people use it already. They have all a loaded instance of Tiptap with all default extensions, and therefor a schema that only allows those. But you want to add task lists in the next update, so you add the extension and deploy again.
A new user opens your app and has the updated schema (with task lists), while all others still have the old schema (without task lists). The new user checks out the newly added tasks lists and adds it to a document to show that feature to other users in that document. But then, it magically disappears right after she added it. What happened?
When one user adds a new node (or mark), that change will be synced to all other connected clients. The other connected clients apply those changes to the editor, and Tiptap, strict as it is, removes the newly added node, because it’s not allowed according to their (old) schema. Those changes will be synced to other connected clients and oops, it’s removed everywhere. To avoid this you have a few options:
- Never change the schema (not cool).
- Force clients to update when you deploy a new schema (tough).
- Keep track of the schema version and disable the editor for clients with an outdated schema (depends on your setup).
It’s on our list to provide features to make that easier. If you’ve got an idea how to improve that, share it with us!