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.