prosemirror-gapcursor

What is prosemirror-gapcursor?

The prosemirror-gapcursor package provides a way to handle cursor behavior in ProseMirror editors when the cursor is positioned in places where a regular text cursor would not normally be able to go, such as between block nodes.

What are prosemirror-gapcursor's main functionalities?

Gap Cursor Plugin

This feature provides a plugin that can be added to a ProseMirror editor to enable gap cursor functionality. The code sample demonstrates how to create an editor state with the gap cursor plugin and initialize an editor view with that state.

const { gapCursor } = require('prosemirror-gapcursor');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
const { schema } = require('prosemirror-schema-basic');

const state = EditorState.create({
  schema,
  plugins: [gapCursor()]
});

const view = new EditorView(document.querySelector('#editor'), {
  state
});

Custom Gap Cursor Behavior

This feature allows customization of the gap cursor behavior. The code sample shows how to create a custom gap cursor plugin with a specific class name and an event handler for when the gap cursor is entered.

const { gapCursor } = require('prosemirror-gapcursor');
const { Plugin } = require('prosemirror-state');

const customGapCursor = gapCursor({
  className: 'my-gap-cursor',
  onGapCursorEnter: (state, dispatch) => {
    console.log('Gap cursor entered');
  }
});

const state = EditorState.create({
  schema,
  plugins: [customGapCursor]
});

Other packages similar to prosemirror-gapcursor

prosemirror-tables

The prosemirror-tables package provides table-related functionality for ProseMirror editors, including table creation, editing, and cursor behavior within tables. While it focuses on tables rather than general gap cursor behavior, it offers similar cursor management features within the context of tables.

prosemirror-schema-list

The prosemirror-schema-list package provides schema and commands for working with lists in ProseMirror editors. It includes functionality for handling cursor behavior within lists, which can be seen as somewhat similar to the gap cursor functionality provided by prosemirror-gapcursor.

README

prosemirror-gapcursor

[ WEBSITE | ISSUES | FORUM | GITTER | CHANGELOG ]

This is a core module of ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This plugin implements a block-level cursor that can be used to focus places that don't allow regular selection (such as positions that have a leaf block node, table, or the end of the document both before and after them). Make sure you load style/gapcursor.css (or define your own styling for the cursor).

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

1.0.0 (2017-10-13)

New features

Valid gap cursor positions are not determined in a way that allows them inside nested nodes. By default, any position where a textblock can be inserted is valid gap cursor position.

Nodes can override whether they allow gap cursors with the allowGapCursor property in their spec.