mirror of
https://github.com/basecamp/trix.git
synced 2026-05-17 12:00:38 +00:00
Sean Doyle
86390c3e3b
The problem:
---
Consider the following HTML:
```html
<form action="/articles" method="post">
<textarea name="content"></textarea>
<button type="submit">Save</button>
</form>
```
Then, consider a theoretical event listener:
```js
addEventListener("keydown", ({ key, metaKey, target }) => {
if (target.form && key == "Enter" && (metaKey || ctrlKey)) {
form.requestSubmit()
}
})
```
This relies on [HTMLTextAreaElement.form][] finding its related `<form>`
element. Given the way the `[form]` attribute can reference a `<form>`
element that is _not an ancestor_, that same event listener would
continue to work with this HTML:
```html
<textarea name="content" form="new_article"></textarea>
<!-- elsewhere -->
<form id="new_article" action="/articles" method="post">
<button type="submit">Save</button>
</form>
```
Unfortunately, if the `<textarea>` element were replaced with a
`<trix-editor>`, the event listener's reliance on accessing the `form`
as a property would break, since the `<trix-editor>` custom element
doesn't declare that property.
[HTMLTextAreaElement.form]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement#properties
The proposed changes:
---
Provide property access for `<trix-editor>` elements, similar to how an
`<input>` or `<textarea>` element can access a form outside of its
direct tree of ancestors via the [form="..."][] attribute and the
corresponding `.form` property.
Related testing changes
---
All other system tests in the suite are rendered into a `<form
id="trix-container">` element on the page. In order to test this new
behavior, the fixture HTML declare several new `<form>` elements.
These are incompatible with an ancestor `<form>`, since HTML forbids
nesting `<form>` elements.
To address that, this commit changes the implementation of how its Test
Helpers create elements from the fixture HTML files.
[form="..."]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-form