prosemirror-math 0.1.0 → 0.2.0

package/README.md

@@ -91,29 +91,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

@@ -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,18 @@ 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 };

package/dist/prosemirror-math.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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prosemirror-math",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Math extensions for ProseMirror",
   "author": {
@@ -45,6 +45,7 @@
   },
   "devDependencies": {
     "@mathjax/src": "^4.1.0",
+    "@ocavue/tsconfig": "^0.6.3",
     "diffable-html-snapshot": "^0.2.0",
     "katex": "^0.16.28",
     "temml": "^0.13.1",
@@ -52,8 +53,8 @@
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
     "vitest-browser-commands": "^0.2.0",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/core": "^0.10.0"
   },
   "publishConfig": {
     "dev": {}

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', () => {
@@ -15,7 +15,7 @@ describe('cursorInsidePlugin', () => {
     )
     editor.view.dispatch(tr)
 
-    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
+    const mathBlock = editor.view.dom.querySelector('.prosemirror-math-block')
     expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(true)
   })
 
@@ -30,7 +30,7 @@ describe('cursorInsidePlugin', () => {
     )
     editor.view.dispatch(tr)
 
-    const mathInline = editor.view.dom.querySelector('.prosekit-math-inline')
+    const mathInline = editor.view.dom.querySelector('.prosemirror-math-inline')
     expect(mathInline?.classList.contains('prosemirror-math-head-inside')).toBe(true)
   })
 
@@ -45,7 +45,7 @@ describe('cursorInsidePlugin', () => {
     )
     editor.view.dispatch(tr)
 
-    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
+    const mathBlock = editor.view.dom.querySelector('.prosemirror-math-block')
     expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(false)
   })
 })

package/src/index.ts

@@ -1,7 +1,7 @@
-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]> = [

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

@@ -2,6 +2,12 @@ import { createTextBlockEnterRule, type EnterRule } from 'prosemirror-enter-rule
 
 export const MATH_BLOCK_ENTER_REGEXP: RegExp = /^\$\$$/
 
+/**
+ * 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,7 @@
 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 +11,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 +39,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 +72,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 +155,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,25 @@ import { createMathViewRender } from './math-view-render'
  */
 export 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
+ */
 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,8 +1,8 @@
 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)

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

@@ -19,6 +19,14 @@ export const MATH_INPUT_REGEXP: string = (
   + '$'
 )
 
+/**
+ * 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 {

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>

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,7 @@
 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 +11,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 +31,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 +60,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 +138,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/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