Toolbars not styled

[ammichael]

Hey there!

I just found the project, and the demo is awesome. Really. Congrats! (:

I've almost successfully implemented it, but the editor and side toolbar renders like this:

It applies the inline style and blocks if I press the buttons, but shouldn't it just show up when text selecting?

I've tried looking for a style that might be breaking it, but couldn't find anything.

Any clues what might be happening here?

Thanks!

[geekpeng]

you should use style https://unpkg.com/medium-draft/dist/medium-draft.css
and font-awesome

[brijeshb42]

If you are using webpack, you should import medium-draft/lib/index.css in your final JS file. Or as @geekpeng suggested, you can include the css file from the above link. It applies minimum styling to the editor so that it looks exactly like as it does in the demo.

And if you are using the sideButtons (image, embed etc), then you may have to also include font-awesome. The toolbar itself does not require fontawesome but this may change in future.

[ammichael]

I just imported 'medium-draft/lib/index.css' and it worked. Also, I've noticed this is mentioned in usage section of the readme.

My bad.

Thanks guys! (:

[brijeshb42]

Actually I added that section after your issue popped up.

[ammichael]

Oh, that makes sense.

Since we are here, I was thinking about opening another issue, but not sure if I should.. The demo has drag and drop for images working perfectly, but I can't replicate this behavior. Am I missing something, again?

[brijeshb42]

If you study the code in src/example.js, it is actually using medium-draft as a library and adding some extra functionality to it based on the props that Editor of medium-draft accepts.

So, there are features like -

• Auto curly quotes while typing,
• Embed and Break side buttons,
• File drop (code here),
• And some keyboard shortcuts

These features are not part of the core medium-draft editor as they are not generic enough.

[ammichael]

Just a last question.. Is there any reason this extra features are not default enabled in medium-draft already?

I mean, it would be nice to have a exposed prop like dropImages={true}. Is it possible?

I've been using React for a couple months, but I'm really, really noob with DraftJS, sorry about that. But if it's possible, I can try and implement this feature and send you a PR maybe..

[brijeshb42]

In the demo, when you drop an image, its added in place using URL.createObjectURL. This does not send the dropped images to any server so as to make it permanent. This is one reason dropping images is not a part of the core editor. (Likewise when image is added using the Image side button.)

There will always be logic specific to developer to deal with persisting the file someplace. You will have to upload it to your CDN, return the image's URL and then use that as the src.

Its not really hard handling files in draft-js or even medium-draft to be specific. There is always the demo code to help you. You can just modify the function here and pass it to medium-draft.