@peaske7/readit 0.1.8 → 0.2.1

package/src/lib/highlight/core.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { findTextPosition } from "./core";
+import { findTextPosition } from "./resolver";
 
 describe("findTextPosition", () => {
   it("finds single occurrence", () => {
@@ -31,18 +31,14 @@ describe("findTextPosition", () => {
   describe("multiple occurrences", () => {
     it("finds closest occurrence to hint (before)", () => {
       const text = "the cat and the dog and the bird";
-      // "the" occurs at: 0, 12, 24
 
-      // Hint at 10 should find "the" at 12 (closest)
       const result = findTextPosition(text, "the", 10);
       expect(result?.start).toBe(12);
     });
 
     it("finds closest occurrence to hint (after)", () => {
       const text = "the cat and the dog and the bird";
-      // "the" occurs at: 0, 12, 24
 
-      // Hint at 30 should find "the" at 24 (closest)
       const result = findTextPosition(text, "the", 30);
       expect(result?.start).toBe(24);
     });
@@ -61,7 +57,6 @@ describe("findTextPosition", () => {
 
     it("handles exact match at hint position", () => {
       const text = "abc abc abc";
-      // "abc" occurs at: 0, 4, 8
       const result = findTextPosition(text, "abc", 4);
       expect(result?.start).toBe(4);
     });

package/src/lib/highlight/dom.ts

@@ -1,9 +1,5 @@
-import type { HighlightPositions, HighlightStyle, TextNodeInfo } from "./types";
+import type { 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,6 @@ 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.
- */
 export function getTextOffset(
   root: Node,
   targetNode: Node,
@@ -48,13 +37,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 +57,6 @@ export function getTextOffset(
   return offset;
 }
 
-/**
- * Extract all text content from a DOM tree.
- * 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,9 +66,7 @@ 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 (
         !lastBlockParent.contains(blockParent) &&
         !blockParent.contains(lastBlockParent)
@@ -101,10 +83,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 +94,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,274 +117,71 @@ 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;
-  isBracketStart?: boolean;
-  isBracketEnd?: boolean;
-}
-
-interface BatchedHighlightSegment {
-  startOffset: number;
-  endOffset: number;
-  style: ExtendedHighlightStyle;
-}
-
-interface NodeSegment {
-  start: number;
-  end: number;
-  style: ExtendedHighlightStyle;
-  order: number;
-}
-
-/**
- * Line threshold for bracket mode (selections spanning this many lines or more)
- */
-const BRACKET_MODE_LINE_THRESHOLD = 5;
-
-export function countLinesInRange(
-  textContent: string,
-  startOffset: number,
-  endOffset: number,
-): number {
-  const slice = textContent.slice(startOffset, endOffset);
-  return (slice.match(/\n/g) || []).length + 1;
-}
-
-// Note: applyHighlightToRange and applyHighlightWithStyle share similar logic intentionally.
-// They differ in styling: applyHighlightToRange is for simple pending selections,
-// 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,
-  endOffset: number,
-  style: HighlightStyle,
-): void {
-  const textNodes = collectTextNodes(root);
-  const overlappingNodes = textNodes.filter(
-    (n) => n.end > startOffset && n.start < endOffset,
-  );
-
-  if (overlappingNodes.length === 0) {
-    return;
-  }
-
-  for (const { node: textNode, start } of overlappingNodes) {
-    const nodeStart = Math.max(0, startOffset - start);
-    const nodeEnd = Math.min(textNode.length, endOffset - start);
-
-    if (nodeStart >= nodeEnd) {
-      continue;
-    }
+export function collectTextNodesWithContent(root: Node): {
+  text: string;
+  nodes: TextNodeInfo[];
+} {
+  const nodes: TextNodeInfo[] = [];
+  let text = "";
+  let currentOffset = 0;
+  let lastBlockParent: Element | null = null;
 
-    const range = document.createRange();
-    range.setStart(textNode, nodeStart);
-    range.setEnd(textNode, nodeEnd);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let node = walker.nextNode();
 
-    const mark = document.createElement("mark");
-    mark.setAttribute(style.attribute, style.attributeValue);
+  while (node) {
+    const blockParent = findBlockParent(node);
 
-    try {
-      range.surroundContents(mark);
-    } catch {
-      // Range crosses element boundaries - use extractContents fallback
-      try {
-        const fragment = range.extractContents();
-        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);
+    if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
+      if (
+        !lastBlockParent.contains(blockParent) &&
+        !blockParent.contains(lastBlockParent)
+      ) {
+        text += "\n";
+        currentOffset += 1;
       }
     }
-  }
-}
-
-function createStyledMark(
-  text: string,
-  style: ExtendedHighlightStyle,
-): HTMLElement {
-  const mark = document.createElement("mark");
-  mark.setAttribute(style.attribute, style.attributeValue);
-
-  if (style.colorIndex !== undefined) {
-    mark.setAttribute("data-color-index", String(style.colorIndex % 4));
-  }
-
-  if (style.isBracketMode) {
-    mark.setAttribute("data-bracket-mode", "true");
-    if (style.isBracketStart) {
-      mark.setAttribute("data-bracket-start", "true");
-    }
-    if (style.isBracketEnd) {
-      mark.setAttribute("data-bracket-end", "true");
-    }
-  }
-
-  mark.textContent = text;
-  return mark;
-}
-
-function normalizeNodeSegments(segments: NodeSegment[]): NodeSegment[] {
-  const sorted = [...segments].sort((a, b) => {
-    if (a.start !== b.start) return a.start - b.start;
-    if (a.end !== b.end) return b.end - a.end;
-    return a.order - b.order;
-  });
-
-  const normalized: NodeSegment[] = [];
-  let coveredUntil = 0;
 
-  for (const segment of sorted) {
-    const start = Math.max(segment.start, coveredUntil);
-    if (start >= segment.end) continue;
-
-    normalized.push({ ...segment, start });
-    coveredUntil = segment.end;
+    const content = node.textContent ?? "";
+    text += content;
+    const length = content.length;
+    nodes.push({
+      node: node as Text,
+      start: currentOffset,
+      end: currentOffset + length,
+    });
+    currentOffset += length;
+    lastBlockParent = blockParent;
+    node = walker.nextNode();
   }
 
-  return normalized;
+  return { text, nodes };
 }
 
-export function applyHighlightBatch(
-  root: HTMLElement,
-  textContent: string,
-  highlights: BatchedHighlightSegment[],
-): void {
-  if (highlights.length === 0) return;
-
+export function createRangesForHighlight(
+  root: Node,
+  startOffset: number,
+  endOffset: number,
+): Range[] {
   const textNodes = collectTextNodes(root);
-  const segmentsByNode = new Map<Text, NodeSegment[]>();
-
-  for (
-    let highlightIndex = 0;
-    highlightIndex < highlights.length;
-    highlightIndex++
-  ) {
-    const highlight = highlights[highlightIndex];
-    const overlappingNodes = textNodes.filter(
-      (n) => n.end > highlight.startOffset && n.start < highlight.endOffset,
-    );
-
-    if (overlappingNodes.length === 0) continue;
-
-    const lineCount = countLinesInRange(
-      textContent,
-      highlight.startOffset,
-      highlight.endOffset,
-    );
-    const useBracketMode =
-      highlight.style.isBracketMode ?? lineCount >= BRACKET_MODE_LINE_THRESHOLD;
-
-    for (let nodeIndex = 0; nodeIndex < overlappingNodes.length; nodeIndex++) {
-      const { node, start } = overlappingNodes[nodeIndex];
-      const localStart = Math.max(0, highlight.startOffset - start);
-      const localEnd = Math.min(node.length, highlight.endOffset - start);
-
-      if (localStart >= localEnd) continue;
-
-      const nodeSegments = segmentsByNode.get(node) ?? [];
-      nodeSegments.push({
-        start: localStart,
-        end: localEnd,
-        order: highlightIndex,
-        style: {
-          ...highlight.style,
-          isBracketMode: useBracketMode,
-          isBracketStart: useBracketMode && nodeIndex === 0,
-          isBracketEnd:
-            useBracketMode && nodeIndex === overlappingNodes.length - 1,
-        },
-      });
-      segmentsByNode.set(node, nodeSegments);
-    }
-  }
-
-  for (const { node } of textNodes) {
-    const segments = segmentsByNode.get(node);
-    if (!segments || segments.length === 0) continue;
-
-    const normalized = normalizeNodeSegments(segments);
-    if (normalized.length === 0) continue;
-
-    const text = node.textContent ?? "";
-    const fragment = document.createDocumentFragment();
-    let cursor = 0;
-
-    for (const segment of normalized) {
-      if (cursor < segment.start) {
-        fragment.appendChild(
-          document.createTextNode(text.slice(cursor, segment.start)),
-        );
-      }
-
-      fragment.appendChild(
-        createStyledMark(text.slice(segment.start, segment.end), segment.style),
-      );
-      cursor = segment.end;
-    }
-
-    if (cursor < text.length) {
-      fragment.appendChild(document.createTextNode(text.slice(cursor)));
-    }
-
-    node.replaceWith(fragment);
-  }
+  return createRangesFromNodes(textNodes, startOffset, endOffset);
 }
 
-export function clearHighlights(
-  root: HTMLElement,
-  selector = "mark[data-comment-id], mark[data-pending]",
-): void {
-  const marks = root.querySelectorAll(selector);
-
-  for (const mark of marks) {
-    const parent = mark.parentNode;
-    if (parent) {
-      while (mark.firstChild) {
-        parent.insertBefore(mark.firstChild, mark);
-      }
-      parent.removeChild(mark);
-    }
-  }
-}
-
-/**
- * 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;
+export function createRangesFromNodes(
+  textNodes: TextNodeInfo[],
+  startOffset: number,
+  endOffset: number,
+): Range[] {
+  const ranges: Range[] = [];
 
-    // Get position relative to container (for margin notes)
-    const markRect = mark.getBoundingClientRect();
-    const relativeTop = markRect.top - containerRect.top;
+  for (const { node, start, end } of textNodes) {
+    if (end <= startOffset || start >= endOffset) continue;
 
-    // Use first occurrence of each comment id
-    if (!(commentId in positions)) {
-      positions[commentId] = relativeTop;
-      // Document-absolute position (for minimap)
-      documentPositions[commentId] = markRect.top + scrollY;
-    }
+    const range = document.createRange();
+    range.setStart(node, Math.max(0, startOffset - start));
+    range.setEnd(node, Math.min(node.length, endOffset - start));
+    ranges.push(range);
   }
 
-  return { positions, documentPositions };
+  return ranges;
 }

package/src/lib/highlight/highlight-registry.ts

@@ -0,0 +1,221 @@
+const COLOR_COUNT = 4;
+
+interface CommentEntry {
+  ranges: Range[];
+  colorIndex: number;
+}
+
+export class HighlightRegistry {
+  private comments = new Map<string, CommentEntry>();
+  private pendingRanges: Range[] = [];
+  private focusedId: string | undefined;
+
+  setHighlights(
+    entries: Map<string, { ranges: Range[]; colorIndex: number }>,
+  ): void {
+    this.comments.clear();
+    for (const [id, entry] of entries) {
+      this.comments.set(id, entry);
+    }
+    this.syncCommentHighlights();
+  }
+
+  updateComment(commentId: string, ranges: Range[], colorIndex: number): void {
+    this.comments.set(commentId, { ranges, colorIndex });
+    this.syncCommentHighlights();
+  }
+
+  removeComment(commentId: string): void {
+    this.comments.delete(commentId);
+    if (this.focusedId === commentId) {
+      this.focusedId = undefined;
+      this.syncFocused();
+    }
+    this.syncCommentHighlights();
+  }
+
+  clearAll(): void {
+    this.comments.clear();
+    this.focusedId = undefined;
+
+    for (let i = 0; i < COLOR_COUNT; i++) {
+      CSS.highlights.delete(`comment-color-${i}`);
+    }
+    CSS.highlights.delete("comment-focused");
+    this.exposeIds();
+  }
+
+  setPending(ranges: Range[]): void {
+    this.pendingRanges = ranges;
+    if (ranges.length > 0) {
+      CSS.highlights.set("pending-selection", new Highlight(...ranges));
+    } else {
+      CSS.highlights.delete("pending-selection");
+    }
+  }
+
+  clearPending(): void {
+    this.pendingRanges = [];
+    CSS.highlights.delete("pending-selection");
+  }
+
+  setFocused(commentId: string | undefined): void {
+    this.focusedId = commentId;
+    this.syncFocused();
+  }
+
+  getBoundingRect(commentId: string): DOMRect | null {
+    const entry = this.comments.get(commentId);
+    if (!entry || entry.ranges.length === 0) return null;
+    return entry.ranges[0].getBoundingClientRect();
+  }
+
+  getPositions(containerRect: DOMRect): Map<string, number> {
+    const positions = new Map<string, number>();
+    for (const [id, entry] of this.comments) {
+      if (entry.ranges.length === 0) continue;
+      const rect = entry.ranges[0].getBoundingClientRect();
+      positions.set(id, rect.top - containerRect.top);
+    }
+    return positions;
+  }
+
+  scrollToComment(commentId: string): void {
+    const entry = this.comments.get(commentId);
+    if (!entry || entry.ranges.length === 0) return;
+
+    const range = entry.ranges[0];
+    const el = range.startContainer.parentElement;
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }
+
+  hitTest(x: number, y: number): string | undefined {
+    const pos = caretPositionFromPointCompat(x, y);
+    if (!pos) return undefined;
+
+    for (const [id, entry] of this.comments) {
+      for (const range of entry.ranges) {
+        if (rangeContainsPosition(range, pos.node, pos.offset)) {
+          return id;
+        }
+      }
+    }
+    return undefined;
+  }
+
+  isPointInHighlight(x: number, y: number): boolean {
+    const pos = caretPositionFromPointCompat(x, y);
+    if (!pos) return false;
+
+    for (const range of this.pendingRanges) {
+      if (rangeContainsPosition(range, pos.node, pos.offset)) return true;
+    }
+
+    for (const [, entry] of this.comments) {
+      for (const range of entry.ranges) {
+        if (rangeContainsPosition(range, pos.node, pos.offset)) return true;
+      }
+    }
+
+    return false;
+  }
+
+  getHighlightedIds(): string[] {
+    return [...this.comments.keys()];
+  }
+
+  dispose(): void {
+    this.clearAll();
+    this.clearPending();
+  }
+
+  private syncCommentHighlights(): void {
+    const byColor = new Map<number, Range[]>();
+    for (let i = 0; i < COLOR_COUNT; i++) {
+      byColor.set(i, []);
+    }
+
+    for (const entry of this.comments.values()) {
+      const bucket = byColor.get(entry.colorIndex % COLOR_COUNT)!;
+      bucket.push(...entry.ranges);
+    }
+
+    for (let i = 0; i < COLOR_COUNT; i++) {
+      const ranges = byColor.get(i)!;
+      if (ranges.length > 0) {
+        CSS.highlights.set(`comment-color-${i}`, new Highlight(...ranges));
+      } else {
+        CSS.highlights.delete(`comment-color-${i}`);
+      }
+    }
+
+    this.syncFocused();
+    this.exposeIds();
+  }
+
+  private syncFocused(): void {
+    if (!this.focusedId) {
+      CSS.highlights.delete("comment-focused");
+      return;
+    }
+
+    const entry = this.comments.get(this.focusedId);
+    if (!entry || entry.ranges.length === 0) {
+      CSS.highlights.delete("comment-focused");
+      return;
+    }
+
+    CSS.highlights.set("comment-focused", new Highlight(...entry.ranges));
+  }
+
+  private exposeIds(): void {
+    if (typeof window !== "undefined") {
+      (window as unknown as Record<string, unknown>).__readitHighlights = {
+        commentIds: this.getHighlightedIds(),
+      };
+    }
+  }
+}
+
+interface CaretPosition {
+  node: Node;
+  offset: number;
+}
+
+function caretPositionFromPointCompat(
+  x: number,
+  y: number,
+): CaretPosition | null {
+  if ("caretPositionFromPoint" in document) {
+    const pos = document.caretPositionFromPoint(x, y);
+    if (pos) return { node: pos.offsetNode, offset: pos.offset };
+  }
+
+  if ("caretRangeFromPoint" in document) {
+    const range = (
+      document as unknown as {
+        caretRangeFromPoint(x: number, y: number): Range | null;
+      }
+    ).caretRangeFromPoint(x, y);
+    if (range) {
+      return { node: range.startContainer, offset: range.startOffset };
+    }
+  }
+
+  return null;
+}
+
+function rangeContainsPosition(
+  range: Range,
+  node: Node,
+  offset: number,
+): boolean {
+  try {
+    const cmp1 = range.comparePoint(node, offset);
+    return cmp1 === 0;
+  } catch {
+    return false;
+  }
+}