@rzymek/react-pdf-highlighter 8.0.1-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Artem Tyurin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+☕️ [Buy me a coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SC4D2NS8G2JJ8&source=url)
+
+![Node CI](https://github.com/agentcooper/react-pdf-highlighter/workflows/Node%20CI/badge.svg)
+
+# react-pdf-highlighter
+
+Set of React components for PDF annotation.
+
+Features:
+
+- Built on top of PDF.js
+- Text and image highlights
+- Popover text for highlights
+- Scroll to highlights
+
+## Importing CSS
+
+The bundled CSS include the CSS for pdfjs.
+
+```tsx
+import "react-pdf-highlighter/dist/style.css";
+```
+
+## Example
+
+See demo https://agentcooper.github.io/react-pdf-highlighter/.
+
+To run the example app locally:
+
+```bash
+npm install
+npm start
+```
+
+## Install
+
+```bash
+npm install react-pdf-highlighter
+```
+
+## How to use
+
+See [`./example/src/App.tsx`](https://github.com/agentcooper/react-pdf-highlighter/blob/main/example/src/App.tsx) for the React component API example.

package/dist/components/AreaHighlight.d.ts

@@ -0,0 +1,8 @@
+import { LTWHP, ViewportHighlight } from '../types';
+interface Props {
+    highlight: ViewportHighlight;
+    onChange: (rect: LTWHP) => void;
+    isScrolledTo: boolean;
+}
+export declare function AreaHighlight({ highlight, onChange, isScrolledTo, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Highlight.d.ts

@@ -0,0 +1,17 @@
+import { LTWHP } from '../types.js';
+interface Props {
+    position: {
+        boundingRect: LTWHP;
+        rects: Array<LTWHP>;
+    };
+    onClick?: () => void;
+    onMouseOver?: () => void;
+    onMouseOut?: () => void;
+    comment: {
+        emoji: string;
+        text: string;
+    };
+    isScrolledTo: boolean;
+}
+export declare function Highlight({ position, onClick, onMouseOver, onMouseOut, comment, isScrolledTo, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HighlightLayer.d.ts

@@ -0,0 +1,26 @@
+import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs';
+import { IHighlight, LTWH, LTWHP, Position, Scaled, ScaledPosition } from '../types';
+import { T_ViewportHighlight } from './PdfHighlighter';
+interface HighlightLayerProps<T_HT> {
+    highlightsByPage: {
+        [pageNumber: string]: Array<T_HT>;
+    };
+    pageNumber: string;
+    scrolledToHighlightId: string;
+    highlightTransform: (highlight: T_ViewportHighlight<T_HT>, index: number, setTip: (highlight: T_ViewportHighlight<T_HT>, callback: (highlight: T_ViewportHighlight<T_HT>) => JSX.Element) => void, hideTip: () => void, viewportToScaled: (rect: LTWHP) => Scaled, screenshot: (position: LTWH) => string, isScrolledTo: boolean) => JSX.Element;
+    tip: {
+        highlight: T_ViewportHighlight<T_HT>;
+        callback: (highlight: T_ViewportHighlight<T_HT>) => JSX.Element;
+    } | null;
+    scaledPositionToViewport: (scaledPosition: ScaledPosition) => Position;
+    hideTipAndSelection: () => void;
+    viewer: PDFViewer | undefined;
+    screenshot: (position: LTWH, pageNumber: number) => string;
+    showTip: (highlight: T_ViewportHighlight<T_HT>, content: JSX.Element) => void;
+    setTip: (state: {
+        highlight: T_ViewportHighlight<T_HT>;
+        callback: (highlight: T_ViewportHighlight<T_HT>) => JSX.Element;
+    }) => void;
+}
+export declare function HighlightLayer<T_HT extends IHighlight>({ highlightsByPage, scaledPositionToViewport, pageNumber, scrolledToHighlightId, highlightTransform, tip, hideTipAndSelection, viewer, screenshot, showTip, setTip, }: HighlightLayerProps<T_HT>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MouseMonitor.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'react';
+interface Props {
+    onMoveAway: () => void;
+    paddingX: number;
+    paddingY: number;
+    children: JSX.Element;
+}
+export declare class MouseMonitor extends Component<Props> {
+    container: HTMLDivElement | null;
+    unsubscribe: () => void;
+    onMouseMove: (event: MouseEvent) => void;
+    attachRef: (ref: HTMLDivElement | null) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/MouseSelection.d.ts

@@ -0,0 +1,10 @@
+import { LTWH } from '../types.js';
+interface Props {
+    onSelection: (startTarget: HTMLElement, boundingRect: LTWH, resetSelection: () => void) => void;
+    onDragStart: () => void;
+    onDragEnd: () => void;
+    shouldStart: (event: MouseEvent) => boolean;
+    onChange: (isVisible: boolean) => void;
+}
+export declare function MouseSelection({ onSelection, onDragStart, onDragEnd, shouldStart, onChange, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PdfHighlighter.d.ts

@@ -0,0 +1,92 @@
+import { PDFDocumentProxy } from 'pdfjs-dist';
+import { EventBus, PDFViewer } from 'pdfjs-dist/legacy/web/pdf_viewer.mjs';
+import { PDFViewerOptions } from 'pdfjs-dist/types/web/pdf_viewer';
+import { PointerEventHandler, PureComponent, RefObject } from 'react';
+import { Root } from 'react-dom/client';
+import { IHighlight, LTWH, LTWHP, Position, Scaled, ScaledPosition } from '../types';
+export type T_ViewportHighlight<T_HT> = {
+    position: Position;
+} & T_HT;
+interface State<T_HT> {
+    ghostHighlight: {
+        position: ScaledPosition;
+        content?: {
+            text?: string;
+            image?: string;
+        };
+    } | null;
+    isCollapsed: boolean;
+    range: Range | null;
+    tip: {
+        highlight: T_ViewportHighlight<T_HT>;
+        callback: (highlight: T_ViewportHighlight<T_HT>) => JSX.Element;
+    } | null;
+    tipPosition: Position | null;
+    tipChildren: JSX.Element | null;
+    isAreaSelectionInProgress: boolean;
+    scrolledToHighlightId: string;
+}
+interface Props<T_HT> {
+    highlightTransform: (highlight: T_ViewportHighlight<T_HT>, index: number, setTip: (highlight: T_ViewportHighlight<T_HT>, callback: (highlight: T_ViewportHighlight<T_HT>) => JSX.Element) => void, hideTip: () => void, viewportToScaled: (rect: LTWHP) => Scaled, screenshot: (position: LTWH) => string, isScrolledTo: boolean) => JSX.Element;
+    highlights: Array<T_HT>;
+    onScrollChange: () => void;
+    scrollRef: (scrollTo: (highlight: T_HT) => void) => void;
+    pdfDocument: PDFDocumentProxy;
+    pdfScaleValue: string;
+    onSelectionFinished: (position: ScaledPosition, content: {
+        text?: string;
+        image?: string;
+    }, hideTipAndSelection: () => void, transformSelection: () => void) => JSX.Element | null;
+    enableAreaSelection: (event: MouseEvent) => boolean;
+    pdfViewerOptions?: PDFViewerOptions;
+}
+export declare class PdfHighlighter<T_HT extends IHighlight> extends PureComponent<Props<T_HT>, State<T_HT>> {
+    static defaultProps: {
+        pdfScaleValue: string;
+    };
+    state: State<T_HT>;
+    viewer: PDFViewer | undefined;
+    resizeObserver: ResizeObserver | null;
+    containerNode?: HTMLDivElement | null;
+    containerNodeRef: RefObject<HTMLDivElement>;
+    highlightRoots: {
+        [page: number]: {
+            reactRoot: Root;
+            container: Element;
+        };
+    };
+    unsubscribe: () => void;
+    constructor(props: Props<T_HT>);
+    componentDidMount(): void;
+    attachRef: (eventBus: EventBus) => void;
+    componentDidUpdate(prevProps: Props<T_HT>): void;
+    init(): Promise<void>;
+    componentWillUnmount(): void;
+    findOrCreateHighlightLayer(page: number): Element | null;
+    groupHighlightsByPage(highlights: Array<T_HT>): {
+        [pageNumber: string]: Array<T_HT>;
+    };
+    showTip(highlight: T_ViewportHighlight<T_HT>, content: JSX.Element): void;
+    scaledPositionToViewport({ pageNumber, boundingRect, rects, usePdfCoordinates, }: ScaledPosition): Position;
+    viewportPositionToScaled({ pageNumber, boundingRect, rects, }: Position): ScaledPosition;
+    screenshot(position: LTWH, pageNumber: number): string;
+    hideTipAndSelection: () => void;
+    setTip(position: Position, inner: JSX.Element | null): void;
+    renderTip: () => import("react/jsx-runtime").JSX.Element | null;
+    onTextLayerRendered: () => void;
+    scrollTo: (highlight: T_HT) => void;
+    onDocumentReady: () => void;
+    onSelectionChange: () => void;
+    onScroll: () => void;
+    onMouseDown: PointerEventHandler;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    afterSelection: () => void;
+    debouncedAfterSelection: () => void;
+    toggleTextSelection(flag: boolean): void;
+    handleScaleValue: () => void;
+    debouncedScaleValue: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderHighlightLayers;
+    private renderHighlightLayer;
+}
+export {};

package/dist/components/PdfLoader.d.ts

@@ -0,0 +1,32 @@
+import { PDFDocumentProxy } from 'pdfjs-dist';
+import { default as React, Component } from 'react';
+interface Props {
+    /** See `GlobalWorkerOptionsType`. */
+    workerSrc: string;
+    url: string;
+    beforeLoad: JSX.Element;
+    errorMessage?: JSX.Element;
+    children: (pdfDocument: PDFDocumentProxy) => JSX.Element;
+    onError?: (error: Error) => void;
+    cMapUrl?: string;
+    cMapPacked?: boolean;
+}
+interface State {
+    pdfDocument: PDFDocumentProxy | null;
+    error: Error | null;
+}
+export declare class PdfLoader extends Component<Props, State> {
+    state: State;
+    static defaultProps: {
+        workerSrc: string;
+    };
+    documentRef: React.RefObject<HTMLElement>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate({ url }: Props): void;
+    componentDidCatch(error: Error): void;
+    load(): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    renderError(): React.FunctionComponentElement<any> | null;
+}
+export {};

package/dist/components/Popup.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onMouseOver: (content: JSX.Element) => void;
+    popupContent: JSX.Element;
+    onMouseOut: () => void;
+    children: JSX.Element;
+}
+export declare function Popup({ onMouseOver, popupContent, onMouseOut, children, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tip.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+interface State {
+    compact: boolean;
+    text: string;
+    emoji: string;
+}
+interface Props {
+    onConfirm: (comment: {
+        text: string;
+        emoji: string;
+    }) => void;
+    onOpen: () => void;
+    onUpdate?: () => void;
+}
+export declare class Tip extends Component<Props, State> {
+    state: State;
+    componentDidUpdate(_: Props, nextState: State): void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/TipContainer.d.ts

@@ -0,0 +1,13 @@
+import { LTWHP } from '../types';
+interface Props {
+    children: JSX.Element | null;
+    style: {
+        top: number;
+        left: number;
+        bottom: number;
+    };
+    scrollTop: number;
+    pageBoundingRect: LTWHP;
+}
+export declare function TipContainer({ children, style, scrollTop, pageBoundingRect, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { PdfHighlighter } from './components/PdfHighlighter';
+export { Tip } from './components/Tip';
+export { Highlight } from './components/Highlight';
+export { Popup } from './components/Popup';
+export { AreaHighlight } from './components/AreaHighlight';
+export { PdfLoader } from './components/PdfLoader';
+export * from './types';

package/dist/lib/coordinates.d.ts

@@ -0,0 +1,8 @@
+import { LTWHP, Scaled, Viewport } from '../types';
+interface WIDTH_HEIGHT {
+    width: number;
+    height: number;
+}
+export declare const viewportToScaled: (rect: LTWHP, { width, height }: WIDTH_HEIGHT) => Scaled;
+export declare const scaledToViewport: (scaled: Scaled, viewport: Viewport, usePdfCoordinates?: boolean) => LTWHP;
+export {};

package/dist/lib/get-area-as-png.d.ts

@@ -0,0 +1,2 @@
+import { LTWHP } from '../types.js';
+export declare const getAreaAsPNG: (canvas: HTMLCanvasElement, position: LTWHP) => string;

package/dist/lib/get-bounding-rect.d.ts

@@ -0,0 +1,2 @@
+import { LTWHP } from '../types.js';
+export declare const getBoundingRect: (clientRects: Array<LTWHP>) => LTWHP;

package/dist/lib/get-client-rects.d.ts

@@ -0,0 +1,2 @@
+import { LTWHP, Page } from '../types.js';
+export declare const getClientRects: (range: Range, pages: Page[], shouldOptimize?: boolean) => Array<LTWHP>;

package/dist/lib/optimize-client-rects.d.ts

@@ -0,0 +1,2 @@
+import { LTWHP } from '../types.js';
+export declare const optimizeClientRects: (clientRects: Array<LTWHP>) => Array<LTWHP>;

package/dist/lib/pdfjs-dom.d.ts

@@ -0,0 +1,8 @@
+import { Page } from '../types';
+export declare const getDocument: (element: Element) => Document;
+export declare const getWindow: (element: Element) => typeof window;
+export declare const isHTMLElement: (element: Element | null) => element is HTMLElement;
+export declare const isHTMLCanvasElement: (element: Element) => element is HTMLCanvasElement;
+export declare const getPageFromElement: (target: HTMLElement) => Page | null;
+export declare const getPagesFromRange: (range: Range) => Page[];
+export declare const findOrCreateContainerLayer: (container: HTMLElement, className: string, selector?: string) => Element;