Tiptap Editor inside Builder's Blocks with Interactive Preview

[bezhanSalleh]

Filament Version

v3.2.125

Plugin Version

v3.4.21

PHP Version

PHP 8.3.13

Problem description

When used inside the builder blocks with previews on, while editing through the block's edit action causes an issue with the tiptap blocks' preview.

issue.mov

Expected behavior

Now if we add the following piece of code inside the if block (line 198) in the renderBlockPreviews() method then issue will be resolved as shown. Now this is what i could come up with. But maybe you would know a better way to resolve it.

filament-tiptap-editor/src/TiptapEditor.php

Line 198 in 0d29282

if ($block['type'] === 'tiptapBlock') {

if (is_string($block['attrs']['data'])) {
    $dataAsJsonString = Str::of(json_decode('"' . $block['attrs']['data'] . '"'))
        ->after('JSON.parse(\'')
        ->beforeLast('\')')
        ->toString();

    $block['attrs']['data'] = json_decode($dataAsJsonString, true);
}

expected.mov

Steps to reproduce

1. copy paste the following inside terminal in a folder you do your tests.

git clone https://github.com/bezhanSalleh/tiptap-inside-builder-block-issue.git tiptap-block-issue && 
cd tiptap-block-issue && 
composer install &&
cp .env.example .env &&
php artisan key:generate &&
php artisan migrate --force &&
php artisan serve

2. open http://127.0.0.1:8000 in browser
3. click on login
4. navigate to the post resource, edit a post and click on the blocks's edit action.

Reproduction repository

https://github.com/bezhanSalleh/tiptap-inside-builder-block-issue

Relevant log output

FilamentTiptapEditor\TiptapBlock::getPreview(): Argument #1 ($data) must be of type ?array, string given, called in /Users/bsalleh/Sites/removeables/tiptap-issue-repro/vendor/awcodes/filament-tiptap-editor/src/TiptapEditor.php on line 209

[awcodes]

Are you using multi language?

[bezhanSalleh]

Are you using multi language?

Nope. Just interactive blocks but without the previews. so that might be the issue.

Also there is another weird issue I encountered that like ~2-3% of the time when you are editing a custom tiptap block it gets duplicated 🤔
Couldn't really pinpoint the cause for it though.

[awcodes]

If you're using block previews then you have to give each block a blade file to preview.

[bezhanSalleh]

If you're using block previews then you have to give each block a blade file to preview.

Bud!, i just tested it with preview, it doesn't matter if the block has preview or not, as long as it's interactive it will cause the issue.
The repro just takes a minute to see the issue. you can add simple view as preview for the block. doesn't have to have anything just a hello world would do. The issue arises when you edit the interactive block.

[awcodes]

Ok, but I'm just not understanding why the block data is a string. Just asking questions to try to get on the same page.

[awcodes]

Your repo is using a native builder field with previews set but your block isn't defining a preview. So I'm not sure what the plugin issue is since you're not using the native field in the way it is meant to be used.