Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

prosemirror-keymap

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

prosemirror-keymap

Keymap plugin for ProseMirror

  • 1.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5M
decreased by-0.84%
Maintainers
1
Weekly downloads
 
Created

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

FAQs

Package last updated on 17 May 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc