add basic collab implementation

examples/Components/Routes/Collaboration/Collab.js

@@ -0,0 +1,12 @@
+import { Extension } from 'tiptap'
+import { collab } from 'prosemirror-collab'
+
+export default class CollabExtension extends Extension {
+  get name() {
+    return 'collab'
+  }
+
+  get plugins() {
+    return [collab()]
+  }
+}

examples/Components/Routes/Collaboration/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="editor">
+    <editor-content class="editor__content" :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from 'tiptap'
+import { Step } from 'prosemirror-transform'
+import { receiveTransaction, sendableSteps, getVersion } from 'prosemirror-collab'
+import Collab from './Collab'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      ws: null,
+
+      authority: {
+        steps: [],
+        stepClientIDs: [],
+      },
+
+      editor: new Editor({
+        content: 'Collaboration!',
+        extensions: [new Collab()],
+        onUpdate: ({ state }) => {
+          const sendable = sendableSteps(state)
+
+          if (sendable) {
+            this.ws.send(JSON.stringify(sendable))
+          }
+        },
+      }),
+    }
+  },
+
+  methods: {
+    receiveData({ version, steps, clientID }) {
+      if (version !== this.authority.steps.length) {
+        return
+      }
+
+      steps.forEach(step => {
+        this.authority.steps.push(step)
+        this.authority.stepClientIDs.push(clientID)
+      })
+
+      this.updateDoc()
+    },
+
+    updateDoc() {
+      const { state, view, schema } = this.editor
+      const version = getVersion(state)
+      const data = this.stepsSince(version)
+      const transaction = receiveTransaction(
+        state,
+        data.steps.map(step => Step.fromJSON(schema, step)),
+        data.clientIDs,
+      )
+
+      view.dispatch(transaction)
+    },
+
+    stepsSince(version) {
+      return {
+        steps: this.authority.steps.slice(version),
+        clientIDs: this.authority.stepClientIDs.slice(version),
+      }
+    },
+  },
+
+  mounted() {
+    this.ws = new WebSocket('wss://tiptap-sockets.glitch.me')
+
+    this.ws.onmessage = event => {
+      this.receiveData(JSON.parse(event.data))
+    }
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

examples/Components/Subnavigation/index.vue

@@ -48,6 +48,9 @@
     <router-link class="subnavigation__link" to="/export">
       Export HTML or JSON
     </router-link>
+    <router-link class="subnavigation__link" to="/collaboration">
+      Collaboration
+    </router-link>
   </div>
 </template>
 

examples/main.js

@@ -124,6 +124,13 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Export',
     },
   },
+  {
+    path: '/collaboration',
+    component: () => import('Components/Routes/Collaboration'),
+    meta: {
+      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
+    },
+  },
 ]
 
 const router = new VueRouter({

package.json

@@ -86,5 +86,7 @@
     "webpack-svgstore-plugin": "^4.1.0",
     "zlib": "^1.0.5"
   },
-  "dependencies": {}
+  "dependencies": {
+    "prosemirror-collab": "^1.1.1"
+  }
 }

yarn.lock

@@ -9572,6 +9572,13 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
+prosemirror-collab@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.1.1.tgz#c8f5d951abaeac8a80818b6bd960f5a392b35b3f"
+  integrity sha512-BpXIB3WBD7UvgxuiasKOxlAZ78TTOdW+SQN4bbJan995tVx/wM/OZXtRJebS+tSWWAbRisHaO3ciFo732vuvdA==
+  dependencies:
+    prosemirror-state "^1.0.0"
+
 prosemirror-commands@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.0.7.tgz#e5a2ba821e29ea7065c88277fe2c3d7f6b0b9d37"