import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './EditorPanel.stories'

<Meta of={Stories} />

# EditorPanel

A floating MDX editor panel with Monaco editor, keyboard shortcuts, autosave, and session recovery.

## Usage

```tsx
import { EditorPanel } from '@/components/editor'

async function handleSave(content: string) {
  'use server'
  await saveToDatabase(content)
}

<EditorPanel
  path="/docs/my-page"
  initialContent={mdxContent}
  onSave={handleSave}
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `path` | `string` | `''` | Identifier for the content being edited |
| `initialContent` | `string` | `''` | Initial MDX content to load |
| `onSave` | `(content: string) => Promise<void>` | - | Async callback when saving |
| `shortcut` | `string` | `'meta+i'` | Keyboard shortcut to toggle editor |

## Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `⌘I` / `Ctrl+I` | Toggle editor panel |
| `⌘S` / `Ctrl+S` | Save content |
| `Escape` | Close editor |
| `⌘⇧F` | Format document |

## Features

- Monaco editor with MDX syntax highlighting
- Slide-in drawer with resizable width
- Autosave to localStorage every 30 seconds
- Session recovery for unsaved changes
- Real-time dirty state tracking
- Toast notifications for save status
- Keyboard-first interaction design
- Mobile-responsive full-screen mode

## Examples

### Default

Standard editor with trigger in bottom-right corner.

<Canvas of={Stories.Default} />

### Custom Shortcut

Editor with custom keyboard shortcut (⌘E instead of ⌘I).

<Canvas of={Stories.CustomShortcut} />