2021-10-14 06:13:50 +08:00
---
2021-10-16 04:48:57 +08:00
description: Collaborative text editing can be fricking complex, but it doesn’ t have to be that way.
2021-10-15 03:20:21 +08:00
icon: user-voice-line
2021-10-14 06:13:50 +08:00
---
2020-08-20 21:33:16 +08:00
# Collaboration
2020-12-04 00:23:54 +08:00
[![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.
2020-10-28 23:49:44 +08:00
2020-12-03 23:52:54 +08:00
The history works totally different in a collaborative editing setup. If you undo a change, you don’ t want to undo changes of other users. To handle that behaviour this extension provides an own `undo` and `redo` command. Don’ t load the default [`History` ](/api/extensions/history ) extension together with the Collaboration extension to avoid conflicts.
2020-09-27 02:58:58 +08:00
## Installation
```bash
2023-02-07 17:20:37 +08:00
npm install @tiptap/extension -collaboration yjs y-websocket y-prosemirror
2020-09-27 02:58:58 +08:00
```
## Settings
2021-10-02 07:20:09 +08:00
### 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'),
})
```
2020-09-27 02:58:58 +08:00
## Commands
2021-10-02 07:20:09 +08:00
The `Collboration` extension comes with its own history extension. Make sure to disable the default extension, if you’ re working with the `StarterKit` .
### undo()
Undo the last change.
```js
editor.commands.undo()
```
### redo()
Redo the last change.
```js
editor.commands.redo()
```
2020-09-27 02:58:58 +08:00
## Keyboard shortcuts
2021-10-02 05:13:49 +08:00
| Command | Windows/Linux | macOS |
| ------- | ----------------------------------------------------- | --------------------------------------------- |
| undo() | `Control` `Z` | `Cmd` `Z` |
| redo() | `Shift` `Control` `Z`< br > `Control` `Y` | `Shift` `Cmd` `Z`< br > `Cmd` `Y` |
2020-09-27 02:58:58 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-collaboration/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/ )
2020-09-27 02:58:58 +08:00
## Usage
2020-09-27 03:04:33 +08:00
:::warning Public
The content of this editor is shared with other users.
:::
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Extensions/Collaboration?hideSource
https://embed.tiptap.dev/preview/Extensions/Collaboration