From eb0e26653a266b2ae7a10b48804b52672e23d891 Mon Sep 17 00:00:00 2001
From: allisonking <aking@knowledgefutures.org>
Date: Mon, 3 Mar 2025 11:33:49 -0500
Subject: [PATCH] Add attribute panel widget to inline math

---
 packages/context-editor/src/components/AttributePanel.tsx  | 7 +++++++
 .../context-editor/src/plugins/structureDecorations.ts     | 7 +++++--
 packages/context-editor/src/style.css                      | 4 ++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/context-editor/src/components/AttributePanel.tsx b/packages/context-editor/src/components/AttributePanel.tsx
index 328e4c663..bf7aae2e0 100644
--- a/packages/context-editor/src/components/AttributePanel.tsx
+++ b/packages/context-editor/src/components/AttributePanel.tsx
@@ -108,6 +108,10 @@ export function AttributePanel({ panelPosition, viewRef }: AttributePanelProps)
 			)
 		);
 	};
+	// Marks will automatically show names, so it is only the 'inline' types
+	// that are not marks that need to be specifically rendered
+	const showName = node.type?.name === "math_inline";
+
 	return (
 		<>
 			{node && (
@@ -135,6 +139,9 @@ export function AttributePanel({ panelPosition, viewRef }: AttributePanelProps)
 					}}
 				>
 					<div className="text-sm">Attributes</div>
+					{showName ? (
+						<div className="mt-4 text-sm font-bold">{node.type?.name}</div>
+					) : null}
 					{Object.keys(nodeAttrs).map((attrKey) => {
 						if (attrKey === "data") {
 							return null;
diff --git a/packages/context-editor/src/plugins/structureDecorations.ts b/packages/context-editor/src/plugins/structureDecorations.ts
index b46802296..1c32a550a 100644
--- a/packages/context-editor/src/plugins/structureDecorations.ts
+++ b/packages/context-editor/src/plugins/structureDecorations.ts
@@ -83,8 +83,11 @@ export default () => {
 							Decoration.widget(pos, wrapWidget(state, node, pos, setPanelPosition))
 						);
 					}
-					if (!node.type.isBlock && node.marks.length) {
-						/* If it's an inline node with marks */
+					const isInline = !node.type.isBlock;
+					const hasMarks = !!node.marks.length;
+					const isMath = node.type.name === "math_inline";
+					if (isInline && (hasMarks || isMath)) {
+						/* If it's an inline node with marks OR is inline math */
 						decorations.push(
 							Decoration.widget(pos, wrapWidget(state, node, pos, setPanelPosition))
 						);
diff --git a/packages/context-editor/src/style.css b/packages/context-editor/src/style.css
index 474180d6b..31eaf5fcc 100644
--- a/packages/context-editor/src/style.css
+++ b/packages/context-editor/src/style.css
@@ -144,3 +144,7 @@
 	padding-left: 1rem;
 	border-left: solid 4px rgba(181, 181, 181, 0.5);
 }
+.ProseMirror math-inline {
+	/* Otherwise the widget button is too hard to click without triggering math */
+	margin-left: 4px;
+}