react-mde is a React component that provides a feature-rich Markdown editor, aiming for parity with the GitHub Markdown editor experience. It functions as a controlled component, requiring both a `value` prop for the Markdown content and an `onChange` handler for updates. A key differentiator is its extensibility; it allows developers to provide a custom `generateMarkdownPreview` function, making it agnostic to the chosen Markdown parsing library (e.g., Showdown or react-markdown). The component also supports custom icons and configurable toolbar commands. It relies on Draft.js for advanced text editing features like history management and mentions. The current stable version is 11.5.0, published approximately five years ago. Due to the lack of recent updates and noted unresolved issues, such as mobile compatibility tied to an unaddressed Draft.js problem, the project appears to be unmaintained.
npm install react-mdeVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic controlled `ReactMde` component, managing Markdown content and tab selection with React hooks and integrating Showdown for preview generation.
Consider migrating to a more actively maintained Markdown editor component for long-term project health. If staying with react-mde, be prepared to fork and maintain it yourself or accept potential compatibility and security risks.
Always sanitize the HTML generated by your `generateMarkdownPreview` function, especially if dealing with untrusted user input. Integrate a dedicated HTML sanitization library (e.g., `dompurify`) or ensure your Markdown parser has built-in sanitization features enabled.
For mobile experiences, consider implementing a conditional rendering strategy to replace react-mde with a standard `<textarea>` or a mobile-specific input, or use an alternative editor that explicitly supports mobile. Test thoroughly on target mobile devices.
Ensure you include `import 'react-mde/lib/styles/css/react-mde-all.css';` in your entry file or component where `ReactMde` is used. For more granular control, individual CSS files can be imported, but `react-mde-all.css` is generally recommended for quick setup.
Run `npm install react-mde showdown` (or `yarn add react-mde showdown`). Ensure the import path is `import ReactMde from 'react-mde';`.
Ensure `showdown` is installed (`npm install showdown`) and correctly imported. The `generateMarkdownPreview` function must return a `Promise<string | ReactElement>`. Example: `generateMarkdownPreview={markdown => Promise.resolve(converter.makeHtml(markdown))}`.Always initialize the `value` prop with a non-null/non-undefined string, typically an empty string (`''`) or initial Markdown content. Ensure `value` and `onChange` are consistently provided for controlled component behavior.