@meowdown/react 0.58.1 → 0.58.3

package/dist/index.d.ts

@@ -13,6 +13,11 @@ type SelectionHint = SelectionJSON$1 | 'start' | 'end';
  * editor's coordinate space and are not portable across editors.
  */
 type EditorStateSnapshot = [markdown: string, selection: SelectionJSON$1];
+/**
+ * The imperative API of a mounted editor: read and write the document,
+ * move the selection, and drive the selection menu and pending replacements
+ * from outside React.
+ */
 interface EditorHandle {
   /**
    * Reconciles pending native input, then serializes the current document to
@@ -398,7 +403,13 @@ interface EditorProps {
   /** Nodes rendered inside the editor's ProseKit context. */
   children?: ReactNode;
 }
-declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }: EditorProps): import("react").JSX.Element;
+/**
+ * A hybrid live-preview Markdown editor: the document stays Markdown text,
+ * rendered in place as rich content.
+ *
+ * Callbacks and resolvers should be stable; pass them via `useCallback`.
+ */
+declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }: EditorProps): ReactElement;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /** Payload for {@link TaskClickHandler}. */

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
-import { Fragment, cloneElement, createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineSubstitution, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isNodeOfType, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, renderMathInto } from "@meowdown/core";
+import { Fragment, cloneElement, createElement, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isNodeOfType, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, renderMathInto } 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";
@@ -35,7 +35,7 @@ function useBeautifulMermaid(enabled) {
 		let cancelled = false;
 		loadBeautifulMermaid().then((loadedRenderer) => {
 			if (!cancelled) setRenderer(() => loadedRenderer);
-		}).catch(() => {});
+		});
 		return () => {
 			cancelled = true;
 		};
@@ -131,7 +131,7 @@ function MathRender(props) {
 	const ref = useRef(null);
 	useLayoutEffect(() => {
 		const element = ref.current;
-		if (!element || !katex) return;
+		if (!element) return;
 		renderMathInto(katex, element, formula, displayMode);
 	}, [
 		katex,
@@ -200,122 +200,46 @@ function MermaidRender(props) {
 //#endregion
 //#region src/components/code-block-view.tsx
 function CodeBlockView(props) {
-	const language = props.node.attrs.language || "";
+	const { node, view, getPos, decorations, selected, setAttrs, contentRef } = props;
+	const language = node.attrs.language || "";
 	const isMath = language === "math";
 	const isMermaid = language === "mermaid";
-	const code = props.node.textContent;
-	const caretInside = props.decorations.some(isCodeBlockPreviewHiddenDecoration);
+	const code = node.textContent;
+	const caretInside = decorations.some(isCodeBlockPreviewHiddenDecoration);
 	const katex = useKaTeX(isMath);
 	const mermaid = useBeautifulMermaid(isMermaid);
 	const showMathPreview = isMath && katex != null;
 	const showMermaidPreview = isMermaid && mermaid != null;
-	const previewOnly = (showMathPreview || showMermaidPreview) && !caretInside && code.trim() !== "";
-	const focusSource = (event) => {
+	const showPreview = showMathPreview || showMermaidPreview;
+	const previewCode = useDeferredValue(showPreview ? code : "");
+	const previewOnly = showPreview && !caretInside && code.trim() !== "";
+	const focusSource = useCallback((event) => {
 		event.preventDefault();
-		const pos = props.getPos();
+		const pos = getPos();
 		if (pos == null) return;
-		const { view } = props;
 		const selection = TextSelection.near(view.state.doc.resolve(pos + 1), 1);
 		view.dispatch(view.state.tr.setSelection(selection));
 		view.focus();
-	};
-	const selected = useMemo(() => {
-		return codeBlockLanguages.find((item) => item.value === language) ?? {
-			value: language,
-			label: language
-		};
-	}, [language]);
-	const [query, setQuery] = useState("");
-	const [comboboxOpen, setComboboxOpen] = useState(false);
-	const itemsForView = useMemo(() => {
-		const value = query.trim();
-		if (!value) return codeBlockLanguages;
-		const lowercased = value.toLowerCase();
-		return codeBlockLanguages.some((item) => item.value.toLowerCase() === lowercased || item.label.toLowerCase() === lowercased) ? codeBlockLanguages : [...codeBlockLanguages, {
-			value,
-			label: `Use "${value}"`
-		}];
-	}, [query]);
-	const setLanguage = (item) => {
-		props.setAttrs({ language: item?.value ?? "" });
-	};
+	}, [view, getPos]);
+	const setLanguage = useCallback((language) => {
+		setAttrs({ language });
+	}, [setAttrs]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: code_block_view_module_default.Root,
 		"data-preview": previewOnly || void 0,
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: code_block_view_module_default.Toolbar,
-				contentEditable: false,
-				"data-open": comboboxOpen || void 0,
-				children: [/* @__PURE__ */ jsxs(Combobox.Root, {
-					items: itemsForView,
-					value: selected,
-					onValueChange: setLanguage,
-					inputValue: query,
-					onInputValueChange: setQuery,
-					onOpenChange: (open) => {
-						if (open) setComboboxOpen(true);
-						else setQuery("");
-					},
-					onOpenChangeComplete: (open) => {
-						if (!open) setComboboxOpen(false);
-					},
-					children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
-						className: code_block_view_module_default.Trigger,
-						"data-testid": "code-block-language",
-						children: [/* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" }), /* @__PURE__ */ jsx(Combobox.Icon, {
-							className: code_block_view_module_default.TriggerIcon,
-							children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
-						})]
-					}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-						className: code_block_view_module_default.Positioner,
-						sideOffset: 4,
-						children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-							className: code_block_view_module_default.Popup,
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: code_block_view_module_default.SearchRow,
-									children: /* @__PURE__ */ jsx(Combobox.Input, {
-										className: code_block_view_module_default.Search,
-										placeholder: "Search or type a language",
-										"data-testid": "code-block-language-search"
-									})
-								}),
-								/* @__PURE__ */ jsx(Combobox.Empty, {
-									className: code_block_view_module_default.Empty,
-									children: "No languages found."
-								}),
-								/* @__PURE__ */ jsx(Combobox.List, {
-									className: code_block_view_module_default.List,
-									children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
-										value: item,
-										className: code_block_view_module_default.Item,
-										children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-											className: code_block_view_module_default.ItemIndicator,
-											children: /* @__PURE__ */ jsx(CheckIcon, {})
-										}), /* @__PURE__ */ jsx("span", {
-											className: code_block_view_module_default.ItemText,
-											children: item.label
-										})]
-									}, item.label)
-								})
-							]
-						})
-					}) })]
-				}), /* @__PURE__ */ jsx(CopyButton, {
-					getText: () => props.node.textContent,
-					label: "Copy code",
-					className: code_block_view_module_default.CopyButton,
-					"data-testid": "code-block-copy"
-				})]
-			}),
 			/* @__PURE__ */ jsx("pre", {
-				ref: props.contentRef,
+				ref: contentRef,
 				"data-language": language
 			}),
+			selected ? null : /* @__PURE__ */ jsx(CodeBlockToolbar, {
+				code,
+				language,
+				setLanguage
+			}),
 			showMathPreview && /* @__PURE__ */ jsx(MathRender, {
 				katex,
-				formula: code,
+				formula: previewCode,
 				displayMode: true,
 				className: code_block_view_module_default.Preview,
 				"data-testid": "code-block-math-preview",
@@ -323,7 +247,7 @@ function CodeBlockView(props) {
 			}),
 			showMermaidPreview && /* @__PURE__ */ jsx(MermaidRender, {
 				renderer: mermaid,
-				source: code,
+				source: previewCode,
 				className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
 				"data-testid": "code-block-mermaid-preview",
 				onMouseDown: focusSource
@@ -331,6 +255,91 @@ function CodeBlockView(props) {
 		]
 	});
 }
+function CodeBlockToolbar({ code, language, setLanguage }) {
+	const selected = useMemo(() => {
+		return codeBlockLanguages.find((item) => item.value === language) ?? {
+			value: language,
+			label: language
+		};
+	}, [language]);
+	const [query, setQuery] = useState("");
+	const [comboboxOpen, setComboboxOpen] = useState(false);
+	const itemsForView = useMemo(() => {
+		const value = query.trim();
+		if (!value) return codeBlockLanguages;
+		const lowercased = value.toLowerCase();
+		return codeBlockLanguages.some((item) => item.value.toLowerCase() === lowercased || item.label.toLowerCase() === lowercased) ? codeBlockLanguages : [...codeBlockLanguages, {
+			value,
+			label: `Use "${value}"`
+		}];
+	}, [query]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: code_block_view_module_default.Toolbar,
+		contentEditable: false,
+		"data-open": comboboxOpen || void 0,
+		children: [/* @__PURE__ */ jsxs(Combobox.Root, {
+			items: itemsForView,
+			value: selected,
+			onValueChange: (item) => setLanguage(item?.value ?? ""),
+			inputValue: query,
+			onInputValueChange: setQuery,
+			onOpenChange: (open) => {
+				if (open) setComboboxOpen(true);
+				else setQuery("");
+			},
+			onOpenChangeComplete: (open) => {
+				if (!open) setComboboxOpen(false);
+			},
+			children: [/* @__PURE__ */ jsxs(Combobox.Trigger, {
+				className: code_block_view_module_default.Trigger,
+				"data-testid": "code-block-language",
+				children: [/* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" }), /* @__PURE__ */ jsx(Combobox.Icon, {
+					className: code_block_view_module_default.TriggerIcon,
+					children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+				})]
+			}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				className: code_block_view_module_default.Positioner,
+				sideOffset: 4,
+				children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+					className: code_block_view_module_default.Popup,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: code_block_view_module_default.SearchRow,
+							children: /* @__PURE__ */ jsx(Combobox.Input, {
+								className: code_block_view_module_default.Search,
+								placeholder: "Search or type a language",
+								"data-testid": "code-block-language-search"
+							})
+						}),
+						/* @__PURE__ */ jsx(Combobox.Empty, {
+							className: code_block_view_module_default.Empty,
+							children: "No languages found."
+						}),
+						/* @__PURE__ */ jsx(Combobox.List, {
+							className: code_block_view_module_default.List,
+							children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
+								value: item,
+								className: code_block_view_module_default.Item,
+								children: [/* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+									className: code_block_view_module_default.ItemIndicator,
+									children: /* @__PURE__ */ jsx(CheckIcon, {})
+								}), /* @__PURE__ */ jsx("span", {
+									className: code_block_view_module_default.ItemText,
+									children: item.label
+								})]
+							}, item.label)
+						})
+					]
+				})
+			}) })]
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			getText: () => code,
+			label: "Copy code",
+			className: code_block_view_module_default.CopyButton,
+			"data-testid": "code-block-copy"
+		})]
+	});
+}
 
 //#endregion
 //#region src/extensions/code-block-view.ts
@@ -382,7 +391,7 @@ function DropIndicator$1() {
 
 //#endregion
 //#region src/components/editor-extensions.tsx
-function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, placeholder, readOnly, wikilinkEnabled, spellCheck }) {
+function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, placeholder, readOnly, wikilinkEnabled, spellCheck, editorClassName }) {
 	const editor = useEditor$1();
 	useEffect(() => {
 		editor.commands.setMarkMode(markMode);
@@ -460,6 +469,9 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 	useExtension$1(useMemo(() => {
 		return spellCheck == null ? null : defineSpellCheckPlugin(spellCheck);
 	}, [spellCheck]));
+	useExtension$1(useMemo(() => {
+		return editorClassName ? defineViewAttributes({ class: editorClassName }) : null;
+	}, [editorClassName]));
 	return null;
 }
 
@@ -1815,10 +1827,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 	return /* @__PURE__ */ jsxs(ProseKit, {
 		editor,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: editor.mount,
-				className: clsx("meowdown-content", editorClassName)
-			}),
+			/* @__PURE__ */ jsx("div", { ref: editor.mount }),
 			/* @__PURE__ */ jsx(EditorExtensions, {
 				markMode,
 				onDocChange: handleDocChange,
@@ -1839,7 +1848,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				placeholder,
 				readOnly,
 				wikilinkEnabled: !!onWikilinkSearch,
-				spellCheck
+				spellCheck,
+				editorClassName
 			}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
 			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
@@ -1875,6 +1885,12 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 //#endregion
 //#region src/components/editor.tsx
 const CARET_GLIDE_OFF = { "--meowdown-caret-glide": "0ms" };
+/**
+* A hybrid live-preview Markdown editor: the document stays Markdown text,
+* rendered in place as rich content.
+*
+* 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, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
@@ -2313,10 +2329,12 @@ function CodeBlock({ code, language }) {
 */
 function MathView(props) {
 	const { formula, children } = props;
+	const katex = useKaTeX(true);
+	if (!katex) return /* @__PURE__ */ jsx("span", { children: formula });
 	return /* @__PURE__ */ jsxs("span", {
 		className: "md-math-view",
 		children: [/* @__PURE__ */ jsx(MathRender, {
-			katex: useKaTeX(true),
+			katex,
 			formula,
 			displayMode: false,
 			className: "md-math-view-preview",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.58.1",
+  "version": "0.58.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.24.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.58.1"
+    "@meowdown/core": "0.58.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",