@meowdown/react 0.3.0 → 0.5.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/style.css CHANGED
@@ -1,3 +1,328 @@
1
+ .meow_Root_D3j_9q {
2
+ position: relative;
3
+ }
4
+
5
+ .meow_Toolbar_D3j_9q {
6
+ z-index: 1;
7
+ user-select: none;
8
+ opacity: 0;
9
+ pointer-events: none;
10
+ align-items: center;
11
+ gap: .35rem;
12
+ transition: opacity .1s ease-out;
13
+ display: flex;
14
+ position: absolute;
15
+ top: .5rem;
16
+ right: .5rem;
17
+ }
18
+
19
+ .meow_Root_D3j_9q:hover .meow_Toolbar_D3j_9q, .meow_Root_D3j_9q:focus-within .meow_Toolbar_D3j_9q, .meow_Toolbar_D3j_9q[data-open] {
20
+ opacity: 1;
21
+ pointer-events: auto;
22
+ }
23
+
24
+ .meow_Trigger_D3j_9q {
25
+ box-sizing: border-box;
26
+ border: 1px solid var(--meowdown-border);
27
+ height: 1.6rem;
28
+ color: var(--meowdown-muted);
29
+ cursor: pointer;
30
+ background: light-dark(#fff, #27272a);
31
+ border-radius: .35rem;
32
+ align-items: center;
33
+ gap: .25rem;
34
+ padding: 0 .4rem;
35
+ font-family: ui-sans-serif, system-ui, sans-serif;
36
+ font-size: .75rem;
37
+ line-height: 1;
38
+ display: flex;
39
+
40
+ &:hover, &[data-popup-open] {
41
+ color: var(--meowdown-heading);
42
+ }
43
+ }
44
+
45
+ .meow_TriggerIcon_D3j_9q {
46
+ display: flex;
47
+
48
+ & svg {
49
+ width: .85rem;
50
+ height: .85rem;
51
+ display: block;
52
+ }
53
+ }
54
+
55
+ .meow_CopyButton_D3j_9q {
56
+ box-sizing: border-box;
57
+ border: 1px solid var(--meowdown-border);
58
+ width: 1.6rem;
59
+ height: 1.6rem;
60
+ color: var(--meowdown-muted);
61
+ cursor: pointer;
62
+ background: light-dark(#fff, #27272a);
63
+ border-radius: .35rem;
64
+ justify-content: center;
65
+ align-items: center;
66
+ padding: 0;
67
+ display: flex;
68
+
69
+ &:hover {
70
+ color: var(--meowdown-heading);
71
+ }
72
+
73
+ &[data-copied] {
74
+ color: var(--meowdown-accent);
75
+ }
76
+
77
+ & svg {
78
+ width: .85rem;
79
+ height: .85rem;
80
+ display: block;
81
+ }
82
+ }
83
+
84
+ .meow_Positioner_D3j_9q {
85
+ z-index: 50;
86
+ outline: none;
87
+ }
88
+
89
+ .meow_Popup_D3j_9q {
90
+ box-sizing: border-box;
91
+ max-height: min(var(--available-height), 18rem);
92
+ border: 1px solid var(--meowdown-border);
93
+ width: 14rem;
94
+ color: var(--meowdown-text);
95
+ transform-origin: var(--transform-origin);
96
+ background: light-dark(#fff, #27272a);
97
+ border-radius: .5rem;
98
+ flex-direction: column;
99
+ font-family: ui-sans-serif, system-ui, sans-serif;
100
+ font-size: .8rem;
101
+ transition: opacity .1s, scale .1s;
102
+ display: flex;
103
+ box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
104
+
105
+ @media (prefers-reduced-motion: reduce) {
106
+ transition: none;
107
+ }
108
+
109
+ &[data-starting-style], &[data-ending-style] {
110
+ opacity: 0;
111
+ scale: .95;
112
+ }
113
+ }
114
+
115
+ .meow_SearchRow_D3j_9q {
116
+ border-bottom: 1px solid var(--meowdown-border);
117
+ padding: .35rem;
118
+ }
119
+
120
+ .meow_Search_D3j_9q {
121
+ box-sizing: border-box;
122
+ border: 1px solid var(--meowdown-border);
123
+ width: 100%;
124
+ height: 1.7rem;
125
+ color: var(--meowdown-heading);
126
+ font: inherit;
127
+ background: none;
128
+ border-radius: .35rem;
129
+ outline: none;
130
+ padding: 0 .45rem;
131
+
132
+ &::placeholder {
133
+ color: var(--meowdown-muted);
134
+ }
135
+
136
+ &:focus-visible {
137
+ border-color: var(--meowdown-accent);
138
+ }
139
+ }
140
+
141
+ .meow_Empty_D3j_9q {
142
+ color: var(--meowdown-muted);
143
+ text-align: center;
144
+ padding: .5rem;
145
+ font-size: .8rem;
146
+ }
147
+
148
+ .meow_Empty_D3j_9q:empty {
149
+ display: none;
150
+ }
151
+
152
+ .meow_List_D3j_9q {
153
+ flex-direction: column;
154
+ padding: .25rem;
155
+ display: flex;
156
+ overflow-y: auto;
157
+ }
158
+
159
+ .meow_Item_D3j_9q {
160
+ box-sizing: border-box;
161
+ cursor: pointer;
162
+ border-radius: .35rem;
163
+ outline: none;
164
+ grid-template-columns: 1rem 1fr;
165
+ align-items: center;
166
+ gap: .4rem;
167
+ padding: .3rem .5rem .3rem .3rem;
168
+ scroll-margin: .25rem;
169
+ display: grid;
170
+
171
+ &[data-highlighted] {
172
+ background: color-mix(in oklab, var(--meowdown-accent) 14%, transparent);
173
+ color: var(--meowdown-heading);
174
+ }
175
+ }
176
+
177
+ .meow_ItemIndicator_D3j_9q {
178
+ color: var(--meowdown-accent);
179
+ grid-column: 1;
180
+ display: flex;
181
+
182
+ & svg {
183
+ width: .9rem;
184
+ height: .9rem;
185
+ display: block;
186
+ }
187
+ }
188
+
189
+ .meow_ItemText_D3j_9q {
190
+ text-overflow: ellipsis;
191
+ white-space: nowrap;
192
+ grid-column: 2;
193
+ min-width: 0;
194
+ overflow: hidden;
195
+ }
196
+ .meow_Positioner_EvUpOG {
197
+ z-index: 50;
198
+ width: min-content;
199
+ height: min-content;
200
+ transition: transform .1s ease-out;
201
+ display: block;
202
+ overflow: visible;
203
+
204
+ @media (prefers-reduced-motion: reduce) {
205
+ transition: none;
206
+ }
207
+ }
208
+
209
+ .meow_Popup_EvUpOG {
210
+ box-sizing: border-box;
211
+ transform-origin: var(--transform-origin);
212
+ transition: opacity .1s, scale .1s;
213
+ display: flex;
214
+
215
+ @media (prefers-reduced-motion: reduce) {
216
+ transition: none;
217
+ }
218
+
219
+ &[data-state="closed"] {
220
+ opacity: 0;
221
+ transition-duration: .15s;
222
+ scale: .95;
223
+ }
224
+
225
+ @starting-style {
226
+ opacity: 0;
227
+ scale: .95;
228
+ }
229
+ }
230
+
231
+ .meow_Add_EvUpOG, .meow_Draggable_EvUpOG {
232
+ box-sizing: border-box;
233
+ height: 1.5rem;
234
+ color: color-mix(in oklab, var(--meowdown-muted) 50%, transparent);
235
+ border-radius: .25rem;
236
+ justify-content: center;
237
+ align-items: center;
238
+ display: flex;
239
+
240
+ &:hover {
241
+ background: light-dark(#f4f4f5, #27272a);
242
+ }
243
+
244
+ & svg {
245
+ width: 1.25rem;
246
+ height: 1.25rem;
247
+ display: block;
248
+ }
249
+ }
250
+
251
+ .meow_Add_EvUpOG {
252
+ cursor: pointer;
253
+ width: 1.5rem;
254
+ }
255
+
256
+ .meow_Draggable_EvUpOG {
257
+ cursor: grab;
258
+ width: 1.25rem;
259
+ }
260
+ .meow_DropIndicator_urNIwW {
261
+ z-index: 50;
262
+ background: var(--meowdown-accent);
263
+ transition: all .15s;
264
+ }
265
+ .meow_Positioner_Dqll0G {
266
+ z-index: 50;
267
+ width: min-content;
268
+ height: min-content;
269
+ display: block;
270
+ overflow: visible;
271
+ }
272
+
273
+ .meow_Popup_Dqll0G {
274
+ box-sizing: border-box;
275
+ overscroll-behavior: contain;
276
+ white-space: nowrap;
277
+ user-select: none;
278
+ border: 1px solid var(--meowdown-border);
279
+ background: light-dark(#fff, #18181b);
280
+ border-radius: .75rem;
281
+ flex-direction: column;
282
+ min-width: 15rem;
283
+ max-height: 25rem;
284
+ padding: .25rem;
285
+ display: flex;
286
+ overflow-y: auto;
287
+ box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
288
+ }
289
+
290
+ .meow_Item_Dqll0G {
291
+ box-sizing: border-box;
292
+ color: var(--meowdown-text);
293
+ white-space: nowrap;
294
+ cursor: default;
295
+ user-select: none;
296
+ border-radius: .5rem;
297
+ justify-content: space-between;
298
+ align-items: center;
299
+ gap: 1.5rem;
300
+ padding: .375rem .75rem;
301
+ scroll-margin: .25rem;
302
+ font-size: .875rem;
303
+ display: flex;
304
+
305
+ &[hidden] {
306
+ display: none;
307
+ }
308
+
309
+ &[data-highlighted] {
310
+ background: light-dark(#f4f4f5, #27272a);
311
+ }
312
+
313
+ & kbd {
314
+ font-family: var(--meowdown-font-mono);
315
+ color: var(--meowdown-muted);
316
+ opacity: .8;
317
+ font-size: .75rem;
318
+ }
319
+ }
320
+
321
+ .meow_Detail_Dqll0G {
322
+ color: var(--meowdown-muted);
323
+ flex-shrink: 0;
324
+ font-size: .8125rem;
325
+ }
1
326
  .ProseMirror {
2
327
  word-wrap: break-word;
3
328
  white-space: pre-wrap;
@@ -147,52 +472,6 @@ img.ProseMirror-separator {
147
472
  display: none;
148
473
  }
149
474
 
150
- .ProseMirror .tableWrapper {
151
- overflow-x: auto;
152
- }
153
-
154
- .ProseMirror table {
155
- border-collapse: collapse;
156
- table-layout: fixed;
157
- width: 100%;
158
- overflow: hidden;
159
- }
160
-
161
- .ProseMirror td, .ProseMirror th {
162
- box-sizing: border-box;
163
- vertical-align: top;
164
- border-width: 1px;
165
- padding-left: .75rem;
166
- padding-right: .75rem;
167
- position: relative;
168
- }
169
-
170
- prosekit-table-handle-drop-indicator {
171
- background-color: highlighttext;
172
- }
173
-
174
- .ProseMirror .column-resize-handle {
175
- z-index: 20;
176
- pointer-events: none;
177
- background-color: highlighttext;
178
- width: 4px;
179
- position: absolute;
180
- top: 0;
181
- bottom: 0;
182
- right: -2px;
183
- }
184
-
185
- .ProseMirror.resize-cursor {
186
- cursor: ew-resize;
187
- cursor: col-resize;
188
- }
189
-
190
- .ProseMirror .selectedCell {
191
- --color: 210, 100%, 56%;
192
- border: 1px double hsl(var(--color));
193
- background-color: hsla(var(--color), 20%);
194
- }
195
-
196
475
  :root {
197
476
  --meowdown-text: light-dark(#3f3f46, #d4d4d8);
198
477
  --meowdown-heading: light-dark(#18181b, #fafafa);
@@ -201,7 +480,11 @@ prosekit-table-handle-drop-indicator {
201
480
  --meowdown-mark: light-dark(#a78bfa, #8b5cf6);
202
481
  --meowdown-border: light-dark(#e4e4e7, #3f3f46);
203
482
  --meowdown-code-bg: light-dark(#f4f4f5, #18181b);
483
+ --meowdown-table-header-bg: light-dark(#fafafa, #27272a);
204
484
  --meowdown-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
485
+ --meowdown-node-outline: light-dark(#53f, #8870ff);
486
+ --meowdown-node-selection: light-dark(#5533ff1a, #8870ff1f);
487
+ --meowdown-selection: light-dark(#5533ff38, #8870ff4d);
205
488
  --meowdown-gutter: 3.5rem;
206
489
  }
207
490
 
@@ -306,173 +589,156 @@ prosekit-table-handle-drop-indicator {
306
589
  padding: 0;
307
590
  }
308
591
 
309
- .ProseMirror hr {
310
- border: none;
311
- border-top: 1px solid var(--meowdown-border);
312
- margin: 1.5em 0;
592
+ .ProseMirror pre code .tok-keyword {
593
+ color: light-dark(#cf222e, #ff7b72);
313
594
  }
314
595
 
315
- .ProseMirror .md-tag {
316
- background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
317
- color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
318
- border-radius: .35rem;
319
- padding: .1em .35em;
596
+ .ProseMirror pre code .tok-comment {
597
+ color: light-dark(#6e7781, #8b949e);
598
+ font-style: italic;
320
599
  }
321
600
 
322
- .ProseMirror .md-wikilink {
323
- color: var(--meowdown-accent);
324
- text-underline-offset: 2px;
325
- text-decoration: underline 1px dashed;
601
+ .ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
602
+ color: light-dark(#0a3069, #a5d6ff);
326
603
  }
327
604
 
328
- .ProseMirror .md-mark, .ProseMirror .md-link-uri {
329
- color: var(--meowdown-mark);
330
- opacity: .7;
605
+ .ProseMirror pre code .tok-number, .ProseMirror pre code .tok-bool, .ProseMirror pre code .tok-atom, .ProseMirror pre code .tok-literal {
606
+ color: light-dark(#0550ae, #79c0ff);
331
607
  }
332
608
 
333
- .ProseMirror[data-mark-mode="hide"] .md-mark, .ProseMirror[data-mark-mode="hide"] .md-link-uri, .ProseMirror[data-mark-mode="focus"] .md-mark, .ProseMirror[data-mark-mode="focus"] .md-link-uri {
334
- display: none;
609
+ .ProseMirror pre code .tok-className, .ProseMirror pre code .tok-typeName, .ProseMirror pre code .tok-namespace {
610
+ color: light-dark(#953800, #ffa657);
335
611
  }
336
612
 
337
- .ProseMirror[data-mark-mode="focus"] .md-mark:has(.show), .ProseMirror[data-mark-mode="focus"] .md-link-uri:has(.show) {
338
- display: inline;
613
+ .ProseMirror pre code .tok-definition {
614
+ color: light-dark(#8250df, #d2a8ff);
339
615
  }
340
616
 
341
- .meowdown-autocomplete-menu-positioner {
342
- z-index: 50;
343
- width: min-content;
344
- height: min-content;
345
- display: block;
346
- overflow: visible;
617
+ .ProseMirror pre code .tok-macroName, .ProseMirror pre code .tok-meta, .ProseMirror pre code .tok-inserted {
618
+ color: light-dark(#116329, #7ee787);
347
619
  }
348
620
 
349
- .meowdown-autocomplete-menu {
350
- box-sizing: border-box;
351
- overscroll-behavior: contain;
352
- white-space: nowrap;
353
- user-select: none;
354
- border: 1px solid var(--meowdown-border);
355
- background: light-dark(#fff, #18181b);
356
- border-radius: .75rem;
357
- flex-direction: column;
358
- min-width: 15rem;
359
- max-height: 25rem;
360
- padding: .25rem;
361
- display: flex;
362
- overflow-y: auto;
363
- box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
621
+ .ProseMirror pre code .tok-invalid, .ProseMirror pre code .tok-deleted {
622
+ color: light-dark(#82071e, #ffa198);
364
623
  }
365
624
 
366
- .meowdown-autocomplete-menu-item {
367
- box-sizing: border-box;
368
- color: var(--meowdown-text);
369
- white-space: nowrap;
370
- cursor: default;
371
- user-select: none;
372
- border-radius: .5rem;
373
- justify-content: space-between;
374
- align-items: center;
375
- gap: 1.5rem;
376
- padding: .375rem .75rem;
377
- scroll-margin: .25rem;
378
- font-size: .875rem;
379
- display: flex;
625
+ .ProseMirror pre code .tok-heading {
626
+ color: light-dark(#0550ae, #79c0ff);
627
+ font-weight: 600;
628
+ }
380
629
 
381
- &[hidden] {
382
- display: none;
383
- }
630
+ .ProseMirror pre code .tok-strong {
631
+ font-weight: 600;
632
+ }
384
633
 
385
- &[data-highlighted] {
386
- background: light-dark(#f4f4f5, #27272a);
387
- }
634
+ .ProseMirror pre code .tok-emphasis {
635
+ font-style: italic;
636
+ }
388
637
 
389
- & kbd {
390
- font-family: var(--meowdown-font-mono);
391
- color: var(--meowdown-muted);
392
- opacity: .8;
393
- font-size: .75rem;
394
- }
638
+ .ProseMirror pre code .tok-link {
639
+ text-decoration: underline;
395
640
  }
396
641
 
397
- .meowdown-block-handle-positioner {
398
- z-index: 50;
399
- width: min-content;
400
- height: min-content;
401
- transition: transform .1s ease-out;
402
- display: block;
403
- overflow: visible;
642
+ .ProseMirror hr {
643
+ border: none;
644
+ border-top: 1px solid var(--meowdown-border);
645
+ margin: 1.5em 0;
646
+ }
647
+
648
+ .ProseMirror table {
649
+ border-collapse: collapse;
650
+ table-layout: fixed;
651
+ width: 100%;
652
+ overflow: hidden;
404
653
  }
405
654
 
406
- .meowdown-block-handle {
655
+ .ProseMirror td, .ProseMirror th {
407
656
  box-sizing: border-box;
408
- transform-origin: var(--transform-origin);
409
- transition: opacity .1s, scale .1s;
410
- display: flex;
657
+ border: 1px solid var(--meowdown-border);
658
+ vertical-align: top;
659
+ text-align: left;
660
+ padding: .4rem .75rem;
661
+ }
411
662
 
412
- &[data-state="closed"] {
413
- opacity: 0;
414
- transition-duration: .15s;
415
- scale: .95;
416
- }
663
+ .ProseMirror th {
664
+ color: var(--meowdown-heading);
665
+ background: var(--meowdown-table-header-bg);
666
+ font-weight: 600;
667
+ }
417
668
 
418
- @starting-style {
419
- opacity: 0;
420
- scale: .95;
421
- }
669
+ .ProseMirror table.ProseMirror-selectednode td, .ProseMirror table.ProseMirror-selectednode th {
670
+ border-color: var(--meowdown-node-outline);
422
671
  }
423
672
 
424
- .meowdown-block-handle-add, .meowdown-block-handle-drag {
425
- box-sizing: border-box;
426
- height: 1.5rem;
427
- color: color-mix(in oklab, var(--meowdown-muted) 50%, transparent);
428
- border-radius: .25rem;
429
- justify-content: center;
430
- align-items: center;
431
- display: flex;
673
+ .ProseMirror .selectedCell {
674
+ border: 1px double var(--meowdown-node-outline);
675
+ background: var(--meowdown-node-selection);
676
+ --meowdown-selection: transparent;
677
+ caret-color: #0000;
678
+ }
432
679
 
433
- &:hover {
434
- background: light-dark(#f4f4f5, #27272a);
435
- }
680
+ .ProseMirror ::selection {
681
+ background: var(--meowdown-selection);
682
+ }
436
683
 
437
- & svg {
438
- width: 1.25rem;
439
- height: 1.25rem;
440
- display: block;
441
- }
684
+ .ProseMirror .ProseMirror-selectednode {
685
+ --meowdown-selection: transparent;
686
+ outline: 1px solid var(--meowdown-node-outline);
687
+ background: var(--meowdown-node-selection);
688
+ border-radius: 2px;
689
+ }
690
+
691
+ .ProseMirror pre.ProseMirror-selectednode {
692
+ border-radius: .6rem;
693
+ }
694
+
695
+ .ProseMirror.prosekit-dragging {
696
+ --meowdown-node-selection: transparent;
697
+ }
698
+
699
+ .ProseMirror .md-tag {
700
+ background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
701
+ color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
702
+ border-radius: .35rem;
703
+ padding: .1em .35em;
442
704
  }
443
705
 
444
- .meowdown-block-handle-add {
706
+ .ProseMirror .md-wikilink {
707
+ color: var(--meowdown-accent);
708
+ text-underline-offset: 2px;
445
709
  cursor: pointer;
446
- width: 1.5rem;
710
+ text-decoration: underline 1px dashed;
447
711
  }
448
712
 
449
- .meowdown-block-handle-drag {
450
- cursor: grab;
451
- width: 1.25rem;
713
+ .ProseMirror .md-image {
714
+ display: block;
452
715
  }
453
716
 
454
- @media (prefers-reduced-motion: reduce) {
455
- .meowdown-block-handle-positioner, .meowdown-block-handle {
456
- transition: none;
457
- }
717
+ .ProseMirror .md-image img {
718
+ max-height: var(--meowdown-image-max-height, 24rem);
719
+ border-radius: var(--meowdown-image-radius, .5rem);
720
+ max-width: 100%;
458
721
  }
459
722
 
460
- .meowdown-drop-indicator {
461
- z-index: 50;
462
- background: var(--meowdown-accent);
463
- transition: all .15s;
723
+ .ProseMirror .prosekit-placeholder:before {
724
+ content: attr(data-placeholder);
725
+ float: left;
726
+ pointer-events: none;
727
+ height: 0;
728
+ color: var(--meowdown-placeholder, var(--meowdown-muted));
464
729
  }
465
730
 
466
- @media (prefers-reduced-motion: reduce) {
467
- .meowdown-drop-indicator {
468
- transition: none;
469
- }
731
+ .ProseMirror .md-mark, .ProseMirror .md-link-uri {
732
+ color: var(--meowdown-mark);
733
+ opacity: .7;
470
734
  }
471
735
 
472
- :root {
473
- --meowdown-node-outline: light-dark(#53f, #8870ff);
474
- --meowdown-node-selection: light-dark(#5533ff1a, #8870ff1f);
475
- --meowdown-selection: light-dark(#5533ff38, #8870ff4d);
736
+ .ProseMirror[data-mark-mode="hide"] .md-mark, .ProseMirror[data-mark-mode="hide"] .md-link-uri, .ProseMirror[data-mark-mode="focus"] .md-mark, .ProseMirror[data-mark-mode="focus"] .md-link-uri {
737
+ display: none;
738
+ }
739
+
740
+ .ProseMirror[data-mark-mode="focus"] .md-mark:has(.show), .ProseMirror[data-mark-mode="focus"] .md-link-uri:has(.show) {
741
+ display: inline;
476
742
  }
477
743
 
478
744
  .meowdown {
@@ -482,28 +748,6 @@ prosekit-table-handle-drop-indicator {
482
748
 
483
749
  & .ProseMirror {
484
750
  flex: 1 0 auto;
485
-
486
- & ::selection {
487
- background: var(--meowdown-selection);
488
- }
489
-
490
- & .ProseMirror-selectednode {
491
- outline: 1px solid var(--meowdown-node-outline);
492
- background: var(--meowdown-node-selection);
493
- border-radius: 2px;
494
- }
495
-
496
- & pre.ProseMirror-selectednode {
497
- border-radius: .6rem;
498
- }
499
-
500
- & .ProseMirror-selectednode {
501
- --meowdown-selection: transparent;
502
- }
503
-
504
- &.prosekit-dragging {
505
- --meowdown-node-selection: transparent;
506
- }
507
751
  }
508
752
 
509
753
  & [data-editor="codemirror"] {