Thank you for responding! I have looked at that thread before, but the setup for TipTap seems more complex than Trix so I wasn’t able to figure out anything new from there.
I was able to solve my problem by just putting the editor and the hidden input in the top level form component instead of extracting it to a separate component. I guess maybe passing a form field down into a child component doesn’t track the changes too well.
<.simple_form
for={@form}
id="project-form"
phx-target={@myself}
phx-change="validate"
phx-submit="save"
>
<.input field={@form[:title]} type="text" label="Title" />
<%!-- TipTap editor --%>
<div
phx-hook="TextEditor"
id="editor-wrapper"
data-value={@form[:body].value}
data-class="w-full p-2 mt-2 border rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6 border-zinc-300 focus:border-zinc-400"
>
<div data-editor="body" id="editor-component" phx-update="ignore"></div>
<.input type="hidden" field={@form[:body]} data-editor-hidden="body" />
</div>
<:actions>
<.button phx-disable-with="Saving..." class="px-2 py-1 text-white bg-blue-500 rounded-md">
Save Project
</.button>
</:actions>
</.simple_form>
This works fine now, I’d love to extract it out into a reuseable component but this will work for now.
My TipTap integration was based on this guide if anybody wants to do the same:
