@meowdown/react 0.72.0 → 0.73.1

package/README.md

@@ -49,25 +49,25 @@ export function App() {
 
 ## Components
 
-| Component                                          | Description                                                                                                                                                                                                                                |
-| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `MeowdownEditor`                                   | The editor. Callbacks and resolvers must be stable; pass them via `useCallback`.                                                                                                                                                           |
-| `MarkdownView`                                     | Read-only Markdown renderer. `interactive={false}` renders passive content for previews.                                                                                                                                                   |
-| `WikilinkHoverCard`                                | Mount inside `MeowdownEditor`; renders host content for the hovered wiki link's `target`. Return `null` to render no card.                                                                                                                 |
-| `LightboxRoot` / `LightboxImage` / `LightboxVideo` | Full-window image and video preview driven by `useLightbox()`. Compose your own close controls inside `LightboxRoot`, and call `lightbox.open(item, element)` from `onImageClick` or `onXPostMediaClick` to zoom from the clicked element. |
+| Component                                                            | Description                                                                                                                                                                                                                                                                          |
+| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `MeowdownEditor`                                                     | The editor. Callbacks and resolvers must be stable; pass them via `useCallback`.                                                                                                                                                                                                     |
+| `MarkdownView`                                                       | Read-only Markdown renderer. `interactive={false}` renders passive content for previews.                                                                                                                                                                                             |
+| `WikilinkHoverCard`                                                  | Mount inside `MeowdownEditor`; renders host content for the hovered wiki link's `target`. Return `null` to render no card.                                                                                                                                                           |
+| `LightboxRoot` / `LightboxImage` / `LightboxVideo` / `LightboxFrame` | Full-window image, video, and embedded player preview driven by `useLightbox()`. Compose your own close controls inside `LightboxRoot`, and call `lightbox.open(item, element)` from `onImageClick`, `onXPostMediaClick`, or `onYouTubeVideoClick` to zoom from the clicked element. |
 
 Common `MeowdownEditor` props:
 
-| Prop                                                                                                          | What it does                                                                       |
-| ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `mode`                                                                                                        | `'focus'` (default), `'show'`, or `'hide'`: how much Markdown syntax stays in view |
-| `searchQuery` / `onSearchChange`                                                                              | Find in document, with `EditorHandle.findNext()` / `findPrevious()`                |
-| `onWikilinkClick` / `onLinkClick` / `onTagClick` / `onImageClick` / `onFileClick` / `onXPostMediaClick`       | Click handling for the rendered atoms                                              |
-| `resolveImageUrl` / `resolveWikiEmbed` / `resolveWikilink` / `resolveFileLink` / `resolveFileInfo`            | Resolve and classify local content                                                 |
-| `onFilePaste`                                                                                                 | Persist pasted or dropped files                                                    |
-| `onSlashMenuSearch` / `onTagSearch` / `onWikilinkSearch` / `onSelectionMenuSearch`                            | Search menus for `/`, `#`, `[[`, and selection commands                            |
-| `readOnly` / `placeholder` / `blockHandle` / `caretGlide` / `embedPaste` / `linkPaste` / `bulletAfterHeading` | Behavior toggles                                                                   |
-| `CodeBlockView`                                                                                               | Custom React node view component for code blocks                                   |
+| Prop                                                                                                                            | What it does                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `mode`                                                                                                                          | `'focus'` (default), `'show'`, or `'hide'`: how much Markdown syntax stays in view |
+| `searchQuery` / `onSearchChange`                                                                                                | Find in document, with `EditorHandle.findNext()` / `findPrevious()`                |
+| `onWikilinkClick` / `onLinkClick` / `onTagClick` / `onImageClick` / `onFileClick` / `onXPostMediaClick` / `onYouTubeVideoClick` | Click handling for the rendered atoms                                              |
+| `resolveImageUrl` / `resolveWikiEmbed` / `resolveWikilink` / `resolveFileLink` / `resolveFileInfo`                              | Resolve and classify local content                                                 |
+| `onFilePaste`                                                                                                                   | Persist pasted or dropped files                                                    |
+| `onSlashMenuSearch` / `onTagSearch` / `onWikilinkSearch` / `onSelectionMenuSearch`                                              | Search menus for `/`, `#`, `[[`, and selection commands                            |
+| `readOnly` / `placeholder` / `blockHandle` / `caretGlide` / `embedPaste` / `linkPaste` / `bulletAfterHeading`                   | Behavior toggles                                                                   |
+| `CodeBlockView`                                                                                                                 | Custom React node view component for code blocks                                   |
 
 Every prop, callback, and `EditorHandle` method is documented in the [API reference](https://npmx.dev/package-docs/@meowdown%2Freact/).
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactElement, ReactNode, Ref } from "react";
-import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver, XPostMediaClickHandler, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
+import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver, XPostMediaClickHandler, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoClickHandler, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { ReactNodeViewComponent, ReactNodeViewComponent as ReactNodeViewComponent$1, useEditor, useExtension, useKeymap } from "@prosekit/react";
 //#region src/utils/date-format.d.ts
@@ -456,6 +456,15 @@ interface EditorProps {
    * a lightbox. Pass a stable function (e.g. from `useCallback`).
    */
   onXPostMediaClick?: XPostMediaClickHandler;
+  /**
+   * Called with the `meowdown-embed-youtube-click` event when the user
+   * activates the poster of a YouTube card. Its `detail` holds the video, the
+   * player URL, and the rendered thumbnail element. Call
+   * `event.preventDefault()` to stop the card from playing the video in
+   * place, then play it yourself, for example in a lightbox. Pass a stable
+   * function (e.g. from `useCallback`).
+   */
+  onYouTubeVideoClick?: YouTubeVideoClickHandler;
   /**
    * Auto-embeds a pasted tweet or YouTube link as a rich embed; one undo turns
    * the embed back into the raw link. On by default.
@@ -554,7 +563,7 @@ interface EditorProps {
  *
  * Callbacks and resolvers should be stable; pass them via `useCallback`.
  */
-export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
+export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /**
@@ -675,6 +684,11 @@ interface MarkdownViewProps {
    * playing the video in place.
    */
   onXPostMediaClick?: XPostMediaClickHandler;
+  /**
+   * Called when the poster of a YouTube card is activated. Call
+   * `event.preventDefault()` to stop the card from playing the video in place.
+   */
+  onYouTubeVideoClick?: YouTubeVideoClickHandler;
   /**
    * Called when a rendered file pill is clicked. Pass a stable function.
    */
@@ -699,13 +713,13 @@ interface MarkdownViewProps {
  * Callbacks (`onWikilinkClick`, etc.) and resolvers should be stable; pass them via
  * `useCallback` to avoid re-rendering the whole tree.
  */
-export declare function MarkdownView({ markdown, markMode, frontmatter, interactive, expandCollapsed, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onXPostMediaClick, onFileClick, onTaskClick, className }: MarkdownViewProps): ReactElement;
+export declare function MarkdownView({ markdown, markMode, frontmatter, interactive, expandCollapsed, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onXPostMediaClick, onYouTubeVideoClick, onFileClick, onTaskClick, className }: MarkdownViewProps): ReactElement;
 //#endregion
 //#region src/hooks/use-lightbox.d.ts
 /**
  * Something a lightbox can show.
  */
-type LightboxItem = LightboxImageItem | LightboxVideoItem;
+type LightboxItem = LightboxImageItem | LightboxVideoItem | LightboxFrameItem;
 interface LightboxImageItem {
   type: 'image';
   /**
@@ -743,6 +757,26 @@ interface LightboxVideoItem {
   gif?: boolean | undefined;
   alt?: string | undefined;
 }
+interface LightboxFrameItem {
+  type: 'frame';
+  /**
+   * The page the `<iframe>` loads, for example a video player.
+   */
+  src: string;
+  /**
+   * The accessible name of the `<iframe>`.
+   */
+  title: string;
+  /**
+   * URL of the image the frame shows until its page has painted.
+   */
+  poster?: string | undefined;
+  /**
+   * With `height`, the aspect ratio of the frame. 16:9 when either is missing.
+   */
+  width?: number | undefined;
+  height?: number | undefined;
+}
 interface LightboxCloseOptions {
   /**
    * Close without the zoom back to the thumbnail, for example after the
@@ -782,6 +816,19 @@ interface LightboxController {
  */
 export declare function useLightbox(): LightboxController;
 //#endregion
+//#region src/components/lightbox-frame.d.ts
+/**
+ * Props for {@link LightboxFrame}. Other props land on the `<iframe>`.
+ */
+interface LightboxFrameProps extends Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'children'> {
+  readonly item: LightboxFrameItem;
+}
+/**
+ * The embedded page of a lightbox, such as a video player: the largest box of
+ * the item's aspect ratio that fits.
+ */
+export declare function LightboxFrame({ item, className, style, ...props }: LightboxFrameProps): ReactNode;
+//#endregion
 //#region src/components/lightbox-image.d.ts
 /**
  * Props for {@link LightboxImage}. Other props land on the `<img>`.
@@ -804,7 +851,7 @@ interface LightboxRootProps extends Omit<ComponentProps<'dialog'>, 'children' |
    */
   readonly lightbox: LightboxController;
   /**
-   * Render the open item. Put a {@link LightboxImage} somewhere inside, along
+   * Render the open item. Put a {@link LightboxImage}, {@link LightboxVideo}, or {@link LightboxFrame} somewhere inside, along
    * with whatever closes the lightbox.
    */
   readonly children: (item: LightboxItem) => ReactNode;
@@ -853,4 +900,4 @@ interface WikilinkHoverCardProps {
  */
 export declare function WikilinkHoverCard({ children, className }: WikilinkHoverCardProps): ReactNode;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LightboxCloseOptions, type LightboxController, type LightboxImageItem, type LightboxImageProps, type LightboxItem, type LightboxRootProps, type LightboxVideoItem, type LightboxVideoProps, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, type XPostResolver, type YouTubeVideoResolver, useEditor, useExtension, useKeymap };
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LightboxCloseOptions, type LightboxController, type LightboxFrameItem, type LightboxFrameProps, type LightboxImageItem, type LightboxImageProps, type LightboxItem, type LightboxRootProps, type LightboxVideoItem, type LightboxVideoProps, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, type XPostResolver, type YouTubeVideoResolver, useEditor, useExtension, useKeymap };

package/dist/index.js

@@ -16,7 +16,7 @@ import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePos
 import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
 import { TableHandleColumnMenuRoot, TableHandleColumnMenuTrigger, TableHandleColumnPopup, TableHandleColumnPositioner, TableHandleDragPreview, TableHandleDropIndicator, TableHandleRoot, TableHandleRowMenuRoot, TableHandleRowMenuTrigger, TableHandleRowPopup, TableHandleRowPositioner } from "@prosekit/react/table-handle";
 import { X_POST_MEDIA_CLICK, registerXPost } from "@meowdown/embed/x";
-import { registerYouTubeVideo } from "@meowdown/embed/youtube";
+import { YOUTUBE_VIDEO_CLICK, registerYouTubeVideo } from "@meowdown/embed/youtube";
 import { matchEmbed } from "@meowdown/markdown";
 import { Mark } from "@prosekit/pm/model";
 import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
@@ -1848,7 +1848,7 @@ function findHeadingPosition(doc, fragment) {
 	});
 	return match;
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, embedPaste, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
 	const suppressDocChangeRef = useRef(false);
 	const handleDocChange = useMemo(() => {
 		if (!onDocChange) return;
@@ -1877,6 +1877,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		onFileSaveError,
 		onImageClick,
 		onXPostMediaClick,
+		onYouTubeVideoClick,
 		embedPaste,
 		linkPaste,
 		bulletAfterHeading,
@@ -1905,6 +1906,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		onFileSaveError,
 		onImageClick,
 		onXPostMediaClick,
+		onYouTubeVideoClick,
 		embedPaste,
 		linkPaste,
 		bulletAfterHeading,
@@ -2107,7 +2109,7 @@ const CARET_GLIDE_OFF = { "--meowdown-caret-glide": "0ms" };
 *
 * Callbacks and resolvers should be stable; pass them via `useCallback`.
 */
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, onXPostMediaClick, onYouTubeVideoClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -2234,6 +2236,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			onFileSaveError,
 			onImageClick,
 			onXPostMediaClick,
+			onYouTubeVideoClick,
 			embedPaste,
 			linkPaste,
 			bulletAfterHeading,
@@ -2865,7 +2868,7 @@ const MarkdownBlock = memo(function MarkdownBlock({ node, taskBase, context, ref
 * Callbacks (`onWikilinkClick`, etc.) and resolvers should be stable; pass them via
 * `useCallback` to avoid re-rendering the whole tree.
 */
-function MarkdownView({ markdown, markMode = "hide", frontmatter = false, interactive = true, expandCollapsed = false, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onXPostMediaClick, onFileClick, onTaskClick, className }) {
+function MarkdownView({ markdown, markMode = "hide", frontmatter = false, interactive = true, expandCollapsed = false, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onXPostMediaClick, onYouTubeVideoClick, onFileClick, onTaskClick, className }) {
 	const context = useMemo(() => ({
 		interactive,
 		expandCollapsed,
@@ -2909,11 +2912,15 @@ function MarkdownView({ markdown, markMode = "hide", frontmatter = false, intera
 		};
 	}, [markdown, frontmatter]);
 	const handleXPostMediaClick = interactive ? onXPostMediaClick : void 0;
+	const handleYouTubeVideoClick = interactive ? onYouTubeVideoClick : void 0;
 	const rootRef = useCallback((root) => {
-		if (!handleXPostMediaClick) return;
-		root.addEventListener(X_POST_MEDIA_CLICK, handleXPostMediaClick);
-		return () => root.removeEventListener(X_POST_MEDIA_CLICK, handleXPostMediaClick);
-	}, [handleXPostMediaClick]);
+		if (handleXPostMediaClick) root.addEventListener(X_POST_MEDIA_CLICK, handleXPostMediaClick);
+		if (handleYouTubeVideoClick) root.addEventListener(YOUTUBE_VIDEO_CLICK, handleYouTubeVideoClick);
+		return () => {
+			if (handleXPostMediaClick) root.removeEventListener(X_POST_MEDIA_CLICK, handleXPostMediaClick);
+			if (handleYouTubeVideoClick) root.removeEventListener(YOUTUBE_VIDEO_CLICK, handleYouTubeVideoClick);
+		};
+	}, [handleXPostMediaClick, handleYouTubeVideoClick]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: rootRef,
 		className: clsx("ProseMirror", "meowdown-content", className),
@@ -2993,10 +3000,37 @@ function useLightbox() {
 //#region src/components/lightbox.module.css
 var lightbox_module_default = {
 	"Dialog": "meow_Dialog_VENw2q",
+	"Frame": "meow_Frame_VENw2q",
 	"Image": "meow_Image_VENw2q",
 	"Video": "meow_Video_VENw2q"
 };
 
+//#endregion
+//#region src/components/lightbox-frame.tsx
+/**
+* The embedded page of a lightbox, such as a video player: the largest box of
+* the item's aspect ratio that fits.
+*/
+function LightboxFrame({ item, className, style, ...props }) {
+	const ratio = item.width && item.height ? item.width / item.height : 16 / 9;
+	const frameStyle = {
+		...style,
+		"--meowdown-lightbox-frame-ratio": String(ratio),
+		backgroundImage: item.poster ? `url(${JSON.stringify(item.poster)})` : void 0,
+		viewTransitionName: LIGHTBOX_TRANSITION_NAME
+	};
+	return /* @__PURE__ */ jsx("iframe", {
+		allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen",
+		allowFullScreen: true,
+		referrerPolicy: "strict-origin-when-cross-origin",
+		...props,
+		src: item.src,
+		title: item.title,
+		className: clsx(lightbox_module_default.Frame, className),
+		style: frameStyle
+	});
+}
+
 //#endregion
 //#region src/components/lightbox-image.tsx
 /**
@@ -3036,7 +3070,7 @@ function LightboxRoot({ lightbox, children, className, ...props }) {
 		default: DIALOG_TRANSITION_CLASS,
 		onExit: () => onExited,
 		children: /* @__PURE__ */ jsx("dialog", {
-			"aria-label": item.type === "video" ? "Video preview" : "Image preview",
+			"aria-label": item.type === "image" ? "Image preview" : "Video preview",
 			...props,
 			ref: showModal,
 			className: clsx(lightbox_module_default.Dialog, className),
@@ -3165,4 +3199,4 @@ function WikilinkHoverCard({ children, className }) {
 }
 
 //#endregion
-export { LightboxImage, LightboxRoot, LightboxVideo, MarkdownView, MeowdownEditor, WikilinkHoverCard, useEditor, useExtension, useKeymap, useLightbox };
+export { LightboxFrame, LightboxImage, LightboxRoot, LightboxVideo, MarkdownView, MeowdownEditor, WikilinkHoverCard, useEditor, useExtension, useKeymap, useLightbox };

package/dist/style.css

@@ -1073,6 +1073,7 @@
   position: fixed;
   inset: 0;
   overflow: hidden;
+  container-type: size;
 
   &::backdrop {
     background: none;
@@ -1092,6 +1093,14 @@
   max-height: 100%;
   position: relative;
 }
+
+.meow_Frame_VENw2q {
+  width: min(100cqw, 100cqh * var(--meowdown-lightbox-frame-ratio));
+  aspect-ratio: var(--meowdown-lightbox-frame-ratio);
+  background: #000 center / cover no-repeat;
+  border: 0;
+  display: block;
+}
 .meow_Positioner_HMEwgW {
   z-index: 50;
   width: var(--positioner-width);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.72.0",
+  "version": "0.73.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,8 +22,8 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@meowdown/core": "0.73.0",
-    "@meowdown/embed": "0.1.0",
+    "@meowdown/core": "0.74.1",
+    "@meowdown/embed": "0.2.0",
     "@meowdown/markdown": "0.72.0",
     "@ocavue/utils": "^1.8.0",
     "@post-embed/types": "^0.5.0",