@peaske7/readit 0.1.4 → 0.1.6

package/src/components/DocumentViewer/DocumentViewer.tsx

@@ -0,0 +1,257 @@
+import {
+  type ComponentPropsWithoutRef,
+  type MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import { useLayoutContext } from "../../contexts/LayoutContext";
+import type { Heading } from "../../hooks/useHeadings";
+import {
+  createHighlighter,
+  type HighlightComment,
+  type Highlighter,
+} from "../../lib/highlight";
+import { cn, getTextContent } from "../../lib/utils";
+import {
+  AnchorConfidences,
+  type Comment,
+  type DocumentType,
+  FontFamilies,
+  type SelectionRange,
+} from "../../types";
+import { CodeBlock } from "./CodeBlock";
+import { IframeContainer } from "./IframeContainer";
+
+function createHeadingComponent(
+  level: 1 | 2 | 3 | 4 | 5 | 6,
+  headings: Heading[],
+  headingIndexRef: MutableRefObject<number>,
+) {
+  const Tag = `h${level}` as const;
+
+  return function HeadingComponent({
+    children,
+    ...props
+  }: ComponentPropsWithoutRef<typeof Tag>) {
+    const text = getTextContent(children);
+
+    // Find the next heading in the pre-computed list that matches this level and text
+    // This handles React Strict Mode double-renders by always looking forward from current index
+    let id = "";
+    for (let i = headingIndexRef.current; i < headings.length; i++) {
+      const heading = headings[i];
+      if (heading.level === level && heading.text === text) {
+        id = heading.id;
+        headingIndexRef.current = i + 1;
+        break;
+      }
+    }
+
+    // Fallback: if not found (shouldn't happen), search from beginning
+    if (!id) {
+      for (const heading of headings) {
+        if (heading.level === level && heading.text === text) {
+          id = heading.id;
+          break;
+        }
+      }
+    }
+
+    return (
+      <Tag id={id} {...props}>
+        {children}
+      </Tag>
+    );
+  };
+}
+
+interface DocumentViewerProps {
+  content: string;
+  type: DocumentType;
+  comments: Comment[];
+  headings: Heading[];
+  pendingSelection?: SelectionRange;
+  onTextSelect: (
+    text: string,
+    startOffset: number,
+    endOffset: number,
+    selectionTop: number,
+  ) => void;
+  onHighlightPositionsChange?: (
+    positions: Record<string, number>,
+    documentPositions: Record<string, number>,
+    pendingTop?: number,
+  ) => void;
+  onHighlightHover?: (commentId: string | undefined) => void;
+  onHighlightClick?: (commentId: string) => void;
+}
+
+export function DocumentViewer({
+  content,
+  type,
+  comments,
+  headings,
+  pendingSelection,
+  onTextSelect,
+  onHighlightPositionsChange,
+  onHighlightHover,
+  onHighlightClick,
+}: DocumentViewerProps) {
+  const { isFullscreen, fontFamily } = useLayoutContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const adapterRef = useRef<Highlighter | null>(null);
+  const headingIndexRef = useRef(0);
+
+  useEffect(() => {
+    if (type !== "markdown") return;
+    if (!contentRef.current || !containerRef.current) return;
+
+    const adapter = createHighlighter({
+      type: "markdown",
+      root: contentRef.current,
+      container: containerRef.current,
+      onSelect: onTextSelect,
+    });
+
+    adapterRef.current = adapter;
+
+    const unsubPositions = onHighlightPositionsChange
+      ? adapter.onPositionsChange((pos) => {
+          onHighlightPositionsChange(
+            pos.positions,
+            pos.documentPositions,
+            pos.pendingTop,
+          );
+        })
+      : () => {};
+
+    const unsubHover = onHighlightHover
+      ? adapter.onHighlightHover(onHighlightHover)
+      : () => {};
+
+    const unsubClick = onHighlightClick
+      ? adapter.onHighlightClick(onHighlightClick)
+      : () => {};
+
+    return () => {
+      unsubPositions();
+      unsubHover();
+      unsubClick();
+      adapter.dispose();
+      adapterRef.current = null;
+    };
+  }, [
+    type,
+    onTextSelect,
+    onHighlightPositionsChange,
+    onHighlightHover,
+    onHighlightClick,
+  ]);
+
+  // Double RAF: ensures React commit phase completes before DOM queries.
+  // See: https://github.com/facebook/react/issues/20863
+  // biome-ignore lint/correctness/useExhaustiveDependencies: must reapply highlights when content changes
+  useEffect(() => {
+    if (type !== "markdown") return;
+
+    let outerFrameId: number;
+    let innerFrameId: number;
+
+    outerFrameId = requestAnimationFrame(() => {
+      innerFrameId = requestAnimationFrame(() => {
+        const adapter = adapterRef.current;
+        if (!adapter) return;
+
+        const highlightComments: HighlightComment[] = comments
+          .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
+          .map((c) => ({
+            id: c.id,
+            selectedText: c.selectedText,
+            startOffset: c.startOffset,
+            endOffset: c.endOffset,
+          }));
+
+        adapter.applyHighlights(highlightComments);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(outerFrameId);
+      cancelAnimationFrame(innerFrameId);
+    };
+  }, [comments, content, type]);
+
+  useEffect(() => {
+    if (type !== "markdown") return;
+
+    const handleTestSelect = (e: Event) => {
+      const { text, startOffset, endOffset } = (e as CustomEvent).detail;
+      onTextSelect(text, startOffset, endOffset, 0);
+    };
+
+    window.addEventListener("test:select-text", handleTestSelect);
+    return () =>
+      window.removeEventListener("test:select-text", handleTestSelect);
+  }, [type, onTextSelect]);
+
+  // Memoized to prevent DOM node replacement (breaks highlight persistence)
+  const markdownComponents = useMemo(
+    () => ({
+      h1: createHeadingComponent(1, headings, headingIndexRef),
+      h2: createHeadingComponent(2, headings, headingIndexRef),
+      h3: createHeadingComponent(3, headings, headingIndexRef),
+      h4: createHeadingComponent(4, headings, headingIndexRef),
+      h5: createHeadingComponent(5, headings, headingIndexRef),
+      h6: createHeadingComponent(6, headings, headingIndexRef),
+      code: CodeBlock,
+    }),
+    [headings],
+  );
+
+  if (type === "html") {
+    return (
+      <main className="flex-1 min-w-0 flex flex-col">
+        <IframeContainer
+          key={content}
+          html={content}
+          comments={comments}
+          pendingSelection={pendingSelection}
+          onTextSelect={onTextSelect}
+          onHighlightPositionsChange={onHighlightPositionsChange}
+          onHighlightHover={onHighlightHover}
+          onHighlightClick={onHighlightClick}
+          fontFamily={fontFamily}
+        />
+      </main>
+    );
+  }
+
+  headingIndexRef.current = 0;
+
+  return (
+    <div ref={containerRef} className="flex-1 min-w-0">
+      <article
+        ref={contentRef}
+        className={cn(
+          "prose",
+          isFullscreen && "prose-fullscreen",
+          fontFamily === FontFamilies.SANS_SERIF ? "prose-sans" : "prose-serif",
+        )}
+      >
+        <Markdown
+          key={content}
+          components={markdownComponents}
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeRaw]}
+        >
+          {content}
+        </Markdown>
+      </article>
+    </div>
+  );
+}

package/src/components/DocumentViewer/IframeContainer.tsx

@@ -0,0 +1,251 @@
+import DOMPurify from "dompurify";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  buildIframeScript,
+  createHighlighter,
+  type HighlightComment,
+  type Highlighter,
+} from "../../lib/highlight";
+import {
+  AnchorConfidences,
+  type Comment,
+  FontFamilies,
+  type FontFamily,
+  type SelectionRange,
+} from "../../types";
+
+interface IframeContainerProps {
+  html: string;
+  comments: Comment[];
+  pendingSelection?: SelectionRange;
+  onTextSelect: (
+    text: string,
+    startOffset: number,
+    endOffset: number,
+    selectionTop: number,
+  ) => void;
+  onHighlightPositionsChange?: (
+    positions: Record<string, number>,
+    documentPositions: Record<string, number>,
+    pendingTop?: number,
+  ) => void;
+  onHighlightHover?: (commentId: string | undefined) => void;
+  onHighlightClick?: (commentId: string) => void;
+  fontFamily?: FontFamily;
+}
+
+const FONT_SERIF =
+  'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
+const FONT_SANS =
+  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+
+function getFontStack(fontFamily: FontFamily): string {
+  return fontFamily === FontFamilies.SANS_SERIF ? FONT_SANS : FONT_SERIF;
+}
+
+// Layout styles use !important; prose styles use :where() for zero specificity
+function getBaseStyles(fontFamily: FontFamily): string {
+  const fontStack = getFontStack(fontFamily);
+  return `
+  /* Critical layout - must override external CSS to ensure proper sizing */
+  html {
+    width: 100% !important;
+  }
+  body {
+    width: 100% !important;
+    min-width: 65ch;
+    box-sizing: border-box !important;
+    margin: 0;
+  }
+
+  /* Prose styles as fallback - zero specificity via :where(), easily overridden */
+  :where(body:not([class])) {
+    max-width: 65ch;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 2rem 1rem;
+    line-height: 1.75;
+    color: #3f3f46;
+    font-family: ${fontStack};
+  }
+  :where(body:not([class])) :where(h1, h2, h3, h4, h5, h6) {
+    color: #18181b;
+    font-weight: 600;
+    line-height: 1.25;
+    margin-top: 2em;
+    margin-bottom: 0.5em;
+  }
+  :where(body:not([class])) :where(h1) { font-size: 2.25em; margin-top: 0; }
+  :where(body:not([class])) :where(h2) { font-size: 1.5em; }
+  :where(body:not([class])) :where(h3) { font-size: 1.25em; }
+  :where(body:not([class])) :where(h4) { font-size: 1.125em; }
+  :where(body:not([class])) :where(p) { margin: 1em 0; }
+  :where(body:not([class])) :where(ul, ol) { padding-left: 1.5em; margin: 1em 0; }
+  :where(body:not([class])) :where(li) { margin: 0.5em 0; }
+  :where(body:not([class])) :where(a) { color: #2563eb; text-decoration: underline; }
+  :where(body:not([class])) :where(code) { background: #f4f4f5; padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.875em; }
+  :where(body:not([class])) :where(pre) { background: #f4f4f5; padding: 1em; border-radius: 0.5em; overflow-x: auto; }
+  :where(body:not([class])) :where(pre code) { background: none; padding: 0; }
+  :where(body:not([class])) :where(blockquote) { border-left: 4px solid #e4e4e7; padding-left: 1em; color: #71717a; margin: 1em 0; font-style: italic; }
+  :where(body:not([class])) :where(hr) { border: none; border-top: 1px solid #e4e4e7; margin: 2em 0; }
+  :where(body:not([class])) :where(table) { border-collapse: collapse; width: 100%; margin: 1em 0; }
+  :where(body:not([class])) :where(th, td) { border: 1px solid #e4e4e7; padding: 0.5em 1em; text-align: left; }
+  :where(body:not([class])) :where(th) { background: #fafafa; font-weight: 600; }
+  :where(body:not([class])) :where(img) { max-width: 100%; height: auto; }
+
+  /* Highlight styles - warm ink palette */
+  mark[data-comment-id] {
+    background: rgba(245, 222, 160, 0.5);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+  mark[data-comment-id]:hover {
+    background-color: rgba(228, 195, 110, 0.65);
+  }
+  mark[data-comment-id]:active {
+    background-color: rgba(228, 195, 110, 0.75);
+  }
+  mark[data-pending] { background: rgba(180, 180, 180, 0.3); cursor: text; }
+`;
+}
+
+function sanitizeHtml(html: string): string {
+  const sanitized = DOMPurify.sanitize(html, {
+    ADD_TAGS: ["style"],
+    ADD_ATTR: ["style"],
+    FORBID_TAGS: ["script", "iframe", "object", "embed", "form"],
+    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"],
+  });
+
+  // Escape </iframe> to prevent breaking out of srcdoc
+  return sanitized.replace(/<\/iframe/gi, "&lt;/iframe");
+}
+
+function injectStyleTag(html: string, styleTag: string): string {
+  if (/<\/head>/i.test(html)) {
+    return html.replace(/<\/head>/i, `${styleTag}</head>`);
+  }
+  if (/<head[^>]*>/i.test(html)) {
+    return html.replace(/(<head[^>]*>)/i, `$1${styleTag}`);
+  }
+  return styleTag + html;
+}
+
+export function IframeContainer({
+  html,
+  comments,
+  pendingSelection,
+  onTextSelect,
+  onHighlightPositionsChange,
+  onHighlightHover,
+  onHighlightClick,
+  fontFamily = FontFamilies.SERIF,
+}: IframeContainerProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const adapterRef = useRef<Highlighter | null>(null);
+  const [contentHeight, setContentHeight] = useState<number>(0);
+
+  const srcdoc = useMemo(() => {
+    const sanitized = sanitizeHtml(html);
+    const baseStyles = getBaseStyles(fontFamily);
+    const styleTag = `<style id="readit-base-styles">${baseStyles}</style>`;
+
+    const finalHtml = injectStyleTag(sanitized, styleTag);
+
+    return finalHtml + buildIframeScript(window.location.origin);
+  }, [html, fontFamily]);
+
+  useEffect(() => {
+    const adapter = createHighlighter({
+      type: "iframe",
+      getIframe: () => iframeRef.current,
+      onSelect: onTextSelect,
+    });
+
+    adapterRef.current = adapter;
+
+    const unsubPositions = onHighlightPositionsChange
+      ? adapter.onPositionsChange((pos) => {
+          const iframe = iframeRef.current;
+          const iframeOffset = iframe
+            ? iframe.getBoundingClientRect().top + window.scrollY
+            : 0;
+
+          const adjustedDocPositions: Record<string, number> = {};
+          for (const [id, iframePos] of Object.entries(pos.documentPositions)) {
+            adjustedDocPositions[id] = iframePos + iframeOffset;
+          }
+
+          onHighlightPositionsChange(
+            pos.positions,
+            adjustedDocPositions,
+            pos.pendingTop,
+          );
+        })
+      : () => {};
+
+    const unsubHover = onHighlightHover
+      ? adapter.onHighlightHover(onHighlightHover)
+      : () => {};
+
+    const unsubClick = onHighlightClick
+      ? adapter.onHighlightClick(onHighlightClick)
+      : () => {};
+
+    const unsubHeight = adapter.onContentHeightChange?.((height) => {
+      setContentHeight(height);
+    });
+
+    return () => {
+      unsubPositions();
+      unsubHover();
+      unsubClick();
+      unsubHeight?.();
+      adapter.dispose();
+      adapterRef.current = null;
+    };
+  }, [
+    onTextSelect,
+    onHighlightPositionsChange,
+    onHighlightHover,
+    onHighlightClick,
+  ]);
+
+  useEffect(() => {
+    const adapter = adapterRef.current;
+    if (!adapter) return;
+
+    const highlightComments: HighlightComment[] = comments
+      .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
+      .map((c) => ({
+        id: c.id,
+        selectedText: c.selectedText,
+        startOffset: c.startOffset,
+        endOffset: c.endOffset,
+      }));
+
+    adapter.applyHighlights(highlightComments, pendingSelection ?? undefined);
+  }, [comments, pendingSelection]);
+
+  useEffect(() => {
+    const handleTestSelect = (e: Event) => {
+      const { text, startOffset, endOffset } = (e as CustomEvent).detail;
+      onTextSelect(text, startOffset, endOffset, 0);
+    };
+
+    window.addEventListener("test:select-text", handleTestSelect);
+    return () =>
+      window.removeEventListener("test:select-text", handleTestSelect);
+  }, [onTextSelect]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      srcDoc={srcdoc}
+      sandbox="allow-scripts allow-same-origin"
+      title="Document content"
+      className="w-full border-0"
+      style={{ height: contentHeight || "100%" }}
+    />
+  );
+}

package/src/components/DocumentViewer/MermaidDiagram.tsx

@@ -0,0 +1,137 @@
+import DOMPurify from "dompurify";
+import { useEffect, useId, useState } from "react";
+
+interface MermaidDiagramProps {
+  code: string;
+}
+
+export function MermaidDiagram({ code }: MermaidDiagramProps) {
+  const id = useId().replace(/:/g, "-"); // Mermaid IDs can't have colons
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function renderDiagram() {
+      try {
+        // Lazy load mermaid
+        const mermaid = (await import("mermaid")).default;
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: "base",
+          securityLevel: "strict",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          themeVariables: {
+            // Typography
+            fontSize: "16px",
+
+            // Primary colors - warm amber (matches app's comment colors)
+            primaryColor: "rgba(245, 222, 160, 0.8)",
+            primaryTextColor: "#3f3f46",
+            primaryBorderColor: "#c9a84a",
+
+            // Secondary colors - slate blue
+            secondaryColor: "rgba(168, 196, 228, 0.6)",
+            secondaryTextColor: "#3f3f46",
+            secondaryBorderColor: "#5b7fa8",
+
+            // Tertiary colors - sage green
+            tertiaryColor: "rgba(170, 210, 170, 0.6)",
+            tertiaryTextColor: "#3f3f46",
+            tertiaryBorderColor: "#5a9a62",
+
+            // Background and text
+            background: "#ffffff",
+            mainBkg: "#ffffff",
+            textColor: "#3f3f46",
+            lineColor: "#a1a1aa",
+
+            // Gantt-specific
+            taskBkgColor: "rgba(245, 222, 160, 0.7)",
+            taskTextColor: "#3f3f46",
+            taskTextDarkColor: "#3f3f46",
+            taskTextOutsideColor: "#3f3f46",
+            activeTaskBkgColor: "rgba(228, 195, 110, 0.8)",
+            activeTaskBorderColor: "#c9a84a",
+            doneTaskBkgColor: "rgba(170, 210, 170, 0.6)",
+            doneTaskBorderColor: "#5a9a62",
+            critTaskBkgColor: "rgba(225, 180, 185, 0.7)",
+            critBorderColor: "#b86b78",
+            gridColor: "#e4e4e7",
+            todayLineColor: "#b86b78",
+            sectionBkgColor: "rgba(250, 250, 250, 0.5)",
+            altSectionBkgColor: "rgba(244, 244, 245, 0.5)",
+            sectionBkgColor2: "rgba(250, 250, 250, 0.5)",
+
+            // Flowchart/general diagram
+            nodeBkg: "rgba(245, 222, 160, 0.6)",
+            nodeBorder: "#c9a84a",
+            clusterBkg: "rgba(250, 250, 250, 0.8)",
+            clusterBorder: "#e4e4e7",
+
+            // Sequence diagram
+            actorBkg: "rgba(168, 196, 228, 0.5)",
+            actorBorder: "#5b7fa8",
+            actorTextColor: "#3f3f46",
+            signalColor: "#3f3f46",
+            signalTextColor: "#3f3f46",
+            noteBkgColor: "rgba(245, 222, 160, 0.5)",
+            noteBorderColor: "#c9a84a",
+            noteTextColor: "#3f3f46",
+          },
+        });
+
+        const { svg: rawSvg } = await mermaid.render(`mermaid-${id}`, code);
+        // Sanitize SVG output with DOMPurify before storing in state
+        const sanitizedSvg = DOMPurify.sanitize(rawSvg, {
+          USE_PROFILES: { svg: true },
+        });
+
+        if (!cancelled) {
+          setSvg(sanitizedSvg);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Failed to render diagram",
+          );
+        }
+      }
+    }
+
+    renderDiagram();
+    return () => {
+      cancelled = true;
+    };
+  }, [code, id]);
+
+  if (error) {
+    return (
+      <div className="my-6">
+        <div className="text-red-500 text-sm mb-2">Mermaid Error: {error}</div>
+        <pre className="bg-zinc-900 p-4 rounded-lg overflow-x-auto text-sm">
+          <code>{code}</code>
+        </pre>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div className="my-6 bg-zinc-900 p-4 rounded-lg text-zinc-400">
+        Loading diagram...
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="mermaid-container my-6 flex justify-center overflow-x-auto"
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: svg is sanitized by DOMPurify
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}

package/src/components/DocumentViewer/index.ts

@@ -0,0 +1 @@
+export { DocumentViewer } from "./DocumentViewer";

package/src/components/FloatingTOC.tsx

@@ -0,0 +1,59 @@
+import { List } from "lucide-react";
+import { useState } from "react";
+import type { Heading } from "../hooks/useHeadings";
+import { cn } from "../lib/utils";
+import { TableOfContents } from "./TableOfContents";
+
+interface FloatingTOCProps {
+  headings: Heading[];
+  activeId: string | null;
+  onHeadingClick: (id: string) => void;
+}
+
+export function FloatingTOC({
+  headings,
+  activeId,
+  onHeadingClick,
+}: FloatingTOCProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (headings.length === 0) return null;
+
+  return (
+    <nav
+      className="fixed left-4 top-16 z-40"
+      onMouseEnter={() => setIsExpanded(true)}
+      onMouseLeave={() => setIsExpanded(false)}
+      aria-label="Table of contents"
+    >
+      {/* Collapsed state: circular button */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className={cn(
+          "w-10 h-10 rounded-full bg-white dark:bg-zinc-900 shadow-lg border border-zinc-100 dark:border-zinc-800 flex items-center justify-center text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-150",
+          isExpanded && "opacity-0 pointer-events-none",
+        )}
+        aria-label="Table of Contents"
+      >
+        <List className="w-5 h-5" />
+      </button>
+
+      {/* Expanded state: panel */}
+      {isExpanded && (
+        <div className="absolute left-0 top-0 w-56 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-lg shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 p-4 floating-toc-panel">
+          <div className="max-h-[calc(100vh-8rem)] overflow-y-auto">
+            <TableOfContents
+              headings={headings}
+              activeId={activeId}
+              onHeadingClick={(id) => {
+                onHeadingClick(id);
+                setIsExpanded(false);
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}