search

FIameCaster / prism-code-editor

Lightweight, extensible code editor component for the web using Prism
https://prism-code-editor.netlify.app
MIT License
43 stars 6 forks source link

Make web components form-friendly #20

Closed wyrmisis closed 3 months ago

wyrmisis commented 3 months ago

Intent

This changeset turns the editor web components into form-associated custom elements, allowing them to work as native form inputs would.

FIameCaster commented 3 months ago

I added a formResetCallback too.

The only thing missing now is validation. I tried calling ElementInternals.setValidity(), passing the textarea's validity and message. This works, but I also had to make the web component focusable with a tab-index. Since the web component itself isn't interactive, making it focusable makes little sense.

Either way, textarea elements will always validate unless you add attributes like minlength, maxlength, or required or set a custom validation message, so I think it's fine if the web component has no validation.

If you don't use any of the web components or setups, and use createEditor() instead, you can just use the textarea as the form element directly.

FIameCaster commented 3 months ago

This seems good enough for now.

Thank you for contributing!