Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a WYSIWYG-esque editor for instructions #1394

Open
jwang1919 opened this issue Mar 24, 2018 · 5 comments · May be fixed by #1426
Open

Add a WYSIWYG-esque editor for instructions #1394

jwang1919 opened this issue Mar 24, 2018 · 5 comments · May be fixed by #1426

Comments

@jwang1919
Copy link
Contributor

jwang1919 commented Mar 24, 2018

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.

@outoftime outoftime changed the title Editable Instructions: Add a WYSIWYG Editor Add a WYSIWYG-esque editor for instructions Mar 29, 2018
@outoftime outoftime added this to the Spring 2018 milestone Mar 29, 2018
@meg2208
Copy link
Collaborator

meg2208 commented Apr 4, 2018

@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
Copy link
Contributor

outoftime commented Apr 4, 2018

@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
Copy link
Collaborator

meg2208 commented Apr 5, 2018

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
Copy link
Contributor

outoftime commented Apr 5, 2018

@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
Copy link
Collaborator

meg2208 commented Apr 9, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants