make less assumptions about the Y.js provider, fix #70

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)
+    this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-collaboration-example', ydoc)
-    provider.on('status', event => {
+    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()
   },
 }
 </script>

docs/src/demos/Examples/Drawing/index.vue

@@ -34,7 +34,7 @@ export default {
           content: 'paper',
         }),
         Collaboration.configure({
-          provider,
+          document: ydoc,
         }),
         Text,
         Paper,

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()
   },
 }
 </script>

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()
   },
 }
 </script>

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.
 :::
-<demo name="Extensions/CollaborationCursor" highlight="11,38-44" />
+<demo name="Extensions/CollaborationCursor" highlight="11,39-45" />

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                                                                                          |
+| Option   | Type     | Default | Description                   |
-| -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------- |
+| -------- | -------- | ------- | ----------------------------- |
-| provider | `Object` | `null`  | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
+| 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.
 :::
-<demo name="Extensions/Collaboration" highlight="10,26-27,34-36" />
+<demo name="Extensions/Collaboration" highlight="10,27-28,35-37,44" />

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

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: <CollaborationOptions>{
-    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' {