# MarkdownEditor

WYSIWYG markdown editor based on Tiptap. Renders markdown visually (headings, lists, blockquotes) while editing, serializes to markdown string.

## Features

- Visual headings (H1, H2, H3) with proper sizing
- Bold, italic, strikethrough, inline code
- Bullet and ordered lists
- Blockquotes with left border
- Horizontal rules
- Toolbar with icon buttons
- Markdown input/output (stored as plain markdown string)
- SSR-safe (`immediatelyRender: false`)

## Quick Start

```tsx
import { MarkdownEditor } from '@djangocfg/ui-tools';

function MyComponent() {
  const [bio, setBio] = useState('# Hello\n\nThis is **markdown**.');

  return (
    <MarkdownEditor
      value={bio}
      onChange={setBio}
      placeholder="Write something..."
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | Markdown string |
| `onChange` | `(value: string) => void` | — | Called on every change |
| `placeholder` | `string` | `'Write markdown...'` | Placeholder text |
| `minHeight` | `number` | `120` | Min height in px |
| `className` | `string` | — | Additional CSS class |
| `disabled` | `boolean` | `false` | Read-only mode |
| `showToolbar` | `boolean` | `true` | Show formatting toolbar |
| `mentions` | `MentionConfig` | — | @mention autocomplete config |
| `onMentionIdsChange` | `(ids: string[]) => void` | — | Called when mentioned IDs change |

## Mentions

```tsx
<MarkdownEditor
  value={text}
  onChange={setText}
  mentions={{
    items: [
      { id: '1', label: 'Alice', thumbnail: '/alice.jpg' },
      { id: '2', label: 'Bob', description: 'Antagonist' },
    ],
  }}
  onMentionIdsChange={(ids) => console.log('Mentioned:', ids)}
/>
```

Type `@` to trigger autocomplete. Mentions render as inline chips.

## Dependencies

All Tiptap packages are included as direct dependencies — no extra installs needed.
