ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

make less assumptions about the Y.js provider, fix #70

Browse Source
This commit is contained in:
Hans Pagel
2021-01-08 18:02:06 +01:00
parent 6c20e92f7e
commit 3496718654
8 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -67,6 +67,7 @@ export default {
name: this.getRandomName(),
color: this.getRandomColor(),
},
provider: null,
indexdb: null,
editor: null,
users: [],
@@ -76,8 +77,8 @@ export default {
mounted() {
const ydoc = new Y.Doc()
const provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-collaboration-example', ydoc)
provider.on('status', event => {
this.provider = new WebsocketProvider('wss://websocket.tiptap.dev', 'tiptap-collaboration-example', ydoc)
this.provider.on('status', event => {
this.status = event.status
})
@@ -90,10 +91,10 @@ export default {
TaskList,
CustomTaskItem,
Collaboration.configure({
provider,
document: ydoc,
}),
CollaborationCursor.configure({
provider,
provider: this.provider,
user: this.currentUser,
onUpdate: users => {
this.users = users
@@ -146,6 +147,7 @@ export default {
beforeDestroy() {
this.editor.destroy()
this.provider.destroy()
},
}
</script>

2
docs/src/demos/Examples/Drawing/index.vue
View File

@@ -34,7 +34,7 @@ export default {
content: 'paper',
}),
Collaboration.configure({
provider,
document: ydoc,
}),
Text,
Paper,

6
docs/src/demos/Extensions/Collaboration/index.vue
View File

@@ -19,12 +19,13 @@ export default {
data() {
return {
editor: null,
provider: null,
}
},
mounted() {
const ydoc = new Y.Doc()
const provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc)
this.provider = new WebrtcProvider('tiptap-collaboration-extension', ydoc)
this.editor = new Editor({
extensions: [
@@ -32,7 +33,7 @@ export default {
Paragraph,
Text,
Collaboration.configure({
provider,
document: ydoc,
}),
],
})
@@ -40,6 +41,7 @@ export default {
beforeDestroy() {
this.editor.destroy()
this.provider.destroy()
},
}
</script>

8
docs/src/demos/Extensions/CollaborationCursor/index.vue
View File

@@ -20,12 +20,13 @@ export default {
data() {
return {
editor: null,
provider: null,
}
},
mounted() {
const ydoc = new Y.Doc()
const provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc)
this.provider = new WebrtcProvider('tiptap-collaboration-cursor-extension', ydoc)
this.editor = new Editor({
extensions: [
@@ -33,10 +34,10 @@ export default {
Paragraph,
Text,
Collaboration.configure({
provider,
document: ydoc,
}),
CollaborationCursor.configure({
provider,
provider: this.provider,
user: {
name: 'Cyndi Lauper',
color: '#f783ac',
@@ -48,6 +49,7 @@ export default {
beforeDestroy() {
this.editor.destroy()
this.provider.destroy()
},
}
</script>

5
docs/src/docPages/api/extensions/collaboration-cursor.md
View File

@@ -1,4 +1,7 @@
# CollaborationCursor
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration-cursor.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration-cursor)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration-cursor.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration-cursor?minimal=true)
This extension adds information about all connected users (like their name and a specified color), their current cursor position and their text selection (if there’s one).
Open this page in multiple browser windows to test it.
@@ -39,4 +42,4 @@ yarn add @tiptap/extension-collaboration-cursor
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/CollaborationCursor" highlight="11,38-44" />
<demo name="Extensions/CollaborationCursor" highlight="11,39-45" />

9
docs/src/docPages/api/extensions/collaboration.md
View File

@@ -1,5 +1,4 @@
# Collaboration
[![Version](https://img.shields.io/npm/v/@tiptap/extension-collaboration.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-collaboration)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-collaboration.svg)](https://npmcharts.com/compare/@tiptap/extension-collaboration?minimal=true)
@@ -21,9 +20,9 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
```
## Settings
| Option | Type | Default | Description |
| -------- | -------- | ------- | ---------------------------------------------------------------------------------------------------- |
| provider | `Object` | `null` | A Y.js network connection, for example a [y-websocket](https://github.com/yjs/y-websocket) instance. |
| Option | Type | Default | Description |
| -------- | -------- | ------- | ----------------------------- |
| document | `Object` | `null` | An initialized Y.js document. |
## Commands
| Command | Parameters | Description |
@@ -47,4 +46,4 @@ yarn add @tiptap/extension-collaboration yjs y-websocket
:::warning Public
The content of this editor is shared with other users.
:::
<demo name="Extensions/Collaboration" highlight="10,26-27,34-36" />
<demo name="Extensions/Collaboration" highlight="10,27-28,35-37,44" />

27
docs/src/docPages/guide/collaborative-editing.md
View File

@@ -45,7 +45,7 @@ const editor = new Editor({
// …
// Register the document with tiptap
Collaboration.configure({
provider
document: ydoc,
}),
],
})
@@ -90,7 +90,7 @@ const editor = new Editor({
// …
// Register the document with tiptap
Collaboration.configure({
provider
document: ydoc,
}),
],
})
@@ -128,7 +128,19 @@ node ./index.js
This should output something like “Listening on ws://127.0.0.1:1234”. If you go back to your tiptap editor and hit reload, it should connect to the WebSocket server and changes should sync with all other clients. Amazing, isn’t it?
### Add cursors
### Multiple network providers
You can even combine multiple providers. That’s not needed, but could keep clients connected, even if one connection - for example the websocket server - goes down for a while. Here is an example:
```js
new WebrtcProvider('example-document', ydoc)
new WebsocketProvider('ws://127.0.0.1:1234', 'example-document', ydoc)
```
Yes, that’s all.
Keep in mind that WebRTC needs a signaling server to connect clients. This signaling server doesn’t receive the synced data, but helps to let clients find each other. You can [run your own signaling server](https://github.com/yjs/y-webrtc#signaling), if you like.
### Show other cursors
If you want to enable users to see the cursor and text selections of each other, add the [`CollaborationCursor`](/api/extensions/collaboration-cursor) extension.
```js
@@ -145,11 +157,11 @@ const editor = new Editor({
extensions: [
// …
Collaboration.configure({
provider
document: ydoc,
}),
// Register the collaboration cursor extension
CollaborationCursor.configure({
provider: this.provider,
provider: provider,
name: 'Cyndi Lauper',
color: '#f783ac',
}),
@@ -179,14 +191,15 @@ import * as Y from 'yjs'
import { IndexeddbPersistence } from 'y-indexeddb'
const ydoc = new Y.Doc()
// Store the Y document in the browser
const indexdb = new IndexeddbPersistence('example-document', ydoc)
new IndexeddbPersistence('example-document', ydoc)
const editor = new Editor({
extensions: [
// …
Collaboration.configure({
provider
document: ydoc,
}),
],
})

13
packages/extension-collaboration/src/collaboration.ts
View File

@@ -7,14 +7,17 @@ import {
} from 'y-prosemirror'
export interface CollaborationOptions {
provider: any,
/**
* An initialized Y.js document.
*/
document: any,
}
export const Collaboration = Extension.create({
name: 'collaboration',
defaultOptions: <CollaborationOptions>{
provider: null,
document: null,
},
addCommands() {
@@ -49,15 +52,11 @@ export const Collaboration = Extension.create({
addProseMirrorPlugins() {
return [
ySyncPlugin(
this.options.provider.doc.getXmlFragment('prosemirror'),
this.options.document.getXmlFragment('prosemirror'),
),
yUndoPlugin(),
]
},
onDestroy() {
this.options.provider?.destroy()
},
})
declare module '@tiptap/core' {