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

Extensions Suite — 10 components for extending the PhiaUI rich text editor
with plugins, emoji, special characters, and block-level controls.

These components provide the UI layer for editor extension features. They are
designed to be composed inside the editor toolbar or sidebar slots.

## Components

### Extension Management
- `extension_toolbar_slot/1`     — renders extension buttons in the toolbar
- `extension_sidebar_panel/1`    — sidebar panel listing available extensions

### Content Insertion
- `emoji_picker_block/1`         — tabbed emoji picker with categories and recents
- `special_character_picker/1`   — tabbed special character picker (math, arrows, etc.)

### Block-Level Controls
- `drag_handle/1`                — six-dot grip icon for block reordering
- `block_type_menu/1`            — dropdown for changing block type (paragraph, heading, etc.)
- `placeholder_extension/1`      — gray placeholder text for empty blocks
- `typography_extension/1`       — status badge for smart typography rules

### Node Utilities
- `unique_id_extension/1`        — hidden div with a data-extension-id attribute
- `custom_node_renderer/1`       — wrapper div for rendering custom node types

# `block_type_menu`

Renders a dropdown menu for changing the current block type.

Shows options for paragraph, heading 1-3, bullet list, numbered list,
blockquote, and code block. The current type is highlighted.

## Example

    <.block_type_menu id="block-menu" visible={@show_block_menu} current_type="heading-1" />

## Attributes

* `id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `current_type` (`:string`) - Defaults to `"paragraph"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `custom_node_renderer`

Renders a wrapper `<div>` for custom editor node types.

Provides `data-node-type` and `data-node-data` attributes for JS hooks
to identify and interact with custom blocks.

## Example

    <.custom_node_renderer id="embed-1" node_type="youtube" data={%{url: "https://..."}}>
      <iframe src="..." />
    </.custom_node_renderer>

## Attributes

* `id` (`:string`) (required)
* `node_type` (`:string`) (required)
* `data` (`:map`) - Defaults to `%{}`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `drag_handle`

Renders a six-dot grip icon for block-level drag reordering.

## Example

    <.drag_handle />

## Attributes

* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `emoji_picker_block`

Renders a tabbed emoji picker with category tabs and a grid area.

Emoji content is populated client-side by a JS hook. This component provides
the structural UI with category tabs and a placeholder grid.

## Example

    <.emoji_picker_block id="emoji" visible={@show_emoji} recent={@recent_emoji} />

## Attributes

* `id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `categories` (`:list`) - Defaults to `[:smileys, :people, :nature, :food, :travel, :activities, :objects, :symbols]`.
* `recent` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `extension_sidebar_panel`

Renders a sidebar panel listing available extensions with active highlighting.

Each item in `:extensions` should be a map with `:id`, `:label`, and
optional `:description` keys.

## Example

    <.extension_sidebar_panel
      id="ext-panel"
      extensions={[
        %{id: "emoji", label: "Emoji Picker", description: "Insert emoji"},
        %{id: "toc", label: "Table of Contents", description: "Auto-generated TOC"}
      ]}
      active_extension="emoji"
    />

## Attributes

* `id` (`:string`) (required)
* `title` (`:string`) - Defaults to `"Extensions"`.
* `extensions` (`:list`) - Defaults to `[]`.
* `active_extension` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `extension_toolbar_slot`

Renders a row of toolbar buttons for registered extensions.

Each item in `:extensions` should be a map with `:id`, `:label`, and `:icon`
(an icon name string) keys.

## Example

    <.extension_toolbar_slot
      id="ext-toolbar"
      extensions={[
        %{id: "emoji", label: "Emoji", icon: "smile"},
        %{id: "table", label: "Table", icon: "grid"}
      ]}
    />

## Attributes

* `id` (`:string`) (required)
* `extensions` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `placeholder_extension`

Renders gray placeholder text for an empty editor block.

The placeholder text is determined by the block `:type`, or can be overridden
with the `:text` attr.

## Example

    <.placeholder_extension type={:heading} />
    <.placeholder_extension text="Start typing here..." />

## Attributes

* `type` (`:atom`) - Defaults to `:paragraph`.
* `text` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `special_character_picker`

Renders a tabbed special character picker with category tabs and character grids.

Each tab shows a grid of clickable special characters. Clicking a character
fires `phx-click="special-char:insert"`.

## Example

    <.special_character_picker id="chars" visible={@show_chars} />

## Attributes

* `id` (`:string`) (required)
* `visible` (`:boolean`) - Defaults to `false`.
* `categories` (`:list`) - Defaults to `[:math, :arrows, :currency, :greek, :latin]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `typography_extension`

Renders a small status badge showing whether smart typography is on or off.

When enabled, displays the active rules count. Rules include `:smart_quotes`,
`:em_dash`, and `:ellipsis`.

## Example

    <.typography_extension enabled={true} rules={[:smart_quotes, :em_dash]} />

## Attributes

* `enabled` (`:boolean`) - Defaults to `true`.
* `rules` (`:list`) - Defaults to `[:smart_quotes, :em_dash, :ellipsis]`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

# `unique_id_extension`

Renders a hidden `<div>` with a unique `data-extension-id` attribute.

Used internally to assign stable IDs to editor blocks for collaboration,
commenting, and version tracking.

## Example

    <.unique_id_extension prefix="sec" />

## Attributes

* `prefix` (`:string`) - Defaults to `"block"`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

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