Revert Trix.config.editor changes

Author: seanpdoyle

.github/workflows/ci.yml

@@ -8,12 +8,7 @@ on:
 
 jobs:
   build:
-    name: "Browser tests (Trix.config.editor.formAssociated = ${{ matrix.formAssociated }})"
-    strategy:
-      matrix:
-        formAssociated: [true, false]
-    env:
-      FORM_ASSOCIATED: "${{ matrix.formAssociated }}"
+    name: Browser tests
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3

README.md

@@ -90,12 +90,12 @@ Clicking the quote button toggles whether the block should be rendered with `<bl
 
 ## 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`:
+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). If there is a need to disable support for `ElementInternals`, set `Trix.elements.TrixEditorElement.formAssociated = false`:
 
 ```js
 import Trix from "trix"
 
-Trix.config.editor.formAssociated = false
+Trix.elements.TrixEditorElement.formAssociated = false
 ```
 
 ## Invoking Internal Trix Actions

karma.conf.js

@@ -3,7 +3,7 @@ const config = {
   frameworks: [ "qunit" ],
   files: [
     { pattern: "dist/test.js", watched: false },
-    { pattern: "src/test/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
+    { pattern: "src/test_helpers/fixtures/*.png", watched: false, included: false, served: true }
   ],
   proxies: {
     "/test_helpers/fixtures/": "/base/src/test_helpers/fixtures/"
@@ -29,14 +29,6 @@ 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: {

src/test/system/custom_element_test.js

@@ -1,5 +1,5 @@
-import * as config from "trix/config"
 import { rangesAreEqual } from "trix/core/helpers"
+import TrixEditorElement from "trix/elements/trix_editor_element"
 
 import {
   TEST_IMAGE_URL,
@@ -560,7 +560,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal("trix-editor", element.type)
   })
 
-  testIfFormAssociated("adds [disabled] attribute based on .disabled property", () => {
+  testIf(TrixEditorElement.formAssociated, "adds [disabled] attribute based on .disabled property", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
 
     editor.disabled = true
@@ -572,7 +572,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("disabled"), false, "removes [disabled] attribute")
   })
 
-  testIfFormAssociated("removes [contenteditable] and disables input when editor element has [disabled]", () => {
+  testIf(TrixEditorElement.formAssociated, "removes [contenteditable] and disables input when editor element has [disabled]", () => {
     const editor = document.getElementById("editor-with-no-form")
 
     editor.setAttribute("disabled", "")
@@ -590,7 +590,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
   })
 
-  testIfFormAssociated("removes [contenteditable] and disables input when editor element is :disabled", () => {
+  testIf(TrixEditorElement.formAssociated, "removes [contenteditable] and disables input when editor element is :disabled", () => {
     const editor = document.getElementById("editor-within-fieldset")
     const fieldset = document.getElementById("fieldset")
 
@@ -611,7 +611,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.hasAttribute("contenteditable"), true, "adds [contenteditable] attribute")
   })
 
-  testIfFormAssociated("does not receive focus when :disabled", () => {
+  testIf(TrixEditorElement.formAssociated, "does not receive focus when :disabled", () => {
     const activeEditor = document.getElementById("editor-with-input-form")
     const editor = document.getElementById("editor-within-fieldset")
 
@@ -622,7 +622,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(activeEditor, document.activeElement, "disabled editor does not receive focus")
   })
 
-  testIfFormAssociated("disabled editor does not encode its value when the form is submitted", () => {
+  testIf(TrixEditorElement.formAssociated, "disabled editor does not encode its value when the form is submitted", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     const form = editor.form
 
@@ -632,7 +632,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.deepEqual({}, Object.fromEntries(new FormData(form).entries()), "does not write to FormData")
   })
 
-  testIfFormAssociated("validates with [required] attribute as invalid", () => {
+  testIf(TrixEditorElement.formAssociated, "validates with [required] attribute as invalid", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     const form = editor.form
     let invalidEvent, submitEvent = null
@@ -651,7 +651,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(submitEvent, null, "does not dispatch a 'submit' event")
   })
 
-  testIfFormAssociated("does not validate with [disabled] attribute", () => {
+  testIf(TrixEditorElement.formAssociated, "does not validate with [disabled] attribute", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     let invalidEvent = null
 
@@ -663,7 +663,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(invalidEvent, null, "does not dispatch an 'invalid' event")
   })
 
-  testIfFormAssociated("re-validates when the value changes", async () => {
+  testIf(TrixEditorElement.formAssociated, "re-validates when the value changes", async () => {
     const editor = document.getElementById("editor-with-ancestor-form")
     editor.required = true
     editor.focus()
@@ -677,7 +677,7 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.validationMessage, "", "clears the validationMessage")
   })
 
-  testIfFormAssociated("accepts a customError validation message", () => {
+  testIf(TrixEditorElement.formAssociated, "accepts a customError validation message", () => {
     const editor = document.getElementById("editor-with-ancestor-form")
 
     editor.setCustomValidity("A custom validation message")
@@ -687,13 +687,3 @@ testGroup("form property references its <form>", { template: "editors_with_forms
     assert.equal(editor.validationMessage, "A custom validation message")
   })
 })
-
-function testIfFormAssociated(name, callback) {
-  test(name, async () => {
-    if (config.editor.formAssociated) {
-      await callback()
-    } else {
-      assert.equal(config.editor.formAssociated, false, "skipping test that requires ElementInternals")
-    }
-  })
-}

src/test/test_helpers/fixtures/form_associated_false.js

@@ -2,7 +2,6 @@ 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"

src/trix/config/editor.js

@@ -161,9 +161,7 @@ installDefaultCSSForTagName("trix-editor", `\
 }`)
 
 export default class TrixEditorElement extends HTMLElement {
-  static get formAssociated() {
-    return config.editor.formAssociated
-  }
+  static formAssociated = "ElementInternals" in window
 
   #customValidationMessage
   #internals
@@ -261,7 +259,7 @@ export default class TrixEditorElement extends HTMLElement {
     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")
+      console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
 
       return false
     }
@@ -271,15 +269,15 @@ export default class TrixEditorElement extends HTMLElement {
     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")
+      console.warn("This browser does not support the [disabled] attribute for trix-editor elements.")
     }
   }
 
   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")
+      console.warn("This browser does not support the [required] attribute for trix-editor elements.")
 
       return false
     }
@@ -290,15 +288,15 @@ export default class TrixEditorElement extends HTMLElement {
       this.toggleAttribute("required", value)
       this.#synchronizeValidation()
     } else {
-      console.warn("Trix is not configured to support the [required] attribute. Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support the [required] attribute for trix-editor elements.")
     }
   }
 
   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")
+      console.warn("This browser does not support the validity property for trix-editor elements.")
       return null
     }
   }
@@ -307,7 +305,7 @@ export default class TrixEditorElement extends HTMLElement {
     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")
+      console.warn("This browser does not support the validationMessage property for trix-editor elements.")
 
       return ""
     }
@@ -317,7 +315,7 @@ export default class TrixEditorElement extends HTMLElement {
     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")
+      console.warn("This browser does not support the willValidate property for trix-editor elements.")
 
       return false
     }
@@ -425,7 +423,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.checkValidity()
     } else {
-      console.warn("Trix is not configured to support checkValidity(). Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support checkValidity() for trix-editor elements.")
 
       return true
     }
@@ -435,7 +433,7 @@ export default class TrixEditorElement extends HTMLElement {
     if (this.#internals) {
       return this.#internals.reportValidity()
     } else {
-      console.warn("Trix is not configured to support reportValidity(). Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support reportValidity() for trix-editor elements.")
 
       return true
     }
@@ -447,7 +445,7 @@ export default class TrixEditorElement extends HTMLElement {
 
       this.#synchronizeValidation()
     } else {
-      console.warn("Trix is not configured to support setCustomValidity(validationMessage). Set Trix.config.editor.formAssociated = true")
+      console.warn("This browser does not support setCustomValidity(validationMessage) for trix-editor elements.")
     }
   }