mavu_snippets_ui

   <section>
     <.form let={f} for={@changeset} url="#" as={:step_data} theme={:tw_default} phx-change={:validate} phx-submit={:save}
       phx-target={@myself} id={@id} class="w-2xl">
       <.live_component id="saveblock_top" module={MavuSnippetsUi.Live.Ce.SaveBlock} class="mb-5" />
       TUNYMCE
       <section phx-hook="TinyMceHook" id="tinymce_editors">
         <div x-data="{
           getEditorConf(target) {
             return {
               menubar: false,
               inline: true,
               target: target,
               plugins: ['visualblocks', 'code', 'autosave', 'link'],
               toolbar: [
                 'undo redo | bold italic underline | h2 h3 h4 | link | visualblocks code '
               ],
               force_br_newlines : true,
               force_p_newlines : false,
               valid_elements: 'p,strong,em,span,a[href|target=_blank|title],ul,ol,li,h1,h2,h3,h4,br',
               init_instance_callback: function(editor) {
                  editor.on('blur', function(e) {
                    editor.save();
                    //console.log('tinymce trigger save');
                  });
               },
               skin_url: '/be_thirdparty/tinymce/skins/ui/oxide',
               setup: function(editor) {
                  editor.on('init', function(e) {
                    editor.save();
                    //console.log('tinymce trigger save on init');
                  });
                },
             };
           },
           initEditor(name) {
              const el = document.getElementById('step_data[' + name + ']');
                  window.tinymce.init(this.getEditorConf(el));
            },
            initWhenTinymceIsAvailable() {
              console.log('#log 1632 init all the tinymces...');
                window.tinymce.remove();
                this.initEditor('text_l1');
                this.initEditor('text_l2');
                this.initEditor('text_l3');
                this.initEditor('text_l4');
                this.initEditor('text_l5');
                this.initEditor('text_l6');
                this.initEditor('text_l7');
                this.initEditor('text_l8');
                this.initEditor('text_l9');
            },
            init() {
                console.log('html snippet editor init');
                if(window.tinymce) {
                  this.initWhenTinymceIsAvailable();
                } else {
                  if(!window.tinymce_waitlist) {
                    window.tinymce_waitlist=[
                      ()=>this.initWhenTinymceIsAvailable()
                    ];
                  }
                }
           }
         }">
           <%= for l <- @active_language_map do %>
           <% {mode,placeholder}= MavuSnippets.get_effective_text_from_element(@celement,l.lang, @context[:snippets_conf]) %>
           <div
             class="inline-block rounded  text-xs uppercase px-2 py-1 ml-2 min-w-[3em] text-center hover:ring-primary-500 hover:ring-2 bg-gray-200"
             title={"#{ l.langnum }"}>
             <%= l.lang %></div>
           <div class="" phx-update="ignore">
             <%= input  f, l.fieldname,  using: :textarea, rows: 5 ,label: "Text:",append_classes: "editable ",
              wrapped_input: [update_html: :custom_fn],
              custom_fn: fn assigns -> %>
             <div class="prose-sm prose border border-gray-400 rounded">
               <div class="px-2 py-1 " id={"#{ input_name(@form, @field) }"} x-ref={"#{ @field }"}>
                 <%= input_value(@form, @field) |> raw() %></div>
             </div>
             <% end %>
           </div>
           <% end %>
         </div>
       </section>
     </.form>
   </section>