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 --save

Usage

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

Download ZIP

Github

https://github.com/steelydylan/react-split-mde

Contributor

@steelydylan

License

Code and documentation copyright 2020 by steelydylan, Inc. Code released under the MIT License.