Tiptap Docs

Cursor and selection

Cursor and selection extensions show where the cursor, the selection, and dragged content are, and let the cursor reach places it otherwise can't.

Dropcursor
Shows where dragged content will be dropped.
Open source
Focus
Adds a class to the node that has the cursor.
Open source
Gapcursor
Lets the cursor sit in places where no text can go, such as next to a table.
Open source
Selection
Preserve the selection when the editor is blurred.
Open source

When you use them

  • Dragging content. Dropcursor shows a cursor where dragged content will be dropped.
  • Reaching gaps. Gapcursor lets the cursor stop where no regular selection is possible, for example after a table at the end of a document.
  • Showing the current node. Focus adds a class to the node that has the cursor, has-focus by default.
  • Keeping the selection visible. Selection adds a class to the selection while the editor is blurred, selection by default.

How they work

  • They are extensions. They don't add nodes or marks to the document; they change how the cursor and the selection behave and look. Extensions
  • Two come with the StarterKit. Dropcursor and Gapcursor are part of the StarterKit; Focus and Selection you add yourself.
  • You style them. Focus and Selection only add a CSS class, and the styling is up to you. Dropcursor needs CSS too, and has settings for its color, width, and class.
PreviouslyFloating menu