tiptap/docs/api/extensions/collaboration.md
2021-11-09 11:56:27 +01:00

90 lines
2.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
description: Collaborative text editing can be fricking complex, but it doesnt have to be that way.
icon: user-voice-line
---
# 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)
The Collaboration extension enables you to collaborate with others in a single document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
The history works totally different in a collaborative editing setup. If you undo a change, you dont want to undo changes of other users. To handle that behaviour this extension provides an own `undo` and `redo` command. Dont load the default [`History`](/api/extensions/history) extension together with the Collaboration extension to avoid conflicts.
:::pro Pro Extension
We kindly ask you to [sponsor our work](/sponsor) when using this extension in production.
:::
## Installation
```bash
npm install @tiptap/extension-collaboration yjs y-websocket
```
## Settings
### document
An initialized Y.js document.
Default: `null`
```js
Collaboration.configure({
document: new Y.Doc(),
})
```
### field
Name of a Y.js fragment, can be changed to sync multiple fields with one Y.js document.
Default: `'default'`
```js
Collaboration.configure({
document: new Y.Doc(),
field: 'title',
})
```
### fragment
A raw Y.js fragment, can be used instead of `document` and `field`.
Default: `null`
```js
Collaboration.configure({
fragment: new Y.Doc().getXmlFragment('body'),
})
```
## Commands
The `Collboration` extension comes with its own history extension. Make sure to disable the default extension, if youre working with the `StarterKit`.
### undo()
Undo the last change.
```js
editor.commands.undo()
```
### redo()
Redo the last change.
```js
editor.commands.redo()
```
## Keyboard shortcuts
| Command | Windows/Linux | macOS |
| ------- | ----------------------------------------------------- | --------------------------------------------- |
| undo() | `Control` `Z` | `Cmd` `Z` |
| redo() | `Shift`&nbsp;`Control`&nbsp;`Z`<br>`Control`&nbsp;`Y` | `Shift`&nbsp;`Cmd`&nbsp;`Z`<br>`Cmd`&nbsp;`Y` |
## Source code
[packages/extension-collaboration/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/)
## Usage
:::warning Public
The content of this editor is shared with other users.
:::
https://embed.tiptap.dev/preview/Extensions/Collaboration?hideSource
https://embed.tiptap.dev/preview/Extensions/Collaboration