React Split MDE
React Split MDE is a Markdown Editor which enables you to write contents smoothly even with a large amount of content.
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
|---|
ScreenShot
Not Yet
Features
- Fully customizable
- Synced scroll position across the contents and the preview
- No stress writing even with a large amount of content
Install
You should also import zenn-markdown-html as peer dependencies
$ npm install react-split-mde zenn-markdown-html --saveUsage
import React, { useCallback, useState } from 'react';
import { render } from 'react-dom';
import { Editor, useProvider } from 'react-split-mde';
import { parser } from 'react-split-mde/lib/parser';
import 'react-split-mde/css/index.css';
const MDE = () => {
const [markdown, setMarkdown] = useState('')
const handleValueChange = useCallback((newValue: string) => {
setMarkdown(newValue);
}, []);
return (
<Editor
parser={parser}
value={markdown}
onChange={handleValueChange}
/>
)
}
render(<MDE />, document.getElementById("app"));Try it on CodeSandbox
Not yet...
Props
| Props | Description | Type | Default |
|---|---|---|---|
| commands | key binds | Record< string, Command>; | |
| previewClassName | class name to be applied to preview area | "znc" | |
| previewCallback | morphdom callbacks to be applied to preview area | Record<string, Function> | {} |
| parser | markdown parser function | ( text : string ) => Promise <string> | |
| value | markdown | string | "" |
| onChange | callback when markdown changed | ( value : string ) => void | |
| psudoMode | highlight markdown area with highlight.js | boolean | false |
| debounceTime | debounced time to apply markdown result to preview area | number | 3000 |
Download
Github
https://github.com/steelydylan/react-split-mde
Contributor
License
Code and documentation copyright 2020 by steelydylan, Inc. Code released under the MIT License.