Can't figure out why draft-js is not shown

Question

I followed draft-js document to create a very simple demo of draft-js.

Everything seems work well, but when I open the url in Chrome, I can only see a white blank page (there is a hidden editor component there but is not visible)

There is no error on the console of the browser.

The demo project is here: https://github.com/js-demos/react-draft-js-demo, you can clone it and follow the readme to run it.

I have reviewed the code very carefully, but can't figure out why.

Answer 1

If you just use the sample code on the official website of Draft.js, you will see nothing on the page. It's just a blank text input field. If you click that field, you could type something. Draft.js is not a out of the box plugin, but a "a framework for building rich text editors in React".

Answer 2

Hope you figured it out, if not (or for anyone else), the solution for me was two step:

1. Download the Draft.css file and include it in your source code.

2. Reference said file in your index.html as such:

   <link rel="stylesheet" href="./src/components/Draft.css" />

In other words, your problem was to do with the styling of the Draft-js Editor, since for you the editor was 'hidden' i.e. without any discernible box around it etc.