Issue #3286Opened February 23, 2021by abulka0 reactions

FEAT: Codemirror custom keys and addons

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 (2)

abulkaFebruary 23, 20210 reactions

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.

artfMarch 3, 20210 reactions

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

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.