import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as RichTextEditorStories from './rich-text-editor.stories';

<Meta of={RichTextEditorStories} />

<Title />
<Subtitle>A lightweight, native WYSIWYG editor for structured document creation and AI-assisted workflows.</Subtitle>

<Description />

<Primary />

---

## Usage Patterns

### Standard Editor
Features a comprehensive toolbar with Undo/Redo, heading selection, text formatting, and alignment controls.

<Canvas of={RichTextEditorStories.Default} />

### In Side Panel (Assistant Workspace)
When used within a restricted space, the editor can be styled without external borders and shadows to sit flush within its container.

<Canvas of={RichTextEditorStories.InSidePanel} />

---

## Features

- **Format Control:** Paragraph, H1, H2, H3 via Radix Dropdown.
- **Rich Text:** Bold, Italic, Underline.
- **Lists:** Unordered (bullet) and Ordered (numbered) support.
- **Alignment:** Left, Center, and Right justification.
- **History:** Native Undo and Redo operations.
- **Extensive Configuration:** Toggle virtually every feature on/off via props (\`allowUndoRedo\`, \`allowHeadings\`, \`allowFormatting\`, \`allowAlignment\`, \`allowLists\`, \`allowSearch\`, \`allowLinks\`).
- **Live Metrics:** Word and character count natively supported and toggleable (\`showWordCount\`, \`showCharacterCount\`).
- **Toolbar Extensibility:** Inject custom buttons (e.g. "Save") via the `actionButton` prop.

---

## AI Best Practices

> [!IMPORTANT]
> - **Initial Value Only** — The `value` prop is used to mount the initial content. To avoid cursor jumps, do not force-update the `value` prop continuously from an external state while the user is typing; instead, capture changes via the `onChange` callback.
> - **Toolbar Actions** — Use the `actionButton` prop to inject primary actions directly into the editor's toolbar for better visibility and a "Premium" feel.