@svadmin/editor 0.5.11 → 0.5.13
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/styles/editor.css +55 -39
- package/package.json +2 -2
package/dist/styles/editor.css
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
/* Base editor container */
|
|
4
4
|
.svadmin-editor {
|
|
5
|
-
--editor-border:
|
|
6
|
-
--editor-bg:
|
|
7
|
-
--editor-fg:
|
|
8
|
-
--editor-muted:
|
|
9
|
-
--editor-primary:
|
|
10
|
-
--editor-primary-fg:
|
|
11
|
-
--editor-ring:
|
|
5
|
+
--editor-border: var(--border);
|
|
6
|
+
--editor-bg: var(--background);
|
|
7
|
+
--editor-fg: var(--foreground);
|
|
8
|
+
--editor-muted: var(--muted-foreground);
|
|
9
|
+
--editor-primary: var(--primary);
|
|
10
|
+
--editor-primary-fg: var(--primary-foreground);
|
|
11
|
+
--editor-ring: var(--ring);
|
|
12
12
|
--editor-radius: var(--radius, 0.5rem);
|
|
13
13
|
|
|
14
14
|
position: relative;
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
border-radius: var(--editor-radius);
|
|
17
17
|
background: var(--editor-bg);
|
|
18
18
|
overflow: hidden;
|
|
19
|
-
transition: border-color
|
|
19
|
+
transition: border-color var(--svadmin-motion-standard, 200ms) var(--svadmin-motion-easing, ease-out), box-shadow var(--svadmin-motion-standard, 200ms) var(--svadmin-motion-easing, ease-out);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.svadmin-editor:focus-within {
|
|
23
23
|
border-color: var(--editor-ring);
|
|
24
|
-
box-shadow: 0 0 0 2px
|
|
24
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 15%, transparent);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
/* ─── Toolbar ─────────────────────────────────────────────────── */
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
gap: 1px;
|
|
34
34
|
padding: 4px 6px;
|
|
35
35
|
border-bottom: 1px solid var(--editor-border);
|
|
36
|
-
background:
|
|
36
|
+
background: color-mix(in srgb, var(--muted) 30%, transparent);
|
|
37
37
|
min-height: 40px;
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -64,21 +64,21 @@
|
|
|
64
64
|
background: transparent;
|
|
65
65
|
color: var(--editor-fg);
|
|
66
66
|
cursor: pointer;
|
|
67
|
-
transition:
|
|
67
|
+
transition: background-color var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out), color var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out);
|
|
68
68
|
position: relative;
|
|
69
69
|
flex-shrink: 0;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
.svadmin-toolbar-btn:hover {
|
|
73
|
-
background:
|
|
73
|
+
background: color-mix(in srgb, var(--muted) 70%, transparent);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
.svadmin-toolbar-btn:active {
|
|
76
|
+
.svadmin-toolbar-btn:active:not(:disabled, [aria-disabled="true"]) {
|
|
77
77
|
transform: scale(0.95);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.svadmin-toolbar-btn[data-active="true"] {
|
|
81
|
-
background:
|
|
81
|
+
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
|
82
82
|
color: var(--editor-primary);
|
|
83
83
|
}
|
|
84
84
|
|
|
@@ -119,16 +119,16 @@
|
|
|
119
119
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
120
120
|
background-repeat: no-repeat;
|
|
121
121
|
background-position: right 6px center;
|
|
122
|
-
transition: background-color
|
|
122
|
+
transition: background-color var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out);
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.svadmin-toolbar-select:hover {
|
|
126
|
-
background-color:
|
|
126
|
+
background-color: color-mix(in srgb, var(--muted) 70%, transparent);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.svadmin-toolbar-select:focus {
|
|
130
130
|
outline: none;
|
|
131
|
-
background-color:
|
|
131
|
+
background-color: color-mix(in srgb, var(--muted) 70%, transparent);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
/* ─── Editor Content Area ─────────────────────────────────────── */
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
text-decoration: underline;
|
|
234
234
|
text-underline-offset: 2px;
|
|
235
235
|
cursor: pointer;
|
|
236
|
-
transition: opacity
|
|
236
|
+
transition: opacity var(--svadmin-motion-fast, 150ms);
|
|
237
237
|
}
|
|
238
238
|
|
|
239
239
|
.svadmin-editor-content .tiptap a:hover {
|
|
@@ -303,8 +303,8 @@
|
|
|
303
303
|
/* ─── Code ────────────────────────────────────────────────────── */
|
|
304
304
|
|
|
305
305
|
.svadmin-editor-content .tiptap code {
|
|
306
|
-
background:
|
|
307
|
-
color:
|
|
306
|
+
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
307
|
+
color: var(--destructive, #dc2626);
|
|
308
308
|
padding: 2px 6px;
|
|
309
309
|
border-radius: 4px;
|
|
310
310
|
font-size: 0.875em;
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
}
|
|
313
313
|
|
|
314
314
|
.svadmin-editor-content .tiptap pre {
|
|
315
|
-
background:
|
|
315
|
+
background: var(--card);
|
|
316
316
|
border: 1px solid var(--editor-border);
|
|
317
317
|
border-radius: 8px;
|
|
318
318
|
padding: 16px 20px;
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
border-radius: 8px;
|
|
347
347
|
margin: 0.5em 0;
|
|
348
348
|
cursor: pointer;
|
|
349
|
-
transition: box-shadow
|
|
349
|
+
transition: box-shadow var(--svadmin-motion-standard, 200ms) var(--svadmin-motion-easing, ease-out);
|
|
350
350
|
}
|
|
351
351
|
|
|
352
352
|
.svadmin-editor-content .tiptap img:hover {
|
|
@@ -378,7 +378,7 @@
|
|
|
378
378
|
}
|
|
379
379
|
|
|
380
380
|
.svadmin-editor-content .tiptap table th {
|
|
381
|
-
background:
|
|
381
|
+
background: color-mix(in srgb, var(--muted) 40%, transparent);
|
|
382
382
|
font-weight: 600;
|
|
383
383
|
text-align: left;
|
|
384
384
|
}
|
|
@@ -389,14 +389,14 @@
|
|
|
389
389
|
}
|
|
390
390
|
|
|
391
391
|
.svadmin-editor-content .tiptap table .selectedCell {
|
|
392
|
-
background:
|
|
392
|
+
background: color-mix(in srgb, var(--primary) 8%, transparent);
|
|
393
393
|
}
|
|
394
394
|
|
|
395
395
|
.svadmin-editor-content .tiptap table .selectedCell::after {
|
|
396
396
|
content: '';
|
|
397
397
|
position: absolute;
|
|
398
398
|
inset: 0;
|
|
399
|
-
border: 2px solid
|
|
399
|
+
border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
|
|
400
400
|
pointer-events: none;
|
|
401
401
|
}
|
|
402
402
|
|
|
@@ -446,7 +446,7 @@
|
|
|
446
446
|
align-items: center;
|
|
447
447
|
gap: 2px;
|
|
448
448
|
padding: 4px 6px;
|
|
449
|
-
background:
|
|
449
|
+
background: var(--popover);
|
|
450
450
|
border: 1px solid var(--editor-border);
|
|
451
451
|
border-radius: 8px;
|
|
452
452
|
box-shadow:
|
|
@@ -473,7 +473,7 @@
|
|
|
473
473
|
align-items: center;
|
|
474
474
|
gap: 2px;
|
|
475
475
|
padding: 4px 6px;
|
|
476
|
-
background:
|
|
476
|
+
background: var(--popover);
|
|
477
477
|
border: 1px solid var(--editor-border);
|
|
478
478
|
border-radius: 8px;
|
|
479
479
|
box-shadow:
|
|
@@ -500,7 +500,7 @@
|
|
|
500
500
|
min-width: 220px;
|
|
501
501
|
max-height: 320px;
|
|
502
502
|
overflow-y: auto;
|
|
503
|
-
background:
|
|
503
|
+
background: var(--popover);
|
|
504
504
|
border: 1px solid var(--editor-border);
|
|
505
505
|
border-radius: 8px;
|
|
506
506
|
box-shadow:
|
|
@@ -523,13 +523,13 @@
|
|
|
523
523
|
color: var(--editor-fg);
|
|
524
524
|
font-size: 13px;
|
|
525
525
|
cursor: pointer;
|
|
526
|
-
transition: background-color
|
|
526
|
+
transition: background-color var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out);
|
|
527
527
|
text-align: left;
|
|
528
528
|
}
|
|
529
529
|
|
|
530
530
|
.svadmin-slash-menu-item:hover,
|
|
531
531
|
.svadmin-slash-menu-item[data-selected="true"] {
|
|
532
|
-
background:
|
|
532
|
+
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
533
533
|
}
|
|
534
534
|
|
|
535
535
|
.svadmin-slash-menu-item-icon {
|
|
@@ -539,7 +539,7 @@
|
|
|
539
539
|
width: 28px;
|
|
540
540
|
height: 28px;
|
|
541
541
|
border-radius: 6px;
|
|
542
|
-
background:
|
|
542
|
+
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
543
543
|
flex-shrink: 0;
|
|
544
544
|
}
|
|
545
545
|
|
|
@@ -570,7 +570,7 @@
|
|
|
570
570
|
|
|
571
571
|
.svadmin-color-picker {
|
|
572
572
|
padding: 8px;
|
|
573
|
-
background:
|
|
573
|
+
background: var(--popover);
|
|
574
574
|
border: 1px solid var(--editor-border);
|
|
575
575
|
border-radius: 8px;
|
|
576
576
|
box-shadow:
|
|
@@ -592,7 +592,7 @@
|
|
|
592
592
|
border-radius: 4px;
|
|
593
593
|
border: 1px solid hsl(0 0% 0% / 0.1);
|
|
594
594
|
cursor: pointer;
|
|
595
|
-
transition: transform
|
|
595
|
+
transition: transform var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out), box-shadow var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out);
|
|
596
596
|
}
|
|
597
597
|
|
|
598
598
|
.svadmin-color-swatch:hover {
|
|
@@ -608,7 +608,7 @@
|
|
|
608
608
|
align-items: center;
|
|
609
609
|
gap: 6px;
|
|
610
610
|
padding: 6px 8px;
|
|
611
|
-
background:
|
|
611
|
+
background: var(--popover);
|
|
612
612
|
border: 1px solid var(--editor-border);
|
|
613
613
|
border-radius: 8px;
|
|
614
614
|
box-shadow:
|
|
@@ -628,7 +628,7 @@
|
|
|
628
628
|
font-size: 13px;
|
|
629
629
|
min-width: 240px;
|
|
630
630
|
outline: none;
|
|
631
|
-
transition: border-color
|
|
631
|
+
transition: border-color var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out);
|
|
632
632
|
}
|
|
633
633
|
|
|
634
634
|
.svadmin-link-input:focus {
|
|
@@ -644,7 +644,7 @@
|
|
|
644
644
|
gap: 12px;
|
|
645
645
|
padding: 4px 12px;
|
|
646
646
|
border-top: 1px solid var(--editor-border);
|
|
647
|
-
background:
|
|
647
|
+
background: color-mix(in srgb, var(--muted) 20%, transparent);
|
|
648
648
|
font-size: 11px;
|
|
649
649
|
color: var(--editor-muted);
|
|
650
650
|
}
|
|
@@ -674,7 +674,7 @@
|
|
|
674
674
|
|
|
675
675
|
/* Drag handle indicator */
|
|
676
676
|
.svadmin-editor-content .ProseMirror .is-empty::before {
|
|
677
|
-
transition: opacity
|
|
677
|
+
transition: opacity var(--svadmin-motion-fast, 150ms) var(--svadmin-motion-easing, ease-out);
|
|
678
678
|
}
|
|
679
679
|
|
|
680
680
|
/* ─── Scrollbar styling ───────────────────────────────────────── */
|
|
@@ -688,10 +688,26 @@
|
|
|
688
688
|
}
|
|
689
689
|
|
|
690
690
|
.svadmin-editor-content::-webkit-scrollbar-thumb {
|
|
691
|
-
background:
|
|
691
|
+
background: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
|
|
692
692
|
border-radius: 3px;
|
|
693
693
|
}
|
|
694
694
|
|
|
695
695
|
.svadmin-editor-content::-webkit-scrollbar-thumb:hover {
|
|
696
|
-
background:
|
|
696
|
+
background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
@media (prefers-reduced-motion: reduce) {
|
|
700
|
+
.svadmin-editor,
|
|
701
|
+
.svadmin-editor * {
|
|
702
|
+
transition: none;
|
|
703
|
+
animation: none;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.svadmin-toolbar-btn:active:not(:disabled, [aria-disabled="true"]) {
|
|
707
|
+
transform: none;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.svadmin-color-swatch:hover {
|
|
711
|
+
transform: none;
|
|
712
|
+
}
|
|
697
713
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@svadmin/editor",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.13",
|
|
4
4
|
"description": "Modern Tiptap-based rich text editor for Svelte 5 — headless, modular, production-ready",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"svelte": "^5.56.10",
|
|
40
|
-
"@svadmin/core": "^0.
|
|
40
|
+
"@svadmin/core": "^0.59.0"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@lucide/svelte": "^1.35.0",
|