CollaborationCaret extension

This extension adds information about all connected users (like their name and a specified color), their current caret 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-caret

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 caret, 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.

Styling

This extension does not include default styles. Without the following CSS, carets will render as unstyled inline elements.

Add the following styles to your project:

/* Give a remote user a caret */
.tiptap .collaboration-carets__caret {
  border-left: 1px solid #0d0d0d;
  border-right: 1px solid #0d0d0d;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

/* Render the username above the caret */
.tiptap .collaboration-carets__label {
  border-radius: 3px 3px 3px 0;
  color: #0d0d0d;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}

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-caret/