title: Tinymce css gets reloaded everytime a livewire event occurs
body: <p>I have a tinyMce blade component that looks like this:</p>
  <pre><code>&lt;div x-id=&quot;['tinymce-input']&quot; class=&quot;pageContent__content__row disFlex fdCol mb10&quot;&gt;
      &lt;label class=&quot;bold cBlack mb5&quot; :for=&quot;$id('tinymce-input')&quot;&gt;Tekst&lt;/label&gt;
      &lt;div
          wire:ignore
          :id=&quot;$id('tinymce-input')&quot;
          x-data=&quot;{ value: @entangle($attributes-&gt;wire('model')) }&quot;
          x-init=&quot;
          tinymce.init({
              target: $refs.tinymce,
              themes: 'modern',
              height: 200,
              menubar: true,
              plugins: 'wordcount, link, image',
              link_list: {{ $links }},
              image_list: {{ $images }},
                link_class_list: [
                  {title: 'Link', value: 'btn stripe red mt30'},
                  {title:'black-button', value:'btn black mt30'},
                ],
              toolbar: 'undo redo | formatselect | ' +
                  'bold italic backcolor | alignleft aligncenter ' +
                  'alignright alignjustify | bullist numlist outdent indent | ' +
                  'removeformat | help| wordcount | link | image',
              setup: function(editor) {
                  editor.on('blur', function(e) {
                      value = editor.getContent()
  
                  })
  
                  editor.on('init', function (e) {
                      if (value != null) {
                          editor.setContent(value)
                      }
                  })
  
                  function putCursorToEnd() {
                      editor.selection.select(editor.getBody(), true);
                      editor.selection.collapse(false);
                  }
  
                  $watch('value', function (newValue) {
                      if (newValue !== editor.getContent()) {
                          editor.resetContent(newValue || '');
                          putCursorToEnd();
                      }
                  });
              }
          })
      &quot;&gt;
          &lt;div&gt;
              &lt;textarea
                  x-ref=&quot;tinymce&quot;
                  {{ $attributes-&gt;whereDoesntStartWith('wire:model') }}
              &gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @push('scripts')
      @once
          &lt;script src=&quot;{{ asset('js/tinymce/tinymce.min.js') }}&quot; referrerpolicy=&quot;origin&quot;&gt;&lt;/script&gt;
      @endonce
  @endpush
  </code></pre>
  <p>this is then included multiple times inside of a livewire component like this :</p>
  <pre><code>  &lt;div&gt;
          &lt;div&gt;
              &lt;label class=&quot;bold cBlack mb5&quot; for=&quot;quote_content&quot;&gt;Content&lt;/label&gt;
              &lt;x-form.editor.tiny-mce wire:model='state.components.banner.content' /&gt;
  
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;label class=&quot;bold cBlack mb5&quot; for=&quot;quote_content&quot;&gt;Content&lt;/label&gt;
              &lt;x-form.editor.tiny-mce wire:model='state.components.quote.content' /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>but whenever I trigger something with livewire (e.g. wire:model, or a button click), tinymce reloads it's CSS which causes a blick flicker effect to occur, putting the <code>wire:ignore</code> on the parent div fixes the issue, but it keeps the old <code>wire:model</code> as it's value when the page is reloaded via livewire to load a different component that includes the editor as well.</p>
  <p>any idea on how to fix this?</p>