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

Editor Content Block Components — 14 rich content blocks for embedding
interactive and media elements inside a rich text editor.

These components cover collapsible toggle lists, tabbed content, video/audio
players, bookmark link previews, CTA buttons, progress indicators, labeled
dividers, math blocks, social embeds, PDF viewers, and map embeds.

All components render meaningful HTML without JavaScript (progressive
enhancement) and support dark mode via Tailwind v4 design tokens.

## Components

### Interactive Blocks
- `toggle_list/1`          — collapsible list container
- `toggle_list_item/1`     — individual toggleable details/summary item
- `tab_block/1`            — tabbed content sections with tab buttons
- `tab_block_panel/1`      — individual tab panel (shows/hides by active tab)

### Media Blocks
- `video_block/1`          — HTML5 video player with poster support
- `audio_block/1`          — audio player with labeled header
- `bookmark_card/1`        — URL preview card with favicon, image, and domain
- `social_embed_block/1`   — rich social card with provider icon

### Content Widgets
- `button_block/1`         — CTA button inside editor content
- `progress_bar_block/1`   — inline progress indicator with label
- `divider_with_label/1`   — HR with centered text label

### Specialized Blocks
- `math_block/1`           — LaTeX block with input and preview area
- `pdf_viewer_block/1`     — iframe PDF viewer with download link
- `map_embed_block/1`      — iframe map embed with aspect-video container

# `audio_block`

Renders an audio player with a labeled header.

Uses native `<audio controls>` for maximum browser compatibility.

## Example

    <.audio_block id="podcast-1" src="/audio/episode.mp3" title="Episode 42" />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the audio block.
* `src` (`:string`) (required) - URL of the audio source.
* `title` (`:string`) - Optional title label for the audio. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `bookmark_card`

Renders a URL preview card (bookmark) with optional image, title, description,
favicon, and domain display.

## Example

    <.bookmark_card
      id="bm-1"
      url="https://example.com/article"
      title="Great Article"
      description="A summary of the article content."
      favicon="https://example.com/favicon.ico"
      image="https://example.com/og-image.jpg"
    />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the bookmark card.
* `url` (`:string`) (required) - The bookmarked URL.
* `title` (`:string`) - Title of the bookmarked page. Defaults to `nil`.
* `description` (`:string`) - Description or excerpt. Defaults to `nil`.
* `favicon` (`:string`) - URL of the site favicon. Defaults to `nil`.
* `image` (`:string`) - URL of the preview image. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `button_block`

Renders a CTA button inside editor content.

When `href` is provided, renders as an `<a>` tag. Otherwise renders as a
`<button>`. Supports primary, outline, and ghost variants.

## Example

    <.button_block label="Get Started" href="/signup" variant={:primary} />
    <.button_block label="Learn More" variant={:outline} />

## Attributes

* `id` (`:string`) - Optional identifier for the button. Defaults to `nil`.
* `label` (`:string`) (required) - Button label text.
* `href` (`:string`) - URL for anchor-style button. Defaults to `nil`.
* `variant` (`:atom`) - Visual variant of the button. Defaults to `:primary`. Must be one of `:primary`, `:outline`, or `:ghost`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.

# `divider_with_label`

Renders a horizontal rule with a centered text label.

Uses a flex container with two lines (pseudo-elements via bg-border spans)
flanking the centered text.

## Example

    <.divider_with_label label="Section 2" />
    <.divider_with_label label="OR" />

## Attributes

* `label` (`:string`) (required) - Text label displayed at the center of the divider.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `map_embed_block`

Renders a bordered container with an iframe map embed in an aspect-video
aspect ratio.

## Example

    <.map_embed_block
      id="office-map"
      src="https://www.google.com/maps/embed?pb=..."
      title="Office Location"
    />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the map embed.
* `src` (`:string`) (required) - URL of the map embed (e.g. Google Maps embed).
* `title` (`:string`) - Accessible title for the map iframe. Defaults to `"Map"`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `math_block`

Renders a LaTeX math block with a textarea for input and a preview area.

The preview area includes a `data-math-preview` attribute for client-side
rendering via KaTeX or MathJax. Without JavaScript, the raw LaTeX source is
displayed as a fallback.

## Example

    <.math_block id="eq-1" value="E = mc^2" />
    <.math_block id="eq-2" value="\\int_0^1 x^2 dx" />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the math block.
* `value` (`:string`) - LaTeX source string. Defaults to `""`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `pdf_viewer_block`

Renders an iframe-based PDF viewer with a header showing the filename and
a download link.

The iframe has `type="application/pdf"` and a minimum height of 500px for
adequate viewing area.

## Example

    <.pdf_viewer_block id="report" src="/files/quarterly-report.pdf" />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the PDF viewer.
* `src` (`:string`) (required) - URL of the PDF file.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `progress_bar_block`

Renders an inline progress bar with optional label and percentage display.

The bar width is set via inline style based on the `value` attribute (0-100).

## Example

    <.progress_bar_block value={75} label="Upload progress" />
    <.progress_bar_block id="proj-progress" value={42} />

## Attributes

* `id` (`:string`) - Optional identifier for the progress block. Defaults to `nil`.
* `value` (`:integer`) - Progress value between 0 and 100. Defaults to `0`.
* `label` (`:string`) - Optional label text above the bar. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `social_embed_block`

Renders a rich social card with provider icon and a link to the content.

The provider determines the icon and label. Links open in a new tab with
`rel="noopener noreferrer"` for security.

## Example

    <.social_embed_block id="tweet-1" url="https://twitter.com/user/status/123" provider={:twitter} />
    <.social_embed_block id="yt-1" url="https://youtube.com/watch?v=abc" provider={:youtube} />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the social embed.
* `url` (`:string`) (required) - URL of the social post or content.
* `provider` (`:atom`) - Social media provider for icon display. Defaults to `:generic`. Must be one of `:twitter`, `:youtube`, `:instagram`, or `:generic`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `tab_block`

Renders tabbed content sections with a tab button bar and bottom border indicator.

The `active_tab` defaults to the first tab ID when not provided. Each tab button
dispatches a `phx-click` event for server-side tab switching.

## Example

    <.tab_block
      id="code-tabs"
      tabs={[%{id: "elixir", label: "Elixir"}, %{id: "js", label: "JavaScript"}]}
      active_tab="elixir"
    >
      <.tab_block_panel id="panel-elixir" tab_id="elixir" active_tab="elixir">
        Elixir code here.
      </.tab_block_panel>
      <.tab_block_panel id="panel-js" tab_id="js" active_tab="elixir">
        JS code here.
      </.tab_block_panel>
    </.tab_block>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the tab block.
* `tabs` (`:list`) - List of maps with `:label` and `:id` keys representing each tab. Defaults to `[]`.
* `active_tab` (`:string`) - The ID of the currently active tab. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
## Slots

* `inner_block` (required) - Tab panels (use tab_block_panel components).

# `tab_block_panel`

Renders an individual tab panel that shows or hides based on matching
`tab_id` to `active_tab`.

## Example

    <.tab_block_panel id="panel-1" tab_id="overview" active_tab="overview">
      Overview content here.
    </.tab_block_panel>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the tab panel.
* `tab_id` (`:string`) (required) - The tab ID this panel belongs to.
* `active_tab` (`:string`) - The currently active tab ID. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
## Slots

* `inner_block` (required) - Panel content.

# `toggle_list`

Renders a collapsible list container.

Wraps toggle list items in a semantic `role="list"` container with
`data-type="toggleList"` for editor integration.

## Example

    <.toggle_list id="my-toggles">
      <.toggle_list_item id="item-1" label="Section A" open={true}>
        Content for section A.
      </.toggle_list_item>
    </.toggle_list>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the toggle list.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
## Slots

* `inner_block` (required) - Toggle list items.

# `toggle_list_item`

Renders an individual toggleable item using `<details>/<summary>`.

The chevron icon rotates when the item is open. Uses native HTML disclosure
so it works without JavaScript.

## Example

    <.toggle_list_item id="faq-1" label="What is PhiaUI?" open={true}>
      PhiaUI is a component library for Phoenix LiveView.
    </.toggle_list_item>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the toggle item.
* `label` (`:string`) (required) - Summary label text.
* `open` (`:boolean`) - Whether the item is initially expanded. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
## Slots

* `inner_block` (required) - Collapsible content.

# `video_block`

Renders an HTML5 video player in a rounded container.

Supports poster image, native controls, and autoplay (muted when autoplay
is enabled for browser compatibility).

## Example

    <.video_block id="demo-vid" src="/videos/demo.mp4" poster="/images/poster.jpg" />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the video block.
* `src` (`:string`) (required) - URL of the video source.
* `poster` (`:string`) - URL of the poster/thumbnail image. Defaults to `nil`.
* `controls` (`:boolean`) - Whether to show native video controls. Defaults to `true`.
* `autoplay` (`:boolean`) - Whether to autoplay the video. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

---

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