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

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

package/src/lib/html-text.test.ts

@@ -1,162 +0,0 @@
-import { JSDOM } from "jsdom";
-import { describe, expect, it } from "vitest";
-import { getDOMTextContent } from "./highlight/dom";
-import { extractTextFromHtml } from "./html-text";
-import { renderMarkdown } from "./markdown-renderer";
-
-const DOM_GLOBALS = ["document", "NodeFilter"] as const;
-
-function browserExtract(html: string): string {
-  const dom = new JSDOM(
-    `<!DOCTYPE html><body><article>${html}</article></body>`,
-  );
-  const saved = Object.fromEntries(
-    DOM_GLOBALS.map((k) => [k, (globalThis as Record<string, unknown>)[k]]),
-  );
-  try {
-    for (const k of DOM_GLOBALS) {
-      (globalThis as Record<string, unknown>)[k] = dom.window[k];
-    }
-    const container = dom.window.document.querySelector("article")!;
-    return getDOMTextContent(container);
-  } finally {
-    for (const k of DOM_GLOBALS) {
-      if (saved[k] !== undefined) {
-        (globalThis as Record<string, unknown>)[k] = saved[k];
-      } else {
-        delete (globalThis as Record<string, unknown>)[k];
-      }
-    }
-  }
-}
-
-describe("extractTextFromHtml", () => {
-  it("extracts plain text from paragraphs", () => {
-    const html = "<p>Hello world</p><p>Second paragraph</p>";
-    expect(extractTextFromHtml(html)).toBe("Hello world\nSecond paragraph");
-  });
-
-  it("handles headings", () => {
-    const html = "<h1>Title</h1><p>Content</p>";
-    expect(extractTextFromHtml(html)).toBe("Title\nContent");
-  });
-
-  it("handles nested block elements (no extra newline)", () => {
-    const html = "<blockquote><p>Quoted text</p></blockquote><p>After</p>";
-    const result = extractTextFromHtml(html);
-    expect(result).toContain("Quoted text");
-    expect(result).toContain("After");
-  });
-
-  it("handles lists", () => {
-    const html = "<ul><li>Item 1</li><li>Item 2</li></ul>";
-    expect(extractTextFromHtml(html)).toBe("Item 1\nItem 2");
-  });
-
-  it("handles inline elements within blocks", () => {
-    const html = "<p>Text with <strong>bold</strong> and <em>italic</em></p>";
-    expect(extractTextFromHtml(html)).toBe("Text with bold and italic");
-  });
-
-  it("decodes HTML entities", () => {
-    const html = "<p>&lt;div&gt; &amp; &quot;quotes&quot;</p>";
-    expect(extractTextFromHtml(html)).toBe('<div> & "quotes"');
-  });
-
-  it("handles code blocks", () => {
-    const html =
-      '<pre><code>function hello() {\n  return "world";\n}</code></pre>';
-    expect(extractTextFromHtml(html)).toContain("function hello()");
-  });
-});
-
-describe("extractTextFromHtml conformance with getDOMTextContent", () => {
-  it("matches browser extraction for simple markdown", async () => {
-    const md = `# Hello
-
-This is a paragraph.
-
-## Section
-
-Another paragraph here.
-`;
-    const { html } = await renderMarkdown(md);
-    const serverText = extractTextFromHtml(html);
-    const browserText = browserExtract(html);
-    expect(serverText).toBe(browserText);
-  });
-
-  it("matches browser extraction for lists", async () => {
-    const md = `- Item 1
-- Item 2
-- Item 3
-`;
-    const { html } = await renderMarkdown(md);
-    const serverText = extractTextFromHtml(html);
-    const browserText = browserExtract(html);
-    expect(serverText).toBe(browserText);
-  });
-
-  it("matches browser extraction for code blocks", async () => {
-    const md = `# Code
-
-\`\`\`typescript
-function hello() {
-  return "world";
-}
-\`\`\`
-
-After code.
-`;
-    const { html } = await renderMarkdown(md);
-    const serverText = extractTextFromHtml(html);
-    const browserText = browserExtract(html);
-    expect(serverText).toBe(browserText);
-  });
-
-  it("matches browser extraction for tables", async () => {
-    const md = `| A | B |
-|---|---|
-| 1 | 2 |
-| 3 | 4 |
-`;
-    const { html } = await renderMarkdown(md);
-    const serverText = extractTextFromHtml(html);
-    const browserText = browserExtract(html);
-    expect(serverText).toBe(browserText);
-  });
-
-  it("matches browser extraction for complex document", async () => {
-    const md = `# Performance Test Document
-
-This section covers topic 1 in detail. It contains various formatting including **bold**, *italic*, and \`inline code\`.
-
-## Section 2
-
-- Item 1 in section 2
-- Item 2 in section 2
-- Item 3 in section 2
-
-\`\`\`typescript
-function section2() {
-  const value = 2 * 42;
-  return "result from section 2: " + value;
-}
-\`\`\`
-
-The conclusion of section 2 summarizes the key findings.
-
-| Column A | Column B | Column C |
-|----------|----------|----------|
-| Cell 1 | Cell 2 | Cell 3 |
-
-> A blockquote with some text.
-
-Final paragraph.
-`;
-    const { html } = await renderMarkdown(md);
-    const serverText = extractTextFromHtml(html);
-    const browserText = browserExtract(html);
-    expect(serverText).toBe(browserText);
-  });
-});

package/src/lib/html-text.ts

@@ -1,161 +0,0 @@
-const BLOCK_ELEMENTS = new Set([
-  "p",
-  "div",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "pre",
-  "blockquote",
-  "li",
-  "tr",
-  "br",
-]);
-
-interface TextNode {
-  text: string;
-  blockAncestorPath: string[];
-}
-
-export function extractTextFromHtml(html: string): string {
-  const textNodes = collectTextNodesFromHtml(html);
-  if (textNodes.length === 0) return "";
-
-  let result = "";
-  let lastBlockPath: string[] | null = null;
-
-  for (const node of textNodes) {
-    if (lastBlockPath) {
-      const lastBlock = lastBlockPath;
-      const currBlock = node.blockAncestorPath;
-
-      if (
-        lastBlock.length > 0 &&
-        currBlock.length > 0 &&
-        !isNested(lastBlock, currBlock)
-      ) {
-        if (
-          lastBlock[lastBlock.length - 1] !== currBlock[currBlock.length - 1]
-        ) {
-          result += "\n";
-        }
-      }
-    }
-
-    result += node.text;
-    lastBlockPath = node.blockAncestorPath;
-  }
-
-  return result;
-}
-
-function isNested(pathA: string[], pathB: string[]): boolean {
-  const blockA = pathA[pathA.length - 1];
-  const blockB = pathB[pathB.length - 1];
-
-  if (pathB.includes(blockA)) return true;
-  if (pathA.includes(blockB)) return true;
-  return false;
-}
-
-function collectTextNodesFromHtml(html: string): TextNode[] {
-  const nodes: TextNode[] = [];
-  const stack: { tag: string; id: string }[] = [];
-  let idCounter = 0;
-
-  const tagPattern = /<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*\/?>/g;
-  let lastIndex = 0;
-  let match: RegExpExecArray | null;
-
-  match = tagPattern.exec(html);
-  while (match !== null) {
-    if (match.index > lastIndex) {
-      const text = decodeEntities(html.slice(lastIndex, match.index));
-      if (text) {
-        nodes.push({
-          text,
-          blockAncestorPath: getBlockAncestorPath(stack),
-        });
-      }
-    }
-
-    const fullTag = match[0];
-    const tagName = match[1].toLowerCase();
-    const isClosing = fullTag.startsWith("</");
-    const isSelfClosing = fullTag.endsWith("/>") || isVoidElement(tagName);
-
-    if (isClosing) {
-      for (let i = stack.length - 1; i >= 0; i--) {
-        if (stack[i].tag === tagName) {
-          stack.splice(i);
-          break;
-        }
-      }
-    } else if (!isSelfClosing) {
-      stack.push({ tag: tagName, id: `e${idCounter++}` });
-    }
-
-    lastIndex = match.index + fullTag.length;
-    match = tagPattern.exec(html);
-  }
-
-  if (lastIndex < html.length) {
-    const text = decodeEntities(html.slice(lastIndex));
-    if (text) {
-      nodes.push({
-        text,
-        blockAncestorPath: getBlockAncestorPath(stack),
-      });
-    }
-  }
-
-  return nodes;
-}
-
-function getBlockAncestorPath(stack: { tag: string; id: string }[]): string[] {
-  const path: string[] = [];
-  for (const entry of stack) {
-    if (BLOCK_ELEMENTS.has(entry.tag)) {
-      path.push(entry.id);
-    }
-  }
-  return path;
-}
-
-const VOID_ELEMENTS = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
-]);
-
-function isVoidElement(tag: string): boolean {
-  return VOID_ELEMENTS.has(tag);
-}
-
-function decodeEntities(text: string): string {
-  return text
-    .replace(/&amp;/g, "&")
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'")
-    .replace(/&#x27;/g, "'")
-    .replace(/&nbsp;/g, "\u00A0")
-    .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
-    .replace(/&#x([0-9a-fA-F]+);/g, (_, hex) =>
-      String.fromCharCode(Number.parseInt(hex, 16)),
-    );
-}