Problem with TinyMCE in Filamentphp

Hello everyone, I’ve been facing issues with TinyMCE for about three years. These problems existed even before I started using Filament, and they still persist now that I’m using Filament. I hope with your help, I can resolve these challenges. My Issues:

Excessive CDN Requests:

In the Forms system and the Builder section, every time I add a new element, a new request is sent to the CDN. This increases resource usage and slows down the system.

Editor Data Loss:

Every time I add a new element, if there is an editor (TinyMCE) below it, the data inside the editor turns blank and no longer displays. Additionally, if I delete or rearrange an element, the data inside all other editors in the Builder gets cleared or turns blank.

These issues are severely disrupting my work, and I hope someone can offer a solution. Additional Notes:

I’ve tried two different FilamentPHP plugins, and both have these issues. Switching to another editor is not a viable option for me, as TinyMCE's features are crucial for my project.

Sample Code:

To better illustrate the problem, I’ve created a sample code snippet that replicates the issue. If you could review this code, it might help you guide me:

Resource: use App\Forms\Components\TinyEditor; TinyEditor::make('content');

Components: namespace App\Forms\Components; use Filament\Forms\Components\Concerns; use Filament\Forms\Components\Contracts; use Filament\Forms\Components\Field; class TinyEditor extends Field implements Contracts\CanBeLengthConstrained, Contracts\HasFileAttachments { use Concerns\CanBeLengthConstrained; use Concerns\HasFileAttachments; use Concerns\HasPlaceholder; protected string $view = 'forms.components.tiny-editor'; }

View: <x-filament::input.wrapper class="overflow-hidden" x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') , initialized: false }" x-init=" tinymce.init({ target: $refs.tinymce, selector: $refs.tinymce, directionality: 'rtl', skin: (document.querySelector('html').getAttribute('class').includes('dark') ? 'oxide-dark' : 'oxide'), extended_valid_elements: 'p[class]', plugins: '', toolbar: '', model: 'dom', setup: function (editor) { editor.setContent(state); editor.on('change', function () { state = editor.getContent(); }); editor.on('init', function () { editor.setContent(state); }); } }); " x-cloak wire:ignore > @unless($isDisabled()) @else @endunless document.addEventListener('livewire:load', function () { Livewire.hook('beforeDomUpdate', function () { if (window.editor) { window.editor.save(); } }); Livewire.hook('afterDomUpdate', function () { if (window.editor) { window.editor.setContent(state); } }); }); </x-filament::input.wrapper>