Function ExternalFileApp

packages/app-core/src/components/ExternalFileApp.tsx:45–314

()

}

export function ExternalFileApp(): JSX.Element {
  const prefs = useMemo(() => loadFloatingPrefs(), [])
  const [content, setContent] = useState<ExternalFileContent | null>(null)
  const [dirty, setDirty] = useState(false)
  const [mode, setMode] = useState<'edit' | 'preview'>('edit')
  const [moving, setMoving] = useState(false)
  const [moveError, setMoveError] = useState<string | null>(null)
  const viewRef = useRef<EditorView | null>(null)
  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  // Source of truth for the body: seeded on load and updated on every
  // edit. The editor is recreated on each edit/preview toggle, so it must
  // re-seed from here — `content` is captured stale in setContainerRef.
  const bodyRef = useRef<string | null>(null)

  // Apply theme + font vars before paint.
  useEffect(() => {
    applyTheme(prefs)
    const mql = window.matchMedia('(prefers-color-scheme: dark)')
    if (prefs.themeMode === 'auto') {
      const onChange = (): void => applyTheme(prefs)
      mql.addEventListener('change', onChange)
      return () => mql.removeEventListener('change', onChange)
    }
    return undefined
  }, [prefs])

  // Initial load.
  useEffect(() => {
    let alive = true
    void window.zen
      .readExternalFile()
      .then((c) => {
        if (!alive) return
        bodyRef.current = c.body
        setContent(c)
      })
      .catch((err) => {
        console.error('readExternalFile failed', err)
      })
    return () => {
      alive = false
    }
  }, [])

  const persist = useCallback(async (body: string) => {
    try {
      await window.zen.writeExternalFile(body)
      setDirty(false)
    } catch (err) {
      console.error('writeExternalFile failed', err)
    }
  }, [])

  // Mount CodeMirror once content is loaded.
  const setContainerRef = useCallback(
    (el: HTMLDivElement | null) => {
      if (!el) {
        viewRef.current?.destroy()