diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue index a4def537..c3f880a6 100644 --- a/docs/src/demos/Examples/CollaborativeEditing/index.vue +++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue @@ -67,6 +67,7 @@ export default { name: this.getRandomName(), color: this.getRandomColor(), }, + provider: null, indexdb: null, editor: null, users: [], @@ -76,8 +77,8 @@ export default { mounted() { const ydoc = new Y.Doc() - const provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-collaboration-example', ydoc) - provider.on('status', event => { + this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-collaboration-example', ydoc) + this.provider.on('status', event => { this.status = event.status }) @@ -90,10 +91,10 @@ export default { TaskList, CustomTaskItem, Collaboration.configure({ - provider, + document: ydoc, }), CollaborationCursor.configure({ - provider, + provider: this.provider, user: this.currentUser, onUpdate: users => { this.users = users @@ -146,6 +147,7 @@ export default { beforeDestroy() { this.editor.destroy() + this.provider.destroy() }, } diff --git a/docs/src/demos/Examples/Drawing/index.vue b/docs/src/demos/Examples/Drawing/index.vue index 0308bbb6..e6d6dc85 100644 --- a/docs/src/demos/Examples/Drawing/index.vue +++ b/docs/src/demos/Examples/Drawing/index.vue @@ -34,7 +34,7 @@ export default { content: 'paper', }), Collaboration.configure({ - provider, + document: ydoc, }), Text, Paper, diff --git a/docs/src/demos/Extensions/Collaboration/index.vue b/docs/src/demos/Extensions/Collaboration/index.vue index caddab84..9158e49e 100644 --- a/docs/src/demos/Extensions/Collaboration/index.vue +++ b/docs/src/demos/Extensions/Collaboration/index.vue @@ -19,12 +19,13 @@ export default { data() { return { editor: null, + provider: null, } }, mounted() { const ydoc = new Y.Doc() - const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc) + this.provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc) this.editor = new Editor({ extensions: [ @@ -32,7 +33,7 @@ export default { Paragraph, Text, Collaboration.configure({ - provider, + document: ydoc, }), ], }) @@ -40,6 +41,7 @@ export default { beforeDestroy() { this.editor.destroy() + this.provider.destroy() }, } diff --git a/docs/src/demos/Extensions/CollaborationCursor/index.vue b/docs/src/demos/Extensions/CollaborationCursor/index.vue index cc3f25f2..4bd200b9 100644 --- a/docs/src/demos/Extensions/CollaborationCursor/index.vue +++ b/docs/src/demos/Extensions/CollaborationCursor/index.vue @@ -20,12 +20,13 @@ export default { data() { return { editor: null, + provider: null, } }, mounted() { const ydoc = new Y.Doc() - const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc) + this.provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc) this.editor = new Editor({ extensions: [ @@ -33,10 +34,10 @@ export default { Paragraph, Text, Collaboration.configure({ - provider, + document: ydoc, }), CollaborationCursor.configure({ - provider, + provider: this.provider, user: { name: 'Cyndi Lauper', color: '#f783ac', @@ -48,6 +49,7 @@ export default { beforeDestroy() { this.editor.destroy() + this.provider.destroy() }, } diff --git a/docs/src/docPages/api/extensions/collaboration-cursor.md b/docs/src/docPages/api/extensions/collaboration-cursor.md index d0e2442b..5750ef31 100644 --- a/docs/src/docPages/api/extensions/collaboration-cursor.md +++ b/docs/src/docPages/api/extensions/collaboration-cursor.md @@ -1,4 +1,7 @@ # CollaborationCursor +[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration-cursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration-cursor) +[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration-cursor.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration-cursor?minimal=true) + This extension adds information about all connected users (like their name and a specified color), their current cursor position and their text selection (if there’s one). Open this page in multiple browser windows to test it. @@ -39,4 +42,4 @@ yarn add @tiptap/extension-collaboration-cursor :::warning Public The content of this editor is shared with other users. ::: - + diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md index 16d515c2..ac17e4ca 100644 --- a/docs/src/docPages/api/extensions/collaboration.md +++ b/docs/src/docPages/api/extensions/collaboration.md @@ -1,5 +1,4 @@ # Collaboration - [![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration) [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration?minimal=true) @@ -21,9 +20,9 @@ yarn add @tiptap/extension-collaboration yjs y-websocket ``` ## Settings -| Option | Type | Default | Description | -| -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------- | -| provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. | +| Option | Type | Default | Description | +| -------- | -------- | ------- | ----------------------------- | +| document | `Object` | `null` | An initialized Y.js document. | ## Commands | Command | Parameters | Description | @@ -47,4 +46,4 @@ yarn add @tiptap/extension-collaboration yjs y-websocket :::warning Public The content of this editor is shared with other users. ::: - + diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md index 33fefe8c..19a10202 100644 --- a/docs/src/docPages/guide/collaborative-editing.md +++ b/docs/src/docPages/guide/collaborative-editing.md @@ -45,7 +45,7 @@ const editor = new Editor({ // … // Register the document with tiptap Collaboration.configure({ - provider + document: ydoc, }), ], }) @@ -90,7 +90,7 @@ const editor = new Editor({ // … // Register the document with tiptap Collaboration.configure({ - provider + document: ydoc, }), ], }) @@ -128,7 +128,19 @@ node ./index.js This should output something like “Listening on ws://127.0.0.1:1234”. If you go back to your tiptap editor and hit reload, it should connect to the WebSocket server and changes should sync with all other clients. Amazing, isn’t it? -### Add cursors +### 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: + +```js +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](https://github.com/yjs/y-webrtc#signaling), if you like. + +### Show other cursors If you want to enable users to see the cursor and text selections of each other, add the [`CollaborationCursor`](/api/extensions/collaboration-cursor) extension. ```js @@ -145,11 +157,11 @@ const editor = new Editor({ extensions: [ // … Collaboration.configure({ - provider + document: ydoc, }), // Register the collaboration cursor extension CollaborationCursor.configure({ - provider: this.provider, + provider: provider, name: 'Cyndi Lauper', color: '#f783ac', }), @@ -179,14 +191,15 @@ import * as Y from 'yjs' import { IndexeddbPersistence } from 'y-indexeddb' const ydoc = new Y.Doc() + // Store the Y document in the browser -const indexdb = new IndexeddbPersistence('example-document', ydoc) +new IndexeddbPersistence('example-document', ydoc) const editor = new Editor({ extensions: [ // … Collaboration.configure({ - provider + document: ydoc, }), ], }) diff --git a/packages/extension-collaboration/src/collaboration.ts b/packages/extension-collaboration/src/collaboration.ts index c4683b8a..c68191fd 100644 --- a/packages/extension-collaboration/src/collaboration.ts +++ b/packages/extension-collaboration/src/collaboration.ts @@ -7,14 +7,17 @@ import { } from 'y-prosemirror' export interface CollaborationOptions { - provider: any, + /** + * An initialized Y.js document. + */ + document: any, } export const Collaboration = Extension.create({ name: 'collaboration', defaultOptions: { - provider: null, + document: null, }, addCommands() { @@ -49,15 +52,11 @@ export const Collaboration = Extension.create({ addProseMirrorPlugins() { return [ ySyncPlugin( - this.options.provider.doc.getXmlFragment('prosemirror'), + this.options.document.getXmlFragment('prosemirror'), ), yUndoPlugin(), ] }, - - onDestroy() { - this.options.provider?.destroy() - }, }) declare module '@tiptap/core' {