react-pdf-highlighter-plus 1.2.0 → 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/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 +45 -8
- package/dist/esm/index.js +1530 -984
- 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 +29 -15
- 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,18 +1,26 @@
|
|
|
1
1
|
.AreaHighlight {
|
|
2
2
|
position: absolute;
|
|
3
|
+
font-family: var(--rphp-font);
|
|
3
4
|
}
|
|
4
5
|
|
|
5
6
|
.AreaHighlight__part {
|
|
6
7
|
cursor: pointer;
|
|
7
8
|
position: absolute;
|
|
8
|
-
background: rgba(255,
|
|
9
|
+
background: rgba(255, 214, 102, 0.95); /* --rphp-hl-yellow */
|
|
9
10
|
transition: background 0.3s, box-shadow 0.2s ease;
|
|
10
11
|
}
|
|
11
12
|
|
|
13
|
+
/* Selected: accent ring (same shape as scrolledTo) */
|
|
14
|
+
.AreaHighlight--selected .AreaHighlight__part {
|
|
15
|
+
box-shadow:
|
|
16
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
17
|
+
0 0 0 5px rgba(91, 80, 230, 0.25);
|
|
18
|
+
}
|
|
19
|
+
|
|
12
20
|
.AreaHighlight--scrolledTo .AreaHighlight__part {
|
|
13
21
|
box-shadow:
|
|
14
|
-
0 0 0 2px #
|
|
15
|
-
0 0 0
|
|
22
|
+
0 0 0 2px var(--rphp-accent, #5b50e6),
|
|
23
|
+
0 0 0 5px rgba(91, 80, 230, 0.25);
|
|
16
24
|
}
|
|
17
25
|
|
|
18
26
|
/* Toolbar wrapper - creates hover bridge between toolbar and highlight */
|
|
@@ -20,122 +28,219 @@
|
|
|
20
28
|
z-index: 10;
|
|
21
29
|
}
|
|
22
30
|
|
|
23
|
-
/* Toolbar -
|
|
31
|
+
/* Toolbar - dark ink pill floating ABOVE the highlight (never covers it).
|
|
32
|
+
Shown on hover or while the highlight is selected. */
|
|
24
33
|
.AreaHighlight__toolbar {
|
|
25
34
|
display: flex;
|
|
26
35
|
align-items: center;
|
|
27
|
-
gap:
|
|
28
|
-
padding:
|
|
29
|
-
background:
|
|
30
|
-
border-radius:
|
|
36
|
+
gap: 2px;
|
|
37
|
+
padding: 4px 6px;
|
|
38
|
+
background: var(--rphp-toolbar-bg, #1c1b18);
|
|
39
|
+
border-radius: var(--rphp-radius, 9px);
|
|
40
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
41
|
+
position: absolute;
|
|
42
|
+
bottom: calc(100% + 6px);
|
|
43
|
+
left: 0;
|
|
31
44
|
opacity: 0;
|
|
32
45
|
pointer-events: none;
|
|
33
|
-
transition: opacity 0.
|
|
46
|
+
transition: opacity 0.15s ease, transform 0.15s ease;
|
|
47
|
+
transform: translateY(2px);
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Hover bridge across the 6px gap between toolbar and highlight */
|
|
52
|
+
.AreaHighlight__toolbar::after {
|
|
53
|
+
content: "";
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 100%;
|
|
56
|
+
left: 0;
|
|
57
|
+
right: 0;
|
|
58
|
+
height: 10px;
|
|
34
59
|
}
|
|
35
60
|
|
|
36
61
|
.AreaHighlight__toolbar--visible {
|
|
37
62
|
opacity: 1;
|
|
38
63
|
pointer-events: auto;
|
|
64
|
+
transform: translateY(0);
|
|
39
65
|
}
|
|
40
66
|
|
|
41
|
-
.
|
|
42
|
-
|
|
43
|
-
.
|
|
67
|
+
/* Flipped below the highlight — used when there's no room above (e.g. the
|
|
68
|
+
highlight sits at the very top of the page) so the toolbar doesn't float
|
|
69
|
+
up over whatever page content is above it. */
|
|
70
|
+
.AreaHighlight__toolbar--below {
|
|
71
|
+
bottom: auto;
|
|
72
|
+
top: calc(100% + 6px);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.AreaHighlight__toolbar--below::after {
|
|
76
|
+
top: auto;
|
|
77
|
+
bottom: 100%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Color dropdown trigger: current-color swatch + chevron */
|
|
81
|
+
.AreaHighlight__color-trigger {
|
|
44
82
|
display: flex;
|
|
45
83
|
align-items: center;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
84
|
+
gap: 4px;
|
|
85
|
+
height: 26px;
|
|
86
|
+
padding: 0 6px 0 4px;
|
|
49
87
|
border: none;
|
|
50
88
|
background: transparent;
|
|
51
89
|
cursor: pointer;
|
|
52
|
-
color:
|
|
53
|
-
border-radius:
|
|
54
|
-
|
|
55
|
-
transition: background 0.2s;
|
|
90
|
+
color: #efece5;
|
|
91
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
92
|
+
transition: background 0.15s, color 0.15s;
|
|
56
93
|
}
|
|
57
94
|
|
|
58
|
-
.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
.AreaHighlight__copy-button:hover {
|
|
63
|
-
background: rgba(255, 255, 255, 0.2);
|
|
95
|
+
.AreaHighlight__color-trigger:hover,
|
|
96
|
+
.AreaHighlight__color-trigger[aria-expanded="true"] {
|
|
97
|
+
background: rgba(255, 255, 255, 0.14);
|
|
98
|
+
color: #ffffff;
|
|
64
99
|
}
|
|
65
100
|
|
|
66
|
-
.
|
|
67
|
-
|
|
101
|
+
.AreaHighlight__color-trigger-dot {
|
|
102
|
+
width: 14px;
|
|
103
|
+
height: 14px;
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
border: 1.5px solid rgba(255, 255, 255, 0.5);
|
|
106
|
+
flex-shrink: 0;
|
|
68
107
|
}
|
|
69
108
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
padding: 8px;
|
|
76
|
-
min-width: 160px;
|
|
77
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
109
|
+
.AreaHighlight__toolbar-divider {
|
|
110
|
+
width: 1px;
|
|
111
|
+
height: 16px;
|
|
112
|
+
margin: 0 3px;
|
|
113
|
+
background: rgba(255, 255, 255, 0.2);
|
|
78
114
|
}
|
|
79
115
|
|
|
80
|
-
.
|
|
116
|
+
.AreaHighlight__copy-button,
|
|
117
|
+
.AreaHighlight__comment-button,
|
|
118
|
+
.AreaHighlight__delete-button {
|
|
81
119
|
display: flex;
|
|
82
120
|
align-items: center;
|
|
83
|
-
justify-content:
|
|
121
|
+
justify-content: center;
|
|
122
|
+
width: 26px;
|
|
123
|
+
height: 26px;
|
|
124
|
+
border: none;
|
|
125
|
+
background: transparent;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
color: #efece5;
|
|
128
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
129
|
+
padding: 0;
|
|
130
|
+
position: relative;
|
|
131
|
+
transition: background 0.15s, color 0.15s;
|
|
84
132
|
}
|
|
85
133
|
|
|
86
|
-
.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
letter-spacing: 0.5px;
|
|
91
|
-
margin-right: 8px;
|
|
134
|
+
.AreaHighlight__comment-button:hover,
|
|
135
|
+
.AreaHighlight__comment-button.active {
|
|
136
|
+
background: rgba(255, 255, 255, 0.14);
|
|
137
|
+
color: #ffffff;
|
|
92
138
|
}
|
|
93
139
|
|
|
94
|
-
|
|
95
|
-
.
|
|
96
|
-
|
|
97
|
-
align-items: center;
|
|
98
|
-
gap: 6px;
|
|
140
|
+
.AreaHighlight__copy-button:hover {
|
|
141
|
+
background: rgba(255, 255, 255, 0.14);
|
|
142
|
+
color: #ffffff;
|
|
99
143
|
}
|
|
100
144
|
|
|
101
|
-
.
|
|
102
|
-
|
|
103
|
-
|
|
145
|
+
.AreaHighlight__delete-button:hover {
|
|
146
|
+
background: rgba(239, 68, 68, 0.24);
|
|
147
|
+
color: #ff8a80;
|
|
104
148
|
}
|
|
105
149
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
150
|
+
/* Dot badge: this highlight has a note, shown while the panel is closed */
|
|
151
|
+
.AreaHighlight__comment-dot {
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: 3px;
|
|
154
|
+
right: 3px;
|
|
155
|
+
width: 6px;
|
|
156
|
+
height: 6px;
|
|
110
157
|
border-radius: 50%;
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
padding: 0;
|
|
158
|
+
background: var(--rphp-accent-tint, #d8d4fa);
|
|
159
|
+
pointer-events: none;
|
|
114
160
|
}
|
|
115
161
|
|
|
116
|
-
|
|
117
|
-
|
|
162
|
+
/* Comment panel - light surface card (Verso popover), same slot as the style panel */
|
|
163
|
+
.AreaHighlight__comment-panel {
|
|
164
|
+
margin-top: 6px;
|
|
165
|
+
width: 260px;
|
|
166
|
+
background: var(--rphp-surface, #ffffff);
|
|
167
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
168
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
169
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
170
|
+
overflow: hidden;
|
|
118
171
|
}
|
|
119
172
|
|
|
120
|
-
.
|
|
121
|
-
|
|
173
|
+
.AreaHighlight__comment-panel textarea {
|
|
174
|
+
display: block;
|
|
175
|
+
width: 100%;
|
|
176
|
+
box-sizing: border-box;
|
|
177
|
+
max-height: 160px;
|
|
178
|
+
padding: 10px 12px;
|
|
179
|
+
border: none;
|
|
180
|
+
outline: none;
|
|
181
|
+
resize: none;
|
|
182
|
+
background: transparent;
|
|
183
|
+
color: var(--rphp-text, #1c1b18);
|
|
184
|
+
font: inherit;
|
|
185
|
+
font-size: 13px;
|
|
186
|
+
line-height: 1.5;
|
|
187
|
+
white-space: pre-wrap;
|
|
188
|
+
word-break: break-word;
|
|
189
|
+
overflow-y: auto;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.AreaHighlight__comment-panel textarea::placeholder {
|
|
193
|
+
color: var(--rphp-text-muted, #8b8880);
|
|
194
|
+
font-style: italic;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Color dropdown menu - same slot/positioning as the old style panel */
|
|
198
|
+
.AreaHighlight__color-menu {
|
|
199
|
+
margin-top: 6px;
|
|
200
|
+
width: 180px;
|
|
201
|
+
background: var(--rphp-surface, #ffffff);
|
|
202
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
203
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
204
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
205
|
+
padding: 6px;
|
|
206
|
+
display: flex;
|
|
207
|
+
flex-direction: column;
|
|
208
|
+
gap: 1px;
|
|
122
209
|
}
|
|
123
210
|
|
|
124
|
-
.AreaHighlight__color-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
211
|
+
.AreaHighlight__color-menu-item {
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
gap: 10px;
|
|
215
|
+
width: 100%;
|
|
216
|
+
padding: 7px 8px;
|
|
128
217
|
border: none;
|
|
129
|
-
border-radius: 4px;
|
|
130
|
-
cursor: pointer;
|
|
131
218
|
background: transparent;
|
|
219
|
+
border-radius: var(--rphp-radius-sm, 6px);
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
color: var(--rphp-text, #1c1b18);
|
|
222
|
+
font-size: 13px;
|
|
223
|
+
text-align: left;
|
|
132
224
|
}
|
|
133
225
|
|
|
134
|
-
.AreaHighlight__color-
|
|
135
|
-
|
|
226
|
+
.AreaHighlight__color-menu-item:hover {
|
|
227
|
+
background: var(--rphp-surface-alt, #f4f2ee);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.AreaHighlight__color-menu-dot {
|
|
231
|
+
width: 16px;
|
|
232
|
+
height: 16px;
|
|
233
|
+
border-radius: 50%;
|
|
234
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
235
|
+
flex-shrink: 0;
|
|
136
236
|
}
|
|
137
237
|
|
|
138
|
-
.AreaHighlight__color-
|
|
139
|
-
|
|
140
|
-
|
|
238
|
+
.AreaHighlight__color-menu-label {
|
|
239
|
+
flex: 1;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.AreaHighlight__color-menu-check {
|
|
243
|
+
display: flex;
|
|
244
|
+
color: var(--rphp-accent, #5b50e6);
|
|
245
|
+
flex-shrink: 0;
|
|
141
246
|
}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
touch-action: none;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
/* Control bar - light surface card (Verso) */
|
|
10
11
|
.DrawingCanvas__controls {
|
|
11
12
|
position: fixed;
|
|
12
13
|
bottom: 20px;
|
|
@@ -14,19 +15,22 @@
|
|
|
14
15
|
transform: translateX(-50%);
|
|
15
16
|
display: flex;
|
|
16
17
|
gap: 10px;
|
|
17
|
-
padding: 10px
|
|
18
|
-
background-color:
|
|
19
|
-
border
|
|
20
|
-
|
|
18
|
+
padding: 10px 12px;
|
|
19
|
+
background-color: var(--rphp-surface, #ffffff);
|
|
20
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
21
|
+
border-radius: var(--rphp-radius-lg, 12px);
|
|
22
|
+
box-shadow: var(--rphp-shadow-lg, 0 8px 24px -6px rgba(28, 27, 24, 0.22));
|
|
21
23
|
z-index: 10;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
26
|
.DrawingCanvas__controls button {
|
|
25
|
-
padding:
|
|
27
|
+
padding: 6px 14px;
|
|
26
28
|
border: none;
|
|
27
|
-
border-radius:
|
|
29
|
+
border-radius: var(--rphp-radius, 9px);
|
|
28
30
|
cursor: pointer;
|
|
29
|
-
font-size:
|
|
31
|
+
font-size: 13px;
|
|
32
|
+
font-weight: 600;
|
|
33
|
+
font-family: var(--rphp-font);
|
|
30
34
|
transition: background-color 0.2s, transform 0.1s;
|
|
31
35
|
}
|
|
32
36
|
|
|
@@ -34,29 +38,33 @@
|
|
|
34
38
|
transform: scale(1.02);
|
|
35
39
|
}
|
|
36
40
|
|
|
41
|
+
/* Primary action */
|
|
37
42
|
.DrawingCanvas__doneButton {
|
|
38
|
-
background-color: #
|
|
39
|
-
color:
|
|
43
|
+
background-color: var(--rphp-accent, #5b50e6);
|
|
44
|
+
color: var(--rphp-text-on-accent, #ffffff);
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
.DrawingCanvas__doneButton:hover {
|
|
43
|
-
background-color: #
|
|
48
|
+
background-color: var(--rphp-accent-strong, #4a40d4);
|
|
44
49
|
}
|
|
45
50
|
|
|
51
|
+
/* Danger action */
|
|
46
52
|
.DrawingCanvas__cancelButton {
|
|
47
|
-
background-color:
|
|
48
|
-
color:
|
|
53
|
+
background-color: transparent;
|
|
54
|
+
color: var(--rphp-danger, #ef4444);
|
|
49
55
|
}
|
|
50
56
|
|
|
51
57
|
.DrawingCanvas__cancelButton:hover {
|
|
52
|
-
background-color:
|
|
58
|
+
background-color: rgba(239, 68, 68, 0.12);
|
|
53
59
|
}
|
|
54
60
|
|
|
61
|
+
/* Secondary action */
|
|
55
62
|
.DrawingCanvas__clearButton {
|
|
56
|
-
background-color: #
|
|
57
|
-
color:
|
|
63
|
+
background-color: var(--rphp-surface-alt, #f4f2ee);
|
|
64
|
+
color: var(--rphp-text-secondary, #57544d);
|
|
65
|
+
border: 1px solid var(--rphp-border, #e6e2da);
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
.DrawingCanvas__clearButton:hover {
|
|
61
|
-
background-color: #
|
|
69
|
+
background-color: var(--rphp-surface-sunken, #efece5);
|
|
62
70
|
}
|