From d58216f5ec3aef8392b0e5efd2edfa577f0a8cdc Mon Sep 17 00:00:00 2001
From: Keyan Zhang <root@keyanzhang.com>
Date: Sun, 15 Mar 2020 14:00:33 -0700
Subject: [PATCH] [RFC] show confirmation dialog before the user closes the
 page (#957)

---
 src/components/App.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 1c655eb311..19c43abfc6 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -522,6 +522,8 @@ export class App extends React.Component<any, AppState> {
     }
     const scene = await loadScene(null);
     this.syncActionResult(scene);
+
+    window.addEventListener("beforeunload", this.beforeUnload);
   }
 
   public componentWillUnmount() {
@@ -554,6 +556,7 @@ export class App extends React.Component<any, AppState> {
       false,
     );
     document.removeEventListener("gestureend", this.onGestureEnd as any, false);
+    window.removeEventListener("beforeunload", this.beforeUnload);
   }
 
   public state: AppState = getDefaultAppState();
@@ -2180,6 +2183,17 @@ export class App extends React.Component<any, AppState> {
     }));
   };
 
+  private beforeUnload = (event: BeforeUnloadEvent) => {
+    if (
+      this.state.isCollaborating &&
+      hasNonDeletedElements(globalSceneState.getAllElements())
+    ) {
+      event.preventDefault();
+      // NOTE: modern browsers no longer allow showing a custom message here
+      event.returnValue = "";
+    }
+  };
+
   private addElementsFromPaste = (
     clipboardElements: readonly ExcalidrawElement[],
   ) => {