# Collaborative Editor block

> Tiptap Collaborative Editor With Live Cursors, Presence, Offline Merge and Comments

Real time co-editing on Tiptap and Yjs: named teammate carets and selections, a presence stack you can follow, an offline switch that queues edits and merges them with no conflicts, and comment threads that sync. For specs, docs, wikis.

- Type: Pro block
- Category: [Rich Text Editor](https://web.dev.reui.io/blocks/application/rich-text-editor.md)
- Page: https://web.dev.reui.io/blocks/application/rich-text-editor/rich-text-editor-4
- MCP: `get_block("rich-text-editor-4")`
- Built with: Alert Dialog, Avatar, Badge, Button, Button Group, Card, Checkbox, Dropdown Menu, Empty, Field, Input Group, Item, Kbd, Label, Popover, Separator, Sheet, Skeleton, Switch, Toggle, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A swappable Yjs room with scripted teammates to follow, an Online switch, comment threads to reply to or resolve and a session replay

## Agent notes

- `openDemoRoom` plays scripted teammates; give `createRoomHolder` your provider's room as a `RoomAdapter` and delete `PEER_TRACKS`
- The `ConnectionSwitch` toggle reaches `setOnline` on the demo room through `changeConnection`; map that call to your provider's disconnect and connect
- `SPEC`, `THREADS` and `PEOPLE` are the sample document, comments and teammates; `currentTime` returns a fixed demo date that stamps new comments

## When not to use

- Contract edits that stay as attributed suggestions until accepted or rejected: use [Contract Redlines](https://web.dev.reui.io/blocks/application/rich-text-editor/rich-text-editor-3.md) (`get_block("rich-text-editor-3")`)
- A single author page with slash commands, mentions and resizable tables: use [Wiki Page Editor](https://web.dev.reui.io/blocks/application/rich-text-editor/rich-text-editor-2.md) (`get_block("rich-text-editor-2")`)

## Third-party libraries

- Tiptap v3: [API reference](https://tiptap.dev/docs/editor/api/editor), [docs](https://tiptap.dev/docs/editor/getting-started/install/react), [llms.txt](https://tiptap.dev/llms.txt)
- Yjs v13: [API reference](https://docs.yjs.dev/api/y.doc), [docs](https://docs.yjs.dev/), [llms.txt](https://docs.yjs.dev/llms.txt)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/rich-text-editor-4
```

## About Rich Text Editor blocks

### When to use

- Documents written and kept inside a product: launch briefs, wiki pages, contracts, specs and plans
- Review on the text itself, through tracked suggestions to accept or reject or threaded comments
- Shared writing with live teammates, or with an AI assistant whose edits arrive for review

### When not to use

- The navigation layout around your pages, with no document editing in it: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)
- A top bar with a title, avatars and actions above a page you already have: use the [Navbar blocks](https://web.dev.reui.io/blocks/application/navbar.md)
- A strip of formatting or alignment controls alone, with no document under it: use [Button Group](https://web.dev.reui.io/components/button-group.md) (`get_component("button-group")`)

### Agent notes

- Each page.tsx wraps the root in an `h-svh` or `min-h-svh` column; inside an app shell drop it and size the root through `className`
- Every schema starts from `createRichTextExtensions` in rich-text-extensions.ts; extend that list and keep it stable, as `useEditor` compares it by identity
- Document typography is `RICH_TEXT_PROSE` in rich-text-content.tsx, built on theme tokens; restyle headings, lists, code and links there

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.