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