1.4.3 • Published 3 years ago
zenn-mde v1.4.3
Zenn MDE
ZennMDE 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
$ npm install zenn-mde --save
Usage
import React, { useCallback, useState } from 'react';
import { render } from 'react-dom';
import { Editor, useProvider } from 'zenn-mde';
import markdownToHtml from "zenn-markdown-html";
import 'zenn-mde/css/editor.css';
const MDE = () => {
const [markdown, setMarkdown] = useState('')
const handleValueChange = useCallback((newValue: string) => {
setMarkdown(newValue);
}, []);
return (
<Provider>
<Editor
previewClassName="znc"
value={markdown}
onChange={handleValueChange}
parser={markdownToHtml}
/>
</Provider>
)
}
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/zenn-dev/zenn-mde
Contributor
License
Code and documentation copyright 2020 by zenn-dev, Inc. Code released under the MIT License.
1.4.3
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.3.5
3 years ago
1.4.0
3 years ago
1.3.4
3 years ago
1.3.3
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.1
4 years ago
1.1.2
4 years ago
1.1.0
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago