md-editor-react v0.2.1

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

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

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 */ },
  }]}
/>

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.