@nextblock-cms/editor 0.0.2 → 0.0.4
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/index.js +95 -95
- package/index.mjs +2273 -2271
- package/package.json +1 -1
- package/styles/advanced-features.css +477 -0
- package/styles/drag-handle.css +790 -0
- package/styles/editor.css +89 -0
- package/styles/placeholder.css +7 -0
|
@@ -0,0 +1,790 @@
|
|
|
1
|
+
/* Tiptap Drag Handle Styles - Notion-like gutter */
|
|
2
|
+
.tiptap-drag-handle {
|
|
3
|
+
position: absolute;
|
|
4
|
+
top: -0.12em;
|
|
5
|
+
left: -18px;
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 4px;
|
|
9
|
+
padding: 0;
|
|
10
|
+
background: transparent;
|
|
11
|
+
border: none;
|
|
12
|
+
box-shadow: none;
|
|
13
|
+
color: #9ca3af;
|
|
14
|
+
cursor: grab;
|
|
15
|
+
font-size: 15px;
|
|
16
|
+
line-height: 1.25;
|
|
17
|
+
transform: translateY(-3px);
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
opacity: 0;
|
|
20
|
+
visibility: hidden;
|
|
21
|
+
transition: color 0.18s ease, opacity 0.18s ease;
|
|
22
|
+
z-index: 12;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.tiptap-drag-handle[data-active='true'] {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
visibility: visible;
|
|
28
|
+
pointer-events: auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.tiptap-drag-handle[data-active='false'] {
|
|
32
|
+
visibility: hidden !important;
|
|
33
|
+
pointer-events: none !important;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.tiptap-drag-handle[data-menu-open='true'],
|
|
37
|
+
.tiptap-drag-handle:hover {
|
|
38
|
+
color: #1f2937;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.tiptap-drag-handle:active {
|
|
42
|
+
cursor: grabbing;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.tiptap-drag-handle__button {
|
|
46
|
+
display: inline-flex;
|
|
47
|
+
align-items: center;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
width: 20px;
|
|
50
|
+
height: 30px;
|
|
51
|
+
padding: 2px;
|
|
52
|
+
border-radius: 6px;
|
|
53
|
+
border: none;
|
|
54
|
+
background: transparent;
|
|
55
|
+
color: inherit;
|
|
56
|
+
line-height: 1.25;
|
|
57
|
+
font-weight: 500;
|
|
58
|
+
pointer-events: auto;
|
|
59
|
+
transition: background-color 0.18s ease, color 0.18s ease;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.tiptap-drag-handle__button:hover,
|
|
63
|
+
.tiptap-drag-handle__button:focus-visible {
|
|
64
|
+
background-color: rgba(15, 23, 42, 0.08);
|
|
65
|
+
color: #111827;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.tiptap-drag-handle__button:focus-visible {
|
|
69
|
+
outline: 2px solid rgba(59, 130, 246, 0.4);
|
|
70
|
+
outline-offset: 1px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.tiptap-drag-handle__plus {
|
|
74
|
+
font-size: 18px;
|
|
75
|
+
font-family: inherit;
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.tiptap-drag-handle__grip {
|
|
80
|
+
cursor: grab;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.tiptap-drag-handle__grip svg {
|
|
84
|
+
width: 12px;
|
|
85
|
+
height: 18px;
|
|
86
|
+
opacity: 0.8;
|
|
87
|
+
transition: opacity 0.18s ease;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.tiptap-drag-handle:active .tiptap-drag-handle__grip svg {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.tiptap-drag-handle__button[data-tooltip] {
|
|
95
|
+
position: relative;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.tiptap-drag-handle__button[data-tooltip]::after {
|
|
99
|
+
content: attr(data-tooltip);
|
|
100
|
+
position: absolute;
|
|
101
|
+
top: -44px;
|
|
102
|
+
left: 50%;
|
|
103
|
+
transform: translateX(-50%) translateY(4px);
|
|
104
|
+
padding: 4px 8px;
|
|
105
|
+
border-radius: 9999px;
|
|
106
|
+
background: rgba(17, 24, 39, 0.92);
|
|
107
|
+
color: #f9fafb;
|
|
108
|
+
font-size: 12px;
|
|
109
|
+
font-weight: 600;
|
|
110
|
+
white-space: nowrap;
|
|
111
|
+
box-shadow: 0 6px 12px rgba(15, 23, 42, 0.25);
|
|
112
|
+
opacity: 0;
|
|
113
|
+
pointer-events: none;
|
|
114
|
+
transition: opacity 0.18s ease, transform 0.18s ease;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.tiptap-drag-handle__button[data-tooltip]:hover::after,
|
|
118
|
+
.tiptap-drag-handle__button[data-tooltip]:focus-visible::after {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
transform: translateX(-50%) translateY(0);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.tiptap-drag-handle::after {
|
|
124
|
+
content: attr(data-tooltip);
|
|
125
|
+
position: absolute;
|
|
126
|
+
top: -52px;
|
|
127
|
+
left: -10px;
|
|
128
|
+
padding: 6px 10px;
|
|
129
|
+
border-radius: 8px;
|
|
130
|
+
background: rgba(17, 24, 39, 0.92);
|
|
131
|
+
color: #f9fafb;
|
|
132
|
+
font-size: 12px;
|
|
133
|
+
font-weight: 500;
|
|
134
|
+
line-height: 1.25;
|
|
135
|
+
white-space: pre;
|
|
136
|
+
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.25);
|
|
137
|
+
opacity: 0;
|
|
138
|
+
transform: translateY(4px);
|
|
139
|
+
pointer-events: none;
|
|
140
|
+
transition: opacity 0.18s ease, transform 0.18s ease;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.tiptap-drag-handle::before {
|
|
144
|
+
content: '';
|
|
145
|
+
position: absolute;
|
|
146
|
+
top: -26px;
|
|
147
|
+
left: 4px;
|
|
148
|
+
width: 8px;
|
|
149
|
+
height: 8px;
|
|
150
|
+
border-radius: 2px;
|
|
151
|
+
background: rgba(17, 24, 39, 0.92);
|
|
152
|
+
opacity: 0;
|
|
153
|
+
transform: rotate(45deg) translateY(6px);
|
|
154
|
+
pointer-events: none;
|
|
155
|
+
transition: opacity 0.18s ease, transform 0.18s ease;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.tiptap-drag-handle--hint::after,
|
|
159
|
+
.tiptap-drag-handle--hint::before,
|
|
160
|
+
.tiptap-drag-handle[data-menu-open='true']::after,
|
|
161
|
+
.tiptap-drag-handle[data-menu-open='true']::before {
|
|
162
|
+
opacity: 1;
|
|
163
|
+
transform: translateY(0);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@media (prefers-color-scheme: dark) {
|
|
167
|
+
.tiptap-drag-handle {
|
|
168
|
+
color: #94a3b8;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.tiptap-drag-handle__button:hover,
|
|
172
|
+
.tiptap-drag-handle__button:focus-visible {
|
|
173
|
+
background-color: rgba(148, 163, 184, 0.18);
|
|
174
|
+
color: #f9fafb;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.tiptap-drag-handle::after {
|
|
178
|
+
background: rgba(15, 23, 42, 0.95);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.tiptap-drag-handle__button[data-tooltip]::after {
|
|
182
|
+
background: rgba(15, 23, 42, 0.95);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.tiptap-drag-handle::before {
|
|
186
|
+
background: rgba(15, 23, 42, 0.95);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* Enhanced hover detection for content blocks - Expand hover area for easier access */
|
|
191
|
+
.ProseMirror p,
|
|
192
|
+
.ProseMirror h1,
|
|
193
|
+
.ProseMirror h2,
|
|
194
|
+
.ProseMirror h3,
|
|
195
|
+
.ProseMirror h4,
|
|
196
|
+
.ProseMirror h5,
|
|
197
|
+
.ProseMirror h6,
|
|
198
|
+
.ProseMirror blockquote,
|
|
199
|
+
.ProseMirror ul,
|
|
200
|
+
.ProseMirror ol,
|
|
201
|
+
.ProseMirror pre,
|
|
202
|
+
.ProseMirror .code-block,
|
|
203
|
+
.ProseMirror [data-type="taskList"] {
|
|
204
|
+
position: relative;
|
|
205
|
+
margin-left: 0;
|
|
206
|
+
/* Ensure minimum height for proper drag handle centering */
|
|
207
|
+
min-height: 24px;
|
|
208
|
+
/* Create stacking context for drag handle positioning */
|
|
209
|
+
z-index: 1;
|
|
210
|
+
/* Ensure proper box model for accurate height calculation */
|
|
211
|
+
box-sizing: border-box;
|
|
212
|
+
/* Add display block to ensure consistent height calculation */
|
|
213
|
+
display: block;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Special handling for code blocks to ensure consistent width */
|
|
217
|
+
.ProseMirror pre,
|
|
218
|
+
.ProseMirror .code-block {
|
|
219
|
+
/* Override any width constraints that might cause inconsistency */
|
|
220
|
+
width: auto;
|
|
221
|
+
max-width: calc(100% - 28px); /* Account for expanded hover area */
|
|
222
|
+
/* Ensure proper box model */
|
|
223
|
+
box-sizing: border-box;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/* Content-specific drag handle positioning for optimal first-line alignment */
|
|
227
|
+
/* Headings - adjust for larger font sizes */
|
|
228
|
+
.ProseMirror h1 .tiptap-drag-handle,
|
|
229
|
+
.ProseMirror h1 .drag-handle,
|
|
230
|
+
.ProseMirror h1 .drag-handle-button {
|
|
231
|
+
top: 0.16em; /* Slightly higher for large headings */
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.ProseMirror h2 .tiptap-drag-handle,
|
|
235
|
+
.ProseMirror h2 .drag-handle,
|
|
236
|
+
.ProseMirror h2 .drag-handle-button {
|
|
237
|
+
top: 0.08em; /* Adjust for h2 size */
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.ProseMirror h3 .tiptap-drag-handle,
|
|
241
|
+
.ProseMirror h3 .drag-handle,
|
|
242
|
+
.ProseMirror h3 .drag-handle-button,
|
|
243
|
+
.ProseMirror h4 .tiptap-drag-handle,
|
|
244
|
+
.ProseMirror h4 .drag-handle,
|
|
245
|
+
.ProseMirror h4 .drag-handle-button,
|
|
246
|
+
.ProseMirror h5 .tiptap-drag-handle,
|
|
247
|
+
.ProseMirror h5 .drag-handle,
|
|
248
|
+
.ProseMirror h5 .drag-handle-button,
|
|
249
|
+
.ProseMirror h6 .tiptap-drag-handle,
|
|
250
|
+
.ProseMirror h6 .drag-handle,
|
|
251
|
+
.ProseMirror h6 .drag-handle-button {
|
|
252
|
+
top: 0.16em; /* Standard alignment for smaller headings */
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* Code blocks - align with first line of code */
|
|
256
|
+
.ProseMirror pre .tiptap-drag-handle,
|
|
257
|
+
.ProseMirror pre .drag-handle,
|
|
258
|
+
.ProseMirror pre .drag-handle-button,
|
|
259
|
+
.ProseMirror .code-block .tiptap-drag-handle,
|
|
260
|
+
.ProseMirror .code-block .drag-handle,
|
|
261
|
+
.ProseMirror .code-block .drag-handle-button {
|
|
262
|
+
top: 0.75em; /* Account for code block padding and font */
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* Lists - align with first list item text */
|
|
266
|
+
.ProseMirror ul .tiptap-drag-handle,
|
|
267
|
+
.ProseMirror ul .drag-handle,
|
|
268
|
+
.ProseMirror ul .drag-handle-button,
|
|
269
|
+
.ProseMirror ol .tiptap-drag-handle,
|
|
270
|
+
.ProseMirror ol .drag-handle,
|
|
271
|
+
.ProseMirror ol .drag-handle-button {
|
|
272
|
+
top: 0.21em; /* Account for list item spacing */
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* Blockquotes - align with quoted text */
|
|
276
|
+
.ProseMirror blockquote .tiptap-drag-handle,
|
|
277
|
+
.ProseMirror blockquote .drag-handle,
|
|
278
|
+
.ProseMirror blockquote .drag-handle-button {
|
|
279
|
+
top: 0.25em; /* Account for blockquote styling */
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Task lists - align with checkbox and text */
|
|
283
|
+
.ProseMirror [data-type="taskList"] .tiptap-drag-handle,
|
|
284
|
+
.ProseMirror [data-type="taskList"] .drag-handle,
|
|
285
|
+
.ProseMirror [data-type="taskList"] .drag-handle-button {
|
|
286
|
+
top: 0.16em; /* Align with task item text */
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
/* Show drag handle on hover - Let Tiptap handle the visibility logic */
|
|
290
|
+
.ProseMirror .has-focus .tiptap-drag-handle,
|
|
291
|
+
.ProseMirror .node-selected .tiptap-drag-handle {
|
|
292
|
+
opacity: 1;
|
|
293
|
+
pointer-events: auto;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Hide drag handle during text selection */
|
|
297
|
+
.ProseMirror.ProseMirror-selectednode .tiptap-drag-handle {
|
|
298
|
+
opacity: 0;
|
|
299
|
+
pointer-events: none;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
/* Dark mode support */
|
|
303
|
+
@media (prefers-color-scheme: dark) {
|
|
304
|
+
.tiptap-drag-handle {
|
|
305
|
+
color: #94a3b8;
|
|
306
|
+
background: rgba(148, 163, 184, 0.1);
|
|
307
|
+
border-color: rgba(148, 163, 184, 0.2);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.tiptap-drag-handle:hover {
|
|
311
|
+
background: rgba(148, 163, 184, 0.2);
|
|
312
|
+
border-color: rgba(148, 163, 184, 0.4);
|
|
313
|
+
color: #cbd5e1;
|
|
314
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.tiptap-drag-handle:active {
|
|
318
|
+
background: rgba(148, 163, 184, 0.3);
|
|
319
|
+
border-color: rgba(148, 163, 184, 0.5);
|
|
320
|
+
color: #e2e8f0;
|
|
321
|
+
transform: scale(0.95);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* Responsive adjustments */
|
|
326
|
+
@media (max-width: 768px) {
|
|
327
|
+
.tiptap-drag-handle {
|
|
328
|
+
width: 20px;
|
|
329
|
+
height: 28px;
|
|
330
|
+
/* Adjust positioning for mobile - maintain first-line alignment */
|
|
331
|
+
left: -18px;
|
|
332
|
+
/* Keep first-line alignment on mobile */
|
|
333
|
+
top: 0.16em;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
/* Content-specific mobile adjustments for first-line alignment */
|
|
337
|
+
.ProseMirror h1 .tiptap-drag-handle {
|
|
338
|
+
top: 0.2em; /* Maintain heading alignment on mobile */
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.ProseMirror h2 .tiptap-drag-handle {
|
|
342
|
+
top: 0.08em;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.ProseMirror pre .tiptap-drag-handle,
|
|
346
|
+
.ProseMirror .code-block .tiptap-drag-handle {
|
|
347
|
+
top: 0.75em; /* Maintain code block alignment on mobile */
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.ProseMirror ul .tiptap-drag-handle,
|
|
351
|
+
.ProseMirror ol .tiptap-drag-handle,
|
|
352
|
+
.ProseMirror blockquote .tiptap-drag-handle,
|
|
353
|
+
.ProseMirror [data-type="taskList"] .tiptap-drag-handle {
|
|
354
|
+
top: 0.25em; /* Maintain list/blockquote alignment on mobile */
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
/* Reduce expanded hover area on mobile */
|
|
358
|
+
.ProseMirror p,
|
|
359
|
+
.ProseMirror h1,
|
|
360
|
+
.ProseMirror h2,
|
|
361
|
+
.ProseMirror h3,
|
|
362
|
+
.ProseMirror h4,
|
|
363
|
+
.ProseMirror h5,
|
|
364
|
+
.ProseMirror h6,
|
|
365
|
+
.ProseMirror blockquote,
|
|
366
|
+
.ProseMirror ul,
|
|
367
|
+
.ProseMirror ol,
|
|
368
|
+
.ProseMirror pre,
|
|
369
|
+
.ProseMirror .code-block,
|
|
370
|
+
.ProseMirror [data-type="taskList"] {
|
|
371
|
+
margin-left: 0;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Adjust code block width for mobile */
|
|
375
|
+
.ProseMirror pre,
|
|
376
|
+
.ProseMirror .code-block {
|
|
377
|
+
max-width: calc(100% - 28px); /* Account for reduced hover area */
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/* Touch device support */
|
|
382
|
+
@media (hover: none) and (pointer: coarse) {
|
|
383
|
+
.tiptap-drag-handle {
|
|
384
|
+
opacity: 0.7;
|
|
385
|
+
pointer-events: auto;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.ProseMirror .node-selected .tiptap-drag-handle {
|
|
389
|
+
opacity: 1;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* Accessibility improvements */
|
|
394
|
+
.tiptap-drag-handle:focus {
|
|
395
|
+
outline: 2px solid #3b82f6;
|
|
396
|
+
outline-offset: 2px;
|
|
397
|
+
opacity: 1;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.tiptap-drag-handle:focus:not(:focus-visible) {
|
|
401
|
+
outline: none;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/* Global dragging state */
|
|
405
|
+
body.dragging {
|
|
406
|
+
cursor: grabbing !important;
|
|
407
|
+
user-select: none;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
body.dragging * {
|
|
411
|
+
cursor: grabbing !important;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
/* Enhanced drag feedback */
|
|
415
|
+
.tiptap-drag-handle.dragging {
|
|
416
|
+
transform: scale(1.1);
|
|
417
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
418
|
+
z-index: 1000;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
/* Drag preview styles */
|
|
422
|
+
.ProseMirror-dragging {
|
|
423
|
+
opacity: 0.5;
|
|
424
|
+
transform: rotate(5deg);
|
|
425
|
+
transition: all 0.2s ease;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/* Drop zone indicator */
|
|
429
|
+
.ProseMirror .drop-cursor {
|
|
430
|
+
position: relative;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.ProseMirror .drop-cursor::after {
|
|
434
|
+
content: '';
|
|
435
|
+
position: absolute;
|
|
436
|
+
left: -1px;
|
|
437
|
+
right: -1px;
|
|
438
|
+
height: 2px;
|
|
439
|
+
background: #3b82f6;
|
|
440
|
+
border-radius: 1px;
|
|
441
|
+
pointer-events: none;
|
|
442
|
+
animation: pulse 1s infinite;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
@keyframes pulse {
|
|
446
|
+
0%, 100% {
|
|
447
|
+
opacity: 1;
|
|
448
|
+
}
|
|
449
|
+
50% {
|
|
450
|
+
opacity: 0.5;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
/* Enhanced drop zone styling */
|
|
455
|
+
.ProseMirror .drop-zone {
|
|
456
|
+
position: relative;
|
|
457
|
+
border: 2px dashed #3b82f6;
|
|
458
|
+
border-radius: 4px;
|
|
459
|
+
background: rgba(59, 130, 246, 0.05);
|
|
460
|
+
margin: 2px 0;
|
|
461
|
+
min-height: 20px;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.ProseMirror .drop-zone::before {
|
|
465
|
+
content: 'Drop here';
|
|
466
|
+
position: absolute;
|
|
467
|
+
left: 50%;
|
|
468
|
+
top: 50%;
|
|
469
|
+
transform: translate(-50%, -50%);
|
|
470
|
+
color: #3b82f6;
|
|
471
|
+
font-size: 12px;
|
|
472
|
+
font-weight: 500;
|
|
473
|
+
pointer-events: none;
|
|
474
|
+
opacity: 0.7;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* Smooth transitions for drag operations */
|
|
478
|
+
.ProseMirror [data-node-view-wrapper] {
|
|
479
|
+
transition: transform 0.2s ease, opacity 0.2s ease;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.ProseMirror [data-node-view-wrapper].dragging {
|
|
483
|
+
opacity: 0.5;
|
|
484
|
+
transform: rotate(2deg) scale(0.95);
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/*
|
|
488
|
+
* LEGACY SUPPORT: Keep existing drag handle styles for backward compatibility
|
|
489
|
+
* These should not interfere with Tiptap's new drag handle system
|
|
490
|
+
*/
|
|
491
|
+
|
|
492
|
+
.drag-handle {
|
|
493
|
+
display: flex;
|
|
494
|
+
align-items: center;
|
|
495
|
+
justify-content: center;
|
|
496
|
+
width: 24px;
|
|
497
|
+
height: 24px;
|
|
498
|
+
border-radius: 6px;
|
|
499
|
+
background: rgba(100, 116, 139, 0.1);
|
|
500
|
+
border: 1px solid rgba(100, 116, 139, 0.2);
|
|
501
|
+
cursor: grab;
|
|
502
|
+
color: #64748b;
|
|
503
|
+
transition: all 0.2s ease;
|
|
504
|
+
opacity: 0;
|
|
505
|
+
pointer-events: none;
|
|
506
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
507
|
+
/* Position for first-line alignment (legacy support) */
|
|
508
|
+
position: absolute;
|
|
509
|
+
top: 0.16em; /* Align with text baseline/x-height */
|
|
510
|
+
transform: none; /* Remove centering transform */
|
|
511
|
+
left: -18px;
|
|
512
|
+
z-index: 10;
|
|
513
|
+
margin: 0;
|
|
514
|
+
will-change: transform;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.drag-handle:hover {
|
|
518
|
+
background: rgba(100, 116, 139, 0.15);
|
|
519
|
+
border-color: rgba(100, 116, 139, 0.3);
|
|
520
|
+
color: #475569;
|
|
521
|
+
opacity: 1;
|
|
522
|
+
transform: scale(1.05);
|
|
523
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.drag-handle:active {
|
|
527
|
+
cursor: grabbing;
|
|
528
|
+
background: rgba(100, 116, 139, 0.2);
|
|
529
|
+
border-color: rgba(100, 116, 139, 0.4);
|
|
530
|
+
color: #334155;
|
|
531
|
+
transform: scale(0.95);
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.drag-handle svg {
|
|
535
|
+
width: 12px;
|
|
536
|
+
height: 18px;
|
|
537
|
+
flex-shrink: 0;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* React drag handle button styles - for custom React components */
|
|
541
|
+
.drag-handle-button {
|
|
542
|
+
position: absolute;
|
|
543
|
+
display: flex;
|
|
544
|
+
align-items: center;
|
|
545
|
+
justify-content: center;
|
|
546
|
+
width: 20px;
|
|
547
|
+
height: 28px;
|
|
548
|
+
border-radius: 6px;
|
|
549
|
+
background: rgba(100, 116, 139, 0.08);
|
|
550
|
+
border: 1px solid rgba(100, 116, 139, 0.15);
|
|
551
|
+
cursor: grab;
|
|
552
|
+
color: #64748b;
|
|
553
|
+
transition: all 0.2s ease;
|
|
554
|
+
opacity: 0;
|
|
555
|
+
pointer-events: none;
|
|
556
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
557
|
+
/* Position for first-line alignment (React component) */
|
|
558
|
+
top: 0.16em; /* Align with text baseline/x-height */
|
|
559
|
+
transform: none; /* Remove centering transform */
|
|
560
|
+
left: -18px;
|
|
561
|
+
z-index: 10;
|
|
562
|
+
margin: 0;
|
|
563
|
+
will-change: transform;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.drag-handle-button:hover {
|
|
567
|
+
background: rgba(100, 116, 139, 0.15);
|
|
568
|
+
border-color: rgba(100, 116, 139, 0.3);
|
|
569
|
+
color: #475569;
|
|
570
|
+
opacity: 1;
|
|
571
|
+
transform: scale(1.05);
|
|
572
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.drag-handle-button:active {
|
|
576
|
+
cursor: grabbing;
|
|
577
|
+
background: rgba(100, 116, 139, 0.2);
|
|
578
|
+
border-color: rgba(100, 116, 139, 0.4);
|
|
579
|
+
color: #334155;
|
|
580
|
+
transform: scale(0.95);
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
.drag-handle-button svg {
|
|
584
|
+
width: 14px;
|
|
585
|
+
height: 20px;
|
|
586
|
+
flex-shrink: 0;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/* Legacy support for custom drag handles */
|
|
590
|
+
.ProseMirror .has-focus .drag-handle,
|
|
591
|
+
.ProseMirror [data-node-view-wrapper]:hover .drag-handle,
|
|
592
|
+
.ProseMirror .node-selected .drag-handle,
|
|
593
|
+
.ProseMirror [data-node-view-wrapper]:hover .drag-handle-button,
|
|
594
|
+
.ProseMirror .has-focus .drag-handle-button,
|
|
595
|
+
.ProseMirror .node-selected .drag-handle-button {
|
|
596
|
+
opacity: 1;
|
|
597
|
+
pointer-events: auto;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
/* Fallback hover detection for nodes without data-node-view-wrapper */
|
|
601
|
+
.ProseMirror p:hover .drag-handle,
|
|
602
|
+
.ProseMirror h1:hover .drag-handle,
|
|
603
|
+
.ProseMirror h2:hover .drag-handle,
|
|
604
|
+
.ProseMirror h3:hover .drag-handle,
|
|
605
|
+
.ProseMirror h4:hover .drag-handle,
|
|
606
|
+
.ProseMirror h5:hover .drag-handle,
|
|
607
|
+
.ProseMirror h6:hover .drag-handle,
|
|
608
|
+
.ProseMirror blockquote:hover .drag-handle,
|
|
609
|
+
.ProseMirror ul:hover .drag-handle,
|
|
610
|
+
.ProseMirror ol:hover .drag-handle,
|
|
611
|
+
.ProseMirror pre:hover .drag-handle,
|
|
612
|
+
.ProseMirror .code-block:hover .drag-handle,
|
|
613
|
+
.ProseMirror [data-type="taskList"]:hover .drag-handle,
|
|
614
|
+
.ProseMirror p:hover .drag-handle-button,
|
|
615
|
+
.ProseMirror h1:hover .drag-handle-button,
|
|
616
|
+
.ProseMirror h2:hover .drag-handle-button,
|
|
617
|
+
.ProseMirror h3:hover .drag-handle-button,
|
|
618
|
+
.ProseMirror h4:hover .drag-handle-button,
|
|
619
|
+
.ProseMirror h5:hover .drag-handle-button,
|
|
620
|
+
.ProseMirror h6:hover .drag-handle-button,
|
|
621
|
+
.ProseMirror blockquote:hover .drag-handle-button,
|
|
622
|
+
.ProseMirror ul:hover .drag-handle-button,
|
|
623
|
+
.ProseMirror ol:hover .drag-handle-button,
|
|
624
|
+
.ProseMirror pre:hover .drag-handle-button,
|
|
625
|
+
.ProseMirror .code-block:hover .drag-handle-button,
|
|
626
|
+
.ProseMirror [data-type="taskList"]:hover .drag-handle-button {
|
|
627
|
+
opacity: 1;
|
|
628
|
+
pointer-events: auto;
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
/* Dark mode support for legacy components */
|
|
632
|
+
@media (prefers-color-scheme: dark) {
|
|
633
|
+
.drag-handle {
|
|
634
|
+
color: #94a3b8;
|
|
635
|
+
background: rgba(148, 163, 184, 0.1);
|
|
636
|
+
border-color: rgba(148, 163, 184, 0.2);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
.drag-handle-button {
|
|
640
|
+
color: #94a3b8;
|
|
641
|
+
background: rgba(148, 163, 184, 0.08);
|
|
642
|
+
border-color: rgba(148, 163, 184, 0.15);
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.drag-handle:hover {
|
|
646
|
+
background: rgba(148, 163, 184, 0.2);
|
|
647
|
+
border-color: rgba(148, 163, 184, 0.4);
|
|
648
|
+
color: #cbd5e1;
|
|
649
|
+
transform: scale(1.05);
|
|
650
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.drag-handle-button:hover {
|
|
654
|
+
background: rgba(148, 163, 184, 0.2);
|
|
655
|
+
border-color: rgba(148, 163, 184, 0.4);
|
|
656
|
+
color: #cbd5e1;
|
|
657
|
+
transform: scale(1.05);
|
|
658
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
.drag-handle:active {
|
|
662
|
+
background: rgba(148, 163, 184, 0.3);
|
|
663
|
+
border-color: rgba(148, 163, 184, 0.5);
|
|
664
|
+
color: #e2e8f0;
|
|
665
|
+
transform: scale(0.95);
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
.drag-handle-button:active {
|
|
669
|
+
background: rgba(148, 163, 184, 0.3);
|
|
670
|
+
border-color: rgba(148, 163, 184, 0.5);
|
|
671
|
+
color: #e2e8f0;
|
|
672
|
+
transform: scale(0.95);
|
|
673
|
+
}
|
|
674
|
+
}
|
|
675
|
+
|
|
676
|
+
/* Mobile adjustments for legacy components */
|
|
677
|
+
@media (max-width: 768px) {
|
|
678
|
+
.drag-handle-button {
|
|
679
|
+
width: 32px;
|
|
680
|
+
height: 28px;
|
|
681
|
+
/* Maintain first-line alignment on mobile */
|
|
682
|
+
top: 0.16em;
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
.drag-handle {
|
|
686
|
+
width: 20px;
|
|
687
|
+
height: 28px;
|
|
688
|
+
/* Maintain first-line alignment on mobile */
|
|
689
|
+
top: 0.16em;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
/* Content-specific mobile adjustments for legacy components */
|
|
693
|
+
.ProseMirror h1 .drag-handle,
|
|
694
|
+
.ProseMirror h1 .drag-handle-button {
|
|
695
|
+
top: 0.2em;
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
.ProseMirror h2 .drag-handle,
|
|
699
|
+
.ProseMirror h2 .drag-handle-button {
|
|
700
|
+
top: 0.08em;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.ProseMirror pre .drag-handle,
|
|
704
|
+
.ProseMirror pre .drag-handle-button,
|
|
705
|
+
.ProseMirror .code-block .drag-handle,
|
|
706
|
+
.ProseMirror .code-block .drag-handle-button {
|
|
707
|
+
top: 0.75em;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.ProseMirror ul .drag-handle,
|
|
711
|
+
.ProseMirror ul .drag-handle-button,
|
|
712
|
+
.ProseMirror ol .drag-handle,
|
|
713
|
+
.ProseMirror ol .drag-handle-button,
|
|
714
|
+
.ProseMirror blockquote .drag-handle,
|
|
715
|
+
.ProseMirror blockquote .drag-handle-button,
|
|
716
|
+
.ProseMirror [data-type="taskList"] .drag-handle,
|
|
717
|
+
.ProseMirror [data-type="taskList"] .drag-handle-button {
|
|
718
|
+
top: 0.25em;
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
/* Fix code block width consistency - ensure all content has consistent width */
|
|
723
|
+
.ProseMirror pre,
|
|
724
|
+
.ProseMirror .code-block {
|
|
725
|
+
/* Ensure code blocks don't extend beyond normal content width */
|
|
726
|
+
max-width: 100%;
|
|
727
|
+
/* Match the content width constraints of other elements */
|
|
728
|
+
box-sizing: border-box;
|
|
729
|
+
/* Prevent horizontal overflow */
|
|
730
|
+
overflow-x: auto;
|
|
731
|
+
/* Ensure consistent margin behavior */
|
|
732
|
+
margin-left: 0;
|
|
733
|
+
margin-right: 0;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
/* Ensure code block content respects container width */
|
|
737
|
+
.ProseMirror pre code,
|
|
738
|
+
.ProseMirror .code-block code {
|
|
739
|
+
/* Prevent code from breaking out of container */
|
|
740
|
+
max-width: 100%;
|
|
741
|
+
word-wrap: break-word;
|
|
742
|
+
white-space: pre-wrap;
|
|
743
|
+
/* Ensure consistent padding */
|
|
744
|
+
padding: 0;
|
|
745
|
+
margin: 0;
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
/* Override any conflicting styles that might cause width issues */
|
|
749
|
+
.ProseMirror pre[class*="language-"],
|
|
750
|
+
.ProseMirror .code-block[class*="language-"] {
|
|
751
|
+
/* Reset any language-specific width overrides */
|
|
752
|
+
width: auto !important;
|
|
753
|
+
max-width: 100% !important;
|
|
754
|
+
/* Ensure consistent positioning */
|
|
755
|
+
position: relative;
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
|
|
759
|
+
|
|
760
|
+
|
|
761
|
+
|
|
762
|
+
|
|
763
|
+
|
|
764
|
+
|
|
765
|
+
|
|
766
|
+
|
|
767
|
+
|
|
768
|
+
|
|
769
|
+
|
|
770
|
+
|
|
771
|
+
|
|
772
|
+
|
|
773
|
+
|
|
774
|
+
|
|
775
|
+
|
|
776
|
+
|
|
777
|
+
|
|
778
|
+
|
|
779
|
+
|
|
780
|
+
|
|
781
|
+
|
|
782
|
+
|
|
783
|
+
|
|
784
|
+
|
|
785
|
+
|
|
786
|
+
|
|
787
|
+
|
|
788
|
+
|
|
789
|
+
|
|
790
|
+
|