react-pdf-highlighter-plus 1.0.0

package/dist/esm/style/FreetextHighlight.css

@@ -0,0 +1,249 @@
+.FreetextHighlight {
+  position: absolute;
+}
+
+.FreetextHighlight__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
+  overflow: visible;
+  transition: box-shadow 0.2s ease;
+}
+
+.FreetextHighlight__container:hover {
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+.FreetextHighlight__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.FreetextHighlight__container:hover .FreetextHighlight__toolbar {
+  opacity: 1;
+}
+
+.FreetextHighlight__drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  user-select: none;
+  color: white;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.FreetextHighlight__drag-handle:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.FreetextHighlight__drag-handle:active {
+  cursor: grabbing;
+}
+
+.FreetextHighlight__edit-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;
+}
+
+.FreetextHighlight__edit-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.FreetextHighlight__content {
+  flex: 1;
+  padding: 8px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.FreetextHighlight__text {
+  width: 100%;
+  height: 100%;
+  cursor: text;
+  overflow: auto;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.FreetextHighlight__input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  resize: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+}
+
+.FreetextHighlight--scrolledTo .FreetextHighlight__container {
+  box-shadow: 0 0 0 3px #ff4141, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.FreetextHighlight--editing .FreetextHighlight__container {
+  box-shadow: 0 0 0 2px #4a90d9, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.FreetextHighlight__style-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;
+}
+
+.FreetextHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.FreetextHighlight__style-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  padding: 8px;
+  z-index: 9999;
+  margin-top: 2px;
+}
+
+.FreetextHighlight__style-row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.FreetextHighlight__style-row:last-child {
+  margin-bottom: 0;
+}
+
+.FreetextHighlight__style-row label {
+  font-size: 11px;
+  color: #555;
+  white-space: nowrap;
+}
+
+.FreetextHighlight__style-row input[type="color"] {
+  width: 28px;
+  height: 24px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  padding: 0;
+  cursor: pointer;
+}
+
+.FreetextHighlight__style-row select {
+  padding: 4px 6px;
+  font-size: 11px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  background: white;
+  cursor: pointer;
+  min-width: 80px;
+}
+
+.FreetextHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.FreetextHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.FreetextHighlight__color-preset {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.15s, border-color 0.15s;
+}
+
+.FreetextHighlight__color-preset:hover {
+  transform: scale(1.15);
+  border-color: rgba(0, 0, 0, 0.3);
+}
+
+.FreetextHighlight__color-preset.active {
+  border-color: #333;
+  box-shadow: 0 0 0 1px white, 0 0 0 2px #333;
+}
+
+.FreetextHighlight__color-preset--transparent {
+  background:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+  background-color: white;
+}
+
+.FreetextHighlight__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;
+}
+
+.FreetextHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}

package/dist/esm/style/ImageHighlight.css

@@ -0,0 +1,97 @@
+.ImageHighlight {
+  position: absolute;
+}
+
+.ImageHighlight__container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: visible;
+  transition: box-shadow 0.2s ease;
+}
+
+.ImageHighlight__container:hover {
+  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+.ImageHighlight__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.ImageHighlight__container:hover .ImageHighlight__toolbar {
+  opacity: 1;
+}
+
+.ImageHighlight__drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: grab;
+  color: white;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.ImageHighlight__drag-handle:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.ImageHighlight__drag-handle:active {
+  cursor: grabbing;
+}
+
+.ImageHighlight__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.ImageHighlight__image {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+  pointer-events: none;
+  user-select: none;
+}
+
+.ImageHighlight--scrolledTo .ImageHighlight__container {
+  box-shadow: 0 0 0 3px #ff4141, 2px 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.ImageHighlight__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;
+}
+
+.ImageHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}

package/dist/esm/style/MouseSelection.css

@@ -0,0 +1,15 @@
+.MouseSelection {
+  position: absolute;
+  border: 1px dashed #333;
+  background: rgba(153,193,218,255);
+  mix-blend-mode: multiply;
+}
+/* Internet Explorer support method */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .MouseSelection {opacity: 0.5 }
+}
+
+/* Microsoft Edge Browser 12+ (All) - @supports method */
+@supports (-ms-ime-align:auto) {
+  .MouseSelection {opacity: 0.5 }
+}

package/dist/esm/style/PdfHighlighter.css

@@ -0,0 +1,77 @@
+.PdfHighlighter {
+  position: absolute;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+}
+
+/* Style the scrollbar */
+.PdfHighlighter::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.PdfHighlighter::-webkit-scrollbar-thumb {
+  background-color: #9f9f9f;
+  border-radius: 5px;
+}
+
+.PdfHighlighter::-webkit-scrollbar-thumb:hover {
+  background-color: #d1d1d1;
+}
+
+.PdfHighlighter::-webkit-scrollbar-track {
+  background-color: #2c2c2c;
+  border-radius: 5px;
+}
+
+.PdfHighlighter::-webkit-scrollbar-track-piece {
+  background-color: #2c2c2c;
+}
+
+.PdfHighlighter__tip-container {
+  z-index: 6;
+  position: absolute;
+}
+
+.PdfHighlighter--disable-selection {
+  user-select: none;
+  pointer-events: none;
+}
+
+.PdfHighlighter--freetext-mode {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--freetext-mode .pdfViewer,
+.PdfHighlighter--freetext-mode .textLayer {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--image-mode {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--image-mode .pdfViewer,
+.PdfHighlighter--image-mode .textLayer {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--drawing-mode {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--drawing-mode .pdfViewer,
+.PdfHighlighter--drawing-mode .textLayer {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--area-mode {
+  cursor: crosshair;
+}
+
+.PdfHighlighter--area-mode .pdfViewer,
+.PdfHighlighter--area-mode .textLayer {
+  cursor: crosshair;
+}

package/dist/esm/style/ShapeCanvas.css

@@ -0,0 +1,47 @@
+.ShapeCanvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.ShapeCanvas__controls {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  z-index: 1002;
+}
+
+.ShapeCanvas__hint {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.ShapeCanvas__cancelButton {
+  padding: 8px 20px;
+  background: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background 0.2s;
+}
+
+.ShapeCanvas__cancelButton:hover {
+  background: #d32f2f;
+}

package/dist/esm/style/ShapeHighlight.css

@@ -0,0 +1,182 @@
+.ShapeHighlight {
+  position: absolute;
+}
+
+.ShapeHighlight__rnd {
+  cursor: move;
+}
+
+.ShapeHighlight__container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.ShapeHighlight__svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg rect,
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg ellipse,
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg line {
+  stroke: #ff4141 !important;
+}
+
+.ShapeHighlight--scrolledTo .ShapeHighlight__svg polygon {
+  fill: #ff4141 !important;
+}
+
+/* Toolbar wrapper - creates hover bridge between toolbar and shape */
+.ShapeHighlight__toolbar-wrapper {
+  z-index: 10;
+}
+
+/* Toolbar - appears on hover */
+.ShapeHighlight__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;
+}
+
+.ShapeHighlight__toolbar--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ShapeHighlight__style-button,
+.ShapeHighlight__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;
+}
+
+.ShapeHighlight__style-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.ShapeHighlight__delete-button:hover {
+  background: rgba(255, 100, 100, 0.6);
+}
+
+/* Style Panel */
+.ShapeHighlight__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);
+}
+
+.ShapeHighlight__style-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.ShapeHighlight__style-row:last-child {
+  margin-bottom: 0;
+}
+
+.ShapeHighlight__style-row label {
+  color: #ccc;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 8px;
+}
+
+/* Color options */
+.ShapeHighlight__color-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ShapeHighlight__color-presets {
+  display: flex;
+  gap: 4px;
+}
+
+.ShapeHighlight__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;
+}
+
+.ShapeHighlight__color-preset:hover {
+  transform: scale(1.15);
+}
+
+.ShapeHighlight__color-preset.active {
+  border-color: #b958ff;
+}
+
+.ShapeHighlight__color-options input[type="color"] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.ShapeHighlight__color-options input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.ShapeHighlight__color-options input[type="color"]::-webkit-color-swatch {
+  border: 1px solid #666;
+  border-radius: 4px;
+}
+
+/* Stroke width options */
+.ShapeHighlight__width-options {
+  display: flex;
+  gap: 4px;
+}
+
+.ShapeHighlight__width-button {
+  padding: 4px 8px;
+  background: transparent;
+  border: 1px solid #666;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #ccc;
+  font-size: 11px;
+  transition: all 0.2s;
+}
+
+.ShapeHighlight__width-button:hover {
+  border-color: #b958ff;
+  color: white;
+}
+
+.ShapeHighlight__width-button.active {
+  background: rgba(185, 88, 255, 0.2);
+  border-color: #b958ff;
+  color: #b958ff;
+}