# Bubble Menu

## Example

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

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

<Box class="not-prose">
	<CoreRichTextEditor
		bind:editor
		placeholder="Select some text to see the bubble menu..."
		class="min-h-24"
		content={{
			type: 'doc',
			content: [
				{
					type: 'paragraph',
					content: [{ type: 'text', text: 'Select this text to see the formatting toolbar.' }]
				}
			]
		}}
	>
		<FormattingBubbleMenu {editor} />
	</CoreRichTextEditor>
</Box>
```

## Documentation

## Usage

`FormattingBubbleMenu` provides a ready-to-use formatting toolbar that appears when text is selected. It includes bold, italic, underline, strikethrough, and link controls.

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

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

<CoreRichTextEditor bind:editor>
	<FormattingBubbleMenu {editor} />
</CoreRichTextEditor>
```

## Adding extra controls

Use the `children` snippet to add custom controls after the default formatting toggles.

```svelte
<FormattingBubbleMenu {editor}>
	<MyCustomButton {editor} />
</FormattingBubbleMenu>
```

## Custom bubble menu

Use `BubbleMenu` directly for full control over the menu contents. It provides the styled container and positioning — you supply the controls.

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

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

<CoreRichTextEditor bind:editor>
	<BubbleMenu {editor}>
		<BoldToggle {editor} />
		<ItalicToggle {editor} />
	</BubbleMenu>
</CoreRichTextEditor>
```

## Controlling visibility

Pass `shouldShow` to control when the menu appears. By default, `FormattingBubbleMenu` hides when there's no selection or when inside a code block.

```svelte
<BubbleMenu
	{editor}
	shouldShow={({ editor, from, to }) => from !== to && editor.isActive('paragraph')}
>
	<!-- controls -->
</BubbleMenu>
```

## How it works

Both components wrap svelte-tiptap's `BubbleMenu` with a styled container that supports dark mode. `FormattingBubbleMenu` automatically detects available extensions — for example, `LinkPopover` only appears if the link extension is registered.

## Sources

Based on "TipTap" (https://tiptap.dev/docs/editor/extensions/functionality/bubble-menu)

## API Reference

### FormattingBubbleMenu
A pre-configured bubble menu with bold, italic, underline, strikethrough toggles, and an optional link editor. Appears on text selection.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| editor | `Readable<Editor>` | `-` | The editor store. (required, bindable) |
| class | `string` | `-` | CSS classes for the menu container. |
| children | `Snippet` | `-` | Additional controls rendered after the default toggles. |

### BubbleMenu
A styled bubble menu container that appears on text selection. Wraps svelte-tiptap BubbleMenu with dark mode styling. Use this for fully custom menus.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| editor | `Readable<Editor>` | `-` | The editor store. (required, bindable) |
| shouldShow | `(props: { editor: Editor; from: number; to: number }) => boolean` | `-` | Function to control when the menu is visible. |
| class | `string` | `-` | CSS classes for the menu container. |
| children | `Snippet` | `-` | Menu content (buttons, toggles, etc.). |