@peaske7/readit 0.1.8 → 0.2.0

package/src/hooks/useHeadings.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { slugify } from "../lib/utils";
-import type { DocumentType } from "../types";
 
 export interface Heading {
   id: string;
@@ -8,29 +7,17 @@ export interface Heading {
   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)
+  // Only remove indented blocks preceded by a blank line (avoids 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;
@@ -51,79 +38,9 @@ function parseMarkdownHeadings(content: string): Heading[] {
   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[] {
+export function useHeadings(content: string | null): Heading[] {
   return useMemo(() => {
-    if (!content || !type) return [];
-
-    if (type === "markdown") {
-      return parseMarkdownHeadings(content);
-    }
-
-    return parseHtmlHeadings(content);
-  }, [content, type]);
+    if (!content) return [];
+    return parseMarkdownHeadings(content);
+  }, [content]);
 }

package/src/hooks/useScrollSpy.ts

@@ -1,21 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 
-/**
- * Hook to track which heading is currently in view
- * Uses IntersectionObserver to detect when headings enter the "active zone"
- */
-export function useScrollSpy(headingIds: string[]): string | null {
+export function useScrollSpy(
+  headingIds: string[],
+  enabled = true,
+): string | null {
   const [activeId, setActiveId] = useState<string | null>(null);
   const hasSetInitialRef = useRef(false);
 
   useEffect(() => {
-    if (headingIds.length === 0) {
-      setActiveId(null);
-      hasSetInitialRef.current = false;
+    if (!enabled || headingIds.length === 0) {
+      if (headingIds.length === 0) {
+        setActiveId(null);
+        hasSetInitialRef.current = false;
+      }
       return;
     }
 
-    // Track visible headings and their positions
     const visibleHeadings = new Map<string, number>();
 
     const observer = new IntersectionObserver(
@@ -24,20 +24,17 @@ export function useScrollSpy(headingIds: string[]): string | null {
           const id = entry.target.id;
 
           if (entry.isIntersecting) {
-            // Store the top position when heading becomes visible
             visibleHeadings.set(id, entry.boundingClientRect.top);
           } else {
             visibleHeadings.delete(id);
           }
         }
 
-        // Find the heading closest to the top of the viewport
         if (visibleHeadings.size > 0) {
           let closestId: string | null = null;
           let closestDistance = Number.POSITIVE_INFINITY;
 
           for (const [id, top] of visibleHeadings) {
-            // Prefer headings that are near the top but still visible
             const distance = Math.abs(top);
             if (distance < closestDistance) {
               closestDistance = distance;
@@ -64,7 +61,6 @@ export function useScrollSpy(headingIds: string[]): string | null {
       hasSetInitialRef.current = true;
     }
 
-    // Observe all headings
     for (const id of headingIds) {
       const element = document.getElementById(id);
       if (element) {
@@ -75,7 +71,7 @@ export function useScrollSpy(headingIds: string[]): string | null {
     return () => {
       observer.disconnect();
     };
-  }, [headingIds]);
+  }, [headingIds, enabled]);
 
   return activeId;
 }

package/src/hooks/useTextSelection.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
+import type { Selection } from "../schema";
 import { appStore, useAppStore } from "../store";
-import type { Selection } from "../types";
 
 /** Remove pending highlight marks from the DOM without triggering a full clear/reapply cycle. */
 function clearPendingMarks() {
@@ -14,8 +14,6 @@ function clearPendingMarks() {
 
 interface UseTextSelectionResult {
   selection: Selection | null;
-  highlightPositions: Record<string, number>;
-  documentPositions: Record<string, number>;
   pendingSelectionTop: number | undefined;
   onTextSelect: (
     text: string,
@@ -23,28 +21,13 @@ interface UseTextSelectionResult {
     endOffset: number,
     selectionTop: number,
   ) => void;
-  onPositionsChange: (
-    positions: Record<string, number>,
-    docPositions: Record<string, number>,
-    pendingTop?: number,
-  ) => void;
   clearSelection: () => void;
 }
 
-/**
- * Manage text selection state, highlight positions, and click-outside dismissal.
- * State lives in the Zustand store for tab-switch preservation.
- */
 export function useTextSelection(): UseTextSelectionResult {
   const selection = useAppStore(
     (s) => s.getActiveDocumentState()?.selection ?? null,
   );
-  const highlightPositions = useAppStore(
-    (s) => s.getActiveDocumentState()?.highlightPositions ?? {},
-  );
-  const documentPositions = useAppStore(
-    (s) => s.getActiveDocumentState()?.documentPositions ?? {},
-  );
   const pendingSelectionTop = useAppStore(
     (s) => s.getActiveDocumentState()?.pendingSelectionTop,
   );
@@ -54,15 +37,10 @@ export function useTextSelection(): UseTextSelectionResult {
 
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-
-      // Don't clear if clicking inside the comment input area
       if (target.closest("[data-comment-input]")) return;
-
-      // Don't clear if clicking on any highlight (pending or comment)
       if (target.closest("mark[data-pending]")) return;
       if (target.closest("mark[data-comment-id]")) return;
 
-      // Clear selection state and pending marks
       appStore.getState().setSelection(null);
       appStore.getState().setPendingSelectionTop(undefined);
       clearPendingMarks();
@@ -92,18 +70,6 @@ export function useTextSelection(): UseTextSelectionResult {
     [],
   );
 
-  const onPositionsChange = useCallback(
-    (
-      positions: Record<string, number>,
-      docPositions: Record<string, number>,
-      _pendingTop?: number,
-    ) => {
-      appStore.getState().setHighlightPositions(positions);
-      appStore.getState().setDocumentPositions(docPositions);
-    },
-    [],
-  );
-
   const clearSelection = useCallback(() => {
     appStore.getState().setSelection(null);
     appStore.getState().setPendingSelectionTop(undefined);
@@ -113,11 +79,8 @@ export function useTextSelection(): UseTextSelectionResult {
 
   return {
     selection,
-    highlightPositions,
-    documentPositions,
     pendingSelectionTop,
     onTextSelect,
-    onPositionsChange,
     clearSelection,
   };
 }

package/src/lib/__fixtures__/bench-data.ts

@@ -1,4 +1,4 @@
-import type { Comment, CommentFile } from "../../types";
+import type { Comment, CommentFile } from "../../schema";
 import { serializeComments } from "../comment-storage";
 
 // --- Document fixtures ---
@@ -125,43 +125,3 @@ export const COMMENT_FILE_OBJ_LARGE = makeCommentFile(COMMENTS_50);
 export const COMMENT_FILE_SMALL = serializeComments(COMMENT_FILE_OBJ_SMALL);
 export const COMMENT_FILE_MEDIUM = serializeComments(COMMENT_FILE_OBJ_MEDIUM);
 export const COMMENT_FILE_LARGE = serializeComments(COMMENT_FILE_OBJ_LARGE);
-
-// --- Highlight position fixtures ---
-
-export function makeHighlightPositions(count: number): Record<string, number> {
-  const positions: Record<string, number> = {};
-  for (let i = 0; i < count; i++) {
-    // ~200px spacing with clustering every 3rd note for overlap scenarios
-    positions[`c${i}`] = i * 200 + (i % 3 === 0 ? 50 : 0);
-  }
-  return positions;
-}
-
-// --- HTML fixture ---
-
-function generateHtmlDoc(): string {
-  const parts: string[] = [
-    "<!DOCTYPE html>",
-    "<html><head>",
-    "<style>.main { color: red; font-size: 16px; }</style>",
-    "<script>console.log('test script');</script>",
-    "</head><body>",
-  ];
-
-  for (let i = 0; i < 30; i++) {
-    parts.push(`<section id="s${i}">`);
-    parts.push(`<h2>Section ${i}</h2>`);
-    parts.push(
-      `<p>Paragraph with &amp; entities &lt;and&gt; special &quot;chars&quot; in section ${i}.</p>`,
-    );
-    parts.push(
-      `<ul><li>Item ${i}.1</li><li>Item ${i}.2</li><li>Item ${i}.3</li></ul>`,
-    );
-    parts.push("</section>");
-  }
-
-  parts.push("</body></html>");
-  return parts.join("\n");
-}
-
-export const HTML_DOC = generateHtmlDoc();

package/src/lib/anchor.bench.ts

@@ -1,112 +1,102 @@
 import { bench, describe } from "vitest";
-import { LARGE_DOC } from "./__fixtures__/bench-data";
+import {
+  COMMENTS_1,
+  COMMENTS_10,
+  COMMENTS_50,
+  LARGE_DOC,
+  MEDIUM_DOC,
+} from "./__fixtures__/bench-data";
 import {
   findAnchor,
   findAnchorFuzzy,
   findAnchorNormalized,
   findAnchorWithFallback,
-  levenshteinDistance,
 } from "./anchor";
 
-// Text known to exist at specific lines in LARGE_DOC
-const EXACT_TEXT_L149 =
-  "The conclusion of section 8 summarizes the key findings";
-const EXACT_TEXT_L250 = "- Item 1 in section 14";
-const WHITESPACE_TEXT = "Item 1  in\n  section 14";
-const FUZZY_TEXT = "- Item 1 in section 1x"; // 1-char typo
-
-describe("levenshteinDistance", () => {
-  const str20 = "hello world testing!";
-
-  bench("identical strings (20 chars)", () => {
-    levenshteinDistance(str20, str20);
-  });
+// --- Exact match (best case) ---
 
-  bench("1 edit distance (20 chars)", () => {
-    levenshteinDistance("hello world testing!", "hello world testinx!");
-  });
-
-  bench("maxDistance early exit", () => {
-    levenshteinDistance("completely different", "nothing alike here!", 3);
-  });
+describe("findAnchor — exact match", () => {
+  const comment = COMMENTS_10[5];
 
-  const longA = "a".repeat(50) + "b".repeat(50);
-  const longB = "a".repeat(50) + "c".repeat(50);
-
-  bench("longer strings (100 chars)", () => {
-    levenshteinDistance(longA, longB);
-  });
-});
-
-describe("findAnchor (exact)", () => {
-  bench("300-line doc, correct hint", () => {
+  bench("medium doc (150 lines)", () => {
     findAnchor({
-      source: LARGE_DOC,
-      selectedText: EXACT_TEXT_L149,
-      lineHint: "L149",
+      source: MEDIUM_DOC,
+      selectedText: comment.selectedText,
+      lineHint: comment.lineHint ?? "L1",
     });
   });
 
-  bench("300-line doc, wrong hint (global fallback)", () => {
+  bench("large doc (300 lines)", () => {
     findAnchor({
       source: LARGE_DOC,
-      selectedText: EXACT_TEXT_L250,
-      lineHint: "L10",
+      selectedText: comment.selectedText,
+      lineHint: comment.lineHint ?? "L1",
     });
   });
 });
 
+// --- Normalized match ---
+
 describe("findAnchorNormalized", () => {
-  bench("300-line doc, whitespace-collapsed match", () => {
+  // Create text with extra whitespace to force normalization path
+  const comment = COMMENTS_10[5];
+  const normalizedText = comment.selectedText.replace(/ /g, "  ");
+
+  bench("large doc — normalized whitespace", () => {
     findAnchorNormalized({
       source: LARGE_DOC,
-      selectedText: WHITESPACE_TEXT,
-      lineHint: "L250",
+      selectedText: normalizedText,
+      lineHint: comment.lineHint ?? "L1",
     });
   });
 });
 
+// --- Fuzzy match (worst case) ---
+
 describe("findAnchorFuzzy", () => {
-  bench("300-line doc, 1-char typo with hint", () => {
-    findAnchorFuzzy({
-      source: LARGE_DOC,
-      selectedText: FUZZY_TEXT,
-      lineHint: "L250",
-      threshold: 3,
-    });
-  });
+  // Slightly mutate text to force Levenshtein search
+  const comment = COMMENTS_10[5];
+  const mutated =
+    "X" + comment.selectedText.slice(1, -1) + "Z";
 
-  bench("300-line doc, no hint (full scan)", () => {
+  bench("large doc — fuzzy (mutated text)", () => {
     findAnchorFuzzy({
       source: LARGE_DOC,
-      selectedText: FUZZY_TEXT,
-      threshold: 3,
+      selectedText: mutated.slice(0, 50), // Keep within MAX_FUZZY_TEXT_LENGTH
+      lineHint: comment.lineHint ?? "L1",
     });
   });
 });
 
+// --- Full fallback chain ---
+
 describe("findAnchorWithFallback", () => {
-  bench("exact match (fast path)", () => {
+  bench("1 comment — exact hit", () => {
+    const c = COMMENTS_1[0];
     findAnchorWithFallback({
       source: LARGE_DOC,
-      selectedText: EXACT_TEXT_L149,
-      lineHint: "L149",
+      selectedText: c.selectedText,
+      lineHint: c.lineHint ?? "L1",
     });
   });
 
-  bench("normalized fallback", () => {
-    findAnchorWithFallback({
-      source: LARGE_DOC,
-      selectedText: WHITESPACE_TEXT,
-      lineHint: "L250",
-    });
+  bench("10 comments — exact hits", () => {
+    for (const c of COMMENTS_10) {
+      findAnchorWithFallback({
+        source: LARGE_DOC,
+        selectedText: c.selectedText,
+        lineHint: c.lineHint ?? "L1",
+      });
+    }
   });
 
-  bench("fuzzy fallback", () => {
-    findAnchorWithFallback({
-      source: LARGE_DOC,
-      selectedText: FUZZY_TEXT,
-      lineHint: "L250",
-    });
+  bench("50 comments — exact hits", () => {
+    for (const c of COMMENTS_50) {
+      findAnchorWithFallback({
+        source: LARGE_DOC,
+        selectedText: c.selectedText,
+        lineHint: c.lineHint ?? "L1",
+      });
+    }
   });
 });

package/src/lib/anchor.test.ts

@@ -135,8 +135,12 @@ describe("parseLineHint", () => {
   });
 
   it("parses line range hint", () => {
+    expect(parseLineHint("L42-L45")).toEqual({ start: 42, end: 45 });
+    expect(parseLineHint("L10-L20")).toEqual({ start: 10, end: 20 });
+  });
+
+  it("parses legacy format without L prefix on end line", () => {
     expect(parseLineHint("L42-45")).toEqual({ start: 42, end: 45 });
-    expect(parseLineHint("L10-20")).toEqual({ start: 10, end: 20 });
   });
 
   it("returns default for invalid hint", () => {