@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/components/DocumentViewer/CodeBlock.tsx

@@ -1,160 +0,0 @@
-import { useEffect, useState } from "react";
-import { MermaidDiagram } from "./MermaidDiagram";
-
-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;
-}
-
-let syntaxHighlighterPromise: Promise<SyntaxHighlighterModule> | null = null;
-
-async function loadSyntaxHighlighter(): Promise<SyntaxHighlighterModule> {
-  if (syntaxHighlighterPromise) {
-    return syntaxHighlighterPromise;
-  }
-
-  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}
-      language={language}
-      PreTag="div"
-      customStyle={CODE_BLOCK_STYLE}
-    >
-      {codeString}
-    </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

@@ -1,230 +0,0 @@
-import {
-  type ComponentPropsWithoutRef,
-  type MutableRefObject,
-  memo,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import Markdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-import { usePositions } from "../../contexts/PositionsContext";
-import { useSettings } from "../../contexts/SettingsContext";
-import type { Heading } from "../../hooks/useHeadings";
-import {
-  createHighlighter,
-  type Highlighter,
-} from "../../lib/highlight/highlighter";
-import type { HighlightComment } from "../../lib/highlight/types";
-import { cn, getTextContent } from "../../lib/utils";
-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,
-  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;
-      }
-    }
-
-    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;
-  comments: Comment[];
-  headings: Heading[];
-  isActive: boolean;
-  onTextSelect: (
-    text: string,
-    startOffset: number,
-    endOffset: number,
-    selectionTop: number,
-  ) => void;
-  onHighlightHover?: (commentId: string | undefined) => void;
-  onHighlightClick?: (commentId: string) => void;
-}
-
-export function DocumentViewer({
-  content,
-  comments,
-  headings,
-  isActive,
-  onTextSelect,
-  onHighlightHover,
-  onHighlightClick,
-}: DocumentViewerProps) {
-  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 (!contentRef.current || !containerRef.current) return;
-
-    const adapter = createHighlighter({
-      root: contentRef.current,
-      container: containerRef.current,
-      onSelect: onTextSelect,
-    });
-
-    adapterRef.current = adapter;
-
-    const unsubHover = onHighlightHover
-      ? adapter.onHighlightHover(onHighlightHover)
-      : () => {};
-
-    const unsubClick = onHighlightClick
-      ? adapter.onHighlightClick(onHighlightClick)
-      : () => {};
-
-    return () => {
-      unsubHover();
-      unsubClick();
-      adapter.dispose();
-      adapterRef.current = null;
-    };
-  }, [onTextSelect, onHighlightHover, onHighlightClick]);
-
-  // 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 (!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(rafId);
-  }, [comments, content, isActive, pos]);
-
-  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]);
-
-  // 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: ({
-        children,
-        className,
-        ...props
-      }: ComponentPropsWithoutRef<"code">) => {
-        if (className || String(children).includes("\n")) {
-          return <CodeBlock className={className}>{children}</CodeBlock>;
-        }
-        return <code {...props}>{children}</code>;
-      },
-    }),
-    [headings],
-  );
-
-  headingIndexRef.current = 0;
-
-  return (
-    <div ref={containerRef} className="flex-1 min-w-0">
-      <article
-        ref={contentRef}
-        className={cn(
-          "prose",
-          fontFamily === FontFamilies.SANS_SERIF ? "prose-sans" : "prose-serif",
-        )}
-      >
-        <MemoizedMarkdown content={content} components={markdownComponents} />
-      </article>
-    </div>
-  );
-}

package/src/components/DocumentViewer/MermaidDiagram.tsx

@@ -1,136 +0,0 @@
-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",
-          },
-        });
-
-        // securityLevel: "strict" prevents script injection in mermaid output
-        const { svg: renderedSvg } = await mermaid.render(
-          `mermaid-${id}`,
-          code,
-        );
-
-        if (!cancelled) {
-          setSvg(renderedSvg);
-          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/Header.tsx

@@ -1,54 +0,0 @@
-import { useCommentData } from "../contexts/CommentContext";
-import { useLocale } from "../contexts/LocaleContext";
-import { ActionsMenu } from "./ActionsMenu";
-import { CommentBadge } from "./comments/CommentBadge";
-import { Text } from "./ui/Text";
-
-interface HeaderProps {
-  fileName: string;
-  onCopyAll: () => void;
-  onExportJson: () => void;
-  onReload: () => void;
-}
-
-export function Header({
-  fileName,
-  onCopyAll,
-  onExportJson,
-  onReload,
-}: HeaderProps) {
-  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="px-6 py-3 flex items-center justify-between max-w-7xl mx-auto">
-        <div className="flex items-center gap-3">
-          <Text variant="title" as="h1">
-            readit
-          </Text>
-          <span className="text-zinc-200 dark:text-zinc-700 font-light">—</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" as="span" className="italic">
-              {t("header.selectTextToReanchor")}
-            </Text>
-          )}
-
-          <CommentBadge />
-
-          <ActionsMenu
-            onCopyAll={onCopyAll}
-            onExportJson={onExportJson}
-            onReload={onReload}
-          />
-        </div>
-      </div>
-    </header>
-  );
-}

package/src/components/InlineEditor.tsx

@@ -1,74 +0,0 @@
-import { use, useEffect, useRef, useState } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import { SettingsContext } from "../contexts/SettingsContext";
-import { cn } from "../lib/utils";
-import { FontFamilies } from "../schema";
-import { Button } from "./ui/Button";
-
-interface InlineEditorProps {
-  initialText: string;
-  onSave: (text: string) => void;
-  onCancel: () => void;
-  rows?: number;
-  className?: string;
-}
-
-export function InlineEditor({
-  initialText,
-  onSave,
-  onCancel,
-  rows = 2,
-  className,
-}: InlineEditorProps) {
-  const settings = use(SettingsContext);
-  const { t } = useLocale();
-  const fontClass = settings
-    ? settings.fontFamily === FontFamilies.SANS_SERIF
-      ? "font-sans"
-      : "font-serif"
-    : undefined;
-  const [editText, setEditText] = useState(initialText);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    textareaRef.current?.focus();
-  }, []);
-
-  const handleSave = () => {
-    if (editText.trim()) {
-      onSave(editText);
-    }
-  };
-
-  return (
-    <div className="space-y-2">
-      <textarea
-        ref={textareaRef}
-        value={editText}
-        onChange={(e) => setEditText(e.target.value)}
-        className={cn(
-          fontClass,
-          "w-full px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 resize-none focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-500",
-          className,
-        )}
-        rows={rows}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && e.metaKey) {
-            handleSave();
-          }
-          if (e.key === "Escape") {
-            onCancel();
-          }
-        }}
-      />
-      <div className="flex gap-3 text-sm">
-        <Button variant="link" size="sm" onClick={handleSave}>
-          {t("editor.save")}
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          {t("editor.cancel")}
-        </Button>
-      </div>
-    </div>
-  );
-}