@meowdown/core 0.68.3 → 0.70.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
@@ -147,6 +147,454 @@
147
147
  .prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
148
148
  display: none;
149
149
  }
150
+
151
+ @property --post-embed-color {
152
+ syntax: "*";
153
+ inherits: true
154
+ }
155
+
156
+ @property --post-embed-background {
157
+ syntax: "*";
158
+ inherits: true
159
+ }
160
+
161
+ @property --post-embed-border-color {
162
+ syntax: "*";
163
+ inherits: true
164
+ }
165
+
166
+ @property --post-embed-radius {
167
+ syntax: "*";
168
+ inherits: true
169
+ }
170
+
171
+ @property --post-embed-padding {
172
+ syntax: "*";
173
+ inherits: true
174
+ }
175
+
176
+ @property --post-embed-muted-color {
177
+ syntax: "*";
178
+ inherits: true
179
+ }
180
+
181
+ @property --post-embed-link-color {
182
+ syntax: "*";
183
+ inherits: true
184
+ }
185
+
186
+ @layer post-embed {
187
+ :where([data-post-embed="x-post"]) {
188
+ --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
189
+ --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
190
+ --_link: var(--post-embed-link-color, #1d9bf0);
191
+ --_badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.4 2 3.1-.5 1.1 3 2.9 1.3-.5 3.1 2 2.4-2 2.4.5 3.1-2.9 1.3-1.1 3-3.1-.5-2.4 2-2.4-2-3.1.5-1.1-3-2.9-1.3.5-3.1L1 12l2-2.4-.5-3.1 2.9-1.3 1.1-3 3.1.5z'/%3E%3C/svg%3E");
192
+ --_check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
193
+ font: inherit;
194
+ color: var(--post-embed-color, inherit);
195
+ display: block;
196
+
197
+ & :where([data-root]) {
198
+ background: var(--post-embed-background, transparent);
199
+ border: 1px solid var(--_hairline);
200
+ border-radius: var(--post-embed-radius, 1rem);
201
+ padding: var(--post-embed-padding, 1rem);
202
+ overflow-wrap: anywhere;
203
+ line-height: 1.4;
204
+ position: relative;
205
+ }
206
+
207
+ & :where([hidden]) {
208
+ display: none !important;
209
+ }
210
+
211
+ & :where(a) {
212
+ color: var(--_link);
213
+ text-decoration: none;
214
+ }
215
+
216
+ & :where(a:hover) {
217
+ text-underline-offset: .15em;
218
+ text-decoration: underline;
219
+ }
220
+
221
+ & :where(a:focus-visible, button:focus-visible) {
222
+ outline: 2px solid var(--_link);
223
+ outline-offset: 2px;
224
+ border-radius: 4px;
225
+ }
226
+
227
+ & :where([data-author]) {
228
+ align-items: center;
229
+ gap: .75rem;
230
+ display: flex;
231
+ }
232
+
233
+ & :where([data-avatar]) {
234
+ object-fit: cover;
235
+ border-radius: 50%;
236
+ flex: none;
237
+ width: 3rem;
238
+ height: 3rem;
239
+ }
240
+
241
+ & :where([data-avatar][data-shape="square"]) {
242
+ border-radius: .5rem;
243
+ }
244
+
245
+ & :where([data-avatar][data-shape="hexagon"]) {
246
+ clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
247
+ }
248
+
249
+ & :where([data-author-details]) {
250
+ min-width: 0;
251
+ color: var(--_muted);
252
+ flex: 1;
253
+ line-height: 1.3;
254
+ }
255
+
256
+ & :where([data-author-name]) {
257
+ color: var(--post-embed-color, inherit);
258
+ flex-wrap: wrap;
259
+ align-items: center;
260
+ gap: .25rem;
261
+ font-weight: 700;
262
+ display: flex;
263
+ }
264
+
265
+ & :where([data-author-details] > bdi > a) {
266
+ color: inherit;
267
+ }
268
+
269
+ & :where([data-verified]) {
270
+ color: #0000;
271
+ --_badge-color: #1d9bf0;
272
+ width: 1.2em;
273
+ height: 1.2em;
274
+ display: inline-block;
275
+ position: relative;
276
+ overflow: hidden;
277
+ }
278
+
279
+ & :where([data-verified="business"]) {
280
+ --_badge-color: #e2b719;
281
+ }
282
+
283
+ & :where([data-verified="government"]) {
284
+ --_badge-color: #829aab;
285
+ }
286
+
287
+ & :where([data-verified]):before {
288
+ content: "";
289
+ background: var(--_badge-color);
290
+ mask: var(--_badge) center / contain no-repeat;
291
+ position: absolute;
292
+ inset: 0;
293
+ }
294
+
295
+ & :where([data-verified]):after {
296
+ content: "";
297
+ mask: var(--_check) center / contain no-repeat;
298
+ background: #fff;
299
+ position: absolute;
300
+ inset: 0;
301
+ }
302
+
303
+ & :where([data-label]) {
304
+ color: var(--_muted);
305
+ align-items: center;
306
+ gap: .25rem;
307
+ font-size: .8em;
308
+ font-weight: 500;
309
+ display: inline-flex;
310
+ }
311
+
312
+ & :where([data-label] img) {
313
+ border-radius: 2px;
314
+ width: 1.1em;
315
+ height: 1.1em;
316
+ }
317
+
318
+ & :where([data-reply-to]) {
319
+ color: var(--_muted);
320
+ margin-block-start: .75rem;
321
+ font-size: .9375em;
322
+ }
323
+
324
+ & :where([data-body]) {
325
+ margin-block: .75rem 0;
326
+ font-size: 1.0625em;
327
+ line-height: 1.45;
328
+ }
329
+
330
+ & :where([data-text]) {
331
+ white-space: pre-wrap;
332
+ }
333
+
334
+ & :where([data-media]) {
335
+ border: 1px solid var(--_hairline);
336
+ border-radius: 1rem;
337
+ grid-template-columns: repeat(2, minmax(0, 1fr));
338
+ gap: 2px;
339
+ margin-block-start: .75rem;
340
+ display: grid;
341
+ overflow: hidden;
342
+ }
343
+
344
+ & :where([data-media][data-count="1"]) {
345
+ grid-template-columns: minmax(0, 1fr);
346
+ }
347
+
348
+ & :where([data-media-item]) {
349
+ min-width: 0;
350
+ overflow: hidden;
351
+ }
352
+
353
+ & :where([data-media-item] > a) {
354
+ height: 100%;
355
+ display: block;
356
+ }
357
+
358
+ & :where([data-media-item] img, [data-media-item] video) {
359
+ object-fit: contain;
360
+ background: color-mix(in srgb, currentColor 6%, transparent);
361
+ width: 100%;
362
+ height: auto;
363
+ max-height: 36rem;
364
+ display: block;
365
+ }
366
+
367
+ & :where([data-media]:not([data-count="1"]) [data-media-item] img) {
368
+ aspect-ratio: 1;
369
+ object-fit: cover;
370
+ height: 100%;
371
+ }
372
+
373
+ & :where([data-media][data-count="3"] [data-media-item]:first-child) {
374
+ grid-row: span 2;
375
+ }
376
+
377
+ & :where([data-media-unavailable], [data-media-error]) {
378
+ color: var(--_muted);
379
+ background: color-mix(in srgb, currentColor 4%, transparent);
380
+ padding: .75rem 1rem;
381
+ }
382
+
383
+ & :where([data-quoted]) {
384
+ border: 1px solid var(--_hairline);
385
+ border-radius: 1rem;
386
+ margin-block-start: .75rem;
387
+ padding: .75rem;
388
+ }
389
+
390
+ & :where([data-quoted] [data-author]) {
391
+ gap: .5rem;
392
+ }
393
+
394
+ & :where([data-quoted] [data-avatar]) {
395
+ width: 1.5rem;
396
+ height: 1.5rem;
397
+ }
398
+
399
+ & :where([data-quoted] [data-author-details]) {
400
+ flex-wrap: wrap;
401
+ align-items: baseline;
402
+ gap: 0 .35rem;
403
+ display: flex;
404
+ }
405
+
406
+ & :where([data-quoted] [data-body]) {
407
+ margin-block-start: .375rem;
408
+ font-size: 1em;
409
+ }
410
+
411
+ & :where([data-quoted] [data-media]) {
412
+ border-radius: .75rem;
413
+ }
414
+
415
+ & :where([data-quoted] [data-footer]) {
416
+ margin-block-start: .5rem;
417
+ font-size: .875em;
418
+ }
419
+
420
+ & :where([data-footer]) {
421
+ color: var(--_muted);
422
+ flex-wrap: wrap;
423
+ align-items: center;
424
+ gap: .25rem 0;
425
+ margin-block-start: .75rem;
426
+ font-size: .9375em;
427
+ display: flex;
428
+ }
429
+
430
+ & :where([data-footer] > a) {
431
+ color: inherit;
432
+ }
433
+
434
+ & :where([data-footer] > [data-edited]):before {
435
+ content: "";
436
+ vertical-align: middle;
437
+ background: currentColor;
438
+ border-radius: 50%;
439
+ width: 3px;
440
+ height: 3px;
441
+ margin-inline: .45rem;
442
+ display: inline-block;
443
+ }
444
+
445
+ & :where([data-edited]) {
446
+ font-style: normal;
447
+ }
448
+
449
+ & :where([data-fallback] [data-body]) {
450
+ color: var(--_muted);
451
+ }
452
+ }
453
+
454
+ :where([data-post-embed="youtube-video"]) {
455
+ --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
456
+ --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
457
+ --_link: var(--post-embed-link-color, #1d9bf0);
458
+ --_radius: var(--post-embed-radius, 1rem);
459
+ --_page: var(--post-embed-background, Canvas);
460
+ --_play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24S67.94 13.05 66.52 7.74z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20z' fill='%23fff'/%3E%3C/svg%3E");
461
+ font: inherit;
462
+ color: var(--post-embed-color, inherit);
463
+ display: block;
464
+
465
+ & :where([data-root]) {
466
+ overflow-wrap: anywhere;
467
+ line-height: 1.35;
468
+ }
469
+
470
+ & :where([hidden]) {
471
+ display: none !important;
472
+ }
473
+
474
+ & :where(a) {
475
+ color: var(--_link);
476
+ text-decoration: none;
477
+ }
478
+
479
+ & :where(a:hover) {
480
+ text-underline-offset: .15em;
481
+ text-decoration: underline;
482
+ }
483
+
484
+ & :where(a:focus-visible, button:focus-visible) {
485
+ outline: 2px solid var(--_link);
486
+ outline-offset: 2px;
487
+ border-radius: 4px;
488
+ }
489
+
490
+ & :where(article) {
491
+ max-width: 100%;
492
+ position: relative;
493
+ }
494
+
495
+ & :where([data-orientation="portrait"]) {
496
+ max-width: 22rem;
497
+ margin-inline: auto;
498
+ }
499
+
500
+ & :where([data-poster], iframe) {
501
+ aspect-ratio: 16 / 9;
502
+ border-radius: var(--_radius);
503
+ background: color-mix(in srgb, currentColor 6%, transparent);
504
+ border: 0;
505
+ width: 100%;
506
+ display: block;
507
+ position: relative;
508
+ overflow: hidden;
509
+ }
510
+
511
+ & :where([data-orientation="portrait"] [data-poster], [data-orientation="portrait"] iframe) {
512
+ aspect-ratio: 9 / 16;
513
+ }
514
+
515
+ & :where(button[data-poster]) {
516
+ font: inherit;
517
+ color: inherit;
518
+ cursor: pointer;
519
+ padding: 0;
520
+ }
521
+
522
+ & :where([data-poster] img) {
523
+ object-fit: cover;
524
+ width: 100%;
525
+ height: 100%;
526
+ position: absolute;
527
+ inset: 0;
528
+ }
529
+
530
+ & :where([data-play]) {
531
+ background: var(--_play) center / contain no-repeat;
532
+ width: 68px;
533
+ height: 48px;
534
+ position: absolute;
535
+ inset: 50% auto auto 50%;
536
+ translate: -50% -50%;
537
+ }
538
+
539
+ & :where([data-details]) {
540
+ pointer-events: none;
541
+ flex-direction: column;
542
+ align-items: flex-start;
543
+ gap: .125rem;
544
+ display: flex;
545
+ position: absolute;
546
+ inset: 0 0 auto;
547
+ }
548
+
549
+ & :where([data-details] a, [data-details] span) {
550
+ pointer-events: auto;
551
+ }
552
+
553
+ & :where([data-title]) {
554
+ color: inherit;
555
+ font-size: 1.0625em;
556
+ font-weight: 700;
557
+ }
558
+
559
+ & :where([data-details] > a:has([data-author]), [data-author]) {
560
+ color: inherit;
561
+ font-size: .875em;
562
+ }
563
+
564
+ & :where([data-fallback]) {
565
+ border: 1px solid var(--_hairline);
566
+ border-radius: var(--_radius);
567
+ padding: var(--post-embed-padding, 1rem);
568
+ }
569
+
570
+ & :where([data-fallback] [data-details]) {
571
+ position: static;
572
+ }
573
+
574
+ & :where([data-body]) {
575
+ color: var(--_muted);
576
+ margin-block: .5rem 0;
577
+ }
578
+
579
+ & :where([data-footer]) {
580
+ color: var(--_muted);
581
+ margin-block-start: .75rem;
582
+ font-size: .9375em;
583
+ display: block;
584
+ }
585
+
586
+ & :where([data-details]) {
587
+ border-radius: var(--_radius) var(--_radius) 0 0;
588
+ color: #fff;
589
+ background: linear-gradient(#000000b8, #0000);
590
+ padding: .875rem 1rem 2.5rem;
591
+ }
592
+
593
+ & :where([data-details] > a:has([data-author]), [data-author]) {
594
+ color: #ffffffd1;
595
+ }
596
+ }
597
+ }
150
598
  }
151
599
 
152
600
  @layer meowdown.theme {
@@ -640,39 +1088,25 @@
640
1088
  padding: 2px 6px;
641
1089
  }
642
1090
 
643
- .ProseMirror .md-embed-youtube {
644
- aspect-ratio: 16 / 9;
645
- border-radius: var(--meowdown-image-radius, .5rem);
646
- border: 0;
647
- width: 100%;
648
- max-width: 100%;
649
- display: block;
650
- }
651
-
652
- .ProseMirror .md-embed-tweet {
653
- border: 0;
654
- width: 100%;
1091
+ .ProseMirror .md-image-view-preview post-embed-x-post, .ProseMirror .md-image-view-preview post-embed-youtube-video {
1092
+ -webkit-user-select: text;
1093
+ user-select: text;
655
1094
  max-width: 550px;
656
1095
  display: block;
657
1096
  }
658
1097
 
659
- .ProseMirror .md-embed-tweet:not([data-sized]) {
660
- min-height: 250px;
661
- }
662
-
663
1098
  .ProseMirror .md-embed-resizable {
664
1099
  isolation: isolate;
665
1100
  min-width: 2.5rem;
666
1101
  max-width: 100%;
667
- min-height: 2.5rem;
668
1102
  display: block;
669
1103
  position: relative;
1104
+ height: auto !important;
670
1105
  }
671
1106
 
672
- .ProseMirror .md-embed-resizable .md-embed-youtube {
673
- aspect-ratio: auto;
1107
+ .ProseMirror .md-embed-resizable post-embed-youtube-video {
674
1108
  width: 100%;
675
- height: 100%;
1109
+ max-width: none;
676
1110
  }
677
1111
 
678
1112
  .ProseMirror .md-embed-resizable[data-resizing] iframe {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@meowdown/core",
3
3
  "type": "module",
4
- "version": "0.68.3",
4
+ "version": "0.70.0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -26,12 +26,17 @@
26
26
  "@floating-ui/dom": "^1.8.0",
27
27
  "@lezer/highlight": "^1.2.3",
28
28
  "@ocavue/utils": "^1.8.0",
29
+ "@post-embed/elements": "^0.2.0",
30
+ "@post-embed/exporter": "^0.2.0",
31
+ "@post-embed/schema": "^0.2.0",
32
+ "@post-embed/types": "^0.2.0",
29
33
  "@prosekit/core": "^0.13.2",
30
34
  "@prosekit/extensions": "^0.18.2",
31
35
  "@prosekit/pm": "^0.1.19",
32
36
  "@prosekit/web": "^0.9.2",
33
37
  "hast-util-to-mdast": "^10.1.2",
34
38
  "katex": "^0.18.5",
39
+ "lru.min": "^1.1.5",
35
40
  "mdast-util-to-markdown": "^2.1.2",
36
41
  "micromark-util-decode-string": "^2.0.1",
37
42
  "micromark-util-normalize-identifier": "^2.0.1",
@@ -43,7 +48,8 @@
43
48
  "remark-stringify": "^11.0.0",
44
49
  "unicode-by-name": "^0.2.0",
45
50
  "unified": "^11.0.5",
46
- "@meowdown/markdown": "^0.68.3"
51
+ "valibot": "^1.4.2",
52
+ "@meowdown/markdown": "^0.70.0"
47
53
  },
48
54
  "devDependencies": {
49
55
  "@ocavue/tsconfig": "^0.7.1",