feat: add beforeUnload and confirmNavigation if there are unsaved changes

Author: imaginarny

src/components/ProjectBrowser/ProjectEntry.tsx

@@ -5,6 +5,7 @@ import type { Tag } from "../../data/demos";
 import { loadProject } from "../../features/Projects/application/loadProject";
 import { useProject } from "../../features/Projects/stores/useProject";
 import { cn } from "../../util/cn";
+import { confirmNavigate } from "../../util/confirmNavigate";
 
 export type ProjectEntryProject = {
     key: string;
@@ -100,13 +101,19 @@ export const ProjectEntry: FC<ProjectEntryProps> = (
 
         if (!dialog?.open) return;
 
-        if (isProject) {
-            loadProject(project.key);
-        } else {
-            createNewProject("ex", {}, project.key);
+        if (isCurrent) {
+            return dialog?.close();
         }
 
-        dialog?.close();
+        confirmNavigate(() => {
+            if (isProject) {
+                loadProject(project.key);
+            } else {
+                createNewProject("ex", {}, project.key);
+            }
+
+            dialog?.close();
+        });
     };
 
     return (

src/components/Toolbar/ExampleList.tsx

@@ -2,6 +2,7 @@ import type { ChangeEvent, FC } from "react";
 import { demos } from "../../data/demos";
 import { loadProject } from "../../features/Projects/application/loadProject";
 import { useProject } from "../../features/Projects/stores/useProject";
+import { confirmNavigate } from "../../util/confirmNavigate";
 import { sortEntries } from "../ProjectBrowser/SortBy";
 
 const ExampleList: FC = () => {
@@ -16,11 +17,13 @@ const ExampleList: FC = () => {
             "data-demo-id",
         );
 
-        if (demoId) {
-            createNewProject("ex", {}, demoId);
-        } else {
-            loadProject(ev.target.value);
-        }
+        confirmNavigate(() => {
+            if (demoId) {
+                createNewProject("ex", {}, demoId);
+            } else {
+                loadProject(ev.target.value);
+            }
+        });
     };
 
     const getSortedProjects = (mode: "pj" | "ex") => (

src/components/Toolbar/ProjectStatus.tsx

@@ -156,6 +156,7 @@ export const ProjectStatus = () => {
             )}
 
             <button
+                id="project-save-button"
                 className={cn(
                     "btn btn-xs btn-ghost px-px rounded-sm items-center justify-center h-full",
                     {

src/features/Editor/components/MonacoEditor.tsx

@@ -1,6 +1,7 @@
 import { Editor, type Monaco } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { type FC, useEffect } from "react";
+import { useBeforeUnload } from "../../../hooks/useBeforeUnload";
 import { useConfig } from "../../../hooks/useConfig.ts";
 import { useEditor } from "../../../hooks/useEditor.ts";
 import { useProject } from "../../Projects/stores/useProject.ts";
@@ -16,14 +17,24 @@ interface MonacoEditorProps {
 export const MonacoEditor: FC<MonacoEditorProps> = (props) => {
     const updateFile = useProject((s) => s.updateFile);
     const getFile = useProject((s) => s.getFile);
+    const projectIsSaved = useProject((s) => s.projectIsSaved);
     const run = useEditor((s) => s.run);
     const update = useEditor((s) => s.update);
     const updateImageDecorations = useEditor((s) => s.updateImageDecorations);
     const setRuntime = useEditor((s) => s.setRuntime);
     const getRuntime = useEditor((s) => s.getRuntime);
+    const updateEditorLastSavedValue = useEditor((s) =>
+        s.updateEditorLastSavedValue
+    );
+    const updateHasUnsavedChanges = useEditor((s) => s.updateHasUnsavedChanges);
+    const hasUnsavedChanges = useEditor((s) =>
+        s.getRuntime().hasUnsavedChanges
+    );
     const getConfig = useConfig((s) => s.getConfig);
     const setConfigKey = useConfig((s) => s.setConfigKey);
 
+    useBeforeUnload(hasUnsavedChanges);
+
     const handleEditorBeforeMount = (monaco: Monaco) => {
         configMonaco(monaco);
     };
@@ -62,6 +73,13 @@ export const MonacoEditor: FC<MonacoEditorProps> = (props) => {
             updateImageDecorations();
         });
 
+        editor.onDidChangeModelContent(() => {
+            const projectKey = useProject.getState().projectKey;
+            const isSaved = projectKey && projectIsSaved(projectKey);
+            if (isSaved) updateEditorLastSavedValue();
+            updateHasUnsavedChanges();
+        });
+
         editor.onDidScrollChange(() => {
             updateImageDecorations();
         });

src/features/Projects/stores/slices/project.ts

@@ -403,6 +403,9 @@ export const createProjectSlice: StateCreator<
         useConfig.getState().setConfig({
             lastOpenedProject: id,
         });
+
+        useEditor.getState().updateEditorLastSavedValue();
+        useEditor.getState().updateHasUnsavedChanges();
     },
 
     generateId(prefix) {

src/hooks/useBeforeUnload.ts

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+
+export const useBeforeUnload = async (
+    hasUnsavedChanges: boolean,
+    focusQuerySelector: string = "#project-save-button",
+) => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+        if (!hasUnsavedChanges) return;
+        e.preventDefault();
+
+        if (focusQuerySelector) {
+            window.addEventListener("focus", () => {
+                setTimeout(() =>
+                    document.querySelector<HTMLElement>(focusQuerySelector)
+                        ?.focus()
+                );
+            }, { once: true });
+        }
+    };
+
+    useEffect(() => {
+        if (hasUnsavedChanges) {
+            window.addEventListener("beforeunload", handleBeforeUnload);
+        }
+
+        return () => {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+        };
+    }, [hasUnsavedChanges]);
+};

src/hooks/useEditor.ts

@@ -1,6 +1,6 @@
 import type { Monaco } from "@monaco-editor/react";
 import confetti from "canvas-confetti";
-import type { editor } from "monaco-editor";
+import { editor } from "monaco-editor";
 import { toast } from "react-toastify";
 import { create } from "zustand";
 import { kaplayVersions } from "../data/kaplayVersions.json";
@@ -27,6 +27,14 @@ interface EditorRuntime {
      * The current selection in the editor
      */
     currentFile: string;
+    /**
+     * The last saved editor value
+     */
+    editorLastSavedValue: string | null;
+    /**
+     * If file was modified and not saved
+     */
+    hasUnsavedChanges: boolean;
     /**
      * Decorations for the gylph images
      */
@@ -68,6 +76,8 @@ export interface EditorStore {
     updateModelMarkers: () => void;
     showNotification: (message: string) => void;
     setEditorValue: (value: string) => void;
+    updateEditorLastSavedValue: (value?: string) => void;
+    updateHasUnsavedChanges: () => void;
     updateAndRun: () => void;
 }
 
@@ -76,6 +86,8 @@ export const useEditor = create<EditorStore>((set, get) => ({
         editor: null,
         monaco: null,
         currentFile: "main.js",
+        editorLastSavedValue: null,
+        hasUnsavedChanges: false,
         gylphDecorations: null,
         iframe: null,
         console: null,
@@ -143,6 +155,8 @@ export const useEditor = create<EditorStore>((set, get) => ({
                 viewStates: viewStates,
             },
         }));
+
+        get().updateEditorLastSavedValue();
     },
     update: (customValue?: string) => {
         if (customValue) {
@@ -163,6 +177,8 @@ export const useEditor = create<EditorStore>((set, get) => ({
             currentFile.path.slice(0, 25) + "...",
         );
 
+        get().updateEditorLastSavedValue(currentFile.value);
+
         get().setEditorValue(currentFile.value);
         get().updateImageDecorations();
     },
@@ -315,6 +331,27 @@ export const useEditor = create<EditorStore>((set, get) => ({
 
         editor.setValue(value);
     },
+    updateEditorLastSavedValue(value) {
+        set((state) => ({
+            runtime: {
+                ...state.runtime,
+                editorLastSavedValue:
+                    (value ?? get().runtime.editor?.getValue()) ?? null,
+            },
+        }));
+    },
+    updateHasUnsavedChanges() {
+        const editor = get().runtime.editor;
+        if (!editor) return;
+
+        set((state) => ({
+            runtime: {
+                ...state.runtime,
+                hasUnsavedChanges: get().getRuntime().editorLastSavedValue
+                    != editor.getValue(),
+            },
+        }));
+    },
     updateAndRun() {
         get().getRuntime().editor?.setScrollTop(0);
         get().update();

src/util/confirmNavigate.tsx

@@ -0,0 +1,39 @@
+import { useProject } from "../features/Projects/stores/useProject";
+import { useEditor } from "../hooks/useEditor";
+import { confirm, type ConfirmContent, type ConfirmOptions } from "./confirm";
+
+export type unsavedChangesConfirm = {
+    title?: string;
+    content?: ConfirmContent;
+    options?: ConfirmOptions;
+};
+
+export const confirmNavigate = async (
+    to: () => void,
+    { title, content, options }: unsavedChangesConfirm = {},
+) => {
+    if (!useEditor.getState().getRuntime().hasUnsavedChanges) return to();
+
+    if (
+        await confirm(
+            title || "You have unsaved changes!",
+            content ?? (
+                <p>
+                    You will loose your changes if you continue without
+                    saving.<br />
+                    <span className="text-sm">
+                        Your project will{" "}
+                        <strong className="text-white">auto-save</strong>{" "}
+                        after the first inital save.
+                    </span>
+                </p>
+            ),
+            options ?? {
+                confirmText: "Save as Project and continue",
+                dismissText: "Discard and continue",
+            },
+        )
+    ) useProject.getState().saveNewProject();
+
+    to?.();
+};