[RFC] show confirmation dialog before the user closes the page (#957)

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[],
   ) => {