Enable morphing (again). Prevent morphing of Trix editor.

Problems with the Trix editor blocked this before. I didn't identify problems with any other components. The issue seems to be cases where a component adds elements and the morph removes them but does not reinitialize the component so it can fix things up. See: hotwired/turbo-rails#533 See: hotwired/turbo#1083
toddsundsted · Nov 16, 2024 · 7994fae · 7994fae
1 parent f241303
commit 7994fae
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
@@ -75,3 +75,22 @@ Trix.config.blockAttributes.pre = { tagName: "pre", terminal: true, text: { plai
 Trix.config.textAttributes.code = { tagName: "code", inheritable: true }
 Trix.config.textAttributes.sub = { tagName: "sub", inheritable: true }
 Trix.config.textAttributes.sup = { tagName: "sup", inheritable: true }
+
+// prevent morphing of the editor. when editing, the editor has client
+// state that will be lost if the page is refreshed.
+// see: https://github.com/hotwired/turbo-rails/issues/533
+// see: https://github.com/hotwired/turbo/issues/1083
+
+addEventListener("turbo:before-morph-attribute", (event) => {
+  const { target } = event
+  if (target.tagName == "FORM" && target.classList.contains("editor")) {
+    event.preventDefault()
+  }
+})
+
+addEventListener("turbo:before-morph-element", (event) => {
+  const { target } = event
+  if (target.tagName == "FORM" && target.classList.contains("editor")) {
+    event.preventDefault()
+  }
+})
diff --git a/src/views/layouts/default.html.ecr b/src/views/layouts/default.html.ecr
@@ -2,6 +2,8 @@
 <html lang='en'>
     <head>
         <meta charset='utf-8'>
+        <meta name="turbo-refresh-method" content="morph">
+        <meta name="turbo-refresh-scroll" content="preserve">
         <meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,shrink-to-fit=no' name='viewport'>
         <meta name="theme-color" content="#ffffff">
         <meta name="msapplication-TileColor" content="#da532c">

diff --git a/src/views/partials/editor.html.slang b/src/views/partials/editor.html.slang
@@ -7,7 +7,7 @@ crystal:
   must_be_unique = canonical_path_errors.try(&.includes?("must be unique"))
   content = object.source.try(&.content) || object.content || ""
   actor = env.account.actor
-form.ui.form id="object-#{id}" class=(has_errors ? "error" : nil) data-controller="has-content" method="POST"
+form.ui.form.editor id="object-#{id}" class=(has_errors ? "error" : nil) data-controller="has-content" method="POST"
   - if canonical_path_errors
     .ui.error.message
       .header The Canonical Path is Invalid