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

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