tiptap/examples/Components/Routes/Collaboration/index.vue

62 lines
1.2 KiB
Vue
Raw Normal View History

2019-02-03 21:06:17 +08:00
<template>
<div class="editor">
2019-05-04 04:14:18 +08:00
<editor-content class="editor__content" :editor="editor" v-if="editor && !loading" />
<em v-else>
Connecting to socket server
</em>
2019-02-03 21:06:17 +08:00
</div>
</template>
<script>
2019-05-04 00:05:05 +08:00
import io from 'socket.io-client'
2019-02-03 21:06:17 +08:00
import { Editor, EditorContent } from 'tiptap'
2019-05-04 06:25:14 +08:00
import { Collaboration } from 'tiptap-extensions'
2019-02-03 21:06:17 +08:00
export default {
components: {
EditorContent,
},
data() {
return {
2019-05-04 04:14:18 +08:00
loading: true,
2019-02-04 04:18:03 +08:00
editor: null,
2019-05-04 00:05:05 +08:00
socket: null,
2019-02-04 04:18:03 +08:00
}
},
2019-02-03 21:06:17 +08:00
2019-02-04 04:18:03 +08:00
methods: {
onInit({ doc, version }) {
2019-05-04 04:14:18 +08:00
this.loading = false
2019-05-04 00:05:05 +08:00
if (this.editor) {
this.editor.destroy()
}
2019-02-04 04:18:03 +08:00
this.editor = new Editor({
content: doc,
extensions: [
2019-05-04 06:25:14 +08:00
new Collaboration({
version,
debounce: 250,
2019-05-04 06:25:14 +08:00
onSendable: data => {
this.socket.emit('update', data)
},
}),
2019-02-04 04:18:03 +08:00
],
})
2019-02-03 21:06:17 +08:00
},
},
mounted() {
2019-05-04 03:50:17 +08:00
this.socket = io('wss://tiptap-sockets.glitch.me')
.on('init', data => this.onInit(data))
2019-05-04 16:54:53 +08:00
.on('update', data => this.editor.extensions.options.collaboration.update(data))
2019-02-03 21:06:17 +08:00
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>