@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/lib/highlight/dom.ts

@@ -1,4 +1,4 @@
-import type { HighlightStyle, TextNodeInfo } from "./types";
+import type { TextNodeInfo } from "./types";
 
 const BLOCK_ELEMENTS = new Set([
   "P",
@@ -24,7 +24,6 @@ function findBlockParent(node: Node): Element | null {
   return parent;
 }
 
-/** Accounts for newlines between block elements to match getDOMTextContent. */
 export function getTextOffset(
   root: Node,
   targetNode: Node,
@@ -58,7 +57,6 @@ export function getTextOffset(
   return offset;
 }
 
-/** 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 = "";
@@ -69,7 +67,6 @@ export function getDOMTextContent(root: Node): string {
     const blockParent = findBlockParent(node);
 
     if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-      // Only add newline if blocks are siblings (not nested)
       if (
         !lastBlockParent.contains(blockParent) &&
         !blockParent.contains(lastBlockParent)
@@ -120,232 +117,71 @@ export function collectTextNodes(root: Node): TextNodeInfo[] {
   return textNodes;
 }
 
-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;
-}
-
-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.
-
-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) {
-        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)),
-        );
-      }
+  return createRangesFromNodes(textNodes, startOffset, endOffset);
+}
 
-      fragment.appendChild(
-        createStyledMark(text.slice(segment.start, segment.end), segment.style),
-      );
-      cursor = segment.end;
-    }
+export function createRangesFromNodes(
+  textNodes: TextNodeInfo[],
+  startOffset: number,
+  endOffset: number,
+): Range[] {
+  const ranges: Range[] = [];
 
-    if (cursor < text.length) {
-      fragment.appendChild(document.createTextNode(text.slice(cursor)));
-    }
+  for (const { node, start, end } of textNodes) {
+    if (end <= startOffset || start >= endOffset) continue;
 
-    node.replaceWith(fragment);
+    const range = document.createRange();
+    range.setStart(node, Math.max(0, startOffset - start));
+    range.setEnd(node, Math.min(node.length, endOffset - start));
+    ranges.push(range);
   }
-}
-
-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);
-    }
-  }
+  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;
+  }
+}

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);
+    }
+  });
+});