refactoring

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 {
+import { receiveTransaction, sendableSteps, getVersion } from 'prosemirror-collab'
- receiveTransaction, sendableSteps, getVersion, rebaseSteps,
-} 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 => {
+        onUpdate: ({ state }) => {
-        //   console.log('onTransaction')
+          this.getSendableSteps(state)
-        //   this.newState = this.editor.state.apply(transaction)
-        //   this.editor.view.updateState(this.state.edit)
-        //   return false
-        // },
-        onUpdate: ({ state, oldState }) => {
-          this.getSendableSteps(state, oldState)
         },
       })
     },
 
-    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(item => Step.fromJSON(schema, item.step)),
-        steps.map(step => step.clientID),
+        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 => {
+      .on('update', ({ steps, version }) => {
-        this.receiveData(data)
+        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() {

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)