Integrate with `ElementInternals` #1128

seanpdoyle · 2024-01-30T03:22:52Z

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.

TODO before merging:

Control through browser feature-detection and a Trix.config.editor object

TODO after merging:

Open a PR against rails/rails to make Action Text integrate with configuration in a backwards-compatible way (excluding <input type="hidden">, rendering content into <trix-editor> inner HTML, etc)
Integrate with ElementInternals.willValidate, ElementInternals.validity, ElementInternals.validationMessage
Form callbacks like void formDisabledCallback(disabled) to support [disabled]
Instance properties included from ARIA

seanpdoyle · 2024-02-02T16:03:55Z

@afcapel do you have any thoughts or ideas about the TODO before merging list in the PR description?

afcapel · 2024-02-06T14:32:04Z

@seanpdoyle thanks for kicking this off. ElementInternals is certainly the way of the future and it makes the whole setup look much simpler. It's also exciting that we will be able to add attributes such as required to the <trix-editor> without needing any extra JS.

A couple of things to consider:

ElementInternals is only available since Safari 16.4 (released 2023-03-27)
We should also look for the migration path for existing projects. We probably can update the markup in actiontext to discard the hidden input and start using the <trix-editor> element itself. But what's the story for projects that integrated Trix without actiontext?

Given that, do you think it's possible for the two systems (ElementInternals and hidden input) to coexist for a while to ease the migration?

seanpdoyle · 2024-02-06T14:41:56Z

Given that, do you think it's possible for the two systems to coexist for a while to ease the migration?

I do. I'd created this item in the PR description to vaguely capture that:

Control through browser feature-detection and a Trix.config.editor object

I'd originally explored this work by introducing two delegate classes (something like (ElementInternalsDelegate and LegacyDelegate). I abandoned that in favor of demonstrating the possibilities in a straightforward way. Now that the approach is proven, I'm curious of what kind of configuration options are available.

On the JS-only side, a Trix.config value is straightforward. I'm not sure what to name it, but it could be as simple as a Trix.config.legacy = false boolean to use the new stuff.

On the Action Text side, I'm unsure about how to best forward that server-side decision along. A <meta> tag? Guidance to set a global window.Trix.config value? A Rails helper method to do the behind the scenes work for you?

Like you mentioned, there are Form Builder implications to that setting, since using the newer machinery would mean that the <input type="hidden"> is no longer necessary. It'd be crucial to ensure that the setting is respected all the way through from an application's config/ file to its server-generated HTML to its client-side Trix instance.

Do you have any thoughts on what that configuration might entail?

In preparation for [basecamp#1128][], this commit introduces a module-private `Delegate` class to serve as a representation of what form integration requires for the `<trix-editor>` custom element. The structure of the `Delegate` class mirrors that of the `TrixEditorElement` from which its contents are extracted. First, there are the properties that mimic those of most form controls, including: * `labels` * `form` * `name` * `value` * `defaultValue` With the exception of `labels`, property access is mostly proxied through the associated `<input type="hidden">` element (accessed through its own `inputElement` property). Next, the `Delegate` defines methods that correspond to the Custom Element lifecycle events, including: * `connectedCallback` * `disconnectedCallback` * `setFormValue` The connected and disconnected callbacks mirror that of the `TrixEditorElement` itself. These callbacks attach and remove event listeners for `click` and `reset` events. The `setFormValue` is named to correspond with [ElementInternals.setFormValue][]. Along with introducing this callback method, this commit renames the `TrixEditorElement.setInputElementValue` method to `TrixEditorElement.setFormValue`. In addition to renaming `setInputElementValue`, this commit also defines `TrixEditorElement.formResetCallback`, then implements `TrixEditorElement.reset` as an alias. The name mirrors the [ElementInternals.formResetCallback][]. [basecamp#1128]: basecamp#1128 [ElementInternals.setFormValue]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue [ElementInternals.formResetCallback]: https://web.dev/articles/more-capable-form-controls#void_formresetcallback

In preparation for [basecamp#1128][], this commit introduces a module-private `Delegate` class to serve as a representation of what form integration requires for the `<trix-editor>` custom element. The structure of the `Delegate` class mirrors that of the `TrixEditorElement` from which its contents are extracted. First, there are the properties that mimic those of most form controls, including: * `labels` * `form` * `name` * `value` * `defaultValue` * `type` With the exception of `labels`, property access is mostly proxied through the associated `<input type="hidden">` element (accessed through its own `inputElement` property). Next, the `Delegate` defines methods that correspond to the Custom Element lifecycle events, including: * `connectedCallback` * `disconnectedCallback` * `setFormValue` The connected and disconnected callbacks mirror that of the `TrixEditorElement` itself. These callbacks attach and remove event listeners for `click` and `reset` events. The `setFormValue` is named to correspond with [ElementInternals.setFormValue][]. Along with introducing this callback method, this commit renames the `TrixEditorElement.setInputElementValue` method to `TrixEditorElement.setFormValue`. In addition to renaming `setInputElementValue`, this commit also defines `TrixEditorElement.formResetCallback`, then implements `TrixEditorElement.reset` as an alias. The name mirrors the [ElementInternals.formResetCallback][]. [basecamp#1128]: basecamp#1128 [ElementInternals.setFormValue]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue [ElementInternals.formResetCallback]: https://web.dev/articles/more-capable-form-controls#void_formresetcallback

In preparation for [basecamp#1128][], this commit introduces a module-private `Delegate` class to serve as a representation of what form integration requires for the `<trix-editor>` custom element. The structure of the `Delegate` class mirrors that of the `TrixEditorElement` from which its contents are extracted. First, there are the properties that mimic those of most form controls, including: * `labels` * `form` * `name` * `value` * `defaultValue` * `type` With the exception of `labels`, property access is mostly proxied through the associated `<input type="hidden">` element (accessed through its own `inputElement` property). Next, the `Delegate` defines methods that correspond to the Custom Element lifecycle events, including: * `connectedCallback` * `disconnectedCallback` * `setFormValue` The connected and disconnected callbacks mirror that of the `TrixEditorElement` itself. These callbacks attach and remove event listeners for `click` and `reset` events. The `setFormValue` is named to correspond with [ElementInternals.setFormValue][]. Along with introducing this callback method, this commit renames the `TrixEditorElement.setInputElementValue` method to `TrixEditorElement.setFormValue`. In addition to renaming `setInputElementValue`, this commit also defines `TrixEditorElement.formResetCallback` (along with other empty callbacks), then implements `TrixEditorElement.reset` as an alias. The name mirrors the [ElementInternals.formResetCallback][]. [basecamp#1128]: basecamp#1128 [ElementInternals.setFormValue]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue [ElementInternals.formResetCallback]: https://web.dev/articles/more-capable-form-controls#void_formresetcallback

In preparation for [basecamp#1128][], this commit introduces a module-private `Delegate` class to serve as a representation of what form integration requires for the `<trix-editor>` custom element. The structure of the `Delegate` class mirrors that of the `TrixEditorElement` from which its contents are extracted. First, there are the properties that mimic those of most form controls, including: * `labels` * `form` * `name` * `value` * `defaultValue` * `type` With the exception of `labels`, property access is mostly proxied through the associated `<input type="hidden">` element (accessed through its own `inputElement` property). Next, the `Delegate` defines methods that correspond to the Custom Element lifecycle events, including: * `connectedCallback` * `disconnectedCallback` * `setFormValue` The connected and disconnected callbacks mirror that of the `TrixEditorElement` itself. These callbacks attach and remove event listeners for `click` and `reset` events. The `setFormValue` is named to correspond with [ElementInternals.setFormValue][]. Along with introducing this callback method, this commit renames the `TrixEditorElement.setInputElementValue` method to `TrixEditorElement.setFormValue`. In addition to renaming `setInputElementValue`, this commit also defines `TrixEditorElement.formResetCallback` (along with other [empty form callbacks][]), then implements `TrixEditorElement.reset` as an alias. The name mirrors the [ElementInternals.formResetCallback][]. [basecamp#1128]: basecamp#1128 [ElementInternals.setFormValue]: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue [empty form callbacks]: https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/ [ElementInternals.formResetCallback]: https://web.dev/articles/more-capable-form-controls#void_formresetcallback

seanpdoyle · 2024-02-09T04:48:45Z

@afcapel I've explored a Trix.config.editor.formAssociated JavaScript configuration that's pre-populated by the presence of a <meta name="trix-editor-formAssociated" content="true"> element in the <head>.

The configuration key is provisional open to renaming. The idea is that Action Text could provide a configuration key that would then utilize the new yield :head standard in the layout to push that node when Element Internals is enabled.

To set the stage for these changes and to ease the particulars of the Element Internals code review, I've opened #1132 to introduce the idea of a delegate and to make some of the less controversial changes ahead of these.

Both #1132 and #1128 are ready for review.

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

seanpdoyle mentioned this pull request Jan 30, 2024

Fix CI #1072

Open

seanpdoyle force-pushed the element-internals branch from 8d92336 to 45f3506 Compare January 30, 2024 16:32

KonnorRogers mentioned this pull request Jan 31, 2024

Convert to ElementInternals. KonnorRogers/rhino-editor#153

Open

seanpdoyle force-pushed the element-internals branch from 45f3506 to 90d0f73 Compare February 2, 2024 14:43

seanpdoyle marked this pull request as draft February 2, 2024 16:02

seanpdoyle force-pushed the element-internals branch from 90d0f73 to f1bdb3a Compare February 2, 2024 17:15

seanpdoyle mentioned this pull request Feb 7, 2024

Extract delegate for TrixEditorElement #1132

Open

seanpdoyle force-pushed the element-internals branch 6 times, most recently from 3e68af9 to 92dd79e Compare February 9, 2024 04:29

seanpdoyle force-pushed the element-internals branch from 92dd79e to 0088e6c Compare February 9, 2024 04:45

seanpdoyle marked this pull request as ready for review February 9, 2024 04:45

seanpdoyle force-pushed the element-internals branch from 0088e6c to e4b064d Compare February 9, 2024 14:36

seanpdoyle force-pushed the element-internals branch from e4b064d to d6aefb9 Compare February 9, 2024 14:38

seanpdoyle mentioned this pull request Mar 25, 2024

Add the option to make the textarea required #1143

Closed

KonnorRogers mentioned this pull request Mar 25, 2024

[WIP] add required attribute to trix-editor #1144

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate with `ElementInternals` #1128

Integrate with `ElementInternals` #1128

seanpdoyle commented Jan 30, 2024 •

edited

seanpdoyle commented Feb 2, 2024

afcapel commented Feb 6, 2024

seanpdoyle commented Feb 6, 2024

seanpdoyle commented Feb 9, 2024 •

edited

Integrate with ElementInternals #1128

Are you sure you want to change the base?

Integrate with ElementInternals #1128

Conversation

seanpdoyle commented Jan 30, 2024 • edited

TODO before merging:

TODO after merging:

seanpdoyle commented Feb 2, 2024

afcapel commented Feb 6, 2024

seanpdoyle commented Feb 6, 2024

seanpdoyle commented Feb 9, 2024 • edited

Integrate with `ElementInternals` #1128

Integrate with `ElementInternals` #1128

seanpdoyle commented Jan 30, 2024 •

edited

seanpdoyle commented Feb 9, 2024 •

edited