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

starsdownloadslicense

Follow @steelydylan on Twitter for future project updates.