React Split MDE

React Split MDE is a TypeScript friendly next generation markdown editor with splited screen used at https://zenn.dev/

Install#

You should also import zenn-markdown-html as peer dependencies

$ npm install react-split-mde zenn-markdown-html --save

Overview#

import { useState } from "react"
import { Editor } from "react-split-mde"
import { parser } from 'react-split-mde/lib/parser';
import "react-split-mde/css/index.css"
const defaultValue = "# React Split MDE"
export const EditorDemo = () => {
  const [value, setValue] = useState(defaultValue)
  const handleValueChange = (newValue) => {
    setValue(newValue)
  }
  return (<Editor 
    value={value}
    parser={parser}
    onChange={handleValueChange} 
  />)
}

In this example, Editor component accepts onChange and value props to update editor value.

Features#

• Customizable key bindings
• Having useful event emitter to change text contents
• Scroll sync
• Automatic list on new lines
• Indent line by pressing tab key
• TypeScript Friendly

Community#

Follow @steelydylan on Twitter for future project updates.