@peaske7/readit 0.1.4 → 0.1.5

package/src/hooks/useFontPreference.ts

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { FontFamilies, type FontFamily } from "../types";
+
+interface UseFontPreferenceResult {
+  fontFamily: FontFamily;
+  setFontFamily: (font: FontFamily) => Promise<void>;
+  isLoading: boolean;
+}
+
+export function useFontPreference(
+  filePath: string | null,
+): UseFontPreferenceResult {
+  const [fontFamily, setFontFamilyState] = useState<FontFamily>(
+    FontFamilies.SERIF,
+  );
+  const [isLoading, setIsLoading] = useState(true);
+
+  const filePathRef = useRef(filePath);
+  filePathRef.current = filePath;
+
+  // Fetch settings when filePath changes
+  useEffect(() => {
+    if (!filePath) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+
+    const fetchSettings = async () => {
+      try {
+        const query = `?path=${encodeURIComponent(filePath)}`;
+        const response = await fetch(`/api/settings${query}`);
+        if (response.ok) {
+          const settings = await response.json();
+          setFontFamilyState(settings.fontFamily || FontFamilies.SERIF);
+        }
+      } catch (err) {
+        console.error("Failed to fetch settings:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchSettings();
+  }, [filePath]);
+
+  const setFontFamily = useCallback(async (font: FontFamily) => {
+    // Optimistic update
+    setFontFamilyState(font);
+
+    try {
+      const fp = filePathRef.current;
+      const query = fp ? `?path=${encodeURIComponent(fp)}` : "";
+      const response = await fetch(`/api/settings${query}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ fontFamily: font }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to save settings");
+      }
+    } catch (err) {
+      console.error("Failed to save font preference:", err);
+      toast.error("Failed to save font preference");
+    }
+  }, []);
+
+  return {
+    fontFamily,
+    setFontFamily,
+    isLoading,
+  };
+}

package/src/hooks/useHeadings.test.ts

@@ -0,0 +1,159 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useHeadings } from "./useHeadings";
+
+describe("useHeadings - markdown", () => {
+  it("extracts basic headings", () => {
+    const content = `# Heading 1
+## Heading 2
+### Heading 3`;
+
+    const { result } = renderHook(() => useHeadings(content, "markdown"));
+
+    expect(result.current).toEqual([
+      { id: "heading-1", text: "Heading 1", level: 1 },
+      { id: "heading-2", text: "Heading 2", level: 2 },
+      { id: "heading-3", text: "Heading 3", level: 3 },
+    ]);
+  });
+
+  it("handles duplicate headings", () => {
+    const content = `## Section
+## Section
+## Section`;
+
+    const { result } = renderHook(() => useHeadings(content, "markdown"));
+
+    expect(result.current).toEqual([
+      { id: "section", text: "Section", level: 2 },
+      { id: "section-1", text: "Section", level: 2 },
+      { id: "section-2", text: "Section", level: 2 },
+    ]);
+  });
+
+  it("ignores headings inside fenced code blocks", () => {
+    const content = `# Real Heading
+
+\`\`\`bash
+# This is a comment, not a heading
+echo "hello"
+\`\`\`
+
+## Another Real Heading`;
+
+    const { result } = renderHook(() => useHeadings(content, "markdown"));
+
+    expect(result.current).toEqual([
+      { id: "real-heading", text: "Real Heading", level: 1 },
+      { id: "another-real-heading", text: "Another Real Heading", level: 2 },
+    ]);
+  });
+
+  it("ignores headings inside triple-tilde code blocks", () => {
+    const content = `# Real Heading
+
+~~~python
+# Python comment
+def foo():
+    pass
+~~~
+
+## Another Real Heading`;
+
+    const { result } = renderHook(() => useHeadings(content, "markdown"));
+
+    expect(result.current).toEqual([
+      { id: "real-heading", text: "Real Heading", level: 1 },
+      { id: "another-real-heading", text: "Another Real Heading", level: 2 },
+    ]);
+  });
+
+  it("handles multiple code blocks", () => {
+    const content = `# Introduction
+
+\`\`\`bash
+# Comment 1
+\`\`\`
+
+## Methods
+
+\`\`\`python
+# Comment 2
+\`\`\`
+
+## Results`;
+
+    const { result } = renderHook(() => useHeadings(content, "markdown"));
+
+    expect(result.current).toEqual([
+      { id: "introduction", text: "Introduction", level: 1 },
+      { id: "methods", text: "Methods", level: 2 },
+      { id: "results", text: "Results", level: 2 },
+    ]);
+  });
+
+  it("handles code block with language specifier", () => {
+    const content = `# Setup
+
+\`\`\`bash
+# Use a custom port
+npx readit document.md --port 3000
+\`\`\`
+
+## Usage`;
+
+    const { result } = renderHook(() => useHeadings(content, "markdown"));
+
+    expect(result.current).toEqual([
+      { id: "setup", text: "Setup", level: 1 },
+      { id: "usage", text: "Usage", level: 2 },
+    ]);
+  });
+
+  it("returns empty array for null content", () => {
+    const { result } = renderHook(() => useHeadings(null, "markdown"));
+    expect(result.current).toEqual([]);
+  });
+
+  it("returns empty array for null type", () => {
+    const { result } = renderHook(() => useHeadings("# Heading", null));
+    expect(result.current).toEqual([]);
+  });
+});
+
+describe("useHeadings - html", () => {
+  it("extracts basic headings", () => {
+    const content = `<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>`;
+
+    const { result } = renderHook(() => useHeadings(content, "html"));
+
+    expect(result.current).toEqual([
+      { id: "heading-1", text: "Heading 1", level: 1 },
+      { id: "heading-2", text: "Heading 2", level: 2 },
+      { id: "heading-3", text: "Heading 3", level: 3 },
+    ]);
+  });
+
+  it("uses existing id attribute", () => {
+    const content = `<h1 id="custom-id">Heading 1</h1>`;
+
+    const { result } = renderHook(() => useHeadings(content, "html"));
+
+    expect(result.current).toEqual([
+      { id: "custom-id", text: "Heading 1", level: 1 },
+    ]);
+  });
+
+  it("decodes HTML entities", () => {
+    const content = `<h1>Hello &amp; World</h1>`;
+
+    const { result } = renderHook(() => useHeadings(content, "html"));
+
+    // Note: & is stripped, leaving "Hello  World" → "hello-world" (hyphens collapsed)
+    expect(result.current).toEqual([
+      { id: "hello-world", text: "Hello & World", level: 1 },
+    ]);
+  });
+});

package/src/hooks/useHeadings.ts

@@ -0,0 +1,129 @@
+import { useMemo } from "react";
+import { slugify } from "../lib/utils";
+import type { DocumentType } from "../types";
+
+export interface Heading {
+  id: string;
+  text: string;
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+/**
+ * Remove code blocks from markdown content.
+ * Handles both fenced (```) and indented (4 spaces) code blocks.
+ */
+function stripCodeBlocks(content: string): string {
+  // Remove fenced code blocks (``` or ~~~)
+  let result = content.replace(/^(`{3,}|~{3,}).*$[\s\S]*?^\1\s*$/gm, "");
+
+  // Remove indented code blocks (4 spaces or 1 tab at start of line)
+  // Only remove if preceded by a blank line (to avoid removing list items)
+  result = result.replace(/(?:^|\n\n)((?:(?:[ ]{4}|\t).+\n?)+)/g, "\n\n");
+
+  return result;
+}
+
+/**
+ * Extract headings from markdown content
+ */
+function parseMarkdownHeadings(content: string): Heading[] {
+  const headings: Heading[] = [];
+  const seenIds = new Map<string, number>();
+
+  // Strip code blocks to avoid matching # comments in code
+  const contentWithoutCode = stripCodeBlocks(content);
+
+  const regex = /^(#{1,6})\s+(.+)$/gm;
+  let match = regex.exec(contentWithoutCode);
+
+  while (match !== null) {
+    const level = match[1].length as 1 | 2 | 3 | 4 | 5 | 6;
+    const text = match[2].trim();
+    const baseId = slugify(text);
+    const count = seenIds.get(baseId) ?? 0;
+    const id = count > 0 ? `${baseId}-${count}` : baseId;
+    seenIds.set(baseId, count + 1);
+
+    headings.push({ id, text, level });
+    match = regex.exec(contentWithoutCode);
+  }
+
+  return headings;
+}
+
+/**
+ * Generate ID matching the iframe's ensureHeadingIds algorithm.
+ * Note: This differs from utils/slugify - it strips underscores to match
+ * the iframe script's ID generation exactly.
+ */
+function generateHeadingId(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9 -]/g, "")
+    .replace(/ +/g, "-")
+    .replace(/-+/g, "-");
+}
+
+/**
+ * Extract headings from HTML content
+ */
+function parseHtmlHeadings(content: string): Heading[] {
+  const headings: Heading[] = [];
+  const seenIds = new Map<string, number>();
+
+  // Match h1-h6 tags, capturing attributes and text content
+  const regex = /<h([1-6])([^>]*)>([^<]+)<\/h\1>/gi;
+  let match = regex.exec(content);
+
+  while (match !== null) {
+    const level = Number.parseInt(match[1], 10) as 1 | 2 | 3 | 4 | 5 | 6;
+    const attributes = match[2];
+    // Strip any remaining HTML tags and decode entities
+    const text = match[3]
+      .replace(/<[^>]+>/g, "")
+      .replace(/&amp;/g, "&")
+      .replace(/&lt;/g, "<")
+      .replace(/&gt;/g, ">")
+      .replace(/&quot;/g, '"')
+      .trim();
+
+    if (text) {
+      // Extract existing id attribute if present
+      const idMatch = /\sid=["']([^"']+)["']/i.exec(attributes);
+
+      // Use existing ID or generate one with duplicate handling
+      const id = idMatch
+        ? idMatch[1]
+        : (() => {
+            const baseId = generateHeadingId(text);
+            const count = seenIds.get(baseId) ?? 0;
+            seenIds.set(baseId, count + 1);
+            return count > 0 ? `${baseId}-${count}` : baseId;
+          })();
+
+      headings.push({ id, text, level });
+    }
+    match = regex.exec(content);
+  }
+
+  return headings;
+}
+
+/**
+ * Hook to extract headings from document content
+ */
+export function useHeadings(
+  content: string | null,
+  type: DocumentType | null,
+): Heading[] {
+  return useMemo(() => {
+    if (!content || !type) return [];
+
+    if (type === "markdown") {
+      return parseMarkdownHeadings(content);
+    }
+
+    return parseHtmlHeadings(content);
+  }, [content, type]);
+}

package/src/hooks/useKeybindings.ts

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+  resolveShortcuts,
+  type ShortcutDefinition,
+} from "../lib/shortcut-registry";
+import type { KeybindingOverride, ShortcutBinding } from "../types";
+
+interface UseKeybindingsResult {
+  shortcuts: ShortcutDefinition[];
+  updateBinding: (id: string, binding: ShortcutBinding) => Promise<void>;
+  toggleEnabled: (id: string) => Promise<void>;
+  resetToDefaults: () => Promise<void>;
+  isLoading: boolean;
+}
+
+export function useKeybindings(filePath: string | null): UseKeybindingsResult {
+  const [overrides, setOverrides] = useState<KeybindingOverride[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const filePathRef = useRef(filePath);
+  filePathRef.current = filePath;
+
+  // Fetch keybindings from settings on mount
+  useEffect(() => {
+    if (!filePath) {
+      setIsLoading(false);
+      return;
+    }
+
+    const fetchKeybindings = async () => {
+      try {
+        const query = `?path=${encodeURIComponent(filePath)}`;
+        const response = await fetch(`/api/settings${query}`);
+        if (response.ok) {
+          const settings = await response.json();
+          setOverrides(settings.keybindings ?? []);
+        }
+      } catch (err) {
+        console.error("Failed to fetch keybindings:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchKeybindings();
+  }, [filePath]);
+
+  const persistOverrides = useCallback(
+    async (newOverrides: KeybindingOverride[]) => {
+      try {
+        const fp = filePathRef.current;
+        const query = fp ? `?path=${encodeURIComponent(fp)}` : "";
+        const response = await fetch(`/api/settings${query}`);
+        if (!response.ok) return;
+
+        const currentSettings = await response.json();
+        const updated = { ...currentSettings, keybindings: newOverrides };
+
+        const putResponse = await fetch(`/api/settings${query}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(updated),
+        });
+
+        if (!putResponse.ok) {
+          throw new Error("Failed to save keybindings");
+        }
+      } catch (err) {
+        console.error("Failed to save keybindings:", err);
+        toast.error("Failed to save keybindings");
+      }
+    },
+    [],
+  );
+
+  const updateBinding = useCallback(
+    async (id: string, binding: ShortcutBinding) => {
+      const newOverrides = overrides.filter((o) => o.id !== id);
+      newOverrides.push({ id, binding, enabled: true });
+
+      setOverrides(newOverrides);
+      await persistOverrides(newOverrides);
+    },
+    [overrides, persistOverrides],
+  );
+
+  const toggleEnabled = useCallback(
+    async (id: string) => {
+      const existing = overrides.find((o) => o.id === id);
+      const currentEnabled = existing?.enabled ?? true;
+      const newOverrides = overrides.filter((o) => o.id !== id);
+      newOverrides.push({
+        id,
+        binding: existing?.binding,
+        enabled: !currentEnabled,
+      });
+
+      setOverrides(newOverrides);
+      await persistOverrides(newOverrides);
+    },
+    [overrides, persistOverrides],
+  );
+
+  const resetToDefaults = useCallback(async () => {
+    setOverrides([]);
+    await persistOverrides([]);
+    toast.success("Keyboard shortcuts reset to defaults");
+  }, [persistOverrides]);
+
+  const shortcuts = resolveShortcuts(overrides);
+
+  return {
+    shortcuts,
+    updateBinding,
+    toggleEnabled,
+    resetToDefaults,
+    isLoading,
+  };
+}

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+import {
+  matchesBinding,
+  type ShortcutAction,
+  type ShortcutDefinition,
+} from "../lib/shortcut-registry";
+
+type ActionMap = Partial<Record<ShortcutAction, () => void>>;
+
+/**
+ * Returns true if the event target is an input element where
+ * keyboard shortcuts should be suppressed.
+ */
+function isInputFocused(event: KeyboardEvent): boolean {
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return false;
+
+  const tagName = target.tagName;
+  if (tagName === "INPUT" || tagName === "TEXTAREA") return true;
+  if (target.isContentEditable) return true;
+
+  return false;
+}
+
+/**
+ * Single centralized keyboard shortcut listener.
+ * Replaces all scattered useEffect keydown handlers.
+ *
+ * @param shortcuts - Resolved shortcut definitions (from useKeybindings)
+ * @param actions - Map of shortcut ID to callback function
+ */
+export function useKeyboardShortcuts(
+  shortcuts: ShortcutDefinition[],
+  actions: ActionMap,
+): void {
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+
+  const shortcutsRef = useRef(shortcuts);
+  shortcutsRef.current = shortcuts;
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isInputFocused(event)) return;
+
+      for (const shortcut of shortcutsRef.current) {
+        if (!shortcut.enabled) continue;
+
+        if (matchesBinding(event, shortcut.binding)) {
+          const action = actionsRef.current[shortcut.id];
+          if (action) {
+            event.preventDefault();
+            action();
+          }
+          return;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+}

package/src/hooks/useLayoutMode.ts

@@ -0,0 +1,44 @@
+import { useCallback, useState } from "react";
+import { type LayoutMode, LayoutModes } from "../types";
+
+const STORAGE_KEY = "readit:layout-mode";
+
+interface UseLayoutModeResult {
+  layoutMode: LayoutMode;
+  toggleLayoutMode: () => void;
+  isFullscreen: boolean;
+}
+
+export function useLayoutMode(): UseLayoutModeResult {
+  const [layoutMode, setLayoutMode] = useState<LayoutMode>(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored === LayoutModes.FULLSCREEN
+        ? LayoutModes.FULLSCREEN
+        : LayoutModes.CENTERED;
+    } catch {
+      return LayoutModes.CENTERED;
+    }
+  });
+
+  const toggleLayoutMode = useCallback(() => {
+    setLayoutMode((prev) => {
+      const next =
+        prev === LayoutModes.CENTERED
+          ? LayoutModes.FULLSCREEN
+          : LayoutModes.CENTERED;
+      try {
+        localStorage.setItem(STORAGE_KEY, next);
+      } catch {
+        // localStorage may be unavailable
+      }
+      return next;
+    });
+  }, []);
+
+  return {
+    layoutMode,
+    toggleLayoutMode,
+    isFullscreen: layoutMode === LayoutModes.FULLSCREEN,
+  };
+}

package/src/hooks/useReanchorMode.ts

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+import { appStore, useAppStore } from "../store";
+
+interface UseReanchorModeResult {
+  reanchorTarget: { commentId: string } | null;
+  startReanchor: (commentId: string) => void;
+  cancelReanchor: () => void;
+}
+
+/**
+ * Hook for managing re-anchor mode state.
+ * When active, the user can select new text to re-anchor an unresolved comment.
+ * State lives in the Zustand store for tab-switch preservation.
+ */
+export function useReanchorMode(): UseReanchorModeResult {
+  const reanchorTarget = useAppStore(
+    (s) => s.getActiveDocumentState()?.reanchorTarget ?? null,
+  );
+
+  const startReanchor = useCallback((commentId: string) => {
+    appStore.getState().setReanchorTarget({ commentId });
+  }, []);
+
+  const cancelReanchor = useCallback(() => {
+    appStore.getState().setReanchorTarget(null);
+  }, []);
+
+  return {
+    reanchorTarget,
+    startReanchor,
+    cancelReanchor,
+  };
+}

package/src/hooks/useScrollMetrics.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from "react";
+
+interface ScrollMetrics {
+  documentHeight: number;
+  viewportHeight: number;
+  scrollTop: number;
+}
+
+/**
+ * Track document scroll and viewport dimensions for minimap calculations.
+ * Updates are throttled to once per animation frame to prevent scroll jank.
+ */
+export function useScrollMetrics(): ScrollMetrics {
+  const [metrics, setMetrics] = useState<ScrollMetrics>({
+    documentHeight: 0,
+    viewportHeight: 0,
+    scrollTop: 0,
+  });
+
+  const rafIdRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const updateMetrics = () => {
+      setMetrics({
+        documentHeight: document.body.scrollHeight,
+        viewportHeight: window.innerHeight,
+        scrollTop: window.scrollY,
+      });
+    };
+
+    // Throttle scroll updates to once per animation frame
+    const handleScroll = () => {
+      if (rafIdRef.current !== null) return;
+      rafIdRef.current = requestAnimationFrame(() => {
+        updateMetrics();
+        rafIdRef.current = null;
+      });
+    };
+
+    // Initial measurement
+    updateMetrics();
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", updateMetrics);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", updateMetrics);
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+      }
+    };
+  }, []);
+
+  return metrics;
+}