@meowdown/react 0.36.2 → 0.37.0

package/README.md

@@ -60,6 +60,8 @@ Slash menu host items can include `keywords` to match hidden terms without chang
 
 Import both stylesheets: `@meowdown/core/style.css` (the editor theme and variables) and `@meowdown/react/style.css` (the component layout). The core theme is documented in [`@meowdown/core`](https://www.npmjs.com/package/@meowdown/core).
 
+Math (`$E=mc^2$` inline, `$$` blocks, and ` ```math ` fences) is compiled by KaTeX to native MathML.
+
 ## License
 
 MIT

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
-import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkdownCopy, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getVirtualElementFromRange, inlineTextToMarkChunks, isSelectionInTableCell, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
+import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkdownCopy, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getVirtualElementFromRange, inlineTextToMarkChunks, isCodeBlockPreviewHiddenDecoration, 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";
@@ -16,6 +16,27 @@ 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 { Mark } from "@prosekit/pm/model";
 
+//#region src/hooks/use-katex.ts
+/**
+* The lazily loaded KaTeX render function, or `undefined` while it loads (or when
+* `enabled` is false, so a document without math never loads it).
+*/
+function useKaTeX(enabled) {
+	const [katex, setKaTeX] = useState(void 0);
+	useEffect(() => {
+		if (!enabled || katex) return;
+		let cancelled = false;
+		loadKaTeX().then((render) => {
+			if (!cancelled) setKaTeX(() => render);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [enabled, katex]);
+	return katex;
+}
+
+//#endregion
 //#region src/components/code-block-view.module.css
 var code_block_view_module_default = {
 	"CopyButton": "meow_CopyButton_D3j_9q",
@@ -26,6 +47,7 @@ var code_block_view_module_default = {
 	"List": "meow_List_D3j_9q",
 	"Popup": "meow_Popup_D3j_9q",
 	"Positioner": "meow_Positioner_D3j_9q",
+	"Preview": "meow_Preview_D3j_9q",
 	"Root": "meow_Root_D3j_9q",
 	"Search": "meow_Search_D3j_9q",
 	"SearchRow": "meow_SearchRow_D3j_9q",
@@ -68,10 +90,53 @@ function CopyButton({ getText, label, onCopy, className, ...rest }) {
 	});
 }
 
+//#endregion
+//#region src/components/math-render.tsx
+/**
+* KaTeX output rendered into a real element, the same way the editor's
+* `MathMarkView` does. A span host matches KaTeX's own output shape; display
+* mode emits a block-level `math[display="block"]` element.
+*/
+function MathRender(props) {
+	const { katex, formula, displayMode, className, onMouseDown } = props;
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || !katex) return;
+		renderMathInto(katex, element, formula, displayMode);
+	}, [
+		katex,
+		formula,
+		displayMode
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className,
+		contentEditable: false,
+		"data-testid": props["data-testid"],
+		onMouseDown
+	});
+}
+
 //#endregion
 //#region src/components/code-block-view.tsx
 function CodeBlockView(props) {
 	const language = props.node.attrs.language || "";
+	const isMath = language === "math";
+	const code = props.node.textContent;
+	const caretInside = props.decorations.some(isCodeBlockPreviewHiddenDecoration);
+	const katex = useKaTeX(isMath);
+	const showMathPreview = isMath && katex != null;
+	const previewOnly = showMathPreview && !caretInside && code.trim() !== "";
+	const focusSource = (event) => {
+		event.preventDefault();
+		const pos = props.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,
@@ -94,86 +159,98 @@ function CodeBlockView(props) {
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: code_block_view_module_default.Root,
-		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"
+		"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(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,
-			"data-language": language
-		})]
+							]
+						})
+					}) })]
+				}), /* @__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,
+				"data-language": language
+			}),
+			showMathPreview && /* @__PURE__ */ jsx(MathRender, {
+				katex,
+				formula: code,
+				displayMode: true,
+				className: code_block_view_module_default.Preview,
+				"data-testid": "code-block-math-preview",
+				onMouseDown: focusSource
+			})
+		]
 	});
 }
 
 //#endregion
 //#region src/extensions/code-block-view.ts
 function defineCodeBlockView() {
-	return defineReactNodeView({
+	return union(defineReactNodeView({
 		name: "codeBlock",
 		contentAs: "code",
 		component: CodeBlockView
-	});
+	}), defineCodeBlockPreviewPlugin());
 }
 
 //#endregion
@@ -588,7 +665,7 @@ const SCROLL_TOP_MARGIN = 16;
 function closestScrollable(element) {
 	for (let node = element.parentElement; node; node = node.parentElement) {
 		const { overflowY } = getComputedStyle(node);
-		if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node;
+		if ((overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && node.scrollHeight > node.clientHeight) return node;
 	}
 	return document.scrollingElement;
 }
@@ -1026,6 +1103,12 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch }) {
 							kbd: "```",
 							onSelect: () => editor.commands.setCodeBlock()
 						}),
+						/* @__PURE__ */ jsx(SlashMenuItem, {
+							label: "Math",
+							keywords: ["latex"],
+							kbd: "```math",
+							onSelect: () => editor.commands.insertMarkdown("```math\n```")
+						}),
 						/* @__PURE__ */ jsx(SlashMenuItem, {
 							label: "Table",
 							onSelect: () => editor.commands.insertTable({
@@ -1875,6 +1958,42 @@ function CodeBlock({ code, language }) {
 		children: /* @__PURE__ */ jsx("code", { children: tokens.length > 0 ? renderTokens(code, tokens) : code })
 	});
 }
+/**
+* Mirrors the editor's `MathMarkView` DOM: a KaTeX preview next to the source
+* text, flipped by the same mode CSS (the read-only view has no caret, so the
+* preview always shows in hide/focus modes).
+*/
+function MathView(props) {
+	const { formula, children } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "md-math-view",
+		children: [/* @__PURE__ */ jsx(MathRender, {
+			katex: useKaTeX(true),
+			formula,
+			displayMode: false,
+			className: "md-math-view-preview",
+			"data-testid": "math-preview"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "md-math-view-content",
+			children
+		})]
+	});
+}
+/** A `math` code block: the rendered formula alone, the source while KaTeX loads. */
+function MathCodeBlock({ code }) {
+	const katex = useKaTeX(true);
+	if (!katex) return /* @__PURE__ */ jsx(CodeBlock, {
+		code,
+		language: "math"
+	});
+	return /* @__PURE__ */ jsx(MathRender, {
+		katex,
+		formula: code,
+		displayMode: true,
+		className: code_block_view_module_default.Preview,
+		"data-testid": "code-block-math-preview"
+	});
+}
 /** Wrap inline `children` in one mark, special-casing the view/link marks. */
 function wrapMark(mark, children, context) {
 	switch (mark.type.name) {
@@ -1897,6 +2016,13 @@ function wrapMark(mark, children, context) {
 				children
 			});
 		}
+		case "mdMath": {
+			const attrs = mark.attrs;
+			return /* @__PURE__ */ jsx(MathView, {
+				formula: attrs.formula,
+				children
+			});
+		}
 		case "mdLinkText": {
 			const attrs = mark.attrs;
 			const handleClick = context.onLinkClick ? (event) => context.onLinkClick?.({
@@ -1955,6 +2081,7 @@ function renderBlock(node, key, context) {
 	if (node.type.name === "codeBlock") {
 		const attrs = node.attrs;
 		const language = typeof attrs.language === "string" ? attrs.language : "";
+		if (language === "math") return /* @__PURE__ */ jsx(MathCodeBlock, { code: node.textContent }, key);
 		return /* @__PURE__ */ jsx(CodeBlock, {
 			code: node.textContent,
 			language

package/dist/style.css

@@ -2,6 +2,20 @@
   position: relative;
 }
 
+.meow_Root_D3j_9q[data-preview] pre, .meow_Root_D3j_9q[data-preview] .meow_Toolbar_D3j_9q {
+  display: none;
+}
+
+.meow_Preview_D3j_9q {
+  text-align: center;
+  cursor: text;
+  -webkit-user-select: none;
+  user-select: none;
+  padding: .25rem 0;
+  display: block;
+  overflow-x: auto;
+}
+
 .meow_Toolbar_D3j_9q {
   z-index: 1;
   user-select: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.36.2",
+  "version": "0.37.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@prosekit/react": "^0.8.0-beta.17",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.36.2"
+    "@meowdown/core": "0.37.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",