@peaske7/readit 0.1.8 → 0.2.1

package/src/components/ActionsMenu.tsx

@@ -1,112 +0,0 @@
-import {
-  BotMessageSquare,
-  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 { useLocale } from "../contexts/LocaleContext";
-import { RawModal } from "./RawModal";
-import { SettingsModal } from "./SettingsModal";
-import { Button } from "./ui/Button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "./ui/DropdownMenu";
-
-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 { t } = useLocale();
-
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [rawModalOpen, setRawModalOpen] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
-  return (
-    <>
-      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="size-7"
-            aria-label={t("actions.ariaLabel")}
-          >
-            <MoreHorizontal className="w-4 h-4" />
-          </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")}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onSelect={() => onReload()}>
-            <RefreshCw />
-            {t("actions.reload")}
-          </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>
-              <DropdownMenuItem onSelect={() => onExportJson()}>
-                <FileDown />
-                {t("actions.exportJson")}
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => setRawModalOpen(true)}>
-                <FileText />
-                {t("actions.viewRaw")}
-              </DropdownMenuItem>
-            </>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <RawModal isOpen={rawModalOpen} onClose={() => setRawModalOpen(false)} />
-
-      <SettingsModal
-        isOpen={settingsOpen}
-        onClose={() => setSettingsOpen(false)}
-      />
-    </>
-  );
-}

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,259 +0,0 @@
-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 { useAppStore } from "../../store";
-import {
-  AnchorConfidences,
-  type Comment,
-  type DocumentType,
-  FontFamilies,
-  type SelectionRange,
-} from "../../types";
-import { IframeContainer } from "./IframeContainer";
-import { createCodeComponent } from "./InlineCode";
-
-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, editorScheme } = useLayoutContext();
-  const workingDirectory = useAppStore((s) => s.workingDirectory);
-  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 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);
-      });
-    });
-
-    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]);
-
-  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: createCodeComponent(editorScheme, workingDirectory),
-    }),
-    [headings, editorScheme, workingDirectory],
-  );
-
-  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 (
-    <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
-          components={markdownComponents}
-          remarkPlugins={[remarkGfm]}
-          rehypePlugins={[rehypeRaw]}
-        >
-          {content}
-        </Markdown>
-      </article>
-    </div>
-  );
-}