Trix editor breaks after page morph

[pinzonjulian]

Example repo

Fresh Rails app built to showcase this behaviour
https://github.com/pinzonjulian/trix_morphing_issue_turbo_8_beta_4

Rails 7.1.3
turbo-rails 8.0.0.beta4

Issue

In a new Rails app using the latest beta (4) for Turbo 8, a trix-editor breaks after morphing.

At first I thought this might be related to #1133 and #1140 but upon further inspection it seems that this is not related to stylesheets but to the initialisation of the Trix custom element.

Step by step

(low quality because GitHub requires 10mb max. See screenshots below for hi-def)

trix_morph_issue_480.mov

First load

• Page is loaded
• Trix adds styles to the head
• Refreshes are set to use morph and to preserve scroll

After submitting the form

• Page refreshes
• Trix editor breaks: Toolbar disappears from the dom, rich text area does not allow any input.

Verifying that morph is actually happening

This screenshot was taken after reloading the browser manually. Notice how, right after morphing, only the affected nodes light up. More specifically, the element with ID comment_1 is not morphed.

Workarounds

❌data-turbo-permanent in form helper

If I add data-turbo-permanent to the form helper form.rich_text_area :body, data: { turbo_permanent: true } the editor keeps being interactive but the toolbar disappears.

✅ data-turbo-permanent wrapping form helper

This does work. Is this the suggested way to make Trix work with morhping?

[afcapel]

Unfortunately this is a limitation of morphing. It's a common practice for libraries to assume they can be in charge of some part of the DOM, and that part will only change using the library public APIs. For example, Trix assumes it will have full control of the contenteditable area and the toolbar. When those elements change in a morph update Trix loses its state.

There's not much Trix can do about this, mutating the editor content bypassing Trix API will always have unpredictable consequences.

Using data-turbo-permanent is the preferred approach here. You need to ensure data-turbo-permanent wraps both the editor and the toolbar, that's why you need to put it in a wrapper element.