fix(math): enhance math recognition for incomplete TeX commands and improve loading state handling

Author: Simon-He95

src/components/MathInlineNode/MathInlineNode.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import katex from 'katex'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { renderKaTeXInWorker, setKaTeXCache } from '../../workers/katexWorkerClient'
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'
+import { renderKaTeXInWorker } from '../../workers/katexWorkerClient'
 
 const props = defineProps<{
   node: {
@@ -10,13 +9,28 @@ const props = defineProps<{
     raw: string
     loading?: boolean
   }
+  /** link text / underline color (CSS color string) */
+  color?: string
+  /** underline height in px */
+  underlineHeight?: number
+  /** underline bottom offset (px). Can be negative. */
+  underlineBottom?: number | string
+  /** total animation duration in seconds */
+  animationDuration?: number
+  /** underline opacity */
+  animationOpacity?: number
+  /** animation timing function */
+  animationTiming?: string
+  /** animation iteration (e.g. 'infinite' or a number) */
+  animationIteration?: string | number
 }>()
 
 const mathElement = ref<HTMLElement | null>(null)
 let hasRenderedOnce = false
 let currentRenderId = 0
 let isUnmounted = false
 let currentAbortController: AbortController | null = null
+const renderingLoading = ref(true)
 
 function renderMath() {
   if (!props.node.content || !mathElement.value || isUnmounted)
@@ -37,6 +51,7 @@ function renderMath() {
         return
       if (!mathElement.value)
         return
+      renderingLoading.value = false
       mathElement.value.innerHTML = html
       hasRenderedOnce = true
     })
@@ -45,28 +60,21 @@ function renderMath() {
         return
       if (!mathElement.value)
         return
-      // Try synchronous render as a fallback
-      try {
-        const html = katex.renderToString(props.node.content, {
-          throwOnError: true,
-          displayMode: false,
-        })
-        mathElement.value.innerHTML = html
-        hasRenderedOnce = true
-        try {
-          setKaTeXCache(props.node.content, false, html)
-        }
-        catch {
-          // ignore cache set errors
-        }
-      }
-      catch {
-        if (!hasRenderedOnce || !props.node.loading)
-          mathElement.value.textContent = props.node.raw
+      if (!hasRenderedOnce || !props.node.loading) {
+        renderingLoading.value = true
+        // mathElement.value.textContent = props.node.raw
       }
     })
 }
 
+// watch(
+//   () => props.node.loading,
+//   (newVal) => {
+//     nextTick(() => {
+
+//     })
+//   },
+// )
 watch(
   () => props.node.content,
   () => {
@@ -85,15 +93,73 @@ onBeforeUnmount(() => {
     currentAbortController = null
   }
 })
+const cssVars = computed(() => {
+  const bottom = props.underlineBottom !== undefined
+    ? (typeof props.underlineBottom === 'number' ? `${props.underlineBottom}px` : String(props.underlineBottom))
+    : '-3px'
+
+  return {
+    '--link-color': props.color ?? '#0366d6',
+    '--underline-height': `${props.underlineHeight ?? 2}px`,
+    '--underline-bottom': bottom,
+    '--underline-opacity': String(props.animationOpacity ?? 0.9),
+    '--underline-duration': `${props.animationDuration ?? 0.8}s`,
+    '--underline-timing': props.animationTiming ?? 'linear',
+    '--underline-iteration': typeof props.animationIteration === 'number' ? String(props.animationIteration) : (props.animationIteration ?? 'infinite'),
+  } as Record<string, string>
+})
+const attrs = useAttrs()
 </script>
 
 <template>
-  <span ref="mathElement" class="math-inline" />
+  <!-- <span v-if="renderingLoading"
+      :style="cssVars"
+  >Loading...</span> -->
+  <span v-show="renderingLoading" class="math-loading inline-flex items-baseline gap-1.5" :aria-hidden="!node.loading ? 'true' : 'false'" v-bind="attrs" :style="cssVars">
+    <span class="math-text-wrapper relative inline-flex">
+      <span class="leading-[normal] math-text">Loading...</span>
+      <span class="underline-anim" aria-hidden="true" />
+    </span>
+  </span>
+  <span v-show="!renderingLoading" ref="mathElement" class="math-inline" />
 </template>
 
 <style>
 .math-inline {
   display: inline-block;
   vertical-align: middle;
 }
+.math-loading .math-text-wrapper {
+  position: relative;
+}
+
+.math-loading .math-text {
+  position: relative;
+  z-index: 2;
+}
+
+.underline-anim {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--underline-height, 2px);
+  bottom: var(--underline-bottom, -3px); /* a little below text */
+  background: currentColor;
+  /* grow symmetrically from the center */
+  transform-origin: center center;
+  will-change: transform, opacity;
+  opacity: var(--underline-opacity, 0.9);
+  transform: scaleX(0);
+  animation: underlineLoop var(--underline-duration, 0.8s) var(--underline-timing, linear) var(--underline-iteration, infinite);
+}
+
+@keyframes underlineLoop {
+  0% { transform: scaleX(0); opacity: var(--underline-opacity, 0.9); }
+  /* draw to full width by 75% (0.6s) */
+  75% { transform: scaleX(1); opacity: var(--underline-opacity, 0.9); }
+  /* hold at full width until ~99% (~0.2s pause) */
+  99% { transform: scaleX(1); opacity: var(--underline-opacity, 0.9); }
+  /* collapse quickly back to center right at the end */
+  100% { transform: scaleX(0); opacity: 0; }
+}
 </style>

src/utils/markdown/plugins/math.ts

@@ -120,6 +120,11 @@ const CONTROL_MAP: Record<string, string> = {
 const TEX_CMD_RE = /\\[a-z]+/i
 const PREFIX_CLASS = '(?:\\\\|\\u0008)'
 const TEX_CMD_WITH_BRACES_RE = new RegExp(`${PREFIX_CLASS}(?:${ESCAPED_TEX_BRACE_COMMANDS})\\s*\\{[^}]+\\}`, 'i')
+// Detect brace-taking TeX commands even when the leading backslash or the
+// closing brace/content is missing (e.g. "operatorname{" or "operatorname{span").
+// This helps the heuristic treat incomplete but clearly TeX-like fragments
+// as math-like instead of plain text.
+const TEX_BRACE_CMD_START_RE = new RegExp(`(?:${PREFIX_CLASS})?(?:${ESCAPED_TEX_BRACE_COMMANDS})\s*\{`, 'i')
 const TEX_SPECIFIC_RE = /\\(?:text|frac|left|right|times)/
 const SUPER_SUB_RE = /\^|_/
 // Match common math operator symbols or named commands.
@@ -158,6 +163,7 @@ export function isMathLike(s: string) {
   // TeX commands e.g. \frac, \alpha
   const texCmd = TEX_CMD_RE.test(norm)
   const texCmdWithBraces = TEX_CMD_WITH_BRACES_RE.test(norm)
+  const texBraceStart = TEX_BRACE_CMD_START_RE.test(norm)
 
   // Explicit common TeX tokens (keeps compatibility with previous heuristic)
   const texSpecific = TEX_SPECIFIC_RE.test(norm)
@@ -170,7 +176,7 @@ export function isMathLike(s: string) {
   // common math words
   const words = WORDS_RE.test(norm)
 
-  return texCmd || texCmdWithBraces || texSpecific || superSub || ops || funcCall || words
+  return texCmd || texCmdWithBraces || texBraceStart || texSpecific || superSub || ops || funcCall || words
 }
 
 export function normalizeStandaloneBackslashT(s: string, opts?: MathOptions) {
@@ -285,9 +291,32 @@ export function applyMath(md: MarkdownIt, mathOpts?: MathOptions) {
         // 不能简单地用 indexOf 找到第一个 close — 需要处理嵌套与转义字符
         const endIdx = findMatchingClose(src, index + open.length, open, close)
         if (endIdx === -1) {
+          // loading 状态的 math，没有找到匹配的结尾
+          const preSearchPos = searchPos
           // no matching close for this opener; skip forward
           searchPos = index + open.length
-          continue
+          const content = src.slice(searchPos)
+          if (isMathLike(content)) {
+            foundAny = true
+            if (!silent) {
+              if (preSearchPos)
+                pushText(src.slice(preSearchPos, searchPos))
+              else
+                pushText(src.slice(0, index))
+              const token = state.push('math_inline', 'math', 0)
+              token.content = normalizeStandaloneBackslashT(content, mathOpts)
+              token.markup = open === '$$' ? '$$' : open === '\\(' ? '\\(\\)' : open === '$' ? '$' : '()'
+              token.loading = true
+              // consume the full inline source
+              state.pos = src.length
+            }
+            searchPos = src.length
+            // break
+          }
+          else {
+            pushText(src.slice(preSearchPos, searchPos))
+          }
+          break
         }
         const content = src.slice(index + open.length, endIdx)
         if (!isMathLike(content)) {

test/debug/isMathLike.test.ts

@@ -8,4 +8,5 @@ it('recognizes \"\\boldsymbol{...}\" as math-like', () => {
   expect(isMathLike('\\(f^{(k)}(a)\\)')).toBe(true)
   expect(isMathLike('\\(W^\perp\\)')).toBe(true)
   expect(isMathLike('\\(2025/9/30 21:37:24\\)')).toBe(false)
+  expect(isMathLike('operatorname{')).toBe(true)
 })