From e9e50a2e75e7853e5119143928655135a4fdfcf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 3 May 2019 18:05:05 +0200
Subject: [PATCH] refactoring

---
 .../Components/Routes/Collaboration/index.vue |  83 +++-----
 .../Routes/Collaboration2/Collab.js           |  24 ---
 .../Routes/Collaboration2/index.vue           | 183 ------------------
 .../Routes/Collaboration3/Collab.js           |  24 ---
 .../Routes/Collaboration3/index.vue           |  87 ---------
 examples/Components/Subnavigation/index.vue   |   6 -
 examples/main.js                              |  14 --
 7 files changed, 27 insertions(+), 394 deletions(-)
 delete mode 100644 examples/Components/Routes/Collaboration2/Collab.js
 delete mode 100644 examples/Components/Routes/Collaboration2/index.vue
 delete mode 100644 examples/Components/Routes/Collaboration3/Collab.js
 delete mode 100644 examples/Components/Routes/Collaboration3/index.vue

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 0d7620eb..c3d84fa0 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -5,6 +5,8 @@
 </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'
@@ -18,85 +20,54 @@ export default {
   data() {
     return {
       editor: null,
-      ws: null,
-      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
-      collabStartVersion: 0,
-      collabHistory: {
-        steps: [],
-        clientIDs: [],
-      },
+      socket: null,
     }
   },
 
   methods: {
     initEditor({ doc, version }) {
-      this.collabStartVersion = version + 1
+      if (this.editor) {
+        this.editor.destroy()
+      }
 
       this.editor = new Editor({
         content: doc,
         extensions: [
-          new Collab({
-            version: this.collabStartVersion,
-            clientID: this.clientID,
-          }),
+          new Collab({ version }),
         ],
         onUpdate: ({ state }) => {
-          const sendable = sendableSteps(state)
-
-          if (sendable) {
-            this.ws.send(JSON.stringify(sendable))
-          }
+          this.getSendableSteps(state)
         },
       })
     },
 
-    receiveData({ version, steps, clientID }) {
-      if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
+    getSendableSteps: debounce(function (state) {
+      const sendable = sendableSteps(state)
+
+      if (sendable) {
+        this.socket.emit('update', sendable)
+      }
+    }, 250),
+
+    receiveData({ steps, version }) {
+      const { state, view, schema } = this.editor
+
+      if (getVersion(state) > version) {
         return
       }
 
-      steps.forEach(step => {
-        this.collabHistory.steps.push(step)
-        this.collabHistory.clientIDs.push(clientID)
-      })
-
-      this.updateDoc()
-    },
-
-    updateDoc() {
-      const { state, view, schema } = this.editor
-      const version = getVersion(state)
-      const data = this.stepsSince(version)
-      const transaction = receiveTransaction(
+      view.dispatch(receiveTransaction(
         state,
-        data.steps.map(step => Step.fromJSON(schema, step)),
-        data.clientIDs,
-      )
-
-      view.dispatch(transaction)
-    },
-
-    stepsSince(version) {
-      const count = version - this.collabStartVersion
-      return {
-        steps: this.collabHistory.steps.slice(count),
-        clientIDs: this.collabHistory.clientIDs.slice(count),
-      }
+        steps.map(item => Step.fromJSON(schema, item.step)),
+        steps.map(item => item.clientID),
+      ))
     },
   },
 
   mounted() {
-    this.ws = new WebSocket('wss://tiptap-sockets.glitch.me')
-
-    this.ws.onmessage = event => {
-      const payload = JSON.parse(event.data)
-
-      if (payload.doc) {
-        this.initEditor(payload)
-      } else {
-        this.receiveData(payload)
-      }
-    }
+    this.socket = io('wss://tiptap-sockets-2.glitch.me')
+      .on('document', data => this.initEditor(data))
+      .on('update', data => this.receiveData(data))
   },
 
   beforeDestroy() {
diff --git a/examples/Components/Routes/Collaboration2/Collab.js b/examples/Components/Routes/Collaboration2/Collab.js
deleted file mode 100644
index 21dc7255..00000000
--- a/examples/Components/Routes/Collaboration2/Collab.js
+++ /dev/null
@@ -1,24 +0,0 @@
-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,
-      }),
-    ]
-  }
-}
diff --git a/examples/Components/Routes/Collaboration2/index.vue b/examples/Components/Routes/Collaboration2/index.vue
deleted file mode 100644
index 85c90ae3..00000000
--- a/examples/Components/Routes/Collaboration2/index.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<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`
-
-        console.log(this.history.length)
-
-        const history = this.history.find(item => {
-          console.log('search', item.version, version)
-          return item.version === version
-        })
-
-        console.log({ history })
-
-        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>
diff --git a/examples/Components/Routes/Collaboration3/Collab.js b/examples/Components/Routes/Collaboration3/Collab.js
deleted file mode 100644
index 21dc7255..00000000
--- a/examples/Components/Routes/Collaboration3/Collab.js
+++ /dev/null
@@ -1,24 +0,0 @@
-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,
-      }),
-    ]
-  }
-}
diff --git a/examples/Components/Routes/Collaboration3/index.vue b/examples/Components/Routes/Collaboration3/index.vue
deleted file mode 100644
index 6301f756..00000000
--- a/examples/Components/Routes/Collaboration3/index.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<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 {
-      editor: null,
-      socket: 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,
-          }),
-        ],
-        onUpdate: ({ state }) => {
-          this.getSendableSteps(state)
-        },
-      })
-    },
-
-    getSendableSteps: debounce(function (state) {
-      const sendable = sendableSteps(state)
-
-      if (sendable) {
-        this.socket.emit('update', sendable)
-      }
-    }, 250),
-
-    receiveData({ steps, version }) {
-      const { state, view, schema } = this.editor
-
-      if (getVersion(state) > version) {
-        return
-      }
-
-      const transaction = receiveTransaction(
-        state,
-        steps.map(item => Step.fromJSON(schema, item.step)),
-        steps.map(item => item.clientID),
-      )
-
-      view.dispatch(transaction)
-    },
-  },
-
-  mounted() {
-    this.socket = io('wss://tiptap-sockets-2.glitch.me')
-      .on('document', data => {
-        this.initEditor(data)
-      })
-      .on('update', ({ steps, version }) => {
-        this.receiveData({ steps, version })
-      })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index 1ff9f905..c4c3b796 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/examples/Components/Subnavigation/index.vue
@@ -51,12 +51,6 @@
     <router-link class="subnavigation__link" to="/collaboration">
       Collaboration
     </router-link>
-    <router-link class="subnavigation__link" to="/collaboration2">
-      Collaboration 2
-    </router-link>
-    <router-link class="subnavigation__link" to="/collaboration3">
-      Collaboration 3
-    </router-link>
   </div>
 </template>
 
diff --git a/examples/main.js b/examples/main.js
index cd124936..3102cc93 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -131,20 +131,6 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
     },
   },
-  {
-    path: '/collaboration2',
-    component: () => import('Components/Routes/Collaboration2'),
-    meta: {
-      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({