awcodes / filament-tiptap-editor

A Rich Text Editor plugin for Filament Forms.

aw.codes

This is a work in progress. ugh!

filament-tiptap-editor's Issues

img default class

Hi, is there any setting we can use to set a default class for the img elements inside the tiptap content?
Regards

Edit Source Code changes ignored after save

Filament Version: 2.16.36
Package Version: 1.0.3

Screen.Recording.2022-10-27.at.12.24.38.PM.mov

thanks :)

What do i need to do besides the official installing steps.

1. i have followed every steps on your instruction on how to install this package, but it seems it was nat loading the tiptap editor js.
2. then i tried to import the tiptap core and starter-kit on the app.js file. but it seems your package failed to find the JS file too.

both steps i take, output this error :

• module.esm.js:416 Alpine Expression Error: tiptap is not defined
• module.esm.js:416 Alpine Expression Error: fullScreenMode is not defined

and so on with the same message "not defined",

is there any compulsory steps outside the official steps to make this plugin works inside filament? or is it because i use alpine:3.4? Thanks in advance

Content not updating when switching locales with filament/spatie-laravel-translatable-plugin

When using filament/spatie-laravel-translatable-plugin in conjunction with spatie/laravel-translatable, the content of the editor does not update when switching locales using the locale switcher from spatie/laravel-translatable. Specifically, after switching the locale, the content remains the same and does not reflect the updates made for the newly selected locale.

Versions

• PHP 8.1
• awcodes/filament-tiptap-edito : 2.2.3
• filament/filament : 2.17.9
• laravel/framework : 10.1.5

links not working at all for me

when clicking links tool the whole parent livewire component goes blank. i cant see to trace where/why this is happening

if $wire.dispatchFormEvent('tiptap::setLinkContent', '{{ $statePath }}', linkProps); is commented it out in link.blade.php it obviously doesn't ping the server. but the function which is regiatered to listen on tiptap::setLinkContent is never run either.

im confused with the event lifecycle and why the page goes blank

i am using this in a form with the filament-tools package

Validation Issue in grid builder

Filament Version

v3.0.93

Plugin Version

v3.0.4

PHP Version

v8.1

Problem description

When using asymmetric grids, column span validation fails min. Should be 1 instead of 2.

Expected behavior

Column span should accept 1

Steps to reproduce

1. Open grid builder
2. Set grid columns to 3
3. Toggle asymmetric option
4. Set left to 2
5. Set right to 1
6. Submit form

Reproduction repository

No response

Relevant log output

No response

I can't add class for ul or li tag.

Hi , Its good package and I like it so far but I have an issue. I can't add any ul or li class when im in source code.

<ul class="IT WILL DISAPPEAR AFTER SAVE"><li ><p><a class="text-blue-500" href="www.asda.com" target="_blank" as_button="false" button_theme="">Alanya Pamukkale Tour</a></p></li></ul>

[3.x] Json output return Column 'content' cannot be null on save

When editor output set to Json editor returns on save:

Column 'content' cannot be null

If set migration column to nullable, after save - the column is null

Migration column was set to json
Model casted to array. Also tried with json, same error.

Environment:
Filament panel 3.0.39
tiptap 3.0.0 beta-1

Component example:

TiptapEditor::make('content')
     ->output(TiptapOutput::Json)
     ->required()
     ->columnSpan(2),

Problem with background colour of drop-downs in editor menu

links use the same url

when using two links on the same line both redirect to the same url. it happened as i placed the second link that i noticed the first link i had introduced suddenly changed to the last link i added.

edit:
nevermind. it's the display of the URL that doesn't get updated. the links do work when placed within the same line, but it appears that you need to click on something else, like a word below to have it show the correct link.

Editing the source of a field returns an exception on submit.

Filament Version

v3.0.91

Plugin Version

v3.1.0

PHP Version

PHP 8.2

Problem description

When editing the source of a field, the source action throws an exception:

Too few arguments to function FilamentTiptapEditor\TiptapEditor::renderBlockPreviews(), 1 passed in /Users/sjardim/Herd/filament-flexible/vendor/awcodes/filament-tiptap-editor/src/Actions/SourceAction.php on line 36 and exactly 2 expected

Possible solution:

Change the method renderBlockPreviews() inside /src/TipTapEditor.php to expect the component instance as null for default, as such:

 public function renderBlockPreviews(array $document, ?TiptapEditor $component = null): array
    {
        $content = $document['content'];

        $component ?? $component = $this;

...rest of function body

Expected behavior

The sourceAction class should return the edited state to the field.

Steps to reproduce

Click on the "source" button on the editor, make some changes to the source HTML, and submit these changes.

Reproduction repository

No response

Relevant log output

No response

Uncaught ReferenceError: fullScreenMode is not defined

After upgrading to 2.x, I'm getting errors in the javascript console:

Uncaught ReferenceError: fullScreenMode is not defined

Uncaught ReferenceError: isActive is not defined

Are there any changes that I should make to upgrade to 2.x? Is there an upgrade guide available?

Wrong event-name if using curator media-action

Filament Version

v3.0.100

Plugin Version

V3.1

PHP Version

PHP8.2

Problem description

Hey,

If I enable curator as media action no image will be added to tip-tap.
I figured out curator-action fires event named "insert-media" while tip-tap listens to event named "insert-content".

I can temporary fix that by listen to "insert-media" and forward it via "insert-content" to tip-tap.
With Livewire3's On-attribute on CreateRecord.php/EditRecord.php-Component of the Resource:

  #[On('insert-media')]
  public function insertMedia(string $statePath, array $media)
  {
    $this->dispatch('insert-content', type: 'media', statePath: $statePath, media: $media);
  }

But I think that should be fixed directly in package or am I missing something?

Expected behavior

Forward "insert-media"-Event from curator-action to "insert-content"-Event from this package.

Steps to reproduce

filament-curator
src/Components/Modals/CuratorPanel.php

filament-tiptap-editor
src/Actions/MediaAction.php

Reproduction repository

No response

Relevant log output

No response

Package not compatible anymore with PHP < 8.1

We discussed this yesterday in the Filament Discord. This package doesn't work anymore in environments with PHP below 8.1 since the 'output' feature update, because the enum class is always getting loaded.

filament-tiptap-editor/src/TiptapEditor.php

Line 11 in c6b14df

use FilamentTiptapEditor\Enums\TiptapOutput;

filament-tiptap-editor/src/TiptapEditor.php

Line 51 in c6b14df

if ($this->output === TiptapOutput::Json || $this->output === self::OUTPUT_JSON) {

Call to a member function getGridLayouts() on null

Filament Version

v3.1.8

Plugin Version

^v3.1.10

PHP Version

PHP 8.2.13

Problem description

Im getting this error when using TipTap Editor in a form:
Call to a member function getGridLayouts() on null

It's caused by the v3.1.10 Update.

This file causes the error:
resources/views/components/tools/grid.blade.php
Link to file

Expected behavior

Not getting an error.

Steps to reproduce

Update filament-tiptap-editor to version v3.1.10 or higher.
Use the Editor in a form.

Reproduction repository

No response

Relevant log output

No response

No backgound color in light mode for fullscreen editor

Like the title says, there's no background colour set in the tiptap-content div for lightmode.

<div class="tiptap-content max-h-[40rem] h-auto overflow-scroll rounded-b-md dark:bg-gray-700" x-ref="element">

Needs a bg-white, or it the editor becomes transparent when going fullscreen ;)

[object Object] when editing source code in json format

I have output set to OUTPUT_JSON in the config file.

When I click the "Source Code" button on the editor I am just shown [object Object] instead of the code.

Here is the form resource code:

    TiptapEditor::make('body')
        ->profile('default')
        ->required()
        ->maxLength(65535)
        ->extraInputAttributes(['style' => 'min-height: 12rem;'])
        ->columnSpanFull(),

Plugin version: 2.5.0
Filament version: 2.17.47
Laravel version: 10.13.5

Problem install on 3.x

Link doesn't work

Hello, i use filamentphp admin with this field.
My model has field hero - json and same cast
I attach video how it looks like. After i click save changes i do refresh page

edit: bold works as expected

Versions

PHP 8.2.0 
laravel/framework                      v9.48.0 
filament/filament                      v2.16.65 
awcodes/filament-tiptap-editor         v2.0.6 

Screen.Recording.2023-01-25.at.14.11.02.mov

Error inside block editor

This error appears when I try to add the block containing Tiptap editor field.

Error When No Default Content Provided

When creating resources the TiptapEditor field throws a JS error when there is no default value specified.

class PageResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TiptapEditor::make('text'),
            ]);
    }
}

Produces the following in the console when creating a new Page resource:

Uncaught TypeError: can't access property "length", e.initialValue is null
    init https://www.localhost/filament/assets/filament-tiptap-editor-scripts.js:98

I believe the bug was introduced in 2.2.3. Specifically #84. I've confirmed this by downgrading to 2.2.2 or doing the following:

class PageResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TiptapEditor::make('text')
                    ->default('some content'),
            ]);
    }
}

Incorrect Output Format - Array instead of HTML

Filament Version

v3.0.97

Plugin Version

v3.1.2

PHP Version

PHP 8.1

Problem description

I have a simple Filament resource, with a TipTap editor. Creating a new resource was working fine earlier but upon upgrading to 3.1.2, no matter what output parameter I select it always returns an array. I have tried editing both the config option and using ->output(\FilamentTiptapEditor\Enums\TiptapOutput::Html)

Can you please help out?

Expected behavior

Expected it to return valid HTML instead.

Steps to reproduce

1. Setup Filament and create an empty resource.
2. Add a TipTap editor as a field, and try saving the form.

Reproduction repository

No response

Relevant log output

None

You left ray() in the latest v3 release ;)

line 52 in TiptapEditor.php:

ray($component->getHTML());

maxLength / minLength (enhancements)

Thank you for this great implementation of TipTap.

I wonder if you are planning to implement some of the basic textArea properties (min & max length + maybe rows/min-height).

Keep up the great work ! 🎉

in Builder - Remove link is emptying other editors

Hi,

It happens randomly but the only way I found to reproduce this is to have a builder with several tip tap editor.
Then add a link -> save -> remove link.

The others editor will keep their content visible but for a weird reason the state of other editors are synced to "[object Object]"

The content is still is visible in the form but when saving it is set to null.

Thank you for your help

Issue with reactivity

Hi there,

Thank you for the great efforts put into this package. I really find it awesome. However I experienced a minor bug whether I am doing something wrong or it is an actual problem with the editor.

I am trying to build a small Filament hint next to the editor that would show the characters left as the user type in

TiptapEditor::make(name: 'short_description')
 ->required()
->maxLength(self::$model::$shortDescriptionTextLimit)
->reactive()
->hint(
    fn($state, $component) =>
    'left: ' . ($component->getMaxLength() - strlen(str_replace(' ', '', strip_tags($state)))) . ' characters'
)
->columnSpan(span: 'full');

However, the hint shows perfect fine on page load. But, as I start typing in nothing is updating. I believe the $state is not being updated. Therefore, it does not update the hint.

Setting Output Causes Cursor To Jump To End

When the output type is set to anything other than TiptapEditor::OUTPUT_HTML the cursor jumps to the end of the field anytime a key is pressed:

TiptapEditor::make('text')
    ->output(TiptapEditor::OUTPUT_JSON)

Issue When Saving Unchanged JSON

Given the following code:

Resources/TestResource.php

class TestResource extends Resource
{
    protected static ?string $model = Test::class;

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TiptapEditor::make('test')
                    ->output(TiptapEditor::OUTPUT_JSON),
            ]);
    }

    //...

}

Models/Test.php

class Test extends Model
{
    protected $fillable = [
        'test',
    ];

    public $casts = [
        'test' => 'json',
    ];
}

When text is entered and you press save the JSON data is persisted to the database as expected. If you refresh the page and without changing the value press save null is persisted rather than the displayed value.

Additionally, and I suspect this is related, if you enter text and press save and then without refreshing the page press save again an error is thrown:

Inspecting the value of $state on the first save gives:

On the second save:

bug: align left didn't work in rtl version

In the RTL version, aligning text left doesn't work, but it works fine in the LTR.

Responsive attributes not working in default video embeds

Mark tag not working

Hello. First of all, thank you for your big work.
I edit the source code and use the tag after it automatically replaced the mark tag with the p tag.
What can I do in this situation?

[3.X] Copied images are not displayed

Unfortunately, when I try to paste an image from my clipboard, the image is not displayed because the img-src points to my local appdata folder.

An invalid form control with name='' is not focusable.

I get that when I try to save

[v2] [tiptap warn]: Duplicate extension names found: ['bubbleMenu']. This can lead to issues.

Hi, i use tiptap field multiple times on the page, and this what i have in console in chrome

[3.x] Possible regression in update/refresh event handlers

References

• #129
• #135

Demo

tiptap-content.mp4

using the tiptap editor in the Builder, it can be dropped into the editor.

Using tiptap editor in Forms\Components\Builder, if both sorting targets are tiptap editor fields, they can be dropped into the editor

.

Strange behavior with bold tool

I can't select text and make it bold, each time i click bold cursor moved to start position
plugin version v2.2.5
I attach video

Screen.Recording.2023-03-08.at.19.02.14.mov

[3.x] Can't remove link from modal

But the remove link button from the floating UI is still working.

Here's a quick demo:

tiptap-link.mp4

Links are not working properly

When adding a link i can only choose other window, and it automaticly adds noopener etc. i dont want that

When Filament is set to full width the editor has a large inner padding

When 'max_content_width' => 'full' is set in the filament config file, there is a large inner padding on the TipTap field.

Color

How would I go about porting over the color utility from tiptap? Or is this available as is in the package? Thanks!

Weird behavior when sorting in repeater

Filament Version

v3.0.79

Plugin Version

v3.0.2

PHP Version

PHP 8.2.6

Problem description

When you add the Tiptap Editor to a sortable repeater, the prosemirror div gets duplicated. After saving it's correct again, so I don't know yet if this is an issue caused by this package or in tiptap itself.

Expected behavior

To keep the original content

Steps to reproduce

Forms\Components\Repeater::make('items')
    ->schema([
        TiptapEditor::make('text'),
    ]),

Reproduction repository

https://github.com/jyrkidn/filament-tiptap-test

Relevant log output

See the video I made: https://github.com/jyrkidn/filament-tiptap-test/blob/master/Screen%20Recording%202023-10-18%20at%2015.33.08.mov

[3.x] Missing background color in fullscreen mode

Update composer.json version to latest release (still on 0.2.20), please.

What the title says, Packagist is still on 0.2.20. And thanks for all your work on this (and other packages), it's saving me tons of time!

Tippy z-index above filament modal

Filament Version

v3.0.73

Plugin Version

v3.0.2

PHP Version

8.1.16

Problem description

when you select text and click the 'add link' button from the tippy tooltip, the tooltip is visualized above the filament modal.

Expected behavior

The filament modal is above the tippy tooltip.

Steps to reproduce

• enable the default profile
• when you select text and click the 'add link' button from the tippy tooltip, the tooltip is visualized above the filament modal.

Reproduction repository

No response

Relevant log output

No response

[3.x] Missing visual feedback on selected table cells

tiptap-table.mp4

Video embedding is not working.

Hi, when I attempted to insert a YouTube video into the tiptap editor, it appeared on the editor. However, when I save the post, the video does not appear. The source code contains a broken iframe tag.

Here is the video :

Area.mp4

And here is the repo:
https://github.com/misbahansori/tiptap-reproduce-issue

Input lag

During every input editor send request to server which cause a freeze for ~1 sec. Thats make it unusable.
https://youtu.be/s0hDSGIRU_Q

Error when embedding YouTube or Vimeo videos

Filament Version

v3.0.93

Plugin Version

v3.0.4

PHP Version

PHP 8.2.11

Problem description

When using the "Insert Media" function to add an video it gets inserted but after reloading the form there's an error:

Call to undefined method DOMText::getAttribute()

Maybe it's caused by the encoded iframe:

<div data-vimeo-video="" class="responsive">&lt;iframe src=&quot;https://player.vimeo.com/video/12345?rel=0&amp;amp;&quot; width=&quot;1600&quot; height=&quot;900&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; style=&quot;aspect-ratio: 16 / 9; width: 100%; height: auto;&quot; data-aspect-width=&quot;16&quot; data-aspect-height=&quot;9&quot;&gt;&lt;/iframe&gt;</div>

Expected behavior

Error should not appear :)

Steps to reproduce

Insert any video by URL from YouTube or Vimeo.

Reproduction repository

No response

Relevant log output

No response

LocaleSwitcher issue

Sorry, it's me again 😄

seems to be related to #85

There is an issue with locale switcher (Custom one but with the same behavior than the original). When I switch the first time, nothing happens and the form is not filled with translated content , then when switching locales, translations are reversed.

 this.$watch('locale', () => {
                setTimeout(() => {
                    editors[this.id].destroy();
                    this.initEditor(this.state);
                }, 1000);
            });

I increased the timeout to 1000ms and everything is ok.

I think that the timeout is a bit too short and then the editor is filled with the previous state. Only happen when the field is not used in Builder or Repeater.