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.
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.