CollaborationCursor extension

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).

It requires a collaborative Editor, so make sure to check out the Tiptap Collaboration Docs for a fully hosted or on-premises collaboration server solution.

Open this page in multiple browser windows to test it.

Install

npm install @tiptap/extension-collaboration-cursor

This extension requires the Collaboration extension.

Settings

provider

A Y.js network provider, for example a Tiptap Collaboration 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/