2.5 KiB
| description | icon |
|---|---|
| See other user’s cursors and their name while they type. | account-pin-circle-line |
CollaborationCursor
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.
:::pro Pro Extension We kindly ask you to sponsor our work when using this extension in production. :::
Installation
npm install @tiptap/extension-collaboration-cursor
:::warning Are you using Yarn, pNPM, npm 6 or less? Unfortunately your package manager does not install peer dependencies automatically and you have to install them by your own. Please see here which packages are needed and how to install them. :::
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