Implement image pasting in the Laravel Livewire Flux UI Editor component

What you will achieve

Laravel Livewire's Flux UI component library includes a component called "Rich Text Editor". This editor is built using ProseMirror and TipTap.
By default, pasting images from the clipboard is not enabled. However, TipTap provides an extension that allows users to paste images directly into the text editor.
This extension supports rendering and displaying the image, but it does not handle uploading the image to your application out of the box.

In this blog post, I’ll show you how I successfully implemented this feature myself!

Requirements

You need to install the TipTap image extension package:

npm install @tiptap/extension-image

The code

You can either paste the following code into the <head> tag of your Blade layout or add it to your app.js file:

import Image from '@tiptap/extension-image'

document.addEventListener('flux:editor', (e) => {
    e.detail.registerExtension(Image);
    
    e.detail.init(({ editor }) => {
        editor.on('paste', async ({ event }) => {
            event.preventDefault();

            const items = event.clipboardData.items;

            for (const item of items) {
                if (item.type.indexOf('image') !== -1) {
                    const blob = item.getAsFile();

                    const formData = new FormData();

                    formData.append('image', blob);

                    try {
                        const response = await fetch('/api/uploads/image/store', {
                            method: 'POST',
                            body: formData
                        });

                        const data = await response.json();

                        if (data.url) {
                            editor.chain().focus().setImage({ src: data.url }).run();
                        }
                    } catch (error) {
                        console.error('Image upload failed', error);
                    }
                }
            }
        });
    });
});

This code will:

Add an event listener for the Flux editor.
Register the Tiptap image extension (used to render images in the Tiptap editor).
Initialize the editor.
Add an event that runs when you paste an image from your clipboard using Command + V or Ctrl + V.

This code assumes you have an API endpoint at /api/uploads/image/store that handles saving the image and returns a JSON response like this:

{
    "success": true,
    "url": "https://soliduptime.com/storage/your-image-path.png",
}

That's it!

You can now paste images into your Livewire Flux Rich Text Editor component!