React Markdown Editor Component

Common errors

• Cannot find module 'react-mde' or its corresponding type declarations.

  cause The `react-mde` package is not installed or incorrectly imported.
  fix Run `npm install react-mde showdown` (or `yarn add react-mde showdown`). Ensure the import path is `import ReactMde from 'react-mde';`.

• TypeError: Cannot read properties of undefined (reading 'makeHtml') or similar error related to markdown conversion.

  cause The `generateMarkdownPreview` prop is either missing, returns an invalid value, or the Markdown converter (e.g., Showdown) is not correctly initialized or installed.
  fix 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))}`.

• Error: A component is changing an uncontrolled input of type text to be controlled.

  cause The `ReactMde` component is being used with a `value` prop that changes from `undefined` to a defined string, or vice-versa, without a corresponding `key` prop to force re-mounting.
  fix 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.

Warnings

• breaking The project appears to be unmaintained. The latest version (11.5.0) was published approximately five years ago, indicating a lack of ongoing support, bug fixes, or compatibility updates for newer React versions or browser changes.
  Fix: 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.
• gotcha React-mde does not automatically sanitize the HTML output generated for the Markdown preview. Using client-side Markdown parsers like Showdown without explicit sanitization can expose your application to Cross-Site Scripting (XSS) vulnerabilities if user-supplied content contains malicious scripts.
  Fix: 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.
• gotcha Mobile support for react-mde is noted as problematic and depends on fixes for Draft.js, which are not being actively addressed by Draft.js maintainers (Facebook). This means the editor may not function correctly or provide a good user experience on mobile devices.
  Fix: 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.
• gotcha Styling requires importing a CSS file. If `react-mde/lib/styles/css/react-mde-all.css` is not imported, the editor will appear unstyled and potentially non-functional visually.
  Fix: 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.

Install

• npm install react-mde npm
• yarn add react-mde yarn
• pnpm add react-mde pnpm

Imports

• ReactMde
  wrong:

  import { ReactMde } from 'react-mde';
  import * as ReactMde from 'react-mde';

  correct:

  import ReactMde from 'react-mde';

  ReactMde is a default export.
• CSS Styles
  wrong:

  import 'react-mde/lib/styles/css/react-mde.css';

  correct:

  import 'react-mde/lib/styles/css/react-mde-all.css';

  The `react-mde-all.css` file includes all necessary styles. Individual CSS files can be imported for granular control.
• Showdown Converter (example)
  wrong:

  import Showdown from 'showdown';

  correct:

  import * as Showdown from 'showdown';
  const converter = new Showdown.Converter({ tables: true, simplifiedAutoLink: true });

  Showdown is a popular choice for client-side Markdown parsing, often imported as a namespace.

Quickstart

Demonstrates a basic controlled `ReactMde` component, managing Markdown content and tab selection with React hooks and integrating Showdown for preview generation.

import React, { useState, useCallback } from 'react';
import ReactMde from 'react-mde';
import * as Showdown from 'showdown';
import 'react-mde/lib/styles/css/react-mde-all.css';

const converter = new Showdown.Converter({
  tables: true,
  simplifiedAutoLink: true,
  strikethrough: true,
  tasklists: true,
});

function MyMarkdownEditor() {
  const [value, setValue] = useState('**Hello world!!!**');
  const [selectedTab, setSelectedTab] = useState<'write' | 'preview'>('write');

  const generatePreview = useCallback((markdown) => {
    return Promise.resolve(converter.makeHtml(markdown));
  }, []);

  return (
    <div style={{ maxWidth: 800, margin: 'auto', padding: '20px' }}>
      <ReactMde
        value={value}
        onChange={setValue}
        selectedTab={selectedTab}
        onTabChange={setSelectedTab}
        generateMarkdownPreview={generatePreview}
        minEditorHeight={200}
        minPreviewHeight={200}
      />
    </div>
  );
}

export default MyMarkdownEditor;