react-pdf-highlighter-plus 1.0.0

package/dist/esm/components/DrawingCanvas.js

@@ -0,0 +1,277 @@
+import React, { useRef, useEffect, useCallback, useState, } from "react";
+import { viewportPositionToScaled } from "../lib/coordinates";
+import "../style/DrawingCanvas.css";
+/**
+ * A transparent overlay canvas for freehand drawing on PDF pages.
+ * Supports mouse and touch input.
+ *
+ * @category Component
+ */
+export const DrawingCanvas = ({ isActive, strokeColor = "#000000", strokeWidth = 3, viewer, onComplete, onCancel, }) => {
+    const canvasRef = useRef(null);
+    const [strokes, setStrokes] = useState([]);
+    const [currentStroke, setCurrentStroke] = useState(null);
+    const isDrawingRef = useRef(false);
+    const [pageNumber, setPageNumber] = useState(null);
+    const [pageElement, setPageElement] = useState(null);
+    // Find which page the user is drawing on
+    const findPageFromPoint = useCallback((clientX, clientY) => {
+        if (!viewer)
+            return null;
+        for (let i = 0; i < viewer.pagesCount; i++) {
+            const pageView = viewer.getPageView(i);
+            if (!pageView?.div)
+                continue;
+            const rect = pageView.div.getBoundingClientRect();
+            if (clientX >= rect.left &&
+                clientX <= rect.right &&
+                clientY >= rect.top &&
+                clientY <= rect.bottom) {
+                return {
+                    pageNumber: i + 1,
+                    element: pageView.div,
+                    rect,
+                };
+            }
+        }
+        return null;
+    }, [viewer]);
+    // Redraw all strokes
+    const redrawCanvas = useCallback(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (!ctx || !canvas)
+            return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // Draw all completed strokes with their own color/width
+        strokes.forEach((stroke) => {
+            if (stroke.points.length < 2)
+                return;
+            ctx.strokeStyle = stroke.color;
+            ctx.lineWidth = stroke.width;
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            ctx.beginPath();
+            ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+            stroke.points.slice(1).forEach((point) => {
+                ctx.lineTo(point.x, point.y);
+            });
+            ctx.stroke();
+        });
+        // Draw current stroke with current color/width
+        if (currentStroke && currentStroke.points.length >= 2) {
+            ctx.strokeStyle = currentStroke.color;
+            ctx.lineWidth = currentStroke.width;
+            ctx.lineCap = "round";
+            ctx.lineJoin = "round";
+            ctx.beginPath();
+            ctx.moveTo(currentStroke.points[0].x, currentStroke.points[0].y);
+            currentStroke.points.slice(1).forEach((point) => {
+                ctx.lineTo(point.x, point.y);
+            });
+            ctx.stroke();
+        }
+    }, [strokes, currentStroke]);
+    // Redraw when strokes change
+    useEffect(() => {
+        redrawCanvas();
+    }, [redrawCanvas]);
+    // Handle mouse/touch down
+    const handleStart = useCallback((clientX, clientY) => {
+        const pageInfo = findPageFromPoint(clientX, clientY);
+        if (!pageInfo)
+            return;
+        console.log("DrawingCanvas: Started drawing on page", pageInfo.pageNumber);
+        // Set page context if not already set
+        if (pageNumber === null) {
+            setPageNumber(pageInfo.pageNumber);
+            setPageElement(pageInfo.element);
+            // Resize canvas to match page
+            const canvas = canvasRef.current;
+            if (canvas) {
+                canvas.width = pageInfo.rect.width;
+                canvas.height = pageInfo.rect.height;
+                canvas.style.left = `${pageInfo.rect.left}px`;
+                canvas.style.top = `${pageInfo.rect.top}px`;
+            }
+        }
+        else if (pageInfo.pageNumber !== pageNumber) {
+            // User trying to draw on different page - ignore
+            console.log("DrawingCanvas: Ignoring - different page");
+            return;
+        }
+        isDrawingRef.current = true;
+        const pos = {
+            x: clientX - pageInfo.rect.left,
+            y: clientY - pageInfo.rect.top,
+        };
+        setCurrentStroke({ points: [pos], color: strokeColor, width: strokeWidth });
+    }, [pageNumber, findPageFromPoint, strokeColor, strokeWidth]);
+    // Handle mouse/touch move
+    const handleMove = useCallback((clientX, clientY) => {
+        if (!isDrawingRef.current || !pageElement)
+            return;
+        const rect = pageElement.getBoundingClientRect();
+        const pos = {
+            x: clientX - rect.left,
+            y: clientY - rect.top,
+        };
+        setCurrentStroke((prev) => {
+            if (!prev)
+                return null;
+            return { ...prev, points: [...prev.points, pos] };
+        });
+    }, [pageElement]);
+    // Handle mouse/touch end
+    const handleEnd = useCallback(() => {
+        if (!isDrawingRef.current)
+            return;
+        isDrawingRef.current = false;
+        if (currentStroke && currentStroke.points.length >= 2) {
+            setStrokes((prev) => [...prev, currentStroke]);
+        }
+        setCurrentStroke(null);
+    }, [currentStroke]);
+    // Mouse event handlers
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        handleStart(e.clientX, e.clientY);
+    }, [handleStart]);
+    const handleMouseMove = useCallback((e) => {
+        handleMove(e.clientX, e.clientY);
+    }, [handleMove]);
+    const handleMouseUp = useCallback(() => {
+        handleEnd();
+    }, [handleEnd]);
+    // Touch event handlers
+    const handleTouchStart = useCallback((e) => {
+        e.preventDefault();
+        if (e.touches.length > 0) {
+            handleStart(e.touches[0].clientX, e.touches[0].clientY);
+        }
+    }, [handleStart]);
+    const handleTouchMove = useCallback((e) => {
+        e.preventDefault();
+        if (e.touches.length > 0) {
+            handleMove(e.touches[0].clientX, e.touches[0].clientY);
+        }
+    }, [handleMove]);
+    const handleTouchEnd = useCallback(() => {
+        handleEnd();
+    }, [handleEnd]);
+    // Handle keyboard events
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.code === "Escape") {
+                console.log("DrawingCanvas: Cancelled via Escape");
+                onCancel();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isActive, onCancel]);
+    // Clear drawing
+    const handleClear = () => {
+        console.log("DrawingCanvas: Cleared strokes");
+        setStrokes([]);
+        setCurrentStroke(null);
+        setPageNumber(null);
+        setPageElement(null);
+    };
+    // Complete drawing
+    const handleDone = () => {
+        if (strokes.length === 0 || pageNumber === null || !pageElement || !viewer) {
+            console.log("DrawingCanvas: No strokes to save");
+            onCancel();
+            return;
+        }
+        console.log("DrawingCanvas: Completing drawing with", strokes.length, "strokes");
+        // Calculate bounding box of all strokes
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        strokes.forEach((stroke) => {
+            stroke.points.forEach((point) => {
+                minX = Math.min(minX, point.x);
+                minY = Math.min(minY, point.y);
+                maxX = Math.max(maxX, point.x);
+                maxY = Math.max(maxY, point.y);
+            });
+        });
+        // Find max stroke width for padding
+        const maxStrokeWidth = Math.max(...strokes.map(s => s.width));
+        const padding = maxStrokeWidth * 2;
+        minX = Math.max(0, minX - padding);
+        minY = Math.max(0, minY - padding);
+        maxX = maxX + padding;
+        maxY = maxY + padding;
+        const width = maxX - minX;
+        const height = maxY - minY;
+        // Create a new canvas with just the drawing (cropped to bounding box)
+        const outputCanvas = document.createElement("canvas");
+        outputCanvas.width = width;
+        outputCanvas.height = height;
+        const outputCtx = outputCanvas.getContext("2d");
+        if (!outputCtx) {
+            console.error("DrawingCanvas: Could not get output canvas context");
+            onCancel();
+            return;
+        }
+        // Draw all strokes offset by bounding box origin, using per-stroke color/width
+        strokes.forEach((stroke) => {
+            if (stroke.points.length < 2)
+                return;
+            outputCtx.strokeStyle = stroke.color;
+            outputCtx.lineWidth = stroke.width;
+            outputCtx.lineCap = "round";
+            outputCtx.lineJoin = "round";
+            outputCtx.beginPath();
+            outputCtx.moveTo(stroke.points[0].x - minX, stroke.points[0].y - minY);
+            stroke.points.slice(1).forEach((point) => {
+                outputCtx.lineTo(point.x - minX, point.y - minY);
+            });
+            outputCtx.stroke();
+        });
+        const dataUrl = outputCanvas.toDataURL("image/png");
+        // Create viewport position
+        const viewportPosition = {
+            boundingRect: {
+                left: minX,
+                top: minY,
+                width: width,
+                height: height,
+                pageNumber: pageNumber,
+            },
+            rects: [],
+        };
+        const scaledPosition = viewportPositionToScaled(viewportPosition, viewer);
+        // Normalize strokes relative to bounding box for storage
+        const normalizedStrokes = strokes.map((stroke) => ({
+            ...stroke,
+            points: stroke.points.map((point) => ({
+                x: point.x - minX,
+                y: point.y - minY,
+            })),
+        }));
+        console.log("DrawingCanvas: Created drawing at position", scaledPosition);
+        onComplete(dataUrl, scaledPosition, normalizedStrokes);
+        // Reset state
+        setStrokes([]);
+        setCurrentStroke(null);
+        setPageNumber(null);
+        setPageElement(null);
+    };
+    if (!isActive)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("canvas", { ref: canvasRef, className: "DrawingCanvas", style: {
+                width: pageElement ? pageElement.getBoundingClientRect().width : "100%",
+                height: pageElement ? pageElement.getBoundingClientRect().height : "100%",
+                position: "fixed",
+            }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd }),
+        React.createElement("div", { className: "DrawingCanvas__controls" },
+            React.createElement("button", { type: "button", className: "DrawingCanvas__clearButton", onClick: handleClear }, "Clear"),
+            React.createElement("button", { type: "button", className: "DrawingCanvas__cancelButton", onClick: onCancel }, "Cancel"),
+            React.createElement("button", { type: "button", className: "DrawingCanvas__doneButton", onClick: handleDone }, "Done"))));
+};
+//# sourceMappingURL=DrawingCanvas.js.map

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

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

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

@@ -0,0 +1,70 @@
+import React, { CSSProperties, MouseEvent, ReactNode } from "react";
+import "../style/DrawingHighlight.css";
+import type { DrawingStroke, LTWHP, ViewportHighlight } from "../types";
+/**
+ * The props type for {@link DrawingHighlight}.
+ *
+ * @category Component Properties
+ */
+export interface DrawingHighlightProps {
+    /**
+     * The highlight to be rendered as a {@link DrawingHighlight}.
+     * The highlight.content.image should contain the drawing as a PNG 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 when drawing style changes (color or stroke width).
+     * The newImage is the re-rendered PNG data URL with updated styles.
+     * The newStrokes contain the updated stroke data.
+     */
+    onStyleChange?(newImage: string, newStrokes: DrawingStroke[]): void;
+    /**
+     * Callback triggered when the delete button is clicked.
+     */
+    onDelete?(): void;
+    /**
+     * Custom delete icon. Replaces the default trash icon.
+     */
+    deleteIcon?: ReactNode;
+}
+/**
+ * Renders a draggable, resizable freehand drawing annotation.
+ * Drawings are stored as PNG images with transparent backgrounds.
+ *
+ * @category Component
+ */
+export declare const DrawingHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onStyleChange, onDelete, deleteIcon, }: DrawingHighlightProps) => React.JSX.Element;

package/dist/esm/components/DrawingHighlight.js

@@ -0,0 +1,164 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { Rnd } from "react-rnd";
+import { getPageFromElement } from "../lib/pdfjs-dom";
+import "../style/DrawingHighlight.css";
+// Drawing style presets (same as toolbar)
+const DRAWING_COLORS = ["#000000", "#FF0000", "#0000FF", "#00FF00", "#FFFF00"];
+const STROKE_WIDTHS = [
+    { label: "Thin", value: 1 },
+    { label: "Medium", value: 3 },
+    { label: "Thick", value: 5 },
+];
+/**
+ * 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" })));
+/**
+ * Re-render strokes to a canvas and return as PNG data URL.
+ */
+const renderStrokesToImage = (strokes, width, height) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return "";
+    strokes.forEach((stroke) => {
+        if (stroke.points.length < 2)
+            return;
+        ctx.strokeStyle = stroke.color;
+        ctx.lineWidth = stroke.width;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+        ctx.beginPath();
+        ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+        stroke.points.slice(1).forEach((point) => {
+            ctx.lineTo(point.x, point.y);
+        });
+        ctx.stroke();
+    });
+    return canvas.toDataURL("image/png");
+};
+/**
+ * Renders a draggable, resizable freehand drawing annotation.
+ * Drawings are stored as PNG images with transparent backgrounds.
+ *
+ * @category Component
+ */
+export const DrawingHighlight = ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onStyleChange, onDelete, deleteIcon, }) => {
+    const highlightClass = isScrolledTo ? "DrawingHighlight--scrolledTo" : "";
+    const [showStyleControls, setShowStyleControls] = useState(false);
+    const styleControlsRef = useRef(null);
+    // Close style controls when clicking outside
+    useEffect(() => {
+        if (!showStyleControls)
+            return;
+        const handleClickOutside = (e) => {
+            if (styleControlsRef.current && !styleControlsRef.current.contains(e.target)) {
+                setShowStyleControls(false);
+            }
+        };
+        // Delay adding listener to avoid immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [showStyleControls]);
+    // 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;
+    const strokes = highlight.content?.strokes;
+    // Apply new color to all strokes
+    const handleColorChange = useCallback((newColor) => {
+        if (!strokes || !onStyleChange)
+            return;
+        console.log("DrawingHighlight: Changing color to", newColor);
+        const newStrokes = strokes.map((stroke) => ({
+            ...stroke,
+            color: newColor,
+        }));
+        const newImage = renderStrokesToImage(newStrokes, highlight.position.boundingRect.width, highlight.position.boundingRect.height);
+        onStyleChange(newImage, newStrokes);
+    }, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
+    // Apply new width to all strokes
+    const handleWidthChange = useCallback((newWidth) => {
+        if (!strokes || !onStyleChange)
+            return;
+        console.log("DrawingHighlight: Changing width to", newWidth);
+        const newStrokes = strokes.map((stroke) => ({
+            ...stroke,
+            width: newWidth,
+        }));
+        const newImage = renderStrokesToImage(newStrokes, highlight.position.boundingRect.width, highlight.position.boundingRect.height);
+        onStyleChange(newImage, newStrokes);
+    }, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
+    // Get current color from first stroke (for showing active state)
+    const currentColor = strokes?.[0]?.color || "#000000";
+    const currentWidth = strokes?.[0]?.width || 3;
+    return (React.createElement("div", { className: `DrawingHighlight ${highlightClass}`, onContextMenu: onContextMenu },
+        React.createElement(Rnd, { className: "DrawingHighlight__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: 30, minHeight: 30, key: key, bounds: bounds, 
+            // No aspect ratio lock for drawings - allow free resizing
+            lockAspectRatio: false, dragHandleClassName: "DrawingHighlight__drag-handle", onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }, style: style },
+            React.createElement("div", { className: "DrawingHighlight__container" },
+                React.createElement("div", { className: "DrawingHighlight__toolbar" },
+                    React.createElement("div", { className: "DrawingHighlight__drag-handle", title: "Drag to move" }, dragIcon || React.createElement(DefaultDragIcon, null)),
+                    strokes && strokes.length > 0 && onStyleChange && (React.createElement("button", { type: "button", className: "DrawingHighlight__style-button", title: "Edit style", onClick: (e) => {
+                            e.stopPropagation();
+                            setShowStyleControls(!showStyleControls);
+                        } },
+                        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" })))),
+                    onDelete && (React.createElement("button", { className: "DrawingHighlight__delete-button", onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
+                showStyleControls && strokes && strokes.length > 0 && onStyleChange && (React.createElement("div", { className: "DrawingHighlight__style-controls", ref: styleControlsRef },
+                    React.createElement("div", { className: "DrawingHighlight__color-picker" }, DRAWING_COLORS.map((color) => (React.createElement("button", { key: color, type: "button", className: `DrawingHighlight__color-button ${currentColor === color ? 'active' : ''}`, style: { backgroundColor: color }, onClick: (e) => {
+                            e.stopPropagation();
+                            handleColorChange(color);
+                        }, title: `Color: ${color}` })))),
+                    React.createElement("div", { className: "DrawingHighlight__width-picker" }, STROKE_WIDTHS.map((w) => (React.createElement("button", { key: w.value, type: "button", className: `DrawingHighlight__width-button ${currentWidth === w.value ? 'active' : ''}`, onClick: (e) => {
+                            e.stopPropagation();
+                            handleWidthChange(w.value);
+                        }, title: w.label }, w.label)))))),
+                React.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: "Drawing", className: "DrawingHighlight__image", draggable: false })) : (React.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing")))))));
+};
+//# sourceMappingURL=DrawingHighlight.js.map

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

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

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

@@ -0,0 +1,112 @@
+import React, { CSSProperties, MouseEvent, ReactNode } from "react";
+import "../style/FreetextHighlight.css";
+import type { LTWHP, ViewportHighlight } from "../types";
+/**
+ * Style options for freetext highlight appearance.
+ */
+export interface FreetextStyle {
+    color?: string;
+    backgroundColor?: string;
+    fontFamily?: string;
+    fontSize?: string;
+}
+/**
+ * The props type for {@link FreetextHighlight}.
+ *
+ * @category Component Properties
+ */
+export interface FreetextHighlightProps {
+    /**
+     * The highlight to be rendered as a {@link FreetextHighlight}.
+     */
+    highlight: ViewportHighlight;
+    /**
+     * A callback triggered whenever the highlight position changes (drag).
+     *
+     * @param rect - The updated highlight area.
+     */
+    onChange?(rect: LTWHP): void;
+    /**
+     * A callback triggered whenever the text content changes.
+     *
+     * @param text - The new text content.
+     */
+    onTextChange?(text: string): void;
+    /**
+     * A callback triggered whenever the style changes.
+     *
+     * @param style - The new style options.
+     */
+    onStyleChange?(style: FreetextStyle): 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 text edit).
+     */
+    onEditStart?(): void;
+    /**
+     * Event called when editing ends.
+     */
+    onEditEnd?(): void;
+    /**
+     * Custom styling for the container.
+     */
+    style?: CSSProperties;
+    /**
+     * Text color.
+     */
+    color?: string;
+    /**
+     * Background color.
+     */
+    backgroundColor?: string;
+    /**
+     * Font family.
+     */
+    fontFamily?: string;
+    /**
+     * Font size (e.g., "14px").
+     */
+    fontSize?: string;
+    /**
+     * Custom drag icon. Receives default icon as child if not provided.
+     */
+    dragIcon?: ReactNode;
+    /**
+     * Custom edit icon. Receives default icon as child if not provided.
+     */
+    editIcon?: ReactNode;
+    /**
+     * Custom style/settings icon. Receives default icon as child if not provided.
+     */
+    styleIcon?: ReactNode;
+    /**
+     * Custom background color presets for the style panel.
+     * Default: ["#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"]
+     */
+    backgroundColorPresets?: string[];
+    /**
+     * Custom text color presets for the style panel.
+     * Default: ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"]
+     */
+    textColorPresets?: string[];
+    /**
+     * Callback triggered when the delete button is clicked.
+     */
+    onDelete?(): void;
+    /**
+     * Custom delete icon. Replaces the default trash icon.
+     */
+    deleteIcon?: ReactNode;
+}
+export declare const FreetextHighlight: ({ highlight, onChange, onTextChange, onStyleChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, color, backgroundColor, fontFamily, fontSize, dragIcon, editIcon, styleIcon, backgroundColorPresets, textColorPresets, onDelete, deleteIcon, }: FreetextHighlightProps) => React.JSX.Element;