A pure Elm text editor is something I’ve dreamed about for a long while. Martin Janiczek worked up a test-of-concept a few years ago and posted an article on the subject. About three weeks ago, I discovered something truly wonderful: a much fuller demonstration of feasibility by Sydney Nemzer. Here is is demo. The demo may seem modest in character, but if you look at his code, you find an elegant and quite powerful base for future work. Extending Sydney’s work, I’ve published a text-editor package, a demo app, and am currently integrating the package into several other projects.
Such an editor is a complex undertaking, and it still requires much work. To make it into a really useful tool that can fulfill a variety of use cases, it needs help from the community: comments, issues posted, pull requests, etc.
I very much look forward to your feedback.
PS. For Chrome only (right now). A demo app that implements external copy-paste. That is, you can do the usual cmd-C (or whatever) to copy text (anywhere), then click in the editor and do ctrl-shift-U to paste it in at that point.
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.
Thanks so much for your comments, references, and words of encouragement.
I had been so focused on getting the minimum that I need for various apps that I hadn’t thought about some of the issues you raised. I will study up on them and the references — I am a bit of a noob with anything that touches the DOM.
Most of my work is with apps that parse and render math — either Markdown + Math or a subset of LaTeX, e.g.:
I’ve tried textareas (first example) and codemirror (second example), but both have their insufficiencies and drawbacks. I’ve found that anything that messes with the DOM is to be treated with extreme caution — the math rendering is already tricky in this regard (have been using custom elements).
One question about the keyboard command for wrapping text:
Wrapping Text. ctrl-W wraps the current selection.
Since using Google Chrome is mentioned in another part of the instructions, I was wondering: Can I configure Google Chrome so that I can use this keyboard command in the editor? I did not yet manage to invoke the Wrap-command. CTRL+h, for example, seems to work as intended.
In the Google Chrome I have here the default action for CTRL+W seems to close the current tab. Firefox 72.0.1 seems to have the same problem.
Re ctrl-W, which OS + Chrome version are you using? Just tried in on Mac with Chrome 79, and it did work there. I will try other browsers and see what happes. But your question raises two general issues:
Is there a way to “protect” the browser from keyboard command and clicks executed in the editor?
I should create a way to customize the keyboard commands. This is desirable, but will have to wait until I solve more pressing issues.
Ctrl+w usually is the shortcut to close tabs. Its quite consistent over Windows and Linux in browsers at least. Probably different on mac since there is a Cmd key instead of Ctrl.
Can’t tell, I just poked around because I was curious. Not using this functionality often.
The closest thing I found is this list of keyboard shortcuts for markdown editing at Markdown Shortcuts - Visual Studio Marketplace
Some of the default keyboard shortcuts there do wrapping.
But I don’t know how much it is Windows specific.
