Filament•14mo ago

Automatically uploading and replacing external image URLs from pasted content in Filament's RichEdit

To be honest, I already asked this in Filament's github with no answer and im not fully sure its totally filament-related question, but i'll give it a shot anyway. My content editor prefers using Microsoft Word or Google Docs. After drafting, they copy the content and paste it directly into the WYSIWYG editor within my app, which uses Filament's RichEditor. Everything works smoothly, except for the images. When using Google Docs, the images are (obviously) hosted on Google's servers, resulting in image URLs like "https://lh3.googleusercontent.com/WY9Uz4l9...". I'd prefer to avoid this. Ideally, every image that's detected should be uploaded as if it were added directly through the WYSIWYG editor. At the moment, I already mutate the data before saving by using DeepL to translate the content into multiple languages:

protected function mutateFormDataBeforeCreate(array $data): array
{
    $translatableLocales = ['en', 'es', 'it','de','nl', 'ro'];
    $ignoreFields = ['author_id', 'created_at', 'updated_at'];

    foreach ($data as $field => $value) {
        if (in_array($field, $ignoreFields)) {
            continue;
        }
        $translations = [];
        $translations['en'] = $value;
        foreach ($translatableLocales as $locale) {
            if ($locale === 'en') {
                continue;
            }
            $translatedText = $this->deeplService->translateText($value, NULL, $locale);
            $translations[$locale] = $translatedText;
        }
        $data[$field] = $translations;
    }
    return $data;
}

protected function mutateFormDataBeforeCreate(array $data): array
{
    $translatableLocales = ['en', 'es', 'it','de','nl', 'ro'];
    $ignoreFields = ['author_id', 'created_at', 'updated_at'];

    foreach ($data as $field => $value) {
        if (in_array($field, $ignoreFields)) {
            continue;
        }
        $translations = [];
        $translations['en'] = $value;
        foreach ($translatableLocales as $locale) {
            if ($locale === 'en') {
                continue;
            }
            $translatedText = $this->deeplService->translateText($value, NULL, $locale);
            $translations[$locale] = $translatedText;
        }
        $data[$field] = $translations;
    }
    return $data;
}

I'm considering adding another mutator or modifying the existing one. The plan is to employ PHP's DOMDocument to parse the content's HTML, extract images, re-upload them to my own server, and then replace the old 'src' attributes with the new ones. However, I'm wondering if this approach is too convoluted. Is there perhaps a built-in mechanism in Filament that I'm unaware of which could simplify this process? Thanks

6 Replies

awcodes•14mo ago

To my knowledge there is no built in way to do this.

prowlerOP•14mo ago

ok, thanks a lot @awcodes!

awcodes•14mo ago

working with several other editors over the years. i haven't seen any of them support it out of the box either. sorry.

prowlerOP•14mo ago

and do you think my approach is good enough? architecturally speaking..

awcodes•14mo ago

I’m sure it’s fine. With something this complex I would worry about making it work first. Then fine tuning it later.

prowlerOP•14mo ago

thanks again buddy

Gaming

Programming

Automatically uploading and replacing external image URLs from pasted content in Filament's RichEdit