@tiptap/extension-gapcursor

What is @tiptap/extension-gapcursor?

@tiptap/extension-gapcursor is an extension for the Tiptap editor that provides a visual cursor for empty spaces (gaps) in the document. This is particularly useful for navigating and editing documents with complex structures, such as nested nodes or inline nodes, where traditional cursors might not be sufficient.

What are @tiptap/extension-gapcursor's main functionalities?

Gap Cursor Initialization

This code demonstrates how to initialize the Tiptap editor with the GapCursor extension. By including the GapCursor extension, the editor will be able to display and handle gap cursors in the document.

import { GapCursor } from '@tiptap/extension-gapcursor';
import { Editor } from '@tiptap/core';

const editor = new Editor({
  extensions: [
    GapCursor,
  ],
});

Custom Styling for Gap Cursor

This code shows how to configure the GapCursor extension with custom styling. By providing a className, you can apply custom CSS to style the gap cursor as needed.

import { GapCursor } from '@tiptap/extension-gapcursor';
import { Editor } from '@tiptap/core';
import './styles.css';

const editor = new Editor({
  extensions: [
    GapCursor.configure({
      className: 'custom-gapcursor',
    }),
  ],
});

Other packages similar to @tiptap/extension-gapcursor

prosemirror-gapcursor

prosemirror-gapcursor is a similar package for the ProseMirror editor. It provides a gap cursor for navigating and editing empty spaces in the document. While @tiptap/extension-gapcursor is specifically designed for the Tiptap editor, prosemirror-gapcursor serves the same purpose for ProseMirror, which is the underlying editor framework that Tiptap is built upon.

slate-react

slate-react is a package for the Slate editor that provides a React interface for building rich text editors. While it does not have a direct equivalent to the gap cursor, it offers similar functionality through its flexible schema and custom rendering capabilities, allowing developers to create custom cursors and navigation behaviors.

README

@tiptap/extension-gapcursor

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open-sourced software licensed under the MIT license.