Update happens abnormally when using Trix editor in LiveView

[nallwhy]

I expected that update trix -> update input -> trigger form change -> event! but trix -> update input doesn’t work well.

I solved this problem with this comment.

WYSIWIG HTML editors for Phoenix LiveView?

The hook: import Trix from "trix"; export default { mounted() { const element = document.querySelector("trix-editor"); element.editor.element.addEventListener("trix-change", (e) => { this.el.dispatchEvent(new Event("change", { bubbles: true })); }); element.editor.element.addEventListener("trix-initialize", () => { element.editor.element.focus(); var length = element.editor.getDocument().toString().length; window.setTimeout(() => { element.edit…