Markdown Input
dm_markdown_input
## Overview
A rich markdown editor using the `<el-dm-markdown-input>` custom element.
Provides a split Write/Preview interface with syntax highlighting and optional
Mermaid diagram support.
Requires `@duskmoon-dev/el-markdown-input` registered in your app:
```js
import "@duskmoon-dev/el-markdown-input/register";
```
## Usage
```elixir
# Standalone
<.dm_markdown_input name="body" value={@body} />
# With Phoenix form field
<.dm_markdown_input field={@form[:body]} placeholder="Write markdown here…" />
# With theme and options
<.dm_markdown_input
field={@form[:content]}
theme="atom-one-dark"
no_mermaid={true}
class="h-96"
/>
```
## Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `field` | `FormField` | — | Phoenix form field (sets id/name/value automatically) |
| `name` | `string` | `nil` | HTML name for form submission |
| `value` | `any` | `nil` | Markdown content |
| `id` | `any` | `nil` | HTML id |
| `placeholder` | `string` | `nil` | Placeholder text |
| `theme` | `string` | `nil` | Syntax theme: `github`, `atom-one-dark`, `atom-one-light`, `auto` |
| `no_mermaid` | `boolean` | `false` | Disable Mermaid diagram rendering |
| `disabled` | `boolean` | `false` | Disable the editor |
| `readonly` | `boolean` | `false` | Make the editor read-only |
| `upload_url` | `string` | `nil` | POST endpoint for file uploads |
| `max_words` | `integer` | `nil` | Soft word cap shown in status bar |
| `auto_grow` | `boolean` | `false` | Grow with content; bounds use `--md-editor-min-height` / `--md-editor-max-height` (12rem / 24rem) |
| `resize` | `string` | `nil` | Resize behavior: `none`, `vertical`, `horizontal`, `both` |
| `live_preview` | `boolean` | `false` | Enable live preview rendering |
| `debounce` | `integer` | `nil` | Debounce delay (ms) for preview |
| `class` | `any` | `nil` | Additional CSS classes |
## Slots
| Slot | Description |
|------|-------------|
| `:bottom` | Replaces the entire bottom status bar |
| `:bottom_start` | Left section of the bottom bar (default: attach files button) |
| `:bottom_end` | Right section of the bottom bar (default: word/char count) |
File Attachments
Drag-and-drop, paste, or click "Attach files" to add files.
Without an upload_url, files are stored locally and submitted
as {name}_files form fields.
Word Limit
The status bar shows a word count with warning at 80% and error at 100% of the limit.
Custom Bottom Bar
Use :bottom_start
and :bottom_end
slots to customize the status bar.
Draft
Auto-saved
No Preview with Custom Footer
Write-only mode with no_preview hides the preview tab and toolbar.
The bottom bar is fully customized with a submit button and character info.
Send