GrapesJS script editor commenting

cannot get commenting shortcut keys to work

by Andy Bulka

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<script src="https://unpkg.com/grapesjs-script-editor"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.3/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.3/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.3/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.3/addon/comment/comment.js"></script>
<div id="gjs">
  <p>
    How to get script-editor commenting to work?...
  </p>
  <p>
    Edit the script of any component on this page.
  </p>
  <p>
    Then try the hotkeys CMD-1 CMD-2 CMD-/ which don't work. Open the jsfiddle console to see diagnostics.
  </p>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic', 'grapesjs-script-editor'],
  pluginsOpts: {
  	'grapesjs-script-editor': {
    	onRun: () => console.log('valid syntax!!'),
      codeViewOptions: {
        toggleComment: true,
        commentRange: true,
        extraKeys: {
          'Cmd-1': function (cm) { console.log('hi'); cm.execCommand('toggleComment') },
          'Cmd-2': function (cm) { cm.execCommand('toggleComment') }, // technique 1
          'Cmd-/': function (cm) { cm.execCommand('commentRange') },
          'Cmd-3': function (cm) { cm.execCommand('transposeChars') }, // WORKS
          'Ctrl-X': function (cm) { cm.execCommand('deleteLine') }, // WORKS
        }
      },

  	}
  }
});

editor.on('component:add', (model) => {
	console.log('Add');
});