feat: add Monaco markdown editor with live preview and auto-save (#22)

Integrate @monaco-editor/react as the primary document editing surface with:
- Lazy-loaded Monaco editor with markdown syntax highlighting
- Split/edit/preview view modes with react-markdown rendering
- Debounced auto-save hook (2s delay) that persists to document API
- Dark/light theme sync via app theme context
- Responsive layout filling available viewport space
- @tailwindcss/typography for styled markdown preview

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rjwalters

package.json

@@ -22,15 +22,18 @@
     "worktree:return": "./.loom/scripts/worktree-return.sh"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
+    "@tailwindcss/typography": "^0.5.19",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.1.1",
     "tailwind-merge": "^2.6.0"
   },

pnpm-lock.yaml

@@ -2,6 +2,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import { Layout } from "@/components/Layout";
 import { useAuth } from "@/hooks/use-auth";
 import { DashboardPage } from "@/pages/DashboardPage";
+import { DocumentEditPage } from "@/pages/DocumentEditPage";
 import { HomePage } from "@/pages/HomePage";
 import { LoginPage } from "@/pages/LoginPage";
 import { ProfilePage } from "@/pages/ProfilePage";
@@ -73,6 +74,14 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/projects/:projectId/documents/:documentId/edit"
+          element={
+            <ProtectedRoute>
+              <DocumentEditPage />
+            </ProtectedRoute>
+          }
+        />
       </Routes>
     </Layout>
   );

src/App.tsx

@@ -0,0 +1,44 @@
+import { lazy, Suspense } from "react";
+import { useTheme } from "@/hooks/use-theme";
+
+const Editor = lazy(() => import("@monaco-editor/react").then((mod) => ({ default: mod.default })));
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function MarkdownEditor({ value, onChange }: MarkdownEditorProps) {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-full items-center justify-center bg-background">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      }
+    >
+      <Editor
+        language="markdown"
+        theme={resolvedTheme === "dark" ? "vs-dark" : "vs"}
+        value={value}
+        onChange={(v) => onChange(v ?? "")}
+        options={{
+          wordWrap: "on",
+          minimap: { enabled: false },
+          fontSize: 14,
+          lineNumbers: "on",
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          padding: { top: 12 },
+        }}
+        loading={
+          <div className="flex h-full items-center justify-center bg-background">
+            <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+          </div>
+        }
+      />
+    </Suspense>
+  );
+}

src/components/MarkdownEditor.tsx

@@ -0,0 +1,13 @@
+import Markdown from "react-markdown";
+
+interface MarkdownPreviewProps {
+  content: string;
+}
+
+export function MarkdownPreview({ content }: MarkdownPreviewProps) {
+  return (
+    <div className="prose prose-sm dark:prose-invert max-w-none overflow-auto p-4">
+      <Markdown>{content}</Markdown>
+    </div>
+  );
+}

src/components/MarkdownPreview.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export function useAutoSave(
+  content: string,
+  onSave: (content: string) => Promise<void>,
+  delayMs = 2000,
+) {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastSavedRef = useRef(content);
+  const isSavingRef = useRef(false);
+  const contentRef = useRef(content);
+  const saveRef = useRef(onSave);
+
+  contentRef.current = content;
+  saveRef.current = onSave;
+
+  const save = useCallback(async (value: string) => {
+    if (isSavingRef.current || value === lastSavedRef.current) return;
+    isSavingRef.current = true;
+    try {
+      await saveRef.current(value);
+      lastSavedRef.current = value;
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (content === lastSavedRef.current) return;
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      save(content);
+    }, delayMs);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [content, delayMs, save]);
+
+  // Flush on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      const current = contentRef.current;
+      if (lastSavedRef.current !== current) {
+        save(current);
+      }
+    };
+  }, [save]);
+}

src/hooks/use-auto-save.ts

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { MarkdownEditor } from "@/components/MarkdownEditor";
+import { MarkdownPreview } from "@/components/MarkdownPreview";
+import { Button } from "@/components/ui/button";
+import { useAutoSave } from "@/hooks/use-auto-save";
+
+type ViewMode = "edit" | "preview" | "split";
+
+export function DocumentEditPage() {
+  const { projectId, documentId } = useParams<{
+    projectId: string;
+    documentId: string;
+  }>();
+  const [content, setContent] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>("split");
+  const [saveStatus, setSaveStatus] = useState<"saved" | "saving" | "unsaved">("saved");
+
+  useEffect(() => {
+    async function loadDocument() {
+      if (!projectId || !documentId) return;
+      try {
+        const response = await fetch(`/api/projects/${projectId}/documents/${documentId}`, {
+          credentials: "include",
+        });
+        if (!response.ok) throw new Error("Failed to load document");
+        const data = await response.json();
+        setContent(data.content ?? "");
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to load document");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    loadDocument();
+  }, [projectId, documentId]);
+
+  const handleSave = useCallback(
+    async (value: string) => {
+      if (!projectId || !documentId) return;
+      setSaveStatus("saving");
+      try {
+        const response = await fetch(`/api/projects/${projectId}/documents/${documentId}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ content: value }),
+        });
+        if (!response.ok) throw new Error("Failed to save document");
+        setSaveStatus("saved");
+      } catch {
+        setSaveStatus("unsaved");
+      }
+    },
+    [projectId, documentId],
+  );
+
+  useAutoSave(content, handleSave);
+
+  const handleChange = (value: string) => {
+    setContent(value);
+    setSaveStatus("unsaved");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-3.5rem)] items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-[calc(100vh-3.5rem)] flex-col items-center justify-center gap-4">
+        <p className="text-destructive">{error}</p>
+        <Button asChild variant="outline">
+          <Link to={`/projects/${projectId}`}>Back to Project</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-3.5rem)] flex-col">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between border-b px-4 py-2">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Link to={`/projects/${projectId}`} className="hover:text-foreground">
+            Project
+          </Link>
+          <span>/</span>
+          <span>Edit Document</span>
+          <span className="ml-2 text-xs">
+            {saveStatus === "saving" && "(Saving...)"}
+            {saveStatus === "saved" && "(Saved)"}
+            {saveStatus === "unsaved" && "(Unsaved changes)"}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant={viewMode === "edit" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setViewMode("edit")}
+          >
+            Edit
+          </Button>
+          <Button
+            variant={viewMode === "split" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setViewMode("split")}
+          >
+            Split
+          </Button>
+          <Button
+            variant={viewMode === "preview" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setViewMode("preview")}
+          >
+            Preview
+          </Button>
+        </div>
+      </div>
+
+      {/* Editor / Preview */}
+      <div className="flex min-h-0 flex-1">
+        {viewMode !== "preview" && (
+          <div className={`min-h-0 ${viewMode === "split" ? "w-1/2 border-r" : "w-full"}`}>
+            <MarkdownEditor value={content} onChange={handleChange} />
+          </div>
+        )}
+        {viewMode !== "edit" && (
+          <div className={`min-h-0 overflow-auto ${viewMode === "split" ? "w-1/2" : "w-full"}`}>
+            <MarkdownPreview content={content} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/DocumentEditPage.tsx

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
   --color-border: hsl(var(--border));