Rich Text Editor

Example

Usage

		<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.

		<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 EmbedDefinitions. An embed modal is automatically included, and /embed appears in the slash menu.

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

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

Disabling features

Turn off individual features with boolean props.

		<!-- 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.

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

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.

Property Type Description

content $bindable

Content

The editor content (TipTap Content type - can be HTML string, JSON, etc.). Default: {}

editor $bindable

Readable<Editor>

A Svelte readable store containing the TipTap Editor instance. Default: —

bubbleMenu

boolean

Show the formatting bubble menu (bold, italic, underline, strikethrough, link) on text selection. Default: true

slashMenu

boolean

Show the slash command menu when typing "/". Default: true

image

union

Enable image uploads. Pass an upload function to enable paste, drop, and /image slash command. Images use EditableImage with alt text editing. Default: —

embeds

union

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. Default: —

placeholder

string

Placeholder text. Default: ''

markdown

boolean

Enable Markdown mode. Parses Markdown input and serializes content back to Markdown strings. Default: false

extensions

Extensions

Custom extension array. Replaces all default extensions when provided. Default: —

extraExtensions

Extensions

Additional extensions merged with the defaults. Added after image/embed extensions. Default: —

onupdate

function

Callback invoked when the editor content changes. Default: —

ontransaction

function

Callback invoked on every TipTap transaction. Default: —

onlinkadded

function

Called whenever a link is added (typing, pasting, autolink, or UI). Only applies when using default extensions. Default: —

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLDivElement

The underlying DOM element. Default: —

Property

content

editor

bubbleMenu

slashMenu

image

embeds

placeholder

markdown

extensions

extraExtensions

onupdate

ontransaction

onlinkadded

class

ref