FEAT: Codemirror custom keys and addons

[abulka]

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?

[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:

'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]

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