From f1bdb3ac39c2561025d7ba4b05641ea60dec7e23 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Mon, 15 Jan 2024 11:05:28 -0500
Subject: [PATCH] Integrate with `ElementInternals`

Closes [#1023][]

Replace the requirement for an `<input type="hidden">` element with
direct `<form>` integration through built-in support for
[ElementInternals][].

According to the [Form-associated custom elements][] section of [More
capable form controls][], various behaviors that the `<trix-editor>`
element was recreating are provided out of the box.

For example, the `<input type="hidden">`-`[input]` attribute pairing can
be achieved through [ElementInternals.setFormValue][]. Similarly, the
`<label>` element support can be achieved through
[ElementInternals.labels][].

[#1023]: https://github.com/basecamp/trix/issues/1023
[ElementInternals]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
[Form-associated custom elements]: https://web.dev/articles/more-capable-form-controls#form-associated_custom_elements
[More capable form controls]: https://web.dev/articles/more-capable-form-controls
[ElementInternals.setFormValue]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
[ElementInternals.labels]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels
---
 README.md                                     | 52 ++++++++--
 assets/index.html                             |  8 +-
 src/test/system/custom_element_test.js        | 41 ++++----
 src/test/system/installation_process_test.js  | 10 +-
 src/test/test_helpers/fixtures/editor_html.js |  4 +-
 .../fixtures/editor_unsafe_html.js            |  2 +
 .../fixtures/editor_with_image.js             |  3 +-
 .../fixtures/editor_with_toolbar_and_input.js |  3 +-
 .../fixtures/editors_with_forms.js            |  6 +-
 src/test/test_helpers/fixtures/fixtures.js    |  2 +
 src/trix/controllers/editor_controller.js     |  2 +-
 src/trix/elements/trix_editor_element.js      | 97 ++++++-------------
 12 files changed, 107 insertions(+), 123 deletions(-)
 create mode 100644 src/test/test_helpers/fixtures/editor_unsafe_html.js

diff --git a/README.md b/README.md
index 0133f94a3..4dbca2330 100644
--- a/README.md
+++ b/README.md
@@ -49,36 +49,68 @@ document.addEventListener("trix-before-initialize", () => {
 
 ## Creating an Editor
 
-Place an empty `<trix-editor></trix-editor>` tag on the page. Trix will automatically insert a separate `<trix-toolbar>` before the editor.
+Place an empty `<trix-editor></trix-editor>` tag on the page. If the `<trix-editor>` element is rendered with a `[toolbar]` attribute that references the element by its `[id]`, it will treat that element as its toolbar:
+
+```html
+<trix-toolbar id="editor_toolbar"></trix-toolbar>
+
+<trix-editor toolbar="editor_toolbar"></trix-editor>
+```
+
+Otherwise, Trix will automatically insert a separate `<trix-toolbar>` before the editor.
 
 Like an HTML `<textarea>`, `<trix-editor>` accepts `autofocus` and `placeholder` attributes. Unlike a `<textarea>`, `<trix-editor>` automatically expands vertically to fit its contents.
 
 ## Integrating With Forms
 
-To submit the contents of a `<trix-editor>` with a form, first define a hidden input field in the form and assign it an `id`. Then reference that `id` in the editor’s `input` attribute.
+Like other form controls, the `<trix-editor>` element supports two styles of integrating with `<label>` elements:
+
+1. render the `<trix-editor>` element with an `[id]` attribute that the `<label>` element references through its `[for]` attribute:
+
+```html
+<label for="editor">Editor</label>
+<trix-editor id="editor"></trix-editor>
+```
+
+2. render the `<trix-editor>` element as a child of the `<label>` element:
+
+```html
+<trix-toolbar id="editor-toolbar"></trix-toolbar>
+<label>
+  Editor
+
+  <trix-editor toolbar="editor-toolbar"></trix-editor>
+</label>
+```
+
+> [!WARNING]
+> When rendering the `<trix-editor>` element as a child of the `<label>` element, [explicitly render](#creating-an-editor) the corresponding `<trix-toolbar>` element outside of the `<label>` element.
+
+To submit the contents of a `<trix-editor>` with a `<form>`, render the element with a `[name]` attribute and its initial value as its inner HTML.
 
 ```html
 <form …>
-  <input id="x" type="hidden" name="content">
-  <trix-editor input="x"></trix-editor>
+  <trix-editor name="content"></trix-editor>
 </form>
 ```
 
-Trix will automatically update the value of the hidden input field with each change to the editor.
+To associate the element with a `<form>` that isn't an ancestor, render the element with a `[form]` attribute that references the `<form>` element by its `[id]`:
+
+```html
+<form id="a-form-element" …></form>
+<trix-editor name="content" form="a-form-element"></trix-editor>
+```
 
 ## Populating With Stored Content
 
-To populate a `<trix-editor>` with stored content, include that content in the associated input element’s `value` attribute.
+To populate a `<trix-editor>` with stored content, include that content as HTML inside the element’s inner HTML.
 
 ```html
 <form …>
-  <input id="x" value="Editor content goes here" type="hidden" name="content">
-  <trix-editor input="x"></trix-editor>
+  <trix-editor>Editor content goes here</trix-editor>
 </form>
 ```
 
-Always use an associated input element to safely populate an editor. Trix won’t load any HTML content inside a `<trix-editor>…</trix-editor>` tag.
-
 ## Styling Formatted Content
 
 To ensure what you see when you edit is what you see when you save, use a CSS class name to scope styles for Trix formatted content. Apply this class name to your `<trix-editor>` element, and to a containing element when you render stored Trix content for display in your application.
diff --git a/assets/index.html b/assets/index.html
index e4cf73b85..433074b69 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -41,6 +41,11 @@
         Trix.Inspector.install(event.target);
       });
 
+      document.addEventListener("trix-change", function(event) {
+        var input = document.getElementById("input")
+        input.value = event.target.value
+      })
+
       document.addEventListener("trix-attachment-add", function(event) {
         var attachment = event.attachment;
         if (attachment.file) {
@@ -72,7 +77,8 @@
   </head>
   <body>
     <main>
-      <trix-editor autofocus class="trix-content" input="input"></trix-editor>
+      <label for="editor">Input</label>
+      <trix-editor autofocus id="editor" class="trix-content"></trix-editor>
       <details id="output">
         <summary>Output</summary>
         <textarea readonly id="input"></textarea>
diff --git a/src/test/system/custom_element_test.js b/src/test/system/custom_element_test.js
index 2e77e3fc4..8d03d60e2 100644
--- a/src/test/system/custom_element_test.js
+++ b/src/test/system/custom_element_test.js
@@ -442,7 +442,7 @@ testGroup("Custom element API", { template: "editor_empty" }, () => {
 
   test("editor resets to its original value on form reset", async () => {
     const element = getEditorElement()
-    const { form } = element.inputElement
+    const { form } = element
 
     await typeCharacters("hello")
     form.reset()
@@ -451,7 +451,7 @@ testGroup("Custom element API", { template: "editor_empty" }, () => {
 
   test("editor resets to last-set value on form reset", async () => {
     const element = getEditorElement()
-    const { form } = element.inputElement
+    const { form } = element
 
     element.value = "hi"
     await typeCharacters("hello")
@@ -461,7 +461,7 @@ testGroup("Custom element API", { template: "editor_empty" }, () => {
 
   test("editor respects preventDefault on form reset", async () => {
     const element = getEditorElement()
-    const { form } = element.inputElement
+    const { form } = element
     const preventDefault = (event) => event.preventDefault()
 
     await typeCharacters("hello")
@@ -473,27 +473,24 @@ testGroup("Custom element API", { template: "editor_empty" }, () => {
   })
 })
 
-testGroup("<label> support", { template: "editor_with_labels" }, () => {
-  test("associates all label elements", () => {
-    const labels = [ document.getElementById("label-1"), document.getElementById("label-3") ]
-    assert.deepEqual(getEditorElement().labels, labels)
-  })
+testGroup("HTML sanitization", { template: "editor_unsafe_html" }, () => {
+  test("editor sanitizes initial value", async () => {
+    const element = getEditorElement()
 
-  test("focuses when <label> clicked", () => {
-    document.getElementById("label-1").click()
-    assert.equal(getEditorElement(), document.activeElement)
-  })
+    expectDocument("safe\n")
 
-  test("focuses when <label> descendant clicked", () => {
-    document.getElementById("label-1").querySelector("span").click()
-    assert.equal(getEditorElement(), document.activeElement)
+    assert.equal(element.innerHTML, "<div><!--block-->safe</div>")
   })
+})
+
+testGroup("<label> support", { template: "editor_with_labels" }, () => {
+  test("associates all label elements", () => {
+    const element = getEditorElement()
+    const labels = Array.from(element.labels)
+    const controls = labels.map((label) => label.control)
 
-  test("does not focus when <label> controls another element", () => {
-    const label = document.getElementById("label-2")
-    assert.notEqual(getEditorElement(), label.control)
-    label.click()
-    assert.notEqual(getEditorElement(), document.activeElement)
+    assert.deepEqual(labels, [ document.getElementById("label-1"), document.getElementById("label-3") ])
+    assert.deepEqual(controls, [ element, element ])
   })
 })
 
@@ -505,8 +502,8 @@ testGroup("form property references its <form>", { template: "editors_with_forms
   })
 
   test("transitively accesses its related <input> element's <form>", () => {
-    const form = document.getElementById("input-form")
-    const editor = document.getElementById("editor-with-input-form")
+    const form = document.getElementById("attribute-form")
+    const editor = document.getElementById("editor-with-attribute-form")
     assert.equal(editor.form, form)
   })
 
diff --git a/src/test/system/installation_process_test.js b/src/test/system/installation_process_test.js
index fc6195fbd..a8c8b0df5 100644
--- a/src/test/system/installation_process_test.js
+++ b/src/test/system/installation_process_test.js
@@ -21,7 +21,7 @@ testGroup("Installation process", { template: "editor_html" }, () => {
 })
 
 testGroup("Installation process without specified elements", { template: "editor_empty" }, () =>
-  test("creates identified toolbar and input elements", () => {
+  test("creates identified toolbar", () => {
     const editorElement = getEditorElement()
 
     const toolbarId = editorElement.getAttribute("toolbar")
@@ -29,12 +29,6 @@ testGroup("Installation process without specified elements", { template: "editor
     const toolbarElement = document.getElementById(toolbarId)
     assert.ok(toolbarElement, "toolbar element not assert.ok")
     assert.equal(editorElement.toolbarElement, toolbarElement)
-
-    const inputId = editorElement.getAttribute("input")
-    assert.ok(/trix-input-\d+/.test(inputId), `input id not assert.ok ${JSON.stringify(inputId)}`)
-    const inputElement = document.getElementById(inputId)
-    assert.ok(inputElement, "input element not assert.ok")
-    assert.equal(editorElement.inputElement, inputElement)
   })
 )
 
@@ -42,7 +36,6 @@ testGroup("Installation process with specified elements", { template: "editor_wi
   test("uses specified elements", () => {
     const editorElement = getEditorElement()
     assert.equal(editorElement.toolbarElement, document.getElementById("my_toolbar"))
-    assert.equal(editorElement.inputElement, document.getElementById("my_input"))
     assert.equal(editorElement.value, "<div>Hello world</div>")
   })
 
@@ -58,7 +51,6 @@ testGroup("Installation process with specified elements", { template: "editor_wi
 
     const editorElement = getEditorElement()
     assert.equal(editorElement.toolbarElement, document.getElementById("my_toolbar"))
-    assert.equal(editorElement.inputElement, document.getElementById("my_input"))
     assert.equal(editorElement.value, "<div>Hello world</div>")
   })
 })
diff --git a/src/test/test_helpers/fixtures/editor_html.js b/src/test/test_helpers/fixtures/editor_html.js
index 6726380b2..44a5ad802 100644
--- a/src/test/test_helpers/fixtures/editor_html.js
+++ b/src/test/test_helpers/fixtures/editor_html.js
@@ -1,3 +1,3 @@
 export default () =>
-  `<input id="my_input" type="hidden" value="&lt;div&gt;Hello world&lt;/div&gt;">
-  <trix-editor input="my_input" autofocus placeholder="Say hello..."></trix-editor>`
+  `<trix-editor autofocus placeholder="Say hello..."><div>Hello world</div></trix-editor>
+  `
diff --git a/src/test/test_helpers/fixtures/editor_unsafe_html.js b/src/test/test_helpers/fixtures/editor_unsafe_html.js
new file mode 100644
index 000000000..7991ebb77
--- /dev/null
+++ b/src/test/test_helpers/fixtures/editor_unsafe_html.js
@@ -0,0 +1,2 @@
+export default () => `<trix-editor autofocus><div>safe</div><script>alert("unsafe")</script></trix-editor>
+`
diff --git a/src/test/test_helpers/fixtures/editor_with_image.js b/src/test/test_helpers/fixtures/editor_with_image.js
index 43bebff24..3f89d5829 100644
--- a/src/test/test_helpers/fixtures/editor_with_image.js
+++ b/src/test/test_helpers/fixtures/editor_with_image.js
@@ -1,5 +1,4 @@
 import { TEST_IMAGE_URL } from "./test_image_url"
 
 export default () =>
-  `<trix-editor input="my_input" autofocus placeholder="Say hello..."></trix-editor>
-  <input id="my_input" type="hidden" value="ab&lt;img src=&quot;${TEST_IMAGE_URL}&quot; width=&quot;10&quot; height=&quot;10&quot;&gt;">`
+  `<trix-editor autofocus placeholder="Say hello...">ab<img src="${TEST_IMAGE_URL}" width="10" height="10"></trix-editor>`
diff --git a/src/test/test_helpers/fixtures/editor_with_toolbar_and_input.js b/src/test/test_helpers/fixtures/editor_with_toolbar_and_input.js
index 2268e1544..16e1e2b2b 100644
--- a/src/test/test_helpers/fixtures/editor_with_toolbar_and_input.js
+++ b/src/test/test_helpers/fixtures/editor_with_toolbar_and_input.js
@@ -1,6 +1,5 @@
 export default () =>
   `<ul id="my_editor">
     <li><trix-toolbar id="my_toolbar"></trix-toolbar></li>
-    <li><trix-editor toolbar="my_toolbar" input="my_input" autofocus placeholder="Say hello..."></trix-editor></li>
-    <li><input id="my_input" type="hidden" value="&lt;div&gt;Hello world&lt;/div&gt;"></li>
+    <li><trix-editor toolbar="my_toolbar" autofocus placeholder="Say hello..."><div>Hello world</div></trix-editor></li>
   </ul>`
diff --git a/src/test/test_helpers/fixtures/editors_with_forms.js b/src/test/test_helpers/fixtures/editors_with_forms.js
index 56ed494ac..bfe59b126 100644
--- a/src/test/test_helpers/fixtures/editors_with_forms.js
+++ b/src/test/test_helpers/fixtures/editors_with_forms.js
@@ -3,9 +3,7 @@ export default () =>
     <trix-editor id="editor-with-ancestor-form"></trix-editor>
   </form>
 
-  <form id="input-form">
-    <input type="hidden" id="hidden-input">
-  </form>
-  <trix-editor id="editor-with-input-form" input="hidden-input"></trix-editor>
+  <form id="attribute-form"></form>
+  <trix-editor id="editor-with-attribute-form" form="attribute-form"></trix-editor>
 
   <trix-editor id="editor-with-no-form"></trix-editor>`
diff --git a/src/test/test_helpers/fixtures/fixtures.js b/src/test/test_helpers/fixtures/fixtures.js
index dc3f999c2..67959529c 100644
--- a/src/test/test_helpers/fixtures/fixtures.js
+++ b/src/test/test_helpers/fixtures/fixtures.js
@@ -11,6 +11,7 @@ import StringPiece from "trix/models/string_piece"
 import editorDefaultAriaLabel from "./editor_default_aria_label"
 import editorEmpty from "./editor_empty"
 import editorHtml from "./editor_html"
+import editorUnsafeHtml from "./editor_unsafe_html"
 import editorInTable from "./editor_in_table"
 import editorWithBlockStyles from "./editor_with_block_styles"
 import editorWithBoldStyles from "./editor_with_bold_styles"
@@ -25,6 +26,7 @@ export const fixtureTemplates = {
   "editor_default_aria_label": editorDefaultAriaLabel,
   "editor_empty": editorEmpty,
   "editor_html": editorHtml,
+  "editor_unsafe_html": editorUnsafeHtml,
   "editor_in_table": editorInTable,
   "editor_with_block_styles": editorWithBlockStyles,
   "editor_with_bold_styles": editorWithBoldStyles,
diff --git a/src/trix/controllers/editor_controller.js b/src/trix/controllers/editor_controller.js
index 6f469db5a..04c2e921d 100644
--- a/src/trix/controllers/editor_controller.js
+++ b/src/trix/controllers/editor_controller.js
@@ -503,7 +503,7 @@ export default class EditorController extends Controller {
   updateInputElement() {
     const element = this.compositionController.getSerializableElement()
     const value = serializeToContentType(element, "text/html")
-    return this.editorElement.setInputElementValue(value)
+    return this.editorElement.setFormValue(value)
   }
 
   notifyEditorElement(message, data) {
diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js
index 33877cc1a..4e71e1f64 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -1,7 +1,6 @@
 import * as config from "trix/config"
 
 import {
-  findClosestElementFromNode,
   handleEvent,
   handleEventOnce,
   installDefaultCSSForTagName,
@@ -161,6 +160,15 @@ installDefaultCSSForTagName("trix-editor", `\
 }`)
 
 export default class TrixEditorElement extends HTMLElement {
+  static formAssociated = true
+
+  #internals
+  #value
+
+  constructor() {
+    super()
+    this.#internals = this.attachInternals()
+  }
 
   // Properties
 
@@ -174,19 +182,7 @@ export default class TrixEditorElement extends HTMLElement {
   }
 
   get labels() {
-    const labels = []
-    if (this.id && this.ownerDocument) {
-      labels.push(...Array.from(this.ownerDocument.querySelectorAll(`label[for='${this.id}']`) || []))
-    }
-
-    const label = findClosestElementFromNode(this, { matchingSelector: "label" })
-    if (label) {
-      if ([ this, null ].includes(label.control)) {
-        labels.push(label)
-      }
-    }
-
-    return labels
+    return this.#internals.labels
   }
 
   get toolbarElement() {
@@ -204,33 +200,23 @@ export default class TrixEditorElement extends HTMLElement {
   }
 
   get form() {
-    return this.inputElement?.form
-  }
-
-  get inputElement() {
-    if (this.hasAttribute("input")) {
-      return this.ownerDocument?.getElementById(this.getAttribute("input"))
-    } else if (this.parentNode) {
-      const inputId = `trix-input-${this.trixId}`
-      this.setAttribute("input", inputId)
-      const element = makeElement("input", { type: "hidden", id: inputId })
-      this.parentNode.insertBefore(element, this.nextElementSibling)
-      return element
-    } else {
-      return undefined
-    }
+    return this.#internals.form
   }
 
   get editor() {
     return this.editorController?.editor
   }
 
+  get type() {
+    return this.localName
+  }
+
   get name() {
-    return this.inputElement?.name
+    return this.getAttribute("name")
   }
 
   get value() {
-    return this.inputElement?.value
+    return this.#value
   }
 
   set value(defaultValue) {
@@ -246,10 +232,9 @@ export default class TrixEditorElement extends HTMLElement {
     }
   }
 
-  setInputElementValue(value) {
-    if (this.inputElement) {
-      this.inputElement.value = value
-    }
+  setFormValue(value) {
+    this.#value = value
+    this.#internals.setFormValue(value)
   }
 
   // Element lifecycle
@@ -264,62 +249,34 @@ export default class TrixEditorElement extends HTMLElement {
         triggerEvent("trix-before-initialize", { onElement: this })
         this.editorController = new EditorController({
           editorElement: this,
-          html: this.defaultValue = this.value,
+          html: this.defaultValue = this.innerHTML,
         })
         requestAnimationFrame(() => triggerEvent("trix-initialize", { onElement: this }))
       }
       this.editorController.registerSelectionManager()
-      this.registerResetListener()
-      this.registerClickListener()
       autofocus(this)
     }
   }
 
   disconnectedCallback() {
     this.editorController?.unregisterSelectionManager()
-    this.unregisterResetListener()
-    return this.unregisterClickListener()
   }
 
-  // Form support
+  // ElementInternals lifecycle
 
-  registerResetListener() {
-    this.resetListener = this.resetBubbled.bind(this)
-    return window.addEventListener("reset", this.resetListener, false)
-  }
+  formAssociatedCallback(form) {
 
-  unregisterResetListener() {
-    return window.removeEventListener("reset", this.resetListener, false)
   }
 
-  registerClickListener() {
-    this.clickListener = this.clickBubbled.bind(this)
-    return window.addEventListener("click", this.clickListener, false)
-  }
+  formDisabledCallback(disabled) {
 
-  unregisterClickListener() {
-    return window.removeEventListener("click", this.clickListener, false)
   }
 
-  resetBubbled(event) {
-    if (event.defaultPrevented) return
-    if (event.target !== this.form) return
-    return this.reset()
+  formResetCallback() {
+    this.value = this.defaultValue
   }
 
-  clickBubbled(event) {
-    if (event.defaultPrevented) return
-    if (this.contains(event.target)) return
-
-    const label = findClosestElementFromNode(event.target, { matchingSelector: "label" })
-    if (!label) return
-
-    if (!Array.from(this.labels).includes(label)) return
+  formStateRestoreCallback(state, mode) {
 
-    return this.focus()
-  }
-
-  reset() {
-    this.value = this.defaultValue
   }
 }