Material-UI Markdown Editor ✍️

This is a React.js Markdown editor component based on material-ui, built with CodeMirror.

It is alpha version yet, any feedback is welcome!

Demo & Example

Live demo can be found here. To build the examples locally, run:

npm install
npm start

Then open localhost:3000 in your browser.

To test application, run:

npm test

Installation

Via npm:

npm i material-ui-markdown-editor

Usage

NOTE: Codemirror styles and their overrirde should be included in the project keeping global selectors. In the following example, styles are included with the help of css modules. Style's are not isolated by scope due to the reason, that rules generated by CodeMirror are global. Might be solved in the feature.

import React from 'react'
import ReactDOM from 'react-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import injectTapEventPlugin from 'react-tap-event-plugin'
import MarkdownEditor from 'material-ui-markdown-editor'
import 'codemirror/lib/codemirror.css' // import codemirror styles
import 'material-ui-markdown-editor/dist/MarkdownEditor/codemirrorOverride.css' // import override styles
 
injectTapEventPlugin()
 
const Example = () => (
  <MuiThemeProvider>
    <MarkdownEditor
      title="Foo"
      code="# Fancy markdown editor!"
    />
  </MuiThemeProvider>
)
 
ReactDOM.render(
  <Example />,
  document.getElementById('root')
)

PS: This README.md was written with this editor 🌚