@meowdown/react 0.73.1 → 0.75.0

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, YouTubeVideoClickHandler, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
+import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, ImageUrlResolver, 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
@@ -122,7 +122,7 @@ interface EditorHandle {
    * Escape hatch: the underlying ProseKit editor, or `undefined` when the
    * handle does not wrap one.
    */
-  readonly editor: TypedEditor | undefined;
+  getEditor: () => TypedEditor | undefined;
 }
 /**
  * One row of host items in the slash menu. The host ranks the rows; the menu does not re-sort.
@@ -372,8 +372,10 @@ interface EditorProps {
   onExitBoundary?: ExitBoundaryHandler;
   /**
    * Maps an image `src` to a displayable URL, or `undefined` to skip that image.
-   * Defaults to showing http(s) URLs as-is. Pass a stable function (e.g. from
-   * `useCallback`).
+   * May return a `Promise` when the answer depends on data that has not loaded
+   * yet; the image appears once it resolves, in a box of its persisted size
+   * when one exists. Defaults to showing http(s) URLs as-is. Pass a stable
+   * function (e.g. from `useCallback`).
    */
   resolveImageUrl?: ImageOptions['resolveImageUrl'];
   /**
@@ -631,9 +633,11 @@ interface MarkdownViewProps {
    */
   expandCollapsed?: boolean;
   /**
-   * Map an image `src` to a displayable URL, or `undefined` to skip it.
+   * Map an image `src` to a displayable URL, or `undefined` to skip it. May
+   * return a `Promise`; the image appears once it resolves, in a box of its
+   * persisted size when both dimensions are known.
    */
-  resolveImageUrl?: (src: string) => string | undefined;
+  resolveImageUrl?: ImageUrlResolver;
   /**
    * Claim a `[label](url)` link as a file pill instead of a regular link.
    * Must be pure; return `false` for links that should render normally.

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
-import { Fragment, ViewTransition, cloneElement, createElement, memo, startTransition, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
+import { Fragment, ViewTransition, cloneElement, createElement, memo, startTransition, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, dismissLinkHover, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
@@ -12,6 +12,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
 import { DropIndicator } from "@prosekit/react/drop-indicator";
 import { Popover } from "@base-ui/react/popover";
+import { queueExtension } from "@prosekit/web";
 import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from "@prosekit/react/autocomplete";
 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";
@@ -422,6 +423,44 @@ function EditorExtensions({ config, searchQuery, onDocChange, onSearchChange })
 	return null;
 }
 
+//#endregion
+//#region src/components/link-menu-state.ts
+const LINK_MENU_IDLE = { kind: "idle" };
+/**
+* What the popup renders: the open view, or the closing one during the exit
+* animation.
+*/
+function getLinkMenuView(state) {
+	switch (state.kind) {
+		case "idle": return;
+		case "closing": return state.view;
+		default: return state;
+	}
+}
+function reduceLinkMenu(state, event) {
+	switch (event.type) {
+		case "hover":
+			if (state.kind === "edit") return state;
+			if (event.link) return {
+				kind: "preview",
+				link: event.link
+			};
+			return state.kind === "preview" ? {
+				kind: "closing",
+				view: state
+			} : state;
+		case "edit": return {
+			kind: "edit",
+			edit: event.edit
+		};
+		case "close": return state.kind === "preview" || state.kind === "edit" ? {
+			kind: "closing",
+			view: state
+		} : state;
+		case "closed": return state.kind === "closing" ? LINK_MENU_IDLE : state;
+	}
+}
+
 //#endregion
 //#region src/components/link-menu.module.css
 var link_menu_module_default = {
@@ -735,41 +774,39 @@ function LinkEditContent({ edit, resolveLinkPreview, onSubmit, onRemove }) {
 }
 function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = false }) {
 	const editor = useEditor$1();
-	const [infoOpen, setInfoOpen] = useState(false);
-	const [editOpen, setEditOpen] = useState(false);
-	const [link, setLink] = useState();
-	const [edit, setEdit] = useState();
+	const [state, dispatch] = useReducer(reduceLinkMenu, LINK_MENU_IDLE);
 	const isPointerOverPopupRef = useRef(false);
-	const linkHoverExtension = useMemo(() => {
-		return defineLinkHoverHandler((nextHit) => {
-			setInfoOpen(nextHit != null);
-			if (nextHit) setLink(nextHit.payload);
-		}, { canLeave: () => !isPointerOverPopupRef.current });
-	}, []);
-	useExtension$1(linkHoverExtension);
-	const linkEditExtension = useMemo(() => {
-		return readOnly ? null : defineLinkEditKeymap((options) => {
-			setEdit(options);
-			setEditOpen(true);
-			setInfoOpen(false);
-		});
-	}, [readOnly]);
-	useExtension$1(linkEditExtension);
+	useEffect(() => {
+		const canLeave = () => !isPointerOverPopupRef.current;
+		const linkHoverExtension = defineLinkHoverHandler((hit) => dispatch({
+			type: "hover",
+			link: hit?.payload
+		}), { canLeave });
+		return queueExtension(editor, linkHoverExtension);
+	}, [editor]);
+	useEffect(() => {
+		if (readOnly) return;
+		const linkEditExtension = defineLinkEditKeymap((edit) => dispatch({
+			type: "edit",
+			edit
+		}));
+		return queueExtension(editor, linkEditExtension);
+	}, [editor, readOnly]);
 	const handlePointerHover = useCallback((over) => {
 		isPointerOverPopupRef.current = over;
 	}, []);
-	const closeInfo = useCallback(() => {
+	const close = useCallback(() => {
 		isPointerOverPopupRef.current = false;
-		setInfoOpen(false);
-	}, []);
-	const closeEdit = useCallback(() => {
-		setEditOpen(false);
-		closeInfo();
-	}, [closeInfo]);
+		dismissLinkHover(editor.state);
+		dispatch({ type: "close" });
+	}, [editor]);
+	const view = getLinkMenuView(state);
+	const edit = view?.kind === "edit" ? view.edit : void 0;
+	const link = view?.kind === "preview" ? view.link : void 0;
 	const handleEditRemove = useCallback(() => {
 		editor.commands.removeLink();
-		closeEdit();
-	}, [editor, closeEdit]);
+		close();
+	}, [editor, close]);
 	const handleEditSubmit = useCallback((text, href) => {
 		if (!edit) return;
 		if (edit.link) editor.commands.updateLink({
@@ -781,52 +818,52 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 			text,
 			href
 		});
-		closeEdit();
+		close();
 	}, [
 		edit,
 		editor,
-		closeEdit
+		close
 	]);
 	const mutable = link != null && !readOnly && link.form !== "reference";
 	const linkText = useMemo(() => link ? getLinkText(link) : "", [link]);
 	const editLink = useCallback(() => {
 		if (!link) return;
 		selectLinkUnit(editor, link);
-		setEdit({
-			from: link.unit.from,
-			to: link.unit.to,
-			link,
-			text: linkText
+		dispatch({
+			type: "edit",
+			edit: {
+				from: link.unit.from,
+				to: link.unit.to,
+				link,
+				text: linkText
+			}
 		});
-		setEditOpen(true);
-		closeInfo();
 	}, [
 		link,
 		editor,
-		linkText,
-		closeInfo
+		linkText
 	]);
 	const removeLink = useCallback(() => {
 		if (!link) return;
 		selectLinkUnit(editor, link);
 		editor.commands.removeLink();
-		closeInfo();
+		close();
 	}, [
 		link,
 		editor,
-		closeInfo
+		close
 	]);
 	const handleUseTitle = useMemo(() => {
 		if (!link || !mutable || !isLinkTextForHref(linkText, link.href)) return;
 		return (title) => {
 			selectLinkUnit(editor, link);
 			editor.commands.updateLink({ text: title });
-			closeInfo();
+			close();
 		};
 	}, [
 		link,
 		editor,
-		closeInfo,
+		close,
 		linkText,
 		mutable
 	]);
@@ -836,24 +873,21 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 		if (!range) return;
 		return getVirtualElementFromRange(editor.view, range);
 	}, [range, editor]);
-	const editing = edit != null && !readOnly;
 	return /* @__PURE__ */ jsx(LinkPopover, {
 		anchor,
-		open: editing ? editOpen : infoOpen,
-		onClose: editing ? closeEdit : closeInfo,
+		open: state.kind === "preview" || state.kind === "edit",
+		onClose: close,
 		onCloseComplete: () => {
-			if (editing) {
-				setEdit(void 0);
-				editor.focus();
-			} else if (!infoOpen) setLink(void 0);
+			if (edit) editor.focus();
+			dispatch({ type: "closed" });
 		},
 		onPopupHover: handlePointerHover,
-		children: editing ? /* @__PURE__ */ jsx(LinkEditContent, {
+		children: edit ? /* @__PURE__ */ jsx(LinkEditContent, {
 			edit,
 			resolveLinkPreview,
 			onRemove: edit.link ? handleEditRemove : void 0,
 			onSubmit: handleEditSubmit
-		}) : link ? /* @__PURE__ */ jsx(LinkInfoContent, {
+		}, `${edit.from}:${edit.to}`) : link ? /* @__PURE__ */ jsx(LinkInfoContent, {
 			href: link.href,
 			previewState,
 			onLinkClick,
@@ -1706,6 +1740,7 @@ function TagMenu({ onTagSearch }) {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "tag-menu",
 				children: [items.map((item) => /* @__PURE__ */ jsxs(AutocompleteItem, {
+					value: item.tag,
 					className: autocomplete_menu_module_default.Item,
 					onSelect: () => {
 						editor.commands.insertText({ text: `#${item.tag} ` });
@@ -1782,6 +1817,7 @@ function WikilinkMenu({ onWikilinkSearch }) {
 				className: autocomplete_menu_module_default.Popup,
 				"data-testid": "wikilink-menu",
 				children: [items.map((item) => /* @__PURE__ */ jsxs(AutocompleteItem, {
+					value: item.target,
 					className: autocomplete_menu_module_default.Item,
 					onSelect: () => {
 						editor.commands.insertText({ text: `[[${item.target}]]` });
@@ -1970,8 +2006,10 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			suppressDocChangeRef.current = true;
 			try {
 				editor.view.dispatch(transaction);
-			} finally {
 				suppressDocChangeRef.current = false;
+			} catch (error) {
+				suppressDocChangeRef.current = false;
+				throw error;
 			}
 		}
 		function setState(markdown, selection) {
@@ -2048,7 +2086,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			discardPendingReplacement,
 			findNext,
 			findPrevious,
-			editor
+			getEditor: () => editor
 		};
 	}, [
 		editor,
@@ -2056,11 +2094,14 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		hasSelectionMenu,
 		openSelectionMenu
 	]);
+	const mount = useCallback((element) => {
+		return editor.mount(element);
+	}, [editor]);
 	return /* @__PURE__ */ jsxs(ProseKit, {
 		editor,
 		children: [
 			/* @__PURE__ */ jsx(VirtualCaret, {}),
-			/* @__PURE__ */ jsx("div", { ref: editor.mount }),
+			/* @__PURE__ */ jsx("div", { ref: mount }),
 			/* @__PURE__ */ jsx(EditorExtensions, {
 				config,
 				searchQuery,
@@ -2081,7 +2122,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				onLinkCopy,
 				resolveLinkPreview,
 				readOnly
-			}),
+			}, String(readOnly)),
 			onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),
 			onWikilinkSearch && /* @__PURE__ */ jsx(WikilinkMenu, { onWikilinkSearch }),
 			onSelectionMenuSearch && !readOnly && /* @__PURE__ */ jsx(SelectionMenu, {
@@ -2177,6 +2218,9 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 		function findPrevious() {
 			childRef.current?.findPrevious();
 		}
+		function getEditor() {
+			return childRef.current?.getEditor();
+		}
 		return {
 			getMarkdown,
 			setMarkdown,
@@ -2197,9 +2241,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			discardPendingReplacement,
 			findNext,
 			findPrevious,
-			get editor() {
-				return childRef.current?.editor;
-			}
+			getEditor
 		};
 	}, []);
 	return /* @__PURE__ */ jsx("div", {
@@ -2256,6 +2298,37 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 	});
 }
 
+//#endregion
+//#region src/hooks/use-maybe-promise.ts
+/**
+* The settled value of `input`: `input` itself when it is not a `Promise`,
+* otherwise `undefined` until it resolves. A rejection stays `undefined` and is
+* reported with `console.warn`, since the caller has no other way to see it. A
+* new `input` discards the previous `Promise`'s result at once, so a stale
+* value never shows for a newer input. Callers memoize `input`, or a fresh
+* `Promise` on every render never settles.
+*/
+function useMaybePromise(input) {
+	const [settled, setSettled] = useState(null);
+	useEffect(() => {
+		if (!(input instanceof Promise)) return;
+		let active = true;
+		input.then((value) => {
+			if (active) setSettled({
+				input,
+				value
+			});
+		}, (error) => {
+			if (active) console.warn("[meowdown] useMaybePromise input rejected:", error);
+		});
+		return () => {
+			active = false;
+		};
+	}, [input]);
+	if (!(input instanceof Promise)) return input;
+	return settled?.input === input ? settled.value : void 0;
+}
+
 //#endregion
 //#region src/components/attributes-to-props.ts
 const UNCONTROLLED_COMPONENT_ATTRIBUTES = ["checked", "value"];
@@ -2412,8 +2485,14 @@ function PostEmbed(props) {
 	});
 }
 function ImagePreview(props) {
-	const { src, alt, width, snapshot, resolveImageUrl, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onImageClick, interactive } = props;
+	const { src, alt, width, height, snapshot, resolveImageUrl, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onImageClick, interactive } = props;
 	const kind = matchEmbed(src);
+	const resolved = useMemo(() => kind ? void 0 : (resolveImageUrl ?? defaultResolveImageUrl)(src), [
+		kind,
+		resolveImageUrl,
+		src
+	]);
+	const url = useMaybePromise(resolved);
 	if (kind) {
 		if (!interactive) return null;
 		return /* @__PURE__ */ jsx(PostEmbed, {
@@ -2426,8 +2505,23 @@ function ImagePreview(props) {
 			resolveYouTubeVideo: resolveYouTubeVideo ?? defaultResolveYouTubeVideo
 		}, src);
 	}
-	const url = (resolveImageUrl ?? defaultResolveImageUrl)(src);
-	if (!url) return null;
+	if (!url) {
+		if (resolved instanceof Promise && width != null && height != null) return /* @__PURE__ */ jsx("span", {
+			className: "md-image-view-preview md-atom-view-preview",
+			"data-testid": "image-preview",
+			contentEditable: false,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "md-image-resizable",
+				"data-testid": "image-resizable",
+				"data-loading": "",
+				style: {
+					width: `${width}px`,
+					height: `${height}px`
+				}
+			})
+		});
+		return null;
+	}
 	return /* @__PURE__ */ jsx("span", {
 		className: "md-image-view-preview md-atom-view-preview",
 		"data-testid": "image-preview",
@@ -2450,13 +2544,14 @@ function ImagePreview(props) {
 	});
 }
 function ImageView(props) {
-	const { src, alt, width, snapshot, context, children } = props;
+	const { src, alt, width, height, snapshot, context, children } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		className: "md-image-view md-atom-view",
 		children: [/* @__PURE__ */ jsx(ImagePreview, {
 			src,
 			alt,
 			width,
+			height,
 			snapshot,
 			resolveImageUrl: context.resolveImageUrl,
 			resolveXPost: context.resolveXPost,
@@ -2558,27 +2653,8 @@ function renderTokens(code, tokens) {
 	return out;
 }
 function CodeBlock({ code, language }) {
-	const syncTokens = useMemo(() => {
-		const result = getCodeTokens(code, language);
-		return Array.isArray(result) ? result : null;
-	}, [code, language]);
-	const [asyncTokens, setAsyncTokens] = useState(null);
-	useEffect(() => {
-		if (syncTokens) return;
-		let active = true;
-		const result = getCodeTokens(code, language);
-		if (!Array.isArray(result)) result.then((loaded) => {
-			if (active) setAsyncTokens(loaded);
-		});
-		return () => {
-			active = false;
-		};
-	}, [
-		code,
-		language,
-		syncTokens
-	]);
-	const tokens = syncTokens ?? asyncTokens ?? [];
+	const result = useMemo(() => getCodeTokens(code, language), [code, language]);
+	const tokens = useMaybePromise(result) ?? [];
 	return /* @__PURE__ */ jsx("pre", {
 		"data-language": language || void 0,
 		children: /* @__PURE__ */ jsx("code", { children: tokens.length > 0 ? renderTokens(code, tokens) : code })
@@ -2657,6 +2733,7 @@ function wrapMark(mark, children, context) {
 				src: attrs.src,
 				alt: attrs.alt,
 				width: attrs.width,
+				height: attrs.height,
 				snapshot: attrs.snapshot,
 				context,
 				children

package/dist/style.css

@@ -319,7 +319,9 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    transition: none;
+    &, &[data-closed] {
+      transition: none;
+    }
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.73.1",
+  "version": "0.75.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@meowdown/core": "0.74.1",
+    "@meowdown/core": "0.75.0",
     "@meowdown/embed": "0.2.0",
     "@meowdown/markdown": "0.72.0",
     "@ocavue/utils": "^1.8.0",
@@ -30,6 +30,7 @@
     "@prosekit/core": "^0.13.3",
     "@prosekit/pm": "^0.1.20",
     "@prosekit/react": "^0.8.3",
+    "@prosekit/web": "^0.9.3",
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",