CollaborationCursor

Version Downloads

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.

Installation

npm install @tiptap/extension-collaboration-cursor

This extension requires the Collaboration extension.

Settings

provider

A Y.js network provider, for example a y-websocket instance.

Default: null

user

Attributes of the current user, assumes to have a name and a color, but can be used with any attribute. The values are synced with all other connected clients.

Default: { user: null, color: null }

render

A render function for the cursor, look at the extension source code for an example.

selectionRender

A render function for the selection, look at the extension source code for an example.

Commands

updateUser()

Pass an object with updated attributes of the current user. It expects a name and a color, but you can add additional fields, too.

editor.commands.updateUser({
  name: 'John Doe',
  color: '#000000',
  avatar: 'https://unavatar.io/github/ueberdosis',
})

Source code

packages/extension-collaboration-cursor/

Usage

Public

The content of this editor is shared with other users.

Collaboration

Fasten your seatbelts! Your hosted solution for collaborative editing is ready for you.

Sign up Tiptap Pro
Supercharge your app with collaborative editing:
  • Real-time everything
  • Conflict-free & Offline-first
  • Managed and hosted by us