awcodes / filament-tiptap-editor

A Rich Text Editor plugin for Filament Forms.
MIT License
250 stars 66 forks source link

Overflowng images and videos #333

Closed thethunderturner closed 4 months ago

thethunderturner commented 4 months ago

Filament Version

v3.2.37

Plugin Version

v3.2.24

PHP Version

8.2.15

Problem description

You can submit videos and pictures just fine on the create page. When you visit said record on a custom view page (not extending ViewRecord), then the pictures and videos overflow and are much bigger than they are supposed to. Example: image

Expected behavior

Expected behaviour is for the image and video to stay in the container they are supposed to be in.

Steps to reproduce

Create a Test Record with an image or video. Then visit it in the view page

Reproduction repository

https://github.com/thethunderturner/TipTapBugs

Relevant log output

There are some warning on the browser, but I dont think they are related, since it works fine on the EditPage

Third-party cookie will be blocked. Learn more in the Issues tab.
tiptap.js?v=3.2.37.0:30 [tiptap warn]: Duplicate extension names found: ['bubbleMenu']. This can lead to issues
awcodes commented 4 months ago

2 things.

First: You're missing the 'vendor' in your tailwind.config.js Screenshot 2024-02-24 at 4 00 29 PM

Second: You need to fill the form in ViewTest.php

public function mount(int | string $record): void
{
    $this->record = $this->resolveRecord($record);
    $this->data = $this->setData();

    $this->form->fill($this->data); <-this is missing
}
thethunderturner commented 4 months ago

I had the vendor in my config on my actual project. The issue was the missing form fill. Thanks

2 things.

First: You're missing the 'vendor' in your tailwind.config.js Screenshot 2024-02-24 at 4 00 29 PM

Second: You need to fill the form in ViewTest.php

public function mount(int | string $record): void
{
    $this->record = $this->resolveRecord($record);
    $this->data = $this->setData();

    $this->form->fill($this->data); <-this is missing
}