search

awcodes / filament-tiptap-editor

A Rich Text Editor plugin for Filament Forms.
MIT License
281 stars 77 forks source link

Issues with inserting YouTube Videos #334

Closed lpeterke closed 7 months ago

lpeterke commented 7 months ago

Filament Version

v3.2.37

Plugin Version

v3.2.24

PHP Version

8.1.0

Problem description

When I insert a YouTube Video (for example https://www.youtube.com/watch?v=Y4EFuZxEtNI) it will show up in the editor preview. However, when viewing the page, I get a broken iFrame stating "youtube.com rejected the connection"

Expected behavior

It should work :)

Steps to reproduce

  1. Insert video: https://www.youtube.com/watch?v=Y4EFuZxEtNI
  2. Save Form (In my case a create form for the ArticleResource)
  3. Open the Article with the rendered HTML. See broken iframe

Reproduction repository

No response

Relevant log output

No response

lpeterke commented 7 months ago

When I insert the video (https://www.youtube.com/watch?v=Y4EFuZxEtNI) and save my article, this is what gets stored in the Database:

<div data-youtube-video="true" class="responsive"><iframe src="https://www.youtube.com/watch?v=Y4EFuZxEtNI" width="1600" height="900" allowfullscreen="true" allow="autoplay; fullscreen; picture-in-picture" style="aspect-ratio:1600/900; width: 100%; height: auto;"></iframe></div>

However, when I insert the video, switch the tiptap editor to the code view, click "submit" to close the code view and then create my article, I have this in my DB instead:

<div data-youtube-video="true"><iframe src="https://www.youtube.com/embed/Y4EFuZxEtNI?controls=0" width="1600" height="900" allowfullscreen="true" allow="autoplay; fullscreen; picture-in-picture"></iframe></div>

It looks like when initially inserting a video, the embed URL is not correctly determined.

Switching to the code view fixes the URL, but it also misaligns the video in the editor preview because it removes the style attributes and class attribute.

awcodes commented 7 months ago

Will look into this as soon as I can.

Thanks.

awcodes commented 7 months ago

Resolved by #335

lpeterke commented 7 months ago

Hi @awcodes, thx for fixing the issue!

Did you also have a look at why opening the code view discards some of the HTML attributes for inserted videos?

After insert: <div data-youtube-video="true" class="responsive"><iframe src="https://www.youtube.com/embed/Jq4NhAnnD0Q?controls=0" width="1600" height="900" allowfullscreen="true" allow="autoplay; fullscreen; picture-in-picture" style="aspect-ratio:1600/900; width: 100%; height: auto;"></iframe></div>

After opening the code view and clicking "submit": <div data-youtube-video=""><iframe src="https://www.youtube.com/embed/Jq4NhAnnD0Q?controls=0" width="1600" height="900"></iframe></div>

Is this also a bug or am I missing some HTML whitelist settings in the config that I may need to adjust?

awcodes commented 7 months ago

Sounds like a bug. I'll make a note to look into it soon.

lpeterke commented 7 months ago

Thank you so much!

awcodes commented 6 months ago

Sorry, this took so long. Issue will be resolved in next release. Cheers.

lpeterke commented 6 months ago

Thank you so much!