Replace hidden <input> with ElementInternals integration
#1128
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Open
seanpdoyle
force-pushed
the
element-internals
branch
from
8d92336
to
45f3506
Compare
seanpdoyle
force-pushed
the
element-internals
branch
from
45f3506
to
90d0f73
Compare
|
@afcapel do you have any thoughts or ideas about the |
seanpdoyle
force-pushed
the
element-internals
branch
from
90d0f73
to
f1bdb3a
Compare
|
@seanpdoyle thanks for kicking this off. A couple of things to consider:
Given that, do you think it's possible for the two systems ( |
I do. I'd created this item in the PR description to vaguely capture that:
I'd originally explored this work by introducing two delegate classes (something like ( On the JS-only side, a On the Action Text side, I'm unsure about how to best forward that server-side decision along. A Like you mentioned, there are Form Builder implications to that setting, since using the newer machinery would mean that the Do you have any thoughts on what that configuration might entail? |
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 7, 2024
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
seanpdoyle
force-pushed
the
element-internals
branch
6 times, most recently
from
3e68af9
to
92dd79e
Compare
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Feb 9, 2024
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
force-pushed
the
element-internals
branch
from
92dd79e
to
0088e6c
Compare
|
@afcapel I've explored a 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 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. |
seanpdoyle
force-pushed
the
element-internals
branch
from
0088e6c
to
e4b064d
Compare
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
force-pushed
the
element-internals
branch
from
e4b064d
to
d6aefb9
Compare
|
@afcapel, any chance this can be re-evaluated? It is a common pain when working with Trix. Is there anything we can do to move this forward somehow? |
seanpdoyle
changed the title
ElementInternals<input> with ElementInternals integration
|
The changes proposed by this PR (in their current form), are rather ambitious, and involve changing the structure of the element. They also require coordination with I've opened #1188 as a supplementary, less ambitious proposal that doesn't require much change to the package internals, and does not require coordination with |
3 tasks
seanpdoyle
added a commit
to seanpdoyle/trix
that referenced
this pull request
Oct 3, 2024
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #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 throughElementInternals.labels.
TODO before merging:
Trix.config.editorobjectTODO after merging:
rails/railsto make Action Text integrate with configuration in a backwards-compatible way (excluding<input type="hidden">, rendering content into<trix-editor>inner HTML, etc)void formDisabledCallback(disabled)to support[disabled]