Getting Started

Instration

Inside your React project directory, run the following:

yarn add react-split-mde
yarn add zenn-markdown-html

Or with npm:

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

Quick Start

You can import Editor component as follows

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}
/>)
}

Customize

Provider

With provider, You can control textarea as you want. It's useful like when you want to add image upload functionality on it.

import { useState, useCallback } from "react"
import { Editor, useProvider } 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 [emit, Provider] = useProvider()
const [value, setValue] = useState(defaultValue)
const handleImageUpload = useCallback(
async (e) => {
const uploadingMsg = "![](now uploading...)";
emit({
type: "insert",
text: uploadingMsg,
});
await new Promise((resolve) => {
setTimeout(() => resolve(), 1000);
});
emit({
type: "replace",
targetText: uploadingMsg,
text: "![](https://source.unsplash.com/1600x900/?nature,water)",
});
},
[]
)
const handleValueChange = (newValue) => {
setValue(newValue)
}
return (
<Provider>
<input type="file" onChange={handleImageUpload} />
<Editor
value={value}
parser={parser}
onChange={handleValueChange}
/>
</Provider>
)
}

Key Bindings

The Editor component accepts commands props which will be fired when you press some key on the textarea. Then you should pass the defaultCommands imported from react-split-mde, Otherwise all key bindings functionality won't work such as auto list on new line.

The follwing code is the example how to fire the event when enter the both Enter and command key at the same time.

import { useState } from "react"
import { Editor, defaultCommands } 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}
onChange={handleValueChange}
parser={parser}
commands={
...defaultCommands,
save: (textarea, option) => {
const { composing, code, shiftKey, metaKey, ctrlKey } = option;
if ((metaKey || ctrlKey) && !shiftKey) {
if (!composing && code === EnterKey) {
// You can define save function here
return { stop: true, change: false };
}
}
},
}
/>)
}