prosemirror-math 0.0.1

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

@@ -0,0 +1,65 @@
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from './testing'
+
+describe('mathBlockSpec', () => {
+  it('can serialize to HTML', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock('E = mc^2')))
+    const html = editor.getDocHTML()
+    expect(formatHTML(html)).toMatchInlineSnapshot(
+      `
+      "
+      <div>
+        <div class="prosekit-math-block">
+          <pre>
+            <code>
+              E = mc^2
+            </code>
+          </pre>
+        </div>
+      </div>
+      "
+    `,
+    )
+  })
+
+  it('can serialize to JSON', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock('x^2 + y^2 = z^2')))
+    const json = editor.getDocJSON()
+    expect(json).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "content": [
+              {
+                "text": "x^2 + y^2 = z^2",
+                "type": "text",
+              },
+            ],
+            "type": "mathBlock",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+  })
+
+  it('can handle empty math block', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock()))
+    const json = editor.getDocJSON()
+    expect(json).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "type": "mathBlock",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+  })
+})

package/src/math-block-spec.ts

@@ -0,0 +1,22 @@
+import type { NodeSpec } from 'prosemirror-model'
+
+export const mathBlockSpec: NodeSpec = {
+  atom: false,
+  group: 'block',
+  content: 'text*',
+  code: true,
+  toDOM() {
+    return [
+      'div',
+      {
+        class: 'prosekit-math-block',
+      },
+      ['pre', ['code', 0]],
+    ]
+  },
+  parseDOM: [
+    {
+      tag: 'div.prosekit-math-block',
+    },
+  ],
+}

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

@@ -0,0 +1,59 @@
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from './testing'
+
+describe('createMathBlockView', () => {
+  it('renders the math block DOM structure', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock('x^2')))
+
+    const dom = editor.view.dom
+    const mathBlock = dom.querySelector('.prosekit-math-block')
+    expect(mathBlock).toBeTruthy()
+    expect(mathBlock?.querySelector('.prosekit-math-source')).toBeTruthy()
+    expect(mathBlock?.querySelector('.prosekit-math-display')).toBeTruthy()
+  })
+
+  it('renders Temml output in the display element', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock('x^2')))
+
+    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const html = formatHTML(display?.innerHTML || '')
+    expect(html).toMatchInlineSnapshot(`
+      "
+      <math
+        class="tml-display"
+        display="block"
+        style="display: block math;"
+      >
+        <msup>
+          <mi>
+            x
+          </mi>
+          <mn class="tml-sml-pad">
+            2
+          </mn>
+        </msup>
+      </math>
+      "
+    `)
+  })
+
+  it('updates display when content changes', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.mathBlock('x^2')))
+
+    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const initialHTML = display?.innerHTML
+
+    // Dispatch a transaction to change content
+    const { state } = editor.view
+    const tr = state.tr.insertText(' + y^2', 3)
+    editor.view.dispatch(tr)
+
+    const updatedHTML = display?.innerHTML
+    expect(updatedHTML).not.toBe(initialHTML)
+  })
+})

package/src/math-block-view.ts

@@ -0,0 +1,40 @@
+import type { Node as ProseMirrorNode } from 'prosemirror-model'
+import type { NodeView } from 'prosemirror-view'
+
+import { createElement } from './create-element'
+
+/**
+ * The function to render a math block.
+ *
+ * @param code - The code of the math block. For example, a TeX expression.
+ * @param element - A `<div>` element to render the math block.
+ */
+export type RenderMathBlock = (code: string, element: HTMLElement) => void
+
+export function createMathBlockView(node: ProseMirrorNode, renderMathBlock: RenderMathBlock): NodeView {
+  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: ProseMirrorNode) => {
+    const nodeText = node.textContent
+    if (prevText !== nodeText) {
+      prevText = nodeText
+      renderMathBlock(nodeText, display)
+    }
+  }
+
+  render(node)
+
+  return {
+    dom,
+    contentDOM: code,
+    update: (node) => {
+      render(node)
+      return true
+    },
+  }
+}

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

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest'
+import { userEvent } from 'vitest/browser'
+
+import { MATH_INPUT_REGEXP } from './math-inline-input-rule'
+import { setupTest } from './testing'
+
+describe('MATH_INPUT_REGEXP', () => {
+  const regexp = new RegExp(MATH_INPUT_REGEXP)
+
+  const cases: Array<[input: string, delimiter: string | null, captured: string | null]> = [
+    // Single dollar: inline math
+    ['$x$', '$', 'x'],
+    ['$x^2$', '$', 'x^2'],
+    ['$a+b=c$', '$', 'a+b=c'],
+    [String.raw`$\alpha$`, '$', String.raw`\alpha`],
+    [String.raw`$\frac{a}{b}$`, '$', String.raw`\frac{a}{b}`],
+    ['hello $x$', '$', 'x'],
+    ['The formula $E=mc^2$', '$', 'E=mc^2'],
+    ['$a + b$', '$', 'a + b'],
+    ['$a$', '$', 'a'],
+
+    // Double dollar: block math
+    ['$$x$$', '$$', 'x'],
+    ['$$x^2$$', '$$', 'x^2'],
+    ['$$a+b=c$$', '$$', 'a+b=c'],
+    [String.raw`$$\alpha$$`, '$$', String.raw`\alpha`],
+    ['$$a + b$$', '$$', 'a + b'],
+
+    // Empty content — should not match
+    ['$$', null, null],
+    ['$$$$', null, null],
+
+    // Whitespace at boundaries — should not match
+    ['$ x$', null, null],
+    ['$x $', null, null],
+    ['$ x $', null, null],
+    ['$$ x$$', null, null],
+    ['$$x $$', null, null],
+
+    // Mismatched delimiters — should not match
+    ['$x$$', null, null],
+    ['$$x$', null, null],
+    ['$$$x=2$$', null, null],
+
+    // No dollar signs
+    ['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)
+  })
+})
+
+describe('defineMathInlineInputRule', () => {
+  const { editor, n } = setupTest()
+
+  it('should create mathInline when typing $...$', async () => {
+    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(),
+    )
+
+    await userEvent.keyboard('$')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(n.mathInline('x^2'))).toJSON(),
+    )
+  })
+
+  it('should create mathInline when typing $$...$$', async () => {
+    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(),
+    )
+
+    await userEvent.keyboard('$')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(n.mathInline('x^2'))).toJSON(),
+    )
+  })
+
+  it('should create mathInline with multi-character content', async () => {
+    editor.set(n.doc(n.p('<a>')))
+
+    await userEvent.keyboard('$a+b=c$')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p(n.mathInline('a+b=c'))).toJSON(),
+    )
+  })
+
+  it('should not trigger with empty content $$', async () => {
+    editor.set(n.doc(n.p('<a>')))
+
+    await userEvent.keyboard('$$')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.p('$$')).toJSON(),
+    )
+  })
+
+  it('should not trigger with spaces at boundaries', async () => {
+    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(),
+    )
+  })
+
+  it('should not trigger inside a code block', async () => {
+    editor.set(n.doc(n.codeBlock('<a>')))
+
+    await userEvent.keyboard('$x^2$')
+    expect(editor.view.state.doc.toJSON()).toEqual(
+      n.doc(n.codeBlock('$x^2$')).toJSON(),
+    )
+  })
+})

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

@@ -0,0 +1,37 @@
+/* eslint-disable unicorn/prefer-string-raw -- Don't use String.raw here for better bundler minification */
+
+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 = (
+  // Don't allow $ before the opening delimiter
+  (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$])?)'
+  // backreference: closing delimiter must match the opening
+  + '\\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
+
+    const type = schema.nodes[nodeType]
+    if (!type) return null
+
+    const node = type.create(null, schema.text(mathText))
+    tr.replaceWith(start, end, node)
+    return tr
+  })
+}

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

@@ -0,0 +1,110 @@
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from './testing'
+
+describe('mathInlineSpec', () => {
+  it('can serialize to HTML', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
+    const html = editor.getDocHTML()
+    expect(formatHTML(html)).toMatchInlineSnapshot(
+      `
+      "
+      <div>
+        <p>
+          <span class="prosekit-math-inline">
+            <code>
+              x^2
+            </code>
+          </span>
+        </p>
+      </div>
+      "
+    `,
+    )
+  })
+
+  it('can serialize to JSON', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline(String.raw`\alpha + \beta`))))
+    const json = editor.getDocJSON()
+    expect(json).toMatchInlineSnapshot(String.raw`
+      {
+        "content": [
+          {
+            "content": [
+              {
+                "content": [
+                  {
+                    "text": "\alpha + \beta",
+                    "type": "text",
+                  },
+                ],
+                "type": "mathInline",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+  })
+
+  it('can handle empty math inline', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline())))
+    const json = editor.getDocJSON()
+    expect(json).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "content": [
+              {
+                "type": "mathInline",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+  })
+
+  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.')))
+    const json = editor.getDocJSON()
+    expect(json).toMatchInlineSnapshot(`
+      {
+        "content": [
+          {
+            "content": [
+              {
+                "text": "The formula ",
+                "type": "text",
+              },
+              {
+                "content": [
+                  {
+                    "text": "E=mc^2",
+                    "type": "text",
+                  },
+                ],
+                "type": "mathInline",
+              },
+              {
+                "text": " is famous.",
+                "type": "text",
+              },
+            ],
+            "type": "paragraph",
+          },
+        ],
+        "type": "doc",
+      }
+    `)
+  })
+})

package/src/math-inline-spec.ts

@@ -0,0 +1,24 @@
+import type { NodeSpec } from 'prosemirror-model'
+
+export const mathInlineSpec: NodeSpec = {
+  atom: false,
+  inline: true,
+  group: 'inline',
+  content: 'text*',
+  selectable: false,
+  code: true,
+  toDOM() {
+    return [
+      'span',
+      {
+        class: 'prosekit-math-inline',
+      },
+      ['code', 0],
+    ]
+  },
+  parseDOM: [
+    {
+      tag: 'span.prosekit-math-inline',
+    },
+  ],
+}

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

@@ -0,0 +1,47 @@
+import { formatHTML } from 'diffable-html-snapshot'
+import { describe, expect, it } from 'vitest'
+
+import { setupTest } from './testing'
+
+describe('createMathInlineView', () => {
+  it('renders the math inline DOM structure', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
+
+    const dom = editor.view.dom
+    const mathInline = dom.querySelector('.prosekit-math-inline')
+    expect(mathInline).toBeTruthy()
+    expect(mathInline?.querySelector('.prosekit-math-source')).toBeTruthy()
+    expect(mathInline?.querySelector('.prosekit-math-display')).toBeTruthy()
+  })
+
+  it('renders Temml output in the display element', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline('x^2'))))
+
+    const display = editor.view.dom.querySelector('.prosekit-math-display')
+    const html = formatHTML(display?.innerHTML || '')
+    expect(html).toMatchInlineSnapshot(`
+      "
+      <math>
+        <msup>
+          <mi>
+            x
+          </mi>
+          <mn class="tml-sml-pad">
+            2
+          </mn>
+        </msup>
+      </math>
+      "
+    `)
+  })
+
+  it('uses span elements for inline math', () => {
+    const { editor, n } = setupTest()
+    editor.set(n.doc(n.paragraph(n.mathInline('x'))))
+
+    const mathInline = editor.view.dom.querySelector('.prosekit-math-inline')
+    expect(mathInline?.tagName).toBe('SPAN')
+  })
+})

package/src/math-inline-view.ts

@@ -0,0 +1,39 @@
+import type { Node as ProseMirrorNode } from 'prosemirror-model'
+import type { NodeView } from 'prosemirror-view'
+
+import { createElement } from './create-element'
+
+/**
+ * The function to render a math inline.
+ *
+ * @param code - The code of the math inline. For example, a TeX expression.
+ * @param element - A `<span>` element to render the math inline.
+ */
+export type RenderMathInline = (code: string, element: HTMLElement) => void
+
+export function createMathInlineView(node: ProseMirrorNode, renderMathInline: RenderMathInline): NodeView {
+  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: ProseMirrorNode) => {
+    const nodeText = node.textContent
+    if (prevText !== nodeText) {
+      prevText = nodeText
+      renderMathInline(nodeText, display)
+    }
+  }
+
+  render(node)
+
+  return {
+    dom,
+    contentDOM: source,
+    update: (node) => {
+      render(node)
+      return true
+    },
+  }
+}