This is a React.js Markdown editor component based on material-ui, built with CodeMirror.
It is alpha version yet, any feedback is welcome!
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
Via npm:
npm i material-ui-markdown-editor
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 🌚
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent