Auto-wrap selected code with a chosen tag.

[brazenCoding]

So I don't see how auto-closing of tags is a useful feature and maybe that can be explained here, but I was thinking it would be neat if I can highlight code, hit a hotkey that opens an in-line modal, type the tag I want wrapped around the selected code, hit enter to close the modal, apply the tag around the selected code, and finally it focuses the cursor after the text of the open tag if I want to add attributes, classes or styles to the tag.
Actually it'd be even cooler if the modal understood those attributes too and the entire opening tag can be written in the modal if I wanted (but still focuses at the end of the open tag if there's anything else I think of after hitting enter)
A lot of the time, I am thinking about the content of a section before I properly wrap it in appropriate tags, so it would save me a lot of effort with the current way where I'm writing my open tag and then cutting and pasting the closing tag at the end of the content.

[devvaannsh]

@brazenCoding, that's a really cool idea. We will definitely look into it, and see which UX might be the best and most intuitive. BTW, are there any existing editors that does this, so that we can get a better idea?

[brazenCoding]

I'd say that's a quicker solution than the current way that it works, although I still think an "inline" dialog would be pretty sweet, maybe it's activated by "Alt + ," since that doesn't do anything atm in the app.
I've included an image that showcases what I was thinking

The dropdown could have some preset options:

• a recently used div and class structure eg. div class="container flex justify-content-center",
• automatic "comment" wrapping like !-- --, or something like that.

[abose]

Thanks for the inputs. The above UI looks pretty, will need to think of the best UX though considering the use case and constrains.

We have had shortcut based features in the past(Eg. Ctrl-B for beautify) and had fewer than 100 people use that feature as it was under a shortcut though we had over 100K+ users using the app at the time. We had to do a lot of work to educate users about that flow to get it on track. After that, we stopped doing shortcut based features. If its a natural part of the workflow, that's the best UX we can have.

[abose]

Adding it under < should be a simpler thing to roll out though as it doesn't have any new UI elements to review, and sounds pretty straight forward to implement for the use case(i don't see any scary bugs in that code path). @devvaannsh what do you think. it may still have the discovery issue though, we can address it later wehn we have selection hover tools later like above for bold/hyperlink etc...

[brazenCoding]

Any new feature needs an onboarding callout. It's not that the UX of a shortcut is bad, the discovery needs to be implemented in a way that seamlessly educates the user.

The UX of beautify fits in way better with another existing habit of coders: saving. And you've already implemented a "beautify when saving" feature.

There is a layer of knowledge that needs to be shared even with your suggested, and easier to implement, solution. Users need to be educated on the ability to highlight code and then hit <.

The default understanding of highlighting code and then typing ANYTHING is that the highlighted code will be REPLACED by what you start typing, and that in itself is a UX barrier to discovery without first an onboarding callout.

(I work in UX so I'm very familiar with the various ways of thinking about this)

[abose]

Yeah, we need to do a deeper review for this change. The < solution has the discovery problem yes, and i put it here just so that we dont forget that solution in the future when we get back to this issue eventually. This is a good feature to have, implementation details aside. Thanks for the feature request.

[devvaannsh]

@abose let us keep this idea in a loop for now. We'll have to think about the various UX options available and then decide one. Will look into it in the December release! Once again thanks for the idea. @brazenCoding

[abose]

Tracking issue #2403