@peaske7/readit 0.1.7 → 0.2.0

package/src/lib/html-processor.test.tsx

@@ -1,170 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { processHtml } from "./html-processor";
-
-describe("processHtml", () => {
-  describe("basic HTML rendering", () => {
-    it("renders simple HTML elements", () => {
-      const result = processHtml("<p>Hello, world!</p>");
-      render(result);
-      expect(screen.getByText("Hello, world!")).toBeInTheDocument();
-    });
-
-    it("renders headings", () => {
-      const result = processHtml("<h1>Title</h1><h2>Subtitle</h2>");
-      render(result);
-      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-        "Title",
-      );
-      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
-        "Subtitle",
-      );
-    });
-
-    it("renders links", () => {
-      const result = processHtml('<a href="https://example.com">Link</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Link" });
-      expect(link).toHaveAttribute("href", "https://example.com");
-    });
-
-    it("renders lists", () => {
-      const result = processHtml("<ul><li>Item 1</li><li>Item 2</li></ul>");
-      render(result);
-      expect(screen.getByText("Item 1")).toBeInTheDocument();
-      expect(screen.getByText("Item 2")).toBeInTheDocument();
-    });
-  });
-
-  describe("dangerous element stripping", () => {
-    it("strips script tags and shows placeholder", () => {
-      const result = processHtml('<script>alert("xss")</script>');
-      render(result);
-      expect(screen.getByText("<script> removed")).toBeInTheDocument();
-      expect(screen.queryByText('alert("xss")')).not.toBeInTheDocument();
-    });
-
-    it("strips iframe tags and shows placeholder", () => {
-      const result = processHtml('<iframe src="https://evil.com"></iframe>');
-      render(result);
-      expect(screen.getByText("<iframe> removed")).toBeInTheDocument();
-    });
-
-    it("strips object tags and shows placeholder", () => {
-      const result = processHtml('<object data="malware.swf"></object>');
-      render(result);
-      expect(screen.getByText("<object> removed")).toBeInTheDocument();
-    });
-
-    it("strips embed tags and shows placeholder", () => {
-      const result = processHtml('<embed src="malware.swf">');
-      render(result);
-      expect(screen.getByText("<embed> removed")).toBeInTheDocument();
-    });
-  });
-
-  describe("dangerous attribute stripping", () => {
-    it("strips onclick handlers", () => {
-      const result = processHtml('<button onclick="alert(1)">Click</button>');
-      render(result);
-      const button = screen.getByRole("button", { name: "Click" });
-      expect(button).not.toHaveAttribute("onclick");
-    });
-
-    it("strips onerror handlers", () => {
-      const result = processHtml('<img src="x" onerror="alert(1)" alt="test">');
-      render(result);
-      const img = screen.getByRole("img", { name: "test" });
-      expect(img).not.toHaveAttribute("onerror");
-    });
-
-    it("strips onload handlers", () => {
-      const result = processHtml('<div onload="alert(1)">Content</div>');
-      render(result);
-      const div = screen.getByText("Content");
-      expect(div).not.toHaveAttribute("onload");
-    });
-
-    it("strips onmouseover handlers", () => {
-      const result = processHtml('<div onmouseover="alert(1)">Hover</div>');
-      render(result);
-      const div = screen.getByText("Hover");
-      expect(div).not.toHaveAttribute("onmouseover");
-    });
-  });
-
-  describe("dangerous URL neutralization", () => {
-    it("neutralizes javascript: URLs in href", () => {
-      const result = processHtml('<a href="javascript:alert(1)">Click</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Click" });
-      expect(link).toHaveAttribute("href", "#");
-    });
-
-    it("neutralizes javascript: URLs in src", () => {
-      const result = processHtml(
-        '<img src="javascript:alert(1)" alt="bad img">',
-      );
-      render(result);
-      const img = screen.getByRole("img", { name: "bad img" });
-      expect(img).toHaveAttribute("src", "#");
-    });
-
-    it("neutralizes data: URLs", () => {
-      const result = processHtml(
-        '<a href="data:text/html,<script>alert(1)</script>">Click</a>',
-      );
-      render(result);
-      const link = screen.getByRole("link", { name: "Click" });
-      expect(link).toHaveAttribute("href", "#");
-    });
-
-    it("neutralizes vbscript: URLs", () => {
-      const result = processHtml('<a href="vbscript:msgbox(1)">Click</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Click" });
-      expect(link).toHaveAttribute("href", "#");
-    });
-
-    it("preserves safe URLs", () => {
-      const result = processHtml('<a href="https://example.com">Safe</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Safe" });
-      expect(link).toHaveAttribute("href", "https://example.com");
-    });
-  });
-
-  describe("mixed content", () => {
-    it("handles complex HTML with multiple dangerous elements", () => {
-      const html = `
-        <div>
-          <h1>Title</h1>
-          <script>alert("xss")</script>
-          <p onclick="steal()">Paragraph with handler</p>
-          <a href="javascript:void(0)">Bad link</a>
-          <a href="https://safe.com">Safe link</a>
-          <iframe src="evil.com"></iframe>
-        </div>
-      `;
-      render(processHtml(html));
-
-      // Script tag replaced with placeholder
-      expect(screen.getByText("<script> removed")).toBeInTheDocument();
-
-      // Event handler stripped
-      const paragraph = screen.getByText("Paragraph with handler");
-      expect(paragraph).not.toHaveAttribute("onclick");
-
-      // Dangerous URL neutralized
-      const badLink = screen.getByRole("link", { name: "Bad link" });
-      expect(badLink).toHaveAttribute("href", "#");
-
-      // Safe URL preserved
-      const safeLink = screen.getByRole("link", { name: "Safe link" });
-      expect(safeLink).toHaveAttribute("href", "https://safe.com");
-
-      // Iframe tag replaced with placeholder
-      expect(screen.getByText("<iframe> removed")).toBeInTheDocument();
-    });
-  });
-});

package/src/lib/html-processor.tsx

@@ -1,95 +0,0 @@
-import type { Element, Root } from "hast";
-import { TriangleAlert } from "lucide-react";
-import type { ReactNode } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import rehypeParse from "rehype-parse";
-import rehypeReact from "rehype-react";
-import { unified } from "unified";
-import { visit } from "unist-util-visit";
-
-/**
- * Placeholder component for stripped dangerous elements
- */
-function StrippedElement({ tagName }: { tagName: string }) {
-  return (
-    <span className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-red-50 text-red-700 border border-red-200 rounded-md font-mono">
-      <TriangleAlert className="w-4 h-4" />
-      &lt;{tagName}&gt; removed
-    </span>
-  );
-}
-
-/**
- * Component mappings for dangerous elements - renders placeholders instead
- */
-const dangerousElementComponents = {
-  script: () => <StrippedElement tagName="script" />,
-  // Style tags targeting body/html/* can leak outside Shadow DOM, so strip them
-  // Our base styles in ShadowContainer provide typography instead
-  style: () => null,
-  link: () => null, // External stylesheets break app styles
-  iframe: () => <StrippedElement tagName="iframe" />,
-  object: () => <StrippedElement tagName="object" />,
-  embed: () => <StrippedElement tagName="embed" />,
-  frame: () => <StrippedElement tagName="frame" />,
-  frameset: () => <StrippedElement tagName="frameset" />,
-};
-
-/**
- * Rehype plugin to strip event handler attributes (onclick, onerror, etc.)
- * and dangerous href/src values (javascript:, data:, vbscript:)
- */
-function rehypeStripDangerousAttributes() {
-  const dangerousSchemes = /^(javascript|vbscript|data):/i;
-
-  return (tree: Root) => {
-    visit(tree, "element", (node: Element) => {
-      const props = node.properties;
-      if (!props) return;
-
-      for (const key of Object.keys(props)) {
-        // Strip all event handlers (on*)
-        if (key.startsWith("on") || key.startsWith("On")) {
-          delete props[key];
-          continue;
-        }
-
-        // Neutralize dangerous href/src schemes
-        if (key === "href" || key === "src") {
-          const value = props[key];
-          if (
-            typeof value === "string" &&
-            dangerousSchemes.test(value.trim())
-          ) {
-            props[key] = "#";
-          }
-        }
-      }
-    });
-  };
-}
-
-/**
- * Create the unified processor for HTML -> React conversion
- */
-const processor = unified()
-  .use(rehypeParse, { fragment: true })
-  .use(rehypeStripDangerousAttributes)
-  .use(rehypeReact, {
-    jsx,
-    jsxs,
-    Fragment,
-    components: dangerousElementComponents,
-  });
-
-/**
- * Process HTML content and return safe React elements
- *
- * - Dangerous tags (script, iframe, etc.) become visible placeholders
- * - Event handlers (onclick, onerror, etc.) are stripped
- * - Dangerous URLs (javascript:, data:, etc.) are neutralized
- */
-export function processHtml(content: string): ReactNode {
-  const result = processor.processSync(content);
-  return result.result as ReactNode;
-}

package/src/lib/i18n/completeness.test.ts

@@ -1,51 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { en } from "./en";
-import { ja } from "./ja";
-
-describe("translation completeness", () => {
-  const enKeys = Object.keys(en).sort();
-  const jaKeys = Object.keys(ja).sort();
-
-  it("en and ja have the same keys", () => {
-    expect(enKeys).toEqual(jaKeys);
-  });
-
-  // Prefix/suffix keys may be intentionally empty in some locales
-  // (e.g., Japanese has no prefix before the command)
-  const ALLOW_EMPTY = new Set(["app.noDocumentsHintPrefix"]);
-
-  it("no empty string values in en", () => {
-    for (const [key, value] of Object.entries(en)) {
-      if (ALLOW_EMPTY.has(key)) continue;
-      expect(value, `en.${key} is empty`).not.toBe("");
-    }
-  });
-
-  it("no empty string values in ja", () => {
-    for (const [key, value] of Object.entries(ja)) {
-      if (ALLOW_EMPTY.has(key)) continue;
-      expect(value, `ja.${key} is empty`).not.toBe("");
-    }
-  });
-
-  it("interpolation placeholders match between locales", () => {
-    const placeholderPattern = /\{\{(\w+)\}\}/g;
-
-    for (const key of enKeys) {
-      const enValue = en[key as keyof typeof en];
-      const jaValue = ja[key as keyof typeof ja];
-
-      const enPlaceholders = [...enValue.matchAll(placeholderPattern)]
-        .map((m) => m[1])
-        .sort();
-      const jaPlaceholders = [...jaValue.matchAll(placeholderPattern)]
-        .map((m) => m[1])
-        .sort();
-
-      expect(
-        enPlaceholders,
-        `Placeholder mismatch for key "${key}": en has ${JSON.stringify(enPlaceholders)}, ja has ${JSON.stringify(jaPlaceholders)}`,
-      ).toEqual(jaPlaceholders);
-    }
-  });
-});

package/src/lib/i18n/translations.test.ts

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { createT } from "./translations";
-import { Locales } from "./types";
-
-describe("createT", () => {
-  it("returns English strings for en locale", () => {
-    const t = createT(Locales.EN);
-    expect(t("app.loading")).toBe("Loading...");
-    expect(t("settings.title")).toBe("Settings");
-    expect(t("comment.placeholder")).toBe("Add your comment...");
-  });
-
-  it("returns Japanese strings for ja locale", () => {
-    const t = createT(Locales.JA);
-    expect(t("app.loading")).toBe("読み込み中...");
-    expect(t("settings.title")).toBe("設定");
-    expect(t("comment.placeholder")).toBe("コメントを入力...");
-  });
-
-  it("interpolates {{placeholder}} params", () => {
-    const tEn = createT(Locales.EN);
-    expect(tEn("commentNav.of", { current: 1, total: 5 })).toBe("1 of 5");
-
-    const tJa = createT(Locales.JA);
-    expect(tJa("commentNav.of", { current: 1, total: 5 })).toBe("1 / 5");
-  });
-
-  it("interpolates multiple params", () => {
-    const t = createT(Locales.EN);
-    expect(t("commentManager.deleteAllConfirm", { count: 3 })).toBe(
-      "Delete all 3 comments?",
-    );
-  });
-
-  it("returns string unchanged when no params provided", () => {
-    const t = createT(Locales.EN);
-    expect(t("app.footer")).toBe("Made with ❤️ by Jay and Claude");
-  });
-});

package/src/lib/layout-constants.ts

@@ -1,12 +0,0 @@
-// Layout constants for margin notes and document viewer
-
-export const HEADER_HEIGHT_PX = 48;
-
-// Minimum gap between margin notes (accounts for quote + comment + actions + padding)
-export const MARGIN_NOTE_MIN_GAP_PX = 150;
-
-// Height reserved for comment input form when selecting text
-export const COMMENT_INPUT_HEIGHT_PX = 160;
-
-// Minimap starts below the header
-export const MINIMAP_HEADER_OFFSET_PX = HEADER_HEIGHT_PX;

package/src/lib/margin-layout.bench.ts

@@ -1,28 +0,0 @@
-import { bench, describe } from "vitest";
-import { makeHighlightPositions } from "./__fixtures__/bench-data";
-import { resolveMarginNotePositions } from "./margin-layout";
-
-// Pre-compute fixture data outside bench loops
-const ids5 = Array.from({ length: 5 }, (_, i) => `c${i}`);
-const pos5 = makeHighlightPositions(5);
-
-const ids50 = Array.from({ length: 50 }, (_, i) => `c${i}`);
-const pos50 = makeHighlightPositions(50);
-
-describe("resolveMarginNotePositions", () => {
-  bench("5 notes, no input zone", () => {
-    resolveMarginNotePositions(ids5, pos5, undefined);
-  });
-
-  bench("5 notes, with input zone collision", () => {
-    resolveMarginNotePositions(ids5, pos5, 400);
-  });
-
-  bench("50 notes, no input zone", () => {
-    resolveMarginNotePositions(ids50, pos50, undefined);
-  });
-
-  bench("50 notes, with input zone collision", () => {
-    resolveMarginNotePositions(ids50, pos50, 3000);
-  });
-});

package/src/lib/scroll.test.ts

@@ -1,118 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { calculateScrollTarget, getElementTopInDocument } from "./scroll";
-
-describe("calculateScrollTarget", () => {
-  it("positions element at 25% from top by default", () => {
-    // Element at 1000px, viewport 800px
-    // Target offset = 800 * 0.25 = 200px
-    // Scroll target = 1000 - 200 = 800px
-    expect(
-      calculateScrollTarget({ elementTop: 1000, viewportHeight: 800 }),
-    ).toBe(800);
-  });
-
-  it("respects custom offset percent", () => {
-    // Element at 1000px, viewport 800px, offset 50%
-    // Target offset = 800 * 0.5 = 400px
-    // Scroll target = 1000 - 400 = 600px
-    expect(
-      calculateScrollTarget({
-        elementTop: 1000,
-        viewportHeight: 800,
-        offsetPercent: 0.5,
-      }),
-    ).toBe(600);
-  });
-
-  it("returns 0 when element is near top", () => {
-    // Element at 100px, viewport 800px
-    // Target offset = 200px
-    // Scroll target = max(0, 100 - 200) = 0
-    expect(
-      calculateScrollTarget({ elementTop: 100, viewportHeight: 800 }),
-    ).toBe(0);
-  });
-
-  it("returns 0 for element at position 0", () => {
-    expect(calculateScrollTarget({ elementTop: 0, viewportHeight: 800 })).toBe(
-      0,
-    );
-  });
-
-  it("handles small viewport", () => {
-    // Element at 500px, viewport 400px
-    // Target offset = 100px
-    // Scroll target = 500 - 100 = 400px
-    expect(
-      calculateScrollTarget({ elementTop: 500, viewportHeight: 400 }),
-    ).toBe(400);
-  });
-
-  it("handles zero offset percent", () => {
-    // Element at 1000px, no offset
-    // Scroll target = 1000px (element at very top of viewport)
-    expect(
-      calculateScrollTarget({
-        elementTop: 1000,
-        viewportHeight: 800,
-        offsetPercent: 0,
-      }),
-    ).toBe(1000);
-  });
-});
-
-describe("getElementTopInDocument", () => {
-  it("calculates position for element in main document (not scrolled)", () => {
-    // Element at 500px from viewport top, no scroll
-    const elementRect = { top: 500 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 0 })).toBe(500);
-  });
-
-  it("calculates position for element in main document (scrolled)", () => {
-    // Element at 200px from viewport top, scrolled 300px
-    // Absolute position = 300 + 200 = 500px
-    const elementRect = { top: 200 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 300 })).toBe(500);
-  });
-
-  it("calculates position for element inside iframe", () => {
-    // Iframe at 100px from viewport top
-    // Element at 150px from iframe top (inside iframe)
-    // Scrolled 50px
-    // Absolute position = 50 + 100 + 150 = 300px
-    const elementRect = { top: 150 };
-    expect(
-      getElementTopInDocument({
-        elementRect,
-        scrollY: 50,
-        iframeTopOffset: 100,
-      }),
-    ).toBe(300);
-  });
-
-  it("handles element at viewport top with scroll", () => {
-    // Element at 0px from viewport top, scrolled 1000px
-    const elementRect = { top: 0 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 1000 })).toBe(1000);
-  });
-
-  it("handles negative element position (above viewport)", () => {
-    // Element scrolled past viewport top
-    const elementRect = { top: -100 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 500 })).toBe(400);
-  });
-
-  it("handles iframe with element above iframe viewport", () => {
-    // Iframe at 200px, element at -50px within iframe (scrolled past)
-    // scrollY = 100
-    // Absolute position = 100 + 200 + (-50) = 250px
-    const elementRect = { top: -50 };
-    expect(
-      getElementTopInDocument({
-        elementRect,
-        scrollY: 100,
-        iframeTopOffset: 200,
-      }),
-    ).toBe(250);
-  });
-});

package/src/lib/scroll.ts

@@ -1,47 +0,0 @@
-/**
- * Scroll calculation utilities for TOC navigation.
- * These pure functions enable unit testing of scroll position calculations.
- */
-
-/**
- * Parameters for scroll target calculation.
- * Using object destructuring per style guide §3.5 for clarity.
- */
-export interface CalculateScrollTargetParams {
-  elementTop: number;
-  viewportHeight: number;
-  offsetPercent?: number;
-}
-
-export interface GetElementTopParams {
-  elementRect: { top: number };
-  scrollY: number;
-  iframeTopOffset?: number;
-}
-
-/**
- * Calculate the scroll target position to place an element at a comfortable
- * reading position (default: 25% from top of viewport).
- */
-export function calculateScrollTarget({
-  elementTop,
-  viewportHeight,
-  offsetPercent = 0.25,
-}: CalculateScrollTargetParams): number {
-  const targetOffset = viewportHeight * offsetPercent;
-  return Math.max(0, elementTop - targetOffset);
-}
-
-/**
- * Get an element's absolute position in the main document.
- *
- * For elements directly in the document: pass scrollY and the element.
- * For elements inside an iframe: also pass the iframe's top offset.
- */
-export function getElementTopInDocument({
-  elementRect,
-  scrollY,
-  iframeTopOffset,
-}: GetElementTopParams): number {
-  return scrollY + (iframeTopOffset ?? 0) + elementRect.top;
-}