Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212import React, { lazy, Suspense } from "react";import { Article, BookmarkSimple, BookOpenText, DownloadSimple, List, PencilSimple, Trash, NotePencil, Columns, ArrowsOutSimple, ArrowsInSimple,} from "@phosphor-icons/react";import { IconButton, Spinner } from "./ui.jsx";import { ActionMenu } from "./ActionMenu.jsx";import { Markdown } from "./Markdown.jsx";import { LibraryOverview } from "./LibraryOverview.jsx";
const PdfReader = lazy(() => import("./PdfReader.jsx").then((module) => ({ default: module.PdfReader })),);
export function ReaderPane({ inactive = false, narrow, sidePanelsOpen, loading, material, kind, materials, onAddMaterial, onOpenMaterial, onOpenOutline, onOpenHighlights, onStartEdit, onDeleteMaterial, onNotes, onCompare, onGenerate, onRewrite, onRevisions, readingMode, onReadingMode, readerRef, articleRef, onArticleScroll, onMarkPositionReady, onArticleSelection, onDiagramChange, page, onPage, onVisiblePage, navigationToken, highlights, onSelection, onContext, onOutline, screenshotRef, notify,}) { return ( <main className="reader" inert={inactive || (narrow && sidePanelsOpen) ? "" : undefined} > {loading ? ( <Spinner label="Opening your library…" /> ) : !material ? ( <LibraryOverview kind={kind} materials={materials} onAdd={onAddMaterial} onOpenMaterial={onOpenMaterial} /> ) : ( <> <div className="reader-toolbar"> <div className="reader-title"> {material.kind === "book" ? ( <BookOpenText size={18} /> ) : ( <Article size={18} /> )} <span>{material.title}</span> </div> <div className="reader-actions"> {material.kind === "article" && ( <IconButton label={ readingMode ? "Exit reading view" : "Enter reading view" } aria-pressed={readingMode} tooltip onClick={onReadingMode} > {readingMode ? ( <ArrowsInSimple size={18} /> ) : ( <ArrowsOutSimple size={18} /> )} </IconButton> )} <IconButton className="reader-action-button" label="Table of contents" tooltip onClick={onOpenOutline} > <List size={19} /> <span>Contents</span> </IconButton> <IconButton className="reader-action-button" label="Show saved highlights" tooltip onClick={onOpenHighlights} > <BookmarkSimple size={19} /> <span>Highlights</span> </IconButton> <ActionMenu label="Material actions" tooltip items={[ ...(material.kind === "article" ? [ { label: "Improve article", icon: PencilSimple, onSelect: onRewrite }, { label: "Article history", icon: BookOpenText, onSelect: onRevisions }, { label: "Generate new article", icon: Article, onSelect: onGenerate }, ] : []), { label: "Notes", icon: NotePencil, onSelect: onNotes }, { label: "Compare with…", icon: Columns, onSelect: onCompare, }, { label: material.kind === "article" ? "Edit article" : "Edit book details", icon: PencilSimple, onSelect: onStartEdit, }, { label: "Export material", icon: DownloadSimple, href: `/api/reader/materials/${material.id}/export`, }, { label: material.kind === "book" ? "Delete book" : "Delete article", icon: Trash, onSelect: onDeleteMaterial, danger: true, }, ]} /> </div> </div> {material.kind === "article" ? ( <div className="reader-scroll" ref={readerRef} onScroll={onArticleScroll} onWheel={onMarkPositionReady} onTouchStart={onMarkPositionReady} onPointerDown={onMarkPositionReady} onKeyDown={onMarkPositionReady} onPointerUp={onArticleSelection} onKeyUp={onArticleSelection} > <article className="article"> <span className="eyebrow">{material.subject || "Article"}</span> <h1>{material.title}</h1> <div className="title-rule" /> <div ref={articleRef} className="article-prose"> <Markdown content={material.body} materialId={material.id} sources={material.sources} onDiagramChange={onDiagramChange} /> </div> </article> </div> ) : ( <Suspense fallback={<Spinner label="Opening PDF reader…" />}> <PdfReader key={material.id} material={material} page={page} onPage={onPage} onVisiblePage={onVisiblePage} navigationToken={navigationToken} highlights={highlights} onSelection={onSelection} onContext={onContext} onOutline={onOutline} screenshotRef={screenshotRef} notify={notify} /> </Suspense> )} </> )} </main> );}