Add a WYSIWYG-esque editor for instructions

[jwang1919]

There are good pseudo-WYSIWYG editors (e.g. **bold text** is displayed bold etc.) for Markdown out there. A couple of good looking options are SimpleMDE and TOAST UI Editor, although both use CodeMirror rather than ACE (we use the latter for the main editors so it would be nice to share the dependency, although this is not a deal breaker).

Note that one thing we don’t want to do is load a Markdown editor library synchronously as part of the initial pageload—I think we will want to load it async and only if/when editing mode is activated. This might be a little tricky, especially before React releases support for async components, but I’m happy to share some ideas.

[meg2208]

@outoftime I'm a ScriptEd volunteer browsing some issues for tomorrow's hack day. I notice that I am already able to edit instructions using markdown, so was wondering how this is different?

[outoftime]

@meg2208 nice, love to see the advanced reconnaissance! Right now the instructions editing capability just uses a plain <textarea> for Markdown input—this certainly works fine, but it might be a bit more user-friendly to use a purpose-built Markdown editor that offers pseudo-WYSIWYG (e.g. showing headers big, bold text bold, etc.) and perhaps some formatting buttons. A couple possible options: SimpleMDE and TOAST UI Editor both look directionally good. Unfortunately both use CodeMirror rather than ACE as the underlying editor library (side note: should Popcode switch to CodeMirror for the main code editors? I’ve never loved ACE) but this isn’t the end of the world as long as we’re careful about lazy async loading of those dependencies.

[meg2208]

thanks for the explanation! I get it now. Seems like this could be a good thing to work on tonight. I think it shouldn't be a problem to async load those dependencies, but I could be missing something.

Also, re CodeMirror vs Ace I'm still reading up on that, but this guy seems to like Ace better and it seems to be slightly more battle tested (probably mostly cuz it has been around longer). Perhaps this might be fixing something that aint broke, but I could be convinced.

[outoftime]

@meg2208 the only complication with async loading is that the editor library will be a dependency of an actual React component, which isn’t something we have done before, but I’m sure there are good libraries out there to deal with the issue (and I believe native support is coming to React).

ACE is great in a lot of ways, but there are a couple reasons I’ve long thought switching to something else might be good:

1. ACE has a really big footprint in the bundle; I am guessing most of the ACE code we load isn’t actually used in Popcode code paths.
2. The ACE codebase is organized around a bespoke module system and isn’t compatible with ES6 or CommonJS modules out of the box. Brace of course at least makes it minimally compatible with module loaders, but it’s still a bit nuts to organize a large project around nonstandard modules in 2018. I suspect this is also at least to some extent the culprit for the previous issue.
3. ACE pretty routinely throws inscrutable exceptions in production (not clear if there is any user-facing effect)

That said any switch to another editor (and we should probably at least look at CodeFlask, Monaco, etc. as well) is definitely in the realm of conjecture/exploration at the moment.

[meg2208]

I'm working on a PR for this using SimpleMDE (via react plugin: since we are using https://github.com/RIP21/react-simplemde-editor). Not sure exactly when it will be finished because this is my first forray into this project, but it's in progress and shouldn't be more than a couple weeks, if that. I can open the PR early if I have questions.