How do I include the contents of a contenteditable element in a HTMX request? - htmx

Question

I'd like to post the contents of a contenteditable field/div whenever it changes. hx-trigger="change" didn't trigger, but using hx-trigger="blur" is okay. How do I submit the value of the contenteditable div in the request?
<div id='parent-div'>
<div contenteditable='true'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerHTML">
Hello, I am a content editable field
</div>
</div>

Answer 1

I don't believe htmx supports submitting contenteditable values out of the box. You'd probably need to mirror the content text within contenteditable to a a hidden input and move the hx attributes to the parent div.
You could use something like https://alpinejs.dev/ or htmx's companion https://hyperscript.org/
With hyperscript you could do it with something like this:
<div id='parent-div'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerHTML">
<div id="editordiv" contenteditable='true'>
Hello, I am a content editable field
</div>
<input type="hidden" name="editor" _="on keyup from #editordiv put its innerHTML into me" />
</div>
I found an old reference from the htmx Discord that offers another way of doing this:
<form hx-post="/whatever"
hx-vals="javascript: editable:htmx.find('#myEditable').innerHTML"> ...