@peaske7/readit 0.1.8 → 0.2.1

package/src/lib/highlight/highlight.bench.ts

@@ -0,0 +1,92 @@
+import { bench, describe } from "vitest";
+import {
+  COMMENTS_10,
+  COMMENTS_50,
+  LARGE_DOC,
+  MEDIUM_DOC,
+} from "../__fixtures__/bench-data";
+import {
+  collectTextNodes,
+  collectTextNodesWithContent,
+  createRangesFromNodes,
+} from "./dom";
+import { findTextPosition } from "./resolver";
+
+describe("findTextPosition", () => {
+  const textContent = LARGE_DOC;
+
+  bench("single comment", () => {
+    const c = COMMENTS_10[5];
+    findTextPosition(textContent, c.selectedText, c.startOffset);
+  });
+
+  bench("10 comments", () => {
+    for (const c of COMMENTS_10) {
+      findTextPosition(textContent, c.selectedText, c.startOffset);
+    }
+  });
+
+  bench("50 comments", () => {
+    for (const c of COMMENTS_50) {
+      findTextPosition(textContent, c.selectedText, c.startOffset);
+    }
+  });
+});
+
+function buildDocument(markdown: string): HTMLElement {
+  const root = document.createElement("article");
+  const paragraphs = markdown.split("\n\n");
+  for (const p of paragraphs) {
+    if (!p.trim()) continue;
+    const el = p.startsWith("#")
+      ? document.createElement("h2")
+      : document.createElement("p");
+    el.textContent = p.replace(/^#+\s*/, "");
+    root.appendChild(el);
+  }
+  return root;
+}
+
+describe("collectTextNodes", () => {
+  const mediumRoot = buildDocument(MEDIUM_DOC);
+  const largeRoot = buildDocument(LARGE_DOC);
+
+  bench("medium doc (150 lines)", () => {
+    collectTextNodes(mediumRoot);
+  });
+
+  bench("large doc (300 lines)", () => {
+    collectTextNodes(largeRoot);
+  });
+});
+
+describe("collectTextNodesWithContent (single-pass)", () => {
+  const mediumRoot = buildDocument(MEDIUM_DOC);
+  const largeRoot = buildDocument(LARGE_DOC);
+
+  bench("medium doc (150 lines)", () => {
+    collectTextNodesWithContent(mediumRoot);
+  });
+
+  bench("large doc (300 lines)", () => {
+    collectTextNodesWithContent(largeRoot);
+  });
+});
+
+describe("createRangesFromNodes", () => {
+  bench("10 highlights on medium doc", () => {
+    const nodes = collectTextNodes(buildDocument(MEDIUM_DOC));
+    for (const c of COMMENTS_10) {
+      const pos = findTextPosition(MEDIUM_DOC, c.selectedText, c.startOffset);
+      if (pos) createRangesFromNodes(nodes, pos.start, pos.end);
+    }
+  });
+
+  bench("50 highlights on large doc", () => {
+    const nodes = collectTextNodes(buildDocument(LARGE_DOC));
+    for (const c of COMMENTS_50) {
+      const pos = findTextPosition(LARGE_DOC, c.selectedText, c.startOffset);
+      if (pos) createRangesFromNodes(nodes, pos.start, pos.end);
+    }
+  });
+});

package/src/lib/highlight/highlighter.ts

@@ -1,13 +1,11 @@
-import { findTextPosition } from "./core";
 import {
-  applyHighlightBatch,
-  applyHighlightToRange,
-  clearHighlights,
-  collectHighlightPositions,
-  getDOMTextContent,
+  collectTextNodesWithContent,
+  createRangesForHighlight,
+  createRangesFromNodes,
   getTextOffset,
 } from "./dom";
-import type { HighlightComment, HighlightPositions, TextRange } from "./types";
+import { HighlightRegistry } from "./highlight-registry";
+import type { HighlightComment, TextNodeInfo } from "./types";
 
 export type SelectionHandler = (
   text: string,
@@ -15,53 +13,46 @@ export type SelectionHandler = (
   endOffset: number,
   selectionTop: number,
 ) => void;
-export type PositionChangeHandler = (positions: HighlightPositions) => void;
 export type HoverHandler = (commentId: string | undefined) => void;
 export type ClickHandler = (commentId: string) => void;
-export type ContentHeightHandler = (height: number) => void;
+export type CacheHandler = () => void;
 
 export interface Highlighter {
-  applyHighlights(
-    comments: HighlightComment[],
-    pendingSelection?: TextRange,
-  ): void;
+  applyHighlights(comments: HighlightComment[]): void;
   clearHighlights(): void;
-  getPositions(): HighlightPositions;
-  onPositionsChange(callback: PositionChangeHandler): () => void;
   onHighlightHover(callback: HoverHandler): () => void;
   onHighlightClick(callback: ClickHandler): () => void;
-  onContentHeightChange?(callback: ContentHeightHandler): () => 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;
 }
 
-interface MarkdownOptions {
-  type: "markdown";
+export interface HighlighterOptions {
   root: HTMLElement;
   container: HTMLElement;
   onSelect: SelectionHandler;
 }
 
-interface IframeOptions {
-  type: "iframe";
-  getIframe: () => HTMLIFrameElement | null;
-  onSelect: SelectionHandler;
-}
-
-export type HighlighterOptions = MarkdownOptions | IframeOptions;
-
 export function createHighlighter(options: HighlighterOptions): Highlighter {
-  return options.type === "markdown"
-    ? createMarkdownHighlighter(options)
-    : createIframeHighlighter(options);
-}
-
-function createMarkdownHighlighter(options: MarkdownOptions): Highlighter {
   const { root, container, onSelect } = options;
 
-  let positionCallback: PositionChangeHandler | undefined;
   let hoverCallback: HoverHandler | undefined;
   let clickCallback: ClickHandler | undefined;
-  let scrollRafId: number | null = null;
+  let cacheCallback: CacheHandler | undefined;
+
+  const activePositions = new Map<string, { start: number; end: number }>();
+  let lastTextContent = "";
+
+  const registry = new HighlightRegistry();
+
+  let lastHoveredId: string | undefined;
 
   const handleMouseUp = () => {
     const selection = window.getSelection();
@@ -75,7 +66,7 @@ function createMarkdownHighlighter(options: MarkdownOptions): 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 &&
@@ -98,136 +89,107 @@ function createMarkdownHighlighter(options: MarkdownOptions): 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 id = registry.hitTest(e.clientX, e.clientY);
+
+    if (id !== lastHoveredId) {
+      lastHoveredId = id;
+      hoverCallback(id);
     }
   };
 
-  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 handleClick = (e: MouseEvent) => {
+    if (!clickCallback) return;
+
+    const commentId = registry.hitTest(e.clientX, e.clientY);
+    if (commentId) {
+      clickCallback(commentId);
     }
   };
 
-  const handleClick = (e: Event) => {
-    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 applyDiff = (
+    resolved: Map<string, { start: number; end: number; colorIndex: number }>,
+    textNodes: TextNodeInfo[],
+  ) => {
+    let changed = false;
+
+    for (const [id, prev] of activePositions) {
+      const next = resolved.get(id);
+      if (!next || prev.start !== next.start || prev.end !== next.end) {
+        registry.removeComment(id);
+        activePositions.delete(id);
+        changed = true;
       }
     }
-  };
 
-  const updatePositions = () => {
-    if (!positionCallback) return;
-    const containerRect = container.getBoundingClientRect();
-    const positions = collectHighlightPositions(
-      root,
-      containerRect,
-      window.scrollY,
-    );
-    positionCallback(positions);
-  };
+    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;
+        }
+      }
+    }
 
-  const handleScroll = () => {
-    if (scrollRafId !== null) return;
-    scrollRafId = requestAnimationFrame(() => {
-      updatePositions();
-      scrollRafId = null;
-    });
+    if (changed) {
+      cacheCallback?.();
+    }
   };
 
   root.addEventListener("mouseup", handleMouseUp);
-  root.addEventListener("mouseover", handleMouseOver);
-  root.addEventListener("mouseout", handleMouseOut);
+  root.addEventListener("mousemove", handleMouseMove);
   root.addEventListener("click", handleClick);
-  window.addEventListener("scroll", handleScroll, { passive: true });
-  window.addEventListener("resize", updatePositions);
 
   return {
-    applyHighlights(
-      comments: HighlightComment[],
-      _pendingSelection?: TextRange,
-    ) {
-      clearHighlights(root);
-
-      const textContent = getDOMTextContent(root);
-
-      const resolved = comments
-        .map((c) => {
-          const anchor = findTextPosition(
-            textContent,
-            c.selectedText,
-            c.startOffset,
-          );
-          if (anchor) {
-            return { ...c, startOffset: anchor.start, endOffset: anchor.end };
-          }
-          return null;
-        })
-        .filter((c): c is HighlightComment => c !== null)
-        .sort((a, b) => a.startOffset - b.startOffset);
-
-      applyHighlightBatch(
-        root,
-        textContent,
-        resolved.map((comment) => ({
-          startOffset: comment.startOffset,
-          endOffset: comment.endOffset,
-          style: {
-            attribute: "data-comment-id",
-            attributeValue: comment.id,
-            colorIndex: 0,
-          },
-        })),
-      );
-
-      // Defer position update to next frame to ensure browser has completed layout
-      // after DOM changes from highlight application
-      requestAnimationFrame(() => updatePositions());
-    },
+    applyHighlights(comments: HighlightComment[]) {
+      const { text: textContent, nodes: textNodes } =
+        collectTextNodesWithContent(root);
+
+      const contentChanged = textContent !== lastTextContent;
+      if (contentChanged) {
+        registry.clearAll();
+        activePositions.clear();
+        lastTextContent = textContent;
+      }
 
-    clearHighlights() {
-      clearHighlights(root);
-    },
+      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++;
+        }
+      }
 
-    getPositions(): HighlightPositions {
-      const containerRect = container.getBoundingClientRect();
-      return collectHighlightPositions(root, containerRect, window.scrollY);
+      applyDiff(resolved, textNodes);
     },
 
-    onPositionsChange(callback: PositionChangeHandler) {
-      positionCallback = callback;
-      return () => {
-        positionCallback = undefined;
-      };
+    clearHighlights() {
+      registry.clearAll();
+      activePositions.clear();
+      lastTextContent = "";
+      cacheCallback?.();
     },
 
     onHighlightHover(callback: HoverHandler) {
@@ -244,184 +206,42 @@ function createMarkdownHighlighter(options: MarkdownOptions): Highlighter {
       };
     },
 
-    dispose() {
-      root.removeEventListener("mouseup", handleMouseUp);
-      root.removeEventListener("mouseover", handleMouseOver);
-      root.removeEventListener("mouseout", handleMouseOut);
-      root.removeEventListener("click", handleClick);
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", updatePositions);
-      if (scrollRafId !== null) {
-        cancelAnimationFrame(scrollRafId);
-      }
-      positionCallback = undefined;
-      hoverCallback = undefined;
-      clickCallback = undefined;
-    },
-  };
-}
-
-function createIframeHighlighter(options: IframeOptions): Highlighter {
-  const { getIframe, onSelect } = options;
-
-  let isReady = false;
-  let positionCallback: PositionChangeHandler | undefined;
-  let hoverCallback: HoverHandler | undefined;
-  let clickCallback: ClickHandler | undefined;
-  let contentHeightCallback: ContentHeightHandler | undefined;
-  let pendingHighlights:
-    | { comments: HighlightComment[]; pending?: TextRange }
-    | undefined;
-
-  const handleMessage = (event: MessageEvent) => {
-    const iframe = getIframe();
-    if (!iframe || iframe.contentWindow !== event.source) return;
-
-    switch (event.data.type) {
-      case "iframeReady":
-        isReady = true;
-        if (pendingHighlights) {
-          sendHighlights(pendingHighlights.comments, pendingHighlights.pending);
-          pendingHighlights = undefined;
-        }
-        break;
-
-      case "textSelection":
-        onSelect(
-          event.data.text,
-          event.data.startOffset,
-          event.data.endOffset,
-          event.data.selectionTop ?? 0,
-        );
-        break;
-
-      case "highlightPositions":
-        if (positionCallback) {
-          const positions: Record<string, number> = {};
-          const documentPositions: Record<string, number> = {};
-          for (const [id, top] of Object.entries(event.data.positions)) {
-            if (typeof top === "number") {
-              positions[id] = top;
-            }
-          }
-          for (const [id, top] of Object.entries(
-            event.data.documentPositions || {},
-          )) {
-            if (typeof top === "number") {
-              documentPositions[id] = top;
-            }
-          }
-          positionCallback({
-            positions,
-            documentPositions,
-            pendingTop:
-              typeof event.data.pendingTop === "number"
-                ? event.data.pendingTop
-                : undefined,
-          });
-        }
-        break;
-
-      case "highlightHover":
-        if (hoverCallback) {
-          hoverCallback(event.data.commentId);
-        }
-        break;
-
-      case "highlightClick":
-        if (clickCallback && event.data.commentId) {
-          clickCallback(event.data.commentId);
-        }
-        break;
-
-      case "contentHeight":
-        if (contentHeightCallback && typeof event.data.height === "number") {
-          contentHeightCallback(event.data.height);
-        }
-        break;
-    }
-  };
-
-  const sendHighlights = (
-    comments: HighlightComment[],
-    pending?: TextRange,
-  ) => {
-    const iframe = getIframe();
-    iframe?.contentWindow?.postMessage(
-      {
-        type: "applyHighlights",
-        comments: comments.map((c) => ({
-          id: c.id,
-          selectedText: c.selectedText,
-          startOffset: c.startOffset,
-          endOffset: c.endOffset,
-        })),
-        pendingSelection: pending ?? null,
-      },
-      "*",
-    );
-  };
-
-  window.addEventListener("message", handleMessage);
-
-  return {
-    applyHighlights(
-      comments: HighlightComment[],
-      pendingSelection?: TextRange,
-    ) {
-      if (isReady) {
-        sendHighlights(comments, pendingSelection);
-      } else {
-        pendingHighlights = { comments, pending: pendingSelection };
-      }
+    setFocused(commentId: string | undefined) {
+      registry.setFocused(commentId);
     },
 
-    clearHighlights() {
-      if (isReady) {
-        sendHighlights([], undefined);
-      }
-    },
-
-    getPositions(): HighlightPositions {
-      return { positions: {}, documentPositions: {} };
+    scrollToComment(commentId: string) {
+      registry.scrollToComment(commentId);
     },
 
-    onPositionsChange(callback: PositionChangeHandler) {
-      positionCallback = callback;
-      return () => {
-        positionCallback = undefined;
-      };
+    getPositions(containerRect: DOMRect): Map<string, number> {
+      return registry.getPositions(containerRect);
     },
 
-    onHighlightHover(callback: HoverHandler) {
-      hoverCallback = callback;
-      return () => {
-        hoverCallback = undefined;
-      };
+    getHighlightedIds(): string[] {
+      return registry.getHighlightedIds();
     },
 
-    onHighlightClick(callback: ClickHandler) {
-      clickCallback = callback;
-      return () => {
-        clickCallback = undefined;
-      };
+    isPointInHighlight(x: number, y: number): boolean {
+      return registry.isPointInHighlight(x, y);
     },
 
-    onContentHeightChange(callback: ContentHeightHandler) {
-      contentHeightCallback = callback;
+    onCacheInvalidated(callback: CacheHandler) {
+      cacheCallback = callback;
       return () => {
-        contentHeightCallback = undefined;
+        cacheCallback = undefined;
       };
     },
 
     dispose() {
-      window.removeEventListener("message", handleMessage);
-      positionCallback = undefined;
+      registry.dispose();
+      root.removeEventListener("mouseup", handleMouseUp);
+      root.removeEventListener("mousemove", handleMouseMove);
+      root.removeEventListener("click", handleClick);
       hoverCallback = undefined;
       clickCallback = undefined;
-      contentHeightCallback = undefined;
-      isReady = false;
-      pendingHighlights = undefined;
+      cacheCallback = undefined;
+      lastHoveredId = undefined;
     },
   };
 }

package/src/lib/highlight/{core.ts → resolver.ts}

@@ -1,21 +1,14 @@
 import type { TextPosition } from "./types";
 
-/**
- * Find text position in content, handling duplicate occurrences.
- * Returns the occurrence closest to hintOffset when multiple exist.
- */
 export function findTextPosition(
   textContent: string,
   selectedText: string,
   hintOffset?: number,
 ): TextPosition | undefined {
-  if (!selectedText || !textContent) {
-    return undefined;
-  }
+  if (!selectedText || !textContent) return undefined;
 
   const occurrences: number[] = [];
   let idx = 0;
-
   for (;;) {
     idx = textContent.indexOf(selectedText, idx);
     if (idx === -1) break;
@@ -23,10 +16,7 @@ export function findTextPosition(
     idx += 1;
   }
 
-  if (occurrences.length === 0) {
-    return undefined;
-  }
-
+  if (occurrences.length === 0) return undefined;
   if (occurrences.length === 1) {
     return {
       start: occurrences[0],
@@ -34,11 +24,9 @@ export function findTextPosition(
     };
   }
 
-  // Multiple occurrences: find closest to hint offset
   const target = hintOffset ?? 0;
   let closest = occurrences[0];
   let minDist = Math.abs(closest - target);
-
   for (const occ of occurrences) {
     const dist = Math.abs(occ - target);
     if (dist < minDist) {
@@ -46,9 +34,5 @@ export function findTextPosition(
       closest = occ;
     }
   }
-
-  return {
-    start: closest,
-    end: closest + selectedText.length,
-  };
+  return { start: closest, end: closest + selectedText.length };
 }