mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-19 06:43:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Philipp Kühn 2019-05-03 18:05:05 +02:00
parent b5a5472171
commit e9e50a2e75
7 changed files with 27 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
examples/Components/Routes/Collaboration/index.vue
View File

@ -5,6 +5,8 @@
</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'
@ -18,85 +20,54 @@ export default {
data() {
return {
editor: null,
ws: null,
clientID: Math.floor(Math.random() * 0xFFFFFFFF),
collabStartVersion: 0,
collabHistory: {
steps: [],
clientIDs: [],
},
socket: null,
}
},
methods: {
initEditor({ doc, version }) {
this.collabStartVersion = version + 1
if (this.editor) {
this.editor.destroy()
}
this.editor = new Editor({
content: doc,
extensions: [
new Collab({
version: this.collabStartVersion,
clientID: this.clientID,
}),
new Collab({ version }),
],
onUpdate: ({ state }) => {
const sendable = sendableSteps(state)
if (sendable) {
this.ws.send(JSON.stringify(sendable))
}
this.getSendableSteps(state)
},
})
},
receiveData({ version, steps, clientID }) {
if (version !== this.collabHistory.steps.length + this.collabStartVersion) {
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
}
steps.forEach(step => {
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(
view.dispatch(receiveTransaction(
state,
data.steps.map(step => Step.fromJSON(schema, step)),
data.clientIDs,
)
view.dispatch(transaction)
},
stepsSince(version) {
const count = version - this.collabStartVersion
return {
steps: this.collabHistory.steps.slice(count),
clientIDs: this.collabHistory.clientIDs.slice(count),
}
steps.map(item => Step.fromJSON(schema, item.step)),
steps.map(item => item.clientID),
))
},
},
mounted() {
this.ws = new WebSocket('wss://tiptap-sockets.glitch.me')
this.ws.onmessage = event => {
const payload = JSON.parse(event.data)
if (payload.doc) {
this.initEditor(payload)
} else {
this.receiveData(payload)
}
}
this.socket = io('wss://tiptap-sockets-2.glitch.me')
.on('document', data => this.initEditor(data))
.on('update', data => this.receiveData(data))
},
beforeDestroy() {

24
examples/Components/Routes/Collaboration2/Collab.js
View File

@ -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,
}),
]
}
}

183
examples/Components/Routes/Collaboration2/index.vue
View File

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

24
examples/Components/Routes/Collaboration3/Collab.js
View File

@ -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,
}),
]
}
}

87
examples/Components/Routes/Collaboration3/index.vue
View File

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

6
examples/Components/Subnavigation/index.vue
View File

@ -51,12 +51,6 @@
<router-link class="subnavigation__link" to="/collaboration">
Collaboration
</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>
</template>

14
examples/main.js
View File

@ -131,20 +131,6 @@ const routes = [
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({