Issue #3286πŸ’¬ AnsweredOpened February 23, 2021by abulka0 reactions

Codemirror custom keys and addons

Quick answerby abulka

I finally got the Grapesjs bundled commentRange to work - it must be invoked directly cm.commentRange not via cm.execCommand. Furthermore, it takes parameters. Thus I was able to get some commenting working, as long as you select the area you want commented: Any chance Grapesjs could expose the CodeMirror function? (n...

Read full answer below ↓

Question

Is there a way of adding shortcut keys and add-ons for the built in Codemirror editor? I especially want a commenting hot key.

There are various plugins that use the Grapesjs editor, incl. https://github.com/artf/grapesjs/issues/324#issuecomment-330571539 and the custom html code plugins https://github.com/Ju99ernaut/grapesjs-script-editor and https://github.com/ryandeba/grapesjs-html-block which could all benefit from this.

Whilst there is a way to pass in the normal Codemirror customisation options, invoking addons doesn't seem to work e.g.

var pfx = editor.getConfig().stylePrefix;
var modal = editor.Modal;
var cmdm = editor.Commands;
var codeViewer = editor.CodeManager.getViewer('CodeMirror').clone();
var pnm = editor.Panels;
var container = document.createElement('div');
var btnEdit = document.createElement('button');

codeViewer.set({
    codeName: 'htmlmixed',
    readOnly: 0,
    theme: 'hopscotch',
    autoBeautify: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    lineWrapping: true,
    styleActiveLine: true,
    smartIndent: true,
    indentWithTabs: true,

    toggleComment: true, // needed?
    commentRange: true, // needed?
    extraKeys: {
      'Cmd-1': function (cm) { console.log('hi', cm); cm.execCommand('toggleComment') },  // FAILS
      'Cmd-2': function (cm) { cm.execCommand('toggleComment') },  // FAILS
      'Cmd-3': function (cm) { cm.execCommand('commentRange') },  // FAILS
      'Cmd-4': function (cm) { cm.execCommand('transposeChars') }, // WORKS
      'Ctrl-X': function (cm) { cm.execCommand('deleteLine') }, // WORKS
    },
});

The shortcut keys fire ok, but the cm.execCommand() fails to find the relevant addon command, even though I've imported it in the html e.g. <script src="node_modules/codemirror/addon/comment/comment.js"></script>. It's as if the add-on commands aren't properly registered?

If, as @artf said a while ago

yeah, CodeMirror is a merged dependency for now.

and that is the reason we can't invoke add-ons, then at least we should be able to invoke the commenting command that seems to be built into https://github.com/artf/codemirror-formatting/blob/master/formatting.js via cm.execCommand('commentRange') - but even that doesn't work for me?

Answers (3)

abulkaβ€’ February 23, 2021

I finally got the Grapesjs bundled commentRange to work - it must be invoked directly cm.commentRange not via cm.execCommand. Furthermore, it takes parameters. Thus I was able to get some commenting working, as long as you select the area you want commented:

'Cmd-1': function (cm) { cm.commentRange(true, cm.getCursor(true), cm.getCursor(false)) },  // comment
'Cmd-2': function (cm) { cm.commentRange(false, cm.getCursor(true), cm.getCursor(false)) },  // uncomment

Any chance Grapesjs could expose the CodeMirror function? (not the instance) - because it is needed for lots of things, including calls like CodeMirror.Pos and CodeMirror.cmpPos etc.

artfβ€’ March 3, 2021

Yeah, I think it's not a problem exposing it in CodeMirrorEditor.js

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @abulka.

Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date.

For you right now:

  1. Run npm audit fix to see available patches
  2. Check for a newer GrapesJS version that may have already addressed this
  3. If available, test the latest stable release before upgrading
  4. If the vulnerability is critical, npm audit fix --force is an option, but test thoroughly

Understanding the risk:

  • Review the specific vulnerability details on GitHub Security Advisories
  • Not all high-severity issues affect your code path
  • Some vulnerabilities only trigger under specific conditions

Staying current:

  • Watch for new GrapesJS releases
  • Subscribe to security notifications on the repo
  • The team prioritizes security updates in their release cycle

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.