add new collab test

examples/Components/Routes/Collaboration3/Collab.js

@@ -0,0 +1,24 @@
+import { Extension } from 'tiptap'
+import { collab } from 'prosemirror-collab'
+
+export default class CollabExtension extends Extension {
+  get name() {
+    return 'collab'
+  }
+
+  get defaultOptions() {
+    return {
+      version: 0,
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+    }
+  }
+
+  get plugins() {
+    return [
+      collab({
+        version: this.options.version,
+        clientID: this.options.clientID,
+      }),
+    ]
+  }
+}

examples/Components/Routes/Collaboration3/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="editor">
+    <editor-content class="editor__content" :editor="editor" v-if="editor" />
+  </div>
+</template>
+
+<script>
+import io from 'socket.io-client'
+import { debounce } from 'lodash-es'
+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 {
+      history: [],
+      editor: null,
+      socket: null,
+      newState: null,
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+    }
+  },
+
+  methods: {
+    initEditor({ doc, version }) {
+      if (this.editor) {
+        this.editor.destroy()
+      }
+
+      this.editor = new Editor({
+        content: doc,
+        extensions: [
+          new Collab({
+            version,
+            clientID: this.clientID,
+          }),
+        ],
+        // onTransaction: transaction => {
+        //   console.log('onTransaction')
+        //   this.newState = this.editor.state.apply(transaction)
+        //   this.editor.view.updateState(this.state.edit)
+        //   return false
+        // },
+        onUpdate: ({ state }) => {
+          this.getSendableSteps(state)
+        },
+      })
+    },
+
+    getSendableSteps: debounce(function (state) {
+      const sendable = sendableSteps(state)
+
+      if (sendable) {
+        this.socket.emit('update', sendable)
+
+        const { steps } = sendable
+        const clientIDs = this.repeat(sendable.clientID, steps.length)
+
+        this.history.push({
+          state,
+          version: getVersion(state),
+          steps,
+          clientIDs,
+        })
+
+        const transaction = receiveTransaction(
+          state,
+          steps,
+          clientIDs,
+        )
+
+        this.editor.view.dispatch(transaction)
+      }
+    }, 250),
+
+    receiveData({ steps }) {
+      const { state, view, schema } = this.editor
+
+      const transaction = receiveTransaction(
+        state,
+        steps.map(step => Step.fromJSON(schema, step)),
+        steps.map(step => step.clientID),
+      )
+
+      view.dispatch(transaction)
+    },
+
+    repeat(val, n) {
+      const result = []
+      for (let i = 0; i < n; i++) result.push(val)
+      return result
+    },
+  },
+
+  mounted() {
+    this.socket = io('wss://tiptap-sockets-2.glitch.me')
+      .on('connect', () => {
+        console.log('connected')
+      })
+      .on('disconnect', () => {
+        console.log('disconnected')
+      })
+      .on('document', data => {
+        this.initEditor(data)
+      })
+      .on('update', data => {
+        this.receiveData(data)
+      })
+      .on('versionInSync', version => {
+        console.log('version in sync', version)
+        // TODO remove steps older than version
+      })
+      .on('versionMismatch', ({ version, data }) => {
+        console.log('version mismatch', version)
+        // TODO: go back to `version`, apply `steps`, apply unmerged `steps`
+
+        const history = this.history.find(item => item.version === version)
+
+        const { state, view, schema } = this.editor
+
+        view.updateState(history.state)
+
+        view.dispatch(receiveTransaction(
+          history.state,
+          data.map(item => Step.fromJSON(schema, item.step)),
+          data.map(item => item.clientID),
+        ))
+
+        view.dispatch(receiveTransaction(
+          history.state,
+          history.steps,
+          history.clientIDs,
+        ))
+
+        // const transaction = receiveTransaction(
+        //   state,
+        //   steps,
+        //   clientIDs,
+        // )
+
+        // this.editor.view.dispatch(transaction)
+      })
+      // .on('versionMismatch', (version, steps) => {
+      //   // set state to the latest synced version?
+      //   // this.editor.view.updateState(this.prevState)
+
+      //   const currentVersion = getVersion(this.editor.state)
+      //   console.log('should poll version', currentVersion)
+
+      //   this.socket.emit('getVersionSteps', currentVersion)
+      // })
+      // .on('versionSteps', data => {
+      //   console.log('versionSteps', data)
+      //   const { state, view, schema } = this.editor
+
+      //   const transaction = receiveTransaction(
+      //     state,
+      //     data.map(item => Step.fromJSON(schema, item.step)),
+      //     data.map(item => item.clientID),
+      //   )
+
+      //   view.dispatch(transaction)
+      // })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

examples/Components/Subnavigation/index.vue

@@ -54,6 +54,9 @@
     <router-link class="subnavigation__link" to="/collaboration2">
       Collaboration 2
     </router-link>
+    <router-link class="subnavigation__link" to="/collaboration3">
+      Collaboration 3
+    </router-link>
   </div>
 </template>
 

examples/main.js

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