prosemirror-math 0.0.1 → 0.2.0

package/src/math-view-render.ts

@@ -0,0 +1,75 @@
+import type { Node } from 'prosemirror-model'
+import type { Decoration } from 'prosemirror-view'
+
+import { hasCursorInsideDecoration } from './cursor-inside-plugin.ts'
+
+type RenderMath = (text: string, element: HTMLElement) => void
+
+export function createMathViewRender(
+  renderMath: RenderMath,
+  source: HTMLElement,
+  display: HTMLElement,
+  inline: boolean,
+) {
+  let prevNode: Node | undefined
+  let prevText: string | undefined
+  let prevSelected: boolean | undefined
+
+  function updateDisplay(node: Node) {
+    if (node === prevNode) return
+    prevNode = node
+
+    const text = node.textContent
+    if (text === prevText) return
+    prevText = text
+
+    renderMath(text, display)
+  }
+
+  function updateStyle(decorations: readonly Decoration[]): void {
+    const selected = hasCursorInsideDecoration(decorations)
+    if (selected === prevSelected) return
+    prevSelected = selected
+
+    // When the math node is selected, show the source code.
+    // Otherwise, show the rendered result.
+    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(
+    node: Node,
+    decorations: readonly Decoration[],
+  ): void {
+    updateDisplay(node)
+    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/mathjax.ts

@@ -0,0 +1,28 @@
+import '@mathjax/src/js/input/tex/base/BaseConfiguration.js'
+
+import { liteAdaptor } from '@mathjax/src/js/adaptors/liteAdaptor.js'
+import type { MmlNode } from '@mathjax/src/js/core/MmlTree/MmlNode.js'
+import { SerializedMmlVisitor } from '@mathjax/src/js/core/MmlTree/SerializedMmlVisitor.js'
+import { RegisterHTMLHandler } from '@mathjax/src/js/handlers/html.js'
+import { TeX } from '@mathjax/src/js/input/tex.js'
+import { mathjax } from '@mathjax/src/js/mathjax.js'
+
+const adaptor = liteAdaptor()
+RegisterHTMLHandler(adaptor)
+
+const tex = new TeX({ packages: ['base'] })
+const htmlDocument = mathjax.document('', { InputJax: tex })
+const visitor = new SerializedMmlVisitor()
+
+function texToMathML(text: string, display: boolean): string {
+  const mathML = htmlDocument.convert(text, { display }) as MmlNode
+  return visitor.visitTree(mathML)
+}
+
+export function renderMathJaxMathBlock(text: string, element: HTMLElement) {
+  element.innerHTML = texToMathML(text, true)
+}
+
+export function renderMathJaxMathInline(text: string, element: HTMLElement) {
+  element.innerHTML = texToMathML(text, false)
+}

package/src/temml.ts

@@ -0,0 +1,9 @@
+import Temml from 'temml'
+
+export function renderTemmlMathBlock(text: string, element: HTMLElement) {
+  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 })
+}

package/src/testing.ts

@@ -1,4 +1,4 @@
-import '@prosekit/pm/view/style/prosemirror.css'
+import 'prosemirror-view/style/prosemirror.css'
 
 import {
   defineBaseCommands,
@@ -15,18 +15,48 @@ import {
   type PlainExtension,
 } from '@prosekit/core'
 import { createTestEditor, type TestEditor } from '@prosekit/core/test'
-import { inputRules } from '@prosekit/pm/inputrules'
-import type { Attrs } from '@prosekit/pm/model'
 import { createEnterRuleCommand, type EnterRule } from 'prosemirror-enter-rules'
-import Temml from 'temml'
+import { inputRules } from 'prosemirror-inputrules'
+import type { Attrs } from 'prosemirror-model'
+
+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
+
+interface MathRenderer {
+  renderBlock: RenderMath
+  renderInline: RenderMath
+}
+
+export const temmlRenderer: MathRenderer = {
+  renderBlock: renderTemmlMathBlock,
+  renderInline: renderTemmlMathInline,
+}
+
+export const katexRenderer: MathRenderer = {
+  renderBlock: renderKaTeXMathBlock,
+  renderInline: renderKaTeXMathInline,
+}
+
+export const mathjaxRenderer: MathRenderer = {
+  renderBlock: renderMathJaxMathBlock,
+  renderInline: renderMathJaxMathInline,
+}
 
-import { createCursorInsidePlugin } from './cursor-inside-plugin'
-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'
+export const renderers = {
+  temml: temmlRenderer,
+  katex: katexRenderer,
+  mathjax: mathjaxRenderer,
+} as const
 
 type DocExtension = Extension<{ Nodes: { doc: Attrs } }>
 
@@ -101,24 +131,28 @@ function defineMathInlineSpec(): MathInlineExtension {
   })
 }
 
-function defineMathBlockView(): Extension {
+function defineMathBlockView(renderer: MathRenderer): Extension {
   return defineNodeView({
     name: 'mathBlock',
-    constructor: (node) => {
-      return createMathBlockView(node, (text, element) => {
-        Temml.render(text, element, { displayMode: true })
-      })
+    constructor: (node, _view, _getPos, decorations) => {
+      return createMathBlockView(
+        renderer.renderBlock,
+        node,
+        decorations,
+      )
     },
   })
 }
 
-function defineMathInlineView(): Extension {
+function defineMathInlineView(renderer: MathRenderer): Extension {
   return defineNodeView({
     name: 'mathInline',
-    constructor: (node) => {
-      return createMathInlineView(node, (text, element) => {
-        Temml.render(text, element, { displayMode: false })
-      })
+    constructor: (node, _view, _getPos, decorations) => {
+      return createMathInlineView(
+        renderer.renderInline,
+        node,
+        decorations,
+      )
     },
   })
 }
@@ -128,7 +162,7 @@ function defineEnterRule(rules: EnterRule[]): PlainExtension {
   return defineKeymap({ Enter: command })
 }
 
-function defineTestExtension() {
+function defineTestExtension(renderer: MathRenderer) {
   return union(
     defineDoc(),
     defineText(),
@@ -136,11 +170,11 @@ function defineTestExtension() {
     defineCodeBlock(),
     defineMathBlockSpec(),
     defineMathInlineSpec(),
-    defineMathBlockView(),
-    defineMathInlineView(),
+    defineMathBlockView(renderer),
+    defineMathInlineView(renderer),
     defineEnterRule([mathBlockEnterRule]),
     definePlugin(inputRules({ rules: [createMathInlineInputRule('mathInline')] })),
-    definePlugin(createCursorInsidePlugin(['mathBlock', 'mathInline'])),
+    definePlugin(createCursorInsidePlugin()),
     defineBaseCommands(),
     defineBaseKeymap(),
   )
@@ -164,8 +198,8 @@ function setupTestFromExtension<E extends Extension>(
   return { editor, n }
 }
 
-export function setupTest() {
-  const { editor, n } = setupTestFromExtension(defineTestExtension())
+export function setupTest(renderer: MathRenderer = temmlRenderer) {
+  const { editor, n } = setupTestFromExtension(defineTestExtension(renderer))
 
   return {
     editor,