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

Download ZIP

Github

https://github.com/zenn-dev/zenn-mde

Contributor

@steelydylan

License

Code and documentation copyright 2020 by zenn-dev, Inc. Code released under the MIT License.