@peaske7/readit 0.1.8 → 0.2.0

package/src/lib/highlight/dom.ts

@@ -1,9 +1,5 @@
-import type { HighlightPositions, HighlightStyle, TextNodeInfo } from "./types";
+import type { HighlightStyle, TextNodeInfo } from "./types";
 
-/**
- * Block-level elements that should have newlines between them.
- * Used to normalize whitespace in text extraction.
- */
 const BLOCK_ELEMENTS = new Set([
   "P",
   "DIV",
@@ -20,9 +16,6 @@ const BLOCK_ELEMENTS = new Set([
   "BR",
 ]);
 
-/**
- * Find the closest block-level ancestor of a node.
- */
 function findBlockParent(node: Node): Element | null {
   let parent = node.parentElement;
   while (parent && !BLOCK_ELEMENTS.has(parent.tagName)) {
@@ -31,10 +24,7 @@ function findBlockParent(node: Node): Element | null {
   return parent;
 }
 
-/**
- * Calculate text offset from root to a specific node position.
- * Accounts for newlines between block elements to match getDOMTextContent.
- */
+/** Accounts for newlines between block elements to match getDOMTextContent. */
 export function getTextOffset(
   root: Node,
   targetNode: Node,
@@ -48,13 +38,12 @@ export function getTextOffset(
   while (node) {
     const blockParent = findBlockParent(node);
 
-    // Add newline when transitioning between different block parents
     if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
       if (
         !lastBlockParent.contains(blockParent) &&
         !blockParent.contains(lastBlockParent)
       ) {
-        offset += 1; // Account for the newline
+        offset += 1;
       }
     }
 
@@ -69,10 +58,7 @@ export function getTextOffset(
   return offset;
 }
 
-/**
- * Extract all text content from a DOM tree.
- * Inserts newlines between block-level elements to match browser selection behavior.
- */
+/** Inserts newlines between block-level elements to match browser selection behavior. */
 export function getDOMTextContent(root: Node): string {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
   let text = "";
@@ -82,7 +68,6 @@ export function getDOMTextContent(root: Node): string {
   while (node) {
     const blockParent = findBlockParent(node);
 
-    // Insert newline when transitioning between different block parents
     if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
       // Only add newline if blocks are siblings (not nested)
       if (
@@ -101,10 +86,6 @@ export function getDOMTextContent(root: Node): string {
   return text;
 }
 
-/**
- * Collect all text nodes with their cumulative offset ranges.
- * Accounts for newlines between block elements to match getDOMTextContent.
- */
 export function collectTextNodes(root: Node): TextNodeInfo[] {
   const textNodes: TextNodeInfo[] = [];
   let currentOffset = 0;
@@ -116,14 +97,12 @@ export function collectTextNodes(root: Node): TextNodeInfo[] {
   while (node) {
     const blockParent = findBlockParent(node);
 
-    // Account for newline when transitioning between different block parents
-    // (same logic as getDOMTextContent)
     if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
       if (
         !lastBlockParent.contains(blockParent) &&
         !blockParent.contains(lastBlockParent)
       ) {
-        currentOffset += 1; // Account for the newline
+        currentOffset += 1;
       }
     }
 
@@ -141,9 +120,6 @@ export function collectTextNodes(root: Node): TextNodeInfo[] {
   return textNodes;
 }
 
-/**
- * Extended style configuration for highlight marks with color and bracket mode support.
- */
 export interface ExtendedHighlightStyle extends HighlightStyle {
   colorIndex?: number;
   isBracketMode?: boolean;
@@ -164,9 +140,6 @@ interface NodeSegment {
   order: number;
 }
 
-/**
- * Line threshold for bracket mode (selections spanning this many lines or more)
- */
 const BRACKET_MODE_LINE_THRESHOLD = 5;
 
 export function countLinesInRange(
@@ -183,9 +156,6 @@ export function countLinesInRange(
 // applyHighlightWithStyle adds color indices and bracket mode for saved comments.
 // Keeping them separate avoids unnecessary complexity in a shared abstraction.
 
-/**
- * Apply highlight mark elements to a text range (for pending selections).
- */
 export function applyHighlightToRange(
   root: HTMLElement,
   startOffset: number,
@@ -225,7 +195,6 @@ export function applyHighlightToRange(
         mark.appendChild(fragment);
         range.insertNode(mark);
       } catch (err) {
-        // Skip if fallback also fails, but log for debugging
         console.warn("[highlight] Failed to apply highlight to range:", err);
       }
     }
@@ -380,35 +349,3 @@ export function clearHighlights(
     }
   }
 }
-
-/**
- * Collect highlight positions relative to a container and document.
- */
-export function collectHighlightPositions(
-  root: HTMLElement,
-  containerRect: DOMRect,
-  scrollY = 0,
-): HighlightPositions {
-  const positions: Record<string, number> = {};
-  const documentPositions: Record<string, number> = {};
-
-  // Collect comment highlight positions
-  const marks = root.querySelectorAll("mark[data-comment-id]");
-  for (const mark of marks) {
-    const commentId = mark.getAttribute("data-comment-id");
-    if (!commentId) continue;
-
-    // Get position relative to container (for margin notes)
-    const markRect = mark.getBoundingClientRect();
-    const relativeTop = markRect.top - containerRect.top;
-
-    // Use first occurrence of each comment id
-    if (!(commentId in positions)) {
-      positions[commentId] = relativeTop;
-      // Document-absolute position (for minimap)
-      documentPositions[commentId] = markRect.top + scrollY;
-    }
-  }
-
-  return { positions, documentPositions };
-}

package/src/lib/highlight/highlighter.ts

@@ -1,13 +1,12 @@
-import { findTextPosition } from "./core";
 import {
   applyHighlightBatch,
   applyHighlightToRange,
   clearHighlights,
-  collectHighlightPositions,
   getDOMTextContent,
   getTextOffset,
 } from "./dom";
-import type { HighlightComment, HighlightPositions, TextRange } from "./types";
+import { Resolver } from "./resolver";
+import type { HighlightComment } from "./types";
 
 export type SelectionHandler = (
   text: string,
@@ -15,53 +14,35 @@ 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 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;
   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;
+
+  // Incremental diffing state — avoids full clear+rebuild on every comment change
+  const activeHighlights = 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 handleMouseUp = () => {
     const selection = window.getSelection();
@@ -145,252 +126,117 @@ function createMarkdownHighlighter(options: MarkdownOptions): Highlighter {
     }
   };
 
-  const updatePositions = () => {
-    if (!positionCallback) return;
-    const containerRect = container.getBoundingClientRect();
-    const positions = collectHighlightPositions(
-      root,
-      containerRect,
-      window.scrollY,
-    );
-    positionCallback(positions);
-  };
-
-  const handleScroll = () => {
-    if (scrollRafId !== null) return;
-    scrollRafId = requestAnimationFrame(() => {
-      updatePositions();
-      scrollRafId = null;
-    });
-  };
+  const applyDiff = (
+    textContent: string,
+    resolved: Map<
+      string,
+      { start: number; end: number; comment: HighlightComment }
+    >,
+  ) => {
+    const toRemove: string[] = [];
+    const toAdd: string[] = [];
+
+    for (const [id, prev] of activeHighlights) {
+      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);
+      }
+    }
 
-  root.addEventListener("mouseup", handleMouseUp);
-  root.addEventListener("mouseover", handleMouseOver);
-  root.addEventListener("mouseout", handleMouseOut);
-  root.addEventListener("click", handleClick);
-  window.addEventListener("scroll", handleScroll, { passive: true });
-  window.addEventListener("resize", updatePositions);
+    for (const id of resolved.keys()) {
+      if (!activeHighlights.has(id)) {
+        toAdd.push(id);
+      }
+    }
 
-  return {
-    applyHighlights(
-      comments: HighlightComment[],
-      _pendingSelection?: TextRange,
-    ) {
-      clearHighlights(root);
+    if (toRemove.length === 0 && toAdd.length === 0) return;
 
-      const textContent = getDOMTextContent(root);
+    for (const id of toRemove) {
+      clearHighlights(root, `mark[data-comment-id="${id}"]`);
+      activeHighlights.delete(id);
+    }
 
-      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);
+    if (toAdd.length > 0) {
+      const newHighlights = toAdd
+        .map((id) => resolved.get(id)!)
+        .sort((a, b) => a.start - b.start);
 
       applyHighlightBatch(
         root,
         textContent,
-        resolved.map((comment) => ({
-          startOffset: comment.startOffset,
-          endOffset: comment.endOffset,
+        newHighlights.map((h) => ({
+          startOffset: h.start,
+          endOffset: h.end,
           style: {
             attribute: "data-comment-id",
-            attributeValue: comment.id,
+            attributeValue: h.comment.id,
             colorIndex: 0,
           },
         })),
       );
 
-      // Defer position update to next frame to ensure browser has completed layout
-      // after DOM changes from highlight application
-      requestAnimationFrame(() => updatePositions());
-    },
-
-    clearHighlights() {
-      clearHighlights(root);
-    },
-
-    getPositions(): HighlightPositions {
-      const containerRect = container.getBoundingClientRect();
-      return collectHighlightPositions(root, containerRect, window.scrollY);
-    },
-
-    onPositionsChange(callback: PositionChangeHandler) {
-      positionCallback = callback;
-      return () => {
-        positionCallback = undefined;
-      };
-    },
-
-    onHighlightHover(callback: HoverHandler) {
-      hoverCallback = callback;
-      return () => {
-        hoverCallback = undefined;
-      };
-    },
-
-    onHighlightClick(callback: ClickHandler) {
-      clickCallback = callback;
-      return () => {
-        clickCallback = undefined;
-      };
-    },
-
-    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);
+      for (const id of toAdd) {
+        const range = resolved.get(id)!;
+        activeHighlights.set(id, { start: range.start, end: range.end });
       }
-      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;
+  root.addEventListener("mouseup", handleMouseUp);
+  root.addEventListener("mouseover", handleMouseOver);
+  root.addEventListener("mouseout", handleMouseOut);
+  root.addEventListener("click", handleClick);
 
-      case "highlightHover":
-        if (hoverCallback) {
-          hoverCallback(event.data.commentId);
-        }
-        break;
+  return {
+    applyHighlights(comments: HighlightComment[]) {
+      const textContent = getDOMTextContent(root);
 
-      case "highlightClick":
-        if (clickCallback && event.data.commentId) {
-          clickCallback(event.data.commentId);
-        }
-        break;
+      // If DOM content changed (e.g. document reload), full rebuild is required
+      const contentChanged = textContent !== lastTextContent;
+      if (contentChanged) {
+        clearHighlights(root);
+        activeHighlights.clear();
+        lastTextContent = textContent;
+      }
 
-      case "contentHeight":
-        if (contentHeightCallback && typeof event.data.height === "number") {
-          contentHeightCallback(event.data.height);
-        }
-        break;
-    }
-  };
+      // Bump generation so stale Worker responses are discarded
+      const generation = ++resolveGeneration;
 
-  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,
-      },
-      "*",
-    );
-  };
+      // 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;
 
-  window.addEventListener("message", handleMessage);
+        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,
+              },
+            });
+          }
+        }
 
-  return {
-    applyHighlights(
-      comments: HighlightComment[],
-      pendingSelection?: TextRange,
-    ) {
-      if (isReady) {
-        sendHighlights(comments, pendingSelection);
-      } else {
-        pendingHighlights = { comments, pending: pendingSelection };
-      }
+        applyDiff(textContent, resolved);
+      });
     },
 
     clearHighlights() {
-      if (isReady) {
-        sendHighlights([], undefined);
-      }
-    },
-
-    getPositions(): HighlightPositions {
-      return { positions: {}, documentPositions: {} };
-    },
-
-    onPositionsChange(callback: PositionChangeHandler) {
-      positionCallback = callback;
-      return () => {
-        positionCallback = undefined;
-      };
+      clearHighlights(root);
+      activeHighlights.clear();
+      lastTextContent = "";
     },
 
     onHighlightHover(callback: HoverHandler) {
@@ -407,21 +253,15 @@ function createIframeHighlighter(options: IframeOptions): Highlighter {
       };
     },
 
-    onContentHeightChange(callback: ContentHeightHandler) {
-      contentHeightCallback = callback;
-      return () => {
-        contentHeightCallback = undefined;
-      };
-    },
-
     dispose() {
-      window.removeEventListener("message", handleMessage);
-      positionCallback = undefined;
+      resolveGeneration++;
+      resolver.dispose();
+      root.removeEventListener("mouseup", handleMouseUp);
+      root.removeEventListener("mouseover", handleMouseOver);
+      root.removeEventListener("mouseout", handleMouseOut);
+      root.removeEventListener("click", handleClick);
       hoverCallback = undefined;
       clickCallback = undefined;
-      contentHeightCallback = undefined;
-      isReady = false;
-      pendingHighlights = undefined;
     },
   };
 }