Commands

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.

import { useState } from "react"
import { Editor, defaultCommands } from "react-split-mde"
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}
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 };
}
}
},
}
/>)
}

Command Function

Each command function will accept two arguments

  • textarea HTMLTextAreaElement
  • option CommandOption

and command function should return void or { stop: boolean; change: boolean } When stop is true it will prevent default behavior of textarea. When change is false the entered text won't be filled in textarea

With TypeScript

You can import CommandOption type to make typed command function as follows

import { CommandOption } from "react-split-mde"
const saveCommand = (textarea: TextAreaElement, option: CommandOption) => {
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 };
}
}
}

CommandOption Properties

  • line: string string from the beginning of the line to the cursor position where the cursor exists
  • lineAll: string the all string of the line where the cursor exsits
  • value: string textarea value
  • code: string Entered key value such as a, b, c
  • shiftKey: boolean When ShiftKey is pressed then true
  • ctrlKey: boolean When ctrlKey is pressed then true
  • metaKey: boolean When metaKey is pressed then true
  • start: number start position of the selection
  • end: number end position of the selection
  • composing: boolean text composition system such as an input method editor starts a new composition session, when sesseion alives, then true else false
  • emit: (event: EmitEvent) => void EventEmitter function to control the textarea