@meowdown/core 0.71.0 → 0.71.2

package/dist/index.js

@@ -3113,8 +3113,15 @@ function getLinkUnitAt(state, pos) {
 //#endregion
 //#region src/extensions/image-click.ts
 const imageClickKey = new PluginKey("meowdown-image-click");
+/**
+* The image preview wrapper around `target`, or nothing when the wrapper holds
+* a post-embed card: its links and controls have their own click behavior.
+*/
 function getClosestImagePreview(target) {
-	return target instanceof HTMLElement && target.closest(".md-image-view-preview");
+	if (!(target instanceof HTMLElement)) return;
+	const preview = target.closest(".md-image-view-preview");
+	if (!preview || preview.dataset.postEmbed != null) return;
+	return preview;
 }
 function findImageAt(state, pos) {
 	const range = getMarkRangeAt(state, pos, "mdImage");

package/dist/style.css

@@ -183,224 +183,261 @@
     inherits: true
   }
 
-  @layer post-embed {
-    :where([data-post-embed="x-post"]) {
-      --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
-      --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
-      --_link: var(--post-embed-link-color, #1d9bf0);
-      font: inherit;
-      color: var(--post-embed-color, inherit);
-      text-decoration-skip-ink: none;
-      display: block;
+  [data-post-embed="x-post"] [data-root], [data-post-embed="x-post"] [data-root] *, [data-post-embed="x-post"] [data-root] :before, [data-post-embed="x-post"] [data-root] :after {
+    all: revert;
+    box-sizing: border-box;
+  }
 
-      & :where([data-root]) {
-        background: var(--post-embed-background, transparent);
-        border: 1px solid var(--_hairline);
-        border-radius: var(--post-embed-radius, 1rem);
-        padding: var(--post-embed-padding, 1rem);
-        overflow-wrap: anywhere;
-        line-height: 1.4;
-        position: relative;
-      }
+  [data-post-embed="x-post"] {
+    --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 14%, transparent));
+    --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 55%, transparent));
+    --_link: var(--post-embed-link-color, #1d9bf0);
+    --_tint: color-mix(in srgb, currentColor 5%, transparent);
+    font: inherit;
+    color: var(--post-embed-color, inherit);
+    text-decoration-skip-ink: none;
+    display: block;
+  }
 
-      & :where([hidden]) {
-        display: none !important;
-      }
+  [data-post-embed="x-post"] [data-root] {
+    color: var(--post-embed-color, inherit);
+    background: var(--post-embed-background, transparent);
+    border: 1px solid var(--_hairline);
+    border-radius: var(--post-embed-radius, .75rem);
+    padding: var(--post-embed-padding, 1rem);
+    letter-spacing: normal;
+    text-align: start;
+    text-transform: none;
+    text-indent: 0;
+    text-shadow: none;
+    word-spacing: normal;
+    font-variant: normal;
+    hyphens: manual;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: auto;
+    font-size: 1em;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.45;
+    display: block;
+    position: relative;
 
-      & :where(a) {
-        color: var(--_link);
-        text-decoration: none;
-      }
+    & [hidden] {
+      display: none !important;
+    }
 
-      & :where(a:hover) {
-        text-underline-offset: .15em;
-        text-decoration: underline;
-      }
+    & p {
+      margin: 0;
+    }
 
-      & :where(a:focus-visible, button:focus-visible) {
-        outline: 2px solid var(--_link);
-        outline-offset: 2px;
-        border-radius: 4px;
-      }
+    & a {
+      color: var(--_link);
+      cursor: pointer;
+      text-decoration: none;
+    }
 
-      & :where([data-author]) {
-        align-items: center;
-        gap: .75rem;
-        display: flex;
-      }
+    & a:hover {
+      text-underline-offset: .15em;
+      text-decoration: underline;
+    }
 
-      & :where([data-avatar]) {
-        object-fit: cover;
-        border-radius: 50%;
-        flex: none;
-        width: 3rem;
-        height: 3rem;
-      }
+    & a:focus-visible {
+      outline: 2px solid var(--_link);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
 
-      & :where([data-avatar][data-shape="square"]) {
-        border-radius: .5rem;
-      }
+    & [data-author] {
+      align-items: center;
+      gap: .625rem;
+      min-width: 0;
+      display: flex;
+    }
 
-      & :where([data-avatar][data-shape="hexagon"]) {
-        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
-      }
+    & [data-avatar] {
+      object-fit: cover;
+      background: var(--_tint);
+      border-radius: 50%;
+      flex: none;
+      width: 2.5rem;
+      height: 2.5rem;
+      display: block;
+    }
 
-      & :where([data-author-details]) {
-        min-width: 0;
-        color: var(--_muted);
-        flex: 1;
-        line-height: 1.3;
-      }
+    & [data-avatar][data-shape="square"] {
+      border-radius: .5rem;
+    }
 
-      & :where([data-author-name]) {
-        color: var(--post-embed-color, inherit);
-        flex-wrap: wrap;
-        align-items: center;
-        gap: .25rem;
-        font-weight: 700;
-        display: flex;
-      }
+    & [data-avatar][data-shape="hexagon"] {
+      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
+    }
 
-      & :where([data-author-details] > bdi > a) {
-        color: inherit;
-      }
+    & [data-author-details] {
+      flex: 1;
+      min-width: 0;
+      line-height: 1.3;
+      display: block;
+    }
 
-      & :where([data-reply-to]) {
-        color: var(--_muted);
-        margin-block-start: .75rem;
-        font-size: .9375em;
-      }
+    & [data-author-name] {
+      flex-wrap: wrap;
+      align-items: center;
+      gap: .25rem;
+      font-weight: 600;
+      display: flex;
+    }
 
-      & :where([data-body]) {
-        margin-block: .75rem 0;
-        font-size: 1.0625em;
-        line-height: 1.45;
-      }
+    & [data-author-details] > bdi {
+      color: var(--_muted);
+    }
 
-      & :where([data-text]) {
-        white-space: pre-wrap;
-      }
+    & [data-author-details] > bdi > a {
+      color: inherit;
+    }
 
-      & :where([data-media]) {
-        border: 1px solid var(--_hairline);
-        border-radius: 1rem;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 2px;
-        margin-block-start: .75rem;
-        display: grid;
-        overflow: hidden;
-      }
+    & [data-reply-to] {
+      color: var(--_muted);
+      margin-block-start: .625rem;
+      font-size: .9375em;
+      display: block;
+    }
 
-      & :where([data-media][data-count="1"]) {
-        grid-template-columns: minmax(0, 1fr);
-      }
+    & [data-body] {
+      margin-block: .625rem 0;
+      font-size: 1em;
+      line-height: 1.5;
+      display: block;
+    }
 
-      & :where([data-media-item]) {
-        min-width: 0;
-        overflow: hidden;
-      }
+    & [data-text] {
+      white-space: pre-wrap;
+    }
 
-      & :where([data-media-item] > a) {
-        height: 100%;
-        display: block;
-      }
+    & [data-media] {
+      background: var(--_hairline);
+      border-radius: .5rem;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 2px;
+      margin-block-start: .75rem;
+      display: grid;
+      overflow: hidden;
+    }
 
-      & :where([data-media-item] img, [data-media-item] video) {
-        object-fit: contain;
-        background: color-mix(in srgb, currentColor 6%, transparent);
-        width: 100%;
-        height: auto;
-        max-height: 36rem;
-        display: block;
-      }
+    & [data-media][data-count="1"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
 
-      & :where([data-media]:not([data-count="1"]) [data-media-item] img) {
-        aspect-ratio: 1;
-        object-fit: cover;
-        height: 100%;
-      }
+    & [data-media-item] {
+      min-width: 0;
+      display: block;
+      overflow: hidden;
+    }
 
-      & :where([data-media][data-count="3"] [data-media-item]:first-child) {
-        grid-row: span 2;
-      }
+    & [data-media-item] > a {
+      height: 100%;
+      display: block;
+    }
 
-      & :where([data-media-unavailable], [data-media-error]) {
-        color: var(--_muted);
-        background: color-mix(in srgb, currentColor 4%, transparent);
-        padding: .75rem 1rem;
-      }
+    & [data-media-item] img, & [data-media-item] video {
+      object-fit: contain;
+      background: var(--_tint);
+      width: 100%;
+      height: auto;
+      max-height: 32rem;
+      display: block;
+    }
 
-      & :where([data-quoted]) {
-        border: 1px solid var(--_hairline);
-        border-radius: 1rem;
-        margin-block-start: .75rem;
-        padding: .75rem;
-      }
+    & [data-media]:not([data-count="1"]) [data-media-item] img {
+      aspect-ratio: 1;
+      object-fit: cover;
+      height: 100%;
+    }
 
-      & :where([data-quoted] [data-author]) {
-        gap: .5rem;
-      }
+    & [data-media][data-count="3"] [data-media-item]:first-child {
+      grid-row: span 2;
+    }
 
-      & :where([data-quoted] [data-avatar]) {
-        width: 1.5rem;
-        height: 1.5rem;
-      }
+    & [data-media-unavailable], & [data-media-error] {
+      color: var(--_muted);
+      background: var(--_tint);
+      padding: .75rem 1rem;
+      display: block;
+    }
 
-      & :where([data-quoted] [data-author-details]) {
-        flex-wrap: wrap;
-        align-items: baseline;
-        gap: 0 .35rem;
-        display: flex;
-      }
+    & [data-quoted] {
+      border: 1px solid var(--_hairline);
+      border-radius: .5rem;
+      margin-block-start: .75rem;
+      padding: .75rem;
+      display: block;
+    }
 
-      & :where([data-quoted] [data-body]) {
-        margin-block-start: .375rem;
-        font-size: 1em;
-      }
+    & [data-quoted] [data-author] {
+      gap: .5rem;
+    }
 
-      & :where([data-quoted] [data-media]) {
-        border-radius: .75rem;
-      }
+    & [data-quoted] [data-avatar] {
+      width: 1.375rem;
+      height: 1.375rem;
+    }
 
-      & :where([data-quoted] [data-footer]) {
-        margin-block-start: .5rem;
-        font-size: .875em;
-      }
+    & [data-quoted] [data-author-details] {
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 0 .35rem;
+      display: flex;
+    }
 
-      & :where([data-footer]) {
-        color: var(--_muted);
-        flex-wrap: wrap;
-        align-items: center;
-        gap: .25rem 0;
-        margin-block-start: .75rem;
-        font-size: .9375em;
-        display: flex;
-      }
+    & [data-quoted] [data-body] {
+      margin-block-start: .375rem;
+      font-size: .9375em;
+    }
 
-      & :where([data-footer] > a) {
-        color: inherit;
-      }
+    & [data-quoted] [data-media] {
+      border-radius: .375rem;
+    }
 
-      & :where([data-footer] > [data-edited]):before {
-        content: "";
-        vertical-align: middle;
-        background: currentColor;
-        border-radius: 50%;
-        width: 3px;
-        height: 3px;
-        margin-inline: .45rem;
-        display: inline-block;
-      }
+    & [data-quoted] [data-footer] {
+      margin-block-start: .5rem;
+      font-size: .8125em;
+    }
 
-      & :where([data-edited]) {
-        font-style: normal;
-      }
+    & [data-footer] {
+      color: var(--_muted);
+      flex-wrap: wrap;
+      align-items: center;
+      gap: .25rem 0;
+      margin-block-start: .625rem;
+      font-size: .875em;
+      display: flex;
+    }
 
-      & :where([data-fallback] [data-body]) {
-        color: var(--_muted);
-      }
+    & [data-footer] > a {
+      color: inherit;
+    }
+
+    & [data-footer] > [data-edited]:before {
+      content: "";
+      vertical-align: middle;
+      background: currentColor;
+      border-radius: 50%;
+      width: 3px;
+      height: 3px;
+      margin-inline: .45rem;
+      display: inline-block;
+    }
+
+    & [data-edited] {
+      font-style: normal;
     }
 
+    & [data-fallback] [data-body] {
+      color: var(--_muted);
+    }
+  }
+
+  @layer post-embed {
     :where([data-post-embed="youtube-video"]) {
       --_hairline: var(--post-embed-border-color, color-mix(in srgb, currentColor 15%, transparent));
       --_muted: var(--post-embed-muted-color, color-mix(in srgb, currentColor 58%, transparent));
@@ -1209,7 +1246,8 @@
     }
 
     & .md-image-view-preview[data-post-embed] {
-      border-radius: var(--post-embed-radius, 1rem);
+      border-radius: var(--post-embed-radius, .75rem);
+      overflow: visible;
     }
 
     & .md-image-resizable {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/core",
   "type": "module",
-  "version": "0.71.0",
+  "version": "0.71.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,9 +26,9 @@
     "@floating-ui/dom": "^1.8.0",
     "@lezer/highlight": "^1.2.3",
     "@ocavue/utils": "^1.8.0",
-    "@post-embed/elements": "^0.4.0",
-    "@post-embed/exporter": "^0.4.0",
-    "@post-embed/schema": "^0.4.0",
+    "@post-embed/elements": "^0.5.0",
+    "@post-embed/exporter": "^0.4.1",
+    "@post-embed/schema": "^0.5.0",
     "@post-embed/types": "^0.4.0",
     "@prosekit/core": "^0.13.2",
     "@prosekit/extensions": "^0.18.2",
@@ -49,7 +49,7 @@
     "unicode-by-name": "^0.2.0",
     "unified": "^11.0.5",
     "valibot": "^1.5.0",
-    "@meowdown/markdown": "^0.71.0"
+    "@meowdown/markdown": "^0.71.2"
   },
   "devDependencies": {
     "@ocavue/tsconfig": "^0.7.1",