Bug Fix: Implement automatic write to disk on route change or refresh (#5761)

* chore: implement faster write function to call when rerouting

* fix: codespell typo

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/FileMachineProvider.tsx

@@ -34,6 +34,7 @@ import { settingsActor, useSettings } from 'machines/appMachine'
 import { createRouteCommands } from 'lib/commandBarConfigs/routeCommandConfig'
 import { useToken } from 'machines/appMachine'
 import { createNamedViewsCommand } from 'lib/commandBarConfigs/namedViewsConfig'
+import { reportRejection } from 'lib/trap'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -60,6 +61,20 @@ export const FileMachineProvider = ({
     []
   )
 
+  // Write code mirror content to disk when the page is trying to reroute
+  // Our logic for codeManager.writeToFile has an artificial 1000ms timeout which
+  // won't run quickly enough so users can make an edit, exit the page and lose their
+  // progress within that 1000ms window.
+  useEffect(() => {
+    const preventUnload = (event: BeforeUnloadEvent) => {
+      codeManager.writeToFileNoTimeout().catch(reportRejection)
+    }
+    window.addEventListener('beforeunload', preventUnload)
+    return () => {
+      window.removeEventListener('beforeunload', preventUnload)
+    }
+  }, [])
+
   useEffect(() => {
     // TODO: Engine feature is not deployed
     if (DEV) {