# `PhiaUi.Components.Editor.MediaBlocks`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/media_blocks.ex#L1)

Editor Media Block Components — 9 rich media blocks for embedding images,
tables, equations, attachments, diagrams, and drawings inside a rich text editor.

All components render meaningful HTML without JavaScript (progressive enhancement).
Interactive behaviors (table inserter hover, drawing canvas) use `phx-hook` for
optional JS enhancement.

## Components

### Media & Embeds
- `image_block/1`            — figure with image, caption, and alignment
- `embed_block/1`            — iframe/embed for YouTube, Vimeo, Twitter, generic URLs
- `file_attachment_block/1`  — downloadable file card with icon and metadata

### Table Tools
- `table_inserter/1`         — hoverable grid for picking table dimensions (N x M)
- `table_operations/1`       — toolbar with row/column/merge operations
- `table_of_contents/1`      — navigation list generated from headings

### Specialized Blocks
- `equation_editor/1`        — math equation textarea with preview area
- `diagram_block/1`          — code editor for Mermaid/PlantUML/DOT with preview
- `drawing_canvas/1`         — HTML canvas element with phx-hook for freehand drawing

# `diagram_block`

Renders a diagram block with a source code editor and a preview area.

The source textarea accepts Mermaid, PlantUML, or DOT graph notation. The preview
div is a placeholder for client-side rendering (the diagram library renders into it
via a JS hook or external script). Without JavaScript, the raw source is displayed.

## Example

    <.diagram_block id="flow-1" language={:mermaid} source="graph TD; A-->B; B-->C;" />

## Attributes

* `id` (`:string`) (required)
* `source` (`:string`) - Defaults to `""`.
* `language` (`:atom`) - Defaults to `:mermaid`. Must be one of `:mermaid`, `:plantuml`, or `:dot`.
* `class` (`:string`) - Defaults to `nil`.

# `drawing_canvas`

Renders an HTML canvas element for freehand drawing.

The `PhiaDrawingCanvas` hook initializes pointer-event-based drawing on the canvas.
Without JavaScript, a placeholder message is shown via the `<canvas>` fallback content.

## Example

    <.drawing_canvas id="sketch-1" width="100%" height="400px" />

## Attributes

* `id` (`:string`) (required)
* `width` (`:string`) - Defaults to `"100%"`.
* `height` (`:string`) - Defaults to `"300px"`.
* `class` (`:string`) - Defaults to `nil`.

# `embed_block`

Renders an embed block for external content (YouTube, Vimeo, Twitter, generic URLs).

The `:type` attribute can be set to `:auto` to detect the provider from the URL.
YouTube and Vimeo URLs render responsive iframes; Twitter renders a link card;
generic URLs render in a sandboxed iframe.

## Example

    <.embed_block id="vid-1" url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
    <.embed_block id="tweet-1" url="https://twitter.com/elikiir/status/123" type={:twitter} />

## Attributes

* `id` (`:string`) (required)
* `url` (`:string`) (required)
* `type` (`:atom`) - Defaults to `:auto`. Must be one of `:auto`, `:youtube`, `:vimeo`, `:twitter`, or `:generic`.
* `class` (`:string`) - Defaults to `nil`.

# `equation_editor`

Renders a math equation editor with a textarea for input and a preview area.

The preview div is a placeholder for client-side rendering (e.g., KaTeX or MathJax).
Without JavaScript, the raw LaTeX source is shown in the preview.

## Example

    <.equation_editor id="eq-1" value="E = mc^2" />

## Attributes

* `id` (`:string`) (required)
* `value` (`:string`) - Defaults to `""`.
* `class` (`:string`) - Defaults to `nil`.

# `file_attachment_block`

Renders a file attachment card with an icon, filename, optional size, and download link.

When `:href` is provided, the card becomes a downloadable link. The `:icon` attribute
accepts an emoji or text label; a default file icon SVG is used when omitted.

## Example

    <.file_attachment_block name="report.pdf" size="2.4 MB" href="/files/report.pdf" />
    <.file_attachment_block name="data.csv" size="128 KB" icon="📊" />

## Attributes

* `name` (`:string`) (required)
* `size` (`:string`) - Defaults to `nil`.
* `icon` (`:string`) - Defaults to `nil`.
* `href` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.

# `image_block`

Renders an image block as a `<figure>` with optional `<figcaption>`.

Supports left/center/right alignment and configurable width.

## Example

    <.image_block id="hero-img" src="/images/hero.jpg" alt="Hero banner"
                  caption="Our latest product launch" alignment={:center} width="80%" />

## Attributes

* `id` (`:string`) (required)
* `src` (`:string`) (required)
* `alt` (`:string`) - Defaults to `""`.
* `caption` (`:string`) - Defaults to `nil`.
* `alignment` (`:atom`) - Defaults to `:center`. Must be one of `:left`, `:center`, or `:right`.
* `width` (`:string`) - Defaults to `"100%"`.
* `resizable` (`:boolean`) - Enable drag-to-resize handles via PhiaImageResize hook. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

# `table_inserter`

Renders a grid of hoverable cells for picking table dimensions.

Users hover over the grid to highlight cells and see a "N x M" label indicating
the resulting table size. Each cell triggers a `phx-click` event with the
selected row and column counts.

## Example

    <.table_inserter id="table-picker" max_rows={6} max_cols={6} />

## Attributes

* `id` (`:string`) (required)
* `max_rows` (`:integer`) - Defaults to `8`.
* `max_cols` (`:integer`) - Defaults to `8`.
* `class` (`:string`) - Defaults to `nil`.

# `table_of_contents`

Renders a table of contents navigation list generated from document headings.

Each heading in the `:headings` list should be a map with `:level` (integer 1-6),
`:text` (string), and `:id` (string anchor ID) keys. Items are indented by level.

## Example

    <.table_of_contents id="toc" headings={[
      %{level: 1, text: "Introduction", id: "intro"},
      %{level: 2, text: "Getting Started", id: "getting-started"},
      %{level: 2, text: "Configuration", id: "config"},
      %{level: 1, text: "API Reference", id: "api"}
    ]} />

## Attributes

* `id` (`:string`) (required)
* `headings` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.

# `table_operations`

Renders a toolbar with table manipulation buttons: add/remove rows and columns,
and merge cells.

Each button dispatches a `phx-click` event with the operation name and the
associated editor ID.

## Example

    <.table_operations id="table-ops" editor_id="my-editor" />

## Attributes

* `id` (`:string`) (required)
* `editor_id` (`:string`) (required)
* `interactive` (`:boolean`) - Enable PhiaTableEditor hook for cell selection, resize, and Tab navigation. Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*