Hacker News new | ask | show | jobs
by afiedler 3716 days ago
Facebook's draft.js[1] tries to solve a lot of these problems and uses React under the hood to maintain a mapping between the model of the document that you are editing and the DOM.

I have only played with it, not used it in production, but if you are using React it could be a good solution.

The one limitation I've seen is that is doesn't really support documents that need a hierarchical model (an example of this would be tables, but also things like "I want a code block within a blockquote").

If you want to see draft.js's document model, I made a tool to do that, too[2].

[1]: https://facebook.github.io/draft-js/ [2]: http://afiedler.github.io/draft-js-dm-demo/

3 comments

One big problem with draft.js is it doesn't play well with tools like grammarly that reach into the dom and modify it.

Medium's editor side steps this by just rerendering after each input.

Draft.js does (or did at some point) have some affordances for this so that it could handle mobile devices.

Keyboards on Android Chrome used to emit keycode 0 for every character that was inserted and then mutate the DOM directly. And spelling corrections just mutated he DOM without firing events.

There are a bunch of bugs immediately apparent. Try typing while making a selection with mouse. Is that expected behaviour? nah.
What is the "expected behavior" for simultaneously drag-selecting text and typing? And why? And who decided that?

I've found that there are many edge cases in rich content-editing. If your general-purpose editor does something reasonable and constructive with esoteric inputs it's fine.

Draft.js appears to cancel the selection process and drops the typed character wherever the mouse happens to be. Reasonable.

What? This should work properly. If it doesn't, please file a detailed bug with info about your browser.
how is it that no-one wants to implement table support nowadays?