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)
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.
Yeah, I think it's not a problem exposing it in CodeMirrorEditor.js
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3404
Style Manager Issue.
Hi @artf I want to hide and show style properties for specific component. After referencing this issue https://github.com/artf/grapesjs/iss...
Issue #3119
[QUESTION] How to create custom block made of grapesjs components?
Hi, i want to have custom blocks made of grapesjs components. I found solution how to add components: https://github.com/artf/grapesjs/issu...
Issue #1341
[Question] How to work with Custom Components
Hello, I have some questions and issues about and with the grapes editorProblem 1 In a component, which class is there extended? Is it real...
Issue #2972
FEAT: Disable scripts on canvas
Hello, first of all thanks for a great tool. On my project i hit the problem where I need to disable scripts inside the editor. I found 2 s...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.