@peaske7/readit 0.3.0-rc.0 → 0.3.0-rc.1

package/src/lib/highlight/dom.ts

@@ -1,187 +0,0 @@
-import type { TextNodeInfo } from "./types";
-
-const BLOCK_ELEMENTS = new Set([
-  "P",
-  "DIV",
-  "H1",
-  "H2",
-  "H3",
-  "H4",
-  "H5",
-  "H6",
-  "PRE",
-  "BLOCKQUOTE",
-  "LI",
-  "TR",
-  "BR",
-]);
-
-function findBlockParent(node: Node): Element | null {
-  let parent = node.parentElement;
-  while (parent && !BLOCK_ELEMENTS.has(parent.tagName)) {
-    parent = parent.parentElement;
-  }
-  return parent;
-}
-
-export function getTextOffset(
-  root: Node,
-  targetNode: Node,
-  targetOffset: number,
-): number {
-  let offset = 0;
-  let lastBlockParent: Element | null = null;
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-
-  let node = walker.nextNode();
-  while (node) {
-    const blockParent = findBlockParent(node);
-
-    if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-      if (
-        !lastBlockParent.contains(blockParent) &&
-        !blockParent.contains(lastBlockParent)
-      ) {
-        offset += 1;
-      }
-    }
-
-    if (node === targetNode) {
-      return offset + targetOffset;
-    }
-    offset += node.textContent?.length ?? 0;
-    lastBlockParent = blockParent;
-    node = walker.nextNode();
-  }
-
-  return offset;
-}
-
-export function getDOMTextContent(root: Node): string {
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  let text = "";
-  let lastBlockParent: Element | null = null;
-  let node = walker.nextNode();
-
-  while (node) {
-    const blockParent = findBlockParent(node);
-
-    if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-      if (
-        !lastBlockParent.contains(blockParent) &&
-        !blockParent.contains(lastBlockParent)
-      ) {
-        text += "\n";
-      }
-    }
-
-    text += node.textContent ?? "";
-    lastBlockParent = blockParent;
-    node = walker.nextNode();
-  }
-
-  return text;
-}
-
-export function collectTextNodes(root: Node): TextNodeInfo[] {
-  const textNodes: TextNodeInfo[] = [];
-  let currentOffset = 0;
-  let lastBlockParent: Element | null = null;
-
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  let node = walker.nextNode();
-
-  while (node) {
-    const blockParent = findBlockParent(node);
-
-    if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-      if (
-        !lastBlockParent.contains(blockParent) &&
-        !blockParent.contains(lastBlockParent)
-      ) {
-        currentOffset += 1;
-      }
-    }
-
-    const length = node.textContent?.length ?? 0;
-    textNodes.push({
-      node: node as Text,
-      start: currentOffset,
-      end: currentOffset + length,
-    });
-    currentOffset += length;
-    lastBlockParent = blockParent;
-    node = walker.nextNode();
-  }
-
-  return textNodes;
-}
-
-export function collectTextNodesWithContent(root: Node): {
-  text: string;
-  nodes: TextNodeInfo[];
-} {
-  const nodes: TextNodeInfo[] = [];
-  let text = "";
-  let currentOffset = 0;
-  let lastBlockParent: Element | null = null;
-
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-  let node = walker.nextNode();
-
-  while (node) {
-    const blockParent = findBlockParent(node);
-
-    if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-      if (
-        !lastBlockParent.contains(blockParent) &&
-        !blockParent.contains(lastBlockParent)
-      ) {
-        text += "\n";
-        currentOffset += 1;
-      }
-    }
-
-    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 { text, nodes };
-}
-
-export function createRangesForHighlight(
-  root: Node,
-  startOffset: number,
-  endOffset: number,
-): Range[] {
-  const textNodes = collectTextNodes(root);
-  return createRangesFromNodes(textNodes, startOffset, endOffset);
-}
-
-export function createRangesFromNodes(
-  textNodes: TextNodeInfo[],
-  startOffset: number,
-  endOffset: number,
-): Range[] {
-  const ranges: Range[] = [];
-
-  for (const { node, start, end } of textNodes) {
-    if (end <= startOffset || start >= endOffset) continue;
-
-    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 ranges;
-}

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