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

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;
}

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

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

Similar Threads

Similar Threads

Similar Threads