Pure Elm contenteditable rich text editor

[Bulat Shamsutdinov]

Hello!

I have aside project which I really want to write in Elm. That project needs rich text edit (nothing fancy, just bullets and text styles).

To my knowledge there is no solution to that task in Elm (which is a bummer). And even ports require nasty hacks (according to previous discussions here)

Is there a way to implement that basic functionality using only Elm? 

• Is it technically possible at the moment?
• What approach would you suggest?

[Rolf Sievers]

If your users understand markdown, you could use markdown input and maybe even render a preview.

This is what I am doing for a project of mine. (This of course circumvents the problem of writing a rich text editor but might help with your original problem.)

[OvermindDL1]

This is also what I do for a CMS'ish style of interface in something at work, using elm-markdown to render a real-time view of what is being created.

Even pre-markdown back in decades past I still opted two have two panes, one where (at the time) html was put in, and the other showing the rendered html (in pseudo-realtime at the time, a refreshing frame, bleh).  You have no sudden jerks or disconnects or something unexpected unlike a WYSIWYG style (which I utterly *abhor* due to how many issues pretty much all of them have).

[Luke Westby]

Everything you need to do this should be available with the notable exception of the Selection API (https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection), which would allow you to manipulate the cursor and selected text programatically.

[RGBboy]

You should read this article to see why existing solutions generally do not work very well: https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480

I am pretty sure draft.js has a good underlying data model that copes with mapping to the DOM well. Perhaps looking into how that works could give you some direction.

Like Luke says, you will need to use the selection API via a port.

When I first started looking into Elm this was something that I was interested in creating so I am keen to see how you get on. 

Good luck.

[Bulat Shamsutdinov]

Thank you everyone! I'm currently studying Draft.js to see their way of implementing rich text edit.

[Vincent Jousse]

Just for the record, we discussed something similar here: https://groups.google.com/forum/#!msg/elm-discuss/YKz8rgffoWc/k6WIihXRBAAJ;context-place=forum/elm-discuss