tiptap/docs/api/extensions/collaboration-cursor.md

2.0 KiB
Raw Blame History

description icon
See other users cursors and their name while they type. account-pin-circle-line

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

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

:::warning Public The content of this editor is shared with other users. ::: https://embed.tiptap.dev/preview/Extensions/CollaborationCursor?hideSource https://embed.tiptap.dev/preview/Extensions/CollaborationCursor