react-pdf-highlighter-plus 1.0.0

package/dist/esm/components/FreetextHighlight.js

@@ -0,0 +1,193 @@
+import React, { useState, useRef, useEffect, } from "react";
+import { Rnd } from "react-rnd";
+import { getPageFromElement } from "../lib/pdfjs-dom";
+import "../style/FreetextHighlight.css";
+/**
+ * Renders a draggable, editable freetext annotation.
+ *
+ * @category Component
+ */
+// Default icons
+const DefaultDragIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("circle", { cx: "8", cy: "6", r: "2" }),
+    React.createElement("circle", { cx: "16", cy: "6", r: "2" }),
+    React.createElement("circle", { cx: "8", cy: "12", r: "2" }),
+    React.createElement("circle", { cx: "16", cy: "12", r: "2" }),
+    React.createElement("circle", { cx: "8", cy: "18", r: "2" }),
+    React.createElement("circle", { cx: "16", cy: "18", r: "2" })));
+const DefaultEditIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" })));
+const DefaultStyleIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" })));
+const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" })));
+// Default color presets
+const DEFAULT_BACKGROUND_PRESETS = ["transparent", "#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"];
+const DEFAULT_TEXT_PRESETS = ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"];
+export const FreetextHighlight = ({ highlight, onChange, onTextChange, onStyleChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, color = "#333333", backgroundColor = "#ffffc8", fontFamily = "inherit", fontSize = "14px", dragIcon, editIcon, styleIcon, backgroundColorPresets = DEFAULT_BACKGROUND_PRESETS, textColorPresets = DEFAULT_TEXT_PRESETS, onDelete, deleteIcon, }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+    const [text, setText] = useState(highlight.content?.text || "");
+    const textareaRef = useRef(null);
+    const stylePanelRef = useRef(null);
+    // Sync text with highlight content when it changes externally
+    useEffect(() => {
+        setText(highlight.content?.text || "");
+    }, [highlight.content?.text]);
+    // Focus textarea when entering edit mode
+    useEffect(() => {
+        if (isEditing && textareaRef.current) {
+            textareaRef.current.focus();
+            textareaRef.current.select();
+        }
+    }, [isEditing]);
+    // Close style panel when clicking outside
+    useEffect(() => {
+        if (!isStylePanelOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
+                setIsStylePanelOpen(false);
+            }
+        };
+        // Delay adding listener to avoid immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isStylePanelOpen]);
+    const highlightClass = isScrolledTo ? "FreetextHighlight--scrolledTo" : "";
+    const editingClass = isEditing ? "FreetextHighlight--editing" : "";
+    // Generate key based on position for Rnd remount on position changes
+    const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+    const handleTextClick = (e) => {
+        e.stopPropagation();
+        if (!isEditing) {
+            setIsEditing(true);
+            onEditStart?.();
+        }
+    };
+    const handleTextBlur = () => {
+        if (isEditing) {
+            setIsEditing(false);
+            onTextChange?.(text);
+            onEditEnd?.();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setText(highlight.content?.text || "");
+            setIsEditing(false);
+            onEditEnd?.();
+        }
+        else if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            setIsEditing(false);
+            onTextChange?.(text);
+            onEditEnd?.();
+        }
+    };
+    const containerStyle = {
+        backgroundColor,
+        color,
+        fontFamily,
+        fontSize,
+        ...style,
+    };
+    return (React.createElement("div", { className: `FreetextHighlight ${highlightClass} ${editingClass}`, onContextMenu: onContextMenu },
+        React.createElement(Rnd, { className: "FreetextHighlight__rnd", onDragStop: (_, data) => {
+                const boundingRect = {
+                    ...highlight.position.boundingRect,
+                    top: data.y,
+                    left: data.x,
+                };
+                onChange?.(boundingRect);
+            }, onDragStart: () => {
+                if (!isEditing) {
+                    onEditStart?.();
+                }
+            }, default: {
+                x: highlight.position.boundingRect.left,
+                y: highlight.position.boundingRect.top,
+                width: highlight.position.boundingRect.width || 150,
+                height: highlight.position.boundingRect.height || 80,
+            }, minWidth: 100, minHeight: 50, key: key, bounds: bounds, enableResizing: {
+                top: false,
+                right: true,
+                bottom: true,
+                left: false,
+                topRight: false,
+                bottomRight: true,
+                bottomLeft: false,
+                topLeft: false,
+            }, onResizeStop: (_e, _direction, ref, _delta, position) => {
+                const boundingRect = {
+                    top: position.y,
+                    left: position.x,
+                    width: ref.offsetWidth,
+                    height: ref.offsetHeight,
+                    pageNumber: getPageFromElement(ref)?.number ||
+                        highlight.position.boundingRect.pageNumber,
+                };
+                onChange?.(boundingRect);
+            }, onResizeStart: () => {
+                if (!isEditing) {
+                    onEditStart?.();
+                }
+            }, cancel: ".FreetextHighlight__text, .FreetextHighlight__input, .FreetextHighlight__edit-button, .FreetextHighlight__style-button, .FreetextHighlight__style-panel, .FreetextHighlight__delete-button" },
+            React.createElement("div", { className: "FreetextHighlight__container", style: containerStyle },
+                React.createElement("div", { className: "FreetextHighlight__toolbar" },
+                    React.createElement("div", { className: "FreetextHighlight__drag-handle", title: "Drag to move" }, dragIcon || React.createElement(DefaultDragIcon, null)),
+                    React.createElement("button", { className: "FreetextHighlight__edit-button", onClick: handleTextClick, title: "Edit text", type: "button" }, editIcon || React.createElement(DefaultEditIcon, null)),
+                    React.createElement("button", { className: "FreetextHighlight__style-button", onClick: (e) => {
+                            e.stopPropagation();
+                            setIsStylePanelOpen(!isStylePanelOpen);
+                        }, title: "Change style", type: "button" }, styleIcon || React.createElement(DefaultStyleIcon, null)),
+                    onDelete && (React.createElement("button", { className: "FreetextHighlight__delete-button", onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
+                isStylePanelOpen && (React.createElement("div", { className: "FreetextHighlight__style-panel", ref: stylePanelRef, onClick: (e) => e.stopPropagation() },
+                    React.createElement("div", { className: "FreetextHighlight__style-row" },
+                        React.createElement("label", null, "Background"),
+                        React.createElement("div", { className: "FreetextHighlight__color-options" },
+                            React.createElement("div", { className: "FreetextHighlight__color-presets" }, backgroundColorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `FreetextHighlight__color-preset ${c === "transparent" ? "FreetextHighlight__color-preset--transparent" : ""} ${backgroundColor === c ? "active" : ""}`, style: c !== "transparent" ? { backgroundColor: c } : undefined, onClick: () => onStyleChange?.({ backgroundColor: c }), title: c === "transparent" ? "No background" : c })))),
+                            React.createElement("input", { type: "color", value: backgroundColor === "transparent" ? "#ffffff" : backgroundColor, onChange: (e) => {
+                                    onStyleChange?.({ backgroundColor: e.target.value });
+                                } }))),
+                    React.createElement("div", { className: "FreetextHighlight__style-row" },
+                        React.createElement("label", null, "Text Color"),
+                        React.createElement("div", { className: "FreetextHighlight__color-options" },
+                            React.createElement("div", { className: "FreetextHighlight__color-presets" }, textColorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `FreetextHighlight__color-preset ${color === c ? "active" : ""}`, style: { backgroundColor: c }, onClick: () => onStyleChange?.({ color: c }), title: c })))),
+                            React.createElement("input", { type: "color", value: color, onChange: (e) => {
+                                    onStyleChange?.({ color: e.target.value });
+                                } }))),
+                    React.createElement("div", { className: "FreetextHighlight__style-row" },
+                        React.createElement("label", null, "Font Size"),
+                        React.createElement("select", { value: fontSize, onChange: (e) => {
+                                onStyleChange?.({ fontSize: e.target.value });
+                            } },
+                            React.createElement("option", { value: "10px" }, "10px"),
+                            React.createElement("option", { value: "12px" }, "12px"),
+                            React.createElement("option", { value: "14px" }, "14px"),
+                            React.createElement("option", { value: "16px" }, "16px"),
+                            React.createElement("option", { value: "18px" }, "18px"),
+                            React.createElement("option", { value: "20px" }, "20px"),
+                            React.createElement("option", { value: "24px" }, "24px"))),
+                    React.createElement("div", { className: "FreetextHighlight__style-row" },
+                        React.createElement("label", null, "Font"),
+                        React.createElement("select", { value: fontFamily, onChange: (e) => {
+                                onStyleChange?.({ fontFamily: e.target.value });
+                            } },
+                            React.createElement("option", { value: "inherit" }, "Default"),
+                            React.createElement("option", { value: "Arial, sans-serif" }, "Arial"),
+                            React.createElement("option", { value: "Georgia, serif" }, "Georgia"),
+                            React.createElement("option", { value: "'Courier New', monospace" }, "Courier"),
+                            React.createElement("option", { value: "'Times New Roman', serif" }, "Times"))))),
+                React.createElement("div", { className: "FreetextHighlight__content" }, isEditing ? (React.createElement("textarea", { ref: textareaRef, className: "FreetextHighlight__input", value: text, onChange: (e) => setText(e.target.value), onBlur: handleTextBlur, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation() })) : (React.createElement("div", { className: "FreetextHighlight__text" }, text || "New note")))))));
+};
+//# sourceMappingURL=FreetextHighlight.js.map

package/dist/esm/components/FreetextHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreetextHighlight.js","sourceRoot":"","sources":["../../../src/components/FreetextHighlight.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/HighlightLayer.d.ts

@@ -0,0 +1,49 @@
+import { PDFViewer } from "pdfjs-dist/types/web/pdf_viewer";
+import React, { ReactNode } from "react";
+import { GhostHighlight, Highlight, HighlightBindings } from "../types";
+/**
+ * The props type for {@link HighlightLayer}.
+ *
+ * @category Component Properties
+ * @internal
+ */
+export interface HighlightLayerProps {
+    /**
+     * Highlights and GhostHighlights organised by page number.
+     */
+    highlightsByPage: {
+        [pageNumber: number]: Array<Highlight | GhostHighlight>;
+    };
+    /**
+     * The page number of the PDF document to highlight (1 indexed).
+     */
+    pageNumber: number;
+    /**
+     * ID of the highlight that the parent PDF Highlighter is trying to autoscroll to.
+     */
+    scrolledToHighlightId?: string | null;
+    /**
+     * The PDFViewer instance containing the HighlightLayer
+     */
+    viewer: PDFViewer;
+    /**
+     * Group of DOM refs for all the highlights on this layer.
+     */
+    highlightBindings: HighlightBindings;
+    /**
+     * The Highlight container that should be used to render highlights for this layer.
+     * It will be given appropriate context for a single highlight, allowing it to render
+     * a single {@link TextHighlight}, {@link AreaHighlight}, etc., in the correct place.
+     */
+    children: ReactNode;
+}
+/**
+ * A component responsible for managing all the highlights and ghost highlights
+ * for a single page of a PDF document. It does not render each highlight
+ * but it provides context for a highlight container to do so.
+ * Its rendering should be controlled by a {@link PdfHighlighter}.
+ *
+ * @category Component
+ * @internal
+ */
+export declare const HighlightLayer: ({ highlightsByPage, pageNumber, scrolledToHighlightId, viewer, highlightBindings, children, }: HighlightLayerProps) => React.JSX.Element;

package/dist/esm/components/HighlightLayer.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { HighlightContext, } from "../contexts/HighlightContext";
+import { scaledPositionToViewport, viewportToScaled } from "../lib/coordinates";
+import screenshot from "../lib/screenshot";
+const EMPTY_ID = "empty-id";
+/**
+ * A component responsible for managing all the highlights and ghost highlights
+ * for a single page of a PDF document. It does not render each highlight
+ * but it provides context for a highlight container to do so.
+ * Its rendering should be controlled by a {@link PdfHighlighter}.
+ *
+ * @category Component
+ * @internal
+ */
+export const HighlightLayer = ({ highlightsByPage, pageNumber, scrolledToHighlightId, viewer, highlightBindings, children, }) => {
+    const currentHighlights = highlightsByPage[pageNumber] || [];
+    return (React.createElement("div", null, currentHighlights.map((highlight, index) => {
+        const viewportHighlight = {
+            ...highlight,
+            id: "id" in highlight ? highlight.id : EMPTY_ID, // Give Empty ID to GhostHighlight
+            position: scaledPositionToViewport(highlight.position, viewer),
+        };
+        const isScrolledTo = Boolean(scrolledToHighlightId === viewportHighlight.id);
+        const highlightUtils = {
+            highlight: viewportHighlight,
+            viewportToScaled: (rect) => {
+                const viewport = viewer.getPageView((rect.pageNumber || pageNumber) - 1).viewport;
+                return viewportToScaled(rect, viewport);
+            },
+            screenshot: (boundingRect) => screenshot(boundingRect, pageNumber, viewer),
+            isScrolledTo: isScrolledTo,
+            highlightBindings,
+        };
+        return (React.createElement(HighlightContext.Provider, { value: highlightUtils, key: index }, children));
+    })));
+};
+//# sourceMappingURL=HighlightLayer.js.map

package/dist/esm/components/HighlightLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightLayer.js","sourceRoot":"","sources":["../../../src/components/HighlightLayer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAEL,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAU3C,MAAM,QAAQ,GAAG,UAAU,CAAC;AA0C5B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,UAAU,EACV,qBAAqB,EACrB,MAAM,EACN,iBAAiB,EACjB,QAAQ,GACY,EAAE,EAAE;IACxB,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IAE7D,OAAO,CACL,iCACG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;QAC1C,MAAM,iBAAiB,GAAsB;YAC3C,GAAG,SAAS;YACZ,EAAE,EAAE,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,kCAAkC;YACnF,QAAQ,EAAE,wBAAwB,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;SAC/D,CAAC;QAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,qBAAqB,KAAK,iBAAiB,CAAC,EAAE,CAC/C,CAAC;QAEF,MAAM,cAAc,GAA4B;YAC9C,SAAS,EAAE,iBAAiB;YAC5B,gBAAgB,EAAE,CAAC,IAAW,EAAE,EAAE;gBAChC,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,CACjC,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,GAAG,CAAC,CACpC,CAAC,QAAQ,CAAC;gBAEX,OAAO,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAC1C,CAAC;YACD,UAAU,EAAE,CAAC,YAAkB,EAAE,EAAE,CACjC,UAAU,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC;YAC9C,YAAY,EAAE,YAAY;YAC1B,iBAAiB;SAClB,CAAC;QAEF,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,IACzD,QAAQ,CACiB,CAC7B,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/ImageHighlight.d.ts

@@ -0,0 +1,63 @@
+import React, { CSSProperties, MouseEvent, ReactNode } from "react";
+import "../style/ImageHighlight.css";
+import type { LTWHP, ViewportHighlight } from "../types";
+/**
+ * The props type for {@link ImageHighlight}.
+ *
+ * @category Component Properties
+ */
+export interface ImageHighlightProps {
+    /**
+     * The highlight to be rendered as an {@link ImageHighlight}.
+     * The highlight.content.image should contain the image data URL.
+     */
+    highlight: ViewportHighlight;
+    /**
+     * A callback triggered whenever the highlight position or size changes.
+     *
+     * @param rect - The updated highlight area.
+     */
+    onChange?(rect: LTWHP): void;
+    /**
+     * Has the highlight been auto-scrolled into view?
+     */
+    isScrolledTo?: boolean;
+    /**
+     * react-rnd bounds on the highlight area.
+     */
+    bounds?: string | Element;
+    /**
+     * A callback triggered on context menu.
+     */
+    onContextMenu?(event: MouseEvent<HTMLDivElement>): void;
+    /**
+     * Event called when editing begins (drag or resize).
+     */
+    onEditStart?(): void;
+    /**
+     * Event called when editing ends.
+     */
+    onEditEnd?(): void;
+    /**
+     * Custom styling for the container.
+     */
+    style?: CSSProperties;
+    /**
+     * Custom drag icon. Replaces the default 6-dot grid icon.
+     */
+    dragIcon?: ReactNode;
+    /**
+     * Callback triggered when the delete button is clicked.
+     */
+    onDelete?(): void;
+    /**
+     * Custom delete icon. Replaces the default trash icon.
+     */
+    deleteIcon?: ReactNode;
+}
+/**
+ * Renders a draggable, resizable image/signature annotation.
+ *
+ * @category Component
+ */
+export declare const ImageHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onDelete, deleteIcon, }: ImageHighlightProps) => React.JSX.Element;

package/dist/esm/components/ImageHighlight.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { Rnd } from "react-rnd";
+import { getPageFromElement } from "../lib/pdfjs-dom";
+import "../style/ImageHighlight.css";
+/**
+ * Default drag icon - 6 dot grid pattern.
+ */
+const DefaultDragIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("circle", { cx: "8", cy: "6", r: "2" }),
+    React.createElement("circle", { cx: "16", cy: "6", r: "2" }),
+    React.createElement("circle", { cx: "8", cy: "12", r: "2" }),
+    React.createElement("circle", { cx: "16", cy: "12", r: "2" }),
+    React.createElement("circle", { cx: "8", cy: "18", r: "2" }),
+    React.createElement("circle", { cx: "16", cy: "18", r: "2" })));
+const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" })));
+/**
+ * Renders a draggable, resizable image/signature annotation.
+ *
+ * @category Component
+ */
+export const ImageHighlight = ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onDelete, deleteIcon, }) => {
+    const highlightClass = isScrolledTo ? "ImageHighlight--scrolledTo" : "";
+    // Generate key based on position for Rnd remount on position changes
+    const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+    const imageUrl = highlight.content?.image;
+    return (React.createElement("div", { className: `ImageHighlight ${highlightClass}`, onContextMenu: onContextMenu },
+        React.createElement(Rnd, { className: "ImageHighlight__rnd", onDragStop: (_, data) => {
+                const boundingRect = {
+                    ...highlight.position.boundingRect,
+                    top: data.y,
+                    left: data.x,
+                };
+                onChange?.(boundingRect);
+                onEditEnd?.();
+            }, onDragStart: onEditStart, onResizeStop: (_e, _direction, ref, _delta, position) => {
+                const boundingRect = {
+                    top: position.y,
+                    left: position.x,
+                    width: ref.offsetWidth,
+                    height: ref.offsetHeight,
+                    pageNumber: getPageFromElement(ref)?.number ||
+                        highlight.position.boundingRect.pageNumber,
+                };
+                onChange?.(boundingRect);
+                onEditEnd?.();
+            }, onResizeStart: onEditStart, default: {
+                x: highlight.position.boundingRect.left,
+                y: highlight.position.boundingRect.top,
+                width: highlight.position.boundingRect.width || 150,
+                height: highlight.position.boundingRect.height || 100,
+            }, minWidth: 50, minHeight: 50, key: key, bounds: bounds, lockAspectRatio: true, dragHandleClassName: "ImageHighlight__drag-handle", onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }, style: style },
+            React.createElement("div", { className: "ImageHighlight__container" },
+                React.createElement("div", { className: "ImageHighlight__toolbar" },
+                    React.createElement("div", { className: "ImageHighlight__drag-handle", title: "Drag to move" }, dragIcon || React.createElement(DefaultDragIcon, null)),
+                    onDelete && (React.createElement("button", { className: "ImageHighlight__delete-button", onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
+                React.createElement("div", { className: "ImageHighlight__content" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: "Highlight", className: "ImageHighlight__image", draggable: false })) : (React.createElement("div", { className: "ImageHighlight__placeholder" }, "No image")))))));
+};
+//# sourceMappingURL=ImageHighlight.js.map

package/dist/esm/components/ImageHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageHighlight.js","sourceRoot":"","sources":["../../../src/components/ImageHighlight.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/MonitoredHighlightContainer.d.ts

@@ -0,0 +1,37 @@
+import React, { ReactNode } from "react";
+import { Tip } from "../types";
+/**
+ * The props type for {@link MonitoredHighlightContainer}.
+ *
+ * @category Component Properties
+ */
+export interface MonitoredHighlightContainerProps {
+    /**
+     * A callback triggered whenever the mouse hovers over a highlight.
+     */
+    onMouseEnter?(): void;
+    /**
+     * What tip to automatically display whenever a mouse hovers over a highlight.
+     * The tip will persist even as the user puts their mouse over it and not the
+     * highlight, but will disappear once it no longer hovers both.
+     */
+    highlightTip?: Tip;
+    /**
+     * A callback triggered whenever the mouse completely moves out from both the
+     * highlight (children) and any highlightTip.
+     */
+    onMouseLeave?(): void;
+    /**
+     * Component to monitor mouse activity over. This should be a highlight within the {@link PdfHighlighter}.
+     */
+    children: ReactNode;
+}
+/**
+ * A container for a highlight component that monitors whether a mouse is over a
+ * highlight and over some secondary highlight tip. It will display the tip
+ * whenever the mouse is over the highlight and it will hide the tip only when
+ * the mouse has left the highlight AND the tip.
+ *
+ * @category Component
+ */
+export declare const MonitoredHighlightContainer: ({ onMouseEnter, highlightTip, onMouseLeave, children, }: MonitoredHighlightContainerProps) => React.JSX.Element;

package/dist/esm/components/MonitoredHighlightContainer.js

@@ -0,0 +1,42 @@
+import React, { useRef } from "react";
+import { usePdfHighlighterContext } from "../contexts/PdfHighlighterContext";
+import { MouseMonitor } from "./MouseMonitor";
+/**
+ * A container for a highlight component that monitors whether a mouse is over a
+ * highlight and over some secondary highlight tip. It will display the tip
+ * whenever the mouse is over the highlight and it will hide the tip only when
+ * the mouse has left the highlight AND the tip.
+ *
+ * @category Component
+ */
+export const MonitoredHighlightContainer = ({ onMouseEnter, highlightTip, onMouseLeave, children, }) => {
+    const mouseInRef = useRef(false); // Whether the mouse is over the child (highlight)
+    const { setTip, isEditingOrHighlighting } = usePdfHighlighterContext();
+    return (React.createElement("div", { onMouseEnter: () => {
+            mouseInRef.current = true;
+            onMouseEnter && onMouseEnter();
+            if (isEditingOrHighlighting())
+                return;
+            if (highlightTip) {
+                // MouseMonitor the highlightTip to prevent it from disappearing if the mouse is over it and not the highlight.
+                const monitoredHighlightTip = (React.createElement(MouseMonitor, { onMoveAway: () => {
+                        // The event will keep triggering if the mouse is not on the highlightTip,
+                        // but don't do anything if the mouse is over the highlight.
+                        if (mouseInRef.current) {
+                            return;
+                        }
+                        setTip(null);
+                        onMouseLeave && onMouseLeave();
+                    }, paddingX: 60, paddingY: 30 }, highlightTip.content));
+                setTip({
+                    position: highlightTip.position,
+                    content: monitoredHighlightTip,
+                });
+            }
+        }, onMouseLeave: () => {
+            mouseInRef.current = false;
+            // Trigger onMouseLeave if no highlightTip exists
+            !highlightTip && onMouseLeave && onMouseLeave();
+        } }, children));
+};
+//# sourceMappingURL=MonitoredHighlightContainer.js.map

package/dist/esm/components/MonitoredHighlightContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonitoredHighlightContainer.js","sourceRoot":"","sources":["../../../src/components/MonitoredHighlightContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAgC9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,QAAQ,GACyB,EAAE,EAAE;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,kDAAkD;IAEpF,MAAM,EAAE,MAAM,EAAE,uBAAuB,EAAE,GAAG,wBAAwB,EAAE,CAAC;IAEvE,OAAO,CACL,6BACE,YAAY,EAAE,GAAG,EAAE;YACjB,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,YAAY,IAAI,YAAY,EAAE,CAAC;YAE/B,IAAI,uBAAuB,EAAE;gBAAE,OAAO;YAEtC,IAAI,YAAY,EAAE,CAAC;gBACjB,+GAA+G;gBAC/G,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,YAAY,IACX,UAAU,EAAE,GAAG,EAAE;wBACf,0EAA0E;wBAC1E,4DAA4D;wBAC5D,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;4BACvB,OAAO;wBACT,CAAC;wBAED,MAAM,CAAC,IAAI,CAAC,CAAC;wBACb,YAAY,IAAI,YAAY,EAAE,CAAC;oBACjC,CAAC,EACD,QAAQ,EAAE,EAAE,EACZ,QAAQ,EAAE,EAAE,IAEX,YAAY,CAAC,OAAO,CACR,CAChB,CAAC;gBAEF,MAAM,CAAC;oBACL,QAAQ,EAAE,YAAY,CAAC,QAAQ;oBAC/B,OAAO,EAAE,qBAAqB;iBAC/B,CAAC,CAAC;YACL,CAAC;QACH,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;YACjB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;YAE3B,iDAAiD;YACjD,CAAC,YAAY,IAAI,YAAY,IAAI,YAAY,EAAE,CAAC;QAClD,CAAC,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/MouseMonitor.d.ts

@@ -0,0 +1,34 @@
+import React, { ReactNode } from "react";
+/**
+ * The props type for {@link MouseMonitor}.
+ *
+ * @category Component Properties
+ * @internal
+ */
+export interface MouseMonitorProps {
+    /**
+     * Callback triggered whenever the mouse moves not within the bounds of the
+     * child component. This will keep triggering as long as the component is
+     * rendered.
+     */
+    onMoveAway(): void;
+    /**
+     * X padding in pixels for the container to monitor mouse activity in.
+     */
+    paddingX: number;
+    /**
+     * Y padding in pixels for the container to monitor mouse activity in.
+     */
+    paddingY: number;
+    /**
+     * Component over which mouse activity is monitored.
+     */
+    children: ReactNode;
+}
+/**
+ * A component that monitors mouse movements over a child and invisible padded area.
+ *
+ * @category Component
+ * @internal
+ */
+export declare const MouseMonitor: ({ onMoveAway, paddingX, paddingY, children, }: MouseMonitorProps) => React.JSX.Element;

package/dist/esm/components/MouseMonitor.js

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef } from "react";
+/**
+ * A component that monitors mouse movements over a child and invisible padded area.
+ *
+ * @category Component
+ * @internal
+ */
+export const MouseMonitor = ({ onMoveAway, paddingX, paddingY, children, }) => {
+    const containerRef = useRef(null);
+    const onMouseMove = (event) => {
+        if (!containerRef.current)
+            return;
+        const { clientX, clientY } = event;
+        const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+        const inBoundsX = clientX > left - paddingX && clientX < left + width + paddingX;
+        const inBoundsY = clientY > top - paddingY && clientY < top + height + paddingY;
+        if (!(inBoundsX && inBoundsY)) {
+            onMoveAway();
+        }
+    };
+    useEffect(() => {
+        // TODO: Maybe optimise or throttle?
+        document.addEventListener("mousemove", onMouseMove);
+        return () => {
+            document.removeEventListener("mousemove", onMouseMove);
+        };
+    }, []);
+    return React.createElement("div", { ref: containerRef }, children);
+};
+//# sourceMappingURL=MouseMonitor.js.map

package/dist/esm/components/MouseMonitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MouseMonitor.js","sourceRoot":"","sources":["../../../src/components/MouseMonitor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgC5D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,GACU,EAAE,EAAE;IACtB,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;QACxC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAElC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QACnC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAChC,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAE/C,MAAM,SAAS,GACb,OAAO,GAAG,IAAI,GAAG,QAAQ,IAAI,OAAO,GAAG,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;QACjE,MAAM,SAAS,GACb,OAAO,GAAG,GAAG,GAAG,QAAQ,IAAI,OAAO,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC;QAEhE,IAAI,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,EAAE,CAAC;YAC9B,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,oCAAoC;QACpC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAEpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,6BAAK,GAAG,EAAE,YAAY,IAAG,QAAQ,CAAO,CAAC;AAClD,CAAC,CAAC"}