From b23cdcba6b42de6234929c725b56e5c4d457eed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 3 Feb 2019 14:06:17 +0100
Subject: [PATCH 01/27] add basic collab implementation

---
 .../Components/Routes/Collaboration/Collab.js | 12 +++
 .../Components/Routes/Collaboration/index.vue | 88 +++++++++++++++++++
 examples/Components/Subnavigation/index.vue   |  3 +
 examples/main.js                              |  7 ++
 package.json                                  |  4 +-
 yarn.lock                                     |  7 ++
 6 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 examples/Components/Routes/Collaboration/Collab.js
 create mode 100644 examples/Components/Routes/Collaboration/index.vue

diff --git a/examples/Components/Routes/Collaboration/Collab.js b/examples/Components/Routes/Collaboration/Collab.js
new file mode 100644
index 000000000..7607d18a9
--- /dev/null
+++ b/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()]
+  }
+}
diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
new file mode 100644
index 000000000..bd89ace07
--- /dev/null
+++ b/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>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index bcc2e2461..c4c3b796f 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/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>
 
diff --git a/examples/main.js b/examples/main.js
index aea0bad97..3102cc931 100644
--- a/examples/main.js
+++ b/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({
diff --git a/package.json b/package.json
index 23fb1971a..15bdc6ca7 100644
--- a/package.json
+++ b/package.json
@@ -86,5 +86,7 @@
     "webpack-svgstore-plugin": "^4.1.0",
     "zlib": "^1.0.5"
   },
-  "dependencies": {}
+  "dependencies": {
+    "prosemirror-collab": "^1.1.1"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 073741b9b..a50601f21 100644
--- a/yarn.lock
+++ b/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"

From bf21ebd719c942a4a766360d343f0e787d8d36d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 3 Feb 2019 21:18:03 +0100
Subject: [PATCH 02/27] improve collab demo

---
 .../Components/Routes/Collaboration/Collab.js | 14 ++++-
 .../Components/Routes/Collaboration/index.vue | 52 +++++++++++++------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/examples/Components/Routes/Collaboration/Collab.js b/examples/Components/Routes/Collaboration/Collab.js
index 7607d18a9..21dc7255f 100644
--- a/examples/Components/Routes/Collaboration/Collab.js
+++ b/examples/Components/Routes/Collaboration/Collab.js
@@ -6,7 +6,19 @@ export default class CollabExtension extends Extension {
     return 'collab'
   }
 
+  get defaultOptions() {
+    return {
+      version: 0,
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+    }
+  }
+
   get plugins() {
-    return [collab()]
+    return [
+      collab({
+        version: this.options.version,
+        clientID: this.options.clientID,
+      }),
+    ]
   }
 }
diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index bd89ace07..0d7620ebe 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="editor">
-    <editor-content class="editor__content" :editor="editor" />
+    <editor-content class="editor__content" :editor="editor" v-if="editor" />
   </div>
 </template>
 
@@ -17,16 +17,29 @@ export default {
 
   data() {
     return {
+      editor: null,
       ws: null,
-
-      authority: {
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+      collabStartVersion: 0,
+      collabHistory: {
         steps: [],
-        stepClientIDs: [],
+        clientIDs: [],
       },
+    }
+  },
 
-      editor: new Editor({
-        content: 'Collaboration!',
-        extensions: [new Collab()],
+  methods: {
+    initEditor({ doc, version }) {
+      this.collabStartVersion = version + 1
+
+      this.editor = new Editor({
+        content: doc,
+        extensions: [
+          new Collab({
+            version: this.collabStartVersion,
+            clientID: this.clientID,
+          }),
+        ],
         onUpdate: ({ state }) => {
           const sendable = sendableSteps(state)
 
@@ -34,19 +47,17 @@ export default {
             this.ws.send(JSON.stringify(sendable))
           }
         },
-      }),
-    }
-  },
+      })
+    },
 
-  methods: {
     receiveData({ version, steps, clientID }) {
-      if (version !== this.authority.steps.length) {
+      if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
         return
       }
 
       steps.forEach(step => {
-        this.authority.steps.push(step)
-        this.authority.stepClientIDs.push(clientID)
+        this.collabHistory.steps.push(step)
+        this.collabHistory.clientIDs.push(clientID)
       })
 
       this.updateDoc()
@@ -66,9 +77,10 @@ export default {
     },
 
     stepsSince(version) {
+      const count = version - this.collabStartVersion
       return {
-        steps: this.authority.steps.slice(version),
-        clientIDs: this.authority.stepClientIDs.slice(version),
+        steps: this.collabHistory.steps.slice(count),
+        clientIDs: this.collabHistory.clientIDs.slice(count),
       }
     },
   },
@@ -77,7 +89,13 @@ export default {
     this.ws = new WebSocket('wss://tiptap-sockets.glitch.me')
 
     this.ws.onmessage = event => {
-      this.receiveData(JSON.parse(event.data))
+      const payload = JSON.parse(event.data)
+
+      if (payload.doc) {
+        this.initEditor(payload)
+      } else {
+        this.receiveData(payload)
+      }
     }
   },
 

From 9b0c35d34ccc9fdfa8106eda7cb9d1fc7dc3ec41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 5 Feb 2019 00:03:27 +0100
Subject: [PATCH 03/27] update eslint

---
 .eslintrc.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index b21e48fc2..9dd309888 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -56,5 +56,7 @@ module.exports = {
     'class-methods-use-this': 'off',
 
     'global-require': 'off',
+
+    'func-names': ['error', 'never'],
   }
 }

From aba26c7e74d12cb7041a31c3cb74e5f783b11745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 5 Feb 2019 02:20:49 +0100
Subject: [PATCH 04/27] started adding a better collab demo

---
 .../Routes/Collaboration2/Collab.js           |  24 +++
 .../Routes/Collaboration2/index.vue           | 150 ++++++++++++++++++
 examples/Components/Subnavigation/index.vue   |   3 +
 examples/main.js                              |   7 +
 4 files changed, 184 insertions(+)
 create mode 100644 examples/Components/Routes/Collaboration2/Collab.js
 create mode 100644 examples/Components/Routes/Collaboration2/index.vue

diff --git a/examples/Components/Routes/Collaboration2/Collab.js b/examples/Components/Routes/Collaboration2/Collab.js
new file mode 100644
index 000000000..21dc7255f
--- /dev/null
+++ b/examples/Components/Routes/Collaboration2/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,
+      }),
+    ]
+  }
+}
diff --git a/examples/Components/Routes/Collaboration2/index.vue b/examples/Components/Routes/Collaboration2/index.vue
new file mode 100644
index 000000000..1cedbe2f6
--- /dev/null
+++ b/examples/Components/Routes/Collaboration2/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="editor">
+    <editor-content class="editor__content" :editor="editor" v-if="editor" />
+  </div>
+</template>
+
+<script>
+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,
+      ws: null,
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+      collabStartVersion: 0,
+      collabHistory: {
+        steps: [],
+        clientIDs: [],
+      },
+    }
+  },
+
+  methods: {
+    initEditor({ doc, version }) {
+      this.collabStartVersion = version
+
+      this.editor = new Editor({
+        content: doc,
+        extensions: [
+          new Collab({
+            version: this.collabStartVersion,
+            clientID: this.clientID,
+          }),
+        ],
+        onUpdate: ({ state }) => {
+          this.getSendableSteps(state)
+        },
+      })
+    },
+
+    getSendableSteps: debounce(function (state) {
+      const sendable = sendableSteps(state)
+
+      if (sendable) {
+        this.ws.send(JSON.stringify(sendable))
+
+
+        console.log({ sendable })
+
+
+        const transaction = receiveTransaction(
+          this.editor.state,
+          sendable.steps,
+          this.repeat(sendable.clientID, sendable.steps.length),
+        )
+
+        this.editor.view.dispatch(transaction)
+      }
+    }, 250),
+
+    receiveData({ steps }) {
+      // if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
+      //   return
+      // }
+
+      // steps.forEach(step => {
+      //   this.collabHistory.steps.push(step)
+      //   this.collabHistory.clientIDs.push(clientID)
+      // })
+
+      // this.updateDoc()
+
+      // const { state, view, schema } = this.editor
+      // const version = getVersion(state)
+      // const data = this.stepsSince(version)
+      // const transaction = receiveTransaction(
+      //   state,
+      //   steps,
+      //   steps,
+      // )
+
+      // view.dispatch(transaction)
+
+      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
+    },
+
+    // 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) {
+      const count = version - this.collabStartVersion
+      return {
+        steps: this.collabHistory.steps.slice(count),
+        clientIDs: this.collabHistory.clientIDs.slice(count),
+      }
+    },
+  },
+
+  mounted() {
+    this.ws = new WebSocket('wss://tiptap-sockets-2.glitch.me')
+
+    this.ws.onmessage = event => {
+      const payload = JSON.parse(event.data)
+
+      if (payload.doc) {
+        this.initEditor(payload)
+      } else {
+        this.receiveData(payload)
+      }
+    }
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index c4c3b796f..e49ef25b3 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/examples/Components/Subnavigation/index.vue
@@ -51,6 +51,9 @@
     <router-link class="subnavigation__link" to="/collaboration">
       Collaboration
     </router-link>
+    <router-link class="subnavigation__link" to="/collaboration2">
+      Collaboration 2
+    </router-link>
   </div>
 </template>
 
diff --git a/examples/main.js b/examples/main.js
index 3102cc931..22ea43971 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -131,6 +131,13 @@ 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',
+    },
+  },
 ]
 
 const router = new VueRouter({

From bdcd5c967f3d0b614eaa92b05be07f35417234af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 5 Feb 2019 03:07:43 +0100
Subject: [PATCH 05/27] add socket.io to collab demo

---
 .../Routes/Collaboration2/index.vue           | 88 +++++--------------
 package.json                                  |  4 +-
 yarn.lock                                     | 58 ++++++++++++
 3 files changed, 83 insertions(+), 67 deletions(-)

diff --git a/examples/Components/Routes/Collaboration2/index.vue b/examples/Components/Routes/Collaboration2/index.vue
index 1cedbe2f6..c9b2bff96 100644
--- a/examples/Components/Routes/Collaboration2/index.vue
+++ b/examples/Components/Routes/Collaboration2/index.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import io from 'socket.io-client'
 import { debounce } from 'lodash-es'
 import { Editor, EditorContent } from 'tiptap'
 import { Step } from 'prosemirror-transform'
@@ -19,25 +20,22 @@ export default {
   data() {
     return {
       editor: null,
-      ws: null,
+      socket: null,
       clientID: Math.floor(Math.random() * 0xFFFFFFFF),
-      collabStartVersion: 0,
-      collabHistory: {
-        steps: [],
-        clientIDs: [],
-      },
     }
   },
 
   methods: {
     initEditor({ doc, version }) {
-      this.collabStartVersion = version
+      if (this.editor) {
+        this.editor.destroy()
+      }
 
       this.editor = new Editor({
         content: doc,
         extensions: [
           new Collab({
-            version: this.collabStartVersion,
+            version,
             clientID: this.clientID,
           }),
         ],
@@ -51,11 +49,7 @@ export default {
       const sendable = sendableSteps(state)
 
       if (sendable) {
-        this.ws.send(JSON.stringify(sendable))
-
-
-        console.log({ sendable })
-
+        this.socket.emit('message', sendable)
 
         const transaction = receiveTransaction(
           this.editor.state,
@@ -68,28 +62,6 @@ export default {
     }, 250),
 
     receiveData({ steps }) {
-      // if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
-      //   return
-      // }
-
-      // steps.forEach(step => {
-      //   this.collabHistory.steps.push(step)
-      //   this.collabHistory.clientIDs.push(clientID)
-      // })
-
-      // this.updateDoc()
-
-      // const { state, view, schema } = this.editor
-      // const version = getVersion(state)
-      // const data = this.stepsSince(version)
-      // const transaction = receiveTransaction(
-      //   state,
-      //   steps,
-      //   steps,
-      // )
-
-      // view.dispatch(transaction)
-
       const { state, view, schema } = this.editor
 
       const transaction = receiveTransaction(
@@ -106,41 +78,25 @@ export default {
       for (let i = 0; i < n; i++) result.push(val)
       return result
     },
-
-    // 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) {
-      const count = version - this.collabStartVersion
-      return {
-        steps: this.collabHistory.steps.slice(count),
-        clientIDs: this.collabHistory.clientIDs.slice(count),
-      }
-    },
   },
 
   mounted() {
-    this.ws = new WebSocket('wss://tiptap-sockets-2.glitch.me')
+    this.socket = io('wss://tiptap-sockets-2.glitch.me')
 
-    this.ws.onmessage = event => {
-      const payload = JSON.parse(event.data)
-
-      if (payload.doc) {
-        this.initEditor(payload)
-      } else {
-        this.receiveData(payload)
-      }
-    }
+    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)
+        }
+      })
   },
 
   beforeDestroy() {
diff --git a/package.json b/package.json
index 15bdc6ca7..1726dbc67 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,8 @@
     "zlib": "^1.0.5"
   },
   "dependencies": {
-    "prosemirror-collab": "^1.1.1"
+    "lodash-es": "^4.17.11",
+    "prosemirror-collab": "^1.1.1",
+    "socket.io-client": "^2.2.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a50601f21..1ce1857d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4226,6 +4226,23 @@ engine.io-client@~3.2.0:
     xmlhttprequest-ssl "~1.5.4"
     yeast "0.1.2"
 
+engine.io-client@~3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.3.2.tgz#04e068798d75beda14375a264bb3d742d7bc33aa"
+  integrity sha512-y0CPINnhMvPuwtqXfsGuWE8BB66+B6wTtCofQDRecMQPYX3MYUZXFNKDhdrSe3EVjgOu4V3rxdeqN/Tr91IgbQ==
+  dependencies:
+    component-emitter "1.2.1"
+    component-inherit "0.0.3"
+    debug "~3.1.0"
+    engine.io-parser "~2.1.1"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    ws "~6.1.0"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
+
 engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.3.tgz#757ab970fbf2dfb32c7b74b033216d5739ef79a6"
@@ -7432,6 +7449,11 @@ lock-verify@^2.0.2:
     npm-package-arg "^5.1.2 || 6"
     semver "^5.4.1"
 
+lodash-es@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
+  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
+
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -10939,6 +10961,26 @@ socket.io-client@2.1.1, socket.io-client@^2.0.4:
     socket.io-parser "~3.2.0"
     to-array "0.1.4"
 
+socket.io-client@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.2.0.tgz#84e73ee3c43d5020ccc1a258faeeb9aec2723af7"
+  integrity sha512-56ZrkTDbdTLmBIyfFYesgOxsjcLnwAKoN4CiPyTVkMQj3zTUh0QAx3GbvIvLpFEOvQWu92yyWICxB0u7wkVbYA==
+  dependencies:
+    backo2 "1.0.2"
+    base64-arraybuffer "0.1.5"
+    component-bind "1.0.0"
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    engine.io-client "~3.3.1"
+    has-binary2 "~1.0.2"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    object-component "0.0.3"
+    parseqs "0.0.5"
+    parseuri "0.0.5"
+    socket.io-parser "~3.3.0"
+    to-array "0.1.4"
+
 socket.io-parser@~3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.2.0.tgz#e7c6228b6aa1f814e6148aea325b51aa9499e077"
@@ -10948,6 +10990,15 @@ socket.io-parser@~3.2.0:
     debug "~3.1.0"
     isarray "2.0.1"
 
+socket.io-parser@~3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.0.tgz#2b52a96a509fdf31440ba40fed6094c7d4f1262f"
+  integrity sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==
+  dependencies:
+    component-emitter "1.2.1"
+    debug "~3.1.0"
+    isarray "2.0.1"
+
 socket.io@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-2.1.1.tgz#a069c5feabee3e6b214a75b40ce0652e1cfb9980"
@@ -12432,6 +12483,13 @@ ws@~3.3.1:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
+ws@~6.1.0:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.3.tgz#d2d2e5f0e3c700ef2de89080ebc0ac6e1bf3a72d"
+  integrity sha512-tbSxiT+qJI223AP4iLfQbkbxkwdFcneYinM2+x46Gx2wgvbaOMO36czfdfVUBRTHvzAMRhDd98sA5d/BuWbQdg==
+  dependencies:
+    async-limiter "~1.0.0"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"

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 06/27] 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 c9b2bff96..574cf85b8 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)
       })
   },
 

From 6a0aaf15e69ab91ff9c4da37fcae3d697270847d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 6 Feb 2019 00:03:23 +0100
Subject: [PATCH 07/27] add something broken again

---
 .../Routes/Collaboration2/index.vue           | 95 +++++++++++++++----
 packages/tiptap/src/Editor.js                 |  5 +
 2 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/examples/Components/Routes/Collaboration2/index.vue b/examples/Components/Routes/Collaboration2/index.vue
index 574cf85b8..85c90ae38 100644
--- a/examples/Components/Routes/Collaboration2/index.vue
+++ b/examples/Components/Routes/Collaboration2/index.vue
@@ -19,8 +19,10 @@ export default {
 
   data() {
     return {
+      history: [],
       editor: null,
       socket: null,
+      newState: null,
       clientID: Math.floor(Math.random() * 0xFFFFFFFF),
     }
   },
@@ -39,6 +41,12 @@ export default {
             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)
         },
@@ -48,15 +56,23 @@ export default {
     getSendableSteps: debounce(function (state) {
       const sendable = sendableSteps(state)
 
-      this.prevState = 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(
-          this.editor.state,
-          sendable.steps,
-          this.repeat(sendable.clientID, sendable.steps.length),
+          state,
+          steps,
+          clientIDs,
         )
 
         this.editor.view.dispatch(transaction)
@@ -96,27 +112,68 @@ export default {
       .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('versionInSync', version => {
+        console.log('version in sync', version)
+        // TODO remove steps older than version
       })
-      .on('versionSteps', data => {
-        console.log('versionSteps', data)
+      .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
 
-        const transaction = receiveTransaction(
-          state,
+        view.updateState(history.state)
+
+        view.dispatch(receiveTransaction(
+          history.state,
           data.map(item => Step.fromJSON(schema, item.step)),
           data.map(item => item.clientID),
-        )
+        ))
 
-        view.dispatch(transaction)
+        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() {
diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js
index 20f89d5e3..dba9016ed 100644
--- a/packages/tiptap/src/Editor.js
+++ b/packages/tiptap/src/Editor.js
@@ -32,6 +32,7 @@ export default class Editor {
       onFocus: () => {},
       onBlur: () => {},
       onPaste: () => {},
+      onTransaction: () => true,
     }
 
     this.init(options)
@@ -265,6 +266,10 @@ export default class Editor {
   }
 
   dispatchTransaction(transaction) {
+    if (!this.options.onTransaction(transaction)) {
+      return
+    }
+
     this.state = this.state.apply(transaction)
     this.view.updateState(this.state)
     this.setActiveNodesAndMarks()

From ac3b95716e889b6cc2d6caa63b4727aa016f6ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 6 Feb 2019 10:33:16 +0100
Subject: [PATCH 08/27] add new collab test

---
 .../Routes/Collaboration3/Collab.js           |  24 +++
 .../Routes/Collaboration3/index.vue           | 176 ++++++++++++++++++
 examples/Components/Subnavigation/index.vue   |   3 +
 examples/main.js                              |   7 +
 4 files changed, 210 insertions(+)
 create mode 100644 examples/Components/Routes/Collaboration3/Collab.js
 create mode 100644 examples/Components/Routes/Collaboration3/index.vue

diff --git a/examples/Components/Routes/Collaboration3/Collab.js b/examples/Components/Routes/Collaboration3/Collab.js
new file mode 100644
index 000000000..21dc7255f
--- /dev/null
+++ b/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,
+      }),
+    ]
+  }
+}
diff --git a/examples/Components/Routes/Collaboration3/index.vue b/examples/Components/Routes/Collaboration3/index.vue
new file mode 100644
index 000000000..cac658d83
--- /dev/null
+++ b/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>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index e49ef25b3..1ff9f9057 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/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>
 
diff --git a/examples/main.js b/examples/main.js
index 22ea43971..cd1249367 100644
--- a/examples/main.js
+++ b/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({

From 5b530d5d0c6dbde70271a32373c27fb6bd596d4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 3 May 2019 14:04:14 +0200
Subject: [PATCH 09/27] add oldstate to update event

---
 packages/tiptap/src/Editor.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js
index 741adc649..12fd34bbc 100644
--- a/packages/tiptap/src/Editor.js
+++ b/packages/tiptap/src/Editor.js
@@ -288,6 +288,8 @@ export default class Editor {
       return
     }
 
+    const oldState = this.state
+
     this.state = this.state.apply(transaction)
     this.view.updateState(this.state)
     this.setActiveNodesAndMarks()
@@ -296,14 +298,15 @@ export default class Editor {
       return
     }
 
-    this.emitUpdate(transaction)
+    this.emitUpdate(transaction, oldState)
   }
 
-  emitUpdate(transaction) {
+  emitUpdate(transaction, oldState) {
     this.options.onUpdate({
       getHTML: this.getHTML.bind(this),
       getJSON: this.getJSON.bind(this),
       state: this.state,
+      oldState,
       transaction,
     })
   }

From 543387018388e56a7482e552aa6eb3fb7f4afae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 3 May 2019 14:04:37 +0200
Subject: [PATCH 10/27] add something broken

---
 .../Routes/Collaboration3/index.vue           | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/examples/Components/Routes/Collaboration3/index.vue b/examples/Components/Routes/Collaboration3/index.vue
index cac658d83..471909ec2 100644
--- a/examples/Components/Routes/Collaboration3/index.vue
+++ b/examples/Components/Routes/Collaboration3/index.vue
@@ -47,15 +47,19 @@ export default {
         //   this.editor.view.updateState(this.state.edit)
         //   return false
         // },
-        onUpdate: ({ state }) => {
-          this.getSendableSteps(state)
+        onUpdate: ({ state, oldState }) => {
+          this.getSendableSteps(state, oldState)
         },
       })
     },
 
-    getSendableSteps: debounce(function (state) {
+    getSendableSteps: debounce(function (state, oldState) {
       const sendable = sendableSteps(state)
 
+      console.log('update editor', { sendable })
+
+      // console.log({ state, oldState })
+
       if (sendable) {
         this.socket.emit('update', sendable)
 
@@ -63,7 +67,7 @@ export default {
         const clientIDs = this.repeat(sendable.clientID, steps.length)
 
         this.history.push({
-          state,
+          state: oldState,
           version: getVersion(state),
           steps,
           clientIDs,
@@ -116,7 +120,7 @@ export default {
         console.log('version in sync', version)
         // TODO remove steps older than version
       })
-      .on('versionMismatch', ({ version, data }) => {
+      .on('versionMismatch', ({ version, data, doc }) => {
         console.log('version mismatch', version)
         // TODO: go back to `version`, apply `steps`, apply unmerged `steps`
 
@@ -124,20 +128,47 @@ export default {
 
         const { state, view, schema } = this.editor
 
-        view.updateState(history.state)
+        // view.updateState(history.state)
 
-        view.dispatch(receiveTransaction(
+        console.log('other steps', { data })
+        // console.log(getVersion(view.state))
+
+        const newstate = history.state.apply(receiveTransaction(
           history.state,
           data.map(item => Step.fromJSON(schema, item.step)),
           data.map(item => item.clientID),
         ))
 
+        view.updateState(newstate)
+
+        // const newstate2 = newstate.apply(receiveTransaction(
+        //   newstate,
+        //   history.steps,
+        //   history.clientIDs,
+        // ))
+
         view.dispatch(receiveTransaction(
-          history.state,
+          state,
           history.steps,
           history.clientIDs,
         ))
 
+        // view.updateState(newstate2)
+
+        // view.dispatch(receiveTransaction(
+        //   view.state,
+        //   data.map(item => Step.fromJSON(schema, item.step)),
+        //   data.map(item => item.clientID),
+        // ))
+
+        // console.log('own', { history })
+
+        // view.dispatch(receiveTransaction(
+        //   history.state,
+        //   history.steps,
+        //   history.clientIDs,
+        // ))
+
         // const transaction = receiveTransaction(
         //   state,
         //   steps,

From ee12e0577daa663dce752e80ff427655f087ab29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 3 May 2019 16:05:30 +0200
Subject: [PATCH 11/27] add something broken

---
 .../Routes/Collaboration3/index.vue           | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/examples/Components/Routes/Collaboration3/index.vue b/examples/Components/Routes/Collaboration3/index.vue
index 471909ec2..7267a472a 100644
--- a/examples/Components/Routes/Collaboration3/index.vue
+++ b/examples/Components/Routes/Collaboration3/index.vue
@@ -9,7 +9,9 @@ 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 {
+ receiveTransaction, sendableSteps, getVersion, rebaseSteps,
+} from 'prosemirror-collab'
 import Collab from './Collab'
 
 export default {
@@ -71,6 +73,7 @@ export default {
           version: getVersion(state),
           steps,
           clientIDs,
+          sendable,
         })
 
         const transaction = receiveTransaction(
@@ -125,13 +128,9 @@ export default {
         // 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)
-
-        console.log('other steps', { data })
-        // console.log(getVersion(view.state))
+        // console.log('other steps', { data })
 
         const newstate = history.state.apply(receiveTransaction(
           history.state,
@@ -139,19 +138,30 @@ export default {
           data.map(item => item.clientID),
         ))
 
+        // this.editor.state =
         view.updateState(newstate)
 
-        // const newstate2 = newstate.apply(receiveTransaction(
-        //   newstate,
-        //   history.steps,
-        //   history.clientIDs,
-        // ))
+        if (history.steps.length) {
+          view.dispatch(receiveTransaction(
+            state,
+            history.steps,
+            history.clientIDs,
+          ))
+
+          // const sendable = sendableSteps(state)
+          // console.log({ sendable })
+
+          // this.socket.emit('update', {
+          //   version: getVersion(state),
+          //   steps: history.steps,
+          // })
+        }
+
+
+        // const currentVersion = getVersion(view.state)
+        // const historySteps = history.steps
+        // console.log({ currentVersion, historySteps })
 
-        view.dispatch(receiveTransaction(
-          state,
-          history.steps,
-          history.clientIDs,
-        ))
 
         // view.updateState(newstate2)
 

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

---
 .../Routes/Collaboration3/index.vue           | 156 ++----------------
 packages/tiptap/src/Editor.js                 |   5 -
 2 files changed, 13 insertions(+), 148 deletions(-)

diff --git a/examples/Components/Routes/Collaboration3/index.vue b/examples/Components/Routes/Collaboration3/index.vue
index 7267a472a..6301f7566 100644
--- a/examples/Components/Routes/Collaboration3/index.vue
+++ b/examples/Components/Routes/Collaboration3/index.vue
@@ -9,9 +9,7 @@ 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, rebaseSteps,
-} from 'prosemirror-collab'
+import { receiveTransaction, sendableSteps, getVersion } from 'prosemirror-collab'
 import Collab from './Collab'
 
 export default {
@@ -21,10 +19,8 @@ export default {
 
   data() {
     return {
-      history: [],
       editor: null,
       socket: null,
-      newState: null,
       clientID: Math.floor(Math.random() * 0xFFFFFFFF),
     }
   },
@@ -43,171 +39,45 @@ export default {
             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, oldState }) => {
-          this.getSendableSteps(state, oldState)
+        onUpdate: ({ state }) => {
+          this.getSendableSteps(state)
         },
       })
     },
 
-    getSendableSteps: debounce(function (state, oldState) {
+    getSendableSteps: debounce(function (state) {
       const sendable = sendableSteps(state)
 
-      console.log('update editor', { sendable })
-
-      // console.log({ state, oldState })
-
       if (sendable) {
         this.socket.emit('update', sendable)
-
-        const { steps } = sendable
-        const clientIDs = this.repeat(sendable.clientID, steps.length)
-
-        this.history.push({
-          state: oldState,
-          version: getVersion(state),
-          steps,
-          clientIDs,
-          sendable,
-        })
-
-        const transaction = receiveTransaction(
-          state,
-          steps,
-          clientIDs,
-        )
-
-        this.editor.view.dispatch(transaction)
       }
     }, 250),
 
-    receiveData({ steps }) {
+    receiveData({ steps, version }) {
       const { state, view, schema } = this.editor
 
+      if (getVersion(state) > version) {
+        return
+      }
+
       const transaction = receiveTransaction(
         state,
-        steps.map(step => Step.fromJSON(schema, step)),
-        steps.map(step => step.clientID),
+        steps.map(item => Step.fromJSON(schema, item.step)),
+        steps.map(item => item.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('update', ({ steps, version }) => {
+        this.receiveData({ steps, version })
       })
-      .on('versionInSync', version => {
-        console.log('version in sync', version)
-        // TODO remove steps older than version
-      })
-      .on('versionMismatch', ({ version, data, doc }) => {
-        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
-
-        // console.log('other steps', { data })
-
-        const newstate = history.state.apply(receiveTransaction(
-          history.state,
-          data.map(item => Step.fromJSON(schema, item.step)),
-          data.map(item => item.clientID),
-        ))
-
-        // this.editor.state =
-        view.updateState(newstate)
-
-        if (history.steps.length) {
-          view.dispatch(receiveTransaction(
-            state,
-            history.steps,
-            history.clientIDs,
-          ))
-
-          // const sendable = sendableSteps(state)
-          // console.log({ sendable })
-
-          // this.socket.emit('update', {
-          //   version: getVersion(state),
-          //   steps: history.steps,
-          // })
-        }
-
-
-        // const currentVersion = getVersion(view.state)
-        // const historySteps = history.steps
-        // console.log({ currentVersion, historySteps })
-
-
-        // view.updateState(newstate2)
-
-        // view.dispatch(receiveTransaction(
-        //   view.state,
-        //   data.map(item => Step.fromJSON(schema, item.step)),
-        //   data.map(item => item.clientID),
-        // ))
-
-        // console.log('own', { history })
-
-        // 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() {
diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js
index 12fd34bbc..6228524ff 100644
--- a/packages/tiptap/src/Editor.js
+++ b/packages/tiptap/src/Editor.js
@@ -39,7 +39,6 @@ export default class Editor {
       onBlur: () => {},
       onPaste: () => {},
       onDrop: () => {},
-      onTransaction: () => true,
     }
 
     this.init(options)
@@ -284,10 +283,6 @@ export default class Editor {
   }
 
   dispatchTransaction(transaction) {
-    if (!this.options.onTransaction(transaction)) {
-      return
-    }
-
     const oldState = this.state
 
     this.state = this.state.apply(transaction)

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 13/27] 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 0d7620ebe..c3d84fa01 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 21dc7255f..000000000
--- 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 85c90ae38..000000000
--- 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 21dc7255f..000000000
--- 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 6301f7566..000000000
--- 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 1ff9f9057..c4c3b796f 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 cd1249367..3102cc931 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({

From fd404f5c1fd350331160669161ff6010d39865d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 3 May 2019 21:50:17 +0200
Subject: [PATCH 14/27] change socket url

---
 examples/Components/Routes/Collaboration/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index c3d84fa01..c65c19196 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -65,8 +65,8 @@ export default {
   },
 
   mounted() {
-    this.socket = io('wss://tiptap-sockets-2.glitch.me')
-      .on('document', data => this.initEditor(data))
+    this.socket = io('wss://tiptap-sockets.glitch.me')
+      .on('init', data => this.initEditor(data))
       .on('update', data => this.receiveData(data))
   },
 

From 2475bf6123f97d57269756d27ea8935ed69cb04f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 3 May 2019 22:14:18 +0200
Subject: [PATCH 15/27] add loading state

---
 examples/Components/Routes/Collaboration/index.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index c65c19196..6ac6073d2 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="editor">
-    <editor-content class="editor__content" :editor="editor" v-if="editor" />
+    <editor-content class="editor__content" :editor="editor" v-if="editor && !loading" />
+    <em v-else>
+      Connecting to socket server …
+    </em>
   </div>
 </template>
 
@@ -19,6 +22,7 @@ export default {
 
   data() {
     return {
+      loading: true,
       editor: null,
       socket: null,
     }
@@ -26,6 +30,8 @@ export default {
 
   methods: {
     initEditor({ doc, version }) {
+      this.loading = false
+
       if (this.editor) {
         this.editor.destroy()
       }

From cd46b163d059260a5643bdd253bb1a3d82fdc020 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 00:05:39 +0200
Subject: [PATCH 16/27] add emitter, move some collab logic to extension

---
 babel.config.js                               |  1 +
 .../Components/Routes/Collaboration/Collab.js | 21 ++++++-
 .../Components/Routes/Collaboration/index.vue | 32 +++++-----
 package.json                                  |  1 +
 packages/tiptap/src/Editor.js                 | 42 ++++++++-----
 packages/tiptap/src/Utils/Emitter.js          | 59 +++++++++++++++++++
 packages/tiptap/src/Utils/Extension.js        |  8 +++
 packages/tiptap/src/Utils/ExtensionManager.js |  6 +-
 packages/tiptap/src/Utils/camelCase.js        |  3 +
 packages/tiptap/src/Utils/index.js            |  2 +
 yarn.lock                                     | 51 ++++++++++------
 11 files changed, 173 insertions(+), 53 deletions(-)
 create mode 100644 packages/tiptap/src/Utils/Emitter.js
 create mode 100644 packages/tiptap/src/Utils/camelCase.js

diff --git a/babel.config.js b/babel.config.js
index 9f8a0a192..ebc1a2539 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -4,5 +4,6 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-class-properties',
   ],
 }
diff --git a/examples/Components/Routes/Collaboration/Collab.js b/examples/Components/Routes/Collaboration/Collab.js
index 21dc7255f..a59328b25 100644
--- a/examples/Components/Routes/Collaboration/Collab.js
+++ b/examples/Components/Routes/Collaboration/Collab.js
@@ -1,15 +1,25 @@
 import { Extension } from 'tiptap'
-import { collab } from 'prosemirror-collab'
+import { collab, sendableSteps } from 'prosemirror-collab'
+import { debounce } from 'lodash-es'
 
 export default class CollabExtension extends Extension {
+
   get name() {
     return 'collab'
   }
 
+  init() {
+    this.editor.on('update', ({ state }) => {
+      this.getSendableSteps(state)
+    })
+  }
+
   get defaultOptions() {
     return {
       version: 0,
       clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+      debounce: 250,
+      onSend: () => {},
     }
   }
 
@@ -21,4 +31,13 @@ export default class CollabExtension extends Extension {
       }),
     ]
   }
+
+  getSendableSteps = debounce(state => {
+    const sendable = sendableSteps(state)
+
+    if (sendable) {
+      this.options.onSend(sendable)
+    }
+  }, this.options.debounce)
+
 }
diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 6ac6073d2..f7adc7cb4 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -9,10 +9,9 @@
 
 <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 { receiveTransaction, getVersion } from 'prosemirror-collab'
 import Collab from './Collab'
 
 export default {
@@ -29,7 +28,7 @@ export default {
   },
 
   methods: {
-    initEditor({ doc, version }) {
+    onInit({ doc, version }) {
       this.loading = false
 
       if (this.editor) {
@@ -39,23 +38,20 @@ export default {
       this.editor = new Editor({
         content: doc,
         extensions: [
-          new Collab({ version }),
+          new Collab({
+            version,
+            debounce: 250,
+            onSend: sendable => {
+              this.socket.emit('update', sendable)
+            },
+          }),
         ],
-        onUpdate: ({ state }) => {
-          this.getSendableSteps(state)
-        },
       })
+
+      // console.log(this.editor.extensions.options.collab.version)
     },
 
-    getSendableSteps: debounce(function (state) {
-      const sendable = sendableSteps(state)
-
-      if (sendable) {
-        this.socket.emit('update', sendable)
-      }
-    }, 250),
-
-    receiveData({ steps, version }) {
+    onUpdate({ steps, version }) {
       const { state, view, schema } = this.editor
 
       if (getVersion(state) > version) {
@@ -72,8 +68,8 @@ export default {
 
   mounted() {
     this.socket = io('wss://tiptap-sockets.glitch.me')
-      .on('init', data => this.initEditor(data))
-      .on('update', data => this.receiveData(data))
+      .on('init', data => this.onInit(data))
+      .on('update', data => this.onUpdate(data))
   },
 
   beforeDestroy() {
diff --git a/package.json b/package.json
index 67021d76b..027d3bbf4 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/node": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/polyfill": "^7.4.4",
diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js
index 6228524ff..d9997cb95 100644
--- a/packages/tiptap/src/Editor.js
+++ b/packages/tiptap/src/Editor.js
@@ -12,12 +12,16 @@ import { keymap } from 'prosemirror-keymap'
 import { baseKeymap } from 'prosemirror-commands'
 import { inputRules, undoInputRule } from 'prosemirror-inputrules'
 import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils'
-import { ExtensionManager, ComponentView } from './Utils'
+import {
+ camelCase, Emitter, ExtensionManager, ComponentView,
+} from './Utils'
 import { Doc, Paragraph, Text } from './Nodes'
 
-export default class Editor {
+export default class Editor extends Emitter {
 
   constructor(options = {}) {
+    super()
+
     this.defaultOptions = {
       editorProps: {},
       editable: true,
@@ -41,6 +45,15 @@ export default class Editor {
       onDrop: () => {},
     }
 
+    this.events = [
+      'init',
+      'update',
+      'focus',
+      'blur',
+      'paste',
+      'drop',
+    ]
+
     this.init(options)
   }
 
@@ -69,7 +82,11 @@ export default class Editor {
       }, 10)
     }
 
-    this.options.onInit({
+    this.events.forEach(name => {
+      this.on(name, this.options[camelCase(`on ${name}`)])
+    })
+
+    this.emit('init', {
       view: this.view,
       state: this.state,
     })
@@ -105,7 +122,7 @@ export default class Editor {
     return new ExtensionManager([
       ...this.builtInExtensions,
       ...this.options.extensions,
-    ])
+    ], this)
   }
 
   createPlugins() {
@@ -217,20 +234,20 @@ export default class Editor {
   createView() {
     const view = new EditorView(this.element, {
       state: this.state,
-      handlePaste: this.options.onPaste,
-      handleDrop: this.options.onDrop,
+      handlePaste: (...args) => { this.emit('paste', ...args) },
+      handleDrop: (...args) => { this.emit('drop', ...args) },
       dispatchTransaction: this.dispatchTransaction.bind(this),
     })
 
     view.dom.style.whiteSpace = 'pre-wrap'
 
-    view.dom.addEventListener('focus', event => this.options.onFocus({
+    view.dom.addEventListener('focus', event => this.emit('focus', {
       event,
       state: this.state,
       view: this.view,
     }))
 
-    view.dom.addEventListener('blur', event => this.options.onBlur({
+    view.dom.addEventListener('blur', event => this.emit('blur', {
       event,
       state: this.state,
       view: this.view,
@@ -283,8 +300,6 @@ export default class Editor {
   }
 
   dispatchTransaction(transaction) {
-    const oldState = this.state
-
     this.state = this.state.apply(transaction)
     this.view.updateState(this.state)
     this.setActiveNodesAndMarks()
@@ -293,15 +308,14 @@ export default class Editor {
       return
     }
 
-    this.emitUpdate(transaction, oldState)
+    this.emitUpdate(transaction)
   }
 
-  emitUpdate(transaction, oldState) {
-    this.options.onUpdate({
+  emitUpdate(transaction) {
+    this.emit('update', {
       getHTML: this.getHTML.bind(this),
       getJSON: this.getJSON.bind(this),
       state: this.state,
-      oldState,
       transaction,
     })
   }
diff --git a/packages/tiptap/src/Utils/Emitter.js b/packages/tiptap/src/Utils/Emitter.js
new file mode 100644
index 000000000..2ce3bb520
--- /dev/null
+++ b/packages/tiptap/src/Utils/Emitter.js
@@ -0,0 +1,59 @@
+export default class Emitter {
+  // Add an event listener for given event
+  on(event, fn) {
+    this._callbacks = this._callbacks || {}
+    // Create namespace for this event
+    if (!this._callbacks[event]) {
+      this._callbacks[event] = []
+    }
+    this._callbacks[event].push(fn)
+    return this
+  }
+
+
+  emit(event, ...args) {
+    this._callbacks = this._callbacks || {}
+    const callbacks = this._callbacks[event]
+
+    if (callbacks) {
+      for (const callback of callbacks) {
+        callback.apply(this, args)
+      }
+    }
+
+    return this
+  }
+
+  // Remove event listener for given event. If fn is not provided, all event
+  // listeners for that event will be removed. If neither is provided, all
+  // event listeners will be removed.
+  off(event, fn) {
+    if (!this._callbacks || (arguments.length === 0)) {
+      this._callbacks = {}
+      return this
+    }
+
+    // specific event
+    const callbacks = this._callbacks[event]
+    if (!callbacks) {
+      return this
+    }
+
+    // remove all handlers
+    if (arguments.length === 1) {
+      delete this._callbacks[event]
+      return this
+    }
+
+    // remove specific handler
+    for (let i = 0; i < callbacks.length; i++) {
+      const callback = callbacks[i]
+      if (callback === fn) {
+        callbacks.splice(i, 1)
+        break
+      }
+    }
+
+    return this
+  }
+}
diff --git a/packages/tiptap/src/Utils/Extension.js b/packages/tiptap/src/Utils/Extension.js
index d6579eef0..b28d281ac 100644
--- a/packages/tiptap/src/Utils/Extension.js
+++ b/packages/tiptap/src/Utils/Extension.js
@@ -7,6 +7,14 @@ export default class Extension {
     }
   }
 
+  init() {
+    return null
+  }
+
+  bindEditor(editor = null) {
+    this.editor = editor
+  }
+
   get name() {
     return null
   }
diff --git a/packages/tiptap/src/Utils/ExtensionManager.js b/packages/tiptap/src/Utils/ExtensionManager.js
index 20da9068b..1d6a74f0a 100644
--- a/packages/tiptap/src/Utils/ExtensionManager.js
+++ b/packages/tiptap/src/Utils/ExtensionManager.js
@@ -2,7 +2,11 @@ import { keymap } from 'prosemirror-keymap'
 
 export default class ExtensionManager {
 
-  constructor(extensions = []) {
+  constructor(extensions = [], editor) {
+    extensions.forEach(extension => {
+      extension.bindEditor(editor)
+      extension.init()
+    })
     this.extensions = extensions
   }
 
diff --git a/packages/tiptap/src/Utils/camelCase.js b/packages/tiptap/src/Utils/camelCase.js
new file mode 100644
index 000000000..c99895b0f
--- /dev/null
+++ b/packages/tiptap/src/Utils/camelCase.js
@@ -0,0 +1,3 @@
+export default function (str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (index == 0 ? word.toLowerCase() : word.toUpperCase())).replace(/\s+/g, '')
+}
diff --git a/packages/tiptap/src/Utils/index.js b/packages/tiptap/src/Utils/index.js
index baec08cb4..75b1c3ab8 100644
--- a/packages/tiptap/src/Utils/index.js
+++ b/packages/tiptap/src/Utils/index.js
@@ -1,4 +1,6 @@
+export { default as camelCase } from './camelCase'
 export { default as ComponentView } from './ComponentView'
+export { default as Emitter } from './Emitter'
 export { default as Extension } from './Extension'
 export { default as ExtensionManager } from './ExtensionManager'
 export { default as Mark } from './Mark'
diff --git a/yarn.lock b/yarn.lock
index f4b29ad0f..62eca021d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -64,6 +64,18 @@
     "@babel/traverse" "^7.4.4"
     "@babel/types" "^7.4.4"
 
+"@babel/helper-create-class-features-plugin@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.4.tgz#fc3d690af6554cc9efc607364a82d48f58736dba"
+  integrity sha512-UbBHIa2qeAGgyiNR9RszVF7bUHEdgS4JAUNT8SiqrAN6YJVxlOxeLr5pBzb5kan302dejJ9nla4RyKcR1XT6XA==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.4.4"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+
 "@babel/helper-define-map@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz#6969d1f570b46bdc900d1eba8e5d59c48ba2c12a"
@@ -238,6 +250,14 @@
     "@babel/helper-remap-async-to-generator" "^7.1.0"
     "@babel/plugin-syntax-async-generators" "^7.2.0"
 
+"@babel/plugin-proposal-class-properties@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.4.tgz#93a6486eed86d53452ab9bab35e368e9461198ce"
+  integrity sha512-WjKTI8g8d5w1Bc9zgwSz2nfrsNQsXcCf9J9cdCvrJV6RF56yztwm4TmJC0MgJ9tvwO9gUA/mcYe89bLdGfiXFg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.4.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -3032,11 +3052,6 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-charset@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/charset/-/charset-1.0.1.tgz#8d59546c355be61049a8fa9164747793319852bd"
-  integrity sha512-6dVyOOYjpfFcL1Y4qChrAoQLRHvj2ziyhcm0QJlhOcAhykL/k1kTUPbeo+87MNRTRdk2OIIsIXbuF3x2wi5EXg==
-
 chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.5.tgz#0ae8434d962281a5f56c72869e79cb6d9d86ad4d"
@@ -4399,16 +4414,14 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 ecstatic@^3.0.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-4.1.2.tgz#3afbe29849b32bc2a1f8a90f67e01dc048c7ad40"
-  integrity sha512-lnrAOpU2f7Ra8dm1pW0D1ucyUxQIEk8RjFrvROg1YqCV0ueVu9hzgiSEbSyROqXDDiHREdqC4w3AwOTb23P4UQ==
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-3.3.2.tgz#6d1dd49814d00594682c652adb66076a69d46c48"
+  integrity sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==
   dependencies:
-    charset "^1.0.1"
     he "^1.1.1"
-    mime "^2.4.1"
+    mime "^1.6.0"
     minimist "^1.1.0"
-    on-finished "^2.3.0"
-    url-join "^4.0.0"
+    url-join "^2.0.5"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -7893,12 +7906,12 @@ mime@1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
-mime@^1.4.1:
+mime@^1.4.1, mime@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.3.1, mime@^2.4.1:
+mime@^2.3.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.2.tgz#ce5229a5e99ffc313abac806b482c10e7ba6ac78"
   integrity sha512-zJBfZDkwRu+j3Pdd2aHsR5GfH2jIWhmL1ZzBoc+X+3JEti2hbArWcyJ+1laC1D2/U/W1a/+Cegj0/OnEU2ybjg==
@@ -8489,7 +8502,7 @@ octokit-pagination-methods@^1.1.0:
   resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4"
   integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ==
 
-on-finished@^2.3.0, on-finished@~2.3.0:
+on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
   integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
@@ -12008,10 +12021,10 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-url-join@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"
-  integrity sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=
+url-join@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+  integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=
 
 url-parse-lax@^1.0.0:
   version "1.0.0"

From 55e5a4a3ae35f9e1d509b32d5193ebe183b7a3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 00:25:14 +0200
Subject: [PATCH 17/27] move collab extension

---
 .../Components/Routes/Collaboration/Collab.js | 43 -------------
 .../Components/Routes/Collaboration/index.vue | 28 ++-------
 package.json                                  |  2 -
 packages/tiptap-extensions/package.json       |  3 +
 .../src/extensions/Collaboration.js           | 62 +++++++++++++++++++
 packages/tiptap-extensions/src/index.js       |  1 +
 yarn.lock                                     |  2 +-
 7 files changed, 72 insertions(+), 69 deletions(-)
 delete mode 100644 examples/Components/Routes/Collaboration/Collab.js
 create mode 100644 packages/tiptap-extensions/src/extensions/Collaboration.js

diff --git a/examples/Components/Routes/Collaboration/Collab.js b/examples/Components/Routes/Collaboration/Collab.js
deleted file mode 100644
index a59328b25..000000000
--- a/examples/Components/Routes/Collaboration/Collab.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Extension } from 'tiptap'
-import { collab, sendableSteps } from 'prosemirror-collab'
-import { debounce } from 'lodash-es'
-
-export default class CollabExtension extends Extension {
-
-  get name() {
-    return 'collab'
-  }
-
-  init() {
-    this.editor.on('update', ({ state }) => {
-      this.getSendableSteps(state)
-    })
-  }
-
-  get defaultOptions() {
-    return {
-      version: 0,
-      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
-      debounce: 250,
-      onSend: () => {},
-    }
-  }
-
-  get plugins() {
-    return [
-      collab({
-        version: this.options.version,
-        clientID: this.options.clientID,
-      }),
-    ]
-  }
-
-  getSendableSteps = debounce(state => {
-    const sendable = sendableSteps(state)
-
-    if (sendable) {
-      this.options.onSend(sendable)
-    }
-  }, this.options.debounce)
-
-}
diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index f7adc7cb4..293541e54 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -10,9 +10,7 @@
 <script>
 import io from 'socket.io-client'
 import { Editor, EditorContent } from 'tiptap'
-import { Step } from 'prosemirror-transform'
-import { receiveTransaction, getVersion } from 'prosemirror-collab'
-import Collab from './Collab'
+import { Collaboration } from 'tiptap-extensions'
 
 export default {
   components: {
@@ -38,38 +36,22 @@ export default {
       this.editor = new Editor({
         content: doc,
         extensions: [
-          new Collab({
+          new Collaboration({
             version,
             debounce: 250,
-            onSend: sendable => {
-              this.socket.emit('update', sendable)
+            onSendable: data => {
+              this.socket.emit('update', data)
             },
           }),
         ],
       })
-
-      // console.log(this.editor.extensions.options.collab.version)
-    },
-
-    onUpdate({ steps, version }) {
-      const { state, view, schema } = this.editor
-
-      if (getVersion(state) > version) {
-        return
-      }
-
-      view.dispatch(receiveTransaction(
-        state,
-        steps.map(item => Step.fromJSON(schema, item.step)),
-        steps.map(item => item.clientID),
-      ))
     },
   },
 
   mounted() {
     this.socket = io('wss://tiptap-sockets.glitch.me')
       .on('init', data => this.onInit(data))
-      .on('update', data => this.onUpdate(data))
+      .on('update', data => this.editor.extensions.options.collaboration.onUpdate(data))
   },
 
   beforeDestroy() {
diff --git a/package.json b/package.json
index 027d3bbf4..f4d00af86 100644
--- a/package.json
+++ b/package.json
@@ -91,8 +91,6 @@
     "zlib": "^1.0.5"
   },
   "dependencies": {
-    "lodash-es": "^4.17.11",
-    "prosemirror-collab": "^1.1.1",
     "socket.io-client": "^2.2.0"
   }
 }
diff --git a/packages/tiptap-extensions/package.json b/packages/tiptap-extensions/package.json
index 420e99a34..f9a89978b 100644
--- a/packages/tiptap-extensions/package.json
+++ b/packages/tiptap-extensions/package.json
@@ -21,10 +21,13 @@
     "url": "https://github.com/scrumpy/tiptap/issues"
   },
   "dependencies": {
+    "lodash-es": "^4.17.11",
     "lowlight": "^1.11.0",
+    "prosemirror-collab": "^1.1.1",
     "prosemirror-history": "^1.0.4",
     "prosemirror-state": "^1.2.2",
     "prosemirror-tables": "^0.7.11",
+    "prosemirror-transform": "^1.1.3",
     "prosemirror-utils": "^0.7.6",
     "prosemirror-view": "^1.8.9",
     "tiptap": "^1.17.0",
diff --git a/packages/tiptap-extensions/src/extensions/Collaboration.js b/packages/tiptap-extensions/src/extensions/Collaboration.js
new file mode 100644
index 000000000..47250dd46
--- /dev/null
+++ b/packages/tiptap-extensions/src/extensions/Collaboration.js
@@ -0,0 +1,62 @@
+import { debounce } from 'lodash-es'
+import { Extension } from 'tiptap'
+import { Step } from 'prosemirror-transform'
+import {
+  collab,
+  sendableSteps,
+  getVersion,
+  receiveTransaction,
+} from 'prosemirror-collab'
+
+export default class CollaborationExtension extends Extension {
+
+  get name() {
+    return 'collaboration'
+  }
+
+  init() {
+    this.editor.on('update', ({ state }) => {
+      this.getSendableSteps(state)
+    })
+  }
+
+  get defaultOptions() {
+    return {
+      version: 0,
+      clientID: Math.floor(Math.random() * 0xFFFFFFFF),
+      debounce: 250,
+      onSendable: () => {},
+      onUpdate: ({ steps, version }) => {
+        const { state, view, schema } = this.editor
+
+        if (getVersion(state) > version) {
+          return
+        }
+
+        view.dispatch(receiveTransaction(
+          state,
+          steps.map(item => Step.fromJSON(schema, item.step)),
+          steps.map(item => item.clientID),
+        ))
+      },
+    }
+  }
+
+  get plugins() {
+    return [
+      collab({
+        version: this.options.version,
+        clientID: this.options.clientID,
+      }),
+    ]
+  }
+
+  getSendableSteps = debounce(state => {
+    const sendable = sendableSteps(state)
+
+    if (sendable) {
+      this.options.onSendable(sendable)
+    }
+  }, this.options.debounce)
+
+}
diff --git a/packages/tiptap-extensions/src/index.js b/packages/tiptap-extensions/src/index.js
index d0d6a1691..4851bb515 100644
--- a/packages/tiptap-extensions/src/index.js
+++ b/packages/tiptap-extensions/src/index.js
@@ -23,6 +23,7 @@ export { default as Link } from './marks/Link'
 export { default as Strike } from './marks/Strike'
 export { default as Underline } from './marks/Underline'
 
+export { default as Collaboration } from './extensions/Collaboration'
 export { default as History } from './extensions/History'
 export { default as Placeholder } from './extensions/Placeholder'
 
diff --git a/yarn.lock b/yarn.lock
index 62eca021d..0addca56b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9681,7 +9681,7 @@ prosemirror-tables@^0.7.11:
     prosemirror-transform "^1.0.0"
     prosemirror-view "^1.0.0"
 
-prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0:
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.1.3.tgz#28cfdf1f9ee514edc40466be7b7db39eed545fdf"
   integrity sha512-1O6Di5lOL1mp4nuCnQNkHY7l2roIW5y8RH4ZG3hMYmkmDEWzTaFFnxxAAHsE5ipGLBSRcTlP7SsDhYBIdSuLpQ==

From a614f0cce12d4fa022dd6d53705756e78e570bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 00:28:29 +0200
Subject: [PATCH 18/27] move url

---
 examples/Components/Subnavigation/index.vue |  6 +++---
 examples/main.js                            | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index c4c3b796f..953b8a6d5 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/examples/Components/Subnavigation/index.vue
@@ -45,12 +45,12 @@
     <router-link class="subnavigation__link" to="/placeholder">
       Placeholder
     </router-link>
-    <router-link class="subnavigation__link" to="/export">
-      Export HTML or JSON
-    </router-link>
     <router-link class="subnavigation__link" to="/collaboration">
       Collaboration
     </router-link>
+    <router-link class="subnavigation__link" to="/export">
+      Export HTML or JSON
+    </router-link>
   </div>
 </template>
 
diff --git a/examples/main.js b/examples/main.js
index 3102cc931..933ff7c0a 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -117,13 +117,6 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Placeholder',
     },
   },
-  {
-    path: '/export',
-    component: () => import('Components/Routes/Export'),
-    meta: {
-      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Export',
-    },
-  },
   {
     path: '/collaboration',
     component: () => import('Components/Routes/Collaboration'),
@@ -131,6 +124,13 @@ const routes = [
       githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
     },
   },
+  {
+    path: '/export',
+    component: () => import('Components/Routes/Export'),
+    meta: {
+      githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Export',
+    },
+  },
 ]
 
 const router = new VueRouter({

From 0a98827b4c2bd40f25992e1bc0c767f1fffa32f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 10:54:53 +0200
Subject: [PATCH 19/27] refactoring

---
 examples/Components/Routes/Collaboration/index.vue         | 2 +-
 packages/tiptap-extensions/src/extensions/Collaboration.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 293541e54..a3b8e0935 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -51,7 +51,7 @@ export default {
   mounted() {
     this.socket = io('wss://tiptap-sockets.glitch.me')
       .on('init', data => this.onInit(data))
-      .on('update', data => this.editor.extensions.options.collaboration.onUpdate(data))
+      .on('update', data => this.editor.extensions.options.collaboration.update(data))
   },
 
   beforeDestroy() {
diff --git a/packages/tiptap-extensions/src/extensions/Collaboration.js b/packages/tiptap-extensions/src/extensions/Collaboration.js
index 47250dd46..f0f714edc 100644
--- a/packages/tiptap-extensions/src/extensions/Collaboration.js
+++ b/packages/tiptap-extensions/src/extensions/Collaboration.js
@@ -26,7 +26,7 @@ export default class CollaborationExtension extends Extension {
       clientID: Math.floor(Math.random() * 0xFFFFFFFF),
       debounce: 250,
       onSendable: () => {},
-      onUpdate: ({ steps, version }) => {
+      update: ({ steps, version }) => {
         const { state, view, schema } = this.editor
 
         if (getVersion(state) > version) {

From 3a42fe388bdfe8598162f2495f6defc731bd7c57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 11:00:50 +0200
Subject: [PATCH 20/27] fix linter errors

---
 .../tiptap-commands/src/commands/splitToDefaultListItem.js  | 4 ++--
 packages/tiptap/src/Utils/Emitter.js                        | 6 ++----
 packages/tiptap/src/Utils/camelCase.js                      | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/tiptap-commands/src/commands/splitToDefaultListItem.js b/packages/tiptap-commands/src/commands/splitToDefaultListItem.js
index 70cc6f641..948bf4563 100644
--- a/packages/tiptap-commands/src/commands/splitToDefaultListItem.js
+++ b/packages/tiptap-commands/src/commands/splitToDefaultListItem.js
@@ -32,8 +32,8 @@ index = $pos.index(d)
 // this is a copy of splitListItem
 // see https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js
 
-export default function splitListItem(itemType) {
-  return function _splitListItem(state, dispatch) {
+export default function splitToDefaultListItem(itemType) {
+  return function (state, dispatch) {
     const { $from, $to, node } = state.selection
     if ((node && node.isBlock) || $from.depth < 2 || !$from.sameParent($to)) return false
     const grandParent = $from.node(-1)
diff --git a/packages/tiptap/src/Utils/Emitter.js b/packages/tiptap/src/Utils/Emitter.js
index 2ce3bb520..5fa5a36e5 100644
--- a/packages/tiptap/src/Utils/Emitter.js
+++ b/packages/tiptap/src/Utils/Emitter.js
@@ -16,9 +16,7 @@ export default class Emitter {
     const callbacks = this._callbacks[event]
 
     if (callbacks) {
-      for (const callback of callbacks) {
-        callback.apply(this, args)
-      }
+      callbacks.forEach(callback => callback.apply(this, args))
     }
 
     return this
@@ -46,7 +44,7 @@ export default class Emitter {
     }
 
     // remove specific handler
-    for (let i = 0; i < callbacks.length; i++) {
+    for (let i = 0; i < callbacks.length; i += 1) {
       const callback = callbacks[i]
       if (callback === fn) {
         callbacks.splice(i, 1)
diff --git a/packages/tiptap/src/Utils/camelCase.js b/packages/tiptap/src/Utils/camelCase.js
index c99895b0f..c840c9a9b 100644
--- a/packages/tiptap/src/Utils/camelCase.js
+++ b/packages/tiptap/src/Utils/camelCase.js
@@ -1,3 +1,3 @@
 export default function (str) {
-  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (index == 0 ? word.toLowerCase() : word.toUpperCase())).replace(/\s+/g, '')
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (index === 0 ? word.toLowerCase() : word.toUpperCase())).replace(/\s+/g, '')
 }

From 9a688409fb2cd7dce20aa5549ee303713e651567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 11:04:39 +0200
Subject: [PATCH 21/27] add history plugin to collab

---
 examples/Components/Routes/Collaboration/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index a3b8e0935..5756da260 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -10,7 +10,7 @@
 <script>
 import io from 'socket.io-client'
 import { Editor, EditorContent } from 'tiptap'
-import { Collaboration } from 'tiptap-extensions'
+import { History, Collaboration } from 'tiptap-extensions'
 
 export default {
   components: {
@@ -36,6 +36,7 @@ export default {
       this.editor = new Editor({
         content: doc,
         extensions: [
+          new History(),
           new Collaboration({
             version,
             debounce: 250,

From fc42cba033653095083955ae1462a171b02c04c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 12:20:34 +0200
Subject: [PATCH 22/27] remove lodash

---
 packages/tiptap-extensions/package.json          |  1 -
 .../src/extensions/Collaboration.js              | 16 ++++++++++++++--
 yarn.lock                                        |  5 -----
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/tiptap-extensions/package.json b/packages/tiptap-extensions/package.json
index f9a89978b..5be9c03f3 100644
--- a/packages/tiptap-extensions/package.json
+++ b/packages/tiptap-extensions/package.json
@@ -21,7 +21,6 @@
     "url": "https://github.com/scrumpy/tiptap/issues"
   },
   "dependencies": {
-    "lodash-es": "^4.17.11",
     "lowlight": "^1.11.0",
     "prosemirror-collab": "^1.1.1",
     "prosemirror-history": "^1.0.4",
diff --git a/packages/tiptap-extensions/src/extensions/Collaboration.js b/packages/tiptap-extensions/src/extensions/Collaboration.js
index f0f714edc..806baf485 100644
--- a/packages/tiptap-extensions/src/extensions/Collaboration.js
+++ b/packages/tiptap-extensions/src/extensions/Collaboration.js
@@ -1,4 +1,3 @@
-import { debounce } from 'lodash-es'
 import { Extension } from 'tiptap'
 import { Step } from 'prosemirror-transform'
 import {
@@ -51,7 +50,7 @@ export default class CollaborationExtension extends Extension {
     ]
   }
 
-  getSendableSteps = debounce(state => {
+  getSendableSteps = this.debounce(state => {
     const sendable = sendableSteps(state)
 
     if (sendable) {
@@ -59,4 +58,17 @@ export default class CollaborationExtension extends Extension {
     }
   }, this.options.debounce)
 
+  debounce(fn, delay) {
+    let timeout
+    return function (...args) {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+      timeout = setTimeout(() => {
+        fn(...args)
+        timeout = null
+      }, delay)
+    }
+  }
+
 }
diff --git a/yarn.lock b/yarn.lock
index 0addca56b..9b15027b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7521,11 +7521,6 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
-  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
-
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"

From 055d72be26fa491bf3831b579631624e3bda07f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 12:21:16 +0200
Subject: [PATCH 23/27] wording

---
 packages/tiptap-extensions/src/extensions/Collaboration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/tiptap-extensions/src/extensions/Collaboration.js b/packages/tiptap-extensions/src/extensions/Collaboration.js
index 806baf485..5eacd2035 100644
--- a/packages/tiptap-extensions/src/extensions/Collaboration.js
+++ b/packages/tiptap-extensions/src/extensions/Collaboration.js
@@ -7,7 +7,7 @@ import {
   receiveTransaction,
 } from 'prosemirror-collab'
 
-export default class CollaborationExtension extends Extension {
+export default class Collaboration extends Extension {
 
   get name() {
     return 'collaboration'

From 7cad96ee3ccdd7bb3b13881fe99298ba08a2e7e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 12:31:10 +0200
Subject: [PATCH 24/27] add some comments

---
 examples/Components/Routes/Collaboration/index.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 5756da260..9189911b0 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -38,8 +38,12 @@ export default {
         extensions: [
           new History(),
           new Collaboration({
+            // the initial version we start with
+            // version is an integer which is incremented with every change
             version,
+            // debounce changes so we can save some bandwidth
             debounce: 250,
+            // onSendable is called whenever there are changed we have to send to our server
             onSendable: data => {
               this.socket.emit('update', data)
             },
@@ -50,8 +54,11 @@ export default {
   },
 
   mounted() {
+    // server implementation: https://glitch.com/edit/#!/tiptap-sockets
     this.socket = io('wss://tiptap-sockets.glitch.me')
+      // get the current document and its version
       .on('init', data => this.onInit(data))
+      // send all updates to the collaboration extension
       .on('update', data => this.editor.extensions.options.collaboration.update(data))
   },
 

From 03cb2d4c75d018250dcb242d3611182abaa30af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 4 May 2019 20:40:18 +0200
Subject: [PATCH 25/27] show users count

---
 .../Components/Routes/Collaboration/index.vue | 43 ++++++++++++++++++-
 examples/assets/sass/main.scss                |  9 ++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 9189911b0..e7420bc47 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="editor">
-    <editor-content class="editor__content" :editor="editor" v-if="editor && !loading" />
+    <div class="message">
+      With the Collaboration Extension it's possible for several users to work on a document at the same time. To make this possible, client-side and server-side code is required. This example shows this using a <a href="https://glitch.com/edit/#!/tiptap-sockets" target="_blank">socket server</a>. Try it out below:
+    </div>
+    <template v-if="editor && !loading">
+      <div class="count">
+        {{ count }} {{ count === 1 ? 'user' : 'users' }} connected
+      </div>
+      <editor-content class="editor__content" :editor="editor"  />
+    </template>
     <em v-else>
       Connecting to socket server …
     </em>
@@ -22,6 +30,7 @@ export default {
       loading: true,
       editor: null,
       socket: null,
+      count: 0,
     }
   },
 
@@ -51,6 +60,10 @@ export default {
         ],
       })
     },
+
+    setCount(count) {
+      this.count = count
+    },
   },
 
   mounted() {
@@ -60,6 +73,8 @@ export default {
       .on('init', data => this.onInit(data))
       // send all updates to the collaboration extension
       .on('update', data => this.editor.extensions.options.collaboration.update(data))
+      // get count of connected users
+      .on('getCount', count => this.setCount(count))
   },
 
   beforeDestroy() {
@@ -67,3 +82,29 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+@import "~variables";
+
+.count {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: rgba($color-black, 0.5);
+  color: #27b127;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  line-height: 1;
+
+  &:before {
+    content: '';
+    display: inline-flex;
+    background-color: #27b127;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    margin-right: 0.3rem;
+  }
+}
+</style>
diff --git a/examples/assets/sass/main.scss b/examples/assets/sass/main.scss
index 89a88025f..9c62a81e3 100644
--- a/examples/assets/sass/main.scss
+++ b/examples/assets/sass/main.scss
@@ -74,6 +74,15 @@ h3 {
   background-color: rgba($color-black, 0.1);
 }
 
+.message {
+  background-color: rgba($color-black, 0.05);
+  color: rgba($color-black, 0.7);
+  padding: 1rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  font-style: italic;
+}
+
 @import "./editor";
 @import "./menubar";
 @import "./menububble";

From 76dca53d806c06d4ae74d90b85a2505cd75df561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 5 May 2019 21:47:52 +0200
Subject: [PATCH 26/27] send only json steps

---
 .../Components/Routes/Collaboration/index.vue     | 15 ++++++++++++++-
 .../src/extensions/Collaboration.js               |  6 +++++-
 packages/tiptap/src/Editor.js                     |  7 +++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index e7420bc47..19f5ab068 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -18,7 +18,15 @@
 <script>
 import io from 'socket.io-client'
 import { Editor, EditorContent } from 'tiptap'
-import { History, Collaboration } from 'tiptap-extensions'
+import {
+  HardBreak,
+  Heading,
+  Bold,
+  Code,
+  Italic,
+  History,
+  Collaboration,
+} from 'tiptap-extensions'
 
 export default {
   components: {
@@ -45,6 +53,11 @@ export default {
       this.editor = new Editor({
         content: doc,
         extensions: [
+          new HardBreak(),
+          new Heading({ levels: [1, 2, 3] }),
+          new Bold(),
+          new Code(),
+          new Italic(),
           new History(),
           new Collaboration({
             // the initial version we start with
diff --git a/packages/tiptap-extensions/src/extensions/Collaboration.js b/packages/tiptap-extensions/src/extensions/Collaboration.js
index 5eacd2035..3b4a122c1 100644
--- a/packages/tiptap-extensions/src/extensions/Collaboration.js
+++ b/packages/tiptap-extensions/src/extensions/Collaboration.js
@@ -54,7 +54,11 @@ export default class Collaboration extends Extension {
     const sendable = sendableSteps(state)
 
     if (sendable) {
-      this.options.onSendable(sendable)
+      this.options.onSendable({
+        version: sendable.version,
+        steps: sendable.steps.map(step => step.toJSON()),
+        clientID: sendable.clientID,
+      })
     }
   }, this.options.debounce)
 
diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js
index d9997cb95..bc35201af 100644
--- a/packages/tiptap/src/Editor.js
+++ b/packages/tiptap/src/Editor.js
@@ -342,6 +342,13 @@ export default class Editor extends Emitter {
     this.view.dom.blur()
   }
 
+  getSchemaJSON() {
+    return JSON.parse(JSON.stringify({
+      nodes: this.extensions.nodes,
+      marks: this.extensions.marks,
+    }))
+  }
+
   getHTML() {
     const div = document.createElement('div')
     const fragment = DOMSerializer

From a22185de5797a515564f60977c5dff27e568d92a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 5 May 2019 23:08:28 +0200
Subject: [PATCH 27/27] improve spacings

---
 examples/Components/Routes/Collaboration/index.vue | 2 +-
 examples/assets/sass/main.scss                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/Components/Routes/Collaboration/index.vue b/examples/Components/Routes/Collaboration/index.vue
index 19f5ab068..f3abacbdd 100644
--- a/examples/Components/Routes/Collaboration/index.vue
+++ b/examples/Components/Routes/Collaboration/index.vue
@@ -105,7 +105,7 @@ export default {
   font-weight: bold;
   color: rgba($color-black, 0.5);
   color: #27b127;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1rem;
   text-transform: uppercase;
   font-size: 0.7rem;
   line-height: 1;
diff --git a/examples/assets/sass/main.scss b/examples/assets/sass/main.scss
index 9c62a81e3..b62f878a7 100644
--- a/examples/assets/sass/main.scss
+++ b/examples/assets/sass/main.scss
@@ -79,7 +79,7 @@ h3 {
   color: rgba($color-black, 0.7);
   padding: 1rem;
   border-radius: 6px;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   font-style: italic;
 }