add new collaboration cursor plugin

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

@@ -8,6 +8,9 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Collaboration from '@tiptap/extension-collaboration'
+import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
 
 export default {
   components: {
@@ -16,11 +19,18 @@ export default {
 
   data() {
     return {
+      ydoc: null,
+      provider: null,
+      type: null,
       editor: null,
     }
   },
 
   mounted() {
+    this.ydoc = new Y.Doc()
+    this.provider = new WebrtcProvider('example', this.ydoc)
+    this.type = this.ydoc.getXmlFragment('prosemirror')
+
     this.editor = new Editor({
       // TODO: This is added by every new user.
       // content: `
@@ -31,6 +41,11 @@ export default {
         Paragraph(),
         Text(),
         Collaboration({
+          provider: this.provider,
+          type: this.type,
+        }),
+        CollaborationCursor({
+          provider: this.provider,
           name: 'Other User',
           color: '#d6336c',
         }),
@@ -40,6 +55,7 @@ export default {
 
   beforeDestroy() {
     this.editor.destroy()
+    this.provider.destroy()
   },
 }
 </script>

packages/extension-collaboration-cursor/index.ts

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core'
+import { yCursorPlugin } from 'y-prosemirror'
+
+export interface CollaborationCursorOptions {
+  name: string,
+  color: string,
+  provider: any,
+}
+
+export default new Extension<CollaborationCursorOptions>()
+  .name('collaboration_cursor')
+  .defaults({
+    provider: null,
+    name: 'Someone',
+    color: '#cccccc',
+  })
+  .plugins(({ options }) => [
+    yCursorPlugin((() => {
+      options.provider.awareness.setLocalStateField('user', {
+        name: options.name,
+        color: options.color,
+      })
+
+      return options.provider.awareness
+    })()),
+  ])
+  .create()

packages/extension-collaboration-cursor/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@tiptap/extension-collaboration-cursor",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-extension-collaboration-cursor.js",
+  "umd:main": "dist/tiptap-extension-collaboration-cursor.umd.js",
+  "module": "dist/tiptap-extension-collaboration-cursor.mjs",
+  "unpkg": "dist/tiptap-extension-collaboration-cursor.js",
+  "jsdelivr": "dist/tiptap-extension-collaboration-cursor.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "2.x"
+  },
+  "dependencies": {
+    "y-prosemirror": "^0.3.7",
+    "y-webrtc": "^10.1.6",
+    "yjs": "^13.3.2"
+  }
+}

packages/extension-collaboration/index.ts

@@ -1,45 +1,27 @@
 import { Extension } from '@tiptap/core'
-import * as Y from 'yjs'
 import {
-  redo, undo, yCursorPlugin, ySyncPlugin, yUndoPlugin,
+  redo, undo, ySyncPlugin, yUndoPlugin,
 } from 'y-prosemirror'
-import { WebrtcProvider } from 'y-webrtc'
 import { keymap } from 'prosemirror-keymap'
 
 export interface CollaborationOptions {
-  name: string,
-  color: string,
-  provider?: any,
-  type?: any,
+  provider: any,
+  type: any,
 }
 
-const ydoc = new Y.Doc()
-const provider = new WebrtcProvider('example', ydoc)
-const type = ydoc.getXmlFragment('prosemirror')
-
 export default new Extension<CollaborationOptions>()
   .name('collaboration')
   .defaults({
-    name: 'Someone',
-    color: '#cccccc',
     provider: null,
     type: null,
   })
   .plugins(({ options }) => [
-    // Collaboration
-    ySyncPlugin(type),
+    ySyncPlugin(options.type),
     yUndoPlugin(),
     keymap({
       'Mod-z': undo,
       'Mod-y': redo,
       'Mod-Shift-z': redo,
     }),
-
-    // CollaborationCursor
-    yCursorPlugin((() => {
-      provider.awareness.setLocalStateField('user', { name: options.name, color: options.color })
-
-      return provider.awareness
-    })()),
   ])
   .create()