prosemirror-math 0.1.0 → 0.2.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 ocavue
+Copyright (c) 2026 ocavue
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,6 +1,8 @@
 # prosemirror-math
 
-Math editing extensions for [ProseMirror](https://prosemirror.net/). Provides node specs, node views, input rules, and plugins for inline and block math.
+[![NPM version](https://img.shields.io/npm/v/prosemirror-math?color=a1b858&label=)](https://www.npmjs.com/package/prosemirror-math)
+
+Rendering math expressions in [ProseMirror](https://prosemirror.net/).
 
 ## Installation
 
@@ -23,7 +25,12 @@ import { Schema } from 'prosemirror-model'
 const schema = new Schema({
   nodes: {
     doc: { content: 'block+' },
-    paragraph: { content: 'inline*', group: 'block', parseDOM: [{ tag: 'p' }], toDOM: () => ['p', 0] },
+    paragraph: {
+      content: 'inline*',
+      group: 'block',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0],
+    },
     text: { group: 'inline' },
     mathBlock: { ...mathBlockSpec },
     mathInline: { ...mathInlineSpec },
@@ -43,12 +50,22 @@ import Temml from 'temml'
 const view = new EditorView(document.body, {
   state,
   nodeViews: {
-    mathBlock: (node, view, getPos, decorations) => createMathBlockView((text, element) => {
-      Temml.render(text, element, { displayMode: true })
-    }, node, decorations),
-    mathInline: (node, view, getPos, decorations) => createMathInlineView((text, element) => {
-      Temml.render(text, element, { displayMode: false })
-    }, node, decorations),
+    mathBlock: (node, view, getPos, decorations) =>
+      createMathBlockView(
+        (text, element) => {
+          Temml.render(text, element, { displayMode: true })
+        },
+        node,
+        decorations,
+      ),
+    mathInline: (node, view, getPos, decorations) =>
+      createMathInlineView(
+        (text, element) => {
+          Temml.render(text, element, { displayMode: false })
+        },
+        node,
+        decorations,
+      ),
   },
 })
 ```
@@ -91,29 +108,7 @@ const plugin = createCursorInsidePlugin()
 
 ## API
 
-### Node specs
-
-- **`mathBlockSpec`** — NodeSpec for block math (`div.prosekit-math-block > pre > code`)
-- **`mathInlineSpec`** — NodeSpec for inline math (`span.prosekit-math-inline > code`)
-
-### Node views
-
-- **`createMathBlockView(renderMath, node, decorations)`** — Creates a block math NodeView
-- **`createMathInlineView(renderMath, node, decorations)`** — Creates an inline math NodeView
-
-The `renderMath` callback receives `(text: string, element: HTMLElement)` and should render the math into the element.
-
-### Input rules
-
-- **`createMathInlineInputRule(nodeType)`** — Creates an InputRule for inline math
-
-### Enter rules
-
-- **`mathBlockEnterRule`** — EnterRule for converting `$$` into a math block
-
-### Plugins
-
-- **`createCursorInsidePlugin()`** — Plugin that decorates math nodes containing the cursor
+[API Reference](https://npmx.dev/package-docs/prosemirror-math)
 
 ## License
 

package/dist/{prosemirror-math.d.ts → index.d.ts}

@@ -17,9 +17,20 @@ import { Node, NodeSpec } from "prosemirror-model";
 declare function createCursorInsidePlugin(): Plugin;
 //#endregion
 //#region src/math-block-enter-rule.d.ts
+/**
+ * An {@link EnterRule} that converts a textblock node that only contains `$$` into a math
+ * block node when Enter is pressed.
+ *
+ * @public
+ */
 declare const mathBlockEnterRule: EnterRule;
 //#endregion
 //#region src/math-block-spec.d.ts
+/**
+ * A {@link NodeSpec} for a block-level math node.
+ *
+ * @public
+ */
 declare const mathBlockSpec: NodeSpec;
 //#endregion
 //#region src/math-block-view.d.ts
@@ -30,12 +41,37 @@ declare const mathBlockSpec: NodeSpec;
  * @param element - A `<div>` element to render the math block.
  */
 type RenderMathBlock = (text: string, element: HTMLElement) => void;
+/**
+ * Creates a {@link NodeView} for a block-level math node. The view will show a
+ * source editor or a rendered display area based on the text cursor position.
+ *
+ * @param renderMathBlock - A function that renders math text (e.g. TeX) into
+ * the display element. You can use libraries like
+ * [Temml](https://temml.org/) or [KaTeX](https://katex.org/).
+ * @param node - The ProseMirror node to render.
+ * @param decorations - The decorations applied to the node.
+ *
+ * @public
+ */
 declare function createMathBlockView(renderMathBlock: RenderMathBlock, node: Node, decorations: readonly Decoration[]): NodeView;
 //#endregion
 //#region src/math-inline-input-rule.d.ts
+/**
+ * Creates a ProseMirror {@link InputRule} that converts text wrapped in `$` or
+ * `$$` (e.g. `$x^2$`) into an inline math node.
+ *
+ * @param nodeType - The name of the inline math node type in your schema.
+ *
+ * @public
+ */
 declare function createMathInlineInputRule(nodeType: string): InputRule;
 //#endregion
 //#region src/math-inline-spec.d.ts
+/**
+ * A {@link NodeSpec} for an inline math node.
+ *
+ * @public
+ */
 declare const mathInlineSpec: NodeSpec;
 //#endregion
 //#region src/math-inline-view.d.ts
@@ -46,6 +82,19 @@ declare const mathInlineSpec: NodeSpec;
  * @param element - A `<span>` element to render the math inline.
  */
 type RenderMathInline = (text: string, element: HTMLElement) => void;
+/**
+ * Creates a {@link NodeView} for an inline math node. The view will show a
+ * source editor or a rendered display area based on the text cursor position.
+ *
+ * @param renderMathInline - A function that renders math text (e.g. TeX) into
+ * the display element. You can use libraries like [Temml](https://temml.org/)
+ * or [KaTeX](https://katex.org/).
+ * @param node - The ProseMirror node to render.
+ * @param decorations - The decorations applied to the node.
+ *
+ * @public
+ */
 declare function createMathInlineView(renderMathInline: RenderMathInline, node: Node, decorations: readonly Decoration[]): NodeView;
 //#endregion
-export { type RenderMathBlock, type RenderMathInline, createCursorInsidePlugin, createMathBlockView, createMathInlineInputRule, createMathInlineView, mathBlockEnterRule, mathBlockSpec, mathInlineSpec };
+export { type RenderMathBlock, type RenderMathInline, createCursorInsidePlugin, createMathBlockView, createMathInlineInputRule, createMathInlineView, mathBlockEnterRule, mathBlockSpec, mathInlineSpec };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/cursor-inside-plugin.ts","../src/math-block-enter-rule.ts","../src/math-block-spec.ts","../src/math-block-view.ts","../src/math-inline-input-rule.ts","../src/math-inline-spec.ts","../src/math-inline-view.ts"],"mappings":";;;;;;;;AA2CA;;;;;;;;iBAAgB,wBAAA,CAAA,GAA4B,MAAA;;;;;;;;AAA5C;cC9Ba,kBAAA,EAAoB,SAAA;;;;;;;;cCNpB,aAAA,EAAe,QAAA;;;;;;;;AFoC5B;KG/BY,eAAA,IAAmB,IAAA,UAAc,OAAA,EAAS,WAAA;;;;;;;AFCtD;;;;;;iBEagB,mBAAA,CACd,eAAA,EAAiB,eAAA,EACjB,IAAA,EAAM,IAAA,EACN,WAAA,WAAsB,UAAA,KACrB,QAAA;;;;;;;;AHaH;;;iBIfgB,yBAAA,CAA0B,QAAA,WAAmB,SAAA;;;;;;;;cCrBhD,cAAA,EAAgB,QAAA;;;;;;;;ALoC7B;KM/BY,gBAAA,IAAoB,IAAA,UAAc,OAAA,EAAS,WAAA;;;;;;;ALCvD;;;;;;iBKagB,oBAAA,CACd,gBAAA,EAAkB,gBAAA,EAClB,IAAA,EAAM,IAAA,EACN,WAAA,WAAsB,UAAA,KACrB,QAAA"}

package/dist/{prosemirror-math.js → index.js}

@@ -49,6 +49,12 @@ function createCursorInsidePlugin() {
 //#endregion
 //#region src/math-block-enter-rule.ts
 const MATH_BLOCK_ENTER_REGEXP = /^\$\$$/;
+/**
+* An {@link EnterRule} that converts a textblock node that only contains `$$` into a math
+* block node when Enter is pressed.
+*
+* @public
+*/
 const mathBlockEnterRule = /* @__PURE__ */ createTextBlockEnterRule({
 	regex: MATH_BLOCK_ENTER_REGEXP,
 	type: "mathBlock"
@@ -56,6 +62,11 @@ const mathBlockEnterRule = /* @__PURE__ */ createTextBlockEnterRule({
 
 //#endregion
 //#region src/math-block-spec.ts
+/**
+* A {@link NodeSpec} for a block-level math node.
+*
+* @public
+*/
 const mathBlockSpec = {
 	atom: false,
 	group: "block math",
@@ -64,12 +75,12 @@ const mathBlockSpec = {
 	toDOM() {
 		return [
 			"div",
-			{ class: "prosekit-math-block" },
+			{ class: "prosemirror-math-block" },
 			["pre", ["code", 0]]
 		];
 	},
 	parseDOM: [{
-		tag: "div.prosekit-math-block",
+		tag: "div.prosemirror-math-block",
 		contentElement: "code"
 	}]
 };
@@ -85,7 +96,7 @@ function createElement(tag, className, ...children) {
 
 //#endregion
 //#region src/math-view-render.ts
-function createMathViewRender(renderMath, source, display) {
+function createMathViewRender(renderMath, source, display, inline) {
 	let prevNode;
 	let prevText;
 	let prevSelected;
@@ -101,23 +112,52 @@ function createMathViewRender(renderMath, source, display) {
 		const selected = hasCursorInsideDecoration(decorations);
 		if (selected === prevSelected) return;
 		prevSelected = selected;
-		source.style.display = selected ? "" : "none";
 		display.style.display = selected ? "none" : "";
+		if (!inline) source.style.display = selected ? "" : "none";
+		else Object.assign(source.style, selected ? visibleInlineSourceStyle : hiddenInlineSourceStyle);
 	}
 	return function updateMathView(node, decorations) {
 		updateDisplay(node);
 		updateStyle(decorations);
 	};
 }
+const hiddenInlineSourceStyle = {
+	display: "inline-flex",
+	opacity: "0",
+	pointerEvents: "none",
+	maxWidth: "0",
+	maxHeight: "0",
+	overflow: "hidden"
+};
+const visibleInlineSourceStyle = {
+	display: "inline-flex",
+	opacity: "1",
+	pointerEvents: "",
+	maxWidth: "",
+	maxHeight: "",
+	overflow: ""
+};
 
 //#endregion
 //#region src/math-block-view.ts
+/**
+* Creates a {@link NodeView} for a block-level math node. The view will show a
+* source editor or a rendered display area based on the text cursor position.
+*
+* @param renderMathBlock - A function that renders math text (e.g. TeX) into
+* the display element. You can use libraries like
+* [Temml](https://temml.org/) or [KaTeX](https://katex.org/).
+* @param node - The ProseMirror node to render.
+* @param decorations - The decorations applied to the node.
+*
+* @public
+*/
 function createMathBlockView(renderMathBlock, node, decorations) {
 	const code = createElement("code");
-	const source = createElement("pre", "prosekit-math-source", code);
-	const display = createElement("div", "prosekit-math-display");
-	const dom = createElement("div", "prosekit-math-block", source, display);
-	const render = createMathViewRender(renderMathBlock, source, display);
+	const source = createElement("pre", "prosemirror-math-source", code);
+	const display = createElement("div", "prosemirror-math-display");
+	const dom = createElement("div", "prosemirror-math-block", source, display);
+	const render = createMathViewRender(renderMathBlock, source, display, false);
 	render(node, decorations);
 	return {
 		dom,
@@ -132,6 +172,14 @@ function createMathBlockView(renderMathBlock, node, decorations) {
 //#endregion
 //#region src/math-inline-input-rule.ts
 const MATH_INPUT_REGEXP = (supportsRegexLookbehind() ? "(?<!\\$)" : "") + "(\\$\\$?)([^\\s$](?:[^$]*[^\\s$])?)\\1$";
+/**
+* Creates a ProseMirror {@link InputRule} that converts text wrapped in `$` or
+* `$$` (e.g. `$x^2$`) into an inline math node.
+*
+* @param nodeType - The name of the inline math node type in your schema.
+*
+* @public
+*/
 function createMathInlineInputRule(nodeType) {
 	return new InputRule(new RegExp(MATH_INPUT_REGEXP), (state, match, start, end) => {
 		const { tr, schema } = state;
@@ -147,6 +195,11 @@ function createMathInlineInputRule(nodeType) {
 
 //#endregion
 //#region src/math-inline-spec.ts
+/**
+* A {@link NodeSpec} for an inline math node.
+*
+* @public
+*/
 const mathInlineSpec = {
 	atom: false,
 	inline: true,
@@ -157,27 +210,40 @@ const mathInlineSpec = {
 	toDOM() {
 		return [
 			"span",
-			{ class: "prosekit-math-inline" },
+			{ class: "prosemirror-math-inline" },
 			["code", 0]
 		];
 	},
 	parseDOM: [{
-		tag: "span.prosekit-math-inline",
+		tag: "span.prosemirror-math-inline",
 		contentElement: "code"
 	}]
 };
 
 //#endregion
 //#region src/math-inline-view.ts
+/**
+* Creates a {@link NodeView} for an inline math node. The view will show a
+* source editor or a rendered display area based on the text cursor position.
+*
+* @param renderMathInline - A function that renders math text (e.g. TeX) into
+* the display element. You can use libraries like [Temml](https://temml.org/)
+* or [KaTeX](https://katex.org/).
+* @param node - The ProseMirror node to render.
+* @param decorations - The decorations applied to the node.
+*
+* @public
+*/
 function createMathInlineView(renderMathInline, node, decorations) {
-	const source = createElement("code", "prosekit-math-source");
-	const display = createElement("span", "prosekit-math-display");
-	const dom = createElement("span", "prosekit-math-inline", source, display);
-	const render = createMathViewRender(renderMathInline, source, display);
+	const code = createElement("code");
+	const source = createElement("span", "prosemirror-math-source", code);
+	const display = createElement("span", "prosemirror-math-display");
+	const dom = createElement("span", "prosemirror-math-inline", source, display);
+	const render = createMathViewRender(renderMathInline, source, display, true);
 	render(node, decorations);
 	return {
 		dom,
-		contentDOM: source,
+		contentDOM: code,
 		update: (node, decorations) => {
 			render(node, decorations);
 			return true;
@@ -186,4 +252,5 @@ function createMathInlineView(renderMathInline, node, decorations) {
 }
 
 //#endregion
-export { createCursorInsidePlugin, createMathBlockView, createMathInlineInputRule, createMathInlineView, mathBlockEnterRule, mathBlockSpec, mathInlineSpec };
+export { createCursorInsidePlugin, createMathBlockView, createMathInlineInputRule, createMathInlineView, mathBlockEnterRule, mathBlockSpec, mathInlineSpec };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/cursor-inside-plugin.ts","../src/math-block-enter-rule.ts","../src/math-block-spec.ts","../src/create-element.ts","../src/math-view-render.ts","../src/math-block-view.ts","../src/math-inline-input-rule.ts","../src/math-inline-spec.ts","../src/math-inline-view.ts"],"sourcesContent":["import { Plugin, PluginKey, type EditorState } from 'prosemirror-state'\nimport { Decoration, DecorationSet } from 'prosemirror-view'\n\nconst DECORATION_SPEC = 'MATH_CURSOR_INSIDE'\n\nfunction createCursorInsideDecoration(\n  state: EditorState,\n): DecorationSet | undefined {\n  const { $head } = state.selection\n  const node = $head.parent\n\n  if (!node.type.isInGroup('math')) return\n\n  const before = $head.before()\n  const deco = Decoration.node(\n    before,\n    before + node.nodeSize,\n    { class: 'prosemirror-math-head-inside' },\n    DECORATION_SPEC,\n  )\n  return DecorationSet.create(state.doc, [deco])\n}\n\n/**\n * @internal\n */\nexport function hasCursorInsideDecoration(\n  decorations: readonly Decoration[],\n): boolean {\n  return decorations.some((deco) => deco.spec === DECORATION_SPEC)\n}\n\ntype PluginState = DecorationSet | undefined\n\n/**\n * Creates a plugin that adds a `prosemirror-math-head-inside` CSS class to math\n * nodes when the text selection head is inside them. This is useful for styling\n * math nodes differently while they are being edited.\n *\n * The plugin automatically detects nodes in the `math` group.\n *\n * @public\n */\nexport function createCursorInsidePlugin(): Plugin {\n  const key = new PluginKey<PluginState>('prosemirror-math-cursor-inside')\n  return new Plugin<PluginState>({\n    key,\n    state: {\n      init(): PluginState {\n        return undefined\n      },\n      apply(tr, oldValue, oldState, newState): PluginState {\n        if (\n          oldState.selection.head === newState.selection.head &&\n          !tr.docChanged\n        ) {\n          return oldValue\n        }\n        return createCursorInsideDecoration(newState)\n      },\n    },\n    props: {\n      decorations(state: EditorState): PluginState | undefined {\n        return key.getState(state)\n      },\n    },\n  })\n}\n","import {\n  createTextBlockEnterRule,\n  type EnterRule,\n} from 'prosemirror-enter-rules'\n\nexport const MATH_BLOCK_ENTER_REGEXP: RegExp = /^\\$\\$$/\n\n/**\n * An {@link EnterRule} that converts a textblock node that only contains `$$` into a math\n * block node when Enter is pressed.\n *\n * @public\n */\nexport const mathBlockEnterRule: EnterRule =\n  /* @__PURE__ */ createTextBlockEnterRule({\n    regex: MATH_BLOCK_ENTER_REGEXP,\n    type: 'mathBlock',\n  })\n","import type { NodeSpec } from 'prosemirror-model'\n\n/**\n * A {@link NodeSpec} for a block-level math node.\n *\n * @public\n */\nexport const mathBlockSpec: NodeSpec = {\n  atom: false,\n  group: 'block math',\n  content: 'text*',\n  code: true,\n  toDOM() {\n    return [\n      'div',\n      {\n        class: 'prosemirror-math-block',\n      },\n      ['pre', ['code', 0]],\n    ]\n  },\n  parseDOM: [\n    {\n      tag: 'div.prosemirror-math-block',\n\n      // skip the `<pre>` wrapper so that the node `codeBlock` won't match the content.\n      // TODO: add test to verify it\n      contentElement: 'code',\n    },\n  ],\n}\n","export function createElement<Tag extends keyof HTMLElementTagNameMap>(\n  tag: Tag,\n  className?: string,\n  ...children: HTMLElement[]\n): HTMLElementTagNameMap[Tag] {\n  const element: HTMLElementTagNameMap[Tag] = document.createElement(tag)\n  if (className) {\n    element.className = className\n  }\n  if (children.length > 0) {\n    element.append(...children)\n  }\n  return element\n}\n","import type { Node } from 'prosemirror-model'\nimport type { Decoration } from 'prosemirror-view'\n\nimport { hasCursorInsideDecoration } from './cursor-inside-plugin.ts'\n\ntype RenderMath = (text: string, element: HTMLElement) => void\n\nexport function createMathViewRender(\n  renderMath: RenderMath,\n  source: HTMLElement,\n  display: HTMLElement,\n  inline: boolean,\n) {\n  let prevNode: Node | undefined\n  let prevText: string | undefined\n  let prevSelected: boolean | undefined\n\n  function updateDisplay(node: Node) {\n    if (node === prevNode) return\n    prevNode = node\n\n    const text = node.textContent\n    if (text === prevText) return\n    prevText = text\n\n    renderMath(text, display)\n  }\n\n  function updateStyle(decorations: readonly Decoration[]): void {\n    const selected = hasCursorInsideDecoration(decorations)\n    if (selected === prevSelected) return\n    prevSelected = selected\n\n    // When the math node is selected, show the source code.\n    // Otherwise, show the rendered result.\n    display.style.display = selected ? 'none' : ''\n    if (!inline) {\n      source.style.display = selected ? '' : 'none'\n    } else {\n      // For inline source code, we don't use `display: none` because we need\n      // the source text rendered in the DOM to ensure the text cursor can be\n      // placed correctly.\n      Object.assign(\n        source.style,\n        selected ? visibleInlineSourceStyle : hiddenInlineSourceStyle,\n      )\n    }\n  }\n\n  return function updateMathView(\n    node: Node,\n    decorations: readonly Decoration[],\n  ): void {\n    updateDisplay(node)\n    updateStyle(decorations)\n  }\n}\n\nconst hiddenInlineSourceStyle: Partial<CSSStyleDeclaration> = {\n  display: 'inline-flex',\n  opacity: '0',\n  pointerEvents: 'none',\n  maxWidth: '0',\n  maxHeight: '0',\n  overflow: 'hidden',\n}\n\nconst visibleInlineSourceStyle: Partial<CSSStyleDeclaration> = {\n  display: 'inline-flex',\n  opacity: '1',\n  pointerEvents: '',\n  maxWidth: '',\n  maxHeight: '',\n  overflow: '',\n}\n","import type { Node as ProseMirrorNode } from 'prosemirror-model'\nimport type { Decoration, NodeView } from 'prosemirror-view'\n\nimport { createElement } from './create-element.ts'\nimport { createMathViewRender } from './math-view-render.ts'\n\n/**\n * The function to render a math block.\n *\n * @param text - The text of the math block. For example, a TeX expression.\n * @param element - A `<div>` element to render the math block.\n */\nexport type RenderMathBlock = (text: string, element: HTMLElement) => void\n\n/**\n * Creates a {@link NodeView} for a block-level math node. The view will show a\n * source editor or a rendered display area based on the text cursor position.\n *\n * @param renderMathBlock - A function that renders math text (e.g. TeX) into\n * the display element. You can use libraries like\n * [Temml](https://temml.org/) or [KaTeX](https://katex.org/).\n * @param node - The ProseMirror node to render.\n * @param decorations - The decorations applied to the node.\n *\n * @public\n */\nexport function createMathBlockView(\n  renderMathBlock: RenderMathBlock,\n  node: ProseMirrorNode,\n  decorations: readonly Decoration[],\n): NodeView {\n  const code = createElement('code')\n  const source = createElement('pre', 'prosemirror-math-source', code)\n  const display = createElement('div', 'prosemirror-math-display')\n  const dom = createElement('div', 'prosemirror-math-block', source, display)\n\n  const render = createMathViewRender(renderMathBlock, source, display, false)\n\n  render(node, decorations)\n\n  return {\n    dom,\n    contentDOM: code,\n    update: (node, decorations) => {\n      render(node, decorations)\n      return true\n    },\n  }\n}\n","/* eslint-disable unicorn/prefer-string-raw -- Don't use String.raw here for better bundler minification */\n\nimport { supportsRegexLookbehind } from '@ocavue/utils'\nimport { InputRule } from 'prosemirror-inputrules'\n\n// Matches text wrapped in `$` or `$$`, e.g. `$x^2$` or `$$x^2$$`.\nexport const MATH_INPUT_REGEXP: string =\n  // Don't allow $ before the opening delimiter\n  (supportsRegexLookbehind() ? '(?<!\\\\$)' : '') +\n  // capture group 1: opening delimiter (`$` or `$$`)\n  '(\\\\$\\\\$?)' +\n  // capture group 2: the math content\n  // - a single non-whitespace, non-`$` character\n  // - optionally followed by any non-`$` characters and a final non-whitespace, non-`$` character\n  '([^\\\\s$](?:[^$]*[^\\\\s$])?)' +\n  // backreference: closing delimiter must match the opening\n  '\\\\1' +\n  // end of input (required by ProseMirror InputRule)\n  '$'\n\n/**\n * Creates a ProseMirror {@link InputRule} that converts text wrapped in `$` or\n * `$$` (e.g. `$x^2$`) into an inline math node.\n *\n * @param nodeType - The name of the inline math node type in your schema.\n *\n * @public\n */\nexport function createMathInlineInputRule(nodeType: string): InputRule {\n  return new InputRule(\n    new RegExp(MATH_INPUT_REGEXP),\n    (state, match, start, end) => {\n      const { tr, schema } = state\n      const mathText = match[2]\n      if (!mathText) return null\n\n      const type = schema.nodes[nodeType]\n      if (!type) return null\n\n      const node = type.create(null, schema.text(mathText))\n      tr.replaceWith(start, end, node)\n      return tr\n    },\n  )\n}\n","import type { NodeSpec } from 'prosemirror-model'\n\n/**\n * A {@link NodeSpec} for an inline math node.\n *\n * @public\n */\nexport const mathInlineSpec: NodeSpec = {\n  atom: false,\n  inline: true,\n  group: 'inline math',\n  content: 'text*',\n  selectable: false,\n  code: true,\n  toDOM() {\n    return [\n      'span',\n      {\n        class: 'prosemirror-math-inline',\n      },\n      ['code', 0],\n    ]\n  },\n  parseDOM: [\n    {\n      tag: 'span.prosemirror-math-inline',\n      contentElement: 'code',\n    },\n  ],\n}\n","import type { Node as ProseMirrorNode } from 'prosemirror-model'\nimport type { Decoration, NodeView } from 'prosemirror-view'\n\nimport { createElement } from './create-element.ts'\nimport { createMathViewRender } from './math-view-render.ts'\n\n/**\n * The function to render a math inline.\n *\n * @param text - The text of the math inline. For example, a TeX expression.\n * @param element - A `<span>` element to render the math inline.\n */\nexport type RenderMathInline = (text: string, element: HTMLElement) => void\n\n/**\n * Creates a {@link NodeView} for an inline math node. The view will show a\n * source editor or a rendered display area based on the text cursor position.\n *\n * @param renderMathInline - A function that renders math text (e.g. TeX) into\n * the display element. You can use libraries like [Temml](https://temml.org/)\n * or [KaTeX](https://katex.org/).\n * @param node - The ProseMirror node to render.\n * @param decorations - The decorations applied to the node.\n *\n * @public\n */\nexport function createMathInlineView(\n  renderMathInline: RenderMathInline,\n  node: ProseMirrorNode,\n  decorations: readonly Decoration[],\n): NodeView {\n  const code = createElement('code')\n  const source = createElement('span', 'prosemirror-math-source', code)\n  const display = createElement('span', 'prosemirror-math-display')\n  const dom = createElement('span', 'prosemirror-math-inline', source, display)\n\n  const render = createMathViewRender(renderMathInline, source, display, true)\n\n  render(node, decorations)\n\n  return {\n    dom,\n    contentDOM: code,\n    update: (node, decorations) => {\n      render(node, decorations)\n      return true\n    },\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,34 +1,36 @@
 {
   "name": "prosemirror-math",
   "type": "module",
-  "version": "0.1.0",
-  "private": false,
-  "description": "Math extensions for ProseMirror",
-  "author": {
-    "name": "ocavue",
-    "email": "ocavue@gmail.com"
-  },
+  "version": "0.2.2",
+  "description": "Rendering math expressions in ProseMirror",
+  "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
   "funding": "https://github.com/sponsors/ocavue",
-  "homepage": "https://github.com/prosekit/prosekit#readme",
+  "homepage": "https://github.com/ocavue/prosemirror-math#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/prosekit/prosekit.git",
-    "directory": "packages/prosemirror-math"
-  },
-  "bugs": {
-    "url": "https://github.com/prosekit/prosekit/issues"
+    "url": "https://github.com/ocavue/prosemirror-math.git"
   },
+  "bugs": "https://github.com/ocavue/prosemirror-math/issues",
   "keywords": [
     "ProseMirror"
   ],
   "sideEffects": false,
-  "main": "./dist/prosemirror-math.js",
-  "module": "./dist/prosemirror-math.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/prosemirror-math.d.ts",
-      "default": "./dist/prosemirror-math.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
     }
   },
   "files": [
@@ -37,42 +39,39 @@
   ],
   "dependencies": {
     "@ocavue/utils": "^1.5.0",
-    "prosemirror-inputrules": "^1.5.1",
-    "prosemirror-model": "^1.25.4",
-    "prosemirror-state": "^1.4.4",
-    "prosemirror-view": "^1.41.6",
-    "prosemirror-enter-rules": "^0.1.3"
+    "prosemirror-enter-rules": "^0.1.5",
+    "prosemirror-inputrules": "^1.0.0",
+    "prosemirror-model": "^1.0.0",
+    "prosemirror-state": "^1.0.0",
+    "prosemirror-view": "^1.0.0"
   },
   "devDependencies": {
     "@mathjax/src": "^4.1.0",
+    "@ocavue/eslint-config": "^4.1.0",
+    "@ocavue/tsconfig": "^0.6.3",
+    "@prosekit/core": "^0.10.0",
+    "@types/node": "^20.19.10",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
     "diffable-html-snapshot": "^0.2.0",
+    "eslint": "^10.0.1",
     "katex": "^0.16.28",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
     "temml": "^0.13.1",
     "tsdown": "^0.20.3",
-    "typescript": "~5.9.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
     "vitest": "^4.0.18",
-    "vitest-browser-commands": "^0.2.0",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/config-vitest": "0.0.0"
-  },
-  "publishConfig": {
-    "dev": {}
-  },
-  "dev": {
-    "entry": {
-      "prosemirror-math": "./src/index.ts"
-    }
+    "vitest-browser-commands": "^0.2.0"
   },
   "scripts": {
-    "build:tsc": "tsc -b tsconfig.json",
-    "build:tsdown": "tsdown"
-  },
-  "types": "./dist/prosemirror-math.d.ts",
-  "typesVersions": {
-    "*": {
-      ".": [
-        "./dist/prosemirror-math.d.ts"
-      ]
-    }
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "eslint .",
+    "fix": "eslint --fix . && prettier --write .",
+    "test:install": "playwright install chromium",
+    "test": "vitest",
+    "typecheck": "tsc -b"
   }
 }

package/src/create-element.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 
-import { createElement } from './create-element'
+import { createElement } from './create-element.ts'
 
 describe('createElement', () => {
   it('creates an element with the given tag', () => {

package/src/cursor-inside-plugin.spec.ts

@@ -1,7 +1,7 @@
 import { TextSelection } from 'prosemirror-state'
 import { describe, expect, it } from 'vitest'
 
-import { setupTest } from './testing'
+import { setupTest } from './testing.ts'
 
 describe('cursorInsidePlugin', () => {
   it('applies decoration when cursor is inside mathBlock', () => {
@@ -10,13 +10,13 @@ describe('cursorInsidePlugin', () => {
 
     // Place cursor inside the math block
     const { state } = editor.view
-    const tr = state.tr.setSelection(
-      TextSelection.near(state.doc.resolve(2)),
-    )
+    const tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(2)))
     editor.view.dispatch(tr)
 
-    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
-    expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(true)
+    const mathBlock = editor.view.dom.querySelector('.prosemirror-math-block')
+    expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(
+      true,
+    )
   })
 
   it('applies decoration when cursor is inside mathInline', () => {
@@ -25,13 +25,13 @@ describe('cursorInsidePlugin', () => {
 
     // Place cursor inside the math inline node
     const { state } = editor.view
-    const tr = state.tr.setSelection(
-      TextSelection.near(state.doc.resolve(2)),
-    )
+    const tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(2)))
     editor.view.dispatch(tr)
 
-    const mathInline = editor.view.dom.querySelector('.prosekit-math-inline')
-    expect(mathInline?.classList.contains('prosemirror-math-head-inside')).toBe(true)
+    const mathInline = editor.view.dom.querySelector('.prosemirror-math-inline')
+    expect(mathInline?.classList.contains('prosemirror-math-head-inside')).toBe(
+      true,
+    )
   })
 
   it('does not apply decoration when cursor is outside math nodes', () => {
@@ -40,12 +40,12 @@ describe('cursorInsidePlugin', () => {
 
     // Place cursor inside the paragraph (position 2 should be inside "hello")
     const { state } = editor.view
-    const tr = state.tr.setSelection(
-      TextSelection.near(state.doc.resolve(2)),
-    )
+    const tr = state.tr.setSelection(TextSelection.near(state.doc.resolve(2)))
     editor.view.dispatch(tr)
 
-    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
-    expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(false)
+    const mathBlock = editor.view.dom.querySelector('.prosemirror-math-block')
+    expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(
+      false,
+    )
   })
 })

package/src/cursor-inside-plugin.ts

@@ -24,8 +24,10 @@ function createCursorInsideDecoration(
 /**
  * @internal
  */
-export function hasCursorInsideDecoration(decorations: readonly Decoration[]): boolean {
-  return decorations.some(deco => deco.spec === DECORATION_SPEC)
+export function hasCursorInsideDecoration(
+  decorations: readonly Decoration[],
+): boolean {
+  return decorations.some((deco) => deco.spec === DECORATION_SPEC)
 }
 
 type PluginState = DecorationSet | undefined
@@ -49,8 +51,8 @@ export function createCursorInsidePlugin(): Plugin {
       },
       apply(tr, oldValue, oldState, newState): PluginState {
         if (
-          oldState.selection.head === newState.selection.head
-          && !tr.docChanged
+          oldState.selection.head === newState.selection.head &&
+          !tr.docChanged
         ) {
           return oldValue
         }

package/src/index.ts

@@ -1,7 +1,10 @@
-export { createCursorInsidePlugin } from './cursor-inside-plugin'
-export { mathBlockEnterRule } from './math-block-enter-rule'
-export { mathBlockSpec } from './math-block-spec'
-export { createMathBlockView, type RenderMathBlock } from './math-block-view'
-export { createMathInlineInputRule } from './math-inline-input-rule'
-export { mathInlineSpec } from './math-inline-spec'
-export { createMathInlineView, type RenderMathInline } from './math-inline-view'
+export { createCursorInsidePlugin } from './cursor-inside-plugin.ts'
+export { mathBlockEnterRule } from './math-block-enter-rule.ts'
+export { mathBlockSpec } from './math-block-spec.ts'
+export { createMathBlockView, type RenderMathBlock } from './math-block-view.ts'
+export { createMathInlineInputRule } from './math-inline-input-rule.ts'
+export { mathInlineSpec } from './math-inline-spec.ts'
+export {
+  createMathInlineView,
+  type RenderMathInline,
+} from './math-inline-view.ts'

package/src/math-block-enter-rule.spec.ts

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest'
 import { userEvent } from 'vitest/browser'
 
-import { MATH_BLOCK_ENTER_REGEXP } from './math-block-enter-rule'
-import { setupTest } from './testing'
+import { MATH_BLOCK_ENTER_REGEXP } from './math-block-enter-rule.ts'
+import { setupTest } from './testing.ts'
 
 describe('MATH_BLOCK_ENTER_REGEXP', () => {
   const cases: Array<[input: string, matched: boolean]> = [
@@ -26,9 +26,7 @@ describe('defineMathBlockEnterRule', () => {
     editor.set(n.doc(n.p('<a>')))
 
     await userEvent.keyboard('$$')
-    expect(editor.view.state.doc.toJSON()).toEqual(
-      n.doc(n.p('$$')).toJSON(),
-    )
+    expect(editor.view.state.doc.toJSON()).toEqual(n.doc(n.p('$$')).toJSON())
 
     await userEvent.keyboard('{Enter}')
     expect(editor.view.state.doc.toJSON()).toEqual(

package/src/math-block-enter-rule.ts

@@ -1,8 +1,18 @@
-import { createTextBlockEnterRule, type EnterRule } from 'prosemirror-enter-rules'
+import {
+  createTextBlockEnterRule,
+  type EnterRule,
+} from 'prosemirror-enter-rules'
 
 export const MATH_BLOCK_ENTER_REGEXP: RegExp = /^\$\$$/
 
-export const mathBlockEnterRule: EnterRule = /* @__PURE__ */ createTextBlockEnterRule({
-  regex: MATH_BLOCK_ENTER_REGEXP,
-  type: 'mathBlock',
-})
+/**
+ * An {@link EnterRule} that converts a textblock node that only contains `$$` into a math
+ * block node when Enter is pressed.
+ *
+ * @public
+ */
+export const mathBlockEnterRule: EnterRule =
+  /* @__PURE__ */ createTextBlockEnterRule({
+    regex: MATH_BLOCK_ENTER_REGEXP,
+    type: 'mathBlock',
+  })

package/src/math-block-spec.spec.ts

@@ -1,7 +1,7 @@
 import { formatHTML } from 'diffable-html-snapshot'
 import { describe, expect, it } from 'vitest'
 
-import { setupTest } from './testing'
+import { setupTest } from './testing.ts'
 
 describe('mathBlockSpec', () => {
   it('can serialize to HTML', () => {
@@ -12,7 +12,7 @@ describe('mathBlockSpec', () => {
       `
       "
       <div>
-        <div class="prosekit-math-block">
+        <div class="prosemirror-math-block">
           <pre>
             <code>
               E = mc^2

package/src/math-block-spec.ts

@@ -1,5 +1,10 @@
 import type { NodeSpec } from 'prosemirror-model'
 
+/**
+ * A {@link NodeSpec} for a block-level math node.
+ *
+ * @public
+ */
 export const mathBlockSpec: NodeSpec = {
   atom: false,
   group: 'block math',
@@ -9,14 +14,14 @@ export const mathBlockSpec: NodeSpec = {
     return [
       'div',
       {
-        class: 'prosekit-math-block',
+        class: 'prosemirror-math-block',
       },
       ['pre', ['code', 0]],
     ]
   },
   parseDOM: [
     {
-      tag: 'div.prosekit-math-block',
+      tag: 'div.prosemirror-math-block',
 
       // skip the `<pre>` wrapper so that the node `codeBlock` won't match the content.
       // TODO: add test to verify it

package/src/math-block-view.spec.ts

@@ -1,7 +1,13 @@
 import { formatHTML } from 'diffable-html-snapshot'
 import { describe, expect, it } from 'vitest'
 
-import { katexRenderer, mathjaxRenderer, renderers, setupTest, temmlRenderer } from './testing'
+import {
+  katexRenderer,
+  mathjaxRenderer,
+  renderers,
+  setupTest,
+  temmlRenderer,
+} from './testing.ts'
 
 describe.each(Object.keys(renderers))('createMathBlockView (%s)', (name) => {
   const renderer = renderers[name as keyof typeof renderers]
@@ -11,17 +17,17 @@ describe.each(Object.keys(renderers))('createMathBlockView (%s)', (name) => {
     editor.set(n.doc(n.mathBlock('x^2')))
 
     const dom = editor.view.dom
-    const mathBlock = dom.querySelector('.prosekit-math-block')
+    const mathBlock = dom.querySelector('.prosemirror-math-block')
     expect(mathBlock).toBeTruthy()
-    expect(mathBlock?.querySelector('.prosekit-math-source')).toBeTruthy()
-    expect(mathBlock?.querySelector('.prosekit-math-display')).toBeTruthy()
+    expect(mathBlock?.querySelector('.prosemirror-math-source')).toBeTruthy()
+    expect(mathBlock?.querySelector('.prosemirror-math-display')).toBeTruthy()
   })
 
   it('updates display when content changes', () => {
     const { editor, n } = setupTest(renderer)
     editor.set(n.doc(n.mathBlock('x^2')))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const initialHTML = display?.innerHTML
 
     // Dispatch a transaction to change content
@@ -39,7 +45,7 @@ describe('createMathBlockView (temml snapshot)', () => {
     const { editor, n } = setupTest(temmlRenderer)
     editor.set(n.doc(n.mathBlock('x^2')))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const html = formatHTML(display?.innerHTML || '')
     expect(html).toMatchInlineSnapshot(`
       "
@@ -72,7 +78,7 @@ describe('createMathBlockView (katex snapshot)', () => {
     const { editor, n } = setupTest(katexRenderer)
     editor.set(n.doc(n.mathBlock('x^2')))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const html = formatHTML(display?.innerHTML || '')
     expect(html).toMatchInlineSnapshot(`
       "
@@ -155,7 +161,7 @@ describe('createMathBlockView (mathjax snapshot)', () => {
     const { editor, n } = setupTest(mathjaxRenderer)
     editor.set(n.doc(n.mathBlock('x^2')))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const html = formatHTML(display?.innerHTML || '')
     expect(html).toMatchInlineSnapshot(`
       "

package/src/math-block-view.ts

@@ -1,8 +1,8 @@
 import type { Node as ProseMirrorNode } from 'prosemirror-model'
 import type { Decoration, NodeView } from 'prosemirror-view'
 
-import { createElement } from './create-element'
-import { createMathViewRender } from './math-view-render'
+import { createElement } from './create-element.ts'
+import { createMathViewRender } from './math-view-render.ts'
 
 /**
  * The function to render a math block.
@@ -12,13 +12,29 @@ import { createMathViewRender } from './math-view-render'
  */
 export type RenderMathBlock = (text: string, element: HTMLElement) => void
 
-export function createMathBlockView(renderMathBlock: RenderMathBlock, node: ProseMirrorNode, decorations: readonly Decoration[]): NodeView {
+/**
+ * Creates a {@link NodeView} for a block-level math node. The view will show a
+ * source editor or a rendered display area based on the text cursor position.
+ *
+ * @param renderMathBlock - A function that renders math text (e.g. TeX) into
+ * the display element. You can use libraries like
+ * [Temml](https://temml.org/) or [KaTeX](https://katex.org/).
+ * @param node - The ProseMirror node to render.
+ * @param decorations - The decorations applied to the node.
+ *
+ * @public
+ */
+export function createMathBlockView(
+  renderMathBlock: RenderMathBlock,
+  node: ProseMirrorNode,
+  decorations: readonly Decoration[],
+): NodeView {
   const code = createElement('code')
-  const source = createElement('pre', 'prosekit-math-source', code)
-  const display = createElement('div', 'prosekit-math-display')
-  const dom = createElement('div', 'prosekit-math-block', source, display)
+  const source = createElement('pre', 'prosemirror-math-source', code)
+  const display = createElement('div', 'prosemirror-math-display')
+  const dom = createElement('div', 'prosemirror-math-block', source, display)
 
-  const render = createMathViewRender(renderMathBlock, source, display)
+  const render = createMathViewRender(renderMathBlock, source, display, false)
 
   render(node, decorations)
 

package/src/math-inline-input-rule.spec.ts

@@ -1,13 +1,15 @@
 import { describe, expect, it } from 'vitest'
 import { userEvent } from 'vitest/browser'
 
-import { MATH_INPUT_REGEXP } from './math-inline-input-rule'
-import { setupTest } from './testing'
+import { MATH_INPUT_REGEXP } from './math-inline-input-rule.ts'
+import { setupTest } from './testing.ts'
 
 describe('MATH_INPUT_REGEXP', () => {
   const regexp = new RegExp(MATH_INPUT_REGEXP)
 
-  const cases: Array<[input: string, delimiter: string | null, captured: string | null]> = [
+  const cases: Array<
+    [input: string, delimiter: string | null, captured: string | null]
+  > = [
     // Single dollar: inline math
     ['$x$', '$', 'x'],
     ['$x^2$', '$', 'x^2'],
@@ -46,13 +48,16 @@ describe('MATH_INPUT_REGEXP', () => {
     ['hello', null, null],
   ]
 
-  it.each(cases)('should handle %s', (input, expectedDelimiter, expectedContent) => {
-    const match = regexp.exec(input)
-    const delimiter = match?.[1] ?? null
-    const captured = match?.[2] ?? null
-    expect(delimiter).toEqual(expectedDelimiter)
-    expect(captured).toEqual(expectedContent)
-  })
+  it.each(cases)(
+    'should handle %s',
+    (input, expectedDelimiter, expectedContent) => {
+      const match = regexp.exec(input)
+      const delimiter = match?.[1] ?? null
+      const captured = match?.[2] ?? null
+      expect(delimiter).toEqual(expectedDelimiter)
+      expect(captured).toEqual(expectedContent)
+    },
+  )
 })
 
 describe('defineMathInlineInputRule', () => {
@@ -62,9 +67,7 @@ describe('defineMathInlineInputRule', () => {
     editor.set(n.doc(n.p('<a>')))
 
     await userEvent.keyboard('$x^2')
-    expect(editor.view.state.doc.toJSON()).toEqual(
-      n.doc(n.p('$x^2')).toJSON(),
-    )
+    expect(editor.view.state.doc.toJSON()).toEqual(n.doc(n.p('$x^2')).toJSON())
 
     await userEvent.keyboard('$')
     expect(editor.view.state.doc.toJSON()).toEqual(
@@ -99,9 +102,7 @@ describe('defineMathInlineInputRule', () => {
     editor.set(n.doc(n.p('<a>')))
 
     await userEvent.keyboard('$$')
-    expect(editor.view.state.doc.toJSON()).toEqual(
-      n.doc(n.p('$$')).toJSON(),
-    )
+    expect(editor.view.state.doc.toJSON()).toEqual(n.doc(n.p('$$')).toJSON())
   })
 
   it('should not trigger with spaces at boundaries', async () => {

package/src/math-inline-input-rule.ts

@@ -4,34 +4,42 @@ import { supportsRegexLookbehind } from '@ocavue/utils'
 import { InputRule } from 'prosemirror-inputrules'
 
 // Matches text wrapped in `$` or `$$`, e.g. `$x^2$` or `$$x^2$$`.
-export const MATH_INPUT_REGEXP: string = (
+export const MATH_INPUT_REGEXP: string =
   // Don't allow $ before the opening delimiter
-  (supportsRegexLookbehind() ? '(?<!\\$)' : '')
+  (supportsRegexLookbehind() ? '(?<!\\$)' : '') +
   // capture group 1: opening delimiter (`$` or `$$`)
-  + '(\\$\\$?)'
+  '(\\$\\$?)' +
   // capture group 2: the math content
   // - a single non-whitespace, non-`$` character
   // - optionally followed by any non-`$` characters and a final non-whitespace, non-`$` character
-  + '([^\\s$](?:[^$]*[^\\s$])?)'
+  '([^\\s$](?:[^$]*[^\\s$])?)' +
   // backreference: closing delimiter must match the opening
-  + '\\1'
+  '\\1' +
   // end of input (required by ProseMirror InputRule)
-  + '$'
-)
+  '$'
 
-export function createMathInlineInputRule(
-  nodeType: string,
-): InputRule {
-  return new InputRule(new RegExp(MATH_INPUT_REGEXP), (state, match, start, end) => {
-    const { tr, schema } = state
-    const mathText = match[2]
-    if (!mathText) return null
+/**
+ * Creates a ProseMirror {@link InputRule} that converts text wrapped in `$` or
+ * `$$` (e.g. `$x^2$`) into an inline math node.
+ *
+ * @param nodeType - The name of the inline math node type in your schema.
+ *
+ * @public
+ */
+export function createMathInlineInputRule(nodeType: string): InputRule {
+  return new InputRule(
+    new RegExp(MATH_INPUT_REGEXP),
+    (state, match, start, end) => {
+      const { tr, schema } = state
+      const mathText = match[2]
+      if (!mathText) return null
 
-    const type = schema.nodes[nodeType]
-    if (!type) return null
+      const type = schema.nodes[nodeType]
+      if (!type) return null
 
-    const node = type.create(null, schema.text(mathText))
-    tr.replaceWith(start, end, node)
-    return tr
-  })
+      const node = type.create(null, schema.text(mathText))
+      tr.replaceWith(start, end, node)
+      return tr
+    },
+  )
 }

package/src/math-inline-spec.spec.ts

@@ -1,7 +1,7 @@
 import { formatHTML } from 'diffable-html-snapshot'
 import { describe, expect, it } from 'vitest'
 
-import { setupTest } from './testing'
+import { setupTest } from './testing.ts'
 
 describe('mathInlineSpec', () => {
   it('can serialize to HTML', () => {
@@ -13,7 +13,7 @@ describe('mathInlineSpec', () => {
       "
       <div>
         <p>
-          <span class="prosekit-math-inline">
+          <span class="prosemirror-math-inline">
             <code>
               x^2
             </code>
@@ -75,7 +75,9 @@ describe('mathInlineSpec', () => {
 
   it('can be mixed with regular text', () => {
     const { editor, n } = setupTest()
-    editor.set(n.doc(n.paragraph('The formula ', n.mathInline('E=mc^2'), ' is famous.')))
+    editor.set(
+      n.doc(n.paragraph('The formula ', n.mathInline('E=mc^2'), ' is famous.')),
+    )
     const json = editor.getDocJSON()
     expect(json).toMatchInlineSnapshot(`
       {

package/src/math-inline-spec.ts

@@ -1,5 +1,10 @@
 import type { NodeSpec } from 'prosemirror-model'
 
+/**
+ * A {@link NodeSpec} for an inline math node.
+ *
+ * @public
+ */
 export const mathInlineSpec: NodeSpec = {
   atom: false,
   inline: true,
@@ -11,14 +16,14 @@ export const mathInlineSpec: NodeSpec = {
     return [
       'span',
       {
-        class: 'prosekit-math-inline',
+        class: 'prosemirror-math-inline',
       },
       ['code', 0],
     ]
   },
   parseDOM: [
     {
-      tag: 'span.prosekit-math-inline',
+      tag: 'span.prosemirror-math-inline',
       contentElement: 'code',
     },
   ],

package/src/math-inline-view.spec.ts

@@ -1,7 +1,13 @@
 import { formatHTML } from 'diffable-html-snapshot'
 import { describe, expect, it } from 'vitest'
 
-import { katexRenderer, mathjaxRenderer, renderers, setupTest, temmlRenderer } from './testing'
+import {
+  katexRenderer,
+  mathjaxRenderer,
+  renderers,
+  setupTest,
+  temmlRenderer,
+} from './testing.ts'
 
 describe.each(Object.keys(renderers))('createMathInlineView (%s)', (name) => {
   const renderer = renderers[name as keyof typeof renderers]
@@ -11,17 +17,17 @@ describe.each(Object.keys(renderers))('createMathInlineView (%s)', (name) => {
     editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
 
     const dom = editor.view.dom
-    const mathInline = dom.querySelector('.prosekit-math-inline')
+    const mathInline = dom.querySelector('.prosemirror-math-inline')
     expect(mathInline).toBeTruthy()
-    expect(mathInline?.querySelector('.prosekit-math-source')).toBeTruthy()
-    expect(mathInline?.querySelector('.prosekit-math-display')).toBeTruthy()
+    expect(mathInline?.querySelector('.prosemirror-math-source')).toBeTruthy()
+    expect(mathInline?.querySelector('.prosemirror-math-display')).toBeTruthy()
   })
 
   it('uses span elements for inline math', () => {
     const { editor, n } = setupTest(renderer)
     editor.set(n.doc(n.paragraph(n.mathInline('x'))))
 
-    const mathInline = editor.view.dom.querySelector('.prosekit-math-inline')
+    const mathInline = editor.view.dom.querySelector('.prosemirror-math-inline')
     expect(mathInline?.tagName).toBe('SPAN')
   })
 })
@@ -31,7 +37,7 @@ describe('createMathInlineView (temml snapshot)', () => {
     const { editor, n } = setupTest(temmlRenderer)
     editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const html = formatHTML(display?.innerHTML || '')
     expect(html).toMatchInlineSnapshot(`
       "
@@ -60,7 +66,7 @@ describe('createMathInlineView (katex snapshot)', () => {
     const { editor, n } = setupTest(katexRenderer)
     editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const html = formatHTML(display?.innerHTML || '')
     expect(html).toMatchInlineSnapshot(`
       "
@@ -138,7 +144,7 @@ describe('createMathInlineView (mathjax snapshot)', () => {
     const { editor, n } = setupTest(mathjaxRenderer)
     editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
 
-    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const display = editor.view.dom.querySelector('.prosemirror-math-display')
     const html = formatHTML(display?.innerHTML || '')
     expect(html).toMatchInlineSnapshot(`
       "

package/src/math-inline-view.ts

@@ -1,8 +1,8 @@
 import type { Node as ProseMirrorNode } from 'prosemirror-model'
 import type { Decoration, NodeView } from 'prosemirror-view'
 
-import { createElement } from './create-element'
-import { createMathViewRender } from './math-view-render'
+import { createElement } from './create-element.ts'
+import { createMathViewRender } from './math-view-render.ts'
 
 /**
  * The function to render a math inline.
@@ -12,22 +12,35 @@ import { createMathViewRender } from './math-view-render'
  */
 export type RenderMathInline = (text: string, element: HTMLElement) => void
 
+/**
+ * Creates a {@link NodeView} for an inline math node. The view will show a
+ * source editor or a rendered display area based on the text cursor position.
+ *
+ * @param renderMathInline - A function that renders math text (e.g. TeX) into
+ * the display element. You can use libraries like [Temml](https://temml.org/)
+ * or [KaTeX](https://katex.org/).
+ * @param node - The ProseMirror node to render.
+ * @param decorations - The decorations applied to the node.
+ *
+ * @public
+ */
 export function createMathInlineView(
   renderMathInline: RenderMathInline,
   node: ProseMirrorNode,
   decorations: readonly Decoration[],
 ): NodeView {
-  const source = createElement('code', 'prosekit-math-source')
-  const display = createElement('span', 'prosekit-math-display')
-  const dom = createElement('span', 'prosekit-math-inline', source, display)
+  const code = createElement('code')
+  const source = createElement('span', 'prosemirror-math-source', code)
+  const display = createElement('span', 'prosemirror-math-display')
+  const dom = createElement('span', 'prosemirror-math-inline', source, display)
 
-  const render = createMathViewRender(renderMathInline, source, display)
+  const render = createMathViewRender(renderMathInline, source, display, true)
 
   render(node, decorations)
 
   return {
     dom,
-    contentDOM: source,
+    contentDOM: code,
     update: (node, decorations) => {
       render(node, decorations)
       return true

package/src/math-view-render.ts

@@ -1,7 +1,7 @@
 import type { Node } from 'prosemirror-model'
 import type { Decoration } from 'prosemirror-view'
 
-import { hasCursorInsideDecoration } from './cursor-inside-plugin'
+import { hasCursorInsideDecoration } from './cursor-inside-plugin.ts'
 
 type RenderMath = (text: string, element: HTMLElement) => void
 
@@ -9,6 +9,7 @@ export function createMathViewRender(
   renderMath: RenderMath,
   source: HTMLElement,
   display: HTMLElement,
+  inline: boolean,
 ) {
   let prevNode: Node | undefined
   let prevText: string | undefined
@@ -32,8 +33,18 @@ export function createMathViewRender(
 
     // When the math node is selected, show the source code.
     // Otherwise, show the rendered result.
-    source.style.display = selected ? '' : 'none'
     display.style.display = selected ? 'none' : ''
+    if (!inline) {
+      source.style.display = selected ? '' : 'none'
+    } else {
+      // For inline source code, we don't use `display: none` because we need
+      // the source text rendered in the DOM to ensure the text cursor can be
+      // placed correctly.
+      Object.assign(
+        source.style,
+        selected ? visibleInlineSourceStyle : hiddenInlineSourceStyle,
+      )
+    }
   }
 
   return function updateMathView(
@@ -44,3 +55,21 @@ export function createMathViewRender(
     updateStyle(decorations)
   }
 }
+
+const hiddenInlineSourceStyle: Partial<CSSStyleDeclaration> = {
+  display: 'inline-flex',
+  opacity: '0',
+  pointerEvents: 'none',
+  maxWidth: '0',
+  maxHeight: '0',
+  overflow: 'hidden',
+}
+
+const visibleInlineSourceStyle: Partial<CSSStyleDeclaration> = {
+  display: 'inline-flex',
+  opacity: '1',
+  pointerEvents: '',
+  maxWidth: '',
+  maxHeight: '',
+  overflow: '',
+}

package/src/temml.ts

@@ -1,9 +1,17 @@
 import Temml from 'temml'
 
 export function renderTemmlMathBlock(text: string, element: HTMLElement) {
-  Temml.render(text, element, { displayMode: true, annotate: true, throwOnError: false })
+  Temml.render(text, element, {
+    displayMode: true,
+    annotate: true,
+    throwOnError: false,
+  })
 }
 
 export function renderTemmlMathInline(text: string, element: HTMLElement) {
-  Temml.render(text, element, { displayMode: false, annotate: true, throwOnError: false })
+  Temml.render(text, element, {
+    displayMode: false,
+    annotate: true,
+    throwOnError: false,
+  })
 }

package/src/testing.ts

@@ -19,16 +19,16 @@ import { createEnterRuleCommand, type EnterRule } from 'prosemirror-enter-rules'
 import { inputRules } from 'prosemirror-inputrules'
 import type { Attrs } from 'prosemirror-model'
 
-import { createCursorInsidePlugin } from './cursor-inside-plugin'
-import { renderKaTeXMathBlock, renderKaTeXMathInline } from './katex'
-import { mathBlockEnterRule } from './math-block-enter-rule'
-import { mathBlockSpec } from './math-block-spec'
-import { createMathBlockView } from './math-block-view'
-import { createMathInlineInputRule } from './math-inline-input-rule'
-import { mathInlineSpec } from './math-inline-spec'
-import { createMathInlineView } from './math-inline-view'
-import { renderMathJaxMathBlock, renderMathJaxMathInline } from './mathjax'
-import { renderTemmlMathBlock, renderTemmlMathInline } from './temml'
+import { createCursorInsidePlugin } from './cursor-inside-plugin.ts'
+import { renderKaTeXMathBlock, renderKaTeXMathInline } from './katex.ts'
+import { mathBlockEnterRule } from './math-block-enter-rule.ts'
+import { mathBlockSpec } from './math-block-spec.ts'
+import { createMathBlockView } from './math-block-view.ts'
+import { createMathInlineInputRule } from './math-inline-input-rule.ts'
+import { mathInlineSpec } from './math-inline-spec.ts'
+import { createMathInlineView } from './math-inline-view.ts'
+import { renderMathJaxMathBlock, renderMathJaxMathInline } from './mathjax.ts'
+import { renderTemmlMathBlock, renderTemmlMathInline } from './temml.ts'
 
 type RenderMath = (text: string, element: HTMLElement) => void
 
@@ -135,11 +135,7 @@ function defineMathBlockView(renderer: MathRenderer): Extension {
   return defineNodeView({
     name: 'mathBlock',
     constructor: (node, _view, _getPos, decorations) => {
-      return createMathBlockView(
-        renderer.renderBlock,
-        node,
-        decorations,
-      )
+      return createMathBlockView(renderer.renderBlock, node, decorations)
     },
   })
 }
@@ -148,11 +144,7 @@ function defineMathInlineView(renderer: MathRenderer): Extension {
   return defineNodeView({
     name: 'mathInline',
     constructor: (node, _view, _getPos, decorations) => {
-      return createMathInlineView(
-        renderer.renderInline,
-        node,
-        decorations,
-      )
+      return createMathInlineView(renderer.renderInline, node, decorations)
     },
   })
 }
@@ -173,7 +165,9 @@ function defineTestExtension(renderer: MathRenderer) {
     defineMathBlockView(renderer),
     defineMathInlineView(renderer),
     defineEnterRule([mathBlockEnterRule]),
-    definePlugin(inputRules({ rules: [createMathInlineInputRule('mathInline')] })),
+    definePlugin(
+      inputRules({ rules: [createMathInlineInputRule('mathInline')] }),
+    ),
     definePlugin(createCursorInsidePlugin()),
     defineBaseCommands(),
     defineBaseKeymap(),