Turn Into Menu

# Brok UI: Turn Into Menu (`turn-into-menu`)

Dropdown to convert the current editor block to a different type. Owns the editor's block-type list (`types`), offers a label or current-type trigger (or a custom trigger slot) and accepts extra rows after the list; marks the active type with a check icon. Composed as <x-ui.editor.turn-into-menu>; <x-ui.turn-into-menu> stays as the compatibility tag.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add turn-into-menu
```

## Usage

```blade
{{-- The menu drops below its trigger: keep the trigger at the top so the
     open list fits the viewport. --}}
<div class="flex min-h-144 w-full items-start justify-center p-6">
    <x-ui.editor.turn-into-menu />
</div>
```

## Props

- `align` (string, default `start`) — Alignment of the dropdown panel relative to its trigger.
- `trigger` (string, default `label`) — Trigger style: label (static pill), current (reads the active block type), or a custom trigger slot.
- `types` (mixed|null, default `null`) — Overrides the default block-type list; each entry is {type, label, icon} or {separator: true}.
- `label` (mixed|null, default `null`) — Section label shown above the list; defaults to 'Turn into'.
- `contentClass` (mixed|null, default `null`) — Extra classes applied to the dropdown panel, such as a fixed width.

## Use when

- Use when users need rich structured authoring, annotation, or collaborative editing controls.
- Converting the current editor block to a different type, such as a heading, list, quote, or code block.
- Sharing one canonical block-type list across the toolbar's dropdown and the block handle's grip menu instead of duplicating labels and icons.

## Avoid when

- Do not use rich editor affordances for simple one-line or plain-text tasks.
- The block types shown must differ meaningfully by context; pass types to override the default list rather than avoiding the component.
- Wanting a floating, trigger-based palette instead of a fixed conversion menu; use slash-menu instead.

## Anti-patterns

- Rich editors for one-line or easily validated input

## Rules

- Use the `<brok:turn-into-menu>` tag (or `<x-ui.turn-into-menu>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/turn-into-menu
- Registry JSON (files, props, contract): https://brokui.dev/r/open/turn-into-menu.json

@props([
    'align' => 'start',
    'trigger' => 'label',
    'types' => null,
    'label' => null,
    'contentClass' => null,
])

{{--
    Turn Into Menu — convert the current editor block to a different type.

    Owns the editor's block-type list: every other editor part that offers
    "turn into" (the toolbar's block-type dropdown, the block handle's grip
    menu) composes this component instead of carrying its own copy of the
    labels and icons.

    Composes <x-ui.dropdown>. Each item dispatches `editor-block { type }` which
    bubbles up to <x-ui.editor> to apply the block transformation.

    `types`   — override the list: [['type' => 'h1', 'label' => 'Heading 1',
                'icon' => '<svg path d…>'], ['separator' => true], …].
    `trigger` — `label` (the default "Turn into" pill), `current` (a fixed-width
                pill that reads the active block type from the editor's
                `blockType`), or pass a <x-slot:trigger> for a custom control.
    `label`   — the section label above the list (default "Turn into").
    Inside an editor, a "Callout type" submenu (info / warning / success /
    note) follows the list while the targeted block is a callout; each row
    dispatches `editor-callout { variant }`.
    `contentClass` — extra classes for the menu panel (a width, for example).
    default slot — extra <x-ui.dropdown.item> rows rendered after the list.

    @mousedown.prevent on every item preserves the editor's text selection so
    the transformation targets the correct block.

    If `isBlock(type)` is available in an ancestor scope (provided by the
    editor host or a wrapping x-data), the active type shows a check icon. The
    guard `typeof isBlock === 'function'` prevents errors when used standalone.
--}}
@php
    $defaultTypes = [
        ['type' => 'paragraph', 'label' => __('Text'), 'icon' => 'M4 6h16M4 12h16M4 18h7'],
        ['type' => 'h1', 'label' => __('Heading 1'), 'icon' => 'M4 6v12M4 12h8m0-6v12M16 8l2-2v10'],
        ['type' => 'h2', 'label' => __('Heading 2'), 'icon' => 'M4 6v12M4 12h8m0-6v12M15 10c0-1.1.9-2 2-2s2 .9 2 2c0 1.5-2 3-2 3h4'],
        ['type' => 'h3', 'label' => __('Heading 3'), 'icon' => 'M4 6v12M4 12h8m0-6v12'],
        ['separator' => true],
        ['type' => 'bulleted', 'label' => __('Bulleted list'), 'icon' => 'M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'],
        ['type' => 'numbered', 'label' => __('Numbered list'), 'icon' => 'M10 6h11M10 12h11M10 18h11M4 6h-.5v3M4 15c.5-.5 1-1 1-1.5S5 12 4 12H3m.5 6H3m0 0h1.5'],
        ['type' => 'todo', 'label' => __('To-do list'), 'icon' => 'M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11'],
        ['type' => 'toggle', 'label' => __('Toggle list'), 'icon' => 'M4 6l4 4-4 4M12 8h8M12 14h8M8 20h12'],
        ['separator' => true],
        ['type' => 'blockquote', 'label' => __('Quote'), 'icon' => 'M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1zm12 0c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'],
        ['type' => 'code', 'label' => __('Code block'), 'icon' => 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'],
        ['type' => 'callout', 'label' => __('Callout'), 'icon' => 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
    ];

    // Callout variants: offered below the list while the targeted block (the
    // hovered one, else the caret's) is a callout.
    $calloutVariants = [
        'info' => __('Info'),
        'warning' => __('Warning'),
        'success' => __('Success'),
        'note' => __('Note'),
    ];

    $types = is_array($types) && $types !== [] ? array_values($types) : $defaultTypes;
    $label ??= __('Turn into');

    $labels = [];
    foreach ($types as $entry) {
        if (! empty($entry['type'])) {
            $labels[(string) $entry['type']] = (string) ($entry['label'] ?? $entry['type']);
        }
    }
    $fallbackLabel = $labels['paragraph'] ?? (reset($labels) ?: __('Text'));

    $customTrigger = $trigger instanceof \Illuminate\View\ComponentSlot ? $trigger : null;
    $triggerStyle = $customTrigger ? 'custom' : ($trigger === 'current' ? 'current' : 'label');
@endphp

<x-ui.dropdown data-slot="turn-into-menu" {{ $attributes }}>

    @if ($triggerStyle === 'custom')
        {{ $customTrigger }}
    @elseif ($triggerStyle === 'current')
        {{-- A fixed width for the label: the trigger must not grow from "Text"
             to "Numbered list" and shove every other button along. --}}
        <x-ui.dropdown.trigger
            class="inline-flex h-8 w-32 items-center justify-between gap-1 rounded-md border border-border bg-background px-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring"
            aria-label="{{ __('Block type') }}"
            @mousedown.prevent=""
        >
            <span
                class="truncate"
                x-text="(labels => labels[typeof blockType !== 'undefined' ? blockType : ''] ?? {{ Js::from($fallbackLabel) }})({{ Js::from($labels) }})"
            >{{ $fallbackLabel }}</span>
            <svg class="size-3 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M6 9l6 6 6-6"/>
            </svg>
        </x-ui.dropdown.trigger>
    @else
        <x-ui.dropdown.trigger
            class="inline-flex items-center gap-2 rounded-md border border-input bg-card px-2 py-2 text-sm font-medium text-card-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring"
            @mousedown.prevent=""
        >
            <span>{{ $label }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" class="rtl:-scale-x-100">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
        </x-ui.dropdown.trigger>
    @endif

    <x-ui.dropdown.content :align="$align" :class="$contentClass">

        <x-ui.dropdown.label>{{ $label }}</x-ui.dropdown.label>

        @foreach ($types as $entry)
            @if (! empty($entry['separator']))
                <x-ui.dropdown.separator />
                @continue
            @endif
            @php
                $type = (string) ($entry['type'] ?? '');
                $typeLabel = (string) ($entry['label'] ?? $type);
                $icon = (string) ($entry['icon'] ?? '');
            @endphp
            @continue($type === '')
            <x-ui.dropdown.item
                data-slot="turn-into-menu-item"
                data-type="{{ $type }}"
                @mousedown.prevent=""
                @click="$dispatch('editor-block', { type: {{ Js::from($type) }} })"
            >
                @if ($icon !== '')
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true" class="shrink-0 text-muted-foreground">
                        <path stroke-linecap="round" stroke-linejoin="round" d="{{ $icon }}" />
                    </svg>
                @endif
                <span class="flex-1">{{ $typeLabel }}</span>
                <svg
                    x-show="typeof isBlock === 'function' && isBlock({{ Js::from($type) }})"
                    x-cloak
                    xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true" class="shrink-0 text-primary"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
            </x-ui.dropdown.item>
        @endforeach

        {{-- Callout type: a submenu rendered only while the editor reports a
             callout (x-if, so a hidden row never joins the arrow-key order). --}}
        <template x-if="typeof calloutVariant === 'function' && calloutVariant() !== null">
            <div data-slot="turn-into-menu-callout">
                <x-ui.dropdown.separator />
                <x-ui.dropdown.submenu>
                    <x-ui.dropdown.sub-trigger @mousedown.prevent="">{{ __('Callout type') }}</x-ui.dropdown.sub-trigger>
                    <x-ui.dropdown.sub-content aria-label="{{ __('Callout type') }}">
                        @foreach ($calloutVariants as $variant => $variantLabel)
                            <x-ui.dropdown.radio-item
                                data-variant="{{ $variant }}"
                                x-bind:aria-checked="calloutVariant() === {{ Js::from($variant) }} ? 'true' : 'false'"
                                @mousedown.prevent=""
                                @click="$dispatch('editor-callout', { variant: {{ Js::from($variant) }} })"
                            >{{ $variantLabel }}</x-ui.dropdown.radio-item>
                        @endforeach
                    </x-ui.dropdown.sub-content>
                </x-ui.dropdown.submenu>
            </div>
        </template>

        {{ $slot }}

    </x-ui.dropdown.content>

</x-ui.dropdown>