@meowdown/react 0.82.1 → 0.82.3

package/dist/index.js

@@ -230,7 +230,7 @@ function _temp$4(event) {
 * mode emits a block-level `math[display="block"]` element.
 */
 function MathRender(props) {
-	const $ = c(9);
+	const $ = c(10);
 	const { katex, formula, displayMode, className, onMouseDown } = props;
 	const ref = useRef(null);
 	let t0;
@@ -257,21 +257,24 @@ function MathRender(props) {
 	}
 	useLayoutEffect(t0, t1);
 	const t2 = props["data-testid"];
-	let t3;
-	if ($[5] !== className || $[6] !== onMouseDown || $[7] !== t2) {
-		t3 = /* @__PURE__ */ jsx("span", {
+	const t3 = props["data-scroll-x"];
+	let t4;
+	if ($[5] !== className || $[6] !== onMouseDown || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
 			ref,
 			className,
 			contentEditable: false,
 			"data-testid": t2,
+			"data-scroll-x": t3,
 			onMouseDown
 		});
 		$[5] = className;
 		$[6] = onMouseDown;
 		$[7] = t2;
 		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 }
 
 // src/components/mermaid-render.tsx
@@ -298,7 +301,7 @@ function renderMermaid(renderer, source) {
 	}
 }
 function MermaidRender(props) {
-	const $ = c(16);
+	const $ = c(18);
 	const { renderer, source, className, onMouseDown } = props;
 	let t0;
 	if ($[0] !== renderer || $[1] !== source) {
@@ -328,13 +331,15 @@ function MermaidRender(props) {
 	useLayoutEffect(t1, t2);
 	if (output.error) {
 		const t3 = props["data-testid"];
-		let t4;
-		if ($[7] !== className || $[8] !== onMouseDown || $[9] !== output.error || $[10] !== t3) {
-			t4 = /* @__PURE__ */ jsx("span", {
+		const t4 = props["data-scroll-x"];
+		let t5;
+		if ($[7] !== className || $[8] !== onMouseDown || $[9] !== output.error || $[10] !== t3 || $[11] !== t4) {
+			t5 = /* @__PURE__ */ jsx("span", {
 				className,
 				contentEditable: false,
 				"data-error": true,
 				"data-testid": t3,
+				"data-scroll-x": t4,
 				onMouseDown,
 				children: output.error
 			}, "error");
@@ -343,25 +348,29 @@ function MermaidRender(props) {
 			$[9] = output.error;
 			$[10] = t3;
 			$[11] = t4;
-		} else t4 = $[11];
-		return t4;
+			$[12] = t5;
+		} else t5 = $[12];
+		return t5;
 	}
 	const t3 = props["data-testid"];
-	let t4;
-	if ($[12] !== className || $[13] !== onMouseDown || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	const t4 = props["data-scroll-x"];
+	let t5;
+	if ($[13] !== className || $[14] !== onMouseDown || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx("span", {
 			ref,
 			className,
 			contentEditable: false,
 			"data-testid": t3,
+			"data-scroll-x": t4,
 			onMouseDown
 		}, "svg");
-		$[12] = className;
-		$[13] = onMouseDown;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	return t4;
+		$[13] = className;
+		$[14] = onMouseDown;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
 }
 
 // src/components/code-block-view.tsx
@@ -425,6 +434,7 @@ function CodeBlockView(props) {
 		t6 = /* @__PURE__ */ jsx("pre", {
 			ref: contentRef,
 			"data-language": language,
+			"data-scroll-x": true,
 			...NON_PROSE_PROPS
 		});
 		$[11] = contentRef;
@@ -452,6 +462,7 @@ function CodeBlockView(props) {
 			displayMode: true,
 			className: code_block_view_module_default.Preview,
 			"data-testid": "code-block-math-preview",
+			"data-scroll-x": true,
 			onMouseDown: focusSource
 		});
 		$[19] = focusSource;
@@ -467,6 +478,7 @@ function CodeBlockView(props) {
 			source: previewCode,
 			className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
 			"data-testid": "code-block-mermaid-preview",
+			"data-scroll-x": true,
 			onMouseDown: focusSource
 		});
 		$[24] = focusSource;
@@ -692,10 +704,16 @@ const CodeBlockLanguagePickerMemo = /* @__PURE__ */ memo(CodeBlockLanguagePicker
 function defineCodeBlockView(component = CodeBlockView) {
 	return union(defineReactNodeView({
 		name: "codeBlock",
+		as: createCodeBlockRoot,
 		contentAs: "code",
 		component
 	}), defineCodeBlockPreviewPlugin());
 }
+function createCodeBlockRoot() {
+	const element = document.createElement("div");
+	element.dataset.codeBlock = "";
+	return element;
+}
 
 // src/components/block-handle.module.css
 var block_handle_module_default = {
@@ -3299,9 +3317,102 @@ function TableMenuDeleteTable(t0) {
 	} else t2 = $[5];
 	return t2;
 }
+function TableColumnMenuItems(t0) {
+	const $ = c(2);
+	const { editor } = t0;
+	let t1;
+	if ($[0] !== editor) {
+		t1 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(TableMenuInsertLeft, { editor }),
+			/* @__PURE__ */ jsx(TableMenuInsertRight, { editor }),
+			/* @__PURE__ */ jsx(TableMenuAlign, { editor }),
+			/* @__PURE__ */ jsx(TableMenuClearContents, {
+				editor,
+				testId: "table-clear-column"
+			}),
+			/* @__PURE__ */ jsx(TableMenuDeleteColumn, { editor }),
+			/* @__PURE__ */ jsx(TableMenuDeleteTable, {
+				editor,
+				testId: "table-delete-table-column"
+			})
+		] });
+		$[0] = editor;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+function TableRowMenuItems(t0) {
+	const $ = c(2);
+	const { editor } = t0;
+	let t1;
+	if ($[0] !== editor) {
+		t1 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(TableMenuInsertAbove, { editor }),
+			/* @__PURE__ */ jsx(TableMenuInsertBelow, { editor }),
+			/* @__PURE__ */ jsx(TableMenuClearContents, {
+				editor,
+				testId: "table-clear-row"
+			}),
+			/* @__PURE__ */ jsx(TableMenuDeleteRow, { editor }),
+			/* @__PURE__ */ jsx(TableMenuDeleteTable, {
+				editor,
+				testId: "table-delete-table-row"
+			})
+		] });
+		$[0] = editor;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Mounts a menu's items only while the menu is shown, so a closed menu holds no
+* editor subscriptions. Opening is canceled and replayed through `open`, so the
+* items mount in the same commit that opens the menu. Closing keeps the items
+* until the close animation finishes.
+*/
+function useLazyMenu() {
+	const $ = c(5);
+	const [open, setOpen] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (event) => {
+			if (event.detail) {
+				event.preventDefault();
+				setMounted(true);
+			}
+			setOpen(event.detail);
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const onOpenChange = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (event_0) => {
+			if (!event_0.detail) setMounted(false);
+		};
+		$[1] = t1;
+	} else t1 = $[1];
+	const onOpenChangeComplete = t1;
+	let t2;
+	if ($[2] !== mounted || $[3] !== open) {
+		t2 = {
+			open,
+			mounted,
+			onOpenChange,
+			onOpenChangeComplete
+		};
+		$[2] = mounted;
+		$[3] = open;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
 function TableHandle() {
-	const $ = c(11);
+	const $ = c(27);
 	const editor = useEditor$1();
+	const columnMenu = useLazyMenu();
+	const rowMenu = useLazyMenu();
 	let t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -3323,90 +3434,107 @@ function TableHandle() {
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
-	if ($[3] !== editor) {
-		t3 = /* @__PURE__ */ jsx(TableHandleColumnPositioner, {
+	if ($[3] !== columnMenu.mounted || $[4] !== editor) {
+		t3 = columnMenu.mounted && /* @__PURE__ */ jsx(TableColumnMenuItems, { editor });
+		$[3] = columnMenu.mounted;
+		$[4] = editor;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(MenuPositioner, {
+			className: table_handle_module_default.MenuPositioner,
+			children: /* @__PURE__ */ jsx(MenuPopup, {
+				className: table_handle_module_default.MenuPopup,
+				"data-testid": "table-handle-column-menu",
+				children: t3
+			})
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== columnMenu.onOpenChange || $[9] !== columnMenu.onOpenChangeComplete || $[10] !== columnMenu.open || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(TableHandleColumnPositioner, {
 			className: table_handle_module_default.Positioner,
 			children: /* @__PURE__ */ jsx(TableHandleColumnPopup, {
 				className: table_handle_module_default.ColumnPopup,
-				children: /* @__PURE__ */ jsxs(TableHandleColumnMenuRoot, { children: [t2, /* @__PURE__ */ jsx(MenuPositioner, {
-					className: table_handle_module_default.MenuPositioner,
-					children: /* @__PURE__ */ jsxs(MenuPopup, {
-						className: table_handle_module_default.MenuPopup,
-						"data-testid": "table-handle-column-menu",
-						children: [
-							/* @__PURE__ */ jsx(TableMenuInsertLeft, { editor }),
-							/* @__PURE__ */ jsx(TableMenuInsertRight, { editor }),
-							/* @__PURE__ */ jsx(TableMenuAlign, { editor }),
-							/* @__PURE__ */ jsx(TableMenuClearContents, {
-								editor,
-								testId: "table-clear-column"
-							}),
-							/* @__PURE__ */ jsx(TableMenuDeleteColumn, { editor }),
-							/* @__PURE__ */ jsx(TableMenuDeleteTable, {
-								editor,
-								testId: "table-delete-table-column"
-							})
-						]
-					})
-				})] })
+				children: /* @__PURE__ */ jsxs(TableHandleColumnMenuRoot, {
+					open: columnMenu.open,
+					onOpenChange: columnMenu.onOpenChange,
+					onOpenChangeComplete: columnMenu.onOpenChangeComplete,
+					children: [t2, t4]
+				})
 			})
 		});
-		$[3] = editor;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(TableHandleRowMenuTrigger, {
+		$[8] = columnMenu.onOpenChange;
+		$[9] = columnMenu.onOpenChangeComplete;
+		$[10] = columnMenu.open;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(TableHandleRowMenuTrigger, {
 			className: table_handle_module_default.Trigger,
 			"data-testid": "table-handle-row",
 			children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
 		});
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== editor) {
-		t5 = /* @__PURE__ */ jsx(TableHandleRowPositioner, {
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== editor || $[15] !== rowMenu.mounted) {
+		t7 = rowMenu.mounted && /* @__PURE__ */ jsx(TableRowMenuItems, { editor });
+		$[14] = editor;
+		$[15] = rowMenu.mounted;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t7) {
+		t8 = /* @__PURE__ */ jsx(MenuPositioner, {
+			className: table_handle_module_default.MenuPositioner,
+			children: /* @__PURE__ */ jsx(MenuPopup, {
+				className: table_handle_module_default.MenuPopup,
+				"data-testid": "table-handle-row-menu",
+				children: t7
+			})
+		});
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== rowMenu.onOpenChange || $[20] !== rowMenu.onOpenChangeComplete || $[21] !== rowMenu.open || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx(TableHandleRowPositioner, {
 			className: table_handle_module_default.Positioner,
 			children: /* @__PURE__ */ jsx(TableHandleRowPopup, {
 				className: table_handle_module_default.RowPopup,
-				children: /* @__PURE__ */ jsxs(TableHandleRowMenuRoot, { children: [t4, /* @__PURE__ */ jsx(MenuPositioner, {
-					className: table_handle_module_default.MenuPositioner,
-					children: /* @__PURE__ */ jsxs(MenuPopup, {
-						className: table_handle_module_default.MenuPopup,
-						"data-testid": "table-handle-row-menu",
-						children: [
-							/* @__PURE__ */ jsx(TableMenuInsertAbove, { editor }),
-							/* @__PURE__ */ jsx(TableMenuInsertBelow, { editor }),
-							/* @__PURE__ */ jsx(TableMenuClearContents, {
-								editor,
-								testId: "table-clear-row"
-							}),
-							/* @__PURE__ */ jsx(TableMenuDeleteRow, { editor }),
-							/* @__PURE__ */ jsx(TableMenuDeleteTable, {
-								editor,
-								testId: "table-delete-table-row"
-							})
-						]
-					})
-				})] })
+				children: /* @__PURE__ */ jsxs(TableHandleRowMenuRoot, {
+					open: rowMenu.open,
+					onOpenChange: rowMenu.onOpenChange,
+					onOpenChangeComplete: rowMenu.onOpenChangeComplete,
+					children: [t6, t8]
+				})
 			})
 		});
-		$[6] = editor;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== t3 || $[9] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(TableHandleRoot, { children: [
+		$[19] = rowMenu.onOpenChange;
+		$[20] = rowMenu.onOpenChangeComplete;
+		$[21] = rowMenu.open;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t5 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(TableHandleRoot, { children: [
 			t0,
 			t1,
-			t3,
-			t5
+			t5,
+			t9
 		] });
-		$[8] = t3;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	return t6;
+		$[24] = t5;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	return t10;
 }
 
 // src/utils/returns-true.ts
@@ -5093,7 +5221,9 @@ function CodeBlock(t0) {
 	let t5;
 	if ($[8] !== t2 || $[9] !== t4) {
 		t5 = /* @__PURE__ */ jsx("pre", {
+			"data-code-block": "",
 			"data-language": t2,
+			"data-scroll-x": true,
 			children: t4
 		});
 		$[8] = t2;
@@ -5180,7 +5310,8 @@ function MathCodeBlock(t0) {
 			formula: code,
 			displayMode: true,
 			className: code_block_view_module_default.Preview,
-			"data-testid": "code-block-math-preview"
+			"data-testid": "code-block-math-preview",
+			"data-scroll-x": true
 		});
 		$[2] = code;
 		$[3] = katex;
@@ -5210,7 +5341,8 @@ function MermaidCodeBlock(t0) {
 			renderer,
 			source: code,
 			className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
-			"data-testid": "code-block-mermaid-preview"
+			"data-testid": "code-block-mermaid-preview",
+			"data-scroll-x": true
 		});
 		$[2] = code;
 		$[3] = renderer;

package/dist/style.css

@@ -854,9 +854,12 @@
 }
 .meow_Positioner_Dqll0G {
   z-index: 50;
+  border: 0;
   flex-direction: column;
   width: min(24rem, 100vw - 1rem);
   height: min-content;
+  margin: 0;
+  padding: 0;
   display: flex;
   overflow: visible;
 }
@@ -927,6 +930,12 @@
   font-size: .8125rem;
   overflow: hidden;
 }
+.meow_MenuPositioner_hpZLgq {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
 .meow_Positioner_hpZLgq, .meow_MenuPositioner_hpZLgq {
   z-index: 50;
   width: min-content;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.82.1",
+  "version": "0.82.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,15 +22,15 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@meowdown/core": "0.82.0",
+    "@meowdown/core": "0.83.0",
     "@meowdown/embed": "0.3.1",
-    "@meowdown/markdown": "0.77.0",
+    "@meowdown/markdown": "0.78.0",
     "@ocavue/utils": "^1.9.0",
     "@post-embed/types": "^0.5.0",
-    "@prosekit/core": "^0.13.3",
-    "@prosekit/pm": "^0.1.20",
-    "@prosekit/react": "^0.8.4",
-    "@prosekit/web": "^0.9.4",
+    "@prosekit/core": "^0.13.4",
+    "@prosekit/pm": "^0.1.21",
+    "@prosekit/react": "^0.9.0",
+    "@prosekit/web": "^0.10.0",
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
@@ -53,16 +53,16 @@
     "@css-modules-kit/codegen": "^1.4.0",
     "@meowdown/vitest": "0.0.0",
     "@ocavue/tsconfig": "^0.7.1",
-    "@tsdown/css": "^0.23.2",
+    "@tsdown/css": "^0.23.3",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/browser-playwright": "^5.0.5",
     "dedent": "^1.7.2",
-    "oxc-transform-react": "^0.152.0",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "tsdown": "^0.23.2",
+    "oxc-transform-react": "^0.156.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsdown": "^0.23.3",
     "vitest": "^5.0.5",
     "vitest-browser-commands": "^0.5.0",
     "vitest-browser-react": "^2.3.0"