Draft-js: Summary of using Draft.js in production

Created on 4 Mar 2019  路  3Comments  路  Source: facebook/draft-js

We've been using Draft.js via the react-rte wrapper lib for a while now in production. Finally we decided to switch to a another RTE due to various bugs happening.

A summary of those bugs and lack of features we came across in the last 1+ year:

  • We needed to add custom buttons to the toolbar, but could only do that with CSS hacking.
  • Upon inserting text from pre-made templates, a blank line ( <br> ) was inserted before <ul> or <ol> tags
  • Android typing autocomplete doesn't work (most serious problem)
  • Inserting tables aren't supported
  • When pressing enter (newline), the following error was thrown for _some_ users:
onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement
onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined
   at e.setFieldValue (onloadwff.js:71)
   at HTMLFormElement.formKeydownListener (onloadwff.js:71)
  • Inserting text to the text area can only be done with hacks (with browser-dependent ClipboardData code), and that isn't enough most of the times. It doesn't insert text at the cursor position.

And we've surely faced other, probably minor ones that I can't remember from the top of my head.

Facebook doesn't care about it much, some bugs remain unresolved for years due to the core developers blocking the merge (Android autocomplete bug).

All in all, I can not recommend using Draft.js for serious applications.

Most helpful comment

Chrome plugin LastPass: Free Password Manager caused, close the plugin to solve

All 3 comments

@sandorvasas It seems like you might be conflating react-rte and Draft.js? While I can definitely agree that Draft.js has its fair share of long-lasting bugs (heck, I even maintain a list of the ones that affect my editor), most of your points are about limitations that I'd put on react-rte. Draft.js doesn't have a notion of toolbars, HTML exports, and definitely has an API to insert text in the content that doesn't involve using ClipboardData.

For the issue you've seen on pressing enter, it doesn't seem to be mentioned anywhere else in the issue tracker so I wouldn't be surprised if it was related to your code or react-rte.

Thanks for your feedback, @sandorvasas. @niveditc and @flarnie have been working on nested data structures to support tables and other hierarchical contexts in the recent past, work is still ongoing.

I'd recommend to promptly submit or upvote issues when you encounter problems should you use Draft.js again in the future.

Chrome plugin LastPass: Free Password Manager caused, close the plugin to solve

Was this page helpful?
0 / 5 - 0 ratings