Toggle multiline comments in editor with cmd-/

[outoftime]

Submitter: Peter Jablonski
Love the Code Mirror update!

It looks like the multiline comment feature is not enabled (cmd + /)

[thayerve]

Hey @outoftime, I've been working on a solution to this with @paulproteus, using CodeMirror's blockComment function. If I submit a pull request for the feature, would you want to enable it? If not, no worries, I'm learning a lot in the process anyway. :)

[outoftime]

Sure!

[thayerve]

Hey @outofotime!

We (@paulproteus and I) worked on this today, and came up with this implementation:

diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index 10c173e..878e37a 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -13,6 +13,7 @@ import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/comment/comment';
 
 import {EditorLocation} from '../records';
 import bowser from '../services/bowser';
@@ -121,6 +122,22 @@ export default function Editor({
     editor.setOption('extraKeys', {
       [`${modifier}-I`]: onAutoFormat,
       [`${modifier}-S`]: onSave,
+      [`${modifier}-/`]: () => {
+        // Get the current selection, defined by these two getCursor() calls
+        const head = editor.doc.getCursor('head');
+        const anchor = editor.doc.getCursor('anchor');
+        // Convert them into two items in an array so we can sort them, so that blockComment() can
+        // go from the start to the end
+        const positions = [
+          [head.line, head.ch],
+          [anchor.line, anchor.ch],
+        ];
+        positions.sort();
+        editor.blockComment(
+          {line: positions[0][0], ch: positions[0][1]},
+          {line: positions[1][0], ch: positions[1][1]},
+        );
+      },
     });
   }, [onAutoFormat, onSave]);
 

This would directly configure CodeMirror to respond to the Ctrl-/ (or Cmd-/) event, rather than pass it through Redux.

The main reason we went that route was because we weren't sure if we could call editor.blockComment() from within Redux. What we seemed to find was that the onAutoFormat function would return new text which contained the new modified autoformatted text, whereas our code relies on CodeMirror to modify the contents of the editor itself.

The main question -- is that OK to ask CodeMirror to modify the contents of the editor by itself?

If not, then we'll need a way to get the current selection in a Redux context, and also to figure out what to do with it (can we call blockComment() directly? is the editor available in a Redux context?).

Looking for advice, and also, if this is more trouble than it's worth, we can switch to a different issue. Wanted to do this to learn more. :)

One thing we noticed while leaving this comment is that we could easily write a function that takes the editor object and does this work, rather than doing it imperatively right there.

[adrianfalleiro]

@thayerve I think you can also use the toggleComment method which is added by importing codemirror/addon/comment/comment.

import 'codemirror/addon/comment/comment';
...
useEffect(() => {
  const editor = editorRef.current;
  const modifier = bowser.isOS('macOS') ? 'Cmd' : 'Ctrl';
  editor.setOption('extraKeys', {
    [`${modifier}-I`]: onAutoFormat,
    [`${modifier}-S`]: onSave,
    [`${modifier}-/`]: cm => cm.toggleComment({indent: true}),
  });
}, [onAutoFormat, onSave]);

[paulproteus]

@outoftime since #2386 is merged, I propose you mark this issue as closed since I think it's now fixed!