[FEATURE] Add "Apply Fix" and "Apply Suggestion" buttons to the playground

[yeonjuan]

Is your feature request related to a problem? Please describe.

It would be great if the playground supported auto-fix functionality directly in the browser.

Specifically, I’d like to propose adding two buttons:

• "Apply Fix" — applies available fixes provided by rules.
• "Apply Suggestion" — applies the first available suggestion from the lint results.

This would allow users to test and preview how rules modify code, making it easier to understand and experiment with linting behavior. It could also help rule developers validate their fix implementations interactively.

Additional context

https://html-eslint.org/playground

• typescript-eslint playground

[HyzeahAchungha]

Hi! I’d like to work on this feature.

My Plan:

• Add "Apply Fix and Apply Suggestion buttons next to code suggestions or diagnostics in the Playground.
• On button click, trigger the corresponding code transformation using existing or new handler functions.
• Ensure the transformation applies correctly to the code editor’s content using its internal API or state.
• Use conditional rendering to only show these buttons when relevant suggestions/fixes are available.
• Add visual feedback (e.g., loading state or toast confirmation) so users know the action succeeded.

Why I’m a Good Fit:

• I have experience working with React-based interfaces and interactive code editors.
• I'm comfortable with state management, conditional UI rendering, and integrating new features into existing codebases.
• I care about clean UX and would love to make the Playground more interactive and helpful.
• I'm detail-oriented and always test thoroughly before submitting PRs. My EAT is 24hrs

[yeonjuan]

Hi @HyzeahAchungha Thank you. Let me know if you have any questions or get stuck along the way.

[HyzeahAchungha]

Will do, thanks!

…

On Thu, May 29, 2025 at 2:11 PM YeonJuan ***@***.***> wrote: *yeonjuan* left a comment (yeonjuan/html-eslint#352) <#352 (comment)> Hi @HyzeahAchungha <https://github.com/HyzeahAchungha> Thank you. Let me know if you have any questions or get stuck along the way. — Reply to this email directly, view it on GitHub <#352 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2B2UCJLXMBZJRUUCN6J7UD3A4BQDAVCNFSM6AAAAAB5ZF5URWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSMJZGM2TAMRZGI> . You are receiving this because you were mentioned.Message ID: ***@***.***>