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.