Improve Fluent source editor with syntax highlighting, error annotations

[bugzilla-to-github]

This issue was created automatically by a script.

Bug 1581911

Bug Reporter: @mathjazz
CC: @stasm, v+mozbug@g.nevcal.com

As part of fixing bug 1563457 we replaced Ace Editor with <textarea> element in order to support all scripts properly.

While that fixed the bug, it also removed syntax highlighting and error annotations from Fluent source editor.

We should find a solution similar to Ace Editor, that will support:

1. All scripts.
2. Fluent syntax highlighting.
3. Fluent error annotations.
4. (If possible) browser's spell- and grammar checkers (bug 1556355).

[bugzilla-to-github]

Comment Author: @mathjazz

A potential candidate with support for varying character widths is https://codemirror.net/.

[bugzilla-to-github]

Comment Author: Florencia Di Ciocco, NI to vbalducci <florencia.diciocco@softvision.com>

*** Bug #1586556 has been marked as a duplicate of this bug. ***

[bugzilla-to-github]

Comment Author: @stasm

Another candidate to consider might be Monaco, which powers VS Code: https://microsoft.github.io/monaco-editor/index.html

[eemeli]

Not actually completely solved yet.

[mathjazz]

To make it clear, the remaining bit are inline Fluent error annotations.

If possible, we should also spell-check content only (and ignore syntax).