Add attribute panel widget to inline math

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;

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))
 						);

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;
+}