### quick-start.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

The quick-start.md file provides a guide for getting started with the editor, covering installation, minimal and complete examples, and various usage patterns.

```markdown
### 2. quick-start.md (509 lines)
**Purpose:** Getting started guide  
**Contents:**
- Installation instructions
- Minimal example
- Complete feature example
- Preview-only usage
- Dark mode implementation
- Custom commands
- Controlled vs uncontrolled
- Edit-only and preview-only modes
- Responsive layout
- Syntax highlighting options
- Auto-save pattern
- Character limit implementation
- Next.js integration
- Statistics monitoring
- RTL support
- Programmatic control
- CSS management
- Troubleshooting guide

**Sections:** 18
**Code Examples:** 20
```

--------------------------------

### Example: Using getState

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/text-area-api.md

Demonstrates how to get and log the current state of a textarea using the orchestrator.

```typescript
const orchestrator = new TextAreaCommandOrchestrator(textareaElement);
const state = orchestrator.getState();
if (state) {
  console.log('Current text:', state.text);
  console.log('Selected:', state.selectedText);
  console.log('Cursor:', state.selection);
}
```

--------------------------------

### Install KaTeX for Custom Preview

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Install the KaTeX library to enable custom math rendering within the markdown editor.

```bash
npm install katex
```

--------------------------------

### Install Mermaid for Custom Preview

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Install the mermaid library to enable custom diagram previews within the markdown editor.

```bash
npm install mermaid
```

--------------------------------

### Install Dependencies

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Install project dependencies using npm.

```bash
$ npm install       # Installation dependencies
$ npm run build     # Compile all package

```

--------------------------------

### Start Documentation Site

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Launch the local documentation site for the project.

```bash
npm run start

```

--------------------------------

### Responsive Layout Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Implement a responsive layout for the markdown editor, ensuring it fits well within a container and adapts to different screen sizes. This example uses flexbox for layout.

```tsx
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = useState('');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <header style={{ padding: '20px' }}>
        <h1>Markdown Editor</h1>
      </header>
      <div style={{ flex: 1, overflow: 'hidden' }}>
        <MDEditor
          value={value}
          onChange={setValue}
          height="100%"
          visibleDragbar={false}
        />
      </div>
    </div>
  );
}
```

--------------------------------

### Install React-MD-Editor with yarn

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Use this command to install the package using yarn.

```bash
yarn add @uiw/react-md-editor
```

--------------------------------

### Install React-MD-Editor with npm

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Use this command to install the package using npm.

```bash
npm install @uiw/react-md-editor
```

--------------------------------

### Install KaTeX for Mathematical Expressions

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Install the necessary packages, katex and rehype-rewrite, to enable rendering of mathematical expressions using KaTeX within the markdown preview.

```bash
npm install katex rehype-rewrite
```

--------------------------------

### Install Mermaid for Diagram Rendering

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Install the mermaid and rehype-rewrite packages to enable the rendering of diagrams defined using Mermaid syntax within the markdown preview.

```bash
npm install mermaid rehype-rewrite
```

--------------------------------

### Basic MDEditor Integration Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/md-editor-component.md

A basic example demonstrating how to use the MDEditor component in a React application. It includes state management for the editor's value and sets a fixed height and live preview mode.

```typescript
import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = useState('**Hello world!**');

  return (
    <div data-color-mode="light">
      <MDEditor
        value={value}
        onChange={setValue}
        height={200}
        preview="live"
      />
    </div>
  );
}
```

--------------------------------

### Build Project

Source: https://github.com/uiwjs/react-md-editor/blob/master/README.md

Compile all packages in the project using npm. This command is used after installing dependencies.

```bash
npm run build     # Compile all package

```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/uiwjs/react-md-editor/blob/master/example/nextjs/README.md

Use these commands to start the local development server for your Next.js project. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Internationalization Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Demonstrates how to use internationalized commands for the editor by importing them from '@uiw/react-md-editor/commands-cn'.

```jsx
import React, { useContext } from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";
import { getCommands, getExtraCommands } from "@uiw/react-md-editor/commands-cn";

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <MDEditor
      value={value}
      preview="edit"
      commands={[...getCommands()]}
      extraCommands={[...getExtraCommands()]
      }
      onChange={(val) => setValue(val)}
    />
  );
}

```

--------------------------------

### Complete React-MD-Editor Feature Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

An advanced example showcasing various features of MDEditor, including custom commands, event handlers for statistics and height changes, and live preview. Remember to import CSS and necessary components.

```tsx
import React, { useState, useRef } from 'react';
import MDEditor, { commands } from '@uiw/react-md-editor';
import '@uiw/react-md-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';

export default function App() {
  const [value, setValue] = useState('# Welcome to Markdown Editor\n\nStart typing...');
  const editorRef = useRef();

  const handleChange = (val) => {
    setValue(val);
  };

  const handleStats = (stats) => {
    console.log('Lines:', stats.lineCount, 'Characters:', stats.length);
  };

  const handleHeightChange = (newHeight, oldHeight) => {
    console.log(`Height changed from ${oldHeight} to ${newHeight}`);
  };

  return (
    <div data-color-mode="light">
      <MDEditor
        ref={editorRef}
        value={value}
        onChange={handleChange}
        onStatistics={handleStats}
        onHeightChange={handleHeightChange}
        height={400}
        preview="live"
        visibleDragbar={true}
        hideToolbar={false}
        enableScroll={true}
        tabSize={2}
        highlightEnable={true}
        commands={[
          commands.bold,
          commands.italic,
          commands.strikethrough,
          commands.divider,
          commands.codeBlock,
          commands.quote,
          commands.divider,
          commands.unorderedListCommand,
          commands.orderedListCommand,
          commands.divider,
          commands.link,
          commands.image,
        ]}
      />
    </div>
  );
}
```

--------------------------------

### README.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

The README.md file serves as the master index and overview for the project, guiding users through documentation navigation and providing a project overview.

```markdown
# Documentation Manifest

## Complete Technical Reference for @uiw/react-md-editor

**Project:** React MD Editor  
**Version:** 4.1.1  
**Generated:** 2026-07-05  
**Documentation Format:** Markdown  
**Total Files:** 11  
**Total Lines:** 5,542  
**Total Size:** 152 KB

---

## File Contents

### 1. README.md (387 lines)
**Purpose:** Master index and overview  
**Contents:**
- Documentation navigation guide
- Project overview and features
- Quick reference examples
- Component structure
- State management overview
- Default keyboard shortcuts
- API surface summary
- Performance considerations
- Browser support
- Customization points
- Common integrations
- Troubleshooting reference

**Sections:** 15+
**Code Examples:** 4
```

--------------------------------

### Install Dependencies for Next.js

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Install next-remove-imports and a specific version of react-md-editor for Next.js projects.

```bash
npm install next-remove-imports
npm install @uiw/react-md-editor@v3.6.0
```

--------------------------------

### Install rehype-sanitize

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Install the rehype-sanitize package to enable HTML sanitization for your Markdown preview.

```bash
npm install rehype-sanitize
```

--------------------------------

### Help Command

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/commands.md

Opens the markdown syntax help documentation. This command provides quick access to markdown formatting guides.

```typescript
commands.help: ICommand = {
  name: 'help',
  keyCommand: 'help',
}
```

--------------------------------

### Internationalization Example for React MD Editor

Source: https://github.com/uiwjs/react-md-editor/blob/master/README.md

Demonstrates how to internationalize the React MD Editor using commands from '@uiw/react-md-editor/commands-cn'. Requires React and MDEditor.

```jsx
import React, { useContext } from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";
import { getCommands, getExtraCommands } from "@uiw/react-md-editor/commands-cn";

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <MDEditor
      value={value}
      preview="edit"
      commands={[...getCommands()]} 
      extraCommands={[...getExtraCommands()]} 
      onChange={(val) => setValue(val)}
    />
  );
}

```

--------------------------------

### Complete Plugin Example with Context API

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/context-api.md

Demonstrates how to create a full-featured plugin using the EditorContext to read and modify editor state. It includes updating stats on content change and adding buttons for custom actions like inserting the current date or clearing all content. The plugin is conditionally rendered based on the fullscreen state.

```typescript
import React, { useContext, useState } from 'react';
import { EditorContext } from '@uiw/react-md-editor';

function AdvancedPlugin() {
  const {
    markdown,
    preview,
    dispatch,
    fullscreen,
    textarea,
  } = useContext(EditorContext);
  
  const [stats, setStats] = useState({ lines: 0, chars: 0 });
  
  // Update stats on content change
  React.useEffect(() => {
    if (markdown) {
      setStats({
        lines: markdown.split('\n').length,
        chars: markdown.length,
      });
    }
  }, [markdown]);
  
  const handleInsertDate = () => {
    const today = new Date().toLocaleDateString();
    dispatch({ markdown: (markdown || '') + `\n\n*Last updated: ${today}*` });
  };
  
  const handleClearAll = () => {
    if (window.confirm('Clear all content?')) {
      dispatch({ markdown: '' });
    }
  };
  
  if (fullscreen) return null; // Hide plugin in fullscreen
  
  return (
    <div style={{ padding: '10px', borderTop: '1px solid #eee' }}>
      <div>
        <strong>Stats:</strong> {stats.lines} lines, {stats.chars} chars
      </div>
      <div style={{ marginTop: '10px' }}>
        <button onClick={handleInsertDate} style={{ marginRight: '5px' }}>
          Insert Date
        </button>
        <button onClick={handleClearAll}>Clear All</button>
      </div>
    </div>
  );
}

// Usage in MDEditor
export function App() {
  const [value, setValue] = React.useState('');
  
  return (
    <div>
      <MDEditor value={value} onChange={setValue} />
      <AdvancedPlugin />
    </div>
  );
}

```

--------------------------------

### Example: Customizing Toolbar with Command Groups

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/commands.md

Demonstrates how to use the `group` function to create a dropdown for titles and combine it with other commands like dividers and bold text in the MDEditor component.

```jsx
import MDEditor, { commands } from '@uiw/react-md-editor';

<MDEditor
  commands={[
    commands.group([commands.title1, commands.title2, commands.title3], {
      name: 'title',
      groupName: 'title',
      buttonProps: { 'aria-label': 'Insert title' }
    }),
    commands.divider,
    commands.bold,
    commands.italic,
  ]}
/>
```

--------------------------------

### Display Markdown Preview in a Modal

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Integrate the Markdown preview into a modal or dialog component. This example shows how to toggle visibility and style the modal for display.

```tsx
const [showPreview, setShowPreview] = useState(false);

<>
  <button onClick={() => setShowPreview(!showPreview)}>
    {showPreview ? 'Hide' : 'Show'} Preview
  </button>

  {showPreview && (
    <div style={{
      position: 'fixed',
      inset: 0,
      backgroundColor: 'rgba(0,0,0,0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <div style={{
        background: 'white',
        padding: '20px',
        borderRadius: '8px',
        maxHeight: '80vh',
        overflow: 'auto',
        width: '90%',
        maxWidth: '800px',
      }}>
        <MDEditor.Markdown source={markdown} />
      </div>
    </div>
  )}
</>
```

--------------------------------

### Headless Editor Implementation

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/advanced-features.md

Create a custom editor using only the API layer without the built-in UI. This example demonstrates how to manage text changes, handle keyboard events for indentation and shortcuts, and integrate with custom display elements.

```tsx
import React, { useRef, useEffect, useState } from 'react';
import {
  TextAreaCommandOrchestrator,
  handleKeyDown,
  shortcuts,
  getCommands,
  TextAreaTextApi,
} from '@uiw/react-md-editor';

function HeadlessEditor() {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const preRef = useRef<HTMLPreElement>(null);
  const orchestratorRef = useRef<TextAreaCommandOrchestrator | null>(null);
  const [value, setValue] = useState('');

  useEffect(() => {
    if (textareaRef.current) {
      orchestratorRef.current = new TextAreaCommandOrchestrator(
        textareaRef.current
      );
    }
  }, []);

  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // Handle tab indentation, enter list items, etc.
    handleKeyDown(e, 2, false);
    
    // Handle command shortcuts (Ctrl+B, Ctrl+I, etc.)
    if (orchestratorRef.current) {
      shortcuts(e, getCommands(), orchestratorRef.current);
    }
  };

  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value);
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
      <textarea
        ref={textareaRef}
        value={value}
        onChange={onChange}
        onKeyDown={onKeyDown}
        style={{
          padding: '10px',
          fontFamily: 'monospace',
          border: '1px solid #ccc',
        }}
      />
      <pre
        ref={preRef}
        style={{
          padding: '10px',
          backgroundColor: '#f5f5f5',
          overflow: 'auto',
        }}
      >
        <code>{value}</code>
      </pre>
    </div>
  );
}

```

--------------------------------

### Basic Usage of React MD Editor

Source: https://github.com/uiwjs/react-md-editor/blob/master/www/public/bundle.html

Demonstrates the basic setup for using MDEditor and MDEditor.Markdown components. It shows how to manage the editor's value using React's useState hook.

```javascript
import MDEditor from '@uiw/react-md-editor';

function Demo() {
  const [value, setValue] = React.useState("**Hello world!!!**");

  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
      />
      <MDEditor.Markdown source={value} />
    </div>
  );
}

ReactDOM.render(<Demo />, document.getElementById('container'));
```

--------------------------------

### Headless Markdown Editor with Keyboard Shortcuts

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Build a custom markdown editor UI using headless utilities. This example demonstrates a textarea that supports markdown keyboard shortcuts and newline handling.

```jsx
import React from "react";
import { 
  handleKeyDown, 
  shortcuts, 
  TextAreaCommandOrchestrator,
  getCommands,
} from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  const textareaRef = React.useRef(null);
  const orchestratorRef = React.useRef(null);
  
  React.useEffect(() => {
    if (textareaRef.current) {
      orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current);
    }
  }, []);

  const onKeyDown = (e) => {
    handleKeyDown(e, 2, false);
    if (orchestratorRef.current) {
      shortcuts(e, getCommands(), orchestratorRef.current);
    }
  };

  return (
    <textarea
      ref={textareaRef}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onKeyDown={onKeyDown}
      style={{ width: '100%', height: 200, padding: 10 }}
    />
  );
}
```

--------------------------------

### Add Help Command Tool to Toolbar

Source: https://github.com/uiwjs/react-md-editor/blob/master/README.md

Shows how to add a custom 'help' command to the editor's toolbar that opens a Markdown guide in a new tab. Requires React, useContext, MDEditor, and commands.

```jsx
import React, { useContext } from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";

const help = {
  name: "help",
  keyCommand: "help",
  buttonProps: { "aria-label": "Insert help" },
  icon: (
    <svg viewBox="0 0 16 16" width="12px" height="12px">
      <path
        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm.9 13H7v-1.8h1.9V13Zm-.1-3.6v.5H7.1v-.6c.2-2.1 2-1.9 1.9-3.2.1-.7-.3-1.1-1-1.1-.8 0-1.2.7-1.2 1.6H5c0-1.7 1.2-3 2.9-3 2.3 0 3 1.4 3 2.3.1 2.3-1.9 2-2.1 3.5Z"
        fill="currentColor"
      />
    </svg>
  ),
  execute: (state, api) => {
    window.open("https://www.markdownguide.org/basic-syntax/", "_blank");
  }
};

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <MDEditor
      value={value}
      preview="edit"
      commands={[...commands.getCommands(), help]}
      onChange={(val) => setValue(val)}
    />
  );
}

```

--------------------------------

### Headless Editor Command Orchestration

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/README.md

Illustrates the setup for a headless MDEditor, focusing on handling keyboard events and shortcuts using the provided utility functions. This is for advanced customization where the UI is managed separately.

```typescript
import {
  handleKeyDown,
  shortcuts,
  getCommands,
  TextAreaCommandOrchestrator,
} from '@uiw/react-md-editor';

const orchestrator = new TextAreaCommandOrchestrator(textareaElement);

const onKeyDown = (e) => {
  handleKeyDown(e, 2, false);
  shortcuts(e, getCommands(), orchestrator);
};
```

--------------------------------

### Create Type-Safe Markdown Preview Component

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

This example shows how to create a type-safe component for the Markdown preview using the provided `MarkdownPreviewProps` type. This ensures that props passed to the component are correctly typed.

```tsx
import type { MarkdownPreviewProps } from '@uiw/react-markdown-preview';

const MyPreview = (props: MarkdownPreviewProps) => {
  return <MDEditor.Markdown {...props} />;
};
```

--------------------------------

### Render KaTeX Mathematical Expressions

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Integrate KaTeX to render mathematical expressions. This example shows how to configure the previewOptions to intercept code blocks formatted with double dollar signs and render them as KaTeX.

```tsx
import MDEditor from '@uiw/react-md-editor';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';

<MDEditor
  value={markdown}
  onChange={setMarkdown}
  previewOptions={{
    components: {
      code: ({ children = [], className, ...props }) => {
        if (typeof children === 'string' && /^\$\$(.*)\$\$/.test(children)) {
          const html = katex.renderToString(
            children.replace(/^\$\$(.*)\$\$/, '$1'),
            { throwOnError: false }
          );
          return (
            <code
              dangerouslySetInnerHTML={{ __html: html }}
              style={{ background: 'transparent' }}
            />
          );
        }
        return <code className={className}>{children}</code>;
      },
    },
  }}
/>
```

--------------------------------

### Get Surrounding Word Boundaries

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/text-area-api.md

Finds the start and end positions of the word that contains the given position. Delimiters are whitespace and newlines.

```typescript
function getSurroundingWord(
  text: string,
  position: number
): TextRange
```

--------------------------------

### keyboard-shortcuts.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

This file covers keyboard input and shortcuts, including default shortcuts, automatic text formatting, and custom shortcut configurations.

```markdown
### 5. keyboard-shortcuts.md (415 lines)
**Purpose:** Keyboard input and shortcuts  
**Contents:**
- Default keyboard shortcuts reference
- Text formatting shortcuts
- Heading shortcuts
- List shortcuts
- Preview mode shortcuts
- Automatic text formatting (tab, enter)
- handleKeyDown function specification
- shortcuts function specification
- Shortcut format specification
- Modifier keys reference
- Regular keys reference
- Custom shortcuts
- Cross-platform handling
- Accessibility considerations
- Disabling specific shortcuts

**Sections:** 15
**Code Examples:** 8
**Shortcuts Documented:** 30+
```

--------------------------------

### Import No-Highlight Entry Point

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/api-exports.md

Use this entry point if syntax highlighting is not required, providing the smallest possible bundle size. Source: `src/index.nohighlight.tsx`.

```typescript
import MDEditor from '@uiw/react-md-editor/nohighlight';
```

--------------------------------

### context-api.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

The context-api.md file explains the React Context state management system, detailing the EditorContext, ContextStore interface, and common usage patterns.

```markdown
### 8. context-api.md (495 lines)
**Purpose:** React Context state management  
**Contents:**
- EditorContext overview
- ContextStore interface (40+ properties)
- State properties reference
- The dispatch function
- Reducer function
- Common usage patterns
- Text statistics plugin
- Table of contents generator
- Word count badge
- Auto-save implementation
- Collaborative editing pattern
- Best practices
- Type-safe context usage

**Sections:** 14
**Code Examples:** 15
**Properties Documented:** 40+
```

--------------------------------

### Get Default Toolbar Commands

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/api-exports.md

Retrieves the default set of toolbar commands. Import `commands` and `getCommands` from '@uiw/react-md-editor'.

```typescript
import { commands, getCommands } from '@uiw/react-md-editor';

const defaultCommands = getCommands();
```

--------------------------------

### Define TextRange Interface

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/types.md

Interface for specifying a character range within the text. Defines the start and end positions of a selection.

```typescript
interface TextRange {
  start: number;
  end: number;
}
```

--------------------------------

### Import Common Entry Point

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/api-exports.md

Use this entry point for syntax highlighting for common languages, resulting in a smaller bundle size. Source: `src/index.common.tsx`.

```typescript
import MDEditor from '@uiw/react-md-editor/common';
```

--------------------------------

### Get Textarea State

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/text-area-api.md

Retrieve the current text, selection, and cursor position from the textarea. Returns false if no textarea is associated.

```typescript
getState(): TextState | false
```

--------------------------------

### Custom Toolbars

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Customize the editor's toolbar by adding new commands. This example demonstrates adding a custom 'title3' command.

```jsx
import React, { useState } from "react";
import MDEditor, { commands } from '@uiw/react-md-editor';

const title3 = {
  name: 'title3',
  keyCommand: 'title3',
  buttonProps: { 'aria-label': 'Insert title3' },
  icon: (
    <svg width="12" height="12" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
    </svg>
  ),
  execute: (state, api) => {
    let modifyText = `### ${state.selectedText}\n`;
    if (!state.selectedText) {
      modifyText = `### `;
    }
    api.replaceSelection(modifyText);
  },
};

// Example usage would involve passing title3 to the 'commands' prop of MDEditor
```

--------------------------------

### Controlled Component Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Use a controlled component for managing the editor's state externally. This is the recommended approach for most use cases.

```tsx
const [value, setValue] = useState('');

<MDEditor value={value} onChange={setValue} />
```

--------------------------------

### Get Extra Toolbar Commands

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/api-exports.md

Retrieves the extra toolbar commands typically positioned on the right side. Import `getExtraCommands` from '@uiw/react-md-editor'.

```typescript
import { getExtraCommands } from '@uiw/react-md-editor';

const extraCommands = getExtraCommands();
```

--------------------------------

### commands.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

The commands.md file documents the toolbar commands system, detailing built-in commands, custom command creation, and keyboard shortcut formats.

```markdown
### 4. commands.md (590 lines)
**Purpose:** Toolbar commands system  
**Contents:**
- ICommand interface specification
- Built-in commands (30+) organized by category
- Text formatting commands (bold, italic, strikethrough)
- Heading commands (h1-h6)
- List commands (ordered, unordered, checked)
- Code commands (inline, block)
- Link and image commands
- Block commands (quote, hr, table)
- Preview mode commands
- UI control commands
- Command functions (getCommands, getExtraCommands, group)
- Custom command creation
- Keyboard shortcut format
- Command filtering

**Sections:** 15
**Code Examples:** 12
**Commands Documented:** 30+
```

--------------------------------

### Load and Apply Markdown Templates

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/advanced-features.md

This snippet demonstrates how to use a template system to load predefined markdown structures into the editor. Users can select from a dropdown to apply different templates.

```tsx
import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';

const TEMPLATES = {
  blog: `# Blog Post Title

**Author:** 
**Date:** 

## Introduction

## Content

## Conclusion
`,
  documentation: `# Documentation Title

## Overview

## Installation

## Usage

## API Reference

## Examples

## Contributing

## License
`,
  note: `# Note Title

**Tags:** 

## Content

---

**Created:** 
**Last updated:** 
`,
};

function EditorWithTemplates() {
  const [value, setValue] = useState('');
  const [selectedTemplate, setSelectedTemplate] = useState('note');

  const loadTemplate = (templateName) => {
    setSelectedTemplate(templateName);
    setValue(TEMPLATES[templateName]);
  };

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <label>Template: </label>
        <select value={selectedTemplate} onChange={(e) => loadTemplate(e.target.value)}>
          <option value="note">Note</option>
          <option value="blog">Blog Post</option>
          <option value="documentation">Documentation</option>
        </select>
      </div>
      <MDEditor value={value} onChange={setValue} height={400} />
    </div>
  );
}
```

--------------------------------

### Get Extra Toolbar Commands

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/commands.md

Retrieves commands specifically designed for the right-hand side of the toolbar, such as code editing and fullscreen toggles.

```typescript
function getExtraCommands(): ICommand[]
```

--------------------------------

### Import Markdown Preview CSS

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/api-exports.md

Import the stylesheet for the markdown preview component. This is a peer dependency.

```typescript
import '@uiw/react-markdown-preview/markdown.css';
```

--------------------------------

### Auto-Save Pattern

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Implement an auto-save feature for the editor content. This example saves the editor's value to localStorage after a short delay of inactivity.

```tsx
import React, { useState, useEffect } from 'react';
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = useState('');
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    // Auto-save after 1 second of inactivity
    const timer = setTimeout(() => {
      localStorage.setItem('draft', value);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    }, 1000);

    return () => clearTimeout(timer);
  }, [value]);

  return (
    <div>
      <MDEditor value={value} onChange={setValue} />
      <p>{saved ? '✓ Saved' : 'Unsaved changes'}</p>
    </div>
  );
}
```

--------------------------------

### Add Help Command Tool

Source: https://github.com/uiwjs/react-md-editor/blob/master/core/README.md

Shows how to add a custom 'help' command to the editor's toolbar that opens an external link when clicked.

```jsx
import React, { useContext } from "react";
import MDEditor, { commands } from "@uiw/react-md-editor";

const help = {
  name: "help",
  keyCommand: "help",
  buttonProps: { "aria-label": "Insert help" },
  icon: (
    <svg viewBox="0 0 16 16" width="12px" height="12px">
      <path
        d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm.9 13H7v-1.8h1.9V13Zm-.1-3.6v.5H7.1v-.6c.2-2.1 2-1.9 1.9-3.2.1-.7-.3-1.1-1-1.1-.8 0-1.2.7-1.2 1.6H5c0-1.7 1.2-3 2.9-3 2.3 0 3 1.4 3 2.3.1 2.3-1.9 2-2.1 3.5Z"
        fill="currentColor" />
    </svg>
  ),
  execute: (state, api) => {
    window.open("https://www.markdownguide.org/basic-syntax/", "_blank");
  }
};

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <MDEditor
      value={value}
      preview="edit"
      commands={[...commands.getCommands(), help]}
      onChange={(val) => setValue(val)}
    />
  );
}

```

--------------------------------

### Custom Image Component

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Customize the rendering of images (`<img>`) by providing a custom component to the `components.img` prop. This example ensures images are responsive.

```tsx
<MDEditor.Markdown
  source="![alt](image.png)"
  components={{
    img: ({ src, alt, ...props }) => (
      <img
        src={src}
        alt={alt}
        style={{ maxWidth: '100%', height: 'auto' }}
        {...props}
      />
    ),
  }}
/>
```

--------------------------------

### md-editor-component.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

This file details the main component API reference for the editor, including its signature, props, ref interface, and event handlers.

```markdown
### 3. md-editor-component.md (273 lines)
**Purpose:** Main component API reference  
**Contents:**
- Component signature
- Complete props reference (30+ props)
- Ref interface (RefMDEditor)
- Event handlers
- Component override system
- Theme configuration
- Advanced examples
- Dark mode example
- Fullscreen example
- Internal structure
- Context integration

**Sections:** 12
**Code Examples:** 6
**Props Documented:** 30+
```

--------------------------------

### Get Default Toolbar Commands

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/commands.md

Retrieves the standard set of commands for the editor's toolbar, including text formatting, links, and media insertion.

```typescript
function getCommands(): ICommand[]
```

--------------------------------

### Alternate Entry Points

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

Describes alternative import paths for specific use cases, such as common bundles or no-highlight versions.

```APIDOC
## Alternate Entry Points

These entry points allow for optimized imports based on specific needs, reducing bundle size.

### Common Bundle
- `react-md-editor/lib/common'

### No Highlight Bundle
- `react-md-editor/lib/no-highlight'

### Commands Bundle
- `react-md-editor/lib/commands'

### Commands CN Bundle
- `react-md-editor/lib/commands-cn'

### Import Example (No Highlight)
```javascript
import MDEditor from 'react-md-editor/lib/no-highlight';
```
```

--------------------------------

### Custom Link Handler

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Customize how anchor links (`<a>`) are rendered by providing a custom component to the `components.a` prop. This example ensures links open in a new tab.

```tsx
<MDEditor.Markdown
  source="[Link](https://example.com)"
  components={{
    a: ({ node, ...props }) => (
      <a {...props} target="_blank" rel="noopener noreferrer" />
    ),
  }}
/>
```

--------------------------------

### Main Entry Point Exports

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

Details the primary exports from the main entry point of the library.

```APIDOC
## Main Entry Point Exports

This section outlines the core components and functionalities directly available for import from the library's main entry point.

### Description
Provides access to the primary editor component and essential utilities.

### Import Example
```javascript
import MDEditor from 'react-md-editor';
```
```

--------------------------------

### Markdown Preview with Default Syntax Highlighting

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Code blocks within markdown are automatically highlighted using Prism.js by default. This enhances readability of code examples.

```markdown
```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```
```

--------------------------------

### Type-Safe Context Usage Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/context-api.md

Demonstrates how to use the `EditorContext` with proper TypeScript typing. Ensures type safety when accessing context values and dispatching actions.

```typescript
import { useContext } from 'react';
import { EditorContext, type ContextStore } from '@uiw/react-md-editor';

function TypedComponent(): React.ReactElement {
  const context: ContextStore = useContext(EditorContext);
  
  const updateContent = (newContent: string): void => {
    if (context.dispatch) {
      context.dispatch({ markdown: newContent });
    }
  };
  
  return (
    <div>
      <p>Current mode: {context.preview}</p>
      <button onClick={() => updateContent('# New Title')}> 
        Update
      </button>
    </div>
  );
}
```

--------------------------------

### Make Markdown Preview Responsive

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Apply styles to make the Markdown preview adapt to its container, ensuring it fits within available space. Use `overflow: 'auto'` for scrollable content.

```tsx
<MDEditor.Markdown
  source={markdown}
  style={{
    height: '100%',
    width: '100%',
    overflow: 'auto',
  }}
/>
```

--------------------------------

### Uncontrolled Component Example

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Use an uncontrolled component when you want to access the editor's value directly via a ref. The initial value can be set using `defaultValue`.

```tsx
const ref = useRef();

<MDEditor
  ref={ref}
  defaultValue=""
/>

// Access value later
const currentValue = ref.current?.markdown;
```

--------------------------------

### Full-Screen Control

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/context-api.md

Toggle the full-screen mode of the editor by dispatching an update to the `fullscreen` property in the EditorContext. This example shows a button that changes its text based on the current state.

```typescript
import { useContext } from 'react';
import { EditorContext } from '@uiw/react-md-editor';

function FullScreenButton() {
  const { fullscreen, dispatch } = useContext(EditorContext);
  
  const toggleFullscreen = () => {
    dispatch({ fullscreen: !fullscreen });
  };
  
  return (
    <button onClick={toggleFullscreen}>
      {fullscreen ? 'Exit' : 'Enter'} Fullscreen
    </button>
  );
}
```

--------------------------------

### Export All Types from Main Entry Point

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/types.md

Use this to export all types from the main entry point of the library.

```typescript
export * from './Types';
export * from './Context';
export * from './commands/';
export * from './utils/markdownUtils';
export * from './utils/InsertTextAtPosition';
```

--------------------------------

### Get Breaks Needed for Empty Line After

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/text-area-api.md

Calculates the number of newlines required after a specific position to ensure an empty line. This is useful for formatting paragraphs or list items.

```typescript
function getBreaksNeededForEmptyLineAfter(
  text: string,
  startPosition: number
): number
```

--------------------------------

### Get Breaks Needed for Empty Line Before

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/text-area-api.md

Calculates the number of newlines required before a specific position to ensure an empty line. This helps in maintaining proper markdown formatting.

```typescript
function getBreaksNeededForEmptyLineBefore(
  text: string,
  startPosition: number
): number
```

--------------------------------

### Custom KaTeX Preview in React MD Editor

Source: https://github.com/uiwjs/react-md-editor/blob/master/README.md

Configure MDEditor to render KaTeX math expressions within the preview. This requires installing the 'katex' package and importing its CSS.

```jsx
import React from "react";
import MDEditor from '@uiw/react-md-editor';
import { getCodeString } from 'rehype-rewrite';
import katex from 'katex';
import 'katex/dist/katex.css';

const mdKaTeX = `This is to display the 
\
$$\\c = \\pm\\sqrt{a^2 + b^2}$$
 in one line

\
\
```KaTeX
c = \\pm\\sqrt{a^2 + b^2}
```
`;

export default function App() {
  const [value, setValue] = React.useState(mdKaTeX);
  return (
    <MDEditor
      value={value}
      onChange={(val) => setValue(val)}
      previewOptions={{
        components: {
          code: ({ children = [], className, ...props }) => {
            if (typeof children === 'string' && /^\$\$(.*)\[\$\]$/.test(children)) {
              const html = katex.renderToString(children.replace(/^\$\$(.*)\[\$\]$/, '$1'), {
                throwOnError: false,
              });
              return <code dangerouslySetInnerHTML={{ __html: html }} style={{ background: 'transparent' }} />;
            }
            const code = props.node && props.node.children ? getCodeString(props.node.children) : children;
            if (
              typeof code === 'string' &&
              typeof className === 'string' &&
              /^language-katex/.test(className.toLocaleLowerCase())
            ) {
              const html = katex.renderToString(code, {
                throwOnError: false,
              });
              return <code style={{ fontSize: '150%' }} dangerouslySetInnerHTML={{ __html: html }} />;
            }
            return <code className={String(className)}>{children}</code>;
          },
        },
      }}
    />
  );
}
```

--------------------------------

### types.md Overview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/MANIFEST.md

This file focuses on TypeScript type definitions for the project, covering core types, context types, command types, and component types.

```markdown
### 7. types.md (564 lines)
**Purpose:** TypeScript type definitions  
**Contents:**
- Core types (PreviewType, Statistics, TextState)
- Context types (ContextStore, ExecuteCommandState)
- Command types (ICommand hierarchy)
- Component types (MDEditorProps, RefMDEditor)
- API types (TextAreaTextApi, Orchestrator)
- Utility type functions
- Type export locations
- Common type patterns
- Import examples
- Type-safe patterns

**Sections:** 15
**Code Examples:** 12
**Types Documented:** 50+
```

--------------------------------

### Implement Collaborative Editing

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/advanced-features.md

Integrate with Operational Transformation (OT) or CRDT for real-time collaboration. This example shows basic change broadcasting and application, requiring a backend WebSocket implementation.

```tsx
import React, { useState, useRef, useCallback } from 'react';
import MDEditor from '@uiw/react-md-editor';

function CollaborativeEditor({ userId, documentId }) {
  const [value, setValue] = useState('');
  const [remoteCursors, setRemoteCursors] = useState({});
  const editorRef = useRef();

  const handleChange = useCallback((newValue) => {
    setValue(newValue);

    // Send changes to server
    window.socket?.emit('document:change', {
      documentId,
      userId,
      content: newValue,
      timestamp: Date.now(),
    });
  }, [documentId, userId]);

  const handleRemoteChange = useCallback((data) => {
    // Apply remote changes (would need actual OT/CRDT implementation)
    setValue(data.content);
  }, []);

  React.useEffect(() => {
    window.socket?.on('document:change', handleRemoteChange);
    
    return () => {
      window.socket?.off('document:change', handleRemoteChange);
    };
  }, [handleRemoteChange]);

  return (
    <div>
      <div style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>
        Users: {Object.keys(remoteCursors).join(', ') || 'None'}
      </div>
      <MDEditor
        ref={editorRef}
        value={value}
        onChange={handleChange}
        height={400}
      />
    </div>
  );
}

```

--------------------------------

### Markdown Editor with Live Preview

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Integrate the markdown editor with its preview pane enabled. The 'live' option shows both the editor and the preview simultaneously.

```tsx
<MDEditor
  value={markdown}
  onChange={setMarkdown}
  preview="live" // Shows editor and preview
/>
```

--------------------------------

### Basic Editor Usage

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/api-exports.md

Demonstrates how to import and use the MDEditor component with basic state management for the markdown content.

```typescript
import React, { useState } from 'react';
import MDEditor from '@uiw/react-md-editor';
import '@uiw/react-md-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';

function App() {
  const [value, setValue] = useState('');
  return <MDEditor value={value} onChange={setValue} />;
}
```

--------------------------------

### Add Custom Commands to React MD Editor Toolbar

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/quick-start.md

Extend the editor's toolbar by defining custom commands. This example adds a 'insert-link' command that prompts the user for a URL.

```tsx
import React, { useState } from 'react';
import MDEditor, { commands } from '@uiw/react-md-editor';

const insertLink = {
  name: 'insert-link',
  keyCommand: 'insert-link',
  shortcuts: 'ctrlcmd+shift+l',
  icon: <svg>...</svg>,
  buttonProps: { 'aria-label': 'Insert link' },
  execute: (state, api) => {
    const url = prompt('Enter URL:');
    if (url) {
      api.replaceSelection(`[text](${url})`);
    },
  },
};

export default function App() {
  const [value, setValue] = useState('');

  return (
    <MDEditor
      value={value}
      onChange={setValue}
      commands={[
        commands.bold,
        commands.italic,
        insertLink,
        commands.divider,
        commands.codeBlock,
      ]}
    />
  );
}
```

--------------------------------

### Custom Code Block Styling

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/markdown-preview.md

Override the default rendering for code blocks (`<pre>` and `<code>`) using the `components` prop. This example applies custom styling to preformatted code blocks.

```tsx
<MDEditor.Markdown
  source={markdown}
  components={{
    code: ({ inline, className, ...props }) => {
      if (inline) {
        return <code className="inline-code" {...props} />;
      }
      return (
        <pre style={{ background: '#f5f5f5', padding: '10px' }}>
          <code className={className} {...props} />
        </pre>
      );
    },
  }}
/>
```

--------------------------------

### Set Selection Range

Source: https://github.com/uiwjs/react-md-editor/blob/master/_autodocs/text-area-api.md

Use setSelectionRange to programmatically move the cursor and adjust the text selection. Provide a TextRange object with start and end character positions. Returns the updated TextState.

```typescript
setSelectionRange(selection: TextRange): TextState
```

```typescript
const api = new TextAreaTextApi(textareaElement);
// Select characters 5-10
const newState = api.setSelectionRange({ start: 5, end: 10 });
```