Enable type "tag" to include class/id/props

[JonatasAmaral]

Contributing guidelines

• [X] I have read CONTRIBUTING.md
• [X] I have read CODE_OF_CONDUCT.md

Module(s)

mini.surround

Description

With surround when adding a type "tag", it open a dialog to type in the tag name. It would be really nice if in there we could set tag's class, id (and maybe other props) using CSS selector syntax, somewhat like emmet does.

Ex:

input	result
p.my-class	<p class="my-class">...</p>
nav#main-menu	<nav id="main-menu">...</nav>
dialog[open]	<dialog open>...</dialog>
a[href="/page"]	<a href="/page">...</a>
div#a.b	<div id="a" class="b">...</div>
div.x.y.z	<div class="x y z">...</div>

I feel generic props seems not really practical for usage, but for classes and IDs, that is really common to do, i think it is a good shorthand.

Those could be gradually or partially included, according to what makes sense to the community.

Caveats

I don't know how it would work on some file type specifics, for example, as JSX use className instead of class, and if handling those even worth the hassle.

Emmet has this thing where it implicitly set the tag as div on omitting it (.card -> <div class="card"), but here i suppose it make sense the tag name to be required, then the input must start with a wordchar (aka: validate /\w.*/), potentially making attr parsing easier.

Maybe props ordering make sense too, so you get a stricter input format, say /<tag>(#<id>)?(.<class>)*/

---

I know i can use ? to type fully populated tag on left, and the equivalent closing tag on right, or even better, as i recently discovered, add space on input (div something) , so anything after that is inserted on the opening tag only (which seems not documented?) But honestly, at that point, it's generally better add a simple tag and type props manually (having LSP and so on).

[echasnovski]

Thank you for the detailed issue!

I don't introducing any sort of domain specific language for tags is a good fir for a (quite general) 'mini.surround' defaults. At this point and at this target complexity, creating custom surrounding and overriding built-in t seems like the best approach.

... or even better, as i recently discovered, add space on input (div something) , so anything after that is inserted on the opening tag only (which seems not documented?)

Yes, this was the result of #84 and is mostly meant as a solution to the problem at hand. And yes, it should be documented in some way. I'll take a look.

[echasnovski]

The ability to put not only tag name but its attributes is now documented. I think this is as best as built-in surrounding might be.