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: {
|
2019-05-04 06:05:39 +08:00
|
|
|
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({
|
2019-05-04 06:05:39 +08:00
|
|
|
version,
|
|
|
|
debounce: 250,
|
2019-05-04 06:25:14 +08:00
|
|
|
onSendable: data => {
|
|
|
|
this.socket.emit('update', data)
|
2019-05-04 06:05:39 +08:00
|
|
|
},
|
|
|
|
}),
|
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')
|
2019-05-04 06:05:39 +08:00
|
|
|
.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>
|