feature: Warn user if they leave the /editor page with unsaved changes #109

src/components/CodeAndPreview.tsx

@@ -16,6 +16,7 @@ import { useEffect, useMemo, useState } from "react"
 import { useMutation, useQueryClient } from "react-query"
 import EditorNav from "./EditorNav"
 import { PreviewContent } from "./PreviewContent"
+import useWarnUserForUnsavedChanges from "@/hooks/useWarnUserForUnsavedChanges"
 
 interface Props {
   snippet?: Snippet | null
@@ -118,6 +119,7 @@ export function CodeAndPreview({ snippet }: Props) {
   }
 
   const hasUnsavedChanges = snippet?.code !== code
+  useWarnUserForUnsavedChanges({ hasUnsavedChanges })
 
   if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
     return (

src/components/CodeEditor.tsx

@@ -46,6 +46,7 @@ export const CodeEditor = ({
   onDtsChange?: (dts: string) => void
   initialCode: string
   readOnly?: boolean
+  manualEditsJson?: string
   isStreaming?: boolean
   manualEditsFileContent: string
   showImportAndFormatButtons?: boolean
@@ -86,7 +87,6 @@ export const CodeEditor = ({
     Object.entries(files).forEach(([filename, content]) => {
       fsMap.set(filename, content)
     })
-
     createDefaultMapFromCDN(
       { target: ts.ScriptTarget.ES2022 },
       "5.6.3",
@@ -128,9 +128,13 @@ export const CodeEditor = ({
             .replace(registryPrefixes[2], "")
           const packageName = fullPackageName.split("/")[0].replace(/\./, "/")
           const pathInPackage = fullPackageName.split("/").slice(1).join("/")
-          const jsdelivrPath = `${packageName}${pathInPackage ? `/${pathInPackage}` : ""}`
+          const jsdelivrPath = `${packageName}${
+            pathInPackage ? `/${pathInPackage}` : ""
+          }`
           return fetch(
-            `${apiUrl}/snippets/download?jsdelivr_resolve=${input.includes("/resolve/")}&jsdelivr_path=${encodeURIComponent(jsdelivrPath)}`,
+            `${apiUrl}/snippets/download?jsdelivr_resolve=${input.includes(
+              "/resolve/",
+            )}&jsdelivr_path=${encodeURIComponent(jsdelivrPath)}`,
           )
         }
         return fetch(input, init)
@@ -263,7 +267,7 @@ export const CodeEditor = ({
                 for (let pos = from; pos < to; ) {
                   const line = view.state.doc.lineAt(pos)
                   const lineText = line.text
-                  const matches = lineText.matchAll(/@tsci\/[\w\-.]+/g)
+                  const matches = lineText.matchAll(/@tsci\/[\w.]+/g)
                   for (const match of matches) {
                     if (match.index !== undefined) {
                       const start = line.from + match.index

src/hooks/useWarnUserForUnsavedChanges.ts

@@ -0,0 +1,42 @@
+import { useEffect } from "react"
+export default function useWarnUserForUnsavedChanges({
+  hasUnsavedChanges,
+}: {
+  hasUnsavedChanges: boolean
+}) {
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges) {
+        event.preventDefault()
+        event.returnValue = "" // Shows the confirmation dialog on reload or close if there are unsaved changes
+      }
+    }
+
+    const handlePopState = (event: PopStateEvent) => {
+      if (hasUnsavedChanges) {
+        const userConfirmed = window.confirm(
+          "Are you sure you want to go back? Unsaved changes may be lost.",
+        )
+        if (!userConfirmed) {
+          // Push the state again to stay on the same page
+          window.history.pushState(null, "", window.location.href)
+        }
+      }
+    }
+
+    // Attach event listeners
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    window.addEventListener("popstate", handlePopState)
+
+    // Push the initial state only once, when component mounts
+    if (hasUnsavedChanges) {
+      window.history.pushState(null, "", window.location.href)
+    }
+
+    // Cleanup event listeners on component unmount
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload)
+      window.removeEventListener("popstate", handlePopState)
+    }
+  }, [hasUnsavedChanges])
+}