Swap Ace for CodeMirror

[Felienne]

We keep running into issues with Arabic text in the editor, with @reedspool has confirmed are inherently unsolvable. So we must start thinking about replacing Ace. To help this process (that will be a very large task!) I wil try to document the ways in which we use Ace now.

Text editor features
There are some features related to the editor being an text box, that just require a bit of rework of the typescript; like the fact that it receives the code when you click an example box, or that the auto-saver code listens to the code editor to see if things have changed.

Code editor features (syntax highlighting)
There there are features that are more entangled with the editor being a code editor, like the syntax highlighter. We will have to figure out how CodeMirror does highlighting and what we can reuse from the generator that we have now. There is Python code that generates the highlighter (see: https://github.com/hedyorg/hedy/tree/main/highlighting)

Hedy learning features
We have a few useful features to add learning:

1. Highlighting code errors:

2. Highlighting lines in the debugger:

3. The option to comment a line with a click in the gutter:

This needs to be shown and also processed (skiping these lines when sending them to the transpiler)

For 1 and 2 I am sure CodeMirror will also have options but it will be a bit of work to find out how to connect them all. For 3 it might be a bigger puzzle.

Explanation blocks
Finally the code blocks in the explanations are also Ace (they use the syntax highlighter):

I would say these can just remain in Ace for now since they are not editable anyway. Ultimately we will have to swap them out too because if we are adding new language features we won't be updating 2 highlighters, but first things first.

[Felienne]

Furthermore there is some css and ts code to aid the Arabic text but that can all be removed (we would need to hunt down the PRs with the fixes to find the code but that too can be skipped for now I would say).

[Felienne]

And then some "assorti" things that intertwine with the editor, which you might run into in the code:

• Some achievements use the editor
• The tutorial fills in text in the editor

[Felienne]

We are working on this now!