Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract delegate for TrixEditorElement #1132

Closed
wants to merge 1 commit into from

Conversation

seanpdoyle
Copy link
Contributor

@seanpdoyle seanpdoyle commented Feb 7, 2024

Related to #1023

In preparation for #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.

@seanpdoyle seanpdoyle force-pushed the editor-delegate branch 5 times, most recently from 3cacb0b to b86322f Compare February 7, 2024 19:07
@seanpdoyle seanpdoyle marked this pull request as draft February 8, 2024 04:43
@seanpdoyle seanpdoyle force-pushed the editor-delegate branch 2 times, most recently from a845ab3 to bc24ac5 Compare February 9, 2024 04:45
@seanpdoyle seanpdoyle marked this pull request as ready for review February 9, 2024 04:46
@seanpdoyle seanpdoyle mentioned this pull request Oct 3, 2024
3 tasks
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
Copy link
Contributor Author

Closing in favor of exploring a unified, single commit solution that is backwards compatible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant