LiveView text editor hook disappearing on update

Phoenix Forum Questions / Help
,
1

I have a text editor that mounts via a hook:

const TextEditorHook = {
  updated() {
    mountTrumbowyg(this)
  },

  mounted() {
    mountTrumbowyg(this)
  },

  reconnected() {
    mountTrumbowyg(this)
  }
}

mountTrumbowyg is nothing to fancy, just initializing the Trumbowyg editor.

I’ve been using this hook in a LiveView for a few years with no issue. Now I am trying to wire up another textfield, in a separate LiveView:

    <div class="form-group">
        <%= label f, :description %>
        <%= textarea f, :description, class: control_classes(f, :description), phx_hook: "TextEditorHook" %>
    </div>

Same set up as the first however every time an event happens the text editor disappears:

screencast 2023-06-01 09-34-00

Both of these LiveViews are fairly simple, structured much the same way. I do remember a similar issue when I implemented the first one years back but I solved it by adding updated to the hook.

2

You need to mark the container with ignore : DOM patching & temporary assigns — Phoenix LiveView v0.19.0 so it won’t get patched by the server.

3 Likes
3

Thank you! I hadn’t seen all the docs on ignore, I think I tried something like phx-ignore="true" and decided it didn’t work last night :laughing: