iotronlab/tiptap-spatie-media

Spatie Media Integration Support For Tiptap Editor

v1.0.0 2025-04-25 11:26 UTC

Requires

• php: ^8.2
• awcodes/filament-tiptap-editor: *
• filament/forms: ^3.2
• filament/spatie-laravel-media-library-plugin: ^3.2
• illuminate/contracts: ^10.0||^11.0
• illuminate/support: *
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^2.9
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.1.1||^7.10.0
• orchestra/testbench: ^9.0.0||^8.22.0
• pestphp/pest: ^2.34
• pestphp/pest-plugin-arch: ^2.7
• pestphp/pest-plugin-laravel: ^2.3
• phpstan/extension-installer: ^1.3
• phpstan/phpstan-deprecation-rules: ^1.1
• phpstan/phpstan-phpunit: ^1.3
• spatie/laravel-ray: ^1.35

MIT

• Krishanu

• laravel
• iotronlab
• tiptap-spatie-media

README

Introduction

Spatie Media Integration Support for Tiptap Editor is a package that seamlessly integrates the Tiptap Editor with Spatie's Media Library, providing an easy way to manage and upload media within your Tiptap Editor. Built specifically for Laravel and Filament, this package extends the functionalities of the popular Tiptap Editor, making it a breeze to handle images and media directly within your rich text editing experience.

This package allows developers to customize the media_action configuration of the Tiptap Editor with just a single line change, enabling media upload management via Filament's Spatie Media Library integration. Once set up, users can effortlessly manage their media, giving a seamless media management experience.

Note: This package requires the Tiptap Editor to be installed before you can use it.

Features

• Integrate Tiptap Editor with Spatie's Media Library.
• Easily upload and manage images within the Tiptap Text Editor.
• Supports customization via a simple configuration change.

Installation

You can install the package via Composer:

composer require iotronlab/tiptap-spatie-media

⚡ Quick Setup

To quickly integrate Tiptap Spatie Media into your Laravel project, simply run:

php artisan tiptap-spatie-media:install

This command will:

• Automatically publish the filament-tiptap-editor.php config file (if not already published).
• Inject the correct media_action class reference:

  'media_action' => \Iotronlab\TiptapSpatieMedia\TiptapSpatieMediaAction::class,

• Configure the editor to support media uploads via Spatie's Media Library.

✅ You're now ready to use Tiptap with Spatie Media support!

🛠 Manual Installation

Prefer to configure things manually? Follow these steps:

1. Publish the configuration file

php artisan vendor:publish --tag="filament-tiptap-editor-config"

2. Update the configuration

In the published config/filament-tiptap-editor.php, locate the media_action key and modify it like so:

// Comment out or remove the default action
// 'media_action' => FilamentTiptapEditor\Actions\MediaAction::class,

// Replace with the custom media action
'media_action' => \Iotronlab\TiptapSpatieMedia\TiptapSpatieMediaAction::class,

💡 This change tells Filament's Tiptap Editor to use Spatie’s Media Library for managing media uploads.

You're now fully set up to manage media in Tiptap using the power of Spatie's Laravel Media Library!

Usage

Use the Tiptap Editor as you normally would:

TiptapEditor::make('description')
    ->columnSpanFull(),

Just ensure that you have updated the Tiptap Editor config file with the new media_action, and you're all set to manage media uploads seamlessly.

💡 TipTap Media Integration for Laravel Models

To enable automated handling of media uploads and textareas (like images embedded in rich text editors), use the provided trait:

✅ Recommended: Use the HasTipTapMedia Trait

Add the trait to any Eloquent model where you want media handling to be automatic. The trait will automatically detect columns containing rich text or image uploads.

use Iotronlab\TiptapSpatieMedia\Trait\HasTipTapMedia;

class Article extends Model
{
    use HasTipTapMedia;

    protected $fillable = ['title', 'content', 'summary'];
}

No extra configuration needed—this approach handles created and saved events internally.

⚙️ Optional: Manual Integration

If you prefer more control or don't want to use the trait, you can manually call the required methods in the model’s boot method:

use Iotronlab\TiptapSpatieMedia\TipTapMedia;

class Article extends Model
{
    protected static function booted()
    {
        parent::booted();

        self::created(function ($record) {
            TipTapMedia::OnCreated($record, ['column_name']); // Replace with your actual rich-text/image field(s)
        });

        self::saved(function ($record) {
            TipTapMedia::OnSaved($record, ['column_name']);
        });
    }
}

🔁 Replace 'column_name' with the field(s) you want TipTap Media to process.

Testing

You can run the package tests using:

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Iotronlab
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Support Us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Prerequisites

This package requires:

• PHP 8.2 or higher
• Tiptap Editor (must be installed before using this package)
• Filament Spatie Media Library Plugin

Ensure you have these dependencies installed to take full advantage of this package's features.