refactoring
This commit is contained in:
Philipp Kühn
@@ -5,6 +5,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import io from 'socket.io-client'
|
||||||
|
import { debounce } from 'lodash-es'
|
||||||
import { Editor, EditorContent } from 'tiptap'
|
import { Editor, EditorContent } from 'tiptap'
|
||||||
import { Step } from 'prosemirror-transform'
|
import { Step } from 'prosemirror-transform'
|
||||||
import { receiveTransaction, sendableSteps, getVersion } from 'prosemirror-collab'
|
import { receiveTransaction, sendableSteps, getVersion } from 'prosemirror-collab'
|
||||||
@@ -18,85 +20,54 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
editor: null,
|
editor: null,
|
||||||
ws: null,
|
socket: null,
|
||||||
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
|
|
||||||
collabStartVersion: 0,
|
|
||||||
collabHistory: {
|
|
||||||
steps: [],
|
|
||||||
clientIDs: [],
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
initEditor({ doc, version }) {
|
initEditor({ doc, version }) {
|
||||||
this.collabStartVersion = version + 1
|
if (this.editor) {
|
||||||
|
this.editor.destroy()
|
||||||
|
}
|
||||||
|
|
||||||
this.editor = new Editor({
|
this.editor = new Editor({
|
||||||
content: doc,
|
content: doc,
|
||||||
extensions: [
|
extensions: [
|
||||||
new Collab({
|
new Collab({ version }),
|
||||||
version: this.collabStartVersion,
|
|
||||||
clientID: this.clientID,
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
onUpdate: ({ state }) => {
|
onUpdate: ({ state }) => {
|
||||||
const sendable = sendableSteps(state)
|
this.getSendableSteps(state)
|
||||||
|
|
||||||
if (sendable) {
|
|
||||||
this.ws.send(JSON.stringify(sendable))
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
receiveData({ version, steps, clientID }) {
|
getSendableSteps: debounce(function (state) {
|
||||||
if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
|
const sendable = sendableSteps(state)
|
||||||
|
|
||||||
|
if (sendable) {
|
||||||
|
this.socket.emit('update', sendable)
|
||||||
|
}
|
||||||
|
}, 250),
|
||||||
|
|
||||||
|
receiveData({ steps, version }) {
|
||||||
|
const { state, view, schema } = this.editor
|
||||||
|
|
||||||
|
if (getVersion(state) > version) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
steps.forEach(step => {
|
view.dispatch(receiveTransaction(
|
||||||
this.collabHistory.steps.push(step)
|
|
||||||
this.collabHistory.clientIDs.push(clientID)
|
|
||||||
})
|
|
||||||
|
|
||||||
this.updateDoc()
|
|
||||||
},
|
|
||||||
|
|
||||||
updateDoc() {
|
|
||||||
const { state, view, schema } = this.editor
|
|
||||||
const version = getVersion(state)
|
|
||||||
const data = this.stepsSince(version)
|
|
||||||
const transaction = receiveTransaction(
|
|
||||||
state,
|
state,
|
||||||
data.steps.map(step => Step.fromJSON(schema, step)),
|
steps.map(item => Step.fromJSON(schema, item.step)),
|
||||||
data.clientIDs,
|
steps.map(item => item.clientID),
|
||||||
)
|
))
|
||||||
|
|
||||||
view.dispatch(transaction)
|
|
||||||
},
|
|
||||||
|
|
||||||
stepsSince(version) {
|
|
||||||
const count = version - this.collabStartVersion
|
|
||||||
return {
|
|
||||||
steps: this.collabHistory.steps.slice(count),
|
|
||||||
clientIDs: this.collabHistory.clientIDs.slice(count),
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.ws = new WebSocket('wss://tiptap-sockets.glitch.me')
|
this.socket = io('wss://tiptap-sockets-2.glitch.me')
|
||||||
|
.on('document', data => this.initEditor(data))
|
||||||
this.ws.onmessage = event => {
|
.on('update', data => this.receiveData(data))
|
||||||
const payload = JSON.parse(event.data)
|
|
||||||
|
|
||||||
if (payload.doc) {
|
|
||||||
this.initEditor(payload)
|
|
||||||
} else {
|
|
||||||
this.receiveData(payload)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
|
|||||||
@@ -1,24 +0,0 @@
|
|||||||
import { Extension } from 'tiptap'
|
|
||||||
import { collab } from 'prosemirror-collab'
|
|
||||||
|
|
||||||
export default class CollabExtension extends Extension {
|
|
||||||
get name() {
|
|
||||||
return 'collab'
|
|
||||||
}
|
|
||||||
|
|
||||||
get defaultOptions() {
|
|
||||||
return {
|
|
||||||
version: 0,
|
|
||||||
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get plugins() {
|
|
||||||
return [
|
|
||||||
collab({
|
|
||||||
version: this.options.version,
|
|
||||||
clientID: this.options.clientID,
|
|
||||||
}),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,183 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="editor">
|
|
||||||
<editor-content class="editor__content" :editor="editor" v-if="editor" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
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 } from 'prosemirror-collab'
|
|
||||||
import Collab from './Collab'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
EditorContent,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
history: [],
|
|
||||||
editor: null,
|
|
||||||
socket: null,
|
|
||||||
newState: null,
|
|
||||||
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
initEditor({ doc, version }) {
|
|
||||||
if (this.editor) {
|
|
||||||
this.editor.destroy()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.editor = new Editor({
|
|
||||||
content: doc,
|
|
||||||
extensions: [
|
|
||||||
new Collab({
|
|
||||||
version,
|
|
||||||
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 }) => {
|
|
||||||
this.getSendableSteps(state)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getSendableSteps: debounce(function (state) {
|
|
||||||
const sendable = sendableSteps(state)
|
|
||||||
|
|
||||||
if (sendable) {
|
|
||||||
this.socket.emit('update', sendable)
|
|
||||||
|
|
||||||
const { steps } = sendable
|
|
||||||
const clientIDs = this.repeat(sendable.clientID, steps.length)
|
|
||||||
|
|
||||||
this.history.push({
|
|
||||||
state,
|
|
||||||
version: getVersion(state),
|
|
||||||
steps,
|
|
||||||
clientIDs,
|
|
||||||
})
|
|
||||||
|
|
||||||
const transaction = receiveTransaction(
|
|
||||||
state,
|
|
||||||
steps,
|
|
||||||
clientIDs,
|
|
||||||
)
|
|
||||||
|
|
||||||
this.editor.view.dispatch(transaction)
|
|
||||||
}
|
|
||||||
}, 250),
|
|
||||||
|
|
||||||
receiveData({ steps }) {
|
|
||||||
const { state, view, schema } = this.editor
|
|
||||||
|
|
||||||
const transaction = receiveTransaction(
|
|
||||||
state,
|
|
||||||
steps.map(step => Step.fromJSON(schema, step)),
|
|
||||||
steps.map(step => step.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('versionInSync', version => {
|
|
||||||
console.log('version in sync', version)
|
|
||||||
// TODO remove steps older than version
|
|
||||||
})
|
|
||||||
.on('versionMismatch', ({ version, data }) => {
|
|
||||||
console.log('version mismatch', version)
|
|
||||||
// TODO: go back to `version`, apply `steps`, apply unmerged `steps`
|
|
||||||
|
|
||||||
console.log(this.history.length)
|
|
||||||
|
|
||||||
const history = this.history.find(item => {
|
|
||||||
console.log('search', item.version, version)
|
|
||||||
return item.version === version
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log({ history })
|
|
||||||
|
|
||||||
const { state, view, schema } = this.editor
|
|
||||||
|
|
||||||
view.updateState(history.state)
|
|
||||||
|
|
||||||
view.dispatch(receiveTransaction(
|
|
||||||
history.state,
|
|
||||||
data.map(item => Step.fromJSON(schema, item.step)),
|
|
||||||
data.map(item => item.clientID),
|
|
||||||
))
|
|
||||||
|
|
||||||
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() {
|
|
||||||
this.editor.destroy()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import { Extension } from 'tiptap'
|
|
||||||
import { collab } from 'prosemirror-collab'
|
|
||||||
|
|
||||||
export default class CollabExtension extends Extension {
|
|
||||||
get name() {
|
|
||||||
return 'collab'
|
|
||||||
}
|
|
||||||
|
|
||||||
get defaultOptions() {
|
|
||||||
return {
|
|
||||||
version: 0,
|
|
||||||
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
get plugins() {
|
|
||||||
return [
|
|
||||||
collab({
|
|
||||||
version: this.options.version,
|
|
||||||
clientID: this.options.clientID,
|
|
||||||
}),
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="editor">
|
|
||||||
<editor-content class="editor__content" :editor="editor" v-if="editor" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
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 } from 'prosemirror-collab'
|
|
||||||
import Collab from './Collab'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
EditorContent,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editor: null,
|
|
||||||
socket: null,
|
|
||||||
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
initEditor({ doc, version }) {
|
|
||||||
if (this.editor) {
|
|
||||||
this.editor.destroy()
|
|
||||||
}
|
|
||||||
|
|
||||||
this.editor = new Editor({
|
|
||||||
content: doc,
|
|
||||||
extensions: [
|
|
||||||
new Collab({
|
|
||||||
version,
|
|
||||||
clientID: this.clientID,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
onUpdate: ({ state }) => {
|
|
||||||
this.getSendableSteps(state)
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
getSendableSteps: debounce(function (state) {
|
|
||||||
const sendable = sendableSteps(state)
|
|
||||||
|
|
||||||
if (sendable) {
|
|
||||||
this.socket.emit('update', sendable)
|
|
||||||
}
|
|
||||||
}, 250),
|
|
||||||
|
|
||||||
receiveData({ steps, version }) {
|
|
||||||
const { state, view, schema } = this.editor
|
|
||||||
|
|
||||||
if (getVersion(state) > version) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const transaction = receiveTransaction(
|
|
||||||
state,
|
|
||||||
steps.map(item => Step.fromJSON(schema, item.step)),
|
|
||||||
steps.map(item => item.clientID),
|
|
||||||
)
|
|
||||||
|
|
||||||
view.dispatch(transaction)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.socket = io('wss://tiptap-sockets-2.glitch.me')
|
|
||||||
.on('document', data => {
|
|
||||||
this.initEditor(data)
|
|
||||||
})
|
|
||||||
.on('update', ({ steps, version }) => {
|
|
||||||
this.receiveData({ steps, version })
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
this.editor.destroy()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -51,12 +51,6 @@
|
|||||||
<router-link class="subnavigation__link" to="/collaboration">
|
<router-link class="subnavigation__link" to="/collaboration">
|
||||||
Collaboration
|
Collaboration
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link class="subnavigation__link" to="/collaboration2">
|
|
||||||
Collaboration 2
|
|
||||||
</router-link>
|
|
||||||
<router-link class="subnavigation__link" to="/collaboration3">
|
|
||||||
Collaboration 3
|
|
||||||
</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -131,20 +131,6 @@ const routes = [
|
|||||||
githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
|
githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/collaboration2',
|
|
||||||
component: () => import('Components/Routes/Collaboration2'),
|
|
||||||
meta: {
|
|
||||||
githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration2',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/collaboration3',
|
|
||||||
component: () => import('Components/Routes/Collaboration3'),
|
|
||||||
meta: {
|
|
||||||
githubUrl: 'https://github.com/scrumpy/tiptap/tree/master/examples/Components/Routes/Collaboration3',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = new VueRouter({
|
||||||
|
|||||||
Reference in New Issue
Block a user