# Core Rich Text Editor

## Example

```svelte
<script lang="ts">
	import { CoreRichTextEditor, 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="Write something..." class="min-h-24"
	></CoreRichTextEditor>
</Box>
```

## Documentation

## Usage

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

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

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

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

```svelte
<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)

## Sources

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

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

| 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) |
| placeholder | `string` | `''` | Placeholder text shown when the editor is empty. |
| 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. Use this to add features without losing StarterKit, LinkExtension, etc. |
| 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. |
| children | `Snippet` | `-` | Child content rendered inside the editor wrapper (e.g. BubbleMenu, SlashMenu). Only rendered when the editor is ready. |
| class | `string` | `-` | Additional CSS classes to apply to the wrapper div. |
| ref | `HTMLDivElement` | `-` | The underlying DOM element. (bindable) |