KevenYoung/react-simple-markdown-editor

Simple react markdown editor widget you can attach to any TextArea element to provide rich markdown capabilities. Requires few dependencies

Simple React Markdown Editor

This makes it easy to add a simple markdown editing widget to any TextArea element.

Demo

CodePen Demo

Installation

npm install react-simple-markdown-editor

Features

• Entirely customizable. Modify CSS easily with props, or add custom classes and modify CSS with stylesheets. Define which buttons are visible.
• The only package dependencies are react and lodash, minimizing risk.

Usage

In your code:

ES6:

import {SimpleMarkdownEditor} from 'react-simple-markdown-editor';

Non-ES6:

var SimpleMarkdownEditor = require('react-simple-markdown-editor');

In your React render() function:

<SimpleMarkdownEditor textAreaID={"myTextAreaElement"} />

Rendering Markdown

Use another library like react-remarkable in combination with this. Then set the source of the remarkable component to the value of your TextArea element.

API

Props:

SimpleMarkdownEditor.propTypes = {
    // Required props
    textAreaID: PropTypes.string.isRequired,

    // Optional props
    styles: PropTypes.object,
    containerClass: PropTypes.string,
    buttonClass: PropTypes.string,
    enabledButtons: PropTypes.object,
    buttonHtmlText: PropTypes.object,
    additionalProps: PropTypes.object
};

textAreaID (String, Required): The ID of the TextArea element you want the editor attached to. When you press buttons in this widget, the text in this TextArea will be modified.

styles: (Object, optional): Used to overwrite inline CSS without using your own stylesheets.

Existing properties:

container: {
            
},
button: {
    fontFamily: 'Georgia, serif',
    backgroundColor: '#333536',
    color: 'white',
    marginRight: '5px',
    float: 'left',
    width: '25px',
    borderRadius: '4px',
    textAlign: 'center',
    cursor: 'pointer'
}

For instance, if you want to add a border to each button: <SimpleMarkdownEditor styles={{button: {border: '1px solid green'}}} />

containerClass and buttonClass (String, optional): Provide classes to the container and button elements, so you can overwrite them using your own CSS stylesheets. An alternative to setting the styles prop.

enabledButtons: (Object, optional): Hide any buttons you don't want to show. All of them default to showing. Buttons:

{
    bold: true,
    italic: true,
    strike: true,
    code: true,
    quote: true,
    h1: true,
    h2: true,
    h3: true,
    bullet: true,
    link: true,
    image: true
}

For instance, if you want to hide the link button: <SimpleMarkdownEditor enabledButtons={{link: false}} />

buttonHtmlText: (Object, optional): Change the display text of any buttons, including any HTML markup. Defaults:

{
    bold: 'B',
    italic: '<i>I</i>',
    strike: '<s>S</s>',
    code: '&lt; &gt;',
    quote: '&ldquo; &rdquo;',
    h1: 'H1',
    h2: 'H2',
    h3: 'H3',
    bullet: '&#8226;',
    link: '#',
    image: '[i]'
}

For instance, if you want to change code to be a square quote to be 2 right arrows: <SimpleMarkdownEditor buttonHtmlText={{code: '&#9633;', quote: '&#8649;'}} />

additionalProps: (Object, optional): Add arbitrary props to any button. For instance: <SimpleMarkdownEditor additionalProps={{bold: {title: "bold"}}} />

License

MIT, use for free. If you like this, give it a star.