Image Extension

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

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

	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>

<CoreRichTextEditor
	bind:editor
	extraExtensions={[ImageExtension.configure({ upload })]}
/>

	

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

<!-- File picker button -->
<button onclick={() => pickAndInsertImage($editor)}>Add Image</button>

<!-- Insert a file you already have -->
<button onclick={() => insertImage($editor, myFile)}>Insert</button>

	

		
<SlashMenu
	editor={$editor}
	items={[
		{
			id: 'image',
			label: 'Image',
			command: ({ editor, range }) => {
				editor.chain().focus().deleteRange(range).run();
				pickAndInsertImage(editor);
			}
		}
	]}
/>

	

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

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

	

		
<!-- CustomImage.svelte -->
<script lang="ts">
	import type { NodeViewProps } from '@tiptap/core';
	import { NodeViewWrapper } from 'svelte-tiptap';

	let props: NodeViewProps = $props();
</script>

<NodeViewWrapper>
	<figure class="my-4">
		<img
			src={props.node.attrs.src}
			alt={props.node.attrs.alt}
			class="rounded-lg shadow-md"
		/>
		{#if props.node.attrs.alt}
			<figcaption class="mt-1 text-sm text-gray-500">{props.node.attrs.alt}</figcaption>
		{/if}
	</figure>
</NodeViewWrapper>

	

		
<script lang="ts">
	import { ImageExtension } from '@foxui/text';
	import CustomImage from './CustomImage.svelte';
</script>

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