@tiptap/extension-mathematics 3.0.0-beta.16 → 3.0.0-beta.17

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-mathematics",
   "description": "latex math extension for tiptap",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.17",
   "homepage": "https://tiptap.dev/api/extensions/mathematics",
   "keywords": [
     "tiptap",
@@ -37,13 +37,13 @@
   ],
   "devDependencies": {
     "@types/katex": "^0.16.7",
-    "@tiptap/core": "3.0.0-beta.16",
-    "@tiptap/pm": "3.0.0-beta.16"
+    "@tiptap/core": "3.0.0-beta.17",
+    "@tiptap/pm": "3.0.0-beta.17"
   },
   "peerDependencies": {
     "katex": "^0.16.4",
-    "@tiptap/core": "3.0.0-beta.16",
-    "@tiptap/pm": "3.0.0-beta.16"
+    "@tiptap/core": "3.0.0-beta.17",
+    "@tiptap/pm": "3.0.0-beta.17"
   },
   "scripts": {
     "build": "tsup",

package/src/extensions/BlockMath.ts

@@ -0,0 +1,210 @@
+import { InputRule, mergeAttributes, Node } from '@tiptap/core'
+import type { Node as PMNode } from '@tiptap/pm/model'
+import katex from 'katex'
+
+export type BlockMathOptions = {
+  onClick?: (node: PMNode, pos: number) => void
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    blockMath: {
+      /**
+       * Set block math node with LaTeX string.
+       * @param options - Options for setting block math.
+       * @returns ReturnType
+       */
+      setBlockMath: (options: { latex: string; pos?: number }) => ReturnType
+
+      /**
+       * Unset block math node.
+       * @returns ReturnType
+       */
+      unsetBlockMath: (options?: { pos?: number }) => ReturnType
+
+      /**
+       * Update block math node with optional LaTeX string.
+       * @param options - Options for updating block math.
+       * @returns ReturnType
+       */
+      updateBlockMath: (options?: { latex?: string; pos?: number }) => ReturnType
+    }
+  }
+}
+
+/**
+ * BlockMath is a Tiptap extension for rendering block mathematical expressions using KaTeX.
+ * It allows users to insert LaTeX formatted math expressions block within text.
+ * It supports rendering, input rules for LaTeX syntax, and click handling for interaction.
+ *
+ * @example
+ * ```javascript
+ * import { BlockMath } from 'your-extension-path'
+ * import { Editor } from '@tiptap/core'
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     BlockMath.configure({
+ *       onClick: (node, pos) => {
+ *         console.log('Block math clicked:', node.attrs.latex, 'at position:', pos)
+ *       },
+ *     }),
+ *   ],
+ * })
+ */
+export const BlockMath = Node.create({
+  name: 'blockMath',
+
+  group: 'block',
+
+  atom: true,
+
+  addOptions() {
+    return {
+      onClick: undefined,
+    }
+  },
+
+  addAttributes() {
+    return {
+      latex: {
+        default: '',
+        parseHTML: element => element.getAttribute('data-latex'),
+        renderHTML: attributes => {
+          return {
+            'data-latex': attributes.latex,
+          }
+        },
+      },
+    }
+  },
+
+  addCommands() {
+    return {
+      setBlockMath:
+        options =>
+        ({ commands, editor }) => {
+          const { latex, pos } = options
+          return commands.insertContentAt(pos ?? editor.state.selection.from, {
+            type: this.name,
+            attrs: { latex },
+          })
+        },
+
+      unsetBlockMath:
+        options =>
+        ({ editor, tr }) => {
+          const pos = options?.pos ?? editor.state.selection.$from.pos
+          const node = editor.state.doc.nodeAt(pos)
+
+          if (!node || node.type.name !== this.name) {
+            return false
+          }
+
+          tr.delete(pos, pos + node.nodeSize)
+          return true
+        },
+
+      updateBlockMath:
+        options =>
+        ({ editor, tr }) => {
+          const latex = options?.latex
+          let pos = options?.pos
+
+          if (pos === undefined) {
+            pos = editor.state.selection.$from.pos
+          }
+
+          const node = editor.state.doc.nodeAt(pos)
+
+          if (!node || node.type.name !== this.name) {
+            return false
+          }
+
+          tr.setNodeMarkup(pos, this.type, {
+            ...node.attrs,
+            latex: latex || node.attrs.latex,
+          })
+
+          return true
+        },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="block-math"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'block-math' })]
+  },
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /^\$\$\$([^$]+)\$\$\$$/,
+        handler: ({ state, range, match }) => {
+          const [, latex] = match
+          const { tr } = state
+          const start = range.from
+          const end = range.to
+
+          tr.replaceWith(start, end, this.type.create({ latex }))
+        },
+      }),
+    ]
+  },
+
+  addNodeView() {
+    return ({ node, getPos }) => {
+      const wrapper = document.createElement('div')
+      const innerWrapper = document.createElement('div')
+      wrapper.className = 'Tiptap-mathematics-render Tiptap-mathematics-render--editable'
+      innerWrapper.className = 'block-math-inner'
+      wrapper.dataset.type = 'block-math'
+      wrapper.setAttribute('data-latex', node.attrs.latex)
+      wrapper.appendChild(innerWrapper)
+
+      function renderMath() {
+        try {
+          katex.render(node.attrs.latex, innerWrapper)
+          wrapper.classList.remove('block-math-error')
+        } catch {
+          wrapper.textContent = node.attrs.latex
+          wrapper.classList.add('block-math-error')
+        }
+      }
+
+      const handleClick = (event: MouseEvent) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const pos = getPos()
+
+        if (pos == null) {
+          return
+        }
+
+        if (this.options.onClick) {
+          this.options.onClick(node, pos)
+        }
+      }
+
+      if (this.options.onClick) {
+        wrapper.addEventListener('click', handleClick)
+      }
+
+      renderMath()
+
+      return {
+        dom: wrapper,
+        destroy() {
+          wrapper.removeEventListener('click', handleClick)
+        },
+      }
+    }
+  },
+})

package/src/extensions/InlineMath.ts

@@ -0,0 +1,210 @@
+import { InputRule, mergeAttributes, Node } from '@tiptap/core'
+import type { Node as PMNode } from '@tiptap/pm/model'
+import katex from 'katex'
+
+export type InlineMathOptions = {
+  onClick?: (node: PMNode, pos: number) => void
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    inlineMath: {
+      /**
+       * Set inline math node with LaTeX string.
+       * @param options - Options for setting inline math.
+       * @returns ReturnType
+       */
+      setInlineMath: (options: { latex: string; pos?: number }) => ReturnType
+
+      /**
+       * Unset inline math node.
+       * @returns ReturnType
+       */
+      unsetInlineMath: (options?: { pos?: number }) => ReturnType
+
+      /**
+       * Update inline math node with optional LaTeX string.
+       * @param options - Options for updating inline math.
+       * @returns ReturnType
+       */
+      updateInlineMath: (options?: { latex?: string; pos?: number }) => ReturnType
+    }
+  }
+}
+
+/**
+ * InlineMath is a Tiptap extension for rendering inline mathematical expressions using KaTeX.
+ * It allows users to insert LaTeX formatted math expressions inline within text.
+ * It supports rendering, input rules for LaTeX syntax, and click handling for interaction.
+ *
+ * @example
+ * ```javascript
+ * import { InlineMath } from 'your-extension-path'
+ * import { Editor } from '@tiptap/core'
+ *
+ * const editor = new Editor({
+ *   extensions: [
+ *     InlineMath.configure({
+ *       onClick: (node, pos) => {
+ *         console.log('Inline math clicked:', node.attrs.latex, 'at position:', pos)
+ *       },
+ *     }),
+ *   ],
+ * })
+ */
+export const InlineMath = Node.create<InlineMathOptions>({
+  name: 'inlineMath',
+
+  group: 'inline',
+
+  inline: true,
+
+  atom: true,
+
+  addOptions() {
+    return {
+      onClick: undefined,
+    }
+  },
+
+  addAttributes() {
+    return {
+      latex: {
+        default: '',
+        parseHTML: element => element.getAttribute('data-latex'),
+        renderHTML: attributes => {
+          return {
+            'data-latex': attributes.latex,
+          }
+        },
+      },
+    }
+  },
+
+  addCommands() {
+    return {
+      setInlineMath:
+        options =>
+        ({ editor, tr }) => {
+          const latex = options?.latex
+          const pos = options?.pos ?? editor.state.selection.$from.pos
+
+          if (!latex) {
+            return false
+          }
+
+          tr.replaceWith(pos, pos, this.type.create({ latex }))
+          return true
+        },
+
+      unsetInlineMath:
+        options =>
+        ({ editor, tr }) => {
+          const pos = options?.pos ?? editor.state.selection.$from.pos
+          const node = editor.state.doc.nodeAt(pos)
+
+          if (!node || node.type.name !== this.name) {
+            return false
+          }
+
+          tr.delete(pos, pos + node.nodeSize)
+          return true
+        },
+
+      updateInlineMath:
+        options =>
+        ({ editor, tr }) => {
+          const latex = options?.latex
+          let pos = options?.pos
+
+          if (pos === undefined) {
+            pos = editor.state.selection.$from.pos
+          }
+
+          const node = editor.state.doc.nodeAt(pos)
+
+          if (!node || node.type.name !== this.name) {
+            return false
+          }
+
+          tr.setNodeMarkup(pos, this.type, { ...node.attrs, latex })
+
+          return true
+        },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-type="inline-math"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes, { 'data-type': 'inline-math' })]
+  },
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /(?<!\$)\$\$([^$\n]+)\$\$(?!\$)$/,
+        handler: ({ state, range, match }) => {
+          const [, latex] = match
+          const { tr } = state
+          const start = range.from
+          const end = range.to
+
+          tr.replaceWith(start, end, this.type.create({ latex }))
+        },
+      }),
+    ]
+  },
+
+  addNodeView() {
+    return ({ node, getPos }) => {
+      const wrapper = document.createElement('span')
+      wrapper.className = 'Tiptap-mathematics-render Tiptap-mathematics-render--editable'
+      wrapper.dataset.type = 'inline-math'
+      wrapper.setAttribute('data-latex', node.attrs.latex)
+
+      function renderMath() {
+        try {
+          katex.render(node.attrs.latex, wrapper)
+          wrapper.classList.remove('inline-math-error')
+        } catch {
+          wrapper.textContent = node.attrs.latex
+          wrapper.classList.add('inline-math-error')
+        }
+      }
+
+      const handleClick = (event: MouseEvent) => {
+        event.preventDefault()
+        event.stopPropagation()
+        const pos = getPos()
+
+        if (pos == null) {
+          return
+        }
+
+        if (this.options.onClick) {
+          this.options.onClick(node, pos)
+        }
+      }
+
+      if (this.options.onClick) {
+        wrapper.addEventListener('click', handleClick)
+      }
+
+      renderMath()
+
+      return {
+        dom: wrapper,
+        destroy() {
+          wrapper.removeEventListener('click', handleClick)
+        },
+      }
+    }
+  },
+})

package/src/extensions/index.ts

@@ -0,0 +1,2 @@
+export * from './BlockMath.js'
+export * from './InlineMath.js'

package/src/index.ts

@@ -1,7 +1,7 @@
-import { Mathematics } from './mathematics.js'
+import { Math } from './mathematics.js'
 
+export * from './extensions/index.js'
 export * from './mathematics.js'
-export * from './MathematicsPlugin.js'
 export * from './types.js'
 
-export default Mathematics
+export default Math

package/src/mathematics.ts

@@ -1,31 +1,24 @@
 import { Extension } from '@tiptap/core'
-import type { EditorState } from '@tiptap/pm/state'
 
-import { MathematicsPlugin } from './MathematicsPlugin.js'
+import { BlockMath, InlineMath } from './extensions/index.js'
 import type { MathematicsOptions } from './types.js'
 
-export const defaultShouldRender = (state: EditorState, pos: number) => {
-  const $pos = state.doc.resolve(pos)
-  const isInCodeBlock = $pos.parent.type.name === 'codeBlock'
-
-  return !isInCodeBlock
-}
-
-export const Mathematics = Extension.create<MathematicsOptions>({
+export const Math = Extension.create<MathematicsOptions>({
   name: 'Mathematics',
 
   addOptions() {
     return {
-      // eslint-disable-next-line no-useless-escape
-      regex: /\$([^\$]*)\$/gi,
+      inlineOptions: undefined,
+      blockOptions: undefined,
       katexOptions: undefined,
-      shouldRender: defaultShouldRender,
     }
   },
 
-  addProseMirrorPlugins() {
-    return [MathematicsPlugin({ ...this.options, editor: this.editor })]
+  addExtensions() {
+    return [BlockMath.configure(this.options.blockOptions), InlineMath.configure(this.options.inlineOptions)]
   },
 })
 
-export default Mathematics
+export const Mathematics = Math
+
+export default Math

package/src/types.ts

@@ -1,12 +1,12 @@
 import type { Editor } from '@tiptap/core'
-import type { Node } from '@tiptap/pm/model'
-import type { EditorState } from '@tiptap/pm/state'
 import type { KatexOptions } from 'katex'
 
+import type { BlockMathOptions, InlineMathOptions } from './extensions'
+
 export type MathematicsOptions = {
-  regex: RegExp
+  inlineOptions?: InlineMathOptions
+  blockOptions?: BlockMathOptions
   katexOptions?: KatexOptions
-  shouldRender: (state: EditorState, pos: number, node: Node) => boolean
 }
 
 export type MathematicsOptionsWithEditor = MathematicsOptions & { editor: Editor }