Codemirror custom keys and addons
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)
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
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:
- Run
npm audit fixto see available patches - Check for a newer GrapesJS version that may have already addressed this
- If available, test the latest stable release before upgrading
- If the vulnerability is critical,
npm audit fix --forceis 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.
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 #3727
Issue on Style Import
Hi @artf, Describe the bug detailed While creating a new template using GrapesJS, I came across a scenario that, when we try to import CSS...
Issue #4166
Open style manager - class can be added by pressing the ENTER key
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v98 Reproducible demo link https://...
Issue #5154
TS2416: Property '_up' in type 'PropertyStack' is not assignable to the same property in base type 'PropertyComposite<PropertyStackProps>'
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? ---- Reproducible demo link https://codesa...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins β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.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big news from DevFuture β we just repriced everything
Hey GrapesJS community π we just repriced all prices on plugins.
Tutorial
Superβ―Tooltip for GrapesJS β Versionβ―0.1.5 Released π
Weβre excited to announce the vβ―0.1.5 update of Superβ―Tooltip, our floatingβmenu and tooltip plugin for GrapesJS
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.