Skip to content
📝 React Markdown Editor
Branch: master
Clone or download
Latest commit e7aa45c Apr 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Reducing the size of images Apr 7, 2018
demo Stop tracking the demo on my Google Analytics Apr 11, 2019
docs-md Fix commands; Fix build; Fix default IconProvider Feb 10, 2019
docs Update demo to 7.3.0 Apr 11, 2019
src Fix strikethrough and bump to 7.3.0 Apr 11, 2019
.dockerignore Add Docker Apr 19, 2018
.gitignore Updating npm and git ignore files Nov 14, 2017
.npmignore Basic structure working without Draft.js + Jest instead of Mocha Jan 6, 2019
.prettierignore
LICENSE Initial commit Nov 26, 2016
gulpfile.js Fix commands; Fix build; Fix default IconProvider Feb 10, 2019
jest.config.js Basic structure working without Draft.js + Jest instead of Mocha Jan 6, 2019
package-lock.json Bump to 7.3.2 Apr 12, 2019
package.json Bump to 7.3.2 Apr 12, 2019
readme.md Update readme.md Apr 25, 2019
tsconfig.build.json Basic structure working without Draft.js + Jest instead of Mocha Jan 6, 2019
tsconfig.demo.prod.json Fix commands; Fix build; Fix default IconProvider Feb 10, 2019
tsconfig.json Make the currentTab controlled Feb 10, 2019
webpack.config.demo.dev.js Webpack updating to v4 fix Apr 29, 2018
webpack.config.demo.prod.js

readme.md

react-mde

A simple yet powerful and extensible Markdown Editor editor for React. React-mde has no 3rd party dependencies. Min + Gzipped package is around 15KB.

React-mde is used in another tool I made, 🌐 https://remoted.io.

Demo

Installing

npm i react-mde

Markdown Preview

React-mde is agnostic regarding how to preview Markdown. The examples will use Showdown

npm install showdown

Using

React-mde is a completely controlled component.

Minimal example using Showdown:

import * as React from "react";
import ReactMde from "react-mde";
import * as Showdown from "showdown";
import "react-mde/lib/styles/css/react-mde-all.css";

export default class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      value: "**Hello world!!!**"
    };
    this.converter = new Showdown.Converter({
      tables: true,
      simplifiedAutoLink: true,
      strikethrough: true,
      tasklists: true
    });
  }

  handleValueChange = (value) => {
    this.setState({ value });
  };

  render () {
    return (
      <div className="container">
        <ReactMde
          onChange={this.handleValueChange}
          value={this.state.value}
          generateMarkdownPreview={markdown =>
            Promise.resolve(this.converter.makeHtml(markdown))
          }
        />
      </div>
    );
  }
}

Customizing Icons

React-mde comes with SVG icons extracted from FontAwesome included.

You can customize the way icons are resolved by passing your own getIcon that will return a ReactNode given a command name.

<ReactMde
    getIcon={(commandName) => <MyCustomIcon name={commandName} />}
    onChange={this.handleValueChange}
    // ...
/>

React-mde Props

The types are described below

  • value: string: The Markdown value.
  • onChange: (value: string): Event handler for the onChange event.
  • selectedTab: "write" | "preview": The currently selected tab.
  • onTabChange: (tab) => void: Function called when the selected tab changes.
  • className?: string: Optional class name to be added to the top level element.
  • commands?: CommandGroup[]: An array of CommandGroup, which, each one, contain a commands property (array of Command). If no commands are specified, the default will be used. Commands are explained in more details below.
  • generateMarkdownPreview: (markdown: string) => Promise;: Function that should return the generated HTML for the preview. If this prop is falsy, then no preview is going to be generated.
  • getIcon?: (commandName: string) => React.ReactNode } An optional set of button content options, including an iconProvider to allow custom icon rendering. options. It is recommended to inspect the layouts source code to see what options can be passed to each while the documentation is not complete.
  • emptyPreviewHtml: What to display in the preview in case there is no markdown.
  • readOnly?: boolean: Flag to render the editor in read-only mode.
  • textAreaProps: Extra props to be passed to the textarea component.
  • l18n: A localization option. It contains the strings write and preview.
  • minEditorHeight (number): The minimum height of the editor.
  • maxEditorHeight (number): The max height of the editor (after that, it will scroll).
  • minPreviewHeight (number): The minimum height of the preview.

Styling

The following styles from React-mde should be added: (Both .scss and .css files are available. No need to use sass-loader if you don't want)

Easiest way: import react-mde-all.css:

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

If you want to have a more granular control over the styles, you can import each individual file.

If you're using SASS, you can override these variables: https://github.com/andrerpena/react-mde/blob/master/src/styles/variables.scss

XSS concerns

React-mde does not automatically sanitize the HTML preview. If your using Showdown, this has been taken from their documentation:

Cross-side scripting is a well known technique to gain access to private information of the users of a website. The attacker injects spurious HTML content (a script) on the web page which will read the user’s cookies and do something bad with it (like steal credentials). As a countermeasure, you should filter any suspicious content coming from user input. Showdown doesn’t include an XSS filter, so you must provide your own. But be careful in how you do it…

You might want to take a look at showdown-xss-filter.

Commands

You can create your own commands or reuse existing commands. The commands property of React-mde expects an array of CommandGroup, which contains an array of commands called commands. You can also import the existing commands as displayed below:

import ReactMde, {commands} from "react-mde";

const listCommands = [
    {
        commands: [
            commands.orderedListCommand,
            commands.unorderedListCommand,
            commands.checkedListCommand
        ]
    }
]

<ReactMde
    commands={listCommands}
    ...
/>

Please refer to the commands source code to understand how they should be implemented.

Change log / Migrating from older versions

Instructions here.

Licence

React-mde is MIT licensed.

Third party

In order to make React-mde zero deps, I've embedded two small libraries:

About the author

Made with ❤️ by André Pena and other awesome contributors. Check out my website: http://andrerpena.me.

You can’t perform that action at this time.