✨ Autocomplete angle bracketed components the same way braces are autocompleted

[knotbin]

Description

When a user uses angle brackets with a component, for instance typing <div>, and then presses enter, the system autocompletes that component, adding </div> on the line below the new current line and indents the new current line.

Alternatives Considered

No response

Additional Context

No response

Screenshots

[austincondiff]

This should probably only apply to html, xml, and jsx. It should work like this…

1. User types < - no autocomplete occurs
2. User types tag name, <div - no autocomplete occurs
3. User types >, <div> - closing tag is autocomplete and is inserted directly after the opening tag. Cursor is placed in between tags. Eg. <div>|</div>
4. If user presses return, closing tag is moved to a new line, then cursor is placed on a new empty line and indented in between the other two lines. Eg…

<div>
    |
</div>

[!NOTE] Tag attributes should be ignored and not put in the closing tag. Eg. <div class="panel"></div>

[knotbin]

In addition to JSX and TSX, it should also apply to regular JS and TS files as JSX and TSX can be written inside regular JS and TS files.