[WIP] Add live LaTeX / math preview support in editor

markdown-schema/package.json

@@ -35,6 +35,7 @@
     "happy-dom": "^18.0.1",
     "hast-util-to-html": "^9.0.5",
     "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-math": "^3.0.0",
     "mdast-util-to-hast": "^13.2.1",
     "mdast-util-to-markdown": "^2.1.2",
     "micromark-util-types": "^2.0.2",
@@ -44,6 +45,7 @@
     "prosemirror-tables": "^1.8.1",
     "prosemirror-transformer-markdown": "workspace:*",
     "remark-comment-config": "^8.0.0",
-    "remark-gfm": "catalog:"
+    "remark-gfm": "catalog:",
+    "remark-math": "^6.0.0"
   }
 }

markdown-schema/src/index.ts

@@ -38,3 +38,4 @@ export * from './text/text.js'
 export * from './hardbreak/hardbreak.js'
 export * from './comment/comment'
 export * from './details/details'
+export * from './math/math'

markdown-schema/src/math/math.test.ts

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2025 Riccardo Perra
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test } from 'vitest'
+import {
+  convertPmSchemaToUnist,
+  convertUnistToProsemirror,
+} from 'prosemirror-transformer-markdown/prosemirror'
+import { builders } from 'prosemirror-test-builder'
+import { markdownToUnist } from '@prosemirror-processor/markdown'
+import {
+  getEditorInstance,
+  getNodesBaseExtensions,
+  sameMarkdown,
+  sameNode,
+  testUnknownHandler,
+} from '../test-utils'
+import { defineMathMarkdown, remarkMath } from './math'
+
+const extension = getNodesBaseExtensions([defineMathMarkdown()])
+
+const { doc, p, mathInline, mathBlock } = builders(extension.schema!, {
+  p: { nodeType: 'paragraph' },
+  mathInline: { nodeType: 'mathInline' },
+  mathBlock: { nodeType: 'mathBlock' },
+})
+
+test('(markdown -> prosemirror) inline math', () => {
+  const editor = getEditorInstance(extension)
+  const unist = markdownToUnist('Inline $E = mc^2$ test', {
+    transformers: [remarkMath],
+  })
+
+  const result = convertUnistToProsemirror(
+    unist,
+    editor.schema!,
+    testUnknownHandler,
+  )
+
+  sameNode(result, doc(p('Inline ', mathInline('E = mc^2'), ' test')))
+})
+
+test('(markdown -> prosemirror) block math', () => {
+  const editor = getEditorInstance(extension)
+  const unist = markdownToUnist(
+    [
+      '$$',
+      '\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}',
+      '$$',
+    ].join('\n'),
+    { transformers: [remarkMath] },
+  )
+
+  const result = convertUnistToProsemirror(
+    unist,
+    editor.schema!,
+    testUnknownHandler,
+  )
+
+  sameNode(
+    result,
+    doc(
+      mathBlock(
+        '\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}',
+      ),
+    ),
+  )
+})
+
+test('(prosemirror -> markdown) inline and block math', () => {
+  const editor = getEditorInstance(extension)
+  const result = convertPmSchemaToUnist(
+    doc(
+      p('Inline ', mathInline('a^2 + b^2 = c^2'), ' done'),
+      mathBlock('\\alpha + \\beta'),
+    ),
+    editor.schema!,
+  )
+
+  sameMarkdown(result, 'Inline $a^2 + b^2 = c^2$ done\n\n$$\n\\alpha + \\beta\n$$')
+})

markdown-schema/src/math/math.ts

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2025 Riccardo Perra
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { union, defineNodeSpec } from 'prosekit/core'
+import { mathBlockSpec, mathInlineSpec } from 'prosemirror-math'
+import { pmNode } from '@prosemirror-processor/unist'
+import type {
+  ProseMirrorNodeToMdastHandler,
+  ToProseMirrorNodeHandler,
+} from '@prosemirror-processor/unist/mdast'
+import type { Nodes as MdastNodes } from 'mdast'
+import type { InlineMath, Math } from 'mdast-util-math'
+
+export function defineMathMarkdown() {
+  return union(
+    defineNodeSpec({
+      name: 'mathInline',
+      unistName: 'inlineMath',
+      ...mathInlineSpec,
+      __toUnist: ((node) => {
+        return {
+          type: 'inlineMath',
+          value: node.textContent,
+        }
+      }) satisfies ProseMirrorNodeToMdastHandler<MdastNodes, MdastNodes>,
+      __fromUnist: ((node, children, context) => {
+        const value = (node as InlineMath).value ?? ''
+        const schema = context.schema
+        return pmNode(
+          schema.nodes.mathInline,
+          value ? [schema.text(value)] : [],
+        )
+      }) satisfies ToProseMirrorNodeHandler<MdastNodes>,
+    }),
+    defineNodeSpec({
+      name: 'mathBlock',
+      unistName: 'math',
+      ...mathBlockSpec,
+      __toUnist: ((node) => {
+        return {
+          type: 'math',
+          value: node.textContent,
+        }
+      }) satisfies ProseMirrorNodeToMdastHandler<MdastNodes, MdastNodes>,
+      __fromUnist: ((node, children, context) => {
+        const value = (node as Math).value ?? ''
+        const schema = context.schema
+        return pmNode(
+          schema.nodes.mathBlock,
+          value ? [schema.text(value)] : [],
+        )
+      }) satisfies ToProseMirrorNodeHandler<MdastNodes>,
+    }),
+  )
+}
+
+export { default as remarkMath } from 'remark-math'

markdown-transformer/package.json

@@ -32,6 +32,7 @@
     "@types/mdast": "catalog:",
     "@types/unist": "catalog:",
     "hastscript": "^9.0.1",
+    "mdast-util-math": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.2",
     "prosemirror-model": "catalog:",
     "rehype-meta": "^4.0.1",

markdown-transformer/src/unified/markdownFromUnistNode.ts

@@ -1,6 +1,8 @@
 import type { Root } from "mdast";
 import { unistToMarkdown } from "@prosemirror-processor/markdown";
 import { defaultHandlers } from "mdast-util-to-markdown";
+import { mathToMarkdown } from "mdast-util-math";
+import type { InlineMath, Math as BlockMath } from "mdast-util-math";
 
 export function markdownFromUnistNode(rootNode: Root): string {
   return unistToMarkdown(rootNode, {
@@ -14,7 +16,13 @@ export function markdownFromUnistNode(rootNode: Root): string {
       incrementListMarker: true,
       rule: "-",
       strong: "*",
+      extensions: [mathToMarkdown()],
       handlers: {
+        inlineMath: (node) => `$${(node as InlineMath).value ?? ""}$`,
+        math: (node) => {
+          const value = (node as BlockMath).value ?? "";
+          return ["$$", value, "$$"].join("\n");
+        },
         break: (node, parent, state, info) => {
           if (parent && parent.type === "tableCell") {
             return "<br>";

package.json

@@ -61,21 +61,25 @@
     "clsx": "^2.1.1",
     "codemirror": "^6.0.1",
     "comlink": "^4.4.2",
+    "katex": "^0.16.45",
     "linkifyjs": "^4.3.2",
     "lucide-solid": "^0.544.0",
     "mdast-util-find-and-replace": "^3.0.2",
     "mdast-util-to-markdown": "^2.1.2",
     "motion": "^12.23.16",
     "prosekit": "catalog:",
     "prosemirror-commands": "catalog:",
+    "prosemirror-enter-rules": "^0.1.5",
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-inputrules": "catalog:",
+    "prosemirror-math": "^0.2.2",
     "prosemirror-model": "catalog:",
     "prosemirror-state": "catalog:",
     "prosemirror-transformer-markdown": "workspace:*",
     "prosemirror-view": "catalog:",
     "rehype-stringify": "^10.0.1",
     "remark-gfm": "catalog:",
+    "remark-math": "^6.0.0",
     "remark-parse": "catalog:",
     "remark-rehype": "catalog:",
     "remark-stringify": "catalog:",