prosemirror-math 0.0.1 → 0.2.0

package/README.md

@@ -8,6 +8,8 @@ Math editing extensions for [ProseMirror](https://prosemirror.net/). Provides no
 npm install prosemirror-math
 ```
 
+<!-- TODO: Add live demo link -->
+
 ## Usage
 
 ### Node specs
@@ -23,8 +25,8 @@ const schema = new Schema({
     doc: { content: 'block+' },
     paragraph: { content: 'inline*', group: 'block', parseDOM: [{ tag: 'p' }], toDOM: () => ['p', 0] },
     text: { group: 'inline' },
-    mathBlock: { ...mathBlockSpec,   },
-    mathInline: { ...mathInlineSpec,  },
+    mathBlock: { ...mathBlockSpec },
+    mathInline: { ...mathInlineSpec },
   },
 })
 ```
@@ -41,12 +43,12 @@ import Temml from 'temml'
 const view = new EditorView(document.body, {
   state,
   nodeViews: {
-    mathBlock: (node) => createMathBlockView(node, (text, element) => {
+    mathBlock: (node, view, getPos, decorations) => createMathBlockView((text, element) => {
       Temml.render(text, element, { displayMode: true })
-    }),
-    mathInline: (node) => createMathInlineView(node, (text, element) => {
+    }, node, decorations),
+    mathInline: (node, view, getPos, decorations) => createMathInlineView((text, element) => {
       Temml.render(text, element, { displayMode: false })
-    }),
+    }, node, decorations),
   },
 })
 ```
@@ -66,7 +68,7 @@ const plugin = inputRules({
 
 ### Enter rule
 
-`mathBlockEnterRule` is an [EnterRule](https://github.com/prosekit/prosekit/tree/master/packages/prosemirror-enter-rules) that converts a paragraph containing `$$` into a math block when Enter is pressed.
+`mathBlockEnterRule` is an [EnterRule](https://www.npmjs.com/package/prosemirror-enter-rules) that converts a paragraph containing `$$` into a math block when Enter is pressed.
 
 ```ts
 import { createEnterRulePlugin } from 'prosemirror-enter-rules'
@@ -79,39 +81,17 @@ const plugin = createEnterRulePlugin({
 
 ### Cursor inside plugin
 
-`createCursorInsidePlugin` adds a `prosekit-head-inside` CSS class to math nodes when the cursor is inside them, useful for styling the active math node.
+`createCursorInsidePlugin` adds a `prosemirror-math-head-inside` CSS class to math nodes when the cursor is inside them, useful for styling the active math node.
 
 ```ts
 import { createCursorInsidePlugin } from 'prosemirror-math'
 
-const plugin = createCursorInsidePlugin(['mathBlock', 'mathInline'])
+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(node, renderMath)`** — Creates a block math NodeView
-- **`createMathInlineView(node, renderMath)`** — 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(nodeTypes)`** — Plugin that decorates math nodes containing the cursor
+[API Reference](https://npmx.dev/package-docs/prosemirror-math)
 
 ## License
 

package/dist/prosemirror-math.d.ts

@@ -1,42 +1,99 @@
 import { Plugin } from "prosemirror-state";
-import { NodeView } from "prosemirror-view";
+import { Decoration, NodeView } from "prosemirror-view";
 import { EnterRule } from "prosemirror-enter-rules";
 import { InputRule } from "prosemirror-inputrules";
 import { Node, NodeSpec } from "prosemirror-model";
 
 //#region src/cursor-inside-plugin.d.ts
-declare function createCursorInsidePlugin(nodeTypes: string[]): Plugin;
+/**
+ * Creates a plugin that adds a `prosemirror-math-head-inside` CSS class to math
+ * nodes when the text selection head is inside them. This is useful for styling
+ * math nodes differently while they are being edited.
+ *
+ * The plugin automatically detects nodes in the `math` group.
+ *
+ * @public
+ */
+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
 /**
  * The function to render a math block.
  *
- * @param code - The code of the math block. For example, a TeX expression.
+ * @param text - The text of the math block. For example, a TeX expression.
  * @param element - A `<div>` element to render the math block.
  */
-type RenderMathBlock = (code: string, element: HTMLElement) => void;
-declare function createMathBlockView(node: Node, renderMathBlock: RenderMathBlock): NodeView;
+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
 /**
  * The function to render a math inline.
  *
- * @param code - The code of the math inline. For example, a TeX expression.
+ * @param text - The text of the math inline. For example, a TeX expression.
  * @param element - A `<span>` element to render the math inline.
  */
-type RenderMathInline = (code: string, element: HTMLElement) => void;
-declare function createMathInlineView(node: Node, renderMathInline: RenderMathInline): NodeView;
+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

@@ -5,23 +5,39 @@ import { supportsRegexLookbehind } from "@ocavue/utils";
 import { InputRule } from "prosemirror-inputrules";
 
 //#region src/cursor-inside-plugin.ts
-function createCursorInsideDecoration(state, nodeTypes) {
+const DECORATION_SPEC = "MATH_CURSOR_INSIDE";
+function createCursorInsideDecoration(state) {
 	const { $head } = state.selection;
 	const node = $head.parent;
-	if (!nodeTypes.includes(node.type.name)) return;
+	if (!node.type.isInGroup("math")) return;
 	const before = $head.before();
-	const deco = Decoration.node(before, before + node.nodeSize, { class: "prosekit-head-inside" });
+	const deco = Decoration.node(before, before + node.nodeSize, { class: "prosemirror-math-head-inside" }, DECORATION_SPEC);
 	return DecorationSet.create(state.doc, [deco]);
 }
-const key = new PluginKey("prosemirror-math-cursor-inside");
-function createCursorInsidePlugin(nodeTypes) {
+/**
+* @internal
+*/
+function hasCursorInsideDecoration(decorations) {
+	return decorations.some((deco) => deco.spec === DECORATION_SPEC);
+}
+/**
+* Creates a plugin that adds a `prosemirror-math-head-inside` CSS class to math
+* nodes when the text selection head is inside them. This is useful for styling
+* math nodes differently while they are being edited.
+*
+* The plugin automatically detects nodes in the `math` group.
+*
+* @public
+*/
+function createCursorInsidePlugin() {
+	const key = new PluginKey("prosemirror-math-cursor-inside");
 	return new Plugin({
 		key,
 		state: {
 			init() {},
 			apply(tr, oldValue, oldState, newState) {
-				if (oldState.selection.eq(newState.selection) && tr.docChanged === false) return oldValue;
-				return createCursorInsideDecoration(newState, nodeTypes);
+				if (oldState.selection.head === newState.selection.head && !tr.docChanged) return oldValue;
+				return createCursorInsideDecoration(newState);
 			}
 		},
 		props: { decorations(state) {
@@ -33,6 +49,12 @@ function createCursorInsidePlugin(nodeTypes) {
 //#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"
@@ -40,19 +62,27 @@ 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",
+	group: "block math",
 	content: "text*",
 	code: true,
 	toDOM() {
 		return [
 			"div",
-			{ class: "prosekit-math-block" },
+			{ class: "prosemirror-math-block" },
 			["pre", ["code", 0]]
 		];
 	},
-	parseDOM: [{ tag: "div.prosekit-math-block" }]
+	parseDOM: [{
+		tag: "div.prosemirror-math-block",
+		contentElement: "code"
+	}]
 };
 
 //#endregion
@@ -64,27 +94,76 @@ function createElement(tag, className, ...children) {
 	return element;
 }
 
+//#endregion
+//#region src/math-view-render.ts
+function createMathViewRender(renderMath, source, display, inline) {
+	let prevNode;
+	let prevText;
+	let prevSelected;
+	function updateDisplay(node) {
+		if (node === prevNode) return;
+		prevNode = node;
+		const text = node.textContent;
+		if (text === prevText) return;
+		prevText = text;
+		renderMath(text, display);
+	}
+	function updateStyle(decorations) {
+		const selected = hasCursorInsideDecoration(decorations);
+		if (selected === prevSelected) return;
+		prevSelected = selected;
+		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
-function createMathBlockView(node, renderMathBlock) {
+/**
+* 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", source);
-	const dom = createElement("div", "prosekit-math-block", source, display);
-	let prevText = "";
-	const render = (node) => {
-		const nodeText = node.textContent;
-		if (prevText !== nodeText) {
-			prevText = nodeText;
-			renderMathBlock(nodeText, display);
-		}
-	};
-	render(node);
+	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,
 		contentDOM: code,
-		update: (node) => {
-			render(node);
+		update: (node, decorations) => {
+			render(node, decorations);
 			return true;
 		}
 	};
@@ -93,6 +172,14 @@ function createMathBlockView(node, renderMathBlock) {
 //#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;
@@ -108,43 +195,57 @@ 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,
-	group: "inline",
+	group: "inline math",
 	content: "text*",
 	selectable: false,
 	code: true,
 	toDOM() {
 		return [
 			"span",
-			{ class: "prosekit-math-inline" },
+			{ class: "prosemirror-math-inline" },
 			["code", 0]
 		];
 	},
-	parseDOM: [{ tag: "span.prosekit-math-inline" }]
+	parseDOM: [{
+		tag: "span.prosemirror-math-inline",
+		contentElement: "code"
+	}]
 };
 
 //#endregion
 //#region src/math-inline-view.ts
-function createMathInlineView(node, renderMathInline) {
-	const source = createElement("code", "prosekit-math-source");
-	const display = createElement("span", "prosekit-math-display", source);
-	const dom = createElement("span", "prosekit-math-inline", source, display);
-	let prevText = "";
-	const render = (node) => {
-		const nodeText = node.textContent;
-		if (prevText !== nodeText) {
-			prevText = nodeText;
-			renderMathInline(nodeText, display);
-		}
-	};
-	render(node);
+/**
+* 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 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,
-		update: (node) => {
-			render(node);
+		contentDOM: code,
+		update: (node, decorations) => {
+			render(node, decorations);
 			return true;
 		}
 	};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prosemirror-math",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "private": false,
   "description": "Math extensions for ProseMirror",
   "author": {
@@ -37,22 +37,24 @@
   ],
   "dependencies": {
     "@ocavue/utils": "^1.5.0",
-    "prosemirror-inputrules": "^1.4.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.2"
+    "prosemirror-enter-rules": "^0.1.3"
   },
   "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",
     "tsdown": "^0.20.3",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
     "vitest-browser-commands": "^0.2.0",
     "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/pm": "^0.1.15"
+    "@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 '@prosekit/pm/state'
+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,8 +15,8 @@ describe('cursorInsidePlugin', () => {
     )
     editor.view.dispatch(tr)
 
-    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
-    expect(mathBlock?.classList.contains('prosekit-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', () => {
@@ -30,8 +30,8 @@ describe('cursorInsidePlugin', () => {
     )
     editor.view.dispatch(tr)
 
-    const mathInline = editor.view.dom.querySelector('.prosekit-math-inline')
-    expect(mathInline?.classList.contains('prosekit-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', () => {
@@ -45,7 +45,7 @@ describe('cursorInsidePlugin', () => {
     )
     editor.view.dispatch(tr)
 
-    const mathBlock = editor.view.dom.querySelector('.prosekit-math-block')
-    expect(mathBlock?.classList.contains('prosekit-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

@@ -1,24 +1,46 @@
 import { Plugin, PluginKey, type EditorState } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 
+const DECORATION_SPEC = 'MATH_CURSOR_INSIDE'
+
 function createCursorInsideDecoration(
   state: EditorState,
-  nodeTypes: string[],
 ): DecorationSet | undefined {
   const { $head } = state.selection
   const node = $head.parent
 
-  if (!nodeTypes.includes(node.type.name)) return
+  if (!node.type.isInGroup('math')) return
+
   const before = $head.before()
-  const deco = Decoration.node(before, before + node.nodeSize, { class: 'prosekit-head-inside' })
+  const deco = Decoration.node(
+    before,
+    before + node.nodeSize,
+    { class: 'prosemirror-math-head-inside' },
+    DECORATION_SPEC,
+  )
   return DecorationSet.create(state.doc, [deco])
 }
 
-type PluginState = DecorationSet | undefined
+/**
+ * @internal
+ */
+export function hasCursorInsideDecoration(decorations: readonly Decoration[]): boolean {
+  return decorations.some(deco => deco.spec === DECORATION_SPEC)
+}
 
-const key = new PluginKey<PluginState>('prosemirror-math-cursor-inside')
+type PluginState = DecorationSet | undefined
 
-export function createCursorInsidePlugin(nodeTypes: string[]): Plugin {
+/**
+ * Creates a plugin that adds a `prosemirror-math-head-inside` CSS class to math
+ * nodes when the text selection head is inside them. This is useful for styling
+ * math nodes differently while they are being edited.
+ *
+ * The plugin automatically detects nodes in the `math` group.
+ *
+ * @public
+ */
+export function createCursorInsidePlugin(): Plugin {
+  const key = new PluginKey<PluginState>('prosemirror-math-cursor-inside')
   return new Plugin<PluginState>({
     key,
     state: {
@@ -26,8 +48,13 @@ export function createCursorInsidePlugin(nodeTypes: string[]): Plugin {
         return undefined
       },
       apply(tr, oldValue, oldState, newState): PluginState {
-        if (oldState.selection.eq(newState.selection) && tr.docChanged === false) return oldValue
-        return createCursorInsideDecoration(newState, nodeTypes)
+        if (
+          oldState.selection.head === newState.selection.head
+          && !tr.docChanged
+        ) {
+          return oldValue
+        }
+        return createCursorInsideDecoration(newState)
       },
     },
     props: {

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/katex.ts

@@ -0,0 +1,9 @@
+import katex from 'katex'
+
+export function renderKaTeXMathBlock(text: string, element: HTMLElement) {
+  katex.render(text, element, { displayMode: true, throwOnError: false })
+}
+
+export function renderKaTeXMathInline(text: string, element: HTMLElement) {
+  katex.render(text, element, { displayMode: false, throwOnError: false })
+}

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]> = [