app/components/editor/layout.ts

Functions

Imports

It imports no other module of this repo. Imported by app/routes/editor.tsx.

Source

1// The editor's layout (Write, Split, Preview), remembered in this browser.
2
3import { useEffect, useState } from "react";
4
5export type Layout = "write" | "split" | "preview";
6
7const LAYOUT_KEY = "carrel:editor-layout";
8
9export function useEditorLayout(): [Layout, (next: Layout) => void] {
10  const [layout, setLayout] = useState<Layout>("write");
11  // Remembered in this browser; read after mount so the server and the first client paint agree.
12  useEffect(() => {
13    try {
14      const stored = window.localStorage.getItem(LAYOUT_KEY);
15      if (stored === "write" || stored === "split" || stored === "preview") setLayout(stored);
16    } catch {
17      // Storage disabled: Write, the default.
18    }
19  }, []);
20  const chooseLayout = (next: Layout) => {
21    setLayout(next);
22    try {
23      window.localStorage.setItem(LAYOUT_KEY, next);
24    } catch {
25      // As above.
26    }
27  };
28  return [layout, chooseLayout];
29}