Tinymce not loading in toogle condition (livewire) - tinymce

Question

component view:
#if ($rich)
<textarea name="content" class="tinymce">{{ $content }}</textarea>
#else
<textarea name="content">{{ $content }}</textarea>
#endif
I want that, if "$rich" found then show tinymce if not then show plain text. condition working fine. but the problem is first time load tinymce toolbar. after that in reverse the tinymce toolbar not loading.
So i don't understand how to load this.
thanks.

Answer 1

I solved my problem this way -
I made two separate child livewire and put the textarea code as per component.
a. simple (livewire)
b. tinymce (livewire)
these child livewire i called from one parent livewire in "if else" condition which i mentioned above post.
#if ($rich)
<livewire:common.tinymce>
#else
<livewire:common.simple>
#endif
in 'tinymce livewire' component view i wrote tinymce init script in "script" tag before content.
EXAMPLE: (tinymce component view)
<div>
<script>
tinymce.init({
selector: "textarea.tinymce",
menubar: false,
statusbar: true,
height: "159px",
paste_data_images: true,
plugins: [
"advlist lists link preview hr paste table",
],
toolbar: "styleselect bold italic bullist | blockquote hr | alignleft aligncenter alignright underline alignjustify | link unlink table",
autosave_interval: "30s",
browser_spellcheck: true,
style_formats: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
{title: "Header 5", format: "h5"},
{title: "Header 6", format: "h6"},
{title: "paragraph", format: "p"},
],
});
</script>
<div class="editorpad">
<p class="nm"> content </p>
<textarea name="content" class="tinymce">{{ $content ?? '' }}</textarea>
</div>
</div>
done!
all is working fine.