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.

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

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

Example

<.drag_handle />

Attributes

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

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.

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.

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.

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.

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.

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.

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.