Do a full reload when tab is restored, fixes hackclub#919

src/components/big-interactive-pages/editor.tsx

@@ -14,6 +14,7 @@ import Help from '../popups-etc/help'
 import { collapseRanges } from '../../lib/codemirror/util'
 import { defaultExampleCode } from '../../lib/examples'
 import MigrateToast from '../popups-etc/migrate-toast'
+import { nanoid } from 'nanoid'
 
 interface EditorProps {
  persistenceState: Signal<PersistenceState>
@@ -164,6 +165,26 @@ export default function Editor({ persistenceState, cookies }: EditorProps) {
  initialCode = persistenceState.value.code
  else if (persistenceState.value.kind === 'IN_MEMORY')
  initialCode = defaultExampleCode
+
+ // Firefox has weird tab restoring logic. When you, for example, Ctrl-Shift-T, it opens
+ // a kinda broken cached version of the page. And for some reason this reverts the CM
+ // state. Seems like manipulating Preact state is unpredictable, but sessionStorage is
+ // saved, so we use a random token to detect if the page is being restored and force a
+ // reload.
+ //
+ // See https://github.com/hackclub/sprig/issues/919 for a bug report this fixes.
+ useEffect(() => {
+ const pageId = nanoid()
+ window.addEventListener('unload', () => {
+ sessionStorage.setItem(pageId, pageId)
+ })
+ window.addEventListener('load', () => {
+ if (sessionStorage.getItem(pageId)) {
+ sessionStorage.removeItem('pageId')
+ window.location.reload()
+ }
+ })
+ }, [ initialCode ])
 
  return (
  <div class={styles.page}>