feat(playground): add Reset button

mdn · Apr 24, 2024 · 4d8d0ee · 4d8d0ee
1 parent 3b8e023
commit 4d8d0ee
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
@@ -185,13 +185,26 @@ export default function Playground() {
     updateWithEditorContent();
   };
 
+  const reset = async () => {
+    setEditorContent({ html: initialCode?.html || HTML_DEFAULT, css: initialCode?.css || CSS_DEFAULT, js: initialCode?.js || JS_DEFAULT });
+
+    updateWithEditorContent();
+  };
+
   const clearConfirm = async () => {
     if (window.confirm("Do you really want to clear everything?")) {
       gleanClick(`${PLAYGROUND}: reset-click`);
       await clear();
     }
   };
 
+  const resetConfirm = async () => {
+    if (window.confirm("Do you really want to revert your changes?")) {
+      gleanClick(`${PLAYGROUND}: revert-click`);
+      await reset();
+    }
+  };
+
   const updateWithEditorContent = () => {
     const { html, css, js } = getEditorContent();
     setIsEmpty(!html && !css && !js);
@@ -314,6 +327,16 @@ export default function Playground() {
               >
                 clear
               </Button>
+              {initialCode && (
+                <Button
+                  type="secondary"
+                  id="reset"
+                  extraClasses="red"
+                  onClickHandler={resetConfirm}
+                >
+                  reset
+                </Button>
+              )}
             </menu>
           </aside>
           <Editor