Question 1

How to add a custom image upload button in medium-draft?

Accepted Answer

Extend the ImageSideButton component and override the onChange method to handle file uploads to your server, then use addNewBlock to insert the image URL. The README provides a detailed example with fetch API integration for this workflow.

Question 2

medium-draft vs Draft.js: which should I use?

Accepted Answer

medium-draft is built on top of Draft.js and adds Medium-like features, keyboard shortcuts, and custom blocks. If you need a more polished editor with these enhancements, choose medium-draft; for more control and customization from scratch, use Draft.js directly, but expect more initial setup.

Question 3

Does medium-draft support markdown or shortcuts for code blocks?

Accepted Answer

It supports auto-transform for patterns like '##' for headers and '[]' for todos, but full markdown support or syntax-highlighted code blocks are not included. You might need to extend it or add custom blocks for such features, which isn't covered in the core library.

Question 4

How to disable the circular add button for side buttons in medium-draft?

Accepted Answer

Pass an empty array as the sideButtons prop: sideButtons={[]}. This removes the side buttons entirely, as mentioned in the README under 'Removing side buttons', making the editor cleaner if you don't need media insertion.

Question 5

Is medium-draft compatible with Next.js or server-side rendering?

Accepted Answer

Since it's based on React and Draft.js, which are client-side libraries, server-side rendering can be tricky. You may need to handle hydration issues or use dynamic imports to avoid SSR problems, as the editor relies on browser APIs and JavaScript.

Question 6

What are the performance implications of using medium-draft with large texts?

Accepted Answer

Built on draft-js, it can face performance issues with very large documents due to how draft-js manages content state. Optimizing with techniques like debouncing onChange or limiting block types might be necessary for scalability.

Medium Draft

What is Medium Draft?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions