Tipex with FileHandler Image Upload

tipex-with-filehandler.svelte

<script lang="ts">
  import { Tipex, defaultExtensions, type TipexEditor } from '@friendofsvelte/tipex';
	import '@friendofsvelte/tipex/styles/index.css';
	import { FileHandler } from '@tiptap/extension-file-handler';
	import type { EditorEvents } from '@tiptap/core';

	let editor: TipexEditor | undefined = $state();

	// Helper function to handle image insertion (DRY)
	function insertImageFromFile(currentEditor: TipexEditor, file: File, position: number) {
		console.log('Processing file:', file.name, file.type);
		
		const fileReader = new FileReader();
		fileReader.readAsDataURL(file);
		fileReader.onload = () => {
			currentEditor
				.chain()
				.insertContentAt(position, {
					type: 'image',
					attrs: {
						src: fileReader.result,
					},
				}).focus().run();
		};
	}

	// Configure FileHandler with DRY helper
	const fileHandlerExtension = FileHandler.configure({
		allowedMimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
		onDrop: (currentEditor, files, pos) => {
			files.forEach(file => {
				insertImageFromFile(currentEditor, file, pos);
			});
		},
		onPaste: (currentEditor, files, htmlContent) => {
			if (htmlContent) {
				// if there is htmlContent, stop manual insertion & let other extensions handle insertion via inputRule. you could extract the pasted file from this url string and upload it to a server for example
				console.log('HTML content detected:', htmlContent);
				return false;
			}

			files.forEach(file => {
				insertImageFromFile(currentEditor, file, currentEditor.state.selection.anchor);
			});
		},
	});

	// Include both FileHandler and Image extensions
	const customExtensions = [ fileHandlerExtension, ...defaultExtensions ];
</script>

<p>Copy an image and paste it (Ctrl/Cmd+V) or drag & drop image files</p>

<Tipex bind:tipex={editor} extensions={customExtensions} class="h-[60vh]" autofocus={false} floating focal/>