prosemirror-math 0.2.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,
+      ),
   },
 })
 ```

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

@@ -96,4 +96,5 @@ type RenderMathInline = (text: string, element: HTMLElement) => void;
  */
 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}

@@ -252,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.2.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,43 +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/config-vitest": "0.0.0",
-    "@prosekit/core": "^0.10.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/cursor-inside-plugin.spec.ts

@@ -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('.prosemirror-math-block')
-    expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(true)
+    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('.prosemirror-math-inline')
-    expect(mathInline?.classList.contains('prosemirror-math-head-inside')).toBe(true)
+    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('.prosemirror-math-block')
-    expect(mathBlock?.classList.contains('prosemirror-math-head-inside')).toBe(false)
+    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

@@ -4,4 +4,7 @@ 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'
+export {
+  createMathInlineView,
+  type RenderMathInline,
+} from './math-inline-view.ts'

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

@@ -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,4 +1,7 @@
-import { createTextBlockEnterRule, type EnterRule } from 'prosemirror-enter-rules'
+import {
+  createTextBlockEnterRule,
+  type EnterRule,
+} from 'prosemirror-enter-rules'
 
 export const MATH_BLOCK_ENTER_REGEXP: RegExp = /^\$\$$/
 
@@ -8,7 +11,8 @@ export const MATH_BLOCK_ENTER_REGEXP: RegExp = /^\$\$$/
  *
  * @public
  */
-export const mathBlockEnterRule: EnterRule = /* @__PURE__ */ createTextBlockEnterRule({
-  regex: MATH_BLOCK_ENTER_REGEXP,
-  type: 'mathBlock',
-})
+export const mathBlockEnterRule: EnterRule =
+  /* @__PURE__ */ createTextBlockEnterRule({
+    regex: MATH_BLOCK_ENTER_REGEXP,
+    type: 'mathBlock',
+  })

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.ts'
+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]

package/src/math-block-view.ts

@@ -24,7 +24,11 @@ export type RenderMathBlock = (text: string, element: HTMLElement) => void
  *
  * @public
  */
-export function createMathBlockView(renderMathBlock: RenderMathBlock, node: ProseMirrorNode, decorations: readonly Decoration[]): NodeView {
+export function createMathBlockView(
+  renderMathBlock: RenderMathBlock,
+  node: ProseMirrorNode,
+  decorations: readonly Decoration[],
+): NodeView {
   const code = createElement('code')
   const source = createElement('pre', 'prosemirror-math-source', code)
   const display = createElement('div', 'prosemirror-math-display')

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

@@ -7,7 +7,9 @@ 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,20 +4,19 @@ 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)
-  + '$'
-)
+  '$'
 
 /**
  * Creates a ProseMirror {@link InputRule} that converts text wrapped in `$` or
@@ -27,19 +26,20 @@ export const MATH_INPUT_REGEXP: string = (
  *
  * @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
+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

@@ -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-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.ts'
+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]

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

@@ -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(),