From f4fa5a8e704a2546f19b1188b77d2581c48c0865 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 5 Feb 2019 14:00:30 +0100
Subject: [PATCH] refactoring

---
 .../Routes/Collaboration2/index.vue           | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/examples/Components/Routes/Collaboration2/index.vue b/examples/Components/Routes/Collaboration2/index.vue
index c9b2bff9..574cf85b 100644
--- a/examples/Components/Routes/Collaboration2/index.vue
+++ b/examples/Components/Routes/Collaboration2/index.vue
@@ -48,8 +48,10 @@ export default {
     getSendableSteps: debounce(function (state) {
       const sendable = sendableSteps(state)
 
+      this.prevState = state
+
       if (sendable) {
-        this.socket.emit('message', sendable)
+        this.socket.emit('update', sendable)
 
         const transaction = receiveTransaction(
           this.editor.state,
@@ -82,20 +84,38 @@ export default {
 
   mounted() {
     this.socket = io('wss://tiptap-sockets-2.glitch.me')
-
-    this.socket
       .on('connect', () => {
         console.log('connected')
       })
       .on('disconnect', () => {
         console.log('disconnected')
       })
-      .on('message', data => {
-        if (data.doc) {
-          this.initEditor(data)
-        } else {
-          this.receiveData(data)
-        }
+      .on('document', data => {
+        this.initEditor(data)
+      })
+      .on('update', data => {
+        this.receiveData(data)
+      })
+      .on('versionMismatch', () => {
+        // 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)
       })
   },