Does Trix plan to support `HTMLElement.attachInternals`? #1023

seanpdoyle · 2022-12-01T14:52:19Z

Integrating with HTMLElement.attachInternals could enable <trix-editor> elements to write their contents directly to <form> and FormData instances, without the need to write to a related <input type="hidden"> element.

Furthermore, they could set their validity state with attribute validations like [required], add support for CSS pseudo-classes like :invalid and :disabled, access their assigned <form> element from callbacks.

There are fairly straightforward paths toward changing the Trix codebase to rely on mechanisms built-into ElementInternals, and some clear wins to be had.

Unfortunately (!), there isn't global support just yet, with Safari as the main hold-out. According to the WebKit Bug Tracker, there have been recent changes aimed at implementing ElementInternals.

Has there been any discussion about migrating toward using these tools? Would it be possible to start a migration with feature detection checks for partial support, or would it be best to wait until all browser support has landed before getting started?

The text was updated successfully, but these errors were encountered:

afcapel · 2022-12-02T11:47:05Z

@seanpdoyle AFAIK there's no WIP to implement attachInternals, but I think it's a brilliant idea and would happily accept a patch for it.

Even if the feature is not fully supported in Safari yet it shouldn't change any existing behaviour unless you opt-in to use it. Furthermore, a PR to implement ElementInternals in WebKit was recently merged, so I think it's reasonable to expect support in the not distant future.

seanpdoyle · 2024-01-16T00:32:30Z

I've opened #1121 to explore this. @afcapel @jorgemanrubia there are some configuration ergonomics to think through, as well as integration points for third parties like Action Text.

Closes [basecamp#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][]. [basecamp#1023]: basecamp#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

Closes [basecamp#1023][] Integrate with `<form>` elements directly 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 `<label>` element support can be achieved through [ElementInternals.labels][]. Similarly, a `formResetCallback()` will fire whenever the associated `<form>` element resets. For now, keep the changes minimal. Future changes will handle integrating with more parts of `ElementInternals`. TODO after merging: --- - [ ] Integrate with [ElementInternals.willValidate](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate), [ElementInternals.validity](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validity), [ElementInternals.validationMessage](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage) - [ ] [Form callbacks](https://web.dev/articles/more-capable-form-controls#lifecycle_callbacks) like `void formDisabledCallback(disabled)` to support `[disabled]` - [ ] [Instance properties included from ARIA](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals#instance_properties_included_from_aria) [basecamp#1023]: basecamp#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

Integrate with `<form>` elements directly through built-in support for [ElementInternals][]. This is achieved with graceful degradation in two ways: * automatically check for browser support * support globally disabling through `Trix.config.editor.formAssociated = false` 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 `<label>` element support can be achieved through [ElementInternals.labels][]. Similarly, a `formResetCallback()` will fire whenever the associated `<form>` element resets. Add support for integrating with [Constraint validation][] through the support for the `[required]` attribute and the `setCustomValidity(message)` method. [Constraint validation]: https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation [basecamp#1023]: basecamp#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

seanpdoyle mentioned this issue Jan 15, 2024

Integrate with ElementInternals #1121

Closed

5 tasks

seanpdoyle mentioned this issue Jan 30, 2024

Replace hidden <input> with ElementInternals integration #1128

Draft

5 tasks

seanpdoyle mentioned this issue Feb 7, 2024

Extract delegate for TrixEditorElement #1132

Closed

seanpdoyle mentioned this issue Mar 25, 2024

Add the option to make the textarea required #1143

Closed

seanpdoyle mentioned this issue Sep 28, 2024

Integrate with ElementInternals #1188

Merged

3 tasks

jorgemanrubia closed this as completed in #1188 Oct 1, 2024

seanpdoyle mentioned this issue Oct 4, 2024

Support for ElementInternals and Constraint Validations #1190

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does Trix plan to support `HTMLElement.attachInternals`? #1023

Does Trix plan to support `HTMLElement.attachInternals`? #1023

seanpdoyle commented Dec 1, 2022 •

edited

Loading

afcapel commented Dec 2, 2022 •

edited

Loading

seanpdoyle commented Jan 16, 2024 •

edited

Loading

Does Trix plan to support HTMLElement.attachInternals? #1023

Does Trix plan to support HTMLElement.attachInternals? #1023

Comments

seanpdoyle commented Dec 1, 2022 • edited Loading

afcapel commented Dec 2, 2022 • edited Loading

seanpdoyle commented Jan 16, 2024 • edited Loading

Does Trix plan to support `HTMLElement.attachInternals`? #1023

Does Trix plan to support `HTMLElement.attachInternals`? #1023

seanpdoyle commented Dec 1, 2022 •

edited

Loading

afcapel commented Dec 2, 2022 •

edited

Loading

seanpdoyle commented Jan 16, 2024 •

edited

Loading