repository·master·Indexed 25 days ago
https://github.com/uiwjs/react-md-editorA lightweight markdown editor with preview implemented with React.js and TypeScript. It uses textarea encapsulation instead of heavy dependencies like Monaco or CodeMirror. The library includes a comprehensive command system for markdown formatting (bold, italic, lists, tables, headings), a TextAreaCommandOrchestrator for programmatic execution, and support for multiple code preview modes (preview, edit, and live).
To start the development server for the Next.js example project, use one of the following commands depending on your preferred package manager. Once running, you can view the application at http://localhost:3000.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devThe following props are available on the MDEditor component:
| Prop | Type | Description |
|---|---|---|
value | string | The Markdown value |
onChange | (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void | Event handler for the onChange event |
onHeightChange | (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void | Editor height change listener |
onStatistics | (data: Statistics) => void | Callback for editor statistics (length, lineCount) |
autoFocus | ITextAreaProps['autoFocus'] | Whether to focus the editor on initialization (defaults to on) |
autoFocusEnd | boolean | Whether to focus at the end of text on initialization |
height | CSSProperties['height'] | The height of the editor. Note: Dragbar is invalid when using percentage values |
visibleDragbar | boolean | Show drag and drop tool to set editor height |
preview | PreviewType | Show markdown preview (e.g., edit, preview, both) |
fullscreen | boolean | Full screen display editor |
overflow | boolean | Disable fullscreen setting body styles |
maxHeight | number | Maximum drag height (requires visibleDragbar=true) |
minHeight | number | Minimum drag height (requires visibleDragbar=true) |
previewOptions | Omit<MarkdownPreviewProps, 'source'> | Settings for react-markdown preview |
textareaProps | ITextAreaProps | Props passed to the underlying textarea |
components | object | Custom component overrides |
data-color-mode | 'light' | 'dark' | Theme configuration |
highlightEnable | boolean | Disable editing area code highlighting. Setting to false increases editing speed (defaults to true) |
tabSize | number | Number of characters to insert when pressing tab (default 2) |
defaultTabEnable | boolean | If false, the tab key inserts a tab character; if true, it performs default browser behavior |
commands | ICommand[] | Custom or existing commands to include |
commandsFilter | (command: ICommand, isExtra: boolean) => false | ICommand | Filter or modify commands |
extraCommands | ICommand[] | Additional commands to add |
hideToolbar | boolean | Hide the toolbar |
enableScroll | boolean | Whether to enable scrolling |
toolbarBottom | boolean | Position toolbar at the bottom |
direction | CSSProperties['direction'] | Text direction (rtl or ltr) |
The image command allows users to insert image syntax into the markdown editor. It supports both manual insertion and smart detection of existing URLs.
http or www) selected, the command wraps the selection in the markdown image syntax: . pattern..ctrlcmd+k (Note: ctrlcmd typically refers to Ctrl on Windows/Linux and Cmd on macOS).The DragBar component is a UI element used to resize an area (typically the editor height) via dragging. It supports both mouse and touch interactions.
To use it, you must provide the current height, the allowed minHeight and maxHeight boundaries, and an onChange callback to handle height updates.
The TextAreaTextApi class provides low-level text manipulation capabilities for commands. It is used internally by the orchestrator but can be used to interact with the editor's content.
Methods:
replaceSelection(text: string): Replaces the current selection with the provided text and returns the updated TextState.setSelectionRange(selection: TextRange): Focuses the textarea and sets the selection to the specified start and end indices.The comment command allows users to wrap selected text in Markdown comment syntax.
<!-- as a prefix and --> as a suffix.ctrlcmd + / (Note: ctrlcmd typically refers to Ctrl on Windows/Linux or Cmd on macOS).Insert comment (ctrl + /).When creating custom commands, implement the ICommand interface. A command can be a simple command or a command with children (sub-commands).
ICommandBase properties:
name: The display name of the command.keyCommand: A string identifier for the command.shortcuts: Keyboard shortcuts.icon: A React.ReactElement for the command icon.execute: The function called when the command runs. It receives ExecuteState, TextAreaTextApi, dispatch, ExecuteCommandState, and shortcuts.The link command allows users to wrap selected text in Markdown link syntax. It supports keyboard shortcuts and automatic detection of existing URLs.
[selected_text](url).http or www, it wraps the selection in [](url) (treating the selection as the URL).[title](url) at the cursor position.linkctrlcmd+l (Control/Command + L)[prefix](suffix) where prefix is [ and suffix is ](url)group function allows you to organize multiple commands into a single logical group. It accepts an array of commands and an optional GroupOptions object to configure the group's properties. When commands are passed into group, each command's parent property is automatically set to the group object, enabling hierarchical command structures.TextArea component is a pre-configured instance created via a factory. It is optimized for markdown editing with Markdown rendering and useMinHeight: true enabled. You can import it directly for standard markdown text area functionality.You can insert inline code using the code command. This command wraps the selected text with single backticks (). If the selected text contains a newline, the command automatically falls back to the codeBlock` behavior to ensure valid Markdown.
Keyboard Shortcut: ctrlcmd+j
// Command details for code
name: 'code'
keyCommand: 'code'
shortcuts: 'ctrlcmd+j'
prefix: '`'