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

Diff for: 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",

Diff for: 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"

Diff for: src/test/system/morphing_test.js

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

Diff for: 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 = [ "initialized" ]
+
   #delegate
 
   constructor() {
@@ -410,6 +412,7 @@ export default class TrixEditorElement extends HTMLElement {
     } else if (this.parentNode) {
       const toolbarId = `trix-toolbar-${this.trixId}`
       this.setAttribute("toolbar", toolbarId)
+      this.toggleAttribute("internal-toolbar", true)
       const element = makeElement("trix-toolbar", { id: toolbarId })
       this.parentNode.insertBefore(element, this)
       return element
@@ -453,6 +456,14 @@ export default class TrixEditorElement extends HTMLElement {
     this.editor?.loadHTML(this.defaultValue)
   }
 
+  // Element callbacks
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "initialized" && oldValue != null && oldValue !== newValue) {
+      requestAnimationFrame(() => this.reconnect())
+    }
+  }
+
   // Controller delegate methods
 
   notify(message, data) {
@@ -485,6 +496,8 @@ export default class TrixEditorElement extends HTMLElement {
       }
       this.editorController.registerSelectionManager()
       this.#delegate.connectedCallback()
+
+      this.toggleAttribute("initialized", true)
       autofocus(this)
     }
   }
@@ -494,6 +507,18 @@ export default class TrixEditorElement extends HTMLElement {
     this.#delegate.disconnectedCallback()
   }
 
+  async reconnect() {
+    this.removeInternalToolbar()
+    this.disconnectedCallback()
+    this.connectedCallback()
+  }
+
+  removeInternalToolbar() {
+    if (this.toolbarElement?.hasAttribute("internal-toolbar")) {
+      this.toolbarElement.remove()
+    }
+  }
+
   // Form support
 
   checkValidity() {