move collab extension

examples/Components/Routes/Collaboration/Collab.js

@@ -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)
-
-}

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 { Collaboration } from 'tiptap-extensions'
-import { receiveTransaction, getVersion } from 'prosemirror-collab'
-import Collab from './Collab'
 
 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 => {
+            onSendable: data => {
-              this.socket.emit('update', sendable)
+              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() {

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"
   }
 }

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",

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)
+
+}

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'
 

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==