How to insert text into an Ace Editor instance as a comment

Question

I am building a website where I want to allow people to code in almost any language that the Ace editor supports. Right now I have it redirect if they try to load a language that either isn't supported by Ace, or that I didn't list in my supported languages. I only have a few languages that I allow to run (because I haven't got others to work or don't know how to), and for all those other languages that aren't run-supported, I want to load the Ace editor with a note saying that the language they loaded isn't supported for running, but I want it to be a comment in that language.

I tried inserting the text using editor.setValue([message], -1). Then set the focus on the editor using editor.focus(). Then I select all the text with editor.selectAll(). And then use the editor.toggleCommentLines() to make it a comment. For some reason this doesn't work, and I am not sure why.

I know that I could just look up how to write comment in each of the languages that I am allowing, and then convert the message into a comment before inserting it into the editor, but I want an easier way if possible.

Is there an easier way to do it? Or should I just do what I said that I could?

Since I answered my own question, I want to ask another to see if anyone has the answer for this:
When in the Ace editor you can press CTRL+/ to toggle line comments. But if you press CTRL+SHIFT+/ it will toggle multiline comments. I don't see a function for this in the Ace editor documentation but because it works with a keyboard shortcut, there must be a way to do it programmatically, right?
If someone could figure this out, that would be great!

a user found it! See his comment to see the answer to this part.

there is editor.toggleBlockComment method github.com/ajaxorg/ace/blob/master/lib/ace/commands/… which can be found from commands — a user
Awesome, thank you! I wonder why they do not include that in the documentation for the editor methods... — Jacob Hornbeck

Jacob Hornbeck Jacob Hornbeck · Accepted Answer · 2022-06-04T18:39:45

I was trying a few more things, and one of them was doing a setTimeout on the editor.toggleCommentLines(), and that worked. The timeout worked best if I used 150ms or higher (I started with 2000 just to see if it worked at all, and then slowly moved down).

So the following code works to automatically insert a message and comment it out:

const editor = ace.edit([element]);
      editor.setValue([message], 0); // You can also leave the second parameter blank, 0 is the default which automatically selects all.
setTimeout(() => {
    editor.toggleCommentLines();
}, 150); // 150ms or more works best

You may also notice that this method clears out 2 methods that I was previously using. There are two reasons for this:

When using 0 instead of -1 for the second parameter of editor.setValue() it selects all the text.
Because we are using the editor variable, the editor doesn't need to be in "focus".

How to insert text into an Ace Editor instance as a comment

1 Answers