@meowdown/react 0.4.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;
@@ -264,6 +589,56 @@ img.ProseMirror-separator {
264
589
  padding: 0;
265
590
  }
266
591
 
592
+ .ProseMirror pre code .tok-keyword {
593
+ color: light-dark(#cf222e, #ff7b72);
594
+ }
595
+
596
+ .ProseMirror pre code .tok-comment {
597
+ color: light-dark(#6e7781, #8b949e);
598
+ font-style: italic;
599
+ }
600
+
601
+ .ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
602
+ color: light-dark(#0a3069, #a5d6ff);
603
+ }
604
+
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);
607
+ }
608
+
609
+ .ProseMirror pre code .tok-className, .ProseMirror pre code .tok-typeName, .ProseMirror pre code .tok-namespace {
610
+ color: light-dark(#953800, #ffa657);
611
+ }
612
+
613
+ .ProseMirror pre code .tok-definition {
614
+ color: light-dark(#8250df, #d2a8ff);
615
+ }
616
+
617
+ .ProseMirror pre code .tok-macroName, .ProseMirror pre code .tok-meta, .ProseMirror pre code .tok-inserted {
618
+ color: light-dark(#116329, #7ee787);
619
+ }
620
+
621
+ .ProseMirror pre code .tok-invalid, .ProseMirror pre code .tok-deleted {
622
+ color: light-dark(#82071e, #ffa198);
623
+ }
624
+
625
+ .ProseMirror pre code .tok-heading {
626
+ color: light-dark(#0550ae, #79c0ff);
627
+ font-weight: 600;
628
+ }
629
+
630
+ .ProseMirror pre code .tok-strong {
631
+ font-weight: 600;
632
+ }
633
+
634
+ .ProseMirror pre code .tok-emphasis {
635
+ font-style: italic;
636
+ }
637
+
638
+ .ProseMirror pre code .tok-link {
639
+ text-decoration: underline;
640
+ }
641
+
267
642
  .ProseMirror hr {
268
643
  border: none;
269
644
  border-top: 1px solid var(--meowdown-border);
@@ -331,151 +706,39 @@ img.ProseMirror-separator {
331
706
  .ProseMirror .md-wikilink {
332
707
  color: var(--meowdown-accent);
333
708
  text-underline-offset: 2px;
709
+ cursor: pointer;
334
710
  text-decoration: underline 1px dashed;
335
711
  }
336
712
 
337
- .ProseMirror .md-mark, .ProseMirror .md-link-uri {
338
- color: var(--meowdown-mark);
339
- opacity: .7;
340
- }
341
-
342
- .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 {
343
- display: none;
344
- }
345
-
346
- .ProseMirror[data-mark-mode="focus"] .md-mark:has(.show), .ProseMirror[data-mark-mode="focus"] .md-link-uri:has(.show) {
347
- display: inline;
348
- }
349
-
350
- .meowdown-autocomplete-menu-positioner {
351
- z-index: 50;
352
- width: min-content;
353
- height: min-content;
354
- display: block;
355
- overflow: visible;
356
- }
357
-
358
- .meowdown-autocomplete-menu {
359
- box-sizing: border-box;
360
- overscroll-behavior: contain;
361
- white-space: nowrap;
362
- user-select: none;
363
- border: 1px solid var(--meowdown-border);
364
- background: light-dark(#fff, #18181b);
365
- border-radius: .75rem;
366
- flex-direction: column;
367
- min-width: 15rem;
368
- max-height: 25rem;
369
- padding: .25rem;
370
- display: flex;
371
- overflow-y: auto;
372
- box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
373
- }
374
-
375
- .meowdown-autocomplete-menu-item {
376
- box-sizing: border-box;
377
- color: var(--meowdown-text);
378
- white-space: nowrap;
379
- cursor: default;
380
- user-select: none;
381
- border-radius: .5rem;
382
- justify-content: space-between;
383
- align-items: center;
384
- gap: 1.5rem;
385
- padding: .375rem .75rem;
386
- scroll-margin: .25rem;
387
- font-size: .875rem;
388
- display: flex;
389
-
390
- &[hidden] {
391
- display: none;
392
- }
393
-
394
- &[data-highlighted] {
395
- background: light-dark(#f4f4f5, #27272a);
396
- }
397
-
398
- & kbd {
399
- font-family: var(--meowdown-font-mono);
400
- color: var(--meowdown-muted);
401
- opacity: .8;
402
- font-size: .75rem;
403
- }
404
- }
405
-
406
- .meowdown-block-handle-positioner {
407
- z-index: 50;
408
- width: min-content;
409
- height: min-content;
410
- transition: transform .1s ease-out;
713
+ .ProseMirror .md-image {
411
714
  display: block;
412
- overflow: visible;
413
- }
414
-
415
- .meowdown-block-handle {
416
- box-sizing: border-box;
417
- transform-origin: var(--transform-origin);
418
- transition: opacity .1s, scale .1s;
419
- display: flex;
420
-
421
- &[data-state="closed"] {
422
- opacity: 0;
423
- transition-duration: .15s;
424
- scale: .95;
425
- }
426
-
427
- @starting-style {
428
- opacity: 0;
429
- scale: .95;
430
- }
431
715
  }
432
716
 
433
- .meowdown-block-handle-add, .meowdown-block-handle-drag {
434
- box-sizing: border-box;
435
- height: 1.5rem;
436
- color: color-mix(in oklab, var(--meowdown-muted) 50%, transparent);
437
- border-radius: .25rem;
438
- justify-content: center;
439
- align-items: center;
440
- display: flex;
441
-
442
- &:hover {
443
- background: light-dark(#f4f4f5, #27272a);
444
- }
445
-
446
- & svg {
447
- width: 1.25rem;
448
- height: 1.25rem;
449
- display: block;
450
- }
451
- }
452
-
453
- .meowdown-block-handle-add {
454
- cursor: pointer;
455
- width: 1.5rem;
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%;
456
721
  }
457
722
 
458
- .meowdown-block-handle-drag {
459
- cursor: grab;
460
- width: 1.25rem;
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));
461
729
  }
462
730
 
463
- @media (prefers-reduced-motion: reduce) {
464
- .meowdown-block-handle-positioner, .meowdown-block-handle {
465
- transition: none;
466
- }
731
+ .ProseMirror .md-mark, .ProseMirror .md-link-uri {
732
+ color: var(--meowdown-mark);
733
+ opacity: .7;
467
734
  }
468
735
 
469
- .meowdown-drop-indicator {
470
- z-index: 50;
471
- background: var(--meowdown-accent);
472
- transition: all .15s;
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;
473
738
  }
474
739
 
475
- @media (prefers-reduced-motion: reduce) {
476
- .meowdown-drop-indicator {
477
- transition: none;
478
- }
740
+ .ProseMirror[data-mark-mode="focus"] .md-mark:has(.show), .ProseMirror[data-mark-mode="focus"] .md-link-uri:has(.show) {
741
+ display: inline;
479
742
  }
480
743
 
481
744
  .meowdown {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@meowdown/react",
3
3
  "type": "module",
4
- "version": "0.4.0",
4
+ "version": "0.5.0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -17,6 +17,7 @@
17
17
  "./dist/**/*.css"
18
18
  ],
19
19
  "dependencies": {
20
+ "@base-ui/react": "^1.5.0",
20
21
  "@codemirror/commands": "^6.10.3",
21
22
  "@codemirror/lang-markdown": "^6.5.0",
22
23
  "@codemirror/language": "^6.12.3",
@@ -25,8 +26,9 @@
25
26
  "@ocavue/utils": "^1.7.0",
26
27
  "@prosekit/core": "^0.12.3",
27
28
  "@prosekit/pm": "^0.1.18",
28
- "@prosekit/react": "^0.7.6",
29
- "@meowdown/core": "0.3.1"
29
+ "@prosekit/react": "^0.8.0-beta.0",
30
+ "clsx": "^2.1.1",
31
+ "@meowdown/core": "0.4.0"
30
32
  },
31
33
  "peerDependencies": {
32
34
  "react": "^19.0.0",
@@ -41,6 +43,7 @@
41
43
  }
42
44
  },
43
45
  "devDependencies": {
46
+ "@css-modules-kit/codegen": "^1.2.0",
44
47
  "@ocavue/tsconfig": "^0.7.1",
45
48
  "@tsdown/css": "^0.22.2",
46
49
  "@types/react": "^19.2.17",
@@ -57,6 +60,6 @@
57
60
  "access": "public"
58
61
  },
59
62
  "scripts": {
60
- "build": "tsdown"
63
+ "build": "cmk && tsdown"
61
64
  }
62
65
  }