@peaske7/readit 0.1.7 → 0.2.0

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;
     },
   };
 }

package/src/lib/highlight/resolver.ts

@@ -0,0 +1,112 @@
+import type { HighlightComment, TextPosition } from "./types";
+
+export function findTextPosition(
+  textContent: string,
+  selectedText: string,
+  hintOffset?: number,
+): TextPosition | undefined {
+  if (!selectedText || !textContent) return undefined;
+
+  const occurrences: number[] = [];
+  let idx = 0;
+  for (;;) {
+    idx = textContent.indexOf(selectedText, idx);
+    if (idx === -1) break;
+    occurrences.push(idx);
+    idx += 1;
+  }
+
+  if (occurrences.length === 0) return undefined;
+  if (occurrences.length === 1) {
+    return { start: occurrences[0], end: occurrences[0] + selectedText.length };
+  }
+
+  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) {
+      minDist = dist;
+      closest = occ;
+    }
+  }
+  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,34 +1,13 @@
-/**
- * Shared types for the highlighting system.
- */
-
-/**
- * Style configuration for highlight marks.
- */
 export interface HighlightStyle {
   attribute: string;
   attributeValue: string;
 }
 
-/**
- * Text range with character offsets.
- */
-export interface TextRange {
-  startOffset: number;
-  endOffset: number;
-}
-
-/**
- * Resolved text position in content.
- */
 export interface TextPosition {
   start: number;
   end: number;
 }
 
-/**
- * Comment data needed for highlighting (subset of full Comment type).
- */
 export interface HighlightComment {
   id: string;
   selectedText: string;
@@ -36,20 +15,6 @@ export interface HighlightComment {
   endOffset: number;
 }
 
-/**
- * Highlight positions for margin note alignment and minimap.
- * - positions: Y-position relative to container (for margin notes)
- * - documentPositions: Y-position from document top (for minimap)
- */
-export interface HighlightPositions {
-  positions: Record<string, number>;
-  documentPositions: Record<string, number>;
-  pendingTop?: number;
-}
-
-/**
- * Text node with its cumulative offset range in the document.
- */
 export interface TextNodeInfo {
   node: Text;
   start: number;

package/src/lib/highlight/worker.ts

@@ -0,0 +1,45 @@
+// Inlined to avoid module import issues in Worker context
+function find(
+  text: string,
+  needle: string,
+  hint?: number,
+): { start: number; end: number } | undefined {
+  if (!needle || !text) return undefined;
+
+  const hits: number[] = [];
+  let i = 0;
+  for (;;) {
+    i = text.indexOf(needle, i);
+    if (i === -1) break;
+    hits.push(i);
+    i += 1;
+  }
+
+  if (hits.length === 0) return undefined;
+  if (hits.length === 1)
+    return { start: hits[0], end: hits[0] + needle.length };
+
+  const target = hint ?? 0;
+  let best = hits[0];
+  let bestDist = Math.abs(best - target);
+  for (const h of hits) {
+    const d = Math.abs(h - target);
+    if (d < bestDist) {
+      bestDist = d;
+      best = h;
+    }
+  }
+  return { start: best, end: best + needle.length };
+}
+
+self.onmessage = (e: MessageEvent) => {
+  const { id, textContent, comments } = e.data;
+  const results: { id: string; start: number; end: number }[] = [];
+
+  for (const c of comments) {
+    const pos = find(textContent, c.selectedText, c.startOffset);
+    if (pos) results.push({ id: c.id, ...pos });
+  }
+
+  self.postMessage({ id, results });
+};