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