@peaske7/readit 0.1.4 → 0.1.5

package/e2e/persistence-file.spec.ts

@@ -0,0 +1,342 @@
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import * as os from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { expect, test } from "@playwright/test";
+import { spawnCli } from "./utils/cli";
+import { addComment, selectTextInArticle } from "./utils/selection";
+
+const FIXTURES_DIR = resolve(import.meta.dirname, "fixtures");
+
+/**
+ * Get the expected comment file path for a source file.
+ */
+function getCommentPath(sourcePath: string): string {
+  const absolute = resolve(sourcePath);
+  const normalized = absolute.replace(/^\//, "").replace(/^[A-Z]:[\\/]/, "");
+  const ext = normalized.lastIndexOf(".");
+  const withoutExt = ext > 0 ? normalized.slice(0, ext) : normalized;
+  return join(os.homedir(), ".readit", "comments", `${withoutExt}.comments.md`);
+}
+
+/**
+ * Clean up comment file for a source file.
+ */
+function cleanupCommentFile(sourcePath: string): void {
+  const commentPath = getCommentPath(sourcePath);
+  if (existsSync(commentPath)) {
+    rmSync(commentPath);
+  }
+}
+
+test.describe("File-Based Comment Persistence", () => {
+  const sampleMdPath = resolve(FIXTURES_DIR, "sample.md");
+
+  test.beforeEach(() => {
+    // Clean up any existing comment file before each test
+    cleanupCommentFile(sampleMdPath);
+  });
+
+  test.afterEach(() => {
+    // Clean up after each test
+    cleanupCommentFile(sampleMdPath);
+  });
+
+  test("comments are saved to markdown file", async ({ page }) => {
+    const { url, cleanup } = await spawnCli(sampleMdPath, {
+      port: 4590,
+      clean: false,
+    });
+
+    try {
+      await page.goto(url);
+
+      // Wait for document to load
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      // Add a comment
+      const textToSelect = "testing text selection";
+      await selectTextInArticle(page, textToSelect);
+
+      const commentText = "This is a test comment for file persistence";
+      await addComment(page, commentText);
+
+      // Wait for comment to be visible in UI
+      await expect(page.locator("body")).toContainText(commentText);
+
+      // Give time for the file to be written
+      await page.waitForTimeout(500);
+
+      // Verify the comment file was created
+      const commentPath = getCommentPath(sampleMdPath);
+      expect(existsSync(commentPath)).toBe(true);
+
+      // Verify the file contains the comment
+      const fileContent = readFileSync(commentPath, "utf-8");
+      expect(fileContent).toContain(textToSelect);
+      expect(fileContent).toContain(commentText);
+      expect(fileContent).toContain("version: 1");
+    } finally {
+      await cleanup();
+    }
+  });
+
+  test("comments persist across page reload", async ({ page }) => {
+    const { url, cleanup } = await spawnCli(sampleMdPath, {
+      port: 4591,
+      clean: false,
+    });
+
+    try {
+      await page.goto(url);
+
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      // Add a comment
+      const textToSelect = "testing text selection";
+      await selectTextInArticle(page, textToSelect);
+
+      const commentText = "Persistent comment test";
+      await addComment(page, commentText);
+
+      // Wait for comment to appear
+      await expect(page.locator("body")).toContainText(commentText);
+
+      // Reload the page
+      await page.reload();
+
+      // Wait for document to reload
+      await expect(article).toBeVisible();
+
+      // Verify comment still exists after reload
+      await expect(page.locator("body")).toContainText(commentText);
+
+      // Verify highlight still exists
+      const highlight = article.locator("mark[data-comment-id]").first();
+      await expect(highlight).toBeVisible();
+    } finally {
+      await cleanup();
+    }
+  });
+
+  test("comments persist across server restart", async ({ page }) => {
+    const PORT = 4592;
+
+    // First session: add a comment
+    const { url: url1, cleanup: cleanup1 } = await spawnCli(sampleMdPath, {
+      port: PORT,
+      clean: false,
+    });
+
+    const commentText = "Comment that survives restart";
+
+    try {
+      await page.goto(url1);
+
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      await selectTextInArticle(page, "testing text selection");
+      await addComment(page, commentText);
+
+      // Wait for comment to appear
+      await expect(page.locator("body")).toContainText(commentText);
+    } finally {
+      await cleanup1();
+    }
+
+    // Wait for server to fully shut down
+    await page.waitForTimeout(1000);
+
+    // Second session: verify comment persists
+    const { url: url2, cleanup: cleanup2 } = await spawnCli(sampleMdPath, {
+      port: PORT,
+      clean: false,
+    });
+
+    try {
+      await page.goto(url2);
+
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      // Comment should still exist from previous session
+      await expect(page.locator("body")).toContainText(commentText);
+
+      // Highlight should still exist
+      const highlight = article.locator("mark[data-comment-id]").first();
+      await expect(highlight).toBeVisible();
+    } finally {
+      await cleanup2();
+    }
+  });
+
+  test("--clean flag deletes comment file", async ({ page }) => {
+    const PORT = 4593;
+
+    // First, create a comment file manually
+    const commentPath = getCommentPath(sampleMdPath);
+    const commentDir = dirname(commentPath);
+    mkdirSync(commentDir, { recursive: true });
+    writeFileSync(
+      commentPath,
+      `---
+source: ${sampleMdPath}
+hash: abc123
+version: 1
+---
+
+<!-- c:12345678|L5|2024-12-24T10:00:00Z -->
+> testing text selection
+
+Pre-existing comment to be cleared.
+
+---
+`,
+      "utf-8",
+    );
+
+    expect(existsSync(commentPath)).toBe(true);
+
+    // Start server with --clean flag
+    const { url, cleanup } = await spawnCli(sampleMdPath, {
+      port: PORT,
+      clean: true,
+    });
+
+    try {
+      await page.goto(url);
+
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      // Wait for clean operation to complete
+      await page.waitForTimeout(500);
+
+      // Verify no comments in UI
+      const highlight = article.locator("mark[data-comment-id]");
+      await expect(highlight).toHaveCount(0);
+    } finally {
+      await cleanup();
+    }
+  });
+
+  test("edit updates the comment file", async ({ page }) => {
+    const { url, cleanup } = await spawnCli(sampleMdPath, {
+      port: 4594,
+      clean: false,
+    });
+
+    try {
+      await page.goto(url);
+
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      // Add initial comment
+      const textToSelect = "testing text selection";
+      await selectTextInArticle(page, textToSelect);
+      const initialComment = "Initial comment text";
+      await addComment(page, initialComment);
+
+      await expect(page.locator("body")).toContainText(initialComment);
+
+      // Wait for file to be written
+      await page.waitForTimeout(500);
+
+      // Verify initial comment in file
+      const commentPath = getCommentPath(sampleMdPath);
+      let fileContent = readFileSync(commentPath, "utf-8");
+      expect(fileContent).toContain(initialComment);
+
+      // Find the margin note containing the selected text (stable identifier)
+      const marginNote = page
+        .locator(".group")
+        .filter({ hasText: textToSelect })
+        .first();
+      await marginNote.hover();
+
+      // Find and click edit button
+      const editButton = marginNote.locator('button:has-text("Edit")');
+      await editButton.click();
+
+      // Wait for edit mode to activate
+      const textarea = marginNote.locator("textarea");
+      await expect(textarea).toBeVisible();
+
+      // Clear and type new text
+      await textarea.fill("Updated comment text");
+
+      // Save edit
+      const saveButton = marginNote.locator('button:has-text("Save")');
+      await saveButton.click();
+
+      // Wait for file to be updated
+      await page.waitForTimeout(500);
+
+      // Verify updated comment in file
+      fileContent = readFileSync(commentPath, "utf-8");
+      expect(fileContent).toContain("Updated comment text");
+    } finally {
+      await cleanup();
+    }
+  });
+
+  test("delete removes comment from file", async ({ page }) => {
+    const { url, cleanup } = await spawnCli(sampleMdPath, {
+      port: 4595,
+      clean: false,
+    });
+
+    try {
+      await page.goto(url);
+
+      const article = page.locator("article");
+      await expect(article).toBeVisible();
+
+      // Add a comment
+      await selectTextInArticle(page, "testing text selection");
+      const commentText = "Comment to be deleted";
+      await addComment(page, commentText);
+
+      await expect(page.locator("body")).toContainText(commentText);
+
+      // Wait for file to be written
+      await page.waitForTimeout(500);
+
+      // Verify comment in file
+      const commentPath = getCommentPath(sampleMdPath);
+      let fileContent = readFileSync(commentPath, "utf-8");
+      expect(fileContent).toContain(commentText);
+
+      // Find the margin note containing the comment
+      const marginNote = page
+        .locator(".group")
+        .filter({ hasText: commentText })
+        .first();
+      await marginNote.hover();
+
+      // Click delete button
+      const deleteButton = marginNote.locator('button:has-text("Delete")');
+      await deleteButton.click();
+
+      // Wait for file to be updated
+      await page.waitForTimeout(500);
+
+      // Verify comment removed from file (file may be deleted if no comments left)
+      if (existsSync(commentPath)) {
+        fileContent = readFileSync(commentPath, "utf-8");
+        expect(fileContent).not.toContain(commentText);
+      }
+    } finally {
+      await cleanup();
+    }
+  });
+});

package/e2e/utils/cli.ts

@@ -0,0 +1,84 @@
+import type { ChildProcess } from "node:child_process";
+import { spawn } from "node:child_process";
+import { resolve } from "node:path";
+
+interface SpawnCliResult {
+  url: string;
+  process: ChildProcess;
+  cleanup: () => Promise<void>;
+}
+
+interface SpawnCliOptions {
+  port?: number;
+  clean?: boolean;
+}
+
+const CLI_PATH = resolve(import.meta.dirname, "../../dist/index.js");
+
+export async function spawnCli(
+  fixturePath: string,
+  options: SpawnCliOptions = {},
+): Promise<SpawnCliResult> {
+  const { port = 4567, clean = true } = options;
+
+  const args = [CLI_PATH, fixturePath, "--no-open", "--port", String(port)];
+  if (clean) {
+    args.push("--clean");
+  }
+
+  const cliProcess = spawn("bun", args, {
+    cwd: resolve(import.meta.dirname, "../.."),
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+
+  const url = await waitForServerReady(cliProcess);
+
+  return {
+    url,
+    process: cliProcess,
+    cleanup: async () => {
+      cliProcess.kill("SIGTERM");
+      await new Promise<void>((resolve) => {
+        cliProcess.once("exit", () => resolve());
+        setTimeout(resolve, 1000); // Fallback timeout
+      });
+    },
+  };
+}
+
+function waitForServerReady(cliProcess: ChildProcess): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let output = "";
+
+    const timeout = setTimeout(() => {
+      reject(new Error("Server did not start within timeout"));
+    }, 10_000);
+
+    cliProcess.stdout?.on("data", (data: Buffer) => {
+      output += data.toString();
+
+      // Look for "URL:  http://..." in output
+      const urlMatch = output.match(/URL:\s+(http:\/\/[^\s]+)/);
+      if (urlMatch) {
+        clearTimeout(timeout);
+        resolve(urlMatch[1]);
+      }
+    });
+
+    cliProcess.stderr?.on("data", (data: Buffer) => {
+      console.error("[CLI stderr]", data.toString());
+    });
+
+    cliProcess.on("error", (err) => {
+      clearTimeout(timeout);
+      reject(err);
+    });
+
+    cliProcess.on("exit", (code) => {
+      if (code !== 0 && code !== null) {
+        clearTimeout(timeout);
+        reject(new Error(`CLI exited with code ${code}: ${output}`));
+      }
+    });
+  });
+}

package/e2e/utils/selection.ts

@@ -0,0 +1,135 @@
+import type { FrameLocator, Page } from "@playwright/test";
+
+/**
+ * Select text within an article element (for markdown documents)
+ * Uses custom event to trigger selection handler (workaround for Playwright mouse issues)
+ */
+export async function selectTextInArticle(
+  page: Page,
+  textToSelect: string,
+): Promise<void> {
+  // Find text and calculate offsets, then dispatch custom event
+  await page.evaluate((text) => {
+    const article = document.querySelector("article");
+    if (!article) throw new Error("Article element not found");
+
+    const walker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT);
+    let currentOffset = 0;
+
+    while (walker.nextNode()) {
+      const textNode = walker.currentNode as Text;
+      const content = textNode.textContent || "";
+      const index = content.indexOf(text);
+
+      if (index !== -1) {
+        const startOffset = currentOffset + index;
+        const endOffset = startOffset + text.length;
+
+        // Dispatch custom event that DocumentViewer listens for
+        const event = new CustomEvent("test:select-text", {
+          detail: { text, startOffset, endOffset },
+        });
+        window.dispatchEvent(event);
+        return;
+      }
+
+      currentOffset += content.length;
+    }
+
+    throw new Error(`Text "${text}" not found in article`);
+  }, textToSelect);
+
+  // Wait for React to process the selection
+  await page.waitForTimeout(100);
+}
+
+/**
+ * Select text within an iframe (for HTML documents)
+ * Uses custom event to trigger selection handler (same as markdown)
+ */
+export async function selectTextInIframe(
+  page: Page,
+  _iframe: FrameLocator,
+  textToSelect: string,
+): Promise<void> {
+  // Get the actual frame object for evaluation
+  const frame = page.frame({ url: /^about:srcdoc/ }) || page.frames()[1];
+  if (!frame) throw new Error("Could not find iframe frame");
+
+  // Calculate offsets in iframe, then dispatch custom event to parent
+  const offsets = await frame.evaluate((text) => {
+    const body = document.body;
+    const walker = document.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+    let currentOffset = 0;
+
+    while (walker.nextNode()) {
+      const textNode = walker.currentNode as Text;
+      const content = textNode.textContent || "";
+      const index = content.indexOf(text);
+
+      if (index !== -1) {
+        const startOffset = currentOffset + index;
+        const endOffset = startOffset + text.length;
+        return { text, startOffset, endOffset };
+      }
+
+      currentOffset += content.length;
+    }
+
+    throw new Error(`Text "${text}" not found in iframe`);
+  }, textToSelect);
+
+  // Dispatch custom event to parent window (IframeContainer listens for this)
+  await page.evaluate((detail) => {
+    const event = new CustomEvent("test:select-text", { detail });
+    window.dispatchEvent(event);
+  }, offsets);
+
+  // Wait for React to process state update
+  await page.waitForTimeout(200);
+
+  // Manually send applyHighlights to iframe (workaround for isReadyRef timing)
+  // This ensures the iframe gets the highlight even if React's useEffect hasn't fired
+  await page.evaluate(
+    (selection) => {
+      const iframe = document.querySelector("iframe");
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.postMessage(
+          {
+            type: "applyHighlights",
+            comments: [],
+            pendingSelection: selection,
+          },
+          "*",
+        );
+      }
+    },
+    { startOffset: offsets.startOffset, endOffset: offsets.endOffset },
+  );
+
+  // Wait for iframe to apply highlights
+  await page.waitForTimeout(200);
+}
+
+/**
+ * Add a comment to the current selection
+ * Assumes CommentInputArea is visible
+ */
+export async function addComment(
+  page: Page,
+  commentText: string,
+): Promise<void> {
+  // Wait for the comment input textarea to appear
+  // Give more time for iframe postMessage round-trip
+  const textarea = page.locator('textarea[placeholder="Add your comment..."]');
+  await textarea.waitFor({ state: "visible", timeout: 10000 });
+
+  // Fill in the comment
+  await textarea.fill(commentText);
+
+  // Click the Add button
+  await page.getByRole("button", { name: "Add" }).click();
+
+  // Wait for the textarea to disappear (comment submitted)
+  await textarea.waitFor({ state: "hidden", timeout: 5000 });
+}

package/{dist/index.html → index.html}

@@ -7,10 +7,16 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
-    <script type="module" crossorigin src="/assets/index-CKVArt9D.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DzRKJazf.css">
+    <script>
+      (() => {
+        var t = localStorage.getItem("readit:theme");
+        var d = t === "dark" || (t !== "light" && matchMedia("(prefers-color-scheme: dark)").matches);
+        if (d) document.documentElement.classList.add("dark");
+      })();
+    </script>
   </head>
   <body class="min-h-screen">
     <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/lefthook.yml

@@ -0,0 +1,8 @@
+pre-commit:
+  parallel: true
+  commands:
+    check:
+      glob: "*.{ts,tsx,json}"
+      run: bunx biome check --no-errors-on-unmatched {staged_files}
+    typecheck:
+      run: bun run typecheck

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@peaske7/readit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A CLI tool to review Markdown documents with inline comments",
-  "type": "module",
+  "author": "Jay Shimada <peaske@pm.me>",
+  "license": "MIT",
   "keywords": [
     "markdown",
     "review",
@@ -10,32 +11,15 @@
     "comments",
     "documentation"
   ],
-  "author": "Jay Shimada <peaske@pm.me>",
-  "license": "MIT",
-  "bin": {
-    "readit": "dist/index.js"
-  },
+  "type": "module",
   "main": "./dist/index.js",
-  "directories": {
-    "doc": "docs"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/peaske7/readit.git"
-  },
-  "bugs": {
-    "url": "https://github.com/peaske7/readit/issues"
-  },
-  "homepage": "https://github.com/peaske7/readit#readme",
-  "files": [
-    "dist"
-  ],
   "scripts": {
-    "dev": "concurrently \"NODE_ENV=development tsx watch src/cli/index.ts -- test.md\" \"wait-on tcp:4567 && vite\"",
-    "build": "vite build && npm run build:cli",
-    "build:cli": "tsup src/cli/index.ts --format esm --outDir dist --target es2022",
-    "start": "npm run build && node dist/index.js",
+    "dev": "NODE_ENV=development bun --watch src/cli/index.ts -- test.md & bunx vite",
+    "build": "bunx vite build && bun run build:cli",
+    "build:cli": "bun build src/cli/index.ts --outdir dist --target bun --format esm --packages external",
+    "start": "bun run build && bun dist/index.js",
     "test": "vitest run",
+    "bench": "vitest bench",
     "test:watch": "vitest",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
@@ -44,15 +28,17 @@
     "format": "biome format --write .",
     "lint": "biome lint .",
     "typecheck": "tsc --noEmit",
-    "prepack": "pnpm run build",
+    "prepack": "bun run build",
     "prepare": "lefthook install || true"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "commander": "^14.0.3",
     "dompurify": "^3.3.3",
-    "express": "^5.2.1",
     "lucide-react": "^0.577.0",
     "mermaid": "^11.13.0",
     "open": "^11.0.0",
@@ -66,7 +52,8 @@
     "tailwind-merge": "^3.5.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.1.0",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.6",
@@ -74,29 +61,20 @@
     "@tailwindcss/vite": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/bun": "^1.3.10",
     "@types/dompurify": "^3.2.0",
-    "@types/express": "^5.0.6",
     "@types/jsdom": "^28.0.0",
-    "@types/node": "^25.4.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^6.0.0",
-    "concurrently": "^9.2.1",
     "jsdom": "^28.1.0",
     "lefthook": "^2.1.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.2.1",
-    "tsup": "^8.5.1",
-    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
-    "vitest": "^4.1.0",
-    "wait-on": "^9.0.4"
-  },
-  "packageManager": "pnpm@10.26.0",
-  "engines": {
-    "node": ">=22.0.0"
+    "vitest": "^4.1.0"
   }
 }