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)
}}
>
Attributes
+ {showName ? (
+ {node.type?.name}
+ ) : 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;
+}