Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
prosemirror-keymap
Advanced tools
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.
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
});
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 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 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.
[ 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.
FAQs
Keymap plugin for ProseMirror
The npm package prosemirror-keymap receives a total of 1,411,674 weekly downloads. As such, prosemirror-keymap popularity was classified as popular.
We found that prosemirror-keymap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.