@peaske7/readit 0.1.8 → 0.2.0

package/src/components/ActionsMenu.tsx

@@ -1,17 +1,13 @@
 import {
-  BotMessageSquare,
+  ClipboardCopy,
   FileDown,
   FileText,
-  Maximize2,
-  Minimize2,
   MoreHorizontal,
   RefreshCw,
   Settings,
-  TextQuote,
 } from "lucide-react";
 import { useState } from "react";
-import { useCommentContext } from "../contexts/CommentContext";
-import { useLayoutContext } from "../contexts/LayoutContext";
+import { useCommentData } from "../contexts/CommentContext";
 import { useLocale } from "../contexts/LocaleContext";
 import { RawModal } from "./RawModal";
 import { SettingsModal } from "./SettingsModal";
@@ -26,19 +22,16 @@ import {
 
 interface ActionsMenuProps {
   onCopyAll: () => void;
-  onCopyAllRaw: () => void;
   onExportJson: () => void;
   onReload: () => void;
 }
 
 export function ActionsMenu({
   onCopyAll,
-  onCopyAllRaw,
   onExportJson,
   onReload,
 }: ActionsMenuProps) {
-  const { commentCount } = useCommentContext();
-  const { isFullscreen, toggleLayoutMode } = useLayoutContext();
+  const { commentCount } = useCommentData();
   const { t } = useLocale();
 
   const [menuOpen, setMenuOpen] = useState(false);
@@ -59,10 +52,6 @@ export function ActionsMenu({
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="min-w-[160px]">
-          <DropdownMenuItem onSelect={() => toggleLayoutMode()}>
-            {isFullscreen ? <Minimize2 /> : <Maximize2 />}
-            {isFullscreen ? t("actions.centered") : t("actions.fullscreen")}
-          </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
             <Settings />
             {t("actions.settings")}
@@ -74,19 +63,9 @@ export function ActionsMenu({
           </DropdownMenuItem>
           {commentCount > 0 && (
             <>
-              <DropdownMenuItem
-                onSelect={() => onCopyAll()}
-                title={t("actions.copyAllAITitle")}
-              >
-                <BotMessageSquare />
-                {t("actions.copyAllAI")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => onCopyAllRaw()}
-                title={t("actions.copyAllRawTitle")}
-              >
-                <TextQuote />
-                {t("actions.copyAllRaw")}
+              <DropdownMenuItem onSelect={() => onCopyAll()}>
+                <ClipboardCopy />
+                {t("actions.copyAll")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => onExportJson()}>
                 <FileDown />

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,58 +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
+  // 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);
-    };
-    // editorScheme/workingDirectory: when these change, markdownComponents memo recomputes,
-    // react-markdown replaces the DOM, so highlights must be reapplied
-  }, [comments, content, type, editorScheme, workingDirectory]);
+    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);
@@ -201,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(
@@ -212,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 (
@@ -242,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;