enhance(editor): confirm before reset (#2052)

* enhance(editor): confirm before reset * chore(editor): update reset copy Co-authored-by: Brian Thomas Smith <[email protected]>
mdn · Dec 20, 2024 · 73037f7 · 73037f7
1 parent c273d3c
commit 73037f7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 5 deletions.
diff --git a/editor/js/editable-css.ts b/editor/js/editable-css.ts
@@ -95,7 +95,16 @@ import "../css/editable-css.css";
   function handleResetEvents() {
     const resetButton = document.getElementById("reset") as HTMLElement;
 
-    resetButton.addEventListener("click", () => {
+    resetButton.addEventListener("click", (event) => {
+      if (
+        !window.confirm(
+          "Are you sure you want to reset the editor?\nAny changes you have made will be lost.",
+        )
+      ) {
+        event.preventDefault();
+        return;
+      }
+
       exampleChoices.forEach((e, i) => {
         const preEl = e.querySelector("pre") as HTMLElement;
 

diff --git a/editor/js/editable-js.ts b/editor/js/editable-js.ts
@@ -105,7 +105,18 @@ import {
       applyCode();
     });
 
-    reset.addEventListener("click", () => window.location.reload());
+    reset.addEventListener("click", (event) => {
+      if (
+        !window.confirm(
+          "Are you sure you want to reset the editor?\nAny changes you have made will be lost.",
+        )
+      ) {
+        event.preventDefault();
+        return;
+      }
+
+      window.location.reload();
+    });
   } else {
     console.warn(
       `Feature ${exampleFeature} is not supported; code editor disabled.`,

diff --git a/editor/js/editable-wat.ts b/editor/js/editable-wat.ts
@@ -262,7 +262,18 @@ import {
       applyCode();
     });
 
-    reset.addEventListener("click", () => window.location.reload());
+    reset.addEventListener("click", (event) => {
+      if (
+        !window.confirm(
+          "Are you sure you want to reset the editor?\nAny changes you have made will be lost.",
+        )
+      ) {
+        event.preventDefault();
+        return;
+      }
+
+      window.location.reload();
+    });
   } else {
     console.warn(
       `Feature ${

diff --git a/editor/js/editor.ts b/editor/js/editor.ts
@@ -197,9 +197,20 @@ import "../css/tabbed-editor.css";
 
   header.addEventListener("click", (event) => {
     const target = event.target as typeof header;
-    if (target.classList.contains("reset")) {
-      window.location.reload();
+    if (!target.classList.contains("reset")) {
+      return;
     }
+
+    if (
+      !window.confirm(
+        "Are you sure you want to reset the editor?\nAny changes you have made will be lost.",
+      )
+    ) {
+      event.preventDefault();
+      return;
+    }
+
+    window.location.reload();
   });
 
   htmlEditor.addEventListener("keyup", () => autoUpdate());