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

Issue

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.

Solution

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:

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

Answered By - Jacob Hornbeck

Answer Checked By - Robin (PHPFixing Admin)