@peaske7/readit 0.2.1 → 0.3.0-rc.1

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

@@ -1,221 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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,247 +0,0 @@
-import {
-  collectTextNodesWithContent,
-  createRangesForHighlight,
-  createRangesFromNodes,
-  getTextOffset,
-} from "./dom";
-import { HighlightRegistry } from "./highlight-registry";
-import type { HighlightComment, TextNodeInfo } from "./types";
-
-export type SelectionHandler = (
-  text: string,
-  startOffset: number,
-  endOffset: number,
-  selectionTop: number,
-) => void;
-export type HoverHandler = (commentId: string | undefined) => void;
-export type ClickHandler = (commentId: string) => void;
-export type CacheHandler = () => void;
-
-export interface Highlighter {
-  applyHighlights(comments: HighlightComment[]): void;
-  clearHighlights(): void;
-  onHighlightHover(callback: HoverHandler): () => void;
-  onHighlightClick(callback: ClickHandler): () => 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;
-}
-
-export interface HighlighterOptions {
-  root: HTMLElement;
-  container: HTMLElement;
-  onSelect: SelectionHandler;
-}
-
-export function createHighlighter(options: HighlighterOptions): Highlighter {
-  const { root, container, onSelect } = options;
-
-  let hoverCallback: HoverHandler | undefined;
-  let clickCallback: ClickHandler | undefined;
-  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();
-    if (!selection || selection.isCollapsed) return;
-
-    const text = selection
-      .toString()
-      .trim()
-      .replace(/\r?\n\s*/g, "\n");
-    if (text.length === 0) return;
-
-    const range = selection.getRangeAt(0);
-
-    // Reject whole-document selections caused by DOM mutation
-    if (
-      range.startContainer === root &&
-      range.startOffset === 0 &&
-      range.endContainer === root &&
-      range.endOffset === root.childNodes.length
-    ) {
-      return;
-    }
-
-    const startOffset = getTextOffset(
-      root,
-      range.startContainer,
-      range.startOffset,
-    );
-    const endOffset = getTextOffset(root, range.endContainer, range.endOffset);
-
-    const rangeRect = range.getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    const selectionTop = rangeRect.top - containerRect.top;
-
-    onSelect(text, startOffset, endOffset, selectionTop);
-
-    requestAnimationFrame(() => {
-      const pendingRanges = createRangesForHighlight(
-        root,
-        startOffset,
-        endOffset,
-      );
-      registry.setPending(pendingRanges);
-    });
-  };
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!hoverCallback) return;
-
-    const id = registry.hitTest(e.clientX, e.clientY);
-
-    if (id !== lastHoveredId) {
-      lastHoveredId = id;
-      hoverCallback(id);
-    }
-  };
-
-  const handleClick = (e: MouseEvent) => {
-    if (!clickCallback) return;
-
-    const commentId = registry.hitTest(e.clientX, e.clientY);
-    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;
-      }
-    }
-
-    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;
-        }
-      }
-    }
-
-    if (changed) {
-      cacheCallback?.();
-    }
-  };
-
-  root.addEventListener("mouseup", handleMouseUp);
-  root.addEventListener("mousemove", handleMouseMove);
-  root.addEventListener("click", handleClick);
-
-  return {
-    applyHighlights(comments: HighlightComment[]) {
-      const { text: textContent, nodes: textNodes } =
-        collectTextNodesWithContent(root);
-
-      const contentChanged = textContent !== lastTextContent;
-      if (contentChanged) {
-        registry.clearAll();
-        activePositions.clear();
-        lastTextContent = textContent;
-      }
-
-      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++;
-        }
-      }
-
-      applyDiff(resolved, textNodes);
-    },
-
-    clearHighlights() {
-      registry.clearAll();
-      activePositions.clear();
-      lastTextContent = "";
-      cacheCallback?.();
-    },
-
-    onHighlightHover(callback: HoverHandler) {
-      hoverCallback = callback;
-      return () => {
-        hoverCallback = undefined;
-      };
-    },
-
-    onHighlightClick(callback: ClickHandler) {
-      clickCallback = callback;
-      return () => {
-        clickCallback = undefined;
-      };
-    },
-
-    setFocused(commentId: string | undefined) {
-      registry.setFocused(commentId);
-    },
-
-    scrollToComment(commentId: string) {
-      registry.scrollToComment(commentId);
-    },
-
-    getPositions(containerRect: DOMRect): Map<string, number> {
-      return registry.getPositions(containerRect);
-    },
-
-    getHighlightedIds(): string[] {
-      return registry.getHighlightedIds();
-    },
-
-    isPointInHighlight(x: number, y: number): boolean {
-      return registry.isPointInHighlight(x, y);
-    },
-
-    onCacheInvalidated(callback: CacheHandler) {
-      cacheCallback = callback;
-      return () => {
-        cacheCallback = undefined;
-      };
-    },
-
-    dispose() {
-      registry.dispose();
-      root.removeEventListener("mouseup", handleMouseUp);
-      root.removeEventListener("mousemove", handleMouseMove);
-      root.removeEventListener("click", handleClick);
-      hoverCallback = undefined;
-      clickCallback = undefined;
-      cacheCallback = undefined;
-      lastHoveredId = undefined;
-    },
-  };
-}

package/src/lib/highlight/resolver.ts

@@ -1,38 +0,0 @@
-import type { 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 };
-}

package/src/lib/highlight/types.ts

@@ -1,17 +0,0 @@
-export interface TextPosition {
-  start: number;
-  end: number;
-}
-
-export interface HighlightComment {
-  id: string;
-  selectedText: string;
-  startOffset: number;
-  endOffset: number;
-}
-
-export interface TextNodeInfo {
-  node: Text;
-  start: number;
-  end: number;
-}