Toolbars not styled about medium-draft HOT 8 CLOSED

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.

from medium-draft.

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

from medium-draft.

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.

from medium-draft.

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! (:

from medium-draft.

Actually I added that section after your issue popped up.

from medium-draft.

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?

from medium-draft.

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..

from medium-draft.

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.

from medium-draft.