grapesjs/docs/api/keymaps.md

Keymaps

You can customize the initial state of the module from the editor initialization

const editor = grapesjs.init({
 keymaps: {
    // Object of keymaps
   defaults: {
     'your-namespace:keymap-name' {
       keys: '⌘+z, ctrl+z',
       handler: 'some-command-id'
     },
     ...
   }
 }
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.

const keymaps = editor.Keymaps;

Available Events

• keymap:add New keymap added. The new keymap object is passed as an argument to the callback.

editor.on('keymap:add', (keymap) => { ... });

• keymap:remove Keymap removed. The removed keymap object is passed as an argument to the callback.

editor.on('keymap:remove', (keymap) => { ... });

• keymap:emit Some keymap emitted. The keymapId, shortcutUsed, and Event are passed as arguments to the callback.

editor.on('keymap:emit', (keymapId, shortcutUsed, event) => { ... });

Methods

• getConfig
• add
• get
• getAll
• remove
• removeAll

getConfig

Get configuration object

Returns Object

add

Add new keymap

Parameters

• id string Keymap id

• keys string Keymap keys, eg. ctrl+a, ⌘+z, ctrl+z

• handler (Function | string) Keymap handler, might be a function

• opts Object Options (optional, default {})

  • opts.force Boolean Force the handler to be executed. (optional, default false)
  • opts.prevent Boolean Prevent default of the original triggered event. (optional, default false)

Examples

// 'ns' is just a custom namespace
keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
 console.log('do stuff');
});
// or
keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', {
 // Prevent the default browser action
 prevent: true,
});

// listen to events
editor.on('keymap:emit', (id, shortcut, event) => {
 // ...
})

Returns Object Added keymap

get

Get the keymap by id

Parameters

• id string Keymap id

Examples

keymaps.get('ns:my-keymap');
// -> {keys, handler};

Returns Object Keymap object

getAll

Get all keymaps

Examples

keymaps.getAll();
// -> {id1: {}, id2: {}};

Returns Object

remove

Remove the keymap by id

Parameters

• id string Keymap id

Examples

keymaps.remove('ns:my-keymap');
// -> {keys, handler};

Returns Object Removed keymap

removeAll

Remove all binded keymaps

Returns this