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

Editor Advanced Block Components — 5 specialized blocks for power-user
editing workflows: synced (reusable) blocks, multi-column layouts with
drag-resize dividers, executable code sandboxes, A4 page containers,
and page header/footer chrome.

These components enable document-level features found in advanced editors
like Notion, Google Docs, and Overleaf.

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

## Components

- `synced_block/1`         — reusable content reference with synced indicator
- `columns_block/1`        — multi-column layout with drag-resize dividers
- `code_sandbox_block/1`   — executable code editor with output area
- `a4_page/1`              — A4 page container with margins and page numbering
- `page_header_footer/1`   — header/footer bar for A4 page containers

# `a4_page`

Renders an A4 page container with margins, white background, shadow, and
optional header/footer areas.

The container is styled for A4 dimensions (210mm x 297mm) at `@media print`.
On screen, it renders as a white page with shadow and padding approximating
standard margins (25.4mm). Page number is shown in the footer when provided.

## Example

    <.a4_page id="page-1" page_number={1}>
      <:header>My Document</:header>
      Page content goes here.
      <:footer>Confidential</:footer>
    </.a4_page>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the A4 page.
* `page_number` (`:integer`) - Page number (displayed in footer). Defaults to `nil`.
* `show_header` (`:boolean`) - Whether to render the header slot. Defaults to `true`.
* `show_footer` (`:boolean`) - Whether to render the footer slot. Defaults to `true`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `header` - Optional header content for the page.
* `inner_block` (required) - Main page content.
* `footer` - Optional footer content for the page.

# `code_sandbox_block`

Renders an executable code block with a code editor textarea and an output
display area.

The header shows the language label and a "Run" button that dispatches
`phx-click="code-sandbox:run"` with the block ID. The output area renders
in a monospace pre element with a muted background.

## Example

    <.code_sandbox_block
      id="sandbox-1"
      language="elixir"
      code="IO.puts(:hello)"
      output="hello"
    />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the code sandbox.
* `language` (`:string`) - Programming language label. Defaults to `"javascript"`.
* `code` (`:string`) - Source code content. Defaults to `""`.
* `output` (`:string`) - Execution output text. Defaults to `""`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `columns_block`

Renders a multi-column layout with CSS grid and vertical dividers between columns.

Each column has `min-w-0` to prevent content overflow, and a vertical divider
with `cursor-col-resize` and hover highlight between columns. Columns are
indexed via `data-column-index`.

## Example

    <.columns_block id="two-col" columns={2}>
      <:column>Left column content</:column>
      <:column>Right column content</:column>
    </.columns_block>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the columns block.
* `columns` (`:integer`) - Number of columns (1-4). Defaults to `2`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `column` - Individual column content (repeatable slot).

# `page_header_footer`

Renders a header or footer bar for A4 page containers.

For headers: displays the document title on the left.
For footers: displays the document title on the left and the page number
(with optional total pages) on the right.

## Example

    <.page_header_footer type={:header} document_title="Annual Report 2025" />
    <.page_header_footer type={:footer} document_title="Annual Report" page_number={3} total_pages={12} />

## Attributes

* `id` (`:string`) - Optional identifier. Defaults to `nil`.
* `type` (`:atom`) - Whether this is a header or footer. Defaults to `:header`. Must be one of `:header`, or `:footer`.
* `page_number` (`:integer`) - Current page number. Defaults to `nil`.
* `total_pages` (`:integer`) - Total number of pages. Defaults to `nil`.
* `document_title` (`:string`) - Document title to display. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `synced_block`

Renders a reusable content reference block with a "Synced" badge indicator.

Synced blocks display the same content as the original source block. Changes
to the source propagate to all synced instances. The block has a subtle dashed
border to visually distinguish it from regular blocks.

## Example

    <.synced_block id="sync-1" source_id="original-block-42">
      This content is synced from block 42.
    </.synced_block>

## Attributes

* `id` (`:string`) (required) - Unique identifier for the synced block instance.
* `source_id` (`:string`) (required) - ID of the original source block being referenced.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.
## Slots

* `inner_block` (required) - Block content (mirrors the source block).

---

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