LiveView Hook callbacks not working

Phoenix Forum Questions / Help
, ,
1

I am trying to get the Trix editor to work with Phoenix LiveView. The editor is rendering and populating with text, however, I am now trying to use a LiveView JS Hook to get updates to the editor this is not working. I suspect this may have something to do with needing to add a phx-update="ignore" but so far no luck. This editor is also dynamically being added to page so that may be an issue but I’m not sure.

The form:

<%= hidden_input @form, :label,
  id: "trix-id-#{@uniuqe_id}",
  phx_hook: "TrixEditor" %>

<trix-editor input="<%= "trix-id-#{@unique_id}" %>" >
</trix-editor>

And the LiveView JS Hook:

const TrixEditor = {
  mounted() {
    console.log("i am mounted")
  },

  updated() {
    console.log("editor update...")
  }

}

export default TrixEditor

When the editor loads I am seeing the i am mounted but when I make changes the updated callback is never triggered.

2

updated is not a DOM event. JavaScript interoperability — Phoenix LiveView v0.20.2

  • updated - the element has been updated in the DOM by the server

Important here is by the server

3

HI is there any solutions for this yet? I am trying to use updated to send lat lng so that marker can be generated

4

As stated, updated() is a function triggered by the live_view JS when the server is updating the element, not for catching client-side changes.

If you want to send document changes to the server when the editor is updated by the user, you should set up event listeners on the trix element in the mounted() hook function, listening to the relevant editor changes, and then using this.pushEvent(event, payload, (reply, ref) => ...) in the listener to send whatever you want back to the server.

1 Like
5

Alternative easier answer is to leverage the trix form integration

Integrating With Forms

To submit the contents of a <trix-editor> with a form, first define a hidden input field in the form and assign it an id. Then reference that id in the editor’s input attribute.

<form …>
<input id="x" type="hidden" name="content">
<trix-editor input="x"></trix-editor>
</form>

Trix will automatically update the value of the hidden input field with each change to the editor.

Then set up a phx-change trigger on the form.