# Block Type Menu

## Example

```svelte
<script lang="ts">
	import { CoreRichTextEditor, BlockTypeMenu, Box, type SvelteTiptap } from '@foxui/all';
	import type { Readable } from 'svelte/store';

	let editor = $state<Readable<SvelteTiptap.Editor>>();
</script>

<Box>
	{#if $editor}
		<BlockTypeMenu {editor} />
	{/if}
	<CoreRichTextEditor bind:editor placeholder="Write something, then use the buttons above..." class="min-h-24" />
</Box>
```

## Documentation

## Usage

`BlockTypeMenu` renders a row of block type buttons that reflect the current selection. Click a button to toggle between paragraph, headings, lists, and more.

```svelte
<script lang="ts">
	import { CoreRichTextEditor, BlockTypeMenu, type SvelteTiptap } from '@foxui/text';
	import type { Readable } from 'svelte/store';

	let editor = $state<Readable<SvelteTiptap.Editor>>();
</script>

<CoreRichTextEditor bind:editor />
{#if $editor}
	<BlockTypeMenu {editor} />
{/if}
```

Default items include Paragraph, Heading 1–3, Blockquote, Code Block, Bullet List, and Ordered List. Only items with registered extensions are shown.

## Custom items

Pass `items` to customize the available block types.

```svelte
<script lang="ts">
	import { BlockTypeMenu, type BlockTypeItem } from '@foxui/text';

	const items: BlockTypeItem[] = [
		{
			id: 'paragraph',
			label: 'P',
			isActive: (e) => e.isActive('paragraph'),
			command: (e) => e.chain().focus().setParagraph().run()
		},
		{
			id: 'heading-1',
			label: 'H1',
			isActive: (e) => e.isActive('heading', { level: 1 }),
			command: (e) => e.chain().focus().toggleHeading({ level: 1 }).run()
		}
	];
</script>

<BlockTypeMenu {editor} {items} />
```

## How it works

`BlockTypeMenu` listens to editor transactions and tracks which items are active. The active item is highlighted with an accent color. Paragraph is only highlighted when it's the only active item — so it doesn't show as active alongside a heading or list.

## API Reference

### BlockTypeMenu
A row of block type buttons that reflect the current selection. Only shows items for registered extensions.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| editor | `Readable<Editor>` | `-` | The editor store. (required, bindable) |
| items | `BlockTypeItem[]` | `-` | Custom block type items. Defaults to Paragraph, Heading 1–3, Blockquote, Code Block, Bullet List, Ordered List. |
| class | `string` | `-` | CSS classes for the container. |

### BlockTypeItem
The data shape for block type items.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| id | `string` | `-` | Unique identifier. (required) |
| label | `string` | `-` | Display label for the button. (required) |
| isActive | `(editor: Editor) => boolean` | `-` | Returns whether this block type is currently active. (required) |
| command | `(editor: Editor) => void` | `-` | Called when the button is clicked. (required) |