fix collab examples

docs/src/demos/Extensions/Collaboration/index.vue

@@ -18,30 +18,21 @@ export default {
 
   data() {
     return {
-      documentName: 'tiptap-collaboration-extension',
-      ydoc: null,
-      provider: null,
-      type: null,
       editor: null,
     }
   },
 
   mounted() {
-    this.ydoc = new Y.Doc()
+    const ydoc = new Y.Doc()
-    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
+    const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc)
-    this.type = this.ydoc.getXmlFragment('prosemirror')
 
     this.editor = new Editor({
-      // TODO: This is added by every new user.
-      // content: `
-      //   <p>Example Text</p>
-      // `,
       extensions: [
         Document,
         Paragraph,
         Text,
         Collaboration.configure({
-          type: this.type,
+          provider,
         }),
       ],
     })
@@ -49,7 +40,6 @@ export default {
 
   beforeDestroy() {
     this.editor.destroy()
-    this.provider.destroy()
   },
 }
 </script>

docs/src/demos/Extensions/CollaborationCursor/index.vue

@@ -19,35 +19,28 @@ export default {
 
   data() {
     return {
-      documentName: 'tiptap-collaboration-cursor-extension',
-      ydoc: null,
-      provider: null,
-      type: null,
       editor: null,
     }
   },
 
   mounted() {
-    this.ydoc = new Y.Doc()
+    const ydoc = new Y.Doc()
-    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
+    const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc)
-    this.type = this.ydoc.getXmlFragment('prosemirror')
 
     this.editor = new Editor({
-      // TODO: This is added by every new user.
-      // content: `
-      //   <p>Example Text</p>
-      // `,
       extensions: [
         Document,
         Paragraph,
         Text,
         Collaboration.configure({
-          type: this.type,
+          provider,
         }),
         CollaborationCursor.configure({
-          provider: this.provider,
+          provider,
+          user: {
             name: 'Cyndi Lauper',
             color: '#f783ac',
+          },
         }),
       ],
     })
@@ -55,7 +48,6 @@ export default {
 
   beforeDestroy() {
     this.editor.destroy()
-    this.provider.destroy()
   },
 }
 </script>