react-pdf-highlighter-plus 1.1.4 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +152 -20
- package/dist/esm/{export-pdf-W2QGWADM.js → export-pdf-DD7J5UHW.js} +113 -15
- package/dist/esm/export-pdf-DD7J5UHW.js.map +1 -0
- package/dist/esm/index.d.ts +149 -17
- package/dist/esm/index.js +2518 -1078
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/pdf.worker.min.mjs +2 -2
- package/dist/esm/style/AreaHighlight.css +178 -73
- package/dist/esm/style/DrawingCanvas.css +24 -16
- package/dist/esm/style/DrawingHighlight.css +193 -61
- package/dist/esm/style/FreetextHighlight.css +217 -76
- package/dist/esm/style/ImageHighlight.css +98 -26
- package/dist/esm/style/MouseSelection.css +2 -2
- package/dist/esm/style/PdfHighlighter.css +75 -25
- package/dist/esm/style/ShapeCanvas.css +18 -12
- package/dist/esm/style/ShapeHighlight.css +142 -72
- package/dist/esm/style/SignaturePad.css +154 -38
- package/dist/esm/style/TextHighlight.css +205 -75
- package/dist/esm/style/style.css +1 -0
- package/dist/esm/style/tokens.css +88 -0
- package/package.json +30 -14
- package/dist/esm/export-pdf-W2QGWADM.js.map +0 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.DrawingHighlight {
|
|
2
2
|
position: absolute;
|
|
3
|
+
font-family: var(--rphp-font);
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
.DrawingHighlight__container {
|
|
@@ -7,58 +8,131 @@
|
|
|
7
8
|
height: 100%;
|
|
8
9
|
display: flex;
|
|
9
10
|
flex-direction: column;
|
|
10
|
-
border-radius:
|
|
11
|
+
border-radius: var(--rphp-radius, 9px);
|
|
11
12
|
overflow: visible;
|
|
12
13
|
transition: box-shadow 0.2s ease;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
16
|
.DrawingHighlight__container:hover {
|
|
16
|
-
box-shadow:
|
|
17
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
17
18
|
}
|
|
18
19
|
|
|
20
|
+
/* Toolbar wrapper - anchors the toolbar above the drawing and creates a
|
|
21
|
+
hover bridge between toolbar and drawing */
|
|
22
|
+
.DrawingHighlight__toolbar-wrapper {
|
|
23
|
+
z-index: 10;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Toolbar - dark ink pill floating ABOVE the drawing (never covers it).
|
|
27
|
+
Shown on hover or while the drawing is selected. */
|
|
19
28
|
.DrawingHighlight__toolbar {
|
|
20
29
|
display: flex;
|
|
21
30
|
align-items: center;
|
|
22
|
-
gap:
|
|
23
|
-
padding:
|
|
24
|
-
background:
|
|
25
|
-
border-radius:
|
|
31
|
+
gap: 2px;
|
|
32
|
+
padding: 4px 6px;
|
|
33
|
+
background: var(--rphp-toolbar-bg, #1c1b18);
|
|
34
|
+
border-radius: var(--rphp-radius, 9px);
|
|
35
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
26
36
|
position: absolute;
|
|
27
37
|
top: 4px;
|
|
28
38
|
left: 4px;
|
|
29
39
|
z-index: 10;
|
|
30
40
|
opacity: 0;
|
|
31
|
-
|
|
41
|
+
pointer-events: none;
|
|
42
|
+
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
43
|
+
transform: translateY(2px);
|
|
44
|
+
white-space: nowrap;
|
|
32
45
|
}
|
|
33
46
|
|
|
34
47
|
.DrawingHighlight__toolbar--floating {
|
|
35
48
|
position: absolute;
|
|
36
49
|
top: auto;
|
|
37
|
-
|
|
50
|
+
bottom: calc(100% + 6px);
|
|
51
|
+
left: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Hover bridge across the 6px gap between toolbar and drawing */
|
|
55
|
+
.DrawingHighlight__toolbar::after {
|
|
56
|
+
content: "";
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 100%;
|
|
59
|
+
left: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
height: 10px;
|
|
38
62
|
}
|
|
39
63
|
|
|
64
|
+
/* Toolbar shows on SELECT only (hover shows the comment popup instead —
|
|
65
|
+
revealing both on hover made them overlap). */
|
|
40
66
|
.DrawingHighlight__toolbar--visible {
|
|
41
67
|
opacity: 1;
|
|
68
|
+
pointer-events: auto;
|
|
69
|
+
transform: translateY(0);
|
|
42
70
|
}
|
|
43
71
|
|
|
44
|
-
|
|
45
|
-
|
|
72
|
+
/* Flipped below the drawing — used when there's no room above (e.g. the
|
|
73
|
+
drawing sits at the very top of the page) so the toolbar doesn't float
|
|
74
|
+
up over whatever page content is above it. */
|
|
75
|
+
.DrawingHighlight__toolbar--floating.DrawingHighlight__toolbar--below {
|
|
76
|
+
bottom: auto;
|
|
77
|
+
top: calc(100% + 6px);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.DrawingHighlight__toolbar--floating.DrawingHighlight__toolbar--below::after {
|
|
81
|
+
top: auto;
|
|
82
|
+
bottom: 100%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Color dropdown trigger: current-color swatch + chevron */
|
|
86
|
+
.DrawingHighlight__color-trigger {
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
gap: 4px;
|
|
90
|
+
height: 26px;
|
|
91
|
+
padding: 0 6px 0 4px;
|
|
92
|
+
border: none;
|
|
93
|
+
background: transparent;
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
color: #efece5;
|
|
96
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
97
|
+
transition: background 0.15s, color 0.15s;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.DrawingHighlight__color-trigger:hover,
|
|
101
|
+
.DrawingHighlight__color-trigger[aria-expanded="true"] {
|
|
102
|
+
background: rgba(255, 255, 255, 0.14);
|
|
103
|
+
color: #ffffff;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.DrawingHighlight__color-trigger-dot {
|
|
107
|
+
width: 14px;
|
|
108
|
+
height: 14px;
|
|
109
|
+
border-radius: 50%;
|
|
110
|
+
border: 1.5px solid rgba(255, 255, 255, 0.5);
|
|
111
|
+
flex-shrink: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.DrawingHighlight__toolbar-divider {
|
|
115
|
+
width: 1px;
|
|
116
|
+
height: 16px;
|
|
117
|
+
margin: 0 3px;
|
|
118
|
+
background: rgba(255, 255, 255, 0.2);
|
|
46
119
|
}
|
|
47
120
|
|
|
48
121
|
.DrawingHighlight__drag-handle {
|
|
49
122
|
display: flex;
|
|
50
123
|
align-items: center;
|
|
51
124
|
justify-content: center;
|
|
52
|
-
width:
|
|
53
|
-
height:
|
|
125
|
+
width: 26px;
|
|
126
|
+
height: 26px;
|
|
54
127
|
cursor: grab;
|
|
55
|
-
color:
|
|
56
|
-
border-radius:
|
|
57
|
-
transition: background 0.
|
|
128
|
+
color: #efece5;
|
|
129
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
130
|
+
transition: background 0.15s, color 0.15s;
|
|
58
131
|
}
|
|
59
132
|
|
|
60
133
|
.DrawingHighlight__drag-handle:hover {
|
|
61
|
-
background: rgba(255, 255, 255, 0.
|
|
134
|
+
background: rgba(255, 255, 255, 0.14);
|
|
135
|
+
color: #ffffff;
|
|
62
136
|
}
|
|
63
137
|
|
|
64
138
|
.DrawingHighlight__drag-handle:active {
|
|
@@ -71,8 +145,10 @@
|
|
|
71
145
|
align-items: center;
|
|
72
146
|
justify-content: center;
|
|
73
147
|
overflow: hidden;
|
|
74
|
-
border-radius:
|
|
75
|
-
/* Transparent
|
|
148
|
+
border-radius: var(--rphp-radius, 9px);
|
|
149
|
+
/* Transparent backing: only the ink shows over the page, like a shape
|
|
150
|
+
highlight (arrow/rectangle). The stroke PNG's own alpha channel keeps
|
|
151
|
+
everything but the ink see-through. */
|
|
76
152
|
background: transparent;
|
|
77
153
|
}
|
|
78
154
|
|
|
@@ -84,68 +160,121 @@
|
|
|
84
160
|
user-select: none;
|
|
85
161
|
}
|
|
86
162
|
|
|
163
|
+
/* Selected: accent ring + the whole body is draggable */
|
|
164
|
+
.DrawingHighlight--selected .DrawingHighlight__container {
|
|
165
|
+
box-shadow:
|
|
166
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
167
|
+
0 0 0 5px rgba(91, 80, 230, 0.25);
|
|
168
|
+
}
|
|
169
|
+
|
|
87
170
|
.DrawingHighlight--scrolledTo .DrawingHighlight__container {
|
|
88
|
-
box-shadow:
|
|
171
|
+
box-shadow:
|
|
172
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
173
|
+
0 0 0 5px rgba(91, 80, 230, 0.25),
|
|
174
|
+
var(--rphp-shadow, 0 2px 8px rgba(28, 27, 24, 0.12));
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* The whole drawing body drags */
|
|
178
|
+
.DrawingHighlight__container {
|
|
179
|
+
cursor: grab;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.DrawingHighlight__container:active {
|
|
183
|
+
cursor: grabbing;
|
|
89
184
|
}
|
|
90
185
|
|
|
91
186
|
/* Style edit button */
|
|
92
|
-
.DrawingHighlight__style-button
|
|
187
|
+
.DrawingHighlight__style-button,
|
|
188
|
+
.DrawingHighlight__rotate-button {
|
|
93
189
|
display: flex;
|
|
94
190
|
align-items: center;
|
|
95
191
|
justify-content: center;
|
|
96
|
-
width:
|
|
97
|
-
height:
|
|
192
|
+
width: 26px;
|
|
193
|
+
height: 26px;
|
|
98
194
|
padding: 0;
|
|
99
195
|
background: transparent;
|
|
100
196
|
border: none;
|
|
101
197
|
cursor: pointer;
|
|
102
|
-
color:
|
|
103
|
-
border-radius:
|
|
104
|
-
transition: background 0.
|
|
198
|
+
color: #efece5;
|
|
199
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
200
|
+
transition: background 0.15s, color 0.15s;
|
|
105
201
|
}
|
|
106
202
|
|
|
107
|
-
.DrawingHighlight__style-button:hover
|
|
108
|
-
|
|
203
|
+
.DrawingHighlight__style-button:hover,
|
|
204
|
+
.DrawingHighlight__rotate-button:hover {
|
|
205
|
+
background: rgba(255, 255, 255, 0.14);
|
|
206
|
+
color: #ffffff;
|
|
109
207
|
}
|
|
110
208
|
|
|
111
|
-
/* Style controls dropdown */
|
|
209
|
+
/* Style controls dropdown - light surface card (Verso popover) */
|
|
112
210
|
.DrawingHighlight__style-controls {
|
|
113
211
|
position: absolute;
|
|
114
212
|
top: 28px;
|
|
115
213
|
left: 4px;
|
|
116
|
-
background:
|
|
117
|
-
border
|
|
118
|
-
|
|
214
|
+
background: var(--rphp-surface, #ffffff);
|
|
215
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
216
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
217
|
+
padding: 12px;
|
|
119
218
|
z-index: 20;
|
|
120
219
|
display: flex;
|
|
121
220
|
flex-direction: column;
|
|
122
221
|
gap: 8px;
|
|
123
222
|
min-width: 120px;
|
|
124
|
-
box-shadow: 0
|
|
223
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
125
224
|
}
|
|
126
225
|
|
|
127
|
-
|
|
226
|
+
/* Color dropdown menu - same fixed anchor as the style controls panel */
|
|
227
|
+
.DrawingHighlight__color-menu {
|
|
228
|
+
position: absolute;
|
|
229
|
+
top: 28px;
|
|
230
|
+
left: 4px;
|
|
231
|
+
width: 180px;
|
|
232
|
+
background: var(--rphp-surface, #ffffff);
|
|
233
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
234
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
235
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
236
|
+
padding: 6px;
|
|
237
|
+
z-index: 20;
|
|
128
238
|
display: flex;
|
|
129
|
-
|
|
130
|
-
|
|
239
|
+
flex-direction: column;
|
|
240
|
+
gap: 1px;
|
|
131
241
|
}
|
|
132
242
|
|
|
133
|
-
.DrawingHighlight__color-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
243
|
+
.DrawingHighlight__color-menu-item {
|
|
244
|
+
display: flex;
|
|
245
|
+
align-items: center;
|
|
246
|
+
gap: 10px;
|
|
247
|
+
width: 100%;
|
|
248
|
+
padding: 7px 8px;
|
|
249
|
+
border: none;
|
|
250
|
+
background: transparent;
|
|
251
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
138
252
|
cursor: pointer;
|
|
139
|
-
|
|
140
|
-
|
|
253
|
+
color: var(--rphp-text, #1c1b18);
|
|
254
|
+
font-size: 13px;
|
|
255
|
+
text-align: left;
|
|
141
256
|
}
|
|
142
257
|
|
|
143
|
-
.DrawingHighlight__color-
|
|
144
|
-
|
|
258
|
+
.DrawingHighlight__color-menu-item:hover {
|
|
259
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
145
260
|
}
|
|
146
261
|
|
|
147
|
-
.DrawingHighlight__color-
|
|
148
|
-
|
|
262
|
+
.DrawingHighlight__color-menu-dot {
|
|
263
|
+
width: 16px;
|
|
264
|
+
height: 16px;
|
|
265
|
+
border-radius: 50%;
|
|
266
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
267
|
+
flex-shrink: 0;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.DrawingHighlight__color-menu-label {
|
|
271
|
+
flex: 1;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.DrawingHighlight__color-menu-check {
|
|
275
|
+
display: flex;
|
|
276
|
+
color: var(--rphp-accent, #5b50e6);
|
|
277
|
+
flex-shrink: 0;
|
|
149
278
|
}
|
|
150
279
|
|
|
151
280
|
.DrawingHighlight__width-picker {
|
|
@@ -154,41 +283,44 @@
|
|
|
154
283
|
}
|
|
155
284
|
|
|
156
285
|
.DrawingHighlight__width-button {
|
|
157
|
-
background:
|
|
158
|
-
color: #
|
|
159
|
-
border: 1px solid #
|
|
160
|
-
border-radius:
|
|
286
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
287
|
+
color: var(--rphp-text-secondary, #57544d);
|
|
288
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
289
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
161
290
|
cursor: pointer;
|
|
162
291
|
font-size: 10px;
|
|
292
|
+
font-family: var(--rphp-font);
|
|
163
293
|
padding: 2px 6px;
|
|
164
|
-
transition: color 0.
|
|
294
|
+
transition: color 0.15s, border-color 0.15s, background-color 0.15s;
|
|
165
295
|
}
|
|
166
296
|
|
|
167
297
|
.DrawingHighlight__width-button:hover {
|
|
168
|
-
border-color: #
|
|
298
|
+
border-color: var(--rphp-accent, #5b50e6);
|
|
299
|
+
color: var(--rphp-accent, #5b50e6);
|
|
169
300
|
}
|
|
170
301
|
|
|
171
302
|
.DrawingHighlight__width-button.active {
|
|
172
|
-
color: #
|
|
173
|
-
border-color: #
|
|
174
|
-
background-color:
|
|
303
|
+
color: var(--rphp-accent, #5b50e6);
|
|
304
|
+
border-color: var(--rphp-accent, #5b50e6);
|
|
305
|
+
background-color: var(--rphp-accent-soft, #eceaf9);
|
|
175
306
|
}
|
|
176
307
|
|
|
177
308
|
.DrawingHighlight__delete-button {
|
|
178
309
|
display: flex;
|
|
179
310
|
align-items: center;
|
|
180
311
|
justify-content: center;
|
|
181
|
-
width:
|
|
182
|
-
height:
|
|
312
|
+
width: 26px;
|
|
313
|
+
height: 26px;
|
|
183
314
|
border: none;
|
|
184
315
|
background: transparent;
|
|
185
316
|
cursor: pointer;
|
|
186
|
-
color:
|
|
187
|
-
border-radius:
|
|
317
|
+
color: #efece5;
|
|
318
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
188
319
|
padding: 0;
|
|
189
|
-
transition: background 0.
|
|
320
|
+
transition: background 0.15s, color 0.15s;
|
|
190
321
|
}
|
|
191
322
|
|
|
192
323
|
.DrawingHighlight__delete-button:hover {
|
|
193
|
-
background: rgba(
|
|
324
|
+
background: rgba(239, 68, 68, 0.24);
|
|
325
|
+
color: #ff8a80;
|
|
194
326
|
}
|