6 ms·

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

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/ https://facebook.github.io/draft-js/ [2]: http://afiedler.github.io/draft-js-dm-demo/ http://afiedler.github.io/draft-js-dm-demo/

dminor 10y ago
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.
- underwater 10y ago
  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.
BasDirks 10y ago
There are a bunch of bugs immediately apparent. Try typing while making a selection with mouse. Is that expected behaviour? nah.
- spicyj 10y ago
  What? This should work properly. If it doesn't, please file a detailed bug with info about your browser.
- teleclimber 10y ago
  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.
m_mueller 10y ago
how is it that no-one wants to implement table support nowadays?

dminor 10y ago

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.

underwater 10y ago
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.

BasDirks 10y ago

There are a bunch of bugs immediately apparent. Try typing while making a selection with mouse. Is that expected behaviour? nah.

spicyj 10y ago
What? This should work properly. If it doesn't, please file a detailed bug with info about your browser.
teleclimber 10y ago
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.

m_mueller 10y ago

how is it that no-one wants to implement table support nowadays?