Working Notes Example

This is a form demonstrating several techniques for avoiding issues with morping. When you submit a form to create a new note, this page will be updated with morphing.

First we have an info box that can be open or closed.

Its open/closed state is stored server side. In this demo we are storing it in the session to keep it simple but in reality it could be stored in a user preferences record, for example.

Next, we have a form for creating a new note which uses a rich JS component, trix editor. It's too complex to do something clever so it's easiest to just exclude it using data-turbo-permanet.

Then we have a list of notes whose content can be open or closed. Their state is stored in the URL. There's a Stimulus controller attached which modifies a comma separated list of notes that are open. Since form submission redirects back after creating a new note, the URL modifications are preserved.

Sample Note

This is a sample note

Finally, we have a component which is counting clicks user made since the page was first open (I ran out of sensible examples). It continues counting across page refreshes by listening to turbo:before-morph-element and preventing it.