Using overtype as a progressive enhancement.

[rouilj]

I am looking at using overtype to enhance an existing textarea in a form. My intended markup would look like (using the web component version):

<form>
[other inputs/checkboxes etc. for the form]

<overtype-editor
  value="# Hello OverType!"
  theme="solar"
  height="300px"
  toolbar>
<textarea name="@note" id="changenote" class="..." wrap="hard" rows="20" cols="80"></textarea>
</overtype-editor>
</form>

where the textarea is in the light dom. If the overtype-editor fails to load or initialize
I get the fallback textarea.

Ideally the web component would inherit the textarea into a (named??) slot and use
it directly. The developer may need to unset/reset any css textarea styles using:

textarea {...}

overtype-editor:defined textarea {
all: initial; /* or maybe revert with optional !important */
}

or guard them using (not sure the syntax is correct):

overtype-editor:not(:defined) textarea.someclass { ...}

This way the overtype editor doesn't need to worry about how the form is
constructed and the textarea just submits like expected.

The only way I can see to actually submit the result of the overtype editor
with a form is to add a change event handler for the web component and
copy the value into a hidden textarea. Alternatively add a blur handler and
copy on blur.

Is this the only way to get the textarea used by overtype to be submitted by
a wrapping form? I don't see a name property supported by the web component
that would be assigned to the textarea. Am I missing some part of the doc that
describes how to incorporate overtype in a form? Having to execute a copy on every
change seems to duplicate the work of overtype needlessly.

Thanks.

-- rouilj