diff --git a/examples/Components/Routes/Collaboration3/index.vue b/examples/Components/Routes/Collaboration3/index.vue index 7267a472..6301f756 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 12fd34bb..6228524f 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)