refactor collaboration extension

This commit is contained in:
Hans Pagel
2020-09-26 10:43:08 +02:00
parent 560edc93bb
commit 90f127b8a6
4 changed files with 40 additions and 38 deletions

View File

@@ -7,7 +7,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Yjs from '@tiptap/extension-yjs'
import Collaboration from '@tiptap/extension-collaboration'
export default {
components: {
@@ -24,18 +24,13 @@ export default {
this.editor = new Editor({
// TODO: This is added by every new user.
// content: `
// <p>
// This is a radically reduced version of tiptap. It has only support for a document, paragraphs and text. Thats it. Its probably too much for real minimalists though.
// </p>
// <p>
// The paragraph extension is not literally required, but you need at least one node. That node can be something different, for example to render a task list and only that task list.
// </p>
// <p>Example Text</p>
// `,
extensions: [
Document(),
Paragraph(),
Text(),
Yjs({
Collaboration({
name: 'Other User',
color: '#d6336c',
}),

View File

@@ -6,33 +6,40 @@ import {
import { WebrtcProvider } from 'y-webrtc'
import { keymap } from 'prosemirror-keymap'
export interface YjsOptions {
export interface CollaborationOptions {
name: string,
color: string,
provider?: any,
type?: any,
}
const ydoc = new Y.Doc()
const provider = new WebrtcProvider('example', ydoc)
const type = ydoc.getXmlFragment('prosemirror')
export default new Extension<YjsOptions>()
.name('yjs')
export default new Extension<CollaborationOptions>()
.name('collaboration')
.defaults({
name: 'Someone',
color: '#cccccc',
provider: null,
type: null,
})
.plugins(({ options }) => [
// Collaboration
ySyncPlugin(type),
yCursorPlugin((() => {
provider.awareness.setLocalStateField('user', { name: options.name, color: options.color })
return provider.awareness
})()),
yUndoPlugin(),
keymap({
'Mod-z': undo,
'Mod-y': redo,
'Mod-Shift-z': redo,
}),
// CollaborationCursor
yCursorPlugin((() => {
provider.awareness.setLocalStateField('user', { name: options.name, color: options.color })
return provider.awareness
})()),
])
.create()

View File

@@ -0,0 +1,22 @@
{
"name": "@tiptap/extension-collaboration",
"version": "1.0.0",
"source": "index.ts",
"main": "dist/tiptap-extension-collaboration.js",
"umd:main": "dist/tiptap-extension-collaboration.umd.js",
"module": "dist/tiptap-extension-collaboration.mjs",
"unpkg": "dist/tiptap-extension-collaboration.js",
"jsdelivr": "dist/tiptap-extension-collaboration.js",
"files": [
"src",
"dist"
],
"peerDependencies": {
"@tiptap/core": "2.x"
},
"dependencies": {
"y-prosemirror": "^0.3.7",
"y-webrtc": "^10.1.6",
"yjs": "^13.3.2"
}
}

View File

@@ -1,22 +0,0 @@
{
"name": "@tiptap/extension-yjs",
"version": "1.0.0",
"source": "index.ts",
"main": "dist/tiptap-extension-yjs.js",
"umd:main": "dist/tiptap-extension-yjs.umd.js",
"module": "dist/tiptap-extension-yjs.mjs",
"unpkg": "dist/tiptap-extension-yjs.js",
"jsdelivr": "dist/tiptap-extension-yjs.js",
"files": [
"src",
"dist"
],
"peerDependencies": {
"@tiptap/core": "2.x"
},
"dependencies": {
"y-prosemirror": "^0.3.7",
"y-webrtc": "^10.1.6",
"yjs": "^13.3.2"
}
}