react-pdf-highlighter-plus 1.0.0

package/dist/esm/style/SignaturePad.css

@@ -0,0 +1,83 @@
+.SignaturePad__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.SignaturePad__modal {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.SignaturePad__title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.SignaturePad__canvas {
+  display: block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: crosshair;
+  touch-action: none;
+  background: white;
+}
+
+.SignaturePad__buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  justify-content: flex-end;
+}
+
+.SignaturePad__button {
+  padding: 8px 16px;
+  font-size: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.SignaturePad__button--clear {
+  background: white;
+  border: 1px solid #ccc;
+  color: #666;
+}
+
+.SignaturePad__button--clear:hover {
+  background: #f5f5f5;
+  border-color: #999;
+}
+
+.SignaturePad__button--cancel {
+  background: white;
+  border: 1px solid #ccc;
+  color: #666;
+}
+
+.SignaturePad__button--cancel:hover {
+  background: #f5f5f5;
+  border-color: #999;
+}
+
+.SignaturePad__button--done {
+  background: #2196f3;
+  border: 1px solid #2196f3;
+  color: white;
+}
+
+.SignaturePad__button--done:hover {
+  background: #1976d2;
+  border-color: #1976d2;
+}

package/dist/esm/style/TextHighlight.css

@@ -0,0 +1,199 @@
+.TextHighlight {
+  position: absolute;
+}
+
+.TextHighlight__parts {
+  opacity: 1;
+}
+
+.TextHighlight__part {
+  cursor: pointer;
+  position: absolute;
+  background: rgba(255, 226, 143, 1);
+  transition: background 0.3s;
+}
+
+.TextHighlight--scrolledTo .TextHighlight__part {
+  background: #ff4141;
+}
+
+/* Toolbar wrapper - creates hover bridge between toolbar and highlight */
+.TextHighlight__toolbar-wrapper {
+  z-index: 10;
+}
+
+/* Toolbar - appears on hover */
+.TextHighlight__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.TextHighlight__toolbar--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.TextHighlight__style-button,
+.TextHighlight__delete-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: white;
+  border-radius: 3px;
+  padding: 0;
+  transition: background 0.2s;
+}
+
+.TextHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.TextHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+
+/* Style Panel */
+.TextHighlight__style-panel {
+  margin-top: 4px;
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 6px;
+  padding: 8px;
+  min-width: 180px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.TextHighlight__style-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.TextHighlight__style-row:last-child {
+  margin-bottom: 0;
+}
+
+.TextHighlight__style-row label {
+  color: #ccc;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 8px;
+}
+
+/* Style type buttons (highlight, underline, strikethrough) */
+.TextHighlight__style-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+.TextHighlight__style-type-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #f5f5f5;
+  transition: all 0.2s;
+}
+
+.TextHighlight__style-type-button:hover {
+  border-color: #b958ff;
+}
+
+.TextHighlight__style-type-button.active {
+  color: #b958ff;
+  border-color: #b958ff;
+  background: rgba(185, 88, 255, 0.2);
+}
+
+/* Color options */
+.TextHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.TextHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+}
+
+.TextHighlight__color-preset {
+  width: 18px;
+  height: 18px;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s, border-color 0.2s;
+  padding: 0;
+}
+
+.TextHighlight__color-preset:hover {
+  transform: scale(1.15);
+}
+
+.TextHighlight__color-preset.active {
+  border-color: #b958ff;
+}
+
+.TextHighlight__color-options input[type="color"] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.TextHighlight__color-options input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.TextHighlight__color-options input[type="color"]::-webkit-color-swatch {
+  border: 1px solid #666;
+  border-radius: 4px;
+}
+
+/* Underline style */
+.TextHighlight__part--underline {
+  background: transparent !important;
+  border-bottom: 2px solid currentColor;
+}
+
+/* Strikethrough style */
+.TextHighlight__part.TextHighlight__part--strikethrough {
+  background: transparent !important;
+  overflow: visible;
+}
+
+.TextHighlight__part.TextHighlight__part--strikethrough::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  background-color: currentColor;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+}

package/dist/esm/style/pdf_viewer.css

@@ -0,0 +1,41 @@
+/* overrides for pdf_viewer.css from PDF.JS web viewer */
+
+.textLayer {
+  z-index: 2;
+  opacity: 1;
+  mix-blend-mode: multiply;
+  display: flex;
+}
+
+.annotationLayer {
+  position: absolute;
+  top: 0;
+
+  z-index: 3;
+}
+
+html
+  body
+  .textLayer
+  > div:not(.PdfHighlighter__highlight-layer):not(.TextHighlight):not(.TextHighlight-icon) {
+  opacity: 1;
+  mix-blend-mode: multiply;
+}
+
+.textLayer ::selection {
+  mix-blend-mode: multiply;
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .textLayer {opacity: 0.5;}
+}
+
+/* Internet Explorer support method */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .textLayer {opacity: 0.5 }
+}
+
+/* Microsoft Edge Browser 12+ (All) - @supports method */
+@supports (-ms-ime-align:auto) {
+  .textLayer {opacity: 0.5 }
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,213 @@
+import { ReactNode } from "react";
+import { Root } from "react-dom/client";
+/**
+ * A rectangle as measured by the viewport.
+ *
+ * @category Type
+ */
+export type LTWH = {
+    /** The x coordinate of the top-left of the rectangle. */
+    left: number;
+    /** The y coordinate of the top-left of the rectangle. */
+    top: number;
+    /** Width of the rectangle, relative to top left of the viewport. */
+    width: number;
+    /** Height of the rectangle, relative to top left of the viewport. */
+    height: number;
+};
+/** @category Type */
+export type LTWHP = LTWH & {
+    /** 1-Indexed page number */
+    pageNumber: number;
+};
+/**
+ * "scaled" means that data structure stores (0, 1) coordinates.
+ *  for clarity reasons I decided not to store actual (0, 1) coordinates but
+ *  provide width and height, so user can compute ratio himself if needed
+ *
+ * @category Type
+ * @author Artem Tyurin <artem.tyurin@gmail.com>
+ */
+export type Scaled = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    width: number;
+    height: number;
+    /** 1-Indexed page number */
+    pageNumber: number;
+};
+/**
+ * Position of a Highlight relative to the viewport.
+ *
+ * @category Type
+ */
+export type ViewportPosition = {
+    /** Bounding rectangle for the entire highlight. */
+    boundingRect: LTWHP;
+    /** For text highlights, the rectangular highlights for each block of text. */
+    rects: Array<LTWHP>;
+};
+/**
+ * Position of a Highlight with normalised coordinates.
+ *
+ * @category Type
+ */
+export type ScaledPosition = {
+    /** Bounding rectangle for the entire highlight. */
+    boundingRect: Scaled;
+    /** For text highlights, the rectangular highlights for each block of text. */
+    rects: Array<Scaled>;
+    /** Rarely applicable property of whether coordinates should be in PDF coordinate space.  */
+    usePdfCoordinates?: boolean;
+};
+/**
+ * A point in a drawing stroke.
+ *
+ * @category Type
+ */
+export type DrawingPoint = {
+    x: number;
+    y: number;
+};
+/**
+ * A stroke in a drawing, with its own color and width.
+ *
+ * @category Type
+ */
+export type DrawingStroke = {
+    points: DrawingPoint[];
+    color: string;
+    width: number;
+};
+/**
+ * Shape types for shape annotations.
+ *
+ * @category Type
+ */
+export type ShapeType = "rectangle" | "circle" | "arrow";
+/**
+ * Shape data for shape highlights.
+ *
+ * @category Type
+ */
+export type ShapeData = {
+    shapeType: ShapeType;
+    strokeColor: string;
+    strokeWidth: number;
+    /** For arrows: start point as percentage of bounding box (0-1) */
+    startPoint?: {
+        x: number;
+        y: number;
+    };
+    /** For arrows: end point as percentage of bounding box (0-1) */
+    endPoint?: {
+        x: number;
+        y: number;
+    };
+};
+/**
+ * The content of a highlight
+ *
+ * @category Type
+ */
+export type Content = {
+    text?: string;
+    image?: string;
+    /** For drawing highlights, store the stroke data for later editing */
+    strokes?: DrawingStroke[];
+    /** For shape highlights, store the shape data */
+    shape?: ShapeData;
+};
+/**
+ * What type the highlight is. This is the ideal way to determine whether to
+ * render it in an AreaHighlight or TextHighlight.
+ *
+ * @category Type
+ */
+export type HighlightType = "text" | "area" | "freetext" | "image" | "drawing" | "shape";
+/**
+ * This represents a selected (text/mouse) area that has been turned into a
+ * highlight. If you are storing highlights, they should be stored as this type.
+ *
+ * @category Type
+ */
+export interface Highlight {
+    id: string;
+    /**
+     * This property is planned to be non-optional in future.
+     */
+    type?: HighlightType;
+    /**
+     * @deprecated If you want your highlight to store content after being a
+     * GhostHighlight, you should create your own interface extended off this. If
+     * you are currently using this property to determine what kind of highlight
+     * to render, please use {@link type}.
+     */
+    content?: Content;
+    position: ScaledPosition;
+}
+/**
+ * This represents a temporary highlight and is ideal as an intermediary between
+ * a selection and a highlight.
+ *
+ * @category Type
+ */
+export interface GhostHighlight extends Required<Omit<Highlight, "id">> {
+    content: Content;
+}
+/**
+ * This represents a rendered highlight, with its position defined by the page
+ * viewport.
+ *
+ * @category Type
+ */
+export type ViewportHighlight<T extends Highlight = Highlight> = Omit<T, "position"> & {
+    position: ViewportPosition;
+};
+/**
+ * An area or text selection in a PDF Document.
+ *
+ * @category Type
+ */
+export type PdfSelection = GhostHighlight & {
+    /** Convert the current selection into a temporary highlight */
+    makeGhostHighlight(): GhostHighlight;
+};
+/**
+ * A PDF.js page representation. This is the reference type for every page in the PdfHighlighter.
+ *
+ * @category Type
+ */
+export type Page = {
+    node: HTMLElement;
+    /** 1-Index page number */
+    number: number;
+};
+/**
+ * All the DOM refs for a group of highlights on one page
+ *
+ * @category Type
+ */
+export type HighlightBindings = {
+    reactRoot: Root;
+    container: Element;
+    textLayer: HTMLElement;
+};
+/**
+ * A popup that can be viewed inside a PdfHighlighter.
+ *
+ * @category Type
+ */
+export type Tip = {
+    position: ViewportPosition;
+    content: ReactNode;
+};
+/**
+ * The accepted scale values by the PDF.js viewer.
+ * Numeric entries accept floats, e.g. 1.2 = 120%
+ *
+ * @category Type
+ */
+export type PdfScaleValue = "page-actual" | "page-width" | "page-height" | "page-fit" | "auto" | number;

package/dist/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "react-pdf-highlighter-plus",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Set of modern React components for PDF highlighting",
+  "author": "Edward Ha <quocvietha08@gmail.com>",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Edward Ha",
+      "email": "quocvietha08@gmail.com"
+    }
+  ],
+  "keywords": [
+    "pdf",
+    "pdf-annotator",
+    "react-pdf",
+    "react-pdf-annotator",
+    "highlight",
+    "annotator",
+    "react-component",
+    "react"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js"
+    },
+    "./style/*": "./dist/esm/style/*"
+  },
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "(cd ./example && vite --force)",
+    "build": "npm run clean && npm i && npm run build:esm && npm run build:copy-styles && npm run build:example && npm run build:docs",
+    "build:vercel": "npm run build:esm && npm run build:copy-styles && npm run build:example && npm run build:docs",
+    "build:esm": "tsc",
+    "build:copy-styles": "cp -r ./src/style ./dist/esm",
+    "build:example": "(cd ./example && npm install && tsc && vite build && mkdir -p \"../public/\" && cp -r example-app ../public/)",
+    "build:docs": "npx typedoc",
+    "clean": "rm -rf dist public node_modules package-lock.json"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lodash.debounce": "^4.0.8",
+    "lucide-react": "^0.559.0",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^4.4.168",
+    "react-rnd": "^10.4.11",
+    "tailwind-merge": "^3.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/QuocVietHa08/react-pdf-highlighter-plus"
+  },
+  "devDependencies": {
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.22",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.0",
+    "typedoc": "latest",
+    "typedoc-theme-category-nav": "latest",
+    "typescript": "^5.3.2",
+    "vite": "^5.3.3"
+  }
+}