flush autosave on unload (#473)

src/index.tsx

@@ -211,6 +211,11 @@ export class App extends React.Component<{}, AppState> {
     e.preventDefault();
   };
 
+  private onUnload = () => {
+    this.saveDebounced();
+    this.saveDebounced.flush();
+  };
+
   public async componentDidMount() {
     document.addEventListener("copy", this.onCopy);
     document.addEventListener("paste", this.onPaste);
@@ -219,6 +224,7 @@ export class App extends React.Component<{}, AppState> {
     document.addEventListener("keydown", this.onKeyDown, false);
     document.addEventListener("mousemove", this.getCurrentCursorPosition);
     window.addEventListener("resize", this.onResize, false);
+    window.addEventListener("unload", this.onUnload, false);
 
     let data;
     const searchParams = new URLSearchParams(window.location.search);
@@ -253,6 +259,7 @@ export class App extends React.Component<{}, AppState> {
       false
     );
     window.removeEventListener("resize", this.onResize, false);
+    window.removeEventListener("unload", this.onUnload, false);
   }
 
   public state: AppState = getDefaultAppState();

src/utils.ts

@@ -57,10 +57,17 @@ export function debounce<T extends any[]>(
   timeout: number
 ) {
   let handle = 0;
-  return (...args: T) => {
+  let lastArgs: T;
+  const ret = (...args: T) => {
+    lastArgs = args;
     clearTimeout(handle);
     handle = window.setTimeout(() => fn(...args), timeout);
   };
+  ret.flush = () => {
+    clearTimeout(handle);
+    fn(...lastArgs);
+  };
+  return ret;
 }
 
 export function selectNode(node: Element) {