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

Editor Block Control Components — 4 components for manipulating, converting,
and reordering content blocks within a rich text editor.

These components provide the UI chrome around editor blocks: add buttons,
type conversion menus, per-block floating toolbars, and drop zone indicators
for drag-and-drop reordering.

All components render without JavaScript and support dark mode via Tailwind v4
design tokens.

## Components

- `block_add_button/1`        — "+" button between blocks to insert new content
- `block_conversion_menu/1`   — dropdown menu to convert a block's type
- `block_toolbar/1`           — per-block floating toolbar with drag, type, and actions
- `block_drag_indicator/1`    — thin colored drop zone indicator line

# `block_add_button`

Renders a small circular "+" button for inserting a new block between
existing blocks.

The button is centered, semi-transparent, and becomes more visible on hover.
It dispatches whatever event is passed via the `:rest` global attributes
(typically `phx-click`).

## Example

    <.block_add_button phx-click="block:add" phx-value-position="3" />

## Attributes

* `id` (`:string`) - Optional identifier for the add button. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes (e.g. phx-click).

# `block_conversion_menu`

Renders a dropdown menu for converting a block's type.

Displays 10 conversion options: paragraph, heading 1-3, bullet list,
numbered list, blockquote, code block, callout, and toggle list. The
currently active type is highlighted.

## Example

    <.block_conversion_menu
      id="convert-menu-1"
      visible={@show_conversion}
      current_type="paragraph"
    />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the conversion menu.
* `visible` (`:boolean`) - Whether the menu is currently displayed. Defaults to `false`.
* `current_type` (`:string`) - The current block type. Defaults to `"paragraph"`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.

# `block_drag_indicator`

Renders a thin colored drop zone indicator line.

Used during drag-and-drop block reordering to show where the dragged block
will be dropped. The `:above` position applies a negative top margin; `:below`
applies a negative bottom margin.

## Example

    <.block_drag_indicator position={:above} />
    <.block_drag_indicator position={:below} />

## Attributes

* `position` (`:atom`) - Placement of the indicator line relative to the block. Defaults to `:above`. Must be one of `:above`, or `:below`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.

# `block_toolbar`

Renders a compact per-block floating toolbar with a drag handle, block type
indicator, duplicate button, and delete button.

The drag handle uses a 6-dot grip pattern. The toolbar appears when `visible`
is true and is typically positioned to the left of the active block.

## Example

    <.block_toolbar
      id="toolbar-block-1"
      visible={@active_block == "block-1"}
      block_type="heading-1"
    />

## Attributes

* `id` (`:string`) (required) - Unique identifier for the block toolbar.
* `visible` (`:boolean`) - Whether the toolbar is currently displayed. Defaults to `false`.
* `block_type` (`:string`) - Current block type label. Defaults to `"paragraph"`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. Additional HTML attributes.

---

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