"Reset Button" option

[VibhorJaiswal]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

Like the existing 'CopyButton,' a 'ResetButton' would be a valuable addition. This feature can be used by websites, such as React Bootstrap, to allow users to reset example codes to their original state."

Has this been requested on Canny?

No response

Motivation

This option is available on some websites, such as MUI, and it enhances user experience by allowing users to easily restore example code to its original state.

API design

Here’s a rough design of how the feature could look. I’ve taken a screenshot from React Bootstrap's code editor and edited it to illustrate the idea.

Have you tried building it?

No response

Self-service

• I'd be willing to contribute this feature to Docusaurus myself.

[slorber]

It's not clear what you mean by "reset to their original state"

What is the "state"? The state of the buttons? (such as "return to line") or the state of the code block? (note: code blocks are usually stateless)

Since you only link to MUI / Bootstrap landing pages, I'm not really able to see a concrete example. Can you link to an actual page/section instead please?

Do you mean it's only for live playgrounds where you can edit the code block? Is the goal to "restore" the original code in that live playground?

[VibhorJaiswal]

@slorber

What is the "state"? The state of the buttons? (such as "return to line") or the state of the code block? (note: code blocks are usually stateless)

By "state," I mean the original code. If the user has modified the code, the "Reset" button would restore it to the original example provided.

Since you only link to MUI / Bootstrap landing pages, I'm not really able to see a concrete example. Can you link to an actual page/section instead please?

For example, this page on MUI features a "Reset demo" option in the code example:

Similarly, this feature can be used by websites like React Bootstrap (in here). It would look something similar to the design I’ve attached in the screenshot in the issue.

Do you mean it's only for live playgrounds where you can edit the code block? Is the goal to "restore" the original code in that live playground?

Yes, it’s specifically for live playgrounds where users can edit the code block. The goal is to provide an option to restore the original code.

I hope I’ve addressed your questions. If anything is still unclear or if you need further details, let me know.

[slorber]

Thanks, I understand now.

Will need to think about it and see what to do for live playgrounds.

There was also a related button placement improvement PR here: #10461

We may want to place the buttons similarly for the live playgrounds to ensure some kind of UI consistency

[NPX2218]

Hi! I'd like to work on this. I'll implement the Reset button for live code playgrounds and have a PR ready within 7 days