Custom srcset, sizes, and loading attributes on images are stripped out of RichEditor despite using custom Spatie/TipTap extension

[mookman288]

Package

Form builder

Package Version

v5.6.7

How can we help you?

Hello everyone,

I'm using Filament 5.6.7 and Filament Spatie Laravel Media Library Plugin 5.6.7.

I've written a custom plugin for the RichEditor to use Spatie Media Library to pull images directly from a single library. The plugin works fairly well and I'm happy with the experience, however, I noticed that TipTap was stripping the srcset, sizes, onload, and loading attributes in the visual RichEditor interface. These parameters are rendered by Spatie Media Library when utilizing the responsive images feature.

I extended the @tiptap/extension-image parameters to explicitly allow srcset, sizes, and loading. I did not allow onload.

This extension allowed TipTap to render these attributes in the visual RichEditor interface before saving.

On save, though, I noticed that in my database that the resulting HTML was still sanitized. For testing purposes, I am not sanitizing the HTML on insert or update into the database yet.

I checked the payload request, and I see that TipTap/Livewire is sending the JSON payload correctly, with the attributes visible.

In my EditModel.php page, I put a dd in just to see what was happening with the data. I used the mutateFormDataBeforeSave method. This is a code example of that dd:

protected function mutateFormDataBeforeSave(array $data): array {
  //dd(request()->input());
  dd($data);
}

I confirmed that request()->input() has the JSON payload as seen in my payload sent. I also confirmed that $data already renders a sanitized version of the HTML.

I was under the impression that Filament doesn't sanitize the RichEditor output at all and that it's my responsibility to sanitize it before database entry or in a blade template.

Nevertheless, I created a service provider and extended the Filament HTML sanitizer per the documentation:

$this->app->extend(
  HtmlSanitizerConfig::class,
    fn (HtmlSanitizerConfig $config): HtmlSanitizerConfig => $config
      ->allowAttribute('srcset', allowedElements: 'img')
      ->allowAttribute('sizes', allowedElements: 'img')
      ->allowAttribute('loading', allowedElements: 'img'),
  );

I believe I did that correctly, but unfortunately the HTML still appears to be sanitized.

I put in a dd($state) inside of dehydrateStateUsing on the RichEditor as well, but that was already sanitized too. I am starting to feel like I'm going down the wrong path with this, and I don't want to unnecessarily complicate the process. I may not be referencing the right documentation steps.

I am wondering if anyone knows the correct process to allow these three attributes, and likely other attributes, as I continue to build this plugin (and possibly some custom blocks in the future.)

Thank you.

[mookman288]

After some trial and error and digging around, I think I've stumbled upon a solution. I'll blame the decline of search engines for this one...

Anyway, when building a RichEditor plugin, the documentation provides a template on the following page:

https://filamentphp.com/docs/5.x/forms/rich-editor#extending-the-rich-editor

There are two methods here of importance. The first is getTipTapJsExtensions, and the second is getTipTapPhpExtensions. I neglected to read through https://github.com/ueberdosis/tiptap-php, because I was fixated on solving the in-browser experience.

I have now learned that as the tiptap-php package converts TipTap's JSON to HTML, it replicates the same default sanitization that occurs with TipTap in the browser. In order to extend the browser experience, I also needed to replicate that on the PHP side as well.

Back to the two aforementioned methods. I used the getTipTapJsExtensions method to integrate my TipTap extension. I neglected to mirror the extensions I made with getTipTapPhpExtensions.

The solution was to port my JS code over to PHP, and include it as a new TipTap PHP extension. Now it allows the three attributes both in-browser, and as it stores to the database.

I hope this helps someone else down the road.