Core Rich Text Editor

Example

Usage

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

<CoreRichTextEditor placeholder="Start writing..." />

Binding the editor

Bind the editor store to access the tiptap Editor instance for programmatic control or to pass to child components like FormattingBubbleMenu.

		<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 placeholder="Write something...">
	<FormattingBubbleMenu {editor} />
</CoreRichTextEditor>

Binding content

Use bind:content to read or control the editor content. Content is a tiptap Content type (JSON by default).

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

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

<CoreRichTextEditor bind:content placeholder="Write here..." />

Markdown mode

Enable markdown to parse Markdown input and serialize content back to Markdown strings instead of JSON.

		<CoreRichTextEditor markdown bind:content placeholder="Write Markdown..." />

Extra extensions

Use extraExtensions to add extensions alongside the defaults (StarterKit, LinkExtension, CodeBlockExtension). Use extensions to replace defaults entirely.

		<script lang="ts">
	import { CoreRichTextEditor, ImageExtension, MentionNode } from '@foxui/text';
</script>

<CoreRichTextEditor
	extraExtensions={[
		ImageExtension.configure({ upload: myUpload }),
		MentionNode
	]}
/>

Default extensions

CoreRichTextEditor includes these extensions by default:

StarterKit — paragraphs, headings, lists, blockquote, code, bold, italic, strike, etc.
LinkExtension — autolink, paste detection, Markdown link syntax
CodeBlockExtension — code blocks with syntax highlighting and copy button
Placeholder — shown when editor is empty (if placeholder prop is set)

API Reference

CoreRichTextEditor

The base rich text editor component. Wraps svelte-tiptap with sensible defaults (StarterKit, LinkExtension, CodeBlockLowlight). Use directly for full control, or use RichTextEditor for a batteries-included experience.

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

placeholder

string

Placeholder text shown when the editor is empty. 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. Use this to add features without losing StarterKit, LinkExtension, etc. 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: —

children

Snippet

Child content rendered inside the editor wrapper (e.g. BubbleMenu, SlashMenu). Only rendered when the editor is ready. Default: —

class

string

Additional CSS classes to apply to the wrapper div. Default: —

ref $bindable

HTMLDivElement

The underlying DOM element. Default: —

Property

content

editor

placeholder

markdown

extensions

extraExtensions

onupdate

ontransaction

onlinkadded

children

class

ref