0
# React MD Editor
1

2
React MD Editor is a comprehensive React-based markdown editor with live preview functionality, implemented with TypeScript. It provides a rich editing experience based on textarea encapsulation without depending on modern code editors like Monaco or CodeMirror, making it lightweight and highly customizable.
3

4
## Package Information
5

6
- **Package Name**: @uiw/react-md-editor
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @uiw/react-md-editor`
10

11
## Core Imports
12

13
Main editor with syntax highlighting:
14

15
```typescript
16
import MDEditor from "@uiw/react-md-editor";
17
import "@uiw/react-md-editor/markdown-editor.css";
18
```
19

20
For better performance (no syntax highlighting):
21

22
```typescript
23
import MDEditor from "@uiw/react-md-editor/nohighlight";
24
import "@uiw/react-md-editor/markdown-editor.css";
25
```
26

27
Command system:
28

29
```typescript
30
import { commands } from "@uiw/react-md-editor/commands";
31
// or
32
import MDEditor, { commands } from "@uiw/react-md-editor";
33
```
34

35
Individual imports:
36

37
```typescript
38
import MDEditor, {
39
  commands,
40
  ICommand,
41
  TextAreaCommandOrchestrator,
42
  getCommands,
43
  getExtraCommands
44
} from "@uiw/react-md-editor";
45
```
46

47
CommonJS:
48

49
```javascript
50
const MDEditor = require("@uiw/react-md-editor");
51
require("@uiw/react-md-editor/markdown-editor.css");
52
```
53

54
## Basic Usage
55

56
```typescript
57
import React, { useState } from "react";
58
import MDEditor from "@uiw/react-md-editor";
59
import "@uiw/react-md-editor/markdown-editor.css";
60

61
function App() {
62
  const [value, setValue] = useState("**Hello world!!!**");
63
  
64
  return (
65
    <div className="container">
66
      <MDEditor
67
        value={value}
68
        onChange={(val) => setValue(val || "")}
69
      />
70
      <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
71
    </div>
72
  );
73
}
74
```
75

76
Advanced usage with custom commands:
77

78
```typescript
79
import MDEditor, { commands } from "@uiw/react-md-editor";
80

81
function EditorWithCustomCommands() {
82
  const [value, setValue] = useState("");
83
  
84
  return (
85
    <MDEditor
86
      value={value}
87
      onChange={setValue}
88
      commands={[
89
        commands.bold,
90
        commands.italic,
91
        commands.strikethrough,
92
        commands.hr,
93
        commands.divider,
94
        commands.link,
95
        commands.code,
96
        commands.image
97
      ]}
98
      extraCommands={[
99
        commands.codeEdit,
100
        commands.codeLive,
101
        commands.codePreview,
102
        commands.divider,
103
        commands.fullscreen
104
      ]}
105
    />
106
  );
107
}
108
```
109

110
## Architecture
111

112
React MD Editor is built around several key components:
113

114
- **MDEditor Component**: Main editor component providing the editing interface with toolbar and preview
115
- **Command System**: Extensible command architecture for toolbar actions and text formatting
116
- **Text Processing**: Utility functions for textarea manipulation and markdown formatting
117
- **Context Management**: React context system for sharing editor state across components
118
- **Multiple Export Variants**: Different builds optimized for various use cases (with/without highlighting)
119

120
## Capabilities
121

122
### Main Editor Component
123

124
The primary MDEditor React component providing a complete markdown editing experience with toolbar, textarea, and live preview.
125

126
```typescript { .api }
127
declare const MDEditor: React.ForwardedRefComponent<RefMDEditor, MDEditorProps>;
128

129
interface MDEditorProps {
130
  value?: string;
131
  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
132
  commands?: ICommand[];
133
  extraCommands?: ICommand[];
134
  preview?: PreviewType;
135
  height?: CSSProperties['height'];
136
  hideToolbar?: boolean;
137
  visibleDragbar?: boolean;
138
  [key: string]: any;
139
}
140

141
interface RefMDEditor extends ContextStore {
142
  textarea?: HTMLTextAreaElement;
143
  container?: HTMLDivElement;
144
}
145

146
type PreviewType = 'live' | 'edit' | 'preview';
147
```
148

149
[Editor Component](./editor-component.md)
150

151
### Command System
152

153
Comprehensive command system for toolbar actions, text formatting, and editor controls with built-in commands and extensibility for custom commands.
154

155
```typescript { .api }
156
interface ICommand {
157
  name?: string;
158
  keyCommand?: string;
159
  shortcuts?: string;
160
  prefix?: string;
161
  suffix?: string;
162
  execute?: (state: ExecuteState, commands: ICommand[]) => void;
163
  icon?: React.ReactElement;
164
  children?: ICommand[] | ((state: ExecuteState, commands: ICommand[]) => React.ReactElement);
165
}
166

167
declare const commands: {
168
  bold: ICommand;
169
  italic: ICommand;
170
  strikethrough: ICommand;
171
  title: ICommand;
172
  title1: ICommand;
173
  title2: ICommand;
174
  title3: ICommand;
175
  title4: ICommand;
176
  title5: ICommand;
177
  title6: ICommand;
178
  link: ICommand;
179
  quote: ICommand;
180
  code: ICommand;
181
  codeBlock: ICommand;
182
  image: ICommand;
183
  table: ICommand;
184
  hr: ICommand;
185
  unorderedListCommand: ICommand;
186
  orderedListCommand: ICommand;
187
  checkedListCommand: ICommand;
188
  // ... additional commands
189
};
190
```
191

192
[Command System](./command-system.md)
193

194
### Text Processing Utilities
195

196
Utility classes and functions for textarea manipulation, text selection, and markdown formatting operations.
197

198
```typescript { .api }
199
declare class TextAreaCommandOrchestrator {
200
  constructor(textArea: HTMLTextAreaElement);
201
  getState(): false | TextState;
202
  executeCommand(command: ICommand, dispatch?: React.Dispatch<ContextStore>, state?: ContextStore, shortcuts?: string): void;
203
}
204

205
declare class TextAreaTextApi {
206
  constructor(textArea: HTMLTextAreaElement);
207
  replaceSelection(text: string): TextState;
208
  setSelectionRange(selection: TextRange): TextState;
209
}
210

211
declare function insertTextAtPosition(input: HTMLTextAreaElement, text: string): void;
212
declare function selectWord(options: SelectWordOptions): TextRange;
213
declare function selectLine(textSection: TextSection): TextRange;
214
```
215

216
[Utilities](./utilities.md)
217

218
## Core Types
219

220
```typescript { .api }
221
interface ContextStore {
222
  markdown?: string;
223
  preview?: PreviewType;
224
  height?: CSSProperties['height'];
225
  fullscreen?: boolean;
226
  highlightEnable?: boolean;
227
  commands?: ICommand[];
228
  extraCommands?: ICommand[];
229
  textarea?: HTMLTextAreaElement;
230
  container?: HTMLDivElement;
231
  dispatch?: React.Dispatch<ContextStore>;
232
}
233

234
interface TextState {
235
  text: string;
236
  selectedText: string;
237
  selection: TextRange;
238
}
239

240
interface TextRange {
241
  start: number;
242
  end: number;
243
}
244

245
interface ExecuteState {
246
  command: ICommand;
247
  state?: ContextStore;
248
  textApi: TextAreaTextApi;
249
  dispatch?: React.Dispatch<ContextStore>;
250
}
251

252
interface Statistics {
253
  text: string;
254
  view: number;
255
  length: number;
256
  focus: boolean;
257
}
258
```