PHPackages                             mateuslecchi/filament-rich-editor-extender - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. mateuslecchi/filament-rich-editor-extender

ActiveLibrary[Templating & Views](/categories/templating)

mateuslecchi/filament-rich-editor-extender
==========================================

A set of extra extensions for Filament RichEditor

v1.1.4(1mo ago)247↑50%1[1 PRs](https://github.com/mateuslecchi/filament-rich-editor-extender/pulls)MITPHPPHP ^8.4CI passing

Since Jun 2Pushed 1mo agoCompare

[ Source](https://github.com/mateuslecchi/filament-rich-editor-extender)[ Packagist](https://packagist.org/packages/mateuslecchi/filament-rich-editor-extender)[ Docs](https://github.com/mateuslecchi/filament-rich-editor-extender)[ RSS](/packages/mateuslecchi-filament-rich-editor-extender/feed)WikiDiscussions 1.x Synced 1w ago

READMEChangelog (2)Dependencies (33)Versions (10)Used By (0)

A set of extra extensions for Filament RichEditor
=================================================

[](#a-set-of-extra-extensions-for-filament-richeditor)

[![Latest Version on Packagist](https://camo.githubusercontent.com/4c63cbae40288eeb1b511801158f4b8849bfd6ff2132510eba0ee03bc96354e3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d61746575736c65636368692f66696c616d656e742d726963682d656469746f722d657874656e6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mateuslecchi/filament-rich-editor-extender)[![GitHub Tests Action Status](https://camo.githubusercontent.com/396e51d405a144103208f2be4393771f0cc6fab72889f4233871c80f1042c34a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d61746575736c65636368692f66696c616d656e742d726963682d656469746f722d657874656e6465722f72756e2d74657374732e796d6c3f6272616e63683d312e78266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/mateuslecchi/filament-rich-editor-extender/actions?query=workflow%3Arun-tests+branch%3A1.x)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/cf847727c67472ba12dbc9bb192b371c74fea148126e12b8f7594eee3609b862/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d61746575736c65636368692f66696c616d656e742d726963682d656469746f722d657874656e6465722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d312e78266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/mateuslecchi/filament-rich-editor-extender/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3A1.x)[![Total Downloads](https://camo.githubusercontent.com/0477b82f7a0839ef92e66c425f26d4b0f6c0fef45ed6e653a7a7a0ad9f99f332/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d61746575736c65636368692f66696c616d656e742d726963682d656469746f722d657874656e6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mateuslecchi/filament-rich-editor-extender)

Extra goodies for the Filament Forms RichEditor (v5). This package ships small, focused extensions that plug straight into your existing editor.

### Currently included:

[](#currently-included)

- YouTube embeds.
- Twitch embeds (videos, clips and channels).
- X (Twitter) post embeds.
- More to come...

Requirements
------------

[](#requirements)

Package VersionPHP VersionLaravel VersionFilament Forms Version1.x8.4+13+5.6+Installation
------------

[](#installation)

You can install the package via composer:

```
composer require mateuslecchi/filament-rich-editor-extender
```

Then run the package installer:

```
php artisan filament-rich-editor-extender:install
```

Usage
-----

[](#usage)

Once installed, all tools will be available for all RichEditor instances. The plugin registers itself automatically, so no additional configuration is required.

### YouTube

[](#youtube)

Add the `youtube` button to your editor's toolbar. It opens a modal asking for a YouTube URL and inserts the video as an embed.

```
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->label('Content')
    ->toolbarButtons([
        'youtube',
    ]);
```

Embeds use the privacy-enhanced `youtube-nocookie.com` domain by default. See [Displaying stored content](#displaying-stored-content) for how to register the `YoutubePlugin` when rendering, and [Sanitization](#sanitization) for the host allowlist.

### Twitch

[](#twitch)

Add the `twitch` button to your editor's toolbar. It opens a modal asking for a Twitch URL (video, clip or channel) and inserts it as an embed.

```
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->label('Content')
    ->toolbarButtons([
        'twitch',
    ]);
```

> ⚠️ **Twitch requires a `parent` domain.** Every Twitch embed must declare the domain(s) it is served from, or the player refuses to load. Publish the config and set `twitch.parent` to the domain(s) where your *rendered* content is shown (no scheme, no path). The live editor preview derives its parent from the current host automatically — this setting only applies to server-side rendered embeds.

```
// config/filament-rich-editor-extender.php
'twitch' => [
    'parent' => ['example.com', 'www.example.com'],
],
```

See [Displaying stored content](#displaying-stored-content) for how to register the `TwitchPlugin` when rendering, and [Sanitization](#sanitization) for the host allowlist.

### X (Twitter)

[](#x-twitter)

Add the `x` button to your editor's toolbar. It opens a modal asking for an X (or legacy Twitter) post URL and inserts the post as an embed.

```
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->label('Content')
    ->toolbarButtons([
        'x',
    ]);
```

Posts are embedded via an `` pointing at `platform.twitter.com`, so the embed survives sanitization and server-side rendering just like the other media. Both `x.com/.../status/` and `twitter.com/.../status/` URLs are accepted — the package extracts the post id and builds the embed URL for you. See [Displaying stored content](#displaying-stored-content) for how to register the `XPlugin` when rendering.

> ℹ️ **Resizing.** An X post iframe has a fixed height, so tall posts (with images or quotes) would be cropped. The editor resizes them automatically. On your **front-end** pages, include the small resize script so displayed posts fit their content — see [Resizing X embeds on the front-end](#resizing-x-embeds-on-the-front-end).

### Storage modes (HTML or JSON)

[](#storage-modes-html-or-json)

Filament can store `RichEditor` content as **HTML** (its native default) or as a structured **JSON** document. **Every embed in this package works in both** — pick what fits your app:

HTML (default)JSONColumn`text` / `longText`, **no cast**`json`, or cast the attribute to `array`Field`->youtubeStorage()` (or nothing)`->youtubeStorage('json')` (or Filament's `->json()`)Stored valueready-to-use HTMLstructured documentUse the per-field helper to follow the package's configured default:

```
use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->youtubeStorage()       // HTML by default; ->youtubeStorage('json') for JSON
    ->toolbarButtons(['youtube', 'twitch', 'x']);
```

> The `->youtubeStorage()` helper toggles the **field's** storage mode (HTML vs JSON); it is not YouTube-specific and applies regardless of which embeds the field uses.

The default mode is read from `config('filament-rich-editor-extender.storage')` (`'html'` out of the box). The helper is **opt-in per field** — it never changes the storage mode of your other `RichEditor` fields. For JSON mode, remember to make the column array-castable:

```
protected function casts(): array
{
    return ['content' => 'array']; // JSON mode only
}
```

> ⚠️ Switching an existing field between HTML and JSON changes the stored format. Migrate the column/cast **and** the existing rows accordingly — the package does not convert data for you.

### Displaying stored content

[](#displaying-stored-content)

When you render stored content, the renderer needs to know about each plugin so it can turn the stored node back into an ``. Filament's global editor configuration is **not** inherited by `RichContentRenderer`, so register the plugins you use on the content explicitly.

The idiomatic way is via the model, using Filament's `HasRichContent`. Register only the plugins whose embeds your content can contain:

```
use Filament\Forms\Components\RichEditor\Models\Concerns\InteractsWithRichContent;
use Filament\Forms\Components\RichEditor\Models\Contracts\HasRichContent;
use MateusLecchi\FilamentRichEditorExtender\Plugins\TwitchPlugin;
use MateusLecchi\FilamentRichEditorExtender\Plugins\XPlugin;
use MateusLecchi\FilamentRichEditorExtender\Plugins\YoutubePlugin;

class Post extends Model implements HasRichContent
{
    use InteractsWithRichContent;

    protected function setUpRichContent(): void
    {
        $this->registerRichContent('content')
            ->plugins([
                YoutubePlugin::make(),
                TwitchPlugin::make(),
                XPlugin::make(),
            ]);
    }
}
```

```
{!! $post->renderRichContent('content') !!}
```

Or render directly:

```
use Filament\Forms\Components\RichEditor\RichContentRenderer;
use MateusLecchi\FilamentRichEditorExtender\Plugins\TwitchPlugin;
use MateusLecchi\FilamentRichEditorExtender\Plugins\XPlugin;
use MateusLecchi\FilamentRichEditorExtender\Plugins\YoutubePlugin;

RichContentRenderer::make($post->content)
    ->plugins([
        YoutubePlugin::make(),
        TwitchPlugin::make(),
        XPlugin::make(),
    ])
    ->toHtml();
```

> **Twitch only:** server-side rendered embeds use the `twitch.parent` config value for their `parent` query parameter. Set it to the domain(s) where this content is displayed, otherwise the Twitch player will refuse to load. See [Twitch](#twitch).

### Resizing X embeds on the front-end

[](#resizing-x-embeds-on-the-front-end)

X (Twitter) post iframes have a fixed height, so taller posts get cropped unless the iframe is resized to its content. **In the editor this happens automatically.** For your front-end pages, this package ships a tiny (~1 KB) script that listens for the height the X embed reports and resizes each post to fit.

Publish it to your `public` directory:

```
php artisan vendor:publish --tag=filament-rich-editor-extender-assets
```

Then include it once on pages that display X embeds (e.g. in your layout):

```

```

The script is self-initializing and watches for embeds added to the page later, so it works with content loaded dynamically too. It only touches `platform.twitter.com`iframes; YouTube and Twitch embeds keep their configured dimensions and need nothing.

### Sanitization

[](#sanitization)

Filament renders rich content through `Str::sanitizeHtml()`, whose sanitizer strips `` by default — which would remove every embed. To prevent that, this package extends Filament's **application-wide** sanitizer config to allow the embed ``, restricting its `src` to a host allowlist (any other host's iframe `src` is dropped, leaving a harmless empty iframe). Other media is unaffected.

Each platform contributes its own hosts, and the allowlists are merged into a single sanitizer. You can toggle or customize each one. Publish the config to control it:

```
php artisan vendor:publish --tag=filament-rich-editor-extender-config
```

```
// config/filament-rich-editor-extender.php
'youtube' => [
    'sanitizer' => [
        'enabled' => true, // set false to opt out of the global change
        'allowed_hosts' => ['youtube-nocookie.com', 'youtube.com'],
    ],
],

'twitch' => [
    'parent' => ['example.com'], // domain(s) serving your rendered embeds
    'sanitizer' => [
        'enabled' => true,
        'allowed_hosts' => ['player.twitch.tv', 'clips.twitch.tv'],
    ],
],

'x' => [
    'sanitizer' => [
        'enabled' => true,
        'allowed_hosts' => ['platform.twitter.com'],
    ],
],
```

AI agents (Laravel Boost)
-------------------------

[](#ai-agents-laravel-boost)

This package ships [Laravel Boost](https://laravel.com/docs/boost) guidelines so AI coding agents know how to use it correctly — adding the toolbar buttons, choosing a storage mode, registering the plugins when displaying content, the Twitch `parent`requirement and the sanitizer hosts.

If your app uses Laravel Boost, the guidelines are picked up automatically. To pull them in (or refresh them after installing this package), run:

```
php artisan boost:install
# or, to scan for newly installed packages:
php artisan boost:update --discover
```

The guidelines live at `resources/boost/guidelines/core.blade.php` in this package — no configuration is required on your side.

Translations
------------

[](#translations)

The package ships with translations (currently `en` and `pt_BR`). To customize them in your app, publish the language files:

```
php artisan vendor:publish --tag=filament-rich-editor-extender-translations
```

They will be copied to `lang/vendor/filament-rich-editor-extender`. Contributions with new locales are welcome.

Testing
-------

[](#testing)

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Mateus Lecchi](https://github.com/mateuslecchi)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

46

—

FairBetter than 92% of packages

Maintenance92

Actively maintained with recent releases

Popularity15

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

7

Last Release

45d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e278da3f3a7b98bf68a12104b57179dd0b5f2e8a13eeaacfcafc006231662d9e?d=identicon)[mateuslecchi](/maintainers/mateuslecchi)

---

Top Contributors

[![mateuslecchi](https://avatars.githubusercontent.com/u/45340326?v=4)](https://github.com/mateuslecchi "mateuslecchi (17 commits)")

---

Tags

filamentfilament-pluginfilamentphpfilamentphp-pluginlaravellaraveltiptapyoutubefilamentfilament-pluginrich editorricheditor

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/mateuslecchi-filament-rich-editor-extender/health.svg)

```
[![Health](https://phpackages.com/badges/mateuslecchi-filament-rich-editor-extender/health.svg)](https://phpackages.com/packages/mateuslecchi-filament-rich-editor-extender)
```

###  Alternatives

[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

330530.5k30](/packages/codewithdennis-filament-select-tree)[spatie/laravel-pdf

Create PDFs in Laravel apps

1.0k4.8M48](/packages/spatie-laravel-pdf)[filament/support

Core helper methods and foundation code for all Filament packages.

2331.0M270](/packages/filament-support)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.8k](/packages/rawilk-profile-filament-plugin)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

274333.4k9](/packages/croustibat-filament-jobs-monitor)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)