Add beautify button to format the code

[Girishbari]

Currently, the editor seems to format the code once I click on 'Validate', which also, in turn runs the test cases. This could be an unexpected behaviour, since user may tends to format the code first and just look around for understanding

A similar feature is also there in POSTMAN

[Girishbari]

@JeelRajodiya let me know if this can be a valid thing to do..

[K-Thour]

I am also thinking of that, It is a great idea @Girishbari

[devsk18]

Hi @JeelRajodiya

I’m new to open-source contributions, and this issue looks like a good first one for me. If you think this UI enhancement is relevant for the tour site, I’d be happy to work on it.

Plan :

1. Add a new button named "Beautify" to the editor toolbar, styled with an amber-like color to visually fit within the existing button group.
2. Add a new secondary button variant.
3. Attach an onClick handler to trigger the formatting action.
4. Reuse the existing code formatting function to format content.

Even though the color is similar to warning style in some CSS frameworks, I'd like to avoid using warning variant name because formatting is a safe, non-destructive action. So I'd like to use a secondary variant name to keep the semantics align with user action. Looking forward for your feedback on this.

If everything looks good, can you please assign this issue to me. I’d be glad to proceed and submit a PR.

Expected Results :

Dark Mode :

Light Mode :

[devsk18]

Hi @JeelRajodiya

It would be great if you could give an update on this.

[MianAhtisham]

Hello Maintainers,
I would like to work on this issue.
Kindly assign it to me.