TinyMCE - Multiple instance issue

flatcapco commented 2 months ago

maryUI version

1.35.3

daisyUI version

4.12.10

Livewire version

3.5.4

What browsers are affected?

Chrome

What happened?

When using 1 instance of TinyMce there is no issue, but 2 or more then only the first instance renders.

No errors are thrown in the console but the other instances dont render.


        $config = [
            'plugins'                     => 'autoresize code',
            'min_height'                  => 150,
            'max_height'                  => 250,
            'statusbar'                   => false,
            'toolbar'                     => 'undo redo | code | h1 h2 h3 h4 | link | hr | bold italic',
            'quickbars_selection_toolbar' => 'h1 h2 h3 h4 | link | bold italic',
        ];

       <x-editor wire:model="html_template_en" :config="$config"/>

       <x-editor wire:model="html_template_fr" :config="$config"/>

robsontenorio commented 2 months ago

We have two of them on the same page. Could you try to remove some surrounding code to check if it is interfering ?

https://mary-ui.com/docs/components/editor

flatcapco commented 2 months ago

I've tried that @robsontenorio the Volt component just has this:


<div>

    @php
        $config = [
            'plugins'                     => 'autoresize code',
            'min_height'                  => 150,
            'max_height'                  => 250,
            'statusbar'                   => false,
            'toolbar'                     => 'undo redo | code | h1 h2 h3 h4 | link | hr | bold italic',
            'quickbars_selection_toolbar' => 'h1 h2 h3 h4 | link | bold italic',
        ];

    @endphp

    <x-mary-form wire:submit="save" class="gap-8">

        <x-mary-editor wire:model="html_template_en" :config="$config"/>
        <x-mary-editor wire:model="html_template_fr" :config="$config"/>

    </x-mary-form>

</div>

same issue im afraid

robsontenorio commented 2 months ago

Maybe are you having some issue with the API KEY?

<head>
   ...
   <script src="https://cdn.tiny.cloud/1/kecao1uumzo3qt3o90pztdtlp82b4ctv8tkvsrjgcx34ock5/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
</head>

https://github.com/user-attachments/assets/4080b91c-7f14-404b-8cf0-7368677d8dc4

flatcapco commented 2 months ago

Hmm I dont think so because if i try an incorrect api key then the first editor still works but it shows the "not verified" message. and the 2nd still doesnt work:

https://capture.dropbox.com/kOnU1PJmCuHHV0C0

Bad example as I readded in my tabs -but the only thing that is different from yours when I simplified it is using the x-mary prefix as far as I can tell.

robsontenorio commented 2 months ago

I didn't know about that tabs... But did you tried like just I did?

flatcapco commented 2 months ago

https://capture.dropbox.com/Bl3qDZ9j5XyWSWl9 https://capture.dropbox.com/QRbXO3PwbbPgp8cf

I've also tried removing any scripts in the app layout other than tinymce

robsontenorio commented 2 months ago

I advice you to start with the code I did, just to make sure that the basics works.

Then incrementally add other things to try to spot the issue.

flatcapco commented 2 months ago

Its still the same issue sorry I just didnt record it stripped out here is the code I've tried with an empty app layout bar vite and the tinymce api key:

<?php

use Livewire\Volt\Component;

new class extends Component {

    public string $one = '';
    public string $two = '';

    public function save(): void
    {
        dump($this->one);
        dump($this->two);
    }

};

?>

<div>

    @php
        $config = [
            'plugins'                     => 'autoresize code',
            'min_height'                  => 150,
            'max_height'                  => 250,
            'statusbar'                   => false,
            'toolbar'                     => 'undo redo | code | h1 h2 h3 h4 | link | hr | bold italic',
            'quickbars_selection_toolbar' => 'h1 h2 h3 h4 | link | bold italic',
        ];

    @endphp

    <x-mary-form wire:submit="save">

        <x-mary-editor wire:model="one" :config="$config"/>
        <x-mary-editor wire:model="two" :config="$config"/>

        <x-slot:actions>
            <x-mary-button label="{{ __('Save') }}" class="btn-primary" type="submit" spinner="save"/>
        </x-slot:actions>

    </x-mary-form>

</div>

robsontenorio commented 2 months ago

Just found the issue.

The two editors has the same generated UUID, because different from my example you didn't use a label or anything to make it "unique". So internally it generates the same UUID.

As a work around for now add any extra property to make it generate different UUID like <x-editor ... hint="French" />

But I will release the fix soon.

flatcapco commented 2 months ago

Thanks for spotting this fix Rob, that wouldn't have been intuitive for me to find. Would it be sensible to extend the uuid system to use the livewire property name as a starting point for the uuid generation because that would always be unique?

robsontenorio / mary