# rn-simple-markdown-editor
URL: /docs/native/components/simple-markdown-editor

Plain-text markdown editor with a formatting toolbar, optional rendered preview and word count.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-simple-markdown-editor
```

The web editor wraps the DOM-only `overtype` library. The native editor is a multiline `TextInput` with the same props. The toolbar applies markdown to the current selection:

| Button | Result |
|--------|--------|
| Bold / Italic / Strikethrough / Code | Wraps the selection in `**` / `_` / `~~` / `` ` `` (inserts a placeholder when nothing is selected) |
| Link | `[text](https://)` |
| Heading / Bulleted list / Numbered list / Quote | Adds or removes `## ` / `- ` / `1. ` / `> ` on every selected line |

`preview` renders the markdown with the shared native markdown renderer: `true` shows it under the input, `'toggle'` adds Write / Preview tabs. Live syntax highlighting (overtype's overlay) is not available on native.

## Usage

```tsx
import { SimpleMarkdownEditor } from '@/components/docyrus-native/simple-markdown-editor';

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

```

```tsx

```

### Ref

```tsx
const editorRef = useRef<SimpleMarkdownEditorRef>(null);

editorRef.current?.insertText('@Alice ');
editorRef.current?.getInput(); // the underlying TextInput
```

| Method | Description |
|--------|-------------|
| `focus()` / `blur()` | Focus control |
| `getValue()` / `setValue(value)` | Read / replace the markdown |
| `insertText(text)` | Insert at the caret, replacing the selection |
| `getInput()` | Underlying `TextInput` (web: `getTextarea()`) |

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `ref` | `Ref<SimpleMarkdownEditorRef>` | - | focus / blur / getValue / setValue / insertText / getInput |
| `value` | `string` | - | Controlled markdown value |
| `defaultValue` | `string` | - | Uncontrolled initial value |
| `onValueChange` | `(value: string) => void` | - | Change callback |
| `variant` | `'default' \| 'muted'` | `'default'` | Visual style |
| `size` | `'sm' \| 'default' \| 'lg'` | `'default'` | Size (min heights 180 / 240 / 320) |
| `toolbar` | `boolean` | `true` | Show the formatting toolbar |
| `showStats` | `boolean` | `false` | Show a words / characters footer |
| `autoResize` | `boolean` | `false` | Grow with content between minHeight and maxHeight |
| `minHeight` | `number \| string` | `by size` | Minimum editor height |
| `maxHeight` | `number \| string \| null` | `null` | Maximum editor height |
| `lineHeight` | `number` | `1.6` | Line-height multiplier |
| `fontSize` | `number \| string` | `14 (16 for lg)` | Font size |
| `placeholder` | `string` | `'Write markdown…'` | Placeholder |
| `spellcheck` | `boolean` | `false` | Maps to spellCheck + autoCorrect |
| `resizable` | `boolean` | - | Accepted for web parity — ignored |
| `inputProps` | `Omit<TextInputProps, 'value' \| 'onChangeText' \| 'multiline' \| 'style'>` | - | Extra TextInput props (web: textareaProps) |
| `preview` | `boolean \| 'toggle'` | `false` | Rendered preview below the input (true) or Write / Preview tabs (toggle) |
| `className` | `string` | - | Container classes |

## Helpers

| Export | Description |
|--------|-------------|
| `wrapMarkdownSelection(value, selection, before, after?, placeholder?)` | Pure wrap transform used by the toolbar |
| `prefixMarkdownLines(value, selection, prefix \| 'ordered')` | Pure line-prefix toggle used by the toolbar |

## Type Exports

| Type | Description |
|------|-------------|
| `SimpleMarkdownEditorProps` | Props |
| `SimpleMarkdownEditorRef` | Ref handle |
| `SimpleMarkdownEditorVariant` / `SimpleMarkdownEditorSize` | Variant / size unions |
| `MarkdownEdit` | `{ value, selection }` result of the helpers |

## Differences from web

- `textareaProps` is `inputProps` (React Native `TextInputProps`).
- `resizable` is accepted and ignored. Use `autoResize`.
- The ref's `getTextarea()` is `getInput()`.
- New `preview` prop.