File Upload Handler for Rich Text Editor

Build a rich text editor that accepts file uploads through drag-and-drop and paste operations, with custom processing for different file types.

Capabilities

File Drop Handling

• When an image file (PNG, JPG, or GIF) is dropped into the editor, it should be uploaded and inserted at the drop position @test
• When a PDF file is dropped into the editor, it should be rejected with a console warning @test
• When multiple image files are dropped simultaneously, all should be processed and inserted sequentially @test

File Paste Handling

• When an image is copied and pasted into the editor, it should be uploaded and inserted at the cursor position @test
• When HTML content containing an image file is pasted, the image file should be extracted and uploaded @test

File Processing

• Uploaded files should be sent to the provided upload function that returns a URL @test

Implementation

@generates

API

/**
 * Creates and configures a Tiptap editor with file handling capabilities.
 *
 * @param element - The DOM element to mount the editor
 * @param uploadFile - Async function that uploads a file and returns its URL
 * @returns The configured editor instance
 */
export function createFileHandlingEditor(
  element: HTMLElement,
  uploadFile: (file: File) => Promise<string>
): Editor;

/**
 * Uploads a file to the mock endpoint.
 *
 * @param file - The file to upload
 * @returns Promise resolving to the file URL
 */
export function mockUploadFile(file: File): Promise<string>;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core editor functionality and extension system.

@tiptap/starter-kit { .dependency }

Provides basic editor extensions (Document, Paragraph, Text, etc.).

@tiptap/extension-image { .dependency }

Provides image node support for displaying uploaded images.

@tiptap/extension-file-handler { .dependency }

Provides file drop and paste event handling capabilities.