From 5e9cecc663e52c8e41a48922f9693d4e7544f01c Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Thu, 3 Oct 2024 18:43:45 -0400
Subject: [PATCH] Re-submit disabled and validations with backwards compatible
 support

---
 .github/workflows/ci.yml                      |   5 +
 README.md                                     |  12 +-
 karma.conf.js                                 |  10 +-
 src/test/system/custom_element_test.js        |  47 ++++-
 .../fixtures/editor_with_labels.js            |   8 +-
 .../fixtures/editors_with_forms.js            |   5 +-
 .../fixtures/form_associated_false.js         |   1 +
 src/trix/config/editor.js                     |   3 +
 src/trix/config/index.js                      |   1 +
 src/trix/controllers/editor_controller.js     |   2 +-
 src/trix/elements/trix_editor_element.js      | 176 +++++++++++++-----
 11 files changed, 208 insertions(+), 62 deletions(-)
 create mode 100644 src/test/test_helpers/fixtures/form_associated_false.js
 create mode 100644 src/trix/config/editor.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8ab86c134..0bd200767 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,6 +9,11 @@ on:
 jobs:
   build:
     name: Browser tests
+    strategy:
+      matrix:
+        formAssociated: [true, false]
+    env:
+      FORM_ASSOCIATED: "${{ matrix.formAssociated }}"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
diff --git a/README.md b/README.md
index e99bb7418..e6f404922 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ This is the approach that all modern, production ready, WYSIWYG editors now take
 
 <details><summary>Trix supports all evergreen, self-updating desktop and mobile browsers.</summary><img src="https://app.saucelabs.com/browser-matrix/basecamp_trix.svg"></details>
 
-Trix is built with established web standards, notably [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), [Mutation Observer](https://dom.spec.whatwg.org/#mutation-observers), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+Trix is built with established web standards, notably [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements), [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), [Mutation Observer](https://dom.spec.whatwg.org/#mutation-observers), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
 
 # Getting Started
 
@@ -88,6 +88,16 @@ If the attribute is defined in `Trix.config.blockAttributes`, Trix will apply th
 
 Clicking the quote button toggles whether the block should be rendered with `<blockquote>`.
 
+## Integrating with Element Internals
+
+Trix will integrate `<trix-editor>` elements with forms depending on the browser's support for [Element Internals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals). By default, Trix will enable support for `ElementInternals` when the feature is enabled in the browser. If there is a need to disable support for `ElementInternals`, set `Trix.config.editor.formAssociated = false`:
+
+```js
+import Trix from "trix"
+
+Trix.config.editor.formAssociated = false
+```
+
 ## Invoking Internal Trix Actions
 
 Internal actions are defined in `controllers/editor_controller.js` and consist of:
diff --git a/karma.conf.js b/karma.conf.js
index 9fe317624..fc5c6ad82 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -3,7 +3,7 @@ const config = {
   frameworks: [ "qunit" ],
   files: [
     { pattern: "dist/test.js", watched: false },
-    { pattern: "src/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
+    { pattern: "src/test/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
   ],
   proxies: {
     "/test_helpers/fixtures/": "/base/src/test_helpers/fixtures/"
@@ -29,6 +29,14 @@ const config = {
 
 /* eslint camelcase: "off",  */
 
+if (process.env.FORM_ASSOCIATED === "false") {
+  config.files.push({
+    pattern: "src/test/test_helpers/fixtures/form_associated_false.js",
+    watched: false,
+    included: true
+  })
+}
+
 if (process.env.SAUCE_ACCESS_KEY) {
   config.customLaunchers = {
     sl_chrome_latest: {
diff --git a/src/test/system/custom_element_test.js b/src/test/system/custom_element_test.js
index a110aff4a..24764dccf 100644
--- a/src/test/system/custom_element_test.js
+++ b/src/test/system/custom_element_test.js
@@ -1,3 +1,4 @@
+import * as config from "trix/config"
 import { rangesAreEqual } from "trix/core/helpers"
 
 import {
@@ -19,6 +20,14 @@ import {
 } from "test/test_helper"
 import { delay, nextFrame } from "../test_helpers/timing_helpers"
 
+const testIfFormAssociated = (name, callback) => {
+  test(name, async () => {
+    if (config.editor.formAssociated) {
+      await callback()
+    }
+  })
+}
+
 testGroup("Custom element API", { template: "editor_empty" }, () => {
   test("element triggers trix-initialize on first connect", async () => {
     const container = document.getElementById("trix-container")
@@ -500,7 +509,7 @@ 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)
+    assert.deepEqual(Array.from(getEditorElement().labels), labels)
   })
 
   test("focuses when <label> clicked", () => {
@@ -539,6 +548,26 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.form, null)
   })
 
+  test("editor resets to its original value on element reset", async () => {
+    const element = getEditorElement()
+
+    await typeCharacters("hello")
+    element.reset()
+    expectDocument("\n")
+  })
+
+  test("element returns empty string when value is missing", () => {
+    const element = getEditorElement()
+
+    assert.equal(element.value, "")
+  })
+
+  test("editor returns its type", () => {
+    const element = getEditorElement()
+
+    assert.equal("trix-editor", element.type)
+  })
+
   test("adds [disabled] attribute based on .disabled property", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
 
@@ -551,7 +580,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("disabled"), false, "removes [disabled] attribute")
   })
 
-  test("removes [contenteditable] and disables input when editor element has [disabled]", () => {
+  testIfFormAssociated("removes [contenteditable] and disables input when editor element has [disabled]", () => {
     const editor = document.getElementById("editor-with-no-form")
 
     editor.setAttribute("disabled", "")
@@ -569,7 +598,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
   })
 
-  test("removes [contenteditable] and disables input when editor element is :disabled", () => {
+  testIfFormAssociated("removes [contenteditable] and disables input when editor element is :disabled", () => {
     const editor = document.getElementById("editor-within-fieldset")
     const fieldset = document.getElementById("fieldset")
 
@@ -590,7 +619,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
   })
 
-  test("does not receive focus when :disabled", () => {
+  testIfFormAssociated("does not receive focus when :disabled", () => {
     const activeEditor = document.getElementById("editor-with-input-form")
     const editor = document.getElementById("editor-within-fieldset")
 
@@ -601,7 +630,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(activeEditor, document.activeElement, "disabled editor does not receive focus")
   })
 
-  test("disabled editor does not encode its value when the form is submitted", () => {
+  testIfFormAssociated("disabled editor does not encode its value when the form is submitted", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     const form = editor.form
 
@@ -611,7 +640,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.deepEqual({}, Object.fromEntries(new FormData(form).entries()), "does not write to FormData")
   })
 
-  test("validates with [required] attribute as invalid", () => {
+  testIfFormAssociated("validates with [required] attribute as invalid", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     const form = editor.form
     let invalidEvent, submitEvent = null
@@ -630,7 +659,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(submitEvent, null, "does not dispatch a 'submit' event")
   })
 
-  test("does not validate with [disabled] attribute", () => {
+  testIfFormAssociated("does not validate with [disabled] attribute", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     let invalidEvent = null
 
@@ -642,7 +671,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(invalidEvent, null, "does not dispatch an 'invalid' event")
   })
 
-  test("re-validates when the value changes", async () => {
+  testIfFormAssociated("re-validates when the value changes", async () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     editor.required = true
     editor.focus()
@@ -656,7 +685,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.validationMessage, "", "clears the validationMessage")
   })
 
-  test("accepts a customError validation message", () => {
+  testIfFormAssociated("accepts a customError validation message", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
 
     editor.setCustomValidity("A custom validation message")
diff --git a/src/test/test_helpers/fixtures/editor_with_labels.js b/src/test/test_helpers/fixtures/editor_with_labels.js
index e1a1fa0a0..8d174e124 100644
--- a/src/test/test_helpers/fixtures/editor_with_labels.js
+++ b/src/test/test_helpers/fixtures/editor_with_labels.js
@@ -1,7 +1,5 @@
 export default () =>
   `<label id="label-1" for="editor"><span>Label 1</span></label>
-  <label id="label-2">
-    Label 2
-    <trix-editor id="editor"></trix-editor>
-  </label>
-  <label id="label-3" for="editor">Label 3</label>`
+   <label id="label-2">Label 2</label>
+   <trix-editor id="editor"></trix-editor>
+   <label id="label-3" for="editor">Label 3</label>`
diff --git a/src/test/test_helpers/fixtures/editors_with_forms.js b/src/test/test_helpers/fixtures/editors_with_forms.js
index 56ed494ac..292d0e315 100644
--- a/src/test/test_helpers/fixtures/editors_with_forms.js
+++ b/src/test/test_helpers/fixtures/editors_with_forms.js
@@ -1,6 +1,6 @@
 export default () =>
   `<form id="ancestor-form">
-    <trix-editor id="editor-with-ancestor-form"></trix-editor>
+    <trix-editor id="editor-with-ancestor-form" name="editor-with-ancestor-form"></trix-editor>
   </form>
 
   <form id="input-form">
@@ -8,4 +8,5 @@ export default () =>
   </form>
   <trix-editor id="editor-with-input-form" input="hidden-input"></trix-editor>
 
-  <trix-editor id="editor-with-no-form"></trix-editor>`
+  <trix-editor id="editor-with-no-form"></trix-editor>
+  <fieldset id="fieldset"><trix-editor id="editor-within-fieldset"></fieldset>`
diff --git a/src/test/test_helpers/fixtures/form_associated_false.js b/src/test/test_helpers/fixtures/form_associated_false.js
new file mode 100644
index 000000000..2b95f2bc5
--- /dev/null
+++ b/src/test/test_helpers/fixtures/form_associated_false.js
@@ -0,0 +1 @@
+window.Trix.config.editor.formAssociated = false
diff --git a/src/trix/config/editor.js b/src/trix/config/editor.js
new file mode 100644
index 000000000..cc11f166f
--- /dev/null
+++ b/src/trix/config/editor.js
@@ -0,0 +1,3 @@
+export default {
+  formAssociated: "ElementInternals" in window
+}
diff --git a/src/trix/config/index.js b/src/trix/config/index.js
index 27f7abc2f..64684bc1e 100644
--- a/src/trix/config/index.js
+++ b/src/trix/config/index.js
@@ -2,6 +2,7 @@ export { default as attachments } from "./attachments"
 export { default as blockAttributes } from "./block_attributes"
 export { default as browser } from "./browser"
 export { default as css } from "./css"
+export { default as editor } from "./editor"
 export { default as fileSize } from "./file_size_formatting"
 export { default as input } from "./input"
 export { default as keyNames } from "./key_names"
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 6e13eb2eb..e99a898e5 100644
--- a/src/trix/elements/trix_editor_element.js
+++ b/src/trix/elements/trix_editor_element.js
@@ -161,14 +161,18 @@ installDefaultCSSForTagName("trix-editor", `\
 }`)
 
 export default class TrixEditorElement extends HTMLElement {
-  static formAssociated = true
+  static get formAssociated() {
+    return config.editor.formAssociated
+  }
 
   #customValidationMessage
   #internals
 
   constructor() {
     super()
-    this.#internals = this.attachInternals()
+    this.#internals = this.constructor.formAssociated ?
+      this.attachInternals() :
+      null
   }
 
   // Properties
@@ -183,6 +187,8 @@ export default class TrixEditorElement extends HTMLElement {
   }
 
   get labels() {
+    if (this.#internals) return this.#internals.labels
+
     const labels = []
     if (this.id && this.ownerDocument) {
       labels.push(...Array.from(this.ownerDocument.querySelectorAll(`label[for='${this.id}']`) || []))
@@ -247,6 +253,76 @@ export default class TrixEditorElement extends HTMLElement {
     this.editor?.loadHTML(this.defaultValue)
   }
 
+  get type() {
+    return this.localName
+  }
+
+  get disabled() {
+    if (this.#internals) {
+      return this.inputElement.disabled
+    } else {
+      console.warn("Trix is not configured to support the [disabled] attribute. Set Trix.config.editor.formAssociated = true")
+
+      return false
+    }
+  }
+
+  set disabled(value) {
+    if (this.#internals) {
+      this.toggleAttribute("disabled", value)
+    } else {
+      console.warn("Trix is not configured to support the [disabled] attribute. Set Trix.config.editor.formAssociated = true")
+    }
+  }
+
+  get required() {
+    if (this.#internals) {
+      return this.hasAttribute("required")
+    } else {
+      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+
+      return false
+    }
+  }
+
+  set required(value) {
+    if (this.#internals) {
+      this.toggleAttribute("required", value)
+      this.#synchronizeValidation()
+    } else {
+      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+    }
+  }
+
+  get validity() {
+    if (this.#internals) {
+      return this.#internals.validity
+    } else {
+      console.warn("Trix is not configured to support the validity property. Set Trix.config.editor.formAssociated = true")
+      return null
+    }
+  }
+
+  get validationMessage() {
+    if (this.#internals) {
+      return this.#internals.validationMessage
+    } else {
+      console.warn("Trix is not configured to support the validationMessage property. Set Trix.config.editor.formAssociated = true")
+
+      return ""
+    }
+  }
+
+  get willValidate() {
+    if (this.#internals) {
+      return this.#internals.willValidate
+    } else {
+      console.warn("Trix is not configured to support the willValidate property. Set Trix.config.editor.formAssociated = true")
+
+      return false
+    }
+  }
+
   // Controller delegate methods
 
   notify(message, data) {
@@ -255,12 +331,14 @@ export default class TrixEditorElement extends HTMLElement {
     }
   }
 
-  setInputElementValue(value) {
+  setFormValue(value) {
     if (this.inputElement) {
       this.inputElement.value = value
     }
 
-    this.#synchronizeValidation()
+    if (this.#internals) {
+      this.#synchronizeValidation()
+    }
   }
 
   // Element lifecycle
@@ -280,52 +358,25 @@ export default class TrixEditorElement extends HTMLElement {
         requestAnimationFrame(() => triggerEvent("trix-initialize", { onElement: this }))
       }
       this.editorController.registerSelectionManager()
-      this.#synchronizeValidation()
+      if (this.#internals) {
+        this.#synchronizeValidation()
+      } else {
+        this.registerResetListener()
+        this.registerClickListener()
+      }
       autofocus(this)
     }
   }
 
   disconnectedCallback() {
     this.editorController?.unregisterSelectionManager()
-    this.unregisterResetListener()
-    return this.unregisterClickListener()
-  }
-
-  // Constraint validation
-
-  set required(value) {
-    this.toggleAttribute("required", value)
-    this.#synchronizeValidation()
-  }
-
-  get required() {
-    return this.hasAttribute("required")
-  }
-
-  get validity() {
-    return this.#internals.validity
-  }
-
-  get validationMessage() {
-    return this.#internals.validationMessage
-  }
-
-  get willValidate() {
-    return this.#internals.willValidate
-  }
-
-  checkValidity() {
-    return this.#internals.checkValidity()
-  }
-
-  reportValidity() {
-    return this.#internals.reportValidity()
-  }
-
-  setCustomValidity(customValidationMessage) {
-    this.#customValidationMessage = customValidationMessage
+    if (this.#internals) {
+      // no-op
+    } else {
+      this.unregisterResetListener()
+      return this.unregisterClickListener()
+    }
 
-    this.#synchronizeValidation()
   }
 
   // Form support
@@ -370,6 +421,45 @@ export default class TrixEditorElement extends HTMLElement {
     this.value = this.defaultValue
   }
 
+  checkValidity() {
+    if (this.#internals) {
+      return this.#internals.checkValidity()
+    } else {
+      console.warn("Trix is not configured to support checkValidity(). Set Trix.config.editor.formAssociated = true")
+
+      return true
+    }
+  }
+
+  reportValidity() {
+    if (this.#internals) {
+      return this.#internals.reportValidity()
+    } else {
+      console.warn("Trix is not configured to support reportValidity(). Set Trix.config.editor.formAssociated = true")
+
+      return true
+    }
+  }
+
+  setCustomValidity(validationMessage) {
+    if (this.#internals) {
+      this.#customValidationMessage = validationMessage
+
+      this.#synchronizeValidation()
+    } else {
+      console.warn("Trix is not configured to support setCustomValidity(validationMessage). Set Trix.config.editor.formAssociated = true")
+    }
+  }
+
+  formDisabledCallback(disabled) {
+    this.inputElement.disabled = disabled
+    this.toggleAttribute("contenteditable", !disabled)
+  }
+
+  formResetCallback() {
+    this.reset()
+  }
+
   #synchronizeValidation() {
     const { required, value } = this
     const valueMissing = required && !value