awcodes / filament-tiptap-editor

A Rich Text Editor plugin for Filament Forms.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Overflowng images and videos

thethunderturner opened this issue · comments

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

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
}

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
}