diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7dd3d3971..8ab86c134 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/README.md b/README.md index e6f404922..c4008b844 100644 --- a/README.md +++ b/README.md @@ -90,12 +90,12 @@ Clicking the quote button toggles whether the block should be rendered with `` 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 `` 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 diff --git a/karma.conf.js b/karma.conf.js index fc5c6ad82..9fe317624 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/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: { diff --git a/src/test/system/custom_element_test.js b/src/test/system/custom_element_test.js index 5af7d6043..3a14bb90e 100644 --- a/src/test/system/custom_element_test.js +++ b/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
", { 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 ", { 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 ", { 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 ", { 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 ", { 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 ", { 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 ", { 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 ", { 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 ", { 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 ", { 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") - } - }) -} diff --git a/src/test/test_helpers/fixtures/form_associated_false.js b/src/test/test_helpers/fixtures/form_associated_false.js deleted file mode 100644 index 2b95f2bc5..000000000 --- a/src/test/test_helpers/fixtures/form_associated_false.js +++ /dev/null @@ -1 +0,0 @@ -window.Trix.config.editor.formAssociated = false diff --git a/src/trix/config/editor.js b/src/trix/config/editor.js deleted file mode 100644 index cc11f166f..000000000 --- a/src/trix/config/editor.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - formAssociated: "ElementInternals" in window -} diff --git a/src/trix/config/index.js b/src/trix/config/index.js index 64684bc1e..27f7abc2f 100644 --- a/src/trix/config/index.js +++ b/src/trix/config/index.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" diff --git a/src/trix/elements/trix_editor_element.js b/src/trix/elements/trix_editor_element.js index e99a898e5..cb96822e1 100644 --- a/src/trix/elements/trix_editor_element.js +++ b/src/trix/elements/trix_editor_element.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,7 +269,7 @@ 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.") } } @@ -279,7 +277,7 @@ export default class TrixEditorElement extends HTMLElement { 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,7 +288,7 @@ 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.") } } @@ -298,7 +296,7 @@ export default class TrixEditorElement extends HTMLElement { 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.") } }