md-editor-react

Markdown Editor React

Installation

$ npm install md-editor-react codemirror --save

MDEditor Usage

MDEditor is used for show editor with editing controlls and live preview

import { MDEditor } from 'md-editor-react';
 
import 'md-editor-react/dist/style.css';
 
import 'codemirror/mode/gfm/gfm';
import 'codemirror/lib/codemirror.css';
 
<MDEditor
  defaultValue="Hello World"
/>
 

CodeMirror is dependancy so you have to import codemirror css file and gfm mode for syntax highlighitng.

MDEditor Props

props	type	default	description
delay	number	300	input delay for parsing markdown and show html preview
fullScreen	boolean	false	enable fullscreen mode
watchMode	boolean	true	show html view
className	string		class name applied in wrapper
options	object		codemirror options
onChange	function		editor value on chagne event handler
menuConfig	list		add a menu items in menubar
defaultValue	string		set editor initial value
parserOptions	object		used marked markdown parser options

MDPreview Usage

MDPreview is used for parse markdown and preview html

import { MDPreview } from 'md-editor-react';
 
import 'md-editor-react/dist/style.css';
 
<MDPreview value="markdown value" />
 

MDPreview Props

props	type	description
value	string	markdown value to parse and displayed
parserOptions	object	used marked markdown parser options
sanitizerOptions	object	DOMPurify senitizer options

Highlight code in html preview

for highlight code you can used highlightjs library.

how to use in MDEditor

import { MDEditor } from 'md-editor-react';
import hljs from 'highlight.js';
 
import 'md-editor-react/dist/style.css';
import 'highlight.js/styles/github-gist.css';
 
import 'codemirror/mode/gfm/gfm';
import 'codemirror/lib/codemirror.css';
 
<MDEditor
  defaultValue="Hello World"
  parserOptions={{
    highlight: code => hljs.highlightAuto(code).value,
  }}
/>
 

how to use in MDPreview

import { MDPreview } from 'md-editor-react';
import hljs from 'highlight.js';
 
import 'md-editor-react/dist/style.css';
import 'highlight.js/styles/github-gist.css';
 
<MDPreview
  value="markdown value"
  parserOptions={{
    highlight: code => hljs.highlightAuto(code).value,
  }}
/>
 

Add Menu Item in Editor

use menuConfig props in MDEditor component

<MDEditor
  menuConfig={[{
    id: 'uniq_id',
    title: 'Menu Title',
    icon: <MenuIcon />,
    command: editor => { /* write your code here */ },
  }]}
/>
 

props	type	description
id	string	uniq id
title	string	title of menu item
icon	string or component	icon display in menu bar
position	number	menu item position starting from 1 (divider count included)
command	function	trigger after menu button clicked. editor passed as argument you can modify editor value
component	component	a react component render after menu clicked. component has close() and editor props

add divider in menu bar

<MDEditor
  menuConfig={[{
     divider: true
  }]}
/>
 

Menu item component props

if you want to display model like table, link menu. just import and use MDModel component.

import { MDModal, MDInput, MDButton } from 'md-editor-react';
 
 
class MenuComponet extends React.PureComponent {
    constructor(props) {
      super(props);
 
      this.state = {
        text: '',
      };
 
      this.onClickSuccess = this.onClickSuccess.bind(this);
      this.onChangeInput = this.onChangeInput.bind(this);
    }
 
    onChangeInput(event) {
      const { name, value } = event.target;
      this.setState({
        [name]: value,
      });
    }
 
    onClickSuccess() {
      const { text } = this.state;
      const { editor, close } = this.props;
 
      if (text) {
        editor.replaceSelection(text);
        close();
      }
    }
 
    render() {
      const { close } = this.props;
      const { text } = this.state;
 
      return (
        <MDModal visible closable header="Menu Header" onClose={close}>
          <MDModal.Body className="menu-modal">
            <MDInput
              value={text}
              name="text"
              onChange={this.onChangeInput}
            />
          </MDModal.Body>
          <MDModal.Footer onSuccess={this.onClickSuccess} onCancel={close} />
        </MDModal>
      );
  }
}
 

License

md-editor-react is MIT licensed.