prosemirror-keymap

What is prosemirror-keymap?

The prosemirror-keymap package is a plugin for ProseMirror, a toolkit for building rich-text editors. This package allows you to define and manage keyboard shortcuts for various editor commands, making it easier to create a more intuitive and efficient user experience.

What are prosemirror-keymap's main functionalities?

Defining Keymaps

This code demonstrates how to define a basic keymap using the prosemirror-keymap package. It imports the necessary modules, creates an editor state with a keymap plugin, and initializes an editor view with that state.

const { keymap } = require('prosemirror-keymap');
const { baseKeymap } = require('prosemirror-commands');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
const { schema } = require('prosemirror-schema-basic');

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

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

Custom Key Bindings

This code sample shows how to create custom key bindings using the prosemirror-keymap package. It binds 'Mod-b' to toggle bold and 'Mod-i' to toggle italic formatting in the editor.

const { keymap } = require('prosemirror-keymap');
const { toggleMark } = require('prosemirror-commands');
const { schema } = require('prosemirror-schema-basic');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');

const customKeymap = keymap({
  'Mod-b': toggleMark(schema.marks.strong),
  'Mod-i': toggleMark(schema.marks.em)
});

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

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

Combining Keymaps

This example demonstrates how to combine the base keymap with a custom keymap. The custom keymap adds a new key binding for toggling bold formatting, while still retaining all the default key bindings from the base keymap.

const { keymap } = require('prosemirror-keymap');
const { baseKeymap } = require('prosemirror-commands');
const { schema } = require('prosemirror-schema-basic');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');

const customKeymap = keymap({
  'Mod-b': toggleMark(schema.marks.strong)
});

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

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

Other packages similar to prosemirror-keymap

draft-js

Draft.js is a framework for building rich text editors in React. It provides a set of tools for managing editor state, handling keyboard events, and rendering content. Unlike prosemirror-keymap, which is a plugin for ProseMirror, Draft.js is a complete framework for building editors, including keymap management.

slate

Slate is another framework for building rich text editors in React. It offers a highly customizable architecture, allowing developers to define their own schema, commands, and key bindings. Similar to prosemirror-keymap, Slate provides tools for managing keyboard shortcuts, but it is part of a larger framework for building editors.

tiptap

Tiptap is a headless editor framework built on top of ProseMirror. It provides a more user-friendly API for managing editor state, commands, and key bindings. Tiptap includes keymap management as part of its core functionality, similar to prosemirror-keymap, but offers additional features and a more streamlined development experience.

README

prosemirror-keymap

[ 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 module implements a plugin for conveniently defining key bindings.

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.2.0 (2022-05-30)

New features

Include TypeScript type declarations.