Is it possible to mark certain parts of a template so that it is not updated by LiveView?

I’m in the process of integrating LiveView into my website. Javascript has been limited to Bootstrap and a couple of 3rd party libraries. I’m not using any javascript frameworks, so migrating to LiveView has been fairly straight forward.

Except for one case - I use Emojionearea for data entry on a text/comment field. Essentially, this is a WYSIWYG editor that piggybacks on the original textarea control - showing an alternative contenteditable div in its place. The original textarea is still there (and it’s synchronised with the editable div) but it’s hidden. It does this, of course, by altering the DOM dynamically.

When the LiveView is connected, it re-renders the html - undoing the changes Emojionearea made to the DOM. Which makes sense, since that’s the point of LiveView. However, I find myself in a situation where I would like to depend on LiveView as the main delivery mechanism but I want the convenience of the client-side WYSIWYG editor for my data entry.

Is there a way to prevent part of the live template from being overwritten?

I believe it’s in the roadmap, but not there yet. See José’s comment here: Existing tag bindings are removed when phx live view updates the ui on form validation using phx_change: :validate

2 Likes

Cool. It would be neat if it supported elements that had the contenteditable attribute set to true out of the box.