Closed flatcapco closed 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 ?
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
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
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.
I didn't know about that tabs... But did you tried like just I did?
https://capture.dropbox.com/Bl3qDZ9j5XyWSWl9 https://capture.dropbox.com/QRbXO3PwbbPgp8cf
I've also tried removing any scripts in the app layout other than tinymce
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.
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>
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.
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?
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.