ProseMirror Better Backspace Plugin

A ProseMirror plugin that provides enhanced backspace behavior for list items and empty paragraphs.

• The blog post
• The npm package

Features

• List Item Lifting: When you backspace on an empty list item, it gets lifted out of the list structure
• Paragraph Merging: Empty paragraphs are merged with previous text containers when backspacing
• Smart Cursor Positioning: Maintains proper cursor positioning after operations
• Schema Agnostic: Works with any ProseMirror schema that includes list items and paragraphs

Installation

bun install prosemirror-better-backspace

Usage

import { createBackspacePlugin } from 'prosemirror-better-backspace';
import { EditorState } from 'prosemirror-state';
import { Schema } from 'prosemirror-model';

// Create your schema (example with list support)
const schema = new Schema({
  nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
  marks: schema.spec.marks
});

// Create editor state with the plugin
const state = EditorState.create({
  doc: schema.node('doc', null, [
    schema.node('paragraph', null, [schema.text('Hello world')])
  ]),
  plugins: [
    // ... your other plugins
    createBackspacePlugin(schema)
  ]
});

How it Works

List Item Behavior

When you have a list item that becomes empty and you press backspace:

1. The plugin detects the empty list item
2. It lifts the list item out of the list structure using liftListItem
3. The list item becomes a regular paragraph

Empty Paragraph Behavior

When you have an empty paragraph and press backspace:

1. The plugin finds the nearest previous text container
2. It merges the empty paragraph with the previous content
3. The cursor is positioned at the end of the merged content

API

createBackspacePlugin(schema: Schema): Plugin

Creates a ProseMirror plugin that handles backspace behavior.

Parameters:

• schema: The ProseMirror schema to use for node type detection

Returns:

• A ProseMirror plugin that can be added to your editor state

Example

Check out the example app to see the plugin in action. You can run it with:

bun run example:dev

Development

# Install dependencies
bun install

# Build the package
bun run build

# Run the example app
bun run example:dev

License

MIT