Add Ctrl + S shortcut to save file (#68)

* Add Ctrl+S shortcut to save file

* Add case insensitivity for 's'

* Save file on keyup, not keydown

Author: rao107

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import Split from 'react-split'
 import * as monaco from 'monaco-editor'
 import CodeMirror, { EditorView } from '@uiw/react-codemirror'
@@ -14,6 +14,7 @@ import defaultSettings, { IPreferencesContext, lightThemes, preferenceParams } f
 import { Menu } from './Navigation'
 import { PreferencesContext } from './Popups/Settings'
 import { Entries } from './utils/Entries'
+import { save } from './utils/SaveToFile'
 import { fixedEncodeURIComponent, formatArgs, lookupUrl, parseArgs } from './utils/UrlParsing'
 import { useWindowDimensions } from './utils/WindowWidth'
 
@@ -377,6 +378,30 @@ function App() {
     }
   }, [])
 
+  // Stop the browser's save dialog on Ctrl+S
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault()
+    }
+  }, [])
+
+  // Actually save the file on Ctrl+S
+  const handleKeyUp = useCallback((event: KeyboardEvent) => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault()
+      save(code)
+    }
+  }, [code])
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('keyup', handleKeyUp)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('keyup', handleKeyUp)
+    }
+  }, [handleKeyDown, handleKeyUp])
+
   return <PreferencesContext.Provider value={{preferences, setPreferences}}>
     <div className="app monaco-editor">
       <nav>

client/src/Navigation.tsx

@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition, faArrowRotateRight, faCode, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 import ZulipIcon from './assets/zulip.svg'
 import { faArrowUpRightFromSquare, faDownload, faBars, faXmark, faShield, faHammer, faGear, faStar, faUpload, faCloudArrowUp } from '@fortawesome/free-solid-svg-icons'
-import { saveAs } from 'file-saver'
 
 import SettingsPopup, { PreferencesContext } from './Popups/Settings'
 import PrivacyPopup from './Popups/PrivacyPolicy'
@@ -15,6 +14,7 @@ import LoadZulipPopup from './Popups/LoadZulip'
 import lean4webConfig from './config/config'
 import './css/Modal.css'
 import './css/Navigation.css'
+import { save } from './utils/SaveToFile'
 import { lookupUrl } from './utils/UrlParsing'
 
 /** A button to appear in the hamburger menu or to navigation bar. */
@@ -71,11 +71,6 @@ export const Popup: FC<{
     </div>
 }
 
-const save = (content: string) => {
-  var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
-  saveAs(blob, "Lean4WebDownload.lean");
-}
-
 /** The menu items either appearing inside the dropdown or outside */
 const FlexibleMenu: FC <{
   isInDropdown: boolean,

client/src/utils/SaveToFile.tsx

@@ -0,0 +1,6 @@
+import saveAs from 'file-saver';
+
+export const save = (content: string) => {
+  var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
+  saveAs(blob, "Lean4WebDownload.lean");
+}