TipTap editor in FormComponent not working

[codeanpeace]

Welcome to elixirforum!

Take a look at this example of a WYIWYG JS editor populating a hidden input form field via a LiveView client side hook:

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…