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

124 lines
2.9 KiB
Vue
Raw Normal View History

2019-02-03 21:06:17 +08:00
<template>
<div class="editor">
2019-05-05 02:40:18 +08:00
<div class="message">
With the Collaboration Extension it's possible for several users to work on a document at the same time. To make this possible, client-side and server-side code is required. This example shows this using a <a href="https://glitch.com/edit/#!/tiptap-sockets" target="_blank">socket server</a>. Try it out below:
</div>
<template v-if="editor && !loading">
<div class="count">
{{ count }} {{ count === 1 ? 'user' : 'users' }} connected
</div>
<editor-content class="editor__content" :editor="editor" />
</template>
2019-05-04 04:14:18 +08:00
<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-06 03:47:52 +08:00
import {
HardBreak,
Heading,
Bold,
Code,
Italic,
History,
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-05-05 02:40:18 +08:00
count: 0,
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-06 03:47:52 +08:00
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new Bold(),
new Code(),
new Italic(),
2019-05-04 17:04:39 +08:00
new History(),
2019-05-04 06:25:14 +08:00
new Collaboration({
2019-05-04 18:31:10 +08:00
// the initial version we start with
// version is an integer which is incremented with every change
version,
2019-05-04 18:31:10 +08:00
// debounce changes so we can save some bandwidth
debounce: 250,
2019-05-04 18:31:10 +08:00
// onSendable is called whenever there are changed we have to send to our server
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
},
2019-05-05 02:40:18 +08:00
setCount(count) {
this.count = count
},
2019-02-03 21:06:17 +08:00
},
mounted() {
2019-05-04 18:31:10 +08:00
// server implementation: https://glitch.com/edit/#!/tiptap-sockets
2019-05-04 03:50:17 +08:00
this.socket = io('wss://tiptap-sockets.glitch.me')
2019-05-04 18:31:10 +08:00
// get the current document and its version
.on('init', data => this.onInit(data))
2019-05-04 18:31:10 +08:00
// send all updates to the collaboration extension
2019-05-04 16:54:53 +08:00
.on('update', data => this.editor.extensions.options.collaboration.update(data))
2019-05-05 02:40:18 +08:00
// get count of connected users
.on('getCount', count => this.setCount(count))
2019-02-03 21:06:17 +08:00
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
2019-05-05 02:40:18 +08:00
<style lang="scss">
@import "~variables";
.count {
display: flex;
align-items: center;
font-weight: bold;
color: rgba($color-black, 0.5);
color: #27b127;
margin-bottom: 0.5rem;
text-transform: uppercase;
font-size: 0.7rem;
line-height: 1;
&:before {
content: '';
display: inline-flex;
background-color: #27b127;
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
margin-right: 0.3rem;
}
}
</style>