0
# Editor Component
1

2
The MDEditor component is the main React component providing a complete markdown editing experience with toolbar, textarea, and live preview functionality.
3

4
## Capabilities
5

6
### MDEditor Component
7

8
The primary markdown editor component with full TypeScript support and customizable interface.
9

10
```typescript { .api }
11
/**
12
 * Main markdown editor component with live preview functionality
13
 * @param props - Component props including value, onChange, and customization options
14
 * @returns React component with forward ref support
15
 */
16
declare const MDEditor: React.ForwardedRefComponent<RefMDEditor, MDEditorProps>;
17

18
interface MDEditorProps {
19
  /** The markdown content value */
20
  value?: string;
21
  /** Change event handler called when content is modified */
22
  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;
23
  /** Height change event handler */
24
  onHeightChange?: (value?: CSSProperties['height'], oldValue?: CSSProperties['height'], state?: ContextStore) => void;
25
  /** Statistics callback for editor metrics */
26
  onStatistics?: (data: Statistics) => void;
27
  
28
  /** Editor height (default: 200) */
29
  height?: CSSProperties['height'];
30
  /** Minimum drag height (default: 100) */
31
  minHeight?: number;
32
  /** Maximum drag height (default: 1200) */
33
  maxHeight?: number;
34
  /** Show drag and drop tool (default: true) */
35
  visibleDragbar?: boolean;
36
  /** Hide the toolbar */
37
  hideToolbar?: boolean;
38
  /** Position toolbar at bottom */
39
  toolbarBottom?: boolean;
40
  /** Text direction ('ltr' | 'rtl') */
41
  direction?: CSSProperties['direction'];
42
  
43
  /** Preview mode ('live' | 'edit' | 'preview', default: 'live') */
44
  preview?: PreviewType;
45
  /** Full screen mode (default: false) */
46
  fullscreen?: boolean;
47
  /** Disable fullscreen body styles (default: true) */
48
  overflow?: boolean;
49
  /** React-markdown settings */
50
  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;
51
  
52
  /** Auto focus on initialization */
53
  autoFocus?: boolean;
54
  /** Focus on end of text on initialization */
55
  autoFocusEnd?: boolean;
56
  /** Enable code highlighting (default: true) */
57
  highlightEnable?: boolean;
58
  /** Tab character count (default: 2) */
59
  tabSize?: number;
60
  /** Enable default tab behavior */
61
  defaultTabEnable?: boolean;
62
  /** Enable scrolling (default: true) */
63
  enableScroll?: boolean;
64
  
65
  /** Custom commands array */
66
  commands?: ICommand[];
67
  /** Additional commands array */
68
  extraCommands?: ICommand[];
69
  /** Command filter function */
70
  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;
71
  
72
  /** Textarea-specific props */
73
  textareaProps?: ITextAreaProps;
74
  /** Custom component renderers */
75
  components?: {
76
    textarea?: (props: any) => React.ReactElement;
77
    toolbar?: (command: ICommand, disabled: boolean, executeCommand: Function, index: number) => React.ReactElement;
78
    preview?: (props: any) => React.ReactElement;
79
  };
80
  
81
  /** Theme configuration */
82
  'data-color-mode'?: 'light' | 'dark';
83
}
84

85
interface RefMDEditor extends ContextStore {
86
  textarea?: HTMLTextAreaElement;
87
  container?: HTMLDivElement;
88
}
89

90
type PreviewType = 'live' | 'edit' | 'preview';
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import React, { useState } from "react";
97
import MDEditor from "@uiw/react-md-editor";
98

99
// Basic usage
100
function BasicEditor() {
101
  const [value, setValue] = useState("# Hello World");
102
  
103
  return (
104
    <MDEditor
105
      value={value}
106
      onChange={setValue}
107
    />
108
  );
109
}
110

111
// Advanced configuration
112
function AdvancedEditor() {
113
  const [value, setValue] = useState("");
114
  
115
  return (
116
    <MDEditor
117
      value={value}
118
      onChange={setValue}
119
      height={400}
120
      preview="live"
121
      hideToolbar={false}
122
      visibleDragbar={true}
123
      highlightEnable={true}
124
      autoFocus={true}
125
      data-color-mode="dark"
126
      textareaProps={{
127
        placeholder: "Enter your markdown here...",
128
        style: { fontSize: '14px' }
129
      }}
130
      onHeightChange={(height, oldHeight) => {
131
        console.log('Height changed:', height);
132
      }}
133
      onStatistics={(stats) => {
134
        console.log('Editor stats:', stats);
135
      }}
136
    />
137
  );
138
}
139

140
// Custom preview options
141
function EditorWithCustomPreview() {
142
  const [value, setValue] = useState("");
143
  
144
  return (
145
    <MDEditor
146
      value={value}
147
      onChange={setValue}
148
      previewOptions={{
149
        rehypePlugins: [[rehypeHighlight]],
150
        components: {
151
          code: ({ children, ...props }) => (
152
            <code {...props} style={{ background: '#f0f0f0' }}>
153
              {children}
154
            </code>
155
          )
156
        }
157
      }}
158
    />
159
  );
160
}
161
```
162

163
### Editor Context
164

165
React context providing editor state throughout the component tree.
166

167
```typescript { .api }
168
/**
169
 * React context for editor state management
170
 */
171
declare const EditorContext: React.Context<ContextStore>;
172

173
interface ContextStore {
174
  /** Component renderers */
175
  components?: MDEditorProps['components'];
176
  /** Current commands */
177
  commands?: ICommand<string>[];
178
  /** Current extra commands */
179
  extraCommands?: ICommand<string>[];
180
  /** Current markdown content */
181
  markdown?: string;
182
  /** Current preview mode */
183
  preview?: PreviewType;
184
  /** Editor height */
185
  height?: CSSProperties['height'];
186
  /** Fullscreen state */
187
  fullscreen?: boolean;
188
  /** Syntax highlighting state */
189
  highlightEnable?: boolean;
190
  /** Auto focus state */
191
  autoFocus?: boolean;
192
  /** Auto focus end state */
193
  autoFocusEnd?: boolean;
194
  /** Textarea element reference */
195
  textarea?: HTMLTextAreaElement;
196
  /** Command orchestrator instance */
197
  commandOrchestrator?: TextAreaCommandOrchestrator;
198
  /** Textarea wrapper element */
199
  textareaWarp?: HTMLDivElement;
200
  /** Textarea pre element for highlighting */
201
  textareaPre?: HTMLPreElement;
202
  /** Container element reference */
203
  container?: HTMLDivElement | null;
204
  /** State dispatcher */
205
  dispatch?: React.Dispatch<ContextStore>;
206
  /** Bar popup states */
207
  barPopup?: Record<string, boolean>;
208
  /** Scroll position */
209
  scrollTop?: number;
210
  /** Preview scroll position */
211
  scrollTopPreview?: number;
212
  /** Tab size setting */
213
  tabSize?: number;
214
  /** Default tab enable setting */
215
  defaultTabEnable?: boolean;
216
  /** Additional properties */
217
  [key: string]: any;
218
}
219
```
220

221
### Statistics Interface
222

223
Editor statistics and metrics data structure.
224

225
```typescript { .api }
226
/**
227
 * Editor statistics and metrics extending TextState
228
 */
229
interface Statistics extends TextState {
230
  /** Total length of the document */
231
  length: number;
232
  /** Get the number of lines in the editor */
233
  lineCount: number;
234
}
235
```
236

237
### Additional Interfaces
238

239
Core interfaces for component styling and textarea customization.
240

241
```typescript { .api }
242
/**
243
 * Base props interface for styling components
244
 */
245
interface IProps {
246
  /** CSS prefix class */
247
  prefixCls?: string;
248
  /** Additional CSS class name */
249
  className?: string;
250
}
251

252
/**
253
 * Textarea component props interface
254
 */
255
interface ITextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>, IProps {
256
  /** Textarea value */
257
  value?: string;
258
  /** Scroll event handler for wrapper div */
259
  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
260
  /** Custom textarea renderer */
261
  renderTextarea?: (
262
    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,
263
    opts: RenderTextareaHandle
264
  ) => JSX.Element;
265
}
266

267
/**
268
 * Render handle for custom textarea implementations
269
 */
270
type RenderTextareaHandle = {
271
  dispatch: ContextStore['dispatch'];
272
  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
273
  useContext?: {
274
    commands: ContextStore['commands'];
275
    extraCommands: ContextStore['extraCommands'];
276
    commandOrchestrator?: TextAreaCommandOrchestrator;
277
  };
278
  shortcuts?: (
279
    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,
280
    commands: ICommand[],
281
    commandOrchestrator?: TextAreaCommandOrchestrator,
282
    dispatch?: React.Dispatch<ContextStore>,
283
    state?: ExecuteCommandState
284
  ) => void;
285
};
286

287
/**
288
 * Textarea element references
289
 */
290
type TextAreaRef = {
291
  /** Textarea element reference */
292
  text?: HTMLTextAreaElement;
293
  /** Wrapper div element reference */
294
  warp?: HTMLDivElement;
295
};
296

297
/**
298
 * Subset of context store for command execution
299
 */
300
type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;
301
```
302

303
### Markdown Preview Component
304

305
Access to the underlying markdown preview component.
306

307
```typescript { .api }
308
/**
309
 * Standalone markdown preview component
310
 * Available as MDEditor.Markdown
311
 */
312
interface MarkdownPreviewProps {
313
  source: string;
314
  style?: React.CSSProperties;
315
  className?: string;
316
  rehypePlugins?: any[];
317
  remarkPlugins?: any[];
318
  components?: Record<string, React.ComponentType>;
319
}
320
```
321

322
**Usage Example:**
323

324
```typescript
325
import MDEditor from "@uiw/react-md-editor";
326

327
function PreviewOnly() {
328
  const markdown = "# Hello\n\nThis is **bold** text.";
329
  
330
  return (
331
    <MDEditor.Markdown 
332
      source={markdown} 
333
      style={{ whiteSpace: 'pre-wrap' }} 
334
    />
335
  );
336
}
337
```
338

339
### No Highlight Version
340

341
Performance-optimized version without syntax highlighting.
342

343
```typescript { .api }
344
/**
345
 * Performance-optimized editor without syntax highlighting
346
 * Import from '@uiw/react-md-editor/nohighlight'
347
 */
348
declare const MDEditor: React.ForwardedRefComponent<RefMDEditor, MDEditorProps>;
349
```
350

351
**Usage Example:**
352

353
```typescript
354
import MDEditor from "@uiw/react-md-editor/nohighlight";
355
import "@uiw/react-md-editor/markdown-editor.css";
356

357
function FastEditor() {
358
  const [value, setValue] = useState("");
359
  
360
  return (
361
    <MDEditor
362
      value={value}
363
      onChange={setValue}
364
      highlightEnable={false} // No syntax highlighting for better performance
365
    />
366
  );
367
}
368
```