@peaske7/readit 0.1.5 → 0.1.7

package/src/components/DocumentViewer/CodeBlock.tsx

@@ -1,75 +1,136 @@
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-// Import only the languages we need (reduces bundle by ~800KB)
-import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash";
-import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
-import diff from "react-syntax-highlighter/dist/esm/languages/prism/diff";
-import go from "react-syntax-highlighter/dist/esm/languages/prism/go";
-import graphql from "react-syntax-highlighter/dist/esm/languages/prism/graphql";
-import javascript from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
-import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
-import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
-import markdown from "react-syntax-highlighter/dist/esm/languages/prism/markdown";
-import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
-import rust from "react-syntax-highlighter/dist/esm/languages/prism/rust";
-import sql from "react-syntax-highlighter/dist/esm/languages/prism/sql";
-import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
-import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
-import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useEffect, useState } from "react";
 import { MermaidDiagram } from "./MermaidDiagram";
 
-// Register languages
-SyntaxHighlighter.registerLanguage("bash", bash);
-SyntaxHighlighter.registerLanguage("sh", bash);
-SyntaxHighlighter.registerLanguage("shell", bash);
-SyntaxHighlighter.registerLanguage("css", css);
-SyntaxHighlighter.registerLanguage("diff", diff);
-SyntaxHighlighter.registerLanguage("go", go);
-SyntaxHighlighter.registerLanguage("graphql", graphql);
-SyntaxHighlighter.registerLanguage("javascript", javascript);
-SyntaxHighlighter.registerLanguage("js", javascript);
-SyntaxHighlighter.registerLanguage("json", json);
-SyntaxHighlighter.registerLanguage("jsx", jsx);
-SyntaxHighlighter.registerLanguage("markdown", markdown);
-SyntaxHighlighter.registerLanguage("md", markdown);
-SyntaxHighlighter.registerLanguage("python", python);
-SyntaxHighlighter.registerLanguage("py", python);
-SyntaxHighlighter.registerLanguage("rust", rust);
-SyntaxHighlighter.registerLanguage("rs", rust);
-SyntaxHighlighter.registerLanguage("sql", sql);
-SyntaxHighlighter.registerLanguage("tsx", tsx);
-SyntaxHighlighter.registerLanguage("typescript", typescript);
-SyntaxHighlighter.registerLanguage("ts", typescript);
-SyntaxHighlighter.registerLanguage("yaml", yaml);
-SyntaxHighlighter.registerLanguage("yml", yaml);
-
 const CODE_BLOCK_STYLE = {
   margin: "1.5em 0",
   borderRadius: "0.5em",
   fontSize: "0.875em",
 };
 
+interface SyntaxHighlighterModule {
+  SyntaxHighlighter: typeof import("react-syntax-highlighter").PrismLight;
+  oneDark: typeof import("react-syntax-highlighter/dist/esm/styles/prism").oneDark;
+}
+
 interface CodeBlockProps {
   className?: string;
   children?: React.ReactNode;
 }
 
-export function CodeBlock({ className, children }: CodeBlockProps) {
-  // Extract language from className (e.g., "language-typescript" -> "typescript")
-  const langMatch = className?.match(/language-(\w+)/);
-  const language = langMatch?.[1] ?? "";
-  const codeString = String(children).replace(/\n$/, "");
+let syntaxHighlighterPromise: Promise<SyntaxHighlighterModule> | null = null;
 
-  // Mermaid diagrams
-  if (language === "mermaid") {
-    return <MermaidDiagram code={codeString} />;
+async function loadSyntaxHighlighter(): Promise<SyntaxHighlighterModule> {
+  if (syntaxHighlighterPromise) {
+    return syntaxHighlighterPromise;
   }
 
-  // Inline code (no language specified and no newlines)
-  if (!langMatch && !String(children).includes("\n")) {
-    return <code className={className}>{children}</code>;
+  syntaxHighlighterPromise = Promise.all([
+    import("react-syntax-highlighter"),
+    import("react-syntax-highlighter/dist/esm/styles/prism"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/bash"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/css"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/diff"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/go"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/graphql"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/javascript"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/json"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/jsx"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/markdown"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/python"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/rust"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/sql"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/tsx"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/typescript"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/yaml"),
+  ]).then(
+    ([
+      syntaxModule,
+      styleModule,
+      bash,
+      css,
+      diff,
+      go,
+      graphql,
+      javascript,
+      json,
+      jsx,
+      markdown,
+      python,
+      rust,
+      sql,
+      tsx,
+      typescript,
+      yaml,
+    ]) => {
+      const SyntaxHighlighter = syntaxModule.PrismLight;
+
+      SyntaxHighlighter.registerLanguage("bash", bash.default);
+      SyntaxHighlighter.registerLanguage("sh", bash.default);
+      SyntaxHighlighter.registerLanguage("shell", bash.default);
+      SyntaxHighlighter.registerLanguage("css", css.default);
+      SyntaxHighlighter.registerLanguage("diff", diff.default);
+      SyntaxHighlighter.registerLanguage("go", go.default);
+      SyntaxHighlighter.registerLanguage("graphql", graphql.default);
+      SyntaxHighlighter.registerLanguage("javascript", javascript.default);
+      SyntaxHighlighter.registerLanguage("js", javascript.default);
+      SyntaxHighlighter.registerLanguage("json", json.default);
+      SyntaxHighlighter.registerLanguage("jsx", jsx.default);
+      SyntaxHighlighter.registerLanguage("markdown", markdown.default);
+      SyntaxHighlighter.registerLanguage("md", markdown.default);
+      SyntaxHighlighter.registerLanguage("python", python.default);
+      SyntaxHighlighter.registerLanguage("py", python.default);
+      SyntaxHighlighter.registerLanguage("rust", rust.default);
+      SyntaxHighlighter.registerLanguage("rs", rust.default);
+      SyntaxHighlighter.registerLanguage("sql", sql.default);
+      SyntaxHighlighter.registerLanguage("tsx", tsx.default);
+      SyntaxHighlighter.registerLanguage("typescript", typescript.default);
+      SyntaxHighlighter.registerLanguage("ts", typescript.default);
+      SyntaxHighlighter.registerLanguage("yaml", yaml.default);
+      SyntaxHighlighter.registerLanguage("yml", yaml.default);
+
+      return {
+        SyntaxHighlighter,
+        oneDark: styleModule.oneDark,
+      };
+    },
+  );
+
+  return syntaxHighlighterPromise;
+}
+
+function LazySyntaxCodeBlock({
+  codeString,
+  language,
+}: {
+  codeString: string;
+  language: string;
+}) {
+  const [module, setModule] = useState<SyntaxHighlighterModule | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    loadSyntaxHighlighter().then((loaded) => {
+      if (!cancelled) {
+        setModule(loaded);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!module) {
+    return (
+      <pre style={CODE_BLOCK_STYLE}>
+        <code>{codeString}</code>
+      </pre>
+    );
   }
 
+  const { SyntaxHighlighter, oneDark } = module;
+
   return (
     <SyntaxHighlighter
       style={oneDark}
@@ -81,3 +142,19 @@ export function CodeBlock({ className, children }: CodeBlockProps) {
     </SyntaxHighlighter>
   );
 }
+
+export function CodeBlock({ className, children }: CodeBlockProps) {
+  const langMatch = className?.match(/language-(\w+)/);
+  const language = langMatch?.[1] ?? "";
+  const codeString = String(children).replace(/\n$/, "");
+
+  if (language === "mermaid") {
+    return <MermaidDiagram code={codeString} />;
+  }
+
+  if (!langMatch && !String(children).includes("\n")) {
+    return <code className={className}>{children}</code>;
+  }
+
+  return <LazySyntaxCodeBlock codeString={codeString} language={language} />;
+}

package/src/components/DocumentViewer/DocumentViewer.tsx

@@ -16,6 +16,7 @@ import {
   type Highlighter,
 } from "../../lib/highlight";
 import { cn, getTextContent } from "../../lib/utils";
+import { useAppStore } from "../../store";
 import {
   AnchorConfidences,
   type Comment,
@@ -23,8 +24,8 @@ import {
   FontFamilies,
   type SelectionRange,
 } from "../../types";
-import { CodeBlock } from "./CodeBlock";
 import { IframeContainer } from "./IframeContainer";
+import { createCodeComponent } from "./InlineCode";
 
 function createHeadingComponent(
   level: 1 | 2 | 3 | 4 | 5 | 6,
@@ -101,7 +102,8 @@ export function DocumentViewer({
   onHighlightHover,
   onHighlightClick,
 }: DocumentViewerProps) {
-  const { isFullscreen, fontFamily } = useLayoutContext();
+  const { isFullscreen, fontFamily, editorScheme } = useLayoutContext();
+  const workingDirectory = useAppStore((s) => s.workingDirectory);
   const contentRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const adapterRef = useRef<Highlighter | null>(null);
@@ -208,16 +210,15 @@ export function DocumentViewer({
       h4: createHeadingComponent(4, headings, headingIndexRef),
       h5: createHeadingComponent(5, headings, headingIndexRef),
       h6: createHeadingComponent(6, headings, headingIndexRef),
-      code: CodeBlock,
+      code: createCodeComponent(editorScheme, workingDirectory),
     }),
-    [headings],
+    [headings, editorScheme, workingDirectory],
   );
 
   if (type === "html") {
     return (
       <main className="flex-1 min-w-0 flex flex-col">
         <IframeContainer
-          key={content}
           html={content}
           comments={comments}
           pendingSelection={pendingSelection}
@@ -244,7 +245,6 @@ export function DocumentViewer({
         )}
       >
         <Markdown
-          key={content}
           components={markdownComponents}
           remarkPlugins={[remarkGfm]}
           rehypePlugins={[rehypeRaw]}

package/src/components/DocumentViewer/InlineCode.tsx

@@ -0,0 +1,60 @@
+import type { ComponentPropsWithoutRef } from "react";
+import {
+  buildEditorUri,
+  parseFilePath,
+  resolveAbsolutePath,
+} from "../../lib/editor-links";
+import type { EditorScheme } from "../../types";
+import { EditorSchemes } from "../../types";
+import { CodeBlock } from "./CodeBlock";
+
+/**
+ * Creates a combined code component for react-markdown that:
+ * - Routes fenced code blocks to CodeBlock (syntax highlighting)
+ * - Wraps inline code containing file paths with editor links
+ * - Falls back to plain <code> for non-file-path inline code
+ */
+export function createCodeComponent(
+  editorScheme: EditorScheme,
+  workingDirectory: string | null,
+) {
+  return function CodeComponent({
+    children,
+    className,
+    ...props
+  }: ComponentPropsWithoutRef<"code">) {
+    // Fenced code blocks have className (e.g., "language-ts") or contain newlines
+    if (className || String(children).includes("\n")) {
+      return <CodeBlock className={className}>{children}</CodeBlock>;
+    }
+
+    // Inline code — check for file path patterns
+    if (editorScheme === EditorSchemes.NONE || !workingDirectory) {
+      return <code {...props}>{children}</code>;
+    }
+
+    const text = typeof children === "string" ? children : "";
+    if (!text) {
+      return <code {...props}>{children}</code>;
+    }
+
+    const match = parseFilePath(text);
+    if (!match) {
+      return <code {...props}>{children}</code>;
+    }
+
+    const absolutePath = resolveAbsolutePath(match.path, workingDirectory);
+    const uri = buildEditorUri(
+      editorScheme,
+      absolutePath,
+      match.line,
+      match.col,
+    );
+
+    return (
+      <a href={uri} title={`Open in ${editorScheme}`} className="editor-link">
+        <code {...props}>{children}</code>
+      </a>
+    );
+  };
+}

package/src/components/FloatingTOC.tsx

@@ -1,5 +1,6 @@
 import { List } from "lucide-react";
 import { useState } from "react";
+import { useLocale } from "../contexts/LocaleContext";
 import type { Heading } from "../hooks/useHeadings";
 import { cn } from "../lib/utils";
 import { TableOfContents } from "./TableOfContents";
@@ -15,6 +16,7 @@ export function FloatingTOC({
   activeId,
   onHeadingClick,
 }: FloatingTOCProps) {
+  const { t } = useLocale();
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (headings.length === 0) return null;
@@ -24,7 +26,7 @@ export function FloatingTOC({
       className="fixed left-4 top-16 z-40"
       onMouseEnter={() => setIsExpanded(true)}
       onMouseLeave={() => setIsExpanded(false)}
-      aria-label="Table of contents"
+      aria-label={t("floatingTOC.label")}
     >
       {/* Collapsed state: circular button */}
       <button
@@ -34,7 +36,7 @@ export function FloatingTOC({
           "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"
+        aria-label={t("floatingTOC.label")}
       >
         <List className="w-5 h-5" />
       </button>

package/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { useCommentContext } from "../contexts/CommentContext";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { cn } from "../lib/utils";
 import { ActionsMenu } from "./ActionsMenu";
 import { CommentBadge } from "./comments/CommentBadge";
@@ -22,6 +23,7 @@ export function Header({
 }: HeaderProps) {
   const { reanchorTarget } = useCommentContext();
   const { isFullscreen } = useLayoutContext();
+  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">
@@ -44,7 +46,7 @@ export function Header({
         <div className="flex items-center gap-3">
           {reanchorTarget && (
             <Text variant="caption" asChild>
-              <span className="italic">Select text to re-anchor</span>
+              <span className="italic">{t("header.selectTextToReanchor")}</span>
             </Text>
           )}
 

package/src/components/InlineEditor.tsx

@@ -1,5 +1,6 @@
 import { use, useEffect, useRef, useState } from "react";
 import { LayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { cn } from "../lib/utils";
 import { FontFamilies } from "../types";
 import { Button } from "./ui/Button";
@@ -20,6 +21,7 @@ export function InlineEditor({
   className,
 }: InlineEditorProps) {
   const layout = use(LayoutContext);
+  const { t } = useLocale();
   const fontClass = layout
     ? layout.fontFamily === FontFamilies.SANS_SERIF
       ? "font-sans"
@@ -61,10 +63,10 @@ export function InlineEditor({
       />
       <div className="flex gap-3 text-sm">
         <Button variant="link" size="sm" onClick={handleSave}>
-          Save
+          {t("editor.save")}
         </Button>
         <Button variant="ghost" size="sm" onClick={onCancel}>
-          Cancel
+          {t("editor.cancel")}
         </Button>
       </div>
     </div>

package/src/components/MarginNote.tsx

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 import { useState } from "react";
 import { useCommentContext } from "../contexts/CommentContext";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { cn } from "../lib/utils";
 import { type Comment, FontFamilies } from "../types";
 import { InlineEditor } from "./InlineEditor";
@@ -60,6 +61,7 @@ export function MarginNote({
   commentIndex = 0,
 }: MarginNoteProps) {
   const { fontFamily } = useLayoutContext();
+  const { t } = useLocale();
   const {
     editComment,
     deleteComment,
@@ -100,13 +102,15 @@ export function MarginNote({
           <ActionBar
             className={cn("gap-1.5 duration-150", isHovered && "opacity-100")}
           >
-            <ActionLink onClick={() => setIsEditing(true)}>Add note</ActionLink>
+            <ActionLink onClick={() => setIsEditing(true)}>
+              {t("marginNote.addNote")}
+            </ActionLink>
             <SeparatorDot />
             <ActionLink
               variant="destructive"
               onClick={() => deleteComment(comment.id)}
             >
-              Delete
+              {t("marginNote.delete")}
             </ActionLink>
           </ActionBar>
         </div>
@@ -170,24 +174,29 @@ export function MarginNote({
               {comment.comment}
             </p>
             <ActionBar className="gap-1.5 mt-2">
-              <ActionLink onClick={() => setIsEditing(true)}>Edit</ActionLink>
+              <ActionLink onClick={() => setIsEditing(true)}>
+                {t("marginNote.edit")}
+              </ActionLink>
               <SeparatorDot />
               <ActionLink
                 variant="destructive"
                 onClick={() => deleteComment(comment.id)}
               >
-                Delete
+                {t("marginNote.delete")}
               </ActionLink>
               <SeparatorDot />
-              <ActionLink onClick={handleCopy} title="Copy raw text (⌘C)">
-                Copy
+              <ActionLink
+                onClick={handleCopy}
+                title={t("marginNote.copyTitle")}
+              >
+                {t("marginNote.copy")}
               </ActionLink>
               <SeparatorDot />
               <ActionLink
                 onClick={() => copyCommentForLLM(comment)}
-                title="Copy with context for LLM (⌘⇧C)"
+                title={t("marginNote.llmTitle")}
               >
-                LLM
+                {t("marginNote.llm")}
               </ActionLink>
             </ActionBar>
           </>

package/src/components/RawModal.tsx

@@ -1,6 +1,7 @@
 import { Copy } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
+import { useLocale } from "../contexts/LocaleContext";
 import { useAppStore } from "../store";
 import { Button } from "./ui/Button";
 import {
@@ -26,6 +27,7 @@ type ModalState =
   | { status: "success"; content: string; path: string };
 
 export function RawModal({ isOpen, onClose }: RawModalProps) {
+  const { t } = useLocale();
   const [state, setState] = useState<ModalState>({ status: "idle" });
   const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
 
@@ -73,11 +75,11 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
 
     try {
       await navigator.clipboard.writeText(state.content);
-      toast.success("Copied to clipboard");
+      toast.success(t("rawModal.copiedToClipboard"));
     } catch {
-      toast.error("Failed to copy");
+      toast.error(t("rawModal.failedToCopy"));
     }
-  }, [state]);
+  }, [state, t]);
 
   return (
     <Dialog
@@ -88,14 +90,14 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
     >
       <DialogContent className="max-w-2xl max-h-[80vh]">
         <DialogHeader>
-          <DialogTitle>Raw Comments</DialogTitle>
+          <DialogTitle>{t("rawModal.title")}</DialogTitle>
           {state.status === "success" && (
             <Button
               variant="ghost"
               size="icon"
               className="size-7"
               onClick={handleCopy}
-              title="Copy to clipboard"
+              title={t("rawModal.copyTitle")}
             >
               <Copy className="w-4 h-4" />
             </Button>
@@ -111,7 +113,7 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
         <DialogBody>
           {state.status === "loading" && (
             <Text variant="caption" className="text-center py-8">
-              Loading...
+              {t("rawModal.loading")}
             </Text>
           )}
 
@@ -123,7 +125,7 @@ export function RawModal({ isOpen, onClose }: RawModalProps) {
 
           {state.status === "empty" && (
             <Text variant="caption" className="text-center py-8">
-              No comments file yet. Add comments to create one.
+              {t("rawModal.noComments")}
             </Text>
           )}
 

package/src/components/ReanchorConfirm.tsx

@@ -1,3 +1,4 @@
+import { useLocale } from "../contexts/LocaleContext";
 import { Button } from "./ui/Button";
 import { Text } from "./ui/Text";
 
@@ -12,20 +13,22 @@ export function ReanchorConfirm({
   onConfirm,
   onCancel,
 }: ReanchorConfirmProps) {
+  const { t } = useLocale();
+
   return (
     <div className="border-t border-zinc-200 dark:border-zinc-700 pt-2 pb-3 pl-6">
       <Text variant="body" className="mb-2">
-        Re-anchor to this selection?
+        {t("reanchor.question")}
       </Text>
       <Text variant="caption" asChild>
         <p className="italic line-clamp-2 mb-2">"{selectionText}"</p>
       </Text>
       <div className="flex gap-3 text-sm">
         <Button variant="link" size="sm" onClick={onConfirm}>
-          Confirm
+          {t("reanchor.confirm")}
         </Button>
         <Button variant="ghost" size="sm" onClick={onCancel}>
-          Cancel
+          {t("reanchor.cancel")}
         </Button>
       </div>
     </div>