5 ms·

Is there a specific benefit to having this built on top of React rather than just wrapping an existing editor's API [1][2][3]? Is it cross-usability for React-n

Is there a specific benefit to having this built on top of React rather than just wrapping an existing editor's API [1][2][3]? Is it cross-usability for React-native or just NIH syndrome? I'm not sure how I feel about re-implementing all the things and introducing a React dependency to everything. The lock-in seems okay if React really is the final word in UI frameworks (though it is very large and currently very slow). I am certainly not in this camp, however. [1] https://github.com/neilj/Squire https://github.com/neilj/Squire [2] https://github.com/quilljs/quill https://github.com/quilljs/quill [3] https://github.com/zenoamaro/react-quill https://github.com/zenoamaro/react-quill

jonknee 11y ago
On the other hand it's perfect if you have a React project and need rich text editing.
- leeoniya 11y ago
  Is it more perfect than e.g. https://github.com/zenoamaro/react-quill https://github.com/zenoamaro/react-quill ? My point is, if you can have a truly reusable component with an API that can be integrated into anywhere (including a React wrapper), what do you gain by making a component that can only live in React and have no other re-usability to speak of? There are many drawbacks, but React-native is the only benefit as far as I can see, which requires a firm React commitment.
spicyj 11y ago
(Biased React dev here.) The key insight in Draft.js is that it's incredibly difficult to keep your model in sync with the browser's contenteditable behavior unless you intercept many of the behaviors and perform them entirely in the model, then change the DOM accordingly. Medium found the same thing when building their editor: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480 https://medium.com/medium-eng/why-contenteditable-is-terribl... In order to build high-quality text editors, you need to be in control of what's happening in the DOM. There's obviously many ways to control the DOM. React is a solid base for this, as are many other libraries. Facebook uses React extensively so it made sense to use as a base for Draft to avoid needing to essentially rewrite React and to make it even easier to integrate with existing React apps. Of course, you can also use Draft easily inside a non-React app. The entire Draft model is also separate code decoupled from the UI and you're free to use the model and implement the views yourself if you're allergic to React or aren't targeting the DOM. The Facebook Groups app uses Draft's model but implements custom views for it in React Native.
- almost 11y ago
  Any chance that react native view code will be released at any point? Would be so useful!
  - spicyj 11y ago
    Good idea. It's based off of an older version of the Draft code so it might not work out of the box. If we don't get a chance, hopefully it won't be hard for people to build out a solid implementation on RN.
- stemuk 11y ago
  I am extesively using the polymer webcomponents framework, do I need to install react in the background or can I use draft.js independently?
  - yrezgui 11y ago
    You'll have to use ReactJS as it's needed to have the control over the DOM.
- jhchen 11y ago
  (Biased Quill author here) Most modern rich text editors have or are moving towards having a document model that maps to the DOM, ideally also producing compact and canonical output. Quill's new document model Parchment takes this approach as well though I admit I borrowed the idea from the Etherpad guys, and some design ideas from React as well [1]. I have not had the time to dig into Draft.js in depth but Facebook has made many high quality contributions to open source and looking forward to borrowing more ideas. [1] http://quilljs.com/blog/the-road-to-1-0/ http://quilljs.com/blog/the-road-to-1-0/
underwater 11y ago
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.
- gabriele 11y ago
  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)
  - calvin 11y ago
    In the livestream video, they show using draft.js features for @-mentions in normal posts, and for rich text features in their Notes feature.
- ridiculous_fish 11y ago
  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.
  - danabramov 11y ago
    I just tried that in http://facebook.github.io/draft-js/ http://facebook.github.io/draft-js/, and Edit -> Undo worked for me.
    - 11y ago
terda12 11y ago
Yes, it's much simpler to have a natively React text editor, that way you can plug in the state of the <Draft> component into your other React components. See http://facebook.github.io/draft-js/docs/overview.html#content http://facebook.github.io/draft-js/docs/overview.html#conten..., everything is nice and neat. I'm not sure about 3rd party js text editors, but I'm guessing it could be a pain to work with state and props in that context.
juretriglav 11y ago
Substance (http://substance.io/ http://substance.io/) also wraps their editor in a React Component (https://github.com/substance/lens/blob/master/ReactLensWriter.js https://github.com/substance/lens/blob/master/ReactLensWrite...) and it works great. (I'm a very minor contributor.)

jonknee 11y ago

On the other hand it's perfect if you have a React project and need rich text editing.

leeoniya 11y ago
Is it more perfect than e.g. https://github.com/zenoamaro/react-quill https://github.com/zenoamaro/react-quill ? My point is, if you can have a truly reusable component with an API that can be integrated into anywhere (including a React wrapper), what do you gain by making a component that can only live in React and have no other re-usability to speak of? There are many drawbacks, but React-native is the only benefit as far as I can see, which requires a firm React commitment.

spicyj 11y ago

(Biased React dev here.) The key insight in Draft.js is that it's incredibly difficult to keep your model in sync with the browser's contenteditable behavior unless you intercept many of the behaviors and perform them entirely in the model, then change the DOM accordingly. Medium found the same thing when building their editor: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480 https://medium.com/medium-eng/why-contenteditable-is-terribl... In order to build high-quality text editors, you need to be in control of what's happening in the DOM. There's obviously many ways to control the DOM. React is a solid base for this, as are many other libraries. Facebook uses React extensively so it made sense to use as a base for Draft to avoid needing to essentially rewrite React and to make it even easier to integrate with existing React apps. Of course, you can also use Draft easily inside a non-React app. The entire Draft model is also separate code decoupled from the UI and you're free to use the model and implement the views yourself if you're allergic to React or aren't targeting the DOM. The Facebook Groups app uses Draft's model but implements custom views for it in React Native.

almost 11y ago
Any chance that react native view code will be released at any point? Would be so useful!
- spicyj 11y ago
  Good idea. It's based off of an older version of the Draft code so it might not work out of the box. If we don't get a chance, hopefully it won't be hard for people to build out a solid implementation on RN.
stemuk 11y ago
I am extesively using the polymer webcomponents framework, do I need to install react in the background or can I use draft.js independently?
- yrezgui 11y ago
  You'll have to use ReactJS as it's needed to have the control over the DOM.
jhchen 11y ago
(Biased Quill author here) Most modern rich text editors have or are moving towards having a document model that maps to the DOM, ideally also producing compact and canonical output. Quill's new document model Parchment takes this approach as well though I admit I borrowed the idea from the Etherpad guys, and some design ideas from React as well [1]. I have not had the time to dig into Draft.js in depth but Facebook has made many high quality contributions to open source and looking forward to borrowing more ideas. [1] http://quilljs.com/blog/the-road-to-1-0/ http://quilljs.com/blog/the-road-to-1-0/

underwater 11y ago

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.

gabriele 11y ago
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)
- calvin 11y ago
  In the livestream video, they show using draft.js features for @-mentions in normal posts, and for rich text features in their Notes feature.
ridiculous_fish 11y ago
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.
- danabramov 11y ago
  I just tried that in http://facebook.github.io/draft-js/ http://facebook.github.io/draft-js/, and Edit -> Undo worked for me.
  - 11y ago

terda12 11y ago

Yes, it's much simpler to have a natively React text editor, that way you can plug in the state of the <Draft> component into your other React components. See http://facebook.github.io/draft-js/docs/overview.html#content http://facebook.github.io/draft-js/docs/overview.html#conten..., everything is nice and neat. I'm not sure about 3rd party js text editors, but I'm guessing it could be a pain to work with state and props in that context.

juretriglav 11y ago

Substance (http://substance.io/ http://substance.io/) also wraps their editor in a React Component (https://github.com/substance/lens/blob/master/ReactLensWriter.js https://github.com/substance/lens/blob/master/ReactLensWrite...) and it works great. (I'm a very minor contributor.)