F
Filament•2mo ago
Remi Hindriks

iframe in rich editor

I created a Youtube Video block in the Rich Editor, which in its view file has an iframe that load the video id. But iframes dont seem to work when i renderRichContent() When i inspect the code, the wrapping div is just empty. 
            <div class="relative group">
                <div class="relative aspect-video rounded-xl overflow-hidden shadow-xl">
                    <iframe
                        src="https://www.youtube.com/embed/{{ $videoId }}?rel=0&modestbranding=1&showinfo=0"
                        title="{{ $title ?: 'YouTube video' }}"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen
                        class="absolute inset-0 w-full h-full">
                    </iframe>
                </div>
                <!-- Decorative frame -->
                <div
                    class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent-light/20 rounded-2xl -z-10 opacity-50 group-hover:opacity-75 transition-opacity duration-300"></div>
            </div>
            <div class="relative group">
                <div class="relative aspect-video rounded-xl overflow-hidden shadow-xl">
                    <iframe
                        src="https://www.youtube.com/embed/{{ $videoId }}?rel=0&modestbranding=1&showinfo=0"
                        title="{{ $title ?: 'YouTube video' }}"
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen
                        class="absolute inset-0 w-full h-full">
                    </iframe>
                </div>
                <!-- Decorative frame -->
                <div
                    class="absolute -inset-4 bg-gradient-to-r from-primary/20 to-accent-light/20 rounded-2xl -z-10 opacity-50 group-hover:opacity-75 transition-opacity duration-300"></div>
            </div>
Anyone have an idea how to fix this?
5 Replies
awcodes
awcodes•2mo ago
You need a php version of the extension too. So the renderer can parse it.
Remi Hindriks
Remi HindriksOP•2mo ago
I'm sorry, i need what of what now? I have a YoutubeVideoBlock.php in my Forms directory, with this for example: 
public static function toHtml(array $config, array $data): string
    {
        $videoId = self::extractYouTubeId($config['video_url'] ?? '');

        return view('filament.forms.components.rich-editor.rich-content-custom-blocks.you-tube-video.index', [
            'videoUrl' => $config['video_url'] ?? '',
            'videoId' => $videoId,
            'title' => $config['title'] ?? '',
        ])->render();
    }
public static function toHtml(array $config, array $data): string
    {
        $videoId = self::extractYouTubeId($config['video_url'] ?? '');

        return view('filament.forms.components.rich-editor.rich-content-custom-blocks.you-tube-video.index', [
            'videoUrl' => $config['video_url'] ?? '',
            'videoId' => $videoId,
            'title' => $config['title'] ?? '',
        ])->render();
    }
Is that what youmean?
awcodes
awcodes•2mo ago
no, you need a https://github.com/ueberdosis/tiptap-php class for the extension, see https://github.com/filamentphp/filament/tree/4.x/packages/forms/src/Components/RichEditor/TipTapExtensions for some examples. And then register it in your editor plugin: https://filamentphp.com/docs/4.x/forms/rich-editor#extending-the-rich-editor
GitHub
GitHub - ueberdosis/tiptap-php: A PHP package to work with Tiptap c...
A PHP package to work with Tiptap content. Contribute to ueberdosis/tiptap-php development by creating an account on GitHub.
GitHub
filament/packages/forms/src/Components/RichEditor/TipTapExtensions ...
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire - filamentphp/filament
Rich editor - Forms - Filament
Remi Hindriks
Remi HindriksOP•2mo ago
is this specific for the iframe element? I dont understand why all my other blocks work, all my other custom blocks just work. I've got an image gallery, a links-block, usps, multi column etc. They all have php variables etc. They all work. its just the iframe element that doenst render. What makes this so different? Is this something i should be able to find in the docs? This is how i defined it: 
RichEditor::make('content')
                                    ->label('Content')
                                    ->customBlocks([
...<OTHER BLOCKS>
RichContentCustomBlocks\YouTubeVideoBlock::class,
                                    ])
                                    ->visible(fn(Get $get) => $get('slug') !== 'contact')
                                    ->json(),
RichEditor::make('content')
                                    ->label('Content')
                                    ->customBlocks([
...<OTHER BLOCKS>
RichContentCustomBlocks\YouTubeVideoBlock::class,
                                    ])
                                    ->visible(fn(Get $get) => $get('slug') !== 'contact')
                                    ->json(),
in my Page class i have this: 
public function setUpRichContent(): void
    {
        $this->registerRichContent('content')
            ->fileAttachmentsVisibility('public')
            ->customBlocks([
...<OTHER BLOCKS>
RichContentCustomBlocks\YouTubeVideoBlock::class,
            ])
            ->json();
    }
public function setUpRichContent(): void
    {
        $this->registerRichContent('content')
            ->fileAttachmentsVisibility('public')
            ->customBlocks([
...<OTHER BLOCKS>
RichContentCustomBlocks\YouTubeVideoBlock::class,
            ])
            ->json();
    }
Im not trying to register a new plugin, and im not sure why i should?
awcodes
awcodes•2mo ago
Didn’t realize it was in a block. Sorry. Ignore my suggestions. You probably need to override Filaments HtmlSanitizer instance. Or use ->toUnsafeHtml() instead of ->toHtml() Filament’s sanitizer instance used by Str::sanitizeHtml() 
$this->app->scoped(
            HtmlSanitizerInterface::class,
            fn (): HtmlSanitizer => new HtmlSanitizer(
                (new HtmlSanitizerConfig)
                    ->allowSafeElements()
                    ->allowRelativeLinks()
                    ->allowRelativeMedias()
                    ->allowAttribute('class', allowedElements: '*')
                    ->allowAttribute('data-color', allowedElements: '*')
                    ->allowAttribute('data-from-breakpoint', allowedElements: '*')
                    ->allowAttribute('style', allowedElements: '*')
                    ->withMaxInputLength(500000),
            ),
        );
$this->app->scoped(
            HtmlSanitizerInterface::class,
            fn (): HtmlSanitizer => new HtmlSanitizer(
                (new HtmlSanitizerConfig)
                    ->allowSafeElements()
                    ->allowRelativeLinks()
                    ->allowRelativeMedias()
                    ->allowAttribute('class', allowedElements: '*')
                    ->allowAttribute('data-color', allowedElements: '*')
                    ->allowAttribute('data-from-breakpoint', allowedElements: '*')
                    ->allowAttribute('style', allowedElements: '*')
                    ->withMaxInputLength(500000),
            ),
        );
Had a similar issue recently trying to render svg’s

Did you find this page helpful?