Make Trix compatible with morphing

Morphing the trix editor will leave it in an unusuable state because
morphing will replace the bootstrapping elements without triggering
the connection logic.

The solution is based on adding an attribute to flag the editor as
initialized and detect when that attribute is modified.

See hotwired/turbo-rails#533 (comment)

Author: jorgemanrubia

karma.conf.js

@@ -70,7 +70,7 @@ if (process.env.SAUCE_ACCESS_KEY) {
       browserName: "safari",
       platform: "ios",
       device: "iPhone X Simulator",
-      version: "13.0"
+      version: "latest"
     },
     sl_android_9: {
       base: "SauceLabs",

src/test/system.js

@@ -15,6 +15,7 @@ import "test/system/html_replacement_test"
 import "test/system/installation_process_test"
 import "test/system/level_2_input_test"
 import "test/system/list_formatting_test"
+import "test/system/morphing_test"
 import "test/system/mutation_input_test"
 import "test/system/pasting_test"
 import "test/system/text_formatting_test"

src/test/system/morphing_test.js

@@ -0,0 +1,36 @@
+import { assert, test, testGroup } from "test/test_helper"
+import { nextFrame } from "../test_helpers/timing_helpers"
+
+testGroup("morphing with internal toolbar", { template: "editor_empty" }, () => {
+  test("removing the 'connected' attribute will reset the editor and recreate toolbar", async () => {
+    const element = getEditorElement()
+
+    assert.ok(element.hasAttribute("connected"))
+
+    const originalToolbar = element.toolbarElement
+    element.toolbarElement.remove()
+    element.removeAttribute("toolbar")
+    element.removeAttribute("connected")
+    await nextFrame()
+
+    assert.ok(element.hasAttribute("connected"))
+    assert.ok(element.toolbarElement)
+    assert.notEqual(originalToolbar, element.toolbarElement)
+  })
+})
+
+testGroup("morphing with external toolbar", { template: "editor_with_toolbar_and_input" }, () => {
+  test("removing the 'connected' attribute will reset the editor leave the toolbar untouched", async () => {
+    const element = getEditorElement()
+
+    assert.ok(element.hasAttribute("connected"))
+
+    const originalToolbar = element.toolbarElement
+    element.removeAttribute("connected")
+    await nextFrame()
+
+    assert.ok(element.hasAttribute("connected"))
+    assert.ok(element.toolbarElement)
+    assert.equal(originalToolbar, element.toolbarElement)
+  })
+})

src/trix/elements/trix_editor_element.js

@@ -348,6 +348,8 @@ class LegacyDelegate {
 export default class TrixEditorElement extends HTMLElement {
   static formAssociated = "ElementInternals" in window
 
+  static observedAttributes = [ "connected" ]
+
   #delegate
 
   constructor() {
@@ -410,9 +412,9 @@ export default class TrixEditorElement extends HTMLElement {
     } else if (this.parentNode) {
       const toolbarId = `trix-toolbar-${this.trixId}`
       this.setAttribute("toolbar", toolbarId)
-      const element = makeElement("trix-toolbar", { id: toolbarId })
-      this.parentNode.insertBefore(element, this)
-      return element
+      this.internalToolbar = makeElement("trix-toolbar", { id: toolbarId })
+      this.parentNode.insertBefore(this.internalToolbar, this)
+      return this.internalToolbar
     } else {
       return undefined
     }
@@ -453,6 +455,14 @@ export default class TrixEditorElement extends HTMLElement {
     this.editor?.loadHTML(this.defaultValue)
   }
 
+  // Element callbacks
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.reconnect())
+    }
+  }
+
   // Controller delegate methods
 
   notify(message, data) {
@@ -485,13 +495,27 @@ export default class TrixEditorElement extends HTMLElement {
       }
       this.editorController.registerSelectionManager()
       this.#delegate.connectedCallback()
+
+      this.toggleAttribute("connected", true)
       autofocus(this)
     }
   }
 
   disconnectedCallback() {
     this.editorController?.unregisterSelectionManager()
     this.#delegate.disconnectedCallback()
+    this.toggleAttribute("connected", false)
+  }
+
+  reconnect() {
+    this.removeInternalToolbar()
+    this.disconnectedCallback()
+    this.connectedCallback()
+  }
+
+  removeInternalToolbar() {
+    this.internalToolbar?.remove()
+    this.internalToolbar = null
   }
 
   // Form support