@peaske7/readit 0.2.0 → 0.2.1

package/src/lib/highlight/highlighter.ts

@@ -1,12 +1,11 @@
 import {
-  applyHighlightBatch,
-  applyHighlightToRange,
-  clearHighlights,
-  getDOMTextContent,
+  collectTextNodesWithContent,
+  createRangesForHighlight,
+  createRangesFromNodes,
   getTextOffset,
 } from "./dom";
-import { Resolver } from "./resolver";
-import type { HighlightComment } from "./types";
+import { HighlightRegistry } from "./highlight-registry";
+import type { HighlightComment, TextNodeInfo } from "./types";
 
 export type SelectionHandler = (
   text: string,
@@ -16,11 +15,22 @@ export type SelectionHandler = (
 ) => void;
 export type HoverHandler = (commentId: string | undefined) => void;
 export type ClickHandler = (commentId: string) => void;
+export type CacheHandler = () => void;
+
 export interface Highlighter {
   applyHighlights(comments: HighlightComment[]): void;
   clearHighlights(): void;
   onHighlightHover(callback: HoverHandler): () => void;
   onHighlightClick(callback: ClickHandler): () => void;
+
+  setFocused(commentId: string | undefined): void;
+  scrollToComment(commentId: string): void;
+  getPositions(containerRect: DOMRect): Map<string, number>;
+  getHighlightedIds(): string[];
+  isPointInHighlight(x: number, y: number): boolean;
+
+  onCacheInvalidated(callback: CacheHandler): () => void;
+
   dispose(): void;
 }
 
@@ -35,14 +45,14 @@ export function createHighlighter(options: HighlighterOptions): Highlighter {
 
   let hoverCallback: HoverHandler | undefined;
   let clickCallback: ClickHandler | undefined;
+  let cacheCallback: CacheHandler | undefined;
 
-  // Incremental diffing state — avoids full clear+rebuild on every comment change
-  const activeHighlights = new Map<string, { start: number; end: number }>();
+  const activePositions = new Map<string, { start: number; end: number }>();
   let lastTextContent = "";
 
-  // Web Worker for anchor resolution (offloads indexOf from main thread)
-  const resolver = new Resolver();
-  let resolveGeneration = 0;
+  const registry = new HighlightRegistry();
+
+  let lastHoveredId: string | undefined;
 
   const handleMouseUp = () => {
     const selection = window.getSelection();
@@ -56,7 +66,7 @@ export function createHighlighter(options: HighlighterOptions): Highlighter {
 
     const range = selection.getRangeAt(0);
 
-    // Reject erroneous whole-document selections (caused by DOM mutation during interaction)
+    // Reject whole-document selections caused by DOM mutation
     if (
       range.startContainer === root &&
       range.startOffset === 0 &&
@@ -79,164 +89,107 @@ export function createHighlighter(options: HighlighterOptions): Highlighter {
 
     onSelect(text, startOffset, endOffset, selectionTop);
 
-    // Apply pending highlight directly (not through applyHighlights cycle)
-    // so it persists when native ::selection clears on textarea focus
-    clearHighlights(root, "mark[data-pending]");
-    applyHighlightToRange(root, startOffset, endOffset, {
-      attribute: "data-pending",
-      attributeValue: "true",
+    requestAnimationFrame(() => {
+      const pendingRanges = createRangesForHighlight(
+        root,
+        startOffset,
+        endOffset,
+      );
+      registry.setPending(pendingRanges);
     });
   };
 
-  const handleMouseOver = (e: Event) => {
+  const handleMouseMove = (e: MouseEvent) => {
     if (!hoverCallback) return;
-    const target = e.target as HTMLElement;
-    const mark = target.closest("mark[data-comment-id]");
-    if (mark) {
-      hoverCallback(mark.getAttribute("data-comment-id") ?? undefined);
-    }
-  };
 
-  const handleMouseOut = (e: Event) => {
-    if (!hoverCallback) return;
-    const target = e.target as HTMLElement;
-    const relatedTarget = (e as MouseEvent).relatedTarget as HTMLElement | null;
-    const mark = target.closest("mark[data-comment-id]");
-    if (mark) {
-      const relatedMark = relatedTarget?.closest("mark[data-comment-id]");
-      if (
-        !relatedMark ||
-        relatedMark.getAttribute("data-comment-id") !==
-          mark.getAttribute("data-comment-id")
-      ) {
-        hoverCallback(undefined);
-      }
+    const id = registry.hitTest(e.clientX, e.clientY);
+
+    if (id !== lastHoveredId) {
+      lastHoveredId = id;
+      hoverCallback(id);
     }
   };
 
-  const handleClick = (e: Event) => {
+  const handleClick = (e: MouseEvent) => {
     if (!clickCallback) return;
-    const target = e.target as HTMLElement;
-    const mark = target.closest("mark[data-comment-id]");
-    if (mark) {
-      const commentId = mark.getAttribute("data-comment-id");
-      if (commentId) {
-        clickCallback(commentId);
-      }
+
+    const commentId = registry.hitTest(e.clientX, e.clientY);
+    if (commentId) {
+      clickCallback(commentId);
     }
   };
 
   const applyDiff = (
-    textContent: string,
-    resolved: Map<
-      string,
-      { start: number; end: number; comment: HighlightComment }
-    >,
+    resolved: Map<string, { start: number; end: number; colorIndex: number }>,
+    textNodes: TextNodeInfo[],
   ) => {
-    const toRemove: string[] = [];
-    const toAdd: string[] = [];
+    let changed = false;
 
-    for (const [id, prev] of activeHighlights) {
+    for (const [id, prev] of activePositions) {
       const next = resolved.get(id);
-      if (!next) {
-        toRemove.push(id);
-      } else if (prev.start !== next.start || prev.end !== next.end) {
-        toRemove.push(id);
-        toAdd.push(id);
+      if (!next || prev.start !== next.start || prev.end !== next.end) {
+        registry.removeComment(id);
+        activePositions.delete(id);
+        changed = true;
       }
     }
 
-    for (const id of resolved.keys()) {
-      if (!activeHighlights.has(id)) {
-        toAdd.push(id);
+    for (const [id, entry] of resolved) {
+      if (!activePositions.has(id)) {
+        const ranges = createRangesFromNodes(textNodes, entry.start, entry.end);
+        if (ranges.length > 0) {
+          registry.updateComment(id, ranges, entry.colorIndex);
+          activePositions.set(id, { start: entry.start, end: entry.end });
+          changed = true;
+        }
       }
     }
 
-    if (toRemove.length === 0 && toAdd.length === 0) return;
-
-    for (const id of toRemove) {
-      clearHighlights(root, `mark[data-comment-id="${id}"]`);
-      activeHighlights.delete(id);
-    }
-
-    if (toAdd.length > 0) {
-      const newHighlights = toAdd
-        .map((id) => resolved.get(id)!)
-        .sort((a, b) => a.start - b.start);
-
-      applyHighlightBatch(
-        root,
-        textContent,
-        newHighlights.map((h) => ({
-          startOffset: h.start,
-          endOffset: h.end,
-          style: {
-            attribute: "data-comment-id",
-            attributeValue: h.comment.id,
-            colorIndex: 0,
-          },
-        })),
-      );
-
-      for (const id of toAdd) {
-        const range = resolved.get(id)!;
-        activeHighlights.set(id, { start: range.start, end: range.end });
-      }
+    if (changed) {
+      cacheCallback?.();
     }
   };
 
   root.addEventListener("mouseup", handleMouseUp);
-  root.addEventListener("mouseover", handleMouseOver);
-  root.addEventListener("mouseout", handleMouseOut);
+  root.addEventListener("mousemove", handleMouseMove);
   root.addEventListener("click", handleClick);
 
   return {
     applyHighlights(comments: HighlightComment[]) {
-      const textContent = getDOMTextContent(root);
+      const { text: textContent, nodes: textNodes } =
+        collectTextNodesWithContent(root);
 
-      // If DOM content changed (e.g. document reload), full rebuild is required
       const contentChanged = textContent !== lastTextContent;
       if (contentChanged) {
-        clearHighlights(root);
-        activeHighlights.clear();
+        registry.clearAll();
+        activePositions.clear();
         lastTextContent = textContent;
       }
 
-      // Bump generation so stale Worker responses are discarded
-      const generation = ++resolveGeneration;
-
-      // Resolve anchors off the main thread, then diff and apply
-      resolver.resolve(textContent, comments).then((anchorMap) => {
-        // Discard if a newer applyHighlights call has started
-        if (generation !== resolveGeneration) return;
-
-        const resolved = new Map<
-          string,
-          { start: number; end: number; comment: HighlightComment }
-        >();
-        for (const c of comments) {
-          const anchor = anchorMap.get(c.id);
-          if (anchor) {
-            resolved.set(c.id, {
-              start: anchor.start,
-              end: anchor.end,
-              comment: {
-                ...c,
-                startOffset: anchor.start,
-                endOffset: anchor.end,
-              },
-            });
-          }
+      const resolved = new Map<
+        string,
+        { start: number; end: number; colorIndex: number }
+      >();
+      let colorIdx = 0;
+      for (const c of comments) {
+        if (c.startOffset >= 0 && c.endOffset > c.startOffset) {
+          resolved.set(c.id, {
+            start: c.startOffset,
+            end: c.endOffset,
+            colorIndex: colorIdx % 4,
+          });
+          colorIdx++;
         }
+      }
 
-        applyDiff(textContent, resolved);
-      });
+      applyDiff(resolved, textNodes);
     },
 
     clearHighlights() {
-      clearHighlights(root);
-      activeHighlights.clear();
+      registry.clearAll();
+      activePositions.clear();
       lastTextContent = "";
+      cacheCallback?.();
     },
 
     onHighlightHover(callback: HoverHandler) {
@@ -253,15 +206,42 @@ export function createHighlighter(options: HighlighterOptions): Highlighter {
       };
     },
 
+    setFocused(commentId: string | undefined) {
+      registry.setFocused(commentId);
+    },
+
+    scrollToComment(commentId: string) {
+      registry.scrollToComment(commentId);
+    },
+
+    getPositions(containerRect: DOMRect): Map<string, number> {
+      return registry.getPositions(containerRect);
+    },
+
+    getHighlightedIds(): string[] {
+      return registry.getHighlightedIds();
+    },
+
+    isPointInHighlight(x: number, y: number): boolean {
+      return registry.isPointInHighlight(x, y);
+    },
+
+    onCacheInvalidated(callback: CacheHandler) {
+      cacheCallback = callback;
+      return () => {
+        cacheCallback = undefined;
+      };
+    },
+
     dispose() {
-      resolveGeneration++;
-      resolver.dispose();
+      registry.dispose();
       root.removeEventListener("mouseup", handleMouseUp);
-      root.removeEventListener("mouseover", handleMouseOver);
-      root.removeEventListener("mouseout", handleMouseOut);
+      root.removeEventListener("mousemove", handleMouseMove);
       root.removeEventListener("click", handleClick);
       hoverCallback = undefined;
       clickCallback = undefined;
+      cacheCallback = undefined;
+      lastHoveredId = undefined;
     },
   };
 }

package/src/lib/highlight/resolver.ts

@@ -1,4 +1,4 @@
-import type { HighlightComment, TextPosition } from "./types";
+import type { TextPosition } from "./types";
 
 export function findTextPosition(
   textContent: string,
@@ -18,7 +18,10 @@ export function findTextPosition(
 
   if (occurrences.length === 0) return undefined;
   if (occurrences.length === 1) {
-    return { start: occurrences[0], end: occurrences[0] + selectedText.length };
+    return {
+      start: occurrences[0],
+      end: occurrences[0] + selectedText.length,
+    };
   }
 
   const target = hintOffset ?? 0;
@@ -33,80 +36,3 @@ export function findTextPosition(
   }
   return { start: closest, end: closest + selectedText.length };
 }
-
-export class Resolver {
-  private worker: Worker | null = null;
-  private seq = 0;
-  private pending = new Map<
-    number,
-    (results: Map<string, TextPosition>) => void
-  >();
-
-  constructor() {
-    try {
-      this.worker = new Worker(new URL("./worker.ts", import.meta.url), {
-        type: "module",
-      });
-      this.worker.onmessage = this.onMessage;
-      this.worker.onerror = () => {
-        this.worker?.terminate();
-        this.worker = null;
-      };
-    } catch {
-      this.worker = null;
-    }
-  }
-
-  resolve(
-    text: string,
-    comments: HighlightComment[],
-  ): Promise<Map<string, TextPosition>> {
-    if (!this.worker || comments.length === 0) {
-      return Promise.resolve(this.sync(text, comments));
-    }
-
-    return new Promise((resolve) => {
-      const id = this.seq++;
-      this.pending.set(id, resolve);
-      this.worker!.postMessage({
-        id,
-        textContent: text,
-        comments: comments.map((c) => ({
-          id: c.id,
-          selectedText: c.selectedText,
-          startOffset: c.startOffset,
-        })),
-      });
-    });
-  }
-
-  dispose() {
-    this.worker?.terminate();
-    this.worker = null;
-    for (const resolve of this.pending.values()) resolve(new Map());
-    this.pending.clear();
-  }
-
-  private onMessage = (e: MessageEvent) => {
-    const { id, results } = e.data;
-    const resolve = this.pending.get(id);
-    if (!resolve) return;
-
-    this.pending.delete(id);
-    const map = new Map<string, TextPosition>();
-    for (const r of results) map.set(r.id, { start: r.start, end: r.end });
-    resolve(map);
-  };
-
-  private sync(
-    text: string,
-    comments: HighlightComment[],
-  ): Map<string, TextPosition> {
-    const map = new Map<string, TextPosition>();
-    for (const c of comments) {
-      const pos = findTextPosition(text, c.selectedText, c.startOffset);
-      if (pos) map.set(c.id, pos);
-    }
-    return map;
-  }
-}

package/src/lib/highlight/types.ts

@@ -1,8 +1,3 @@
-export interface HighlightStyle {
-  attribute: string;
-  attributeValue: string;
-}
-
 export interface TextPosition {
   start: number;
   end: number;

package/src/lib/html-text.test.ts

@@ -0,0 +1,162 @@
+import { JSDOM } from "jsdom";
+import { describe, expect, it } from "vitest";
+import { getDOMTextContent } from "./highlight/dom";
+import { extractTextFromHtml } from "./html-text";
+import { renderMarkdown } from "./markdown-renderer";
+
+const DOM_GLOBALS = ["document", "NodeFilter"] as const;
+
+function browserExtract(html: string): string {
+  const dom = new JSDOM(
+    `<!DOCTYPE html><body><article>${html}</article></body>`,
+  );
+  const saved = Object.fromEntries(
+    DOM_GLOBALS.map((k) => [k, (globalThis as Record<string, unknown>)[k]]),
+  );
+  try {
+    for (const k of DOM_GLOBALS) {
+      (globalThis as Record<string, unknown>)[k] = dom.window[k];
+    }
+    const container = dom.window.document.querySelector("article")!;
+    return getDOMTextContent(container);
+  } finally {
+    for (const k of DOM_GLOBALS) {
+      if (saved[k] !== undefined) {
+        (globalThis as Record<string, unknown>)[k] = saved[k];
+      } else {
+        delete (globalThis as Record<string, unknown>)[k];
+      }
+    }
+  }
+}
+
+describe("extractTextFromHtml", () => {
+  it("extracts plain text from paragraphs", () => {
+    const html = "<p>Hello world</p><p>Second paragraph</p>";
+    expect(extractTextFromHtml(html)).toBe("Hello world\nSecond paragraph");
+  });
+
+  it("handles headings", () => {
+    const html = "<h1>Title</h1><p>Content</p>";
+    expect(extractTextFromHtml(html)).toBe("Title\nContent");
+  });
+
+  it("handles nested block elements (no extra newline)", () => {
+    const html = "<blockquote><p>Quoted text</p></blockquote><p>After</p>";
+    const result = extractTextFromHtml(html);
+    expect(result).toContain("Quoted text");
+    expect(result).toContain("After");
+  });
+
+  it("handles lists", () => {
+    const html = "<ul><li>Item 1</li><li>Item 2</li></ul>";
+    expect(extractTextFromHtml(html)).toBe("Item 1\nItem 2");
+  });
+
+  it("handles inline elements within blocks", () => {
+    const html = "<p>Text with <strong>bold</strong> and <em>italic</em></p>";
+    expect(extractTextFromHtml(html)).toBe("Text with bold and italic");
+  });
+
+  it("decodes HTML entities", () => {
+    const html = "<p>&lt;div&gt; &amp; &quot;quotes&quot;</p>";
+    expect(extractTextFromHtml(html)).toBe('<div> & "quotes"');
+  });
+
+  it("handles code blocks", () => {
+    const html =
+      '<pre><code>function hello() {\n  return "world";\n}</code></pre>';
+    expect(extractTextFromHtml(html)).toContain("function hello()");
+  });
+});
+
+describe("extractTextFromHtml conformance with getDOMTextContent", () => {
+  it("matches browser extraction for simple markdown", async () => {
+    const md = `# Hello
+
+This is a paragraph.
+
+## Section
+
+Another paragraph here.
+`;
+    const { html } = await renderMarkdown(md);
+    const serverText = extractTextFromHtml(html);
+    const browserText = browserExtract(html);
+    expect(serverText).toBe(browserText);
+  });
+
+  it("matches browser extraction for lists", async () => {
+    const md = `- Item 1
+- Item 2
+- Item 3
+`;
+    const { html } = await renderMarkdown(md);
+    const serverText = extractTextFromHtml(html);
+    const browserText = browserExtract(html);
+    expect(serverText).toBe(browserText);
+  });
+
+  it("matches browser extraction for code blocks", async () => {
+    const md = `# Code
+
+\`\`\`typescript
+function hello() {
+  return "world";
+}
+\`\`\`
+
+After code.
+`;
+    const { html } = await renderMarkdown(md);
+    const serverText = extractTextFromHtml(html);
+    const browserText = browserExtract(html);
+    expect(serverText).toBe(browserText);
+  });
+
+  it("matches browser extraction for tables", async () => {
+    const md = `| A | B |
+|---|---|
+| 1 | 2 |
+| 3 | 4 |
+`;
+    const { html } = await renderMarkdown(md);
+    const serverText = extractTextFromHtml(html);
+    const browserText = browserExtract(html);
+    expect(serverText).toBe(browserText);
+  });
+
+  it("matches browser extraction for complex document", async () => {
+    const md = `# Performance Test Document
+
+This section covers topic 1 in detail. It contains various formatting including **bold**, *italic*, and \`inline code\`.
+
+## Section 2
+
+- Item 1 in section 2
+- Item 2 in section 2
+- Item 3 in section 2
+
+\`\`\`typescript
+function section2() {
+  const value = 2 * 42;
+  return "result from section 2: " + value;
+}
+\`\`\`
+
+The conclusion of section 2 summarizes the key findings.
+
+| Column A | Column B | Column C |
+|----------|----------|----------|
+| Cell 1 | Cell 2 | Cell 3 |
+
+> A blockquote with some text.
+
+Final paragraph.
+`;
+    const { html } = await renderMarkdown(md);
+    const serverText = extractTextFromHtml(html);
+    const browserText = browserExtract(html);
+    expect(serverText).toBe(browserText);
+  });
+});