A Pure Elm Text Editor

Great work so far, I think there’s a lot of promise if you can get past a few issues which I mention below:

I think the approach of creating a text editor this way has a few drawbacks. One is that by relying on key events and emulating every action, it’s hard to for users of non-English languages to use the editor (e.g. IME and input events). There are two open source projects I know of that use a similar approach to this and worked around the issue by creating a hidden text area for input (https://ace.c9.io/ and https://codemirror.net/). The guy who wrote code mirror goes into detail about these issues here: https://codemirror.net/doc/internals.html

The other issue is with native autocorrect and autocomplete. By not using a text area or content editable, you’re unable to take advantage of the spellcheck capabilities. For a code editor, this may be okay, but for a general purpose text editor, you might need to embed your own spell check feature.

I noticed Sydney’s demo too when I tried creating my first prototype RTE in Elm (Rich text editor using contenteditable in Elm), and decided not to take that approach when creating a rich text editor because of these issues and others. I’m currently working on a different approach similar to ProseMirror, which relies on content editable and mutation observers. This has the advantage of being able to use the native behavior of the browser for input and selection, but has a whole lot of drawbacks like having to constantly validate between the virutal DOM and DOM, and also having a more complex datamodel.

Anyway, good luck with the project!

3 Likes