Add browser-based Spell Check

[Gazook89]

Looking for options to cover spell checking, as mentioned in #312 and #517, and resolves #611.

One Option:

Option used in this PR: set the codeMirror options inputStyle : contentEditable, spellcheck : true, from this SO answer. Seems to work for both FF and Chrome. From the CodeMirror 5 manual:

inputStyle: string
Selects the way CodeMirror handles input and focus. The core library defines the "textarea" and "contenteditable" input models. On mobile browsers, the default is "contenteditable". On desktop browsers, the default is "textarea". Support for IME and screen readers is better in the "contenteditable" model. The intention is to make it the default on modern desktop browsers in the future.

spellcheck: boolean
Specifies whether or not spellcheck will be enabled on the input.

Minor complaint

• I think it is annoying that the words are highlighted as typos as they are being typed, but I'm not sure what can be done about that using a browser spell checker.

---

Another Option

Use typo.js as suggested a few places, here but it seems this might have issues outside a few languages.

[calculuschild]

It seems to function fine, but I have some thoughts after playing around:

• Spellcheck on a markdown / CSS document is going to be cluttered with detected "typos" whenever there's "code" bits (on our curly divs, etc). This starts to get overwhelming pretty quickly and I don't know if users want them in their browser "dictionaries". I'm not aware of an obvious way to avoid spellchecking certain parts though.
• Spellcheck probably shouldn't be on the Style Tab at all.
• Perhaps we need a toggle button to turn it on and off. Some people probably don't want annoying squiggles on everything.
• I also don't like the marking on partially-typed words but I'm not sure of any way around that.
• The typo lines flash with each keystroke.

Edit: We may be able to use this guy's extension as a template to make our own spellchecker. https://github.com/sparksuite/codemirror-spell-checker

We can see the logic where he determines which words to check in here. It's not that complicated, but perhaps it's getting in over our heads.

Thoughts @jeddai , @G-Ambatte , @ericscheid ?

[jeddai]

Perhaps we need a toggle button to turn it on and off

I would be willing to argue that this should be a requirement before this goes out. I also think it should default to off, but could have its own icon in the editor menu bar.

On a related note, I'm actually about to open an issue brought to me by the DOMT team about having user editor settings that persist across documents, maybe that could be the solution for this concern.

We may be able to use this guy's extension as a template to make our own spellchecker. https://github.com/sparksuite/codemirror-spell-checker

That's certainly an option, but I think one of the biggest benefits of the browser spell check is the ability to add words to the dictionary. Replicating that functionality is possible, but would require some work.

[G-Ambatte]

On a related note, I'm actually about to open an issue brought to me by the DOMT team about having user editor settings that persist across documents

This was part of the UserInfo framework (#1672). The idea behind it was that some user specific information could be stored; in the immediate future, items like editor preferences, but in the longer term, it offers the potential for things such as storing Users "liked" brews, and intra-User messaging (which could potentially be useful for user notifications, for required messages like DMCA takedown processes).

However the framework is still very much WIP.

[G-Ambatte]

* Spellcheck probably shouldn't be on the Style Tab at all.

Agreed.

* Perhaps we need a toggle button to turn it on and off. Some people probably don't want annoying squiggles on everything.

Absolutely, I almost never use spelchking.

* I also don't like the marking on partially-typed words but I'm not sure of any way around that.

* The typo lines flash with each keystroke.

If we can debounce the checking functioning, it could potentially resolve both of these issues. However, I haven't had a chance to dig in to see if this is actually possible.