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

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

Summary

Functions

block_add_button(assigns)

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

block_conversion_menu(assigns)

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

block_drag_indicator(assigns)

Renders a thin colored drop zone indicator line.

block_toolbar(assigns)

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

Functions

block_add_button(assigns)

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

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

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

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.