react-pdf-highlighter-plus 1.1.2 → 1.1.4

package/dist/esm/style/TextHighlight.css

@@ -0,0 +1,206 @@
+.TextHighlight {
+  position: absolute;
+}
+
+.TextHighlight__parts {
+  opacity: 1;
+}
+
+.TextHighlight__part {
+  cursor: pointer;
+  position: absolute;
+  background: rgba(255, 226, 143, 1);
+  transition: background 0.3s, box-shadow 0.2s ease;
+}
+
+.TextHighlight--scrolledTo .TextHighlight__part {
+  box-shadow:
+    0 0 0 2px #ff4141,
+    0 0 0 4px rgba(255, 65, 65, 0.2);
+}
+
+/* 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__copy-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__copy-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/style/style.css

@@ -0,0 +1,13 @@
+/* Combined styles for react-pdf-highlighter-plus */
+@import "./pdf_viewer.css";
+@import "./PdfHighlighter.css";
+@import "./MouseSelection.css";
+@import "./TextHighlight.css";
+@import "./AreaHighlight.css";
+@import "./FreetextHighlight.css";
+@import "./ImageHighlight.css";
+@import "./DrawingHighlight.css";
+@import "./DrawingCanvas.css";
+@import "./SignaturePad.css";
+@import "./ShapeCanvas.css";
+@import "./ShapeHighlight.css";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-pdf-highlighter-plus",
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Set of modern React components for PDF highlighting",
   "author": "Edward Ha <quocvietha08@gmail.com>",
   "license": "MIT",
@@ -30,11 +30,21 @@
   "exports": {
     ".": {
       "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js"
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
     },
-    "./style/style.css": "./dist/esm/style/style.css",
-    "./style/pdf_viewer.css": "./dist/esm/style/pdf_viewer.css",
-    "./style/*.css": "./dist/esm/style/*.css"
+    "./style/style.css": {
+      "import": "./dist/esm/style/style.css",
+      "default": "./dist/esm/style/style.css"
+    },
+    "./style/pdf_viewer.css": {
+      "import": "./dist/esm/style/pdf_viewer.css",
+      "default": "./dist/esm/style/pdf_viewer.css"
+    },
+    "./style/*.css": {
+      "import": "./dist/esm/style/*.css",
+      "default": "./dist/esm/style/*.css"
+    }
   },
   "scripts": {
     "start": "npm run dev",