PhiaUi.Components.Editor.MediaBlocks (phia_ui v0.1.17)

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

Summary

Functions

diagram_block(assigns)

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

drawing_canvas(assigns)

Renders an HTML canvas element for freehand drawing.

embed_block(assigns)

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

equation_editor(assigns)

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

file_attachment_block(assigns)

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

image_block(assigns)

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

table_inserter(assigns)

Renders a grid of hoverable cells for picking table dimensions.

table_of_contents(assigns)

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

table_operations(assigns)

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

Functions

diagram_block(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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(assigns)

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.