# Rich Text Editor

## Example

```svelte
<script lang="ts">
	import { Box, RichTextEditor } from '@foxui/all';

	let content = $state('');

	async function uploadImage(file: File, onProgress: (progress: number) => void) {
		for (let i = 0; i <= 10; i++) {
			await new Promise((r) => setTimeout(r, 150));
			onProgress(i / 10);
		}
		return URL.createObjectURL(file);
	}
</script>

<Box>
	<RichTextEditor
		bind:content
		placeholder="Write something or press / for commands..."
		image={uploadImage}
		embeds={true}
	/>
</Box>
```

## Documentation

## Usage

```svelte
<script lang="ts">
	import { RichTextEditor } from '@foxui/text';

	let content = $state('');
</script>

<RichTextEditor bind:content placeholder="Write something..." />
```

This gives you a fully featured editor with a formatting bubble menu and `/` slash commands out of the box.

## Image uploads

Pass an upload function to `image` to enable image paste, drop, and the `/image` slash command. Images use `EditableImage` (with alt text editing) by default.

```svelte
<script lang="ts">
	import { RichTextEditor } from '@foxui/text';

	async function upload(file: File, onProgress: (p: number) => void, signal: AbortSignal) {
		const res = await fetch('/api/upload', { method: 'POST', body: file, signal });
		return (await res.json()).url;
	}
</script>

<RichTextEditor image={upload} />
```

## Embeds

Pass `embeds={true}` for built-in YouTube embeds, or pass an array of custom `EmbedDefinition`s. An embed modal is automatically included, and `/embed` appears in the slash menu.

```svelte
<!-- YouTube embeds -->
<RichTextEditor embeds={true} />

<!-- Custom embed providers -->
<RichTextEditor embeds={[youtubeEmbed, spotifyEmbed]} />
```

## Disabling features

Turn off individual features with boolean props.

```svelte
<!-- No bubble menu -->
<RichTextEditor bubbleMenu={false} />

<!-- No slash menu -->
<RichTextEditor slashMenu={false} />
```

## All CoreRichTextEditor props

`RichTextEditor` passes all props through to `CoreRichTextEditor`, so you can use `extraExtensions`, `markdown`, `onlinkadded`, etc.

```svelte
<RichTextEditor
	image={upload}
	embeds={true}
	markdown
	placeholder="Write Markdown..."
/>
```

## Sources

Based on "TipTap" (https://tiptap.dev/)

## API Reference

### RichTextEditor
A batteries-included rich text editor with formatting bubble menu, slash commands, image uploads, and embeds. Wraps CoreRichTextEditor with all UI features.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| content | `Content` | `{}` | The editor content (TipTap Content type - can be HTML string, JSON, etc.). (bindable) |
| editor | `Readable<Editor>` | `-` | A Svelte readable store containing the TipTap Editor instance. (bindable) |
| bubbleMenu | `boolean` | `true` | Show the formatting bubble menu (bold, italic, underline, strikethrough, link) on text selection. |
| slashMenu | `boolean` | `true` | Show the slash command menu when typing "/". |
| image | `ImageUploadFn | false` | `-` | Enable image uploads. Pass an upload function to enable paste, drop, and /image slash command. Images use EditableImage with alt text editing. |
| embeds | `EmbedDefinition[] | boolean` | `-` | Enable embeds. Pass `true` for built-in YouTube embeds, or an array of EmbedDefinitions for custom providers. Adds /embed to the slash menu and includes an embed modal. |
| placeholder | `string` | `''` | Placeholder text. |
| markdown | `boolean` | `false` | Enable Markdown mode. Parses Markdown input and serializes content back to Markdown strings. |
| extensions | `Extensions` | `-` | Custom extension array. Replaces all default extensions when provided. |
| extraExtensions | `Extensions` | `-` | Additional extensions merged with the defaults. Added after image/embed extensions. |
| onupdate | `(content: Content | string) => void` | `-` | Callback invoked when the editor content changes. |
| ontransaction | `() => void` | `-` | Callback invoked on every TipTap transaction. |
| onlinkadded | `(event: LinkAddedEvent) => void` | `-` | Called whenever a link is added (typing, pasting, autolink, or UI). Only applies when using default extensions. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |