@peaske7/readit 0.1.4 → 0.1.6

package/src/lib/context.ts

@@ -0,0 +1,193 @@
+/**
+ * Context extraction and formatting utilities for LLM clipboard copy.
+ */
+
+interface ContextResult {
+  lines: string[]; // Lines with >>> markers inserted
+  startLine: number; // 1-based line number
+  endLine: number; // 1-based line number
+}
+
+interface FormatOptions {
+  context: ContextResult;
+  fileName: string;
+  comment?: string;
+}
+
+/**
+ * Parameters for context extraction.
+ * Using object destructuring per style guide §3.5 for clarity.
+ */
+export interface ExtractContextParams {
+  content: string;
+  startOffset: number;
+  endOffset: number;
+  contextLines?: number;
+}
+
+const DEFAULT_CONTEXT_LINES = 2;
+const MAX_SELECTION_LINES = 10;
+const MAX_LINE_LENGTH = 200;
+
+/**
+ * Strip HTML tags to get plain text matching TreeWalker offset calculation.
+ */
+export function stripHtmlTags(html: string): string {
+  // Remove script/style content entirely
+  let text = html.replace(/<(script|style)[^>]*>[\s\S]*?<\/\1>/gi, "");
+  // Remove all HTML tags
+  text = text.replace(/<[^>]+>/g, "");
+  // Decode common named entities
+  text = text.replace(/&nbsp;/g, " ");
+  text = text.replace(/&lt;/g, "<");
+  text = text.replace(/&gt;/g, ">");
+  text = text.replace(/&amp;/g, "&");
+  text = text.replace(/&quot;/g, '"');
+  text = text.replace(/&#39;/g, "'");
+  // Decode numeric entities (decimal and hex)
+  text = text.replace(/&#(\d+);/g, (_, code) =>
+    String.fromCharCode(Number.parseInt(code, 10)),
+  );
+  text = text.replace(/&#x([0-9a-f]+);/gi, (_, code) =>
+    String.fromCharCode(Number.parseInt(code, 16)),
+  );
+  return text;
+}
+
+/**
+ * Detect if content is HTML based on presence of HTML tags.
+ */
+function isHtml(content: string): boolean {
+  return /<[a-z][\s\S]*>/i.test(content);
+}
+
+/**
+ * Truncate a line if it exceeds max length.
+ */
+function truncateLine(
+  line: string,
+  maxLength: number = MAX_LINE_LENGTH,
+): string {
+  if (line.length <= maxLength) return line;
+  return `${line.slice(0, maxLength - 3)}...`;
+}
+
+/**
+ * Extract context around a selection using character offsets.
+ * Returns lines with >>> and <<< markers inserted at selection boundaries.
+ */
+export function extractContext({
+  content,
+  startOffset,
+  endOffset,
+  contextLines = DEFAULT_CONTEXT_LINES,
+}: ExtractContextParams): ContextResult {
+  // For HTML, strip tags to match offset calculation
+  const textContent = isHtml(content) ? stripHtmlTags(content) : content;
+  // Normalize CRLF to LF for consistent offset calculation
+  const normalizedContent = textContent.replace(/\r\n/g, "\n");
+
+  const lines = normalizedContent.split("\n");
+  let currentOffset = 0;
+  let startLineIndex = -1;
+  let endLineIndex = -1;
+  let startCharInLine = 0;
+  let endCharInLine = 0;
+
+  // Find lines containing the selection
+  for (let i = 0; i < lines.length; i++) {
+    const lineLength = lines[i].length;
+    const lineEnd = currentOffset + lineLength;
+
+    if (startLineIndex === -1 && lineEnd >= startOffset) {
+      startLineIndex = i;
+      startCharInLine = startOffset - currentOffset;
+    }
+
+    if (lineEnd >= endOffset) {
+      endLineIndex = i;
+      endCharInLine = endOffset - currentOffset;
+      break;
+    }
+
+    currentOffset += lineLength + 1; // +1 for newline
+  }
+
+  // Handle edge case: couldn't find lines
+  if (startLineIndex === -1) startLineIndex = 0;
+  if (endLineIndex === -1) endLineIndex = lines.length - 1;
+
+  // Calculate context range
+  const contextStart = Math.max(0, startLineIndex - contextLines);
+  const contextEnd = Math.min(lines.length - 1, endLineIndex + contextLines);
+
+  // Build output lines with markers
+  const outputLines: string[] = [];
+  const selectionSpan = endLineIndex - startLineIndex + 1;
+  const shouldTruncateMiddle = selectionSpan > MAX_SELECTION_LINES;
+
+  for (let i = contextStart; i <= contextEnd; i++) {
+    let line = lines[i];
+
+    // Handle truncation for very long selections
+    if (shouldTruncateMiddle) {
+      const showStart = startLineIndex + 2;
+      const showEnd = endLineIndex - 2;
+
+      if (i > showStart && i < showEnd) {
+        if (i === showStart + 1) {
+          outputLines.push("...");
+        }
+        continue;
+      }
+    }
+
+    // Insert markers for selection boundaries
+    if (i === startLineIndex && i === endLineIndex) {
+      // Single line selection
+      const before = line.slice(0, startCharInLine);
+      const selected = line.slice(startCharInLine, endCharInLine);
+      const after = line.slice(endCharInLine);
+      line = `${before}>>> ${selected} <<<${after}`;
+    } else if (i === startLineIndex) {
+      // Start of multi-line selection
+      const before = line.slice(0, startCharInLine);
+      const selected = line.slice(startCharInLine);
+      line = `${before}>>> ${selected}`;
+    } else if (i === endLineIndex) {
+      // End of multi-line selection
+      const selected = line.slice(0, endCharInLine);
+      const after = line.slice(endCharInLine);
+      line = `${selected} <<<${after}`;
+    }
+
+    outputLines.push(truncateLine(line));
+  }
+
+  return {
+    lines: outputLines,
+    startLine: startLineIndex + 1, // 1-based
+    endLine: endLineIndex + 1, // 1-based
+  };
+}
+
+/**
+ * Format extracted context for LLM clipboard copy.
+ */
+export function formatForLLM({
+  context,
+  fileName,
+  comment,
+}: FormatOptions): string {
+  const header = `# From: ${fileName}`;
+  const lineRange = `Lines ${context.startLine}-${context.endLine}:`;
+  const body = ["---", ...context.lines, "---"].join("\n");
+
+  const parts = [header, "", lineRange, body];
+
+  if (comment) {
+    parts.push("", `Comment: ${comment}`);
+  }
+
+  return parts.join("\n");
+}

package/src/lib/export.bench.ts

@@ -0,0 +1,35 @@
+import { bench, describe } from "vitest";
+import {
+  COMMENTS_1,
+  COMMENTS_10,
+  COMMENTS_50,
+} from "./__fixtures__/bench-data";
+import { generatePrompt, generateRawText } from "./export";
+
+describe("generatePrompt", () => {
+  bench("1 comment", () => {
+    generatePrompt(COMMENTS_1, "test.md");
+  });
+
+  bench("10 comments", () => {
+    generatePrompt(COMMENTS_10, "test.md");
+  });
+
+  bench("50 comments", () => {
+    generatePrompt(COMMENTS_50, "test.md");
+  });
+});
+
+describe("generateRawText", () => {
+  bench("1 comment", () => {
+    generateRawText(COMMENTS_1);
+  });
+
+  bench("10 comments", () => {
+    generateRawText(COMMENTS_10);
+  });
+
+  bench("50 comments", () => {
+    generateRawText(COMMENTS_50);
+  });
+});

package/src/lib/export.ts

@@ -0,0 +1,43 @@
+import type { Comment, Document } from "../types";
+
+export function generatePrompt(comments: Comment[], fileName: string): string {
+  const prompt = comments
+    .map((c) => {
+      return `---\nSelected text: "${c.selectedText}"\nComment: ${c.comment}`;
+    })
+    .join("\n\n");
+
+  return `# Review Comments for ${fileName}\n\n${prompt}`;
+}
+
+export function generateRawText(comments: Comment[]): string {
+  return comments
+    .map((c) => `${c.selectedText}\n\n${c.comment}`)
+    .join("\n\n---\n\n");
+}
+
+export function exportCommentsAsJson(
+  comments: Comment[],
+  document: Document,
+): void {
+  const data = {
+    filePath: document.filePath,
+    fileName: document.fileName,
+    exportedAt: new Date().toISOString(),
+    comments: comments.map((c) => ({
+      selectedText: c.selectedText,
+      comment: c.comment,
+      createdAt: c.createdAt,
+    })),
+  };
+
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = window.document.createElement("a");
+  a.href = url;
+  a.download = `${document.fileName}-comments.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}

package/src/lib/highlight/colors.ts

@@ -0,0 +1,37 @@
+/**
+ * Color palette for comment highlights.
+ * Colors are assigned by document position (top-to-bottom).
+ */
+
+export const COMMENT_COLORS = [
+  {
+    name: "amber",
+    bg: "rgba(245, 222, 160, 0.5)",
+    bgFocused: "rgba(228, 195, 110, 0.65)",
+    border: "#c9a84a",
+    text: "#8b6914",
+  },
+  {
+    name: "blue",
+    bg: "rgba(168, 196, 228, 0.5)",
+    bgFocused: "rgba(130, 168, 210, 0.65)",
+    border: "#5b7fa8",
+    text: "#3d5f8a",
+  },
+  {
+    name: "green",
+    bg: "rgba(170, 210, 170, 0.5)",
+    bgFocused: "rgba(130, 185, 135, 0.65)",
+    border: "#5a9a62",
+    text: "#3d6e45",
+  },
+  {
+    name: "rose",
+    bg: "rgba(225, 180, 185, 0.5)",
+    bgFocused: "rgba(205, 145, 155, 0.65)",
+    border: "#b86b78",
+    text: "#8a4a55",
+  },
+] as const;
+
+export type CommentColor = (typeof COMMENT_COLORS)[number];

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

@@ -0,0 +1,98 @@
+import { describe, expect, it } from "vitest";
+import { findTextPosition } from "./core";
+
+describe("findTextPosition", () => {
+  it("finds single occurrence", () => {
+    const result = findTextPosition("hello world", "world");
+    expect(result).toEqual({ start: 6, end: 11 });
+  });
+
+  it("finds text at start", () => {
+    const result = findTextPosition("hello world", "hello");
+    expect(result).toEqual({ start: 0, end: 5 });
+  });
+
+  it("returns null for no match", () => {
+    expect(findTextPosition("hello", "xyz")).toBeUndefined();
+  });
+
+  it("returns null for empty selectedText", () => {
+    expect(findTextPosition("hello world", "")).toBeUndefined();
+  });
+
+  it("returns null for empty textContent", () => {
+    expect(findTextPosition("", "hello")).toBeUndefined();
+  });
+
+  it("returns null for both empty", () => {
+    expect(findTextPosition("", "")).toBeUndefined();
+  });
+
+  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);
+    });
+
+    it("finds first occurrence when hint is 0", () => {
+      const text = "the cat and the dog and the bird";
+      const result = findTextPosition(text, "the", 0);
+      expect(result?.start).toBe(0);
+    });
+
+    it("finds first occurrence when no hint provided", () => {
+      const text = "the cat and the dog and the bird";
+      const result = findTextPosition(text, "the");
+      expect(result?.start).toBe(0);
+    });
+
+    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);
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles single character search", () => {
+      const result = findTextPosition("hello", "l");
+      expect(result).toEqual({ start: 2, end: 3 });
+    });
+
+    it("handles overlapping matches (returns first)", () => {
+      const result = findTextPosition("aaa", "aa");
+      expect(result).toEqual({ start: 0, end: 2 });
+    });
+
+    it("handles multiline content", () => {
+      const text = "line one\nline two\nline three";
+      const result = findTextPosition(text, "two");
+      expect(result).toEqual({ start: 14, end: 17 });
+    });
+
+    it("handles unicode", () => {
+      const text = "こんにちは世界";
+      const result = findTextPosition(text, "世界");
+      expect(result).toEqual({ start: 5, end: 7 });
+    });
+
+    it("is case sensitive", () => {
+      const result = findTextPosition("Hello World", "hello");
+      expect(result).toBeUndefined();
+    });
+  });
+});

package/src/lib/highlight/core.ts

@@ -0,0 +1,54 @@
+import type { TextPosition } from "./types";
+
+/**
+ * Find text position in content, handling duplicate occurrences.
+ * Returns the occurrence closest to hintOffset when multiple exist.
+ */
+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,
+    };
+  }
+
+  // Multiple occurrences: find closest to hint offset
+  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,
+  };
+}