@peaske7/readit 0.1.7 → 0.2.0

package/src/components/DocumentViewer/DocumentViewer.tsx

@@ -1,6 +1,7 @@
 import {
   type ComponentPropsWithoutRef,
   type MutableRefObject,
+  memo,
   useEffect,
   useMemo,
   useRef,
@@ -8,24 +9,39 @@ import {
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { useLayoutContext } from "../../contexts/LayoutContext";
+import { usePositions } from "../../contexts/PositionsContext";
+import { useSettings } from "../../contexts/SettingsContext";
 import type { Heading } from "../../hooks/useHeadings";
 import {
   createHighlighter,
-  type HighlightComment,
   type Highlighter,
-} from "../../lib/highlight";
+} from "../../lib/highlight/highlighter";
+import type { HighlightComment } from "../../lib/highlight/types";
 import { cn, getTextContent } from "../../lib/utils";
-import { useAppStore } from "../../store";
-import {
-  AnchorConfidences,
-  type Comment,
-  type DocumentType,
-  FontFamilies,
-  type SelectionRange,
-} from "../../types";
-import { IframeContainer } from "./IframeContainer";
-import { createCodeComponent } from "./InlineCode";
+import { AnchorConfidences, type Comment, FontFamilies } from "../../schema";
+import { CodeBlock } from "./CodeBlock";
+
+const REMARK_PLUGINS = [remarkGfm];
+const REHYPE_PLUGINS = [rehypeRaw];
+
+/** Memoized Markdown renderer — skips reconciliation when only comments change. */
+const MemoizedMarkdown = memo(function MemoizedMarkdown({
+  content,
+  components,
+}: {
+  content: string;
+  components: ComponentPropsWithoutRef<typeof Markdown>["components"];
+}) {
+  return (
+    <Markdown
+      components={components}
+      remarkPlugins={REMARK_PLUGINS}
+      rehypePlugins={REHYPE_PLUGINS}
+    >
+      {content}
+    </Markdown>
+  );
+});
 
 function createHeadingComponent(
   level: 1 | 2 | 3 | 4 | 5 | 6,
@@ -52,7 +68,6 @@ function createHeadingComponent(
       }
     }
 
-    // Fallback: if not found (shouldn't happen), search from beginning
     if (!id) {
       for (const heading of headings) {
         if (heading.level === level && heading.text === text) {
@@ -72,49 +87,48 @@ function createHeadingComponent(
 
 interface DocumentViewerProps {
   content: string;
-  type: DocumentType;
   comments: Comment[];
   headings: Heading[];
-  pendingSelection?: SelectionRange;
+  isActive: boolean;
   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,
+  isActive,
   onTextSelect,
-  onHighlightPositionsChange,
   onHighlightHover,
   onHighlightClick,
 }: DocumentViewerProps) {
-  const { isFullscreen, fontFamily, editorScheme } = useLayoutContext();
-  const workingDirectory = useAppStore((s) => s.workingDirectory);
+  const { fontFamily } = useSettings();
+  const pos = usePositions();
   const contentRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const adapterRef = useRef<Highlighter | null>(null);
   const headingIndexRef = useRef(0);
 
+  // Attach/detach pos to DOM elements — only when tab is visible
+  // (getBoundingClientRect returns zero rects on display:none elements)
+  useEffect(() => {
+    if (!isActive || !contentRef.current || !containerRef.current) return;
+    pos.attach(contentRef.current, containerRef.current);
+    pos.cache();
+    return () => pos.detach();
+  }, [pos, isActive]);
+
   useEffect(() => {
-    if (type !== "markdown") return;
     if (!contentRef.current || !containerRef.current) return;
 
     const adapter = createHighlighter({
-      type: "markdown",
       root: contentRef.current,
       container: containerRef.current,
       onSelect: onTextSelect,
@@ -122,16 +136,6 @@ export function DocumentViewer({
 
     adapterRef.current = adapter;
 
-    const unsubPositions = onHighlightPositionsChange
-      ? adapter.onPositionsChange((pos) => {
-          onHighlightPositionsChange(
-            pos.positions,
-            pos.documentPositions,
-            pos.pendingTop,
-          );
-        })
-      : () => {};
-
     const unsubHover = onHighlightHover
       ? adapter.onHighlightHover(onHighlightHover)
       : () => {};
@@ -141,56 +145,40 @@ export function DocumentViewer({
       : () => {};
 
     return () => {
-      unsubPositions();
       unsubHover();
       unsubClick();
       adapter.dispose();
       adapterRef.current = null;
     };
-  }, [
-    type,
-    onTextSelect,
-    onHighlightPositionsChange,
-    onHighlightHover,
-    onHighlightClick,
-  ]);
+  }, [onTextSelect, 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
+  // Apply highlights after React commit completes (single rAF).
+  // Skip when comments is empty to avoid wasted DOM walk.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: must reapply highlights when content or components change
   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);
-      });
+    if (!isActive) return;
+    if (comments.length === 0) return;
+
+    const rafId = 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]);
+    return () => cancelAnimationFrame(rafId);
+  }, [comments, content, isActive, pos]);
 
   useEffect(() => {
-    if (type !== "markdown") return;
-
     const handleTestSelect = (e: Event) => {
       const { text, startOffset, endOffset } = (e as CustomEvent).detail;
       onTextSelect(text, startOffset, endOffset, 0);
@@ -199,7 +187,7 @@ export function DocumentViewer({
     window.addEventListener("test:select-text", handleTestSelect);
     return () =>
       window.removeEventListener("test:select-text", handleTestSelect);
-  }, [type, onTextSelect]);
+  }, [onTextSelect]);
 
   // Memoized to prevent DOM node replacement (breaks highlight persistence)
   const markdownComponents = useMemo(
@@ -210,28 +198,20 @@ export function DocumentViewer({
       h4: createHeadingComponent(4, headings, headingIndexRef),
       h5: createHeadingComponent(5, headings, headingIndexRef),
       h6: createHeadingComponent(6, headings, headingIndexRef),
-      code: createCodeComponent(editorScheme, workingDirectory),
+      code: ({
+        children,
+        className,
+        ...props
+      }: ComponentPropsWithoutRef<"code">) => {
+        if (className || String(children).includes("\n")) {
+          return <CodeBlock className={className}>{children}</CodeBlock>;
+        }
+        return <code {...props}>{children}</code>;
+      },
     }),
-    [headings, editorScheme, workingDirectory],
+    [headings],
   );
 
-  if (type === "html") {
-    return (
-      <main className="flex-1 min-w-0 flex flex-col">
-        <IframeContainer
-          html={content}
-          comments={comments}
-          pendingSelection={pendingSelection}
-          onTextSelect={onTextSelect}
-          onHighlightPositionsChange={onHighlightPositionsChange}
-          onHighlightHover={onHighlightHover}
-          onHighlightClick={onHighlightClick}
-          fontFamily={fontFamily}
-        />
-      </main>
-    );
-  }
-
   headingIndexRef.current = 0;
 
   return (
@@ -240,17 +220,10 @@ export function DocumentViewer({
         ref={contentRef}
         className={cn(
           "prose",
-          isFullscreen && "prose-fullscreen",
           fontFamily === FontFamilies.SANS_SERIF ? "prose-sans" : "prose-serif",
         )}
       >
-        <Markdown
-          components={markdownComponents}
-          remarkPlugins={[remarkGfm]}
-          rehypePlugins={[rehypeRaw]}
-        >
-          {content}
-        </Markdown>
+        <MemoizedMarkdown content={content} components={markdownComponents} />
       </article>
     </div>
   );

package/src/components/DocumentViewer/MermaidDiagram.tsx

@@ -1,4 +1,3 @@
-import DOMPurify from "dompurify";
 import { useEffect, useId, useState } from "react";
 
 interface MermaidDiagramProps {
@@ -83,14 +82,14 @@ export function MermaidDiagram({ code }: MermaidDiagramProps) {
           },
         });
 
-        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 },
-        });
+        // securityLevel: "strict" prevents script injection in mermaid output
+        const { svg: renderedSvg } = await mermaid.render(
+          `mermaid-${id}`,
+          code,
+        );
 
         if (!cancelled) {
-          setSvg(sanitizedSvg);
+          setSvg(renderedSvg);
           setError(null);
         }
       } catch (err) {

package/src/components/Header.tsx

@@ -1,7 +1,5 @@
-import { useCommentContext } from "../contexts/CommentContext";
-import { useLayoutContext } from "../contexts/LayoutContext";
+import { useCommentData } from "../contexts/CommentContext";
 import { useLocale } from "../contexts/LocaleContext";
-import { cn } from "../lib/utils";
 import { ActionsMenu } from "./ActionsMenu";
 import { CommentBadge } from "./comments/CommentBadge";
 import { Text } from "./ui/Text";
@@ -9,7 +7,6 @@ import { Text } from "./ui/Text";
 interface HeaderProps {
   fileName: string;
   onCopyAll: () => void;
-  onCopyAllRaw: () => void;
   onExportJson: () => void;
   onReload: () => void;
 }
@@ -17,36 +14,29 @@ interface HeaderProps {
 export function Header({
   fileName,
   onCopyAll,
-  onCopyAllRaw,
   onExportJson,
   onReload,
 }: HeaderProps) {
-  const { reanchorTarget } = useCommentContext();
-  const { isFullscreen } = useLayoutContext();
+  const { reanchorTarget } = useCommentData();
   const { t } = useLocale();
 
   return (
     <header className="sticky top-0 z-50 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-100 dark:border-zinc-800">
-      <div
-        className={cn(
-          "px-6 py-3 flex items-center justify-between",
-          !isFullscreen && "max-w-7xl mx-auto",
-        )}
-      >
+      <div className="px-6 py-3 flex items-center justify-between max-w-7xl mx-auto">
         <div className="flex items-center gap-3">
-          <Text variant="title" asChild>
-            <h1>readit</h1>
+          <Text variant="title" as="h1">
+            readit
           </Text>
           <span className="text-zinc-200 dark:text-zinc-700 font-light">—</span>
-          <Text variant="caption" asChild>
-            <span className="truncate max-w-[200px]">{fileName}</span>
+          <Text variant="caption" as="span" className="truncate max-w-[200px]">
+            {fileName}
           </Text>
         </div>
 
         <div className="flex items-center gap-3">
           {reanchorTarget && (
-            <Text variant="caption" asChild>
-              <span className="italic">{t("header.selectTextToReanchor")}</span>
+            <Text variant="caption" as="span" className="italic">
+              {t("header.selectTextToReanchor")}
             </Text>
           )}
 
@@ -54,7 +44,6 @@ export function Header({
 
           <ActionsMenu
             onCopyAll={onCopyAll}
-            onCopyAllRaw={onCopyAllRaw}
             onExportJson={onExportJson}
             onReload={onReload}
           />

package/src/components/InlineEditor.tsx

@@ -1,8 +1,8 @@
 import { use, useEffect, useRef, useState } from "react";
-import { LayoutContext } from "../contexts/LayoutContext";
 import { useLocale } from "../contexts/LocaleContext";
+import { SettingsContext } from "../contexts/SettingsContext";
 import { cn } from "../lib/utils";
-import { FontFamilies } from "../types";
+import { FontFamilies } from "../schema";
 import { Button } from "./ui/Button";
 
 interface InlineEditorProps {
@@ -20,10 +20,10 @@ export function InlineEditor({
   rows = 2,
   className,
 }: InlineEditorProps) {
-  const layout = use(LayoutContext);
+  const settings = use(SettingsContext);
   const { t } = useLocale();
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
+  const fontClass = settings
+    ? settings.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
       : "font-serif"
     : undefined;

package/src/components/MarginNote.tsx

@@ -1,87 +1,77 @@
-import { cva } from "class-variance-authority";
-import { useState } from "react";
-import { useCommentContext } from "../contexts/CommentContext";
-import { useLayoutContext } from "../contexts/LayoutContext";
+import { memo, useCallback, useState } from "react";
+import { useCommentActions } from "../contexts/CommentContext";
 import { useLocale } from "../contexts/LocaleContext";
+import { usePositions } from "../contexts/PositionsContext";
+import { useSettings } from "../contexts/SettingsContext";
 import { cn } from "../lib/utils";
-import { type Comment, FontFamilies } from "../types";
+import { type Comment, FontFamilies } from "../schema";
+import { useUI } from "../store";
 import { InlineEditor } from "./InlineEditor";
-import { ActionBar } from "./ui/ActionBar";
 import { ActionLink } from "./ui/ActionLink";
-import { SeparatorDot } from "./ui/SeparatorDot";
 
 interface MarginNoteProps {
   comment: Comment;
-  top: number;
   commentIndex?: number;
 }
 
-const selectedTextVariants = cva(
-  "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
-  {
-    variants: {
-      hovered: {
-        true: "text-zinc-600 dark:text-zinc-400",
-        false: "text-zinc-400 dark:text-zinc-500",
-      },
-    },
-    defaultVariants: { hovered: false },
-  },
-);
+function selectedTextClass(hovered: boolean) {
+  return cn(
+    "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
+    hovered
+      ? "text-zinc-600 dark:text-zinc-400"
+      : "text-zinc-400 dark:text-zinc-500",
+  );
+}
 
-const commentTextVariants = cva(
-  "text-sm whitespace-pre-wrap transition-colors duration-150",
-  {
-    variants: {
-      hovered: {
-        true: "text-zinc-800 dark:text-zinc-200",
-        false: "text-zinc-500 dark:text-zinc-400",
-      },
-    },
-    defaultVariants: { hovered: false },
-  },
-);
+function commentTextClass(hovered: boolean) {
+  return cn(
+    "text-sm whitespace-pre-wrap transition-colors duration-150",
+    hovered
+      ? "text-zinc-800 dark:text-zinc-200"
+      : "text-zinc-500 dark:text-zinc-400",
+  );
+}
 
-const badgeVariants = cva(
-  "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
-  {
-    variants: {
-      hovered: {
-        true: "text-zinc-600 dark:text-zinc-400",
-        false: "text-zinc-400 dark:text-zinc-500",
-      },
-    },
-    defaultVariants: { hovered: false },
-  },
-);
+function badgeClass(hovered: boolean) {
+  return cn(
+    "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
+    hovered
+      ? "text-zinc-600 dark:text-zinc-400"
+      : "text-zinc-400 dark:text-zinc-500",
+  );
+}
 
-export function MarginNote({
+export const MarginNote = memo(function MarginNote({
   comment,
-  top,
   commentIndex = 0,
 }: MarginNoteProps) {
-  const { fontFamily } = useLayoutContext();
+  const { fontFamily } = useSettings();
   const { t } = useLocale();
   const {
     editComment,
     deleteComment,
-    copyCommentRaw,
-    copyCommentForLLM,
-    hoveredCommentId,
+    copyComment,
     setHoveredCommentId,
     scrollToHighlight,
-  } = useCommentContext();
+  } = useCommentActions();
 
-  const isHovered = hoveredCommentId === comment.id;
+  const pos = usePositions();
+  const refCallback = useCallback(
+    (el: HTMLElement | null) => {
+      if (el) pos.register(comment.id, el);
+      else pos.unregister(comment.id);
+    },
+    [pos, comment.id],
+  );
+
+  const isHovered = useUI((s) => s.hoveredCommentId === comment.id);
   const fontClass =
     fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif";
   const [isEditing, setIsEditing] = useState(false);
 
   const hasNote = comment.comment.trim().length > 0;
 
-  const handleCopy = () => {
-    copyCommentRaw(comment);
-  };
+  const handleCopy = () => copyComment(comment);
 
   const createdAtFormatted = new Date(comment.createdAt).toLocaleString();
 
@@ -89,30 +79,39 @@ export function MarginNote({
   if (!hasNote && !isEditing) {
     return (
       <article
+        ref={refCallback}
         className="absolute left-0 right-0 group"
-        style={{ top }}
+        style={{
+          visibility: "hidden",
+          contentVisibility: "auto",
+          containIntrinsicSize: "auto 80px",
+        }}
         title={`Added: ${createdAtFormatted}`}
         data-comment-id={comment.id}
         onMouseEnter={() => setHoveredCommentId(comment.id)}
         onMouseLeave={() => setHoveredCommentId(undefined)}
       >
-        <span className={badgeVariants({ hovered: isHovered })}>—</span>
+        <span className={badgeClass(isHovered)}>—</span>
 
         <div className="pt-2 pb-2 pl-3">
-          <ActionBar
-            className={cn("gap-1.5 duration-150", isHovered && "opacity-100")}
+          <div
+            className={cn(
+              "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
+              "gap-1.5 duration-150",
+              isHovered && "opacity-100",
+            )}
           >
             <ActionLink onClick={() => setIsEditing(true)}>
               {t("marginNote.addNote")}
             </ActionLink>
-            <SeparatorDot />
+            <span aria-hidden="true">·</span>
             <ActionLink
               variant="destructive"
               onClick={() => deleteComment(comment.id)}
             >
               {t("marginNote.delete")}
             </ActionLink>
-          </ActionBar>
+          </div>
         </div>
       </article>
     );
@@ -120,16 +119,15 @@ export function MarginNote({
 
   return (
     <article
+      ref={refCallback}
       className="absolute left-0 right-0 group"
-      style={{ top }}
+      style={{ visibility: "hidden" }}
       title={`Added: ${createdAtFormatted}`}
       data-comment-id={comment.id}
       onMouseEnter={() => setHoveredCommentId(comment.id)}
       onMouseLeave={() => setHoveredCommentId(undefined)}
     >
-      <span className={badgeVariants({ hovered: isHovered })}>
-        {commentIndex + 1}
-      </span>
+      <span className={badgeClass(isHovered)}>{commentIndex + 1}</span>
 
       <div
         className={cn(
@@ -138,12 +136,7 @@ export function MarginNote({
         )}
       >
         {!isEditing && (
-          <div
-            className={cn(
-              fontClass,
-              selectedTextVariants({ hovered: isHovered }),
-            )}
-          >
+          <div className={cn(fontClass, selectedTextClass(isHovered))}>
             <button
               type="button"
               onClick={() => scrollToHighlight(comment.id)}
@@ -165,43 +158,28 @@ export function MarginNote({
           />
         ) : (
           <>
-            <p
-              className={cn(
-                fontClass,
-                commentTextVariants({ hovered: isHovered }),
-              )}
-            >
+            <p className={cn(fontClass, commentTextClass(isHovered))}>
               {comment.comment}
             </p>
-            <ActionBar className="gap-1.5 mt-2">
+            <div className="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity gap-1.5 mt-2">
               <ActionLink onClick={() => setIsEditing(true)}>
                 {t("marginNote.edit")}
               </ActionLink>
-              <SeparatorDot />
+              <span aria-hidden="true">·</span>
               <ActionLink
                 variant="destructive"
                 onClick={() => deleteComment(comment.id)}
               >
                 {t("marginNote.delete")}
               </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                onClick={handleCopy}
-                title={t("marginNote.copyTitle")}
-              >
+              <span aria-hidden="true">·</span>
+              <ActionLink onClick={handleCopy}>
                 {t("marginNote.copy")}
               </ActionLink>
-              <SeparatorDot />
-              <ActionLink
-                onClick={() => copyCommentForLLM(comment)}
-                title={t("marginNote.llmTitle")}
-              >
-                {t("marginNote.llm")}
-              </ActionLink>
-            </ActionBar>
+            </div>
           </>
         )}
       </div>
     </article>
   );
-}
+});