Hacker News Reader

Comment by underwater | Hacker News Reader

In most rich text editors the DOM is the source of truth and the editor reads and attempts to sanitize HTML when you're done.

Draft.JS is a controlled input. The view is completely derived from the model. This eliminates whole classes of browser and editor bugs.

It's also makes the editor really easy to extend. You can add new object types and complex styling without having to worry about all the nuances of text editing.

For example you could highlight hashtags by giving the editor a regex to match and then tell it which styles your hashtag should be decorated with. Draft.js handles creating and removing tags as you type, drag and drop, copy, paste, etc.

View on HN

Unfortunately this approach also introduces new classes of bugs, when the browser's editing facilities collide with those provided by the component. For example, on OS X, type any letter and then choose Edit->Undo; nothing will happen. This sort of thing is generally impossible to fix since there's no undo event in HTML.

I just tried that in http://facebook.github.io/draft-js/, and Edit -> Undo worked for me.

Hmm, what were your steps where it worked?

Undo and other text editing facilities aren't completely nonfunctional, they just become broken and unpredictable. For example, these steps:

1. Load http://facebook.github.io/draft-js/ 2. Click in the text box 3. Type 'hello' on the keyboard 4. Using the mouse, choose Edit -> Undo

The text box will show "h" instead of being empty. Do you see this too?

Note that cmd-Z won't reproduce this since the page tries to handle that itself to work around these bugs.

Good catch. Maybe worth filing an issue?

Against what? Html5? ;)

Well... yes :D [1] (AFAIR this case is covered by [2]).

The Editing Task Force is working on opening necessary APIs so editor implementors could integrate with all the native features. I wrote an article about the effort [3]. It's a bit outdated now, but explains what are the goals.

[1] https://github.com/w3c/editing/issues

[2] https://github.com/w3c/editing/issues/79

[3] https://medium.com/content-uneditable/fixing-contenteditable...

It surely does, because it's a crucial feature for a text editor, but the developers had to implement and undo/redo stack in their lib.

Anyway this approach is the only good one if you don't want to produce crappy HTML that will end up on your site. TinyMCE and the rest are obsolete, and editors like DraftJS or mobiledoc-kit are the only viable solutions until browsers offer a new, not broken alternative to content-editable.

Yes, you're right. No solution is perfect.

I was involved in a project that used contentEditable DOM as the source of truth before I had a chance to work with Draft, and I believe that Draft's model is the best compromise.

Draft does a lot to handle the edge cases where it's possible. IME and spellcheck are two of the big ones.

maybe this is a hint that they're going to introduce rich text for posting soon

(disclaimer: I've been out of Facebook for a while so they may have introduced that feature already)

In the livestream video, they show using draft.js features for @-mentions in normal posts, and for rich text features in their Notes feature.

Reply on news.ycombinator.com