@peaske7/readit 0.1.4 → 0.1.6

package/src/lib/html-processor.tsx

@@ -0,0 +1,95 @@
+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/layout-constants.ts

@@ -0,0 +1,12 @@
+// 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

@@ -0,0 +1,28 @@
+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/margin-layout.ts

@@ -0,0 +1,100 @@
+import {
+  COMMENT_INPUT_HEIGHT_PX,
+  MARGIN_NOTE_MIN_GAP_PX,
+} from "./layout-constants";
+
+interface NotePosition {
+  commentId: string;
+  top: number;
+}
+
+/**
+ * Resolves margin note positions to avoid overlaps.
+ *
+ * Algorithm:
+ * 1. Build initial positions from highlight positions
+ * 2. Handle input zone collision (push notes up or down to avoid input)
+ * 3. Resolve note-to-note overlaps:
+ *    - Pass 1: Notes above input zone → push UP
+ *    - Pass 2: Notes at/below input zone → push DOWN
+ *
+ * @param commentIds - Comment IDs in document order (sorted by startOffset)
+ * @param highlightPositions - Map of comment ID to top position
+ * @param pendingSelectionTop - Top position of input zone (if any)
+ * @returns Map of comment ID to resolved top position
+ */
+export function resolveMarginNotePositions(
+  commentIds: string[],
+  highlightPositions: Record<string, number>,
+  pendingSelectionTop: number | undefined,
+): Map<string, number> {
+  // Only include comments with known positions (avoids jolt to position 0)
+  const positions: NotePosition[] = commentIds
+    .filter((id) => id in highlightPositions)
+    .map((id) => ({
+      commentId: id,
+      top: highlightPositions[id],
+    }));
+
+  // Sort by top position
+  positions.sort((a, b) => a.top - b.top);
+
+  // Handle input zone collision - check visual overlap, not just top position
+  if (pendingSelectionTop !== null && pendingSelectionTop !== undefined) {
+    const inputStart = pendingSelectionTop;
+    const inputEnd = pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX;
+
+    for (const pos of positions) {
+      const noteBottom = pos.top + MARGIN_NOTE_MIN_GAP_PX;
+
+      // Check if note visually overlaps with input zone
+      const overlaps = noteBottom > inputStart && pos.top < inputEnd;
+
+      if (overlaps) {
+        if (pos.top < inputStart) {
+          // Note is above input but overlaps - push UP
+          pos.top = Math.max(0, inputStart - MARGIN_NOTE_MIN_GAP_PX);
+        } else {
+          // Note is within/below input zone - push DOWN
+          pos.top = inputEnd;
+        }
+      }
+    }
+    // Re-sort after potential position changes
+    positions.sort((a, b) => a.top - b.top);
+  }
+
+  // Resolve note-to-note overlaps
+  const inputStartForOverlap = pendingSelectionTop ?? Infinity;
+  const inputEndForOverlap =
+    pendingSelectionTop != null
+      ? pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX
+      : Infinity;
+
+  // Pass 1: Notes ABOVE input - resolve by pushing UP (bottom to top)
+  for (let i = positions.length - 2; i >= 0; i--) {
+    const curr = positions[i];
+    const next = positions[i + 1];
+    // Only process if next note is above the input zone
+    if (next.top >= inputStartForOverlap) continue;
+    if (next.top - curr.top < MARGIN_NOTE_MIN_GAP_PX) {
+      curr.top = Math.max(0, next.top - MARGIN_NOTE_MIN_GAP_PX);
+    }
+  }
+
+  // Pass 2: Notes at/below input - resolve by pushing DOWN (top to bottom)
+  for (let i = 1; i < positions.length; i++) {
+    const prev = positions[i - 1];
+    const curr = positions[i];
+    if (curr.top - prev.top < MARGIN_NOTE_MIN_GAP_PX) {
+      let newTop = prev.top + MARGIN_NOTE_MIN_GAP_PX;
+      // If new position lands in input zone, skip to below input
+      if (newTop >= inputStartForOverlap && newTop < inputEndForOverlap) {
+        newTop = inputEndForOverlap;
+      }
+      curr.top = newTop;
+    }
+  }
+
+  return new Map(positions.map((p) => [p.commentId, p.top]));
+}

package/src/lib/scroll.test.ts

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,47 @@
+/**
+ * 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;
+}

package/src/lib/shortcut-registry.test.ts

@@ -0,0 +1,173 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_SHORTCUTS,
+  formatBinding,
+  isReservedBinding,
+  type KeybindingOverride,
+  matchesBinding,
+  resolveShortcuts,
+  ShortcutActions,
+  type ShortcutBinding,
+} from "./shortcut-registry";
+
+describe("DEFAULT_SHORTCUTS", () => {
+  it("defines 7 shortcuts", () => {
+    expect(DEFAULT_SHORTCUTS).toHaveLength(7);
+  });
+
+  it("has unique IDs", () => {
+    const ids = DEFAULT_SHORTCUTS.map((s) => s.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it("all enabled by default", () => {
+    for (const shortcut of DEFAULT_SHORTCUTS) {
+      expect(shortcut.enabled).toBe(true);
+    }
+  });
+});
+
+describe("matchesBinding", () => {
+  it("matches exact key + modifiers", () => {
+    const binding: ShortcutBinding = { key: "c", alt: true };
+    const event = new KeyboardEvent("keydown", { key: "c", altKey: true });
+    expect(matchesBinding(event, binding)).toBe(true);
+  });
+
+  it("rejects wrong key", () => {
+    const binding: ShortcutBinding = { key: "c", alt: true };
+    const event = new KeyboardEvent("keydown", { key: "v", altKey: true });
+    expect(matchesBinding(event, binding)).toBe(false);
+  });
+
+  it("rejects extra modifiers", () => {
+    const binding: ShortcutBinding = { key: "c", alt: true };
+    const event = new KeyboardEvent("keydown", {
+      key: "c",
+      altKey: true,
+      shiftKey: true,
+    });
+    expect(matchesBinding(event, binding)).toBe(false);
+  });
+
+  it("matches binding with shift", () => {
+    const binding: ShortcutBinding = { key: "c", alt: true, shift: true };
+    const event = new KeyboardEvent("keydown", {
+      key: "c",
+      altKey: true,
+      shiftKey: true,
+    });
+    expect(matchesBinding(event, binding)).toBe(true);
+  });
+
+  it("matches meta key", () => {
+    const binding: ShortcutBinding = { key: "c", meta: true };
+    const event = new KeyboardEvent("keydown", { key: "c", metaKey: true });
+    expect(matchesBinding(event, binding)).toBe(true);
+  });
+
+  it("matches shifted letter key (browser reports uppercase)", () => {
+    const binding: ShortcutBinding = { key: "c", alt: true, shift: true };
+    const event = new KeyboardEvent("keydown", {
+      key: "C",
+      altKey: true,
+      shiftKey: true,
+    });
+    expect(matchesBinding(event, binding)).toBe(true);
+  });
+
+  it("matches meta+shift letter key (browser reports uppercase)", () => {
+    const binding: ShortcutBinding = { key: "c", meta: true, shift: true };
+    const event = new KeyboardEvent("keydown", {
+      key: "C",
+      metaKey: true,
+      shiftKey: true,
+    });
+    expect(matchesBinding(event, binding)).toBe(true);
+  });
+
+  it("matches key-only binding (no modifiers)", () => {
+    const binding: ShortcutBinding = { key: "Escape" };
+    const event = new KeyboardEvent("keydown", { key: "Escape" });
+    expect(matchesBinding(event, binding)).toBe(true);
+  });
+});
+
+describe("formatBinding", () => {
+  it("formats Alt+C", () => {
+    const binding: ShortcutBinding = { key: "c", alt: true };
+    expect(formatBinding(binding, true)).toBe("Alt+C");
+  });
+
+  it("formats meta key as ⌘ on Mac", () => {
+    const binding: ShortcutBinding = { key: "c", meta: true };
+    expect(formatBinding(binding, true)).toBe("⌘+C");
+  });
+
+  it("formats meta key as Ctrl on non-Mac", () => {
+    const binding: ShortcutBinding = { key: "c", meta: true };
+    expect(formatBinding(binding, false)).toBe("Ctrl+C");
+  });
+
+  it("formats shift modifier", () => {
+    const binding: ShortcutBinding = { key: "c", meta: true, shift: true };
+    expect(formatBinding(binding, true)).toBe("⌘+Shift+C");
+  });
+
+  it("formats arrow keys with symbols", () => {
+    const binding: ShortcutBinding = { key: "ArrowUp", alt: true };
+    expect(formatBinding(binding, true)).toBe("Alt+↑");
+  });
+
+  it("formats Escape", () => {
+    const binding: ShortcutBinding = { key: "Escape" };
+    expect(formatBinding(binding, true)).toBe("Esc");
+  });
+});
+
+describe("resolveShortcuts", () => {
+  it("returns defaults when no overrides", () => {
+    const resolved = resolveShortcuts([]);
+    expect(resolved).toEqual(DEFAULT_SHORTCUTS);
+  });
+
+  it("applies enabled override", () => {
+    const overrides: KeybindingOverride[] = [
+      { id: ShortcutActions.COPY_ALL, enabled: false },
+    ];
+    const resolved = resolveShortcuts(overrides);
+    const copyAll = resolved.find((s) => s.id === ShortcutActions.COPY_ALL);
+    expect(copyAll?.enabled).toBe(false);
+  });
+
+  it("applies binding override", () => {
+    const overrides: KeybindingOverride[] = [
+      {
+        id: ShortcutActions.COPY_ALL,
+        enabled: true,
+        binding: { key: "a", meta: true },
+      },
+    ];
+    const resolved = resolveShortcuts(overrides);
+    const copyAll = resolved.find((s) => s.id === ShortcutActions.COPY_ALL);
+    expect(copyAll?.binding).toEqual({ key: "a", meta: true });
+  });
+
+  it("ignores unknown override IDs", () => {
+    const overrides: KeybindingOverride[] = [
+      { id: "unknown_action", enabled: false },
+    ];
+    const resolved = resolveShortcuts(overrides);
+    expect(resolved).toEqual(DEFAULT_SHORTCUTS);
+  });
+});
+
+describe("isReservedBinding", () => {
+  it("detects ⌘+W as reserved", () => {
+    expect(isReservedBinding({ key: "w", meta: true })).toBe(true);
+  });
+
+  it("allows Alt+C", () => {
+    expect(isReservedBinding({ key: "c", alt: true })).toBe(false);
+  });
+});