feat: Enhance math rendering with abort signal and cleanup for trailing backticks

Author: Simon-He95

src/components/CodeBlockNode/CodeBlockNode.vue

@@ -133,7 +133,7 @@ const usePreCodeRender = ref(false)
       safeClean = helpers.cleanupEditor || safeClean
       setTheme = helpers.setTheme || setTheme
 
-      if (!editorCreated.value && codeEditor.value && createEditor) {
+      if (!editorCreated.value && codeEditor.value) {
         editorCreated.value = true
         isDiff.value
           ? createDiffEditor(codeEditor.value as HTMLElement, props.node.originalCode || '', props.node.updatedCode || '', codeLanguage.value)

src/components/MathBlockNode/MathBlockNode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { renderKaTeXInWorker } from '../../workers/katexWorkerClient'
 
 const props = defineProps<{
@@ -13,20 +13,43 @@ const props = defineProps<{
 
 const mathBlockElement = ref<HTMLElement | null>(null)
 let hasRenderedOnce = false
+let currentRenderId = 0
+let isUnmounted = false
+let currentAbortController: AbortController | null = null
 
 // Function to render math using KaTeX
 function renderMath() {
-  if (!props.node.content || !mathBlockElement.value)
+  if (!props.node.content || !mathBlockElement.value || isUnmounted)
     return
 
-  renderKaTeXInWorker(props.node.content, true, 3000)
+  // cancel any previous in-flight render
+  if (currentAbortController) {
+    currentAbortController.abort()
+    currentAbortController = null
+  }
+
+  // increment render id for this invocation; responses from older renders are ignored
+  const renderId = ++currentRenderId
+  const abortController = new AbortController()
+  currentAbortController = abortController
+
+  renderKaTeXInWorker(props.node.content, true, 3000, abortController.signal)
     .then((html) => {
+      // ignore if a newer render was requested or component unmounted
+      if (isUnmounted || renderId !== currentRenderId)
+        return
+      if (!mathBlockElement.value)
+        return
       mathBlockElement.value.innerHTML = html
       hasRenderedOnce = true
     })
     .catch(() => {
+      // ignore if a newer render was requested or component unmounted
+      if (isUnmounted || renderId !== currentRenderId)
+        return
       if (!mathBlockElement.value)
         return
+      // show raw fallback when we never successfully rendered before or when loading flag is false
       if (!hasRenderedOnce || !props.node.loading) {
         mathBlockElement.value.textContent = props.node.raw
       }
@@ -42,6 +65,13 @@ watch(
 onMounted(() => {
   renderMath()
 })
+
+onBeforeUnmount(() => {
+  // prevent any pending worker responses from touching the DOM
+  isUnmounted = true
+  // increment id so any in-flight render is considered stale
+  currentRenderId++
+})
 </script>
 
 <template>

src/components/MathInlineNode/MathInlineNode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { renderKaTeXInWorker } from '../../workers/katexWorkerClient'
 
 const props = defineProps<{
@@ -13,17 +13,35 @@ const props = defineProps<{
 
 const mathElement = ref<HTMLElement | null>(null)
 let hasRenderedOnce = false
+let currentRenderId = 0
+let isUnmounted = false
+let currentAbortController: AbortController | null = null
 
 function renderMath() {
-  if (!props.node.content || !mathElement.value)
+  if (!props.node.content || !mathElement.value || isUnmounted)
     return
 
-  renderKaTeXInWorker(props.node.content, false, 1500)
+  if (currentAbortController) {
+    currentAbortController.abort()
+    currentAbortController = null
+  }
+
+  const renderId = ++currentRenderId
+  const abortController = new AbortController()
+  currentAbortController = abortController
+
+  renderKaTeXInWorker(props.node.content, false, 1500, abortController.signal)
     .then((html) => {
+      if (isUnmounted || renderId !== currentRenderId)
+        return
+      if (!mathElement.value)
+        return
       mathElement.value.innerHTML = html
       hasRenderedOnce = true
     })
     .catch(() => {
+      if (isUnmounted || renderId !== currentRenderId)
+        return
       if (!mathElement.value)
         return
       if (!hasRenderedOnce || !props.node.loading)
@@ -41,6 +59,14 @@ watch(
 onMounted(() => {
   renderMath()
 })
+
+onBeforeUnmount(() => {
+  isUnmounted = true
+  if (currentAbortController) {
+    currentAbortController.abort()
+    currentAbortController = null
+  }
+})
 </script>
 
 <template>

src/components/NodeRenderer/NodeRenderer.vue

@@ -151,9 +151,10 @@ function getNodeComponent(node: BaseNode) {
     return FallbackComponent
   if (node.type === 'code_block') {
     const lang = String((node as any).language || '').trim().toLowerCase()
-    const custom = getCustomNodeComponents(props.customId).mermaid
-    if (lang === 'mermaid')
+    if (lang === 'mermaid') {
+      const custom = getCustomNodeComponents(props.customId).mermaid
       return (custom as any) || MermaidBlockNode
+    }
     return nodeComponents.code_block
   }
   return (nodeComponents as any)[node.type] || FallbackComponent

src/utils/markdown-parser/inline-parsers/fence-parser.ts

@@ -33,14 +33,28 @@ export function parseFenceToken(token: MarkdownToken): CodeBlockNode {
   const closed = typeof meta?.closed === 'boolean' ? meta.closed : undefined
   const diff = token.info?.startsWith('diff') || false
   const language = diff ? token.info.split(' ')[1] || '' : token.info || ''
+
+  // Defensive sanitization: sometimes a closing fence line (e.g. ``` or ``)
+  // can accidentally end up inside `token.content` (for example when
+  // the parser/mapping is confused). Remove a trailing line that only
+  // contains backticks and optional whitespace so we don't render stray
+  // ` or `` characters at the end of the code output. This is a
+  // conservative cleanup and only strips a final line that looks like a
+  // fence marker (starts with optional spaces then one or more ` and
+  // only whitespace until end-of-string).
+  let content = token.content || ''
+  const trailingFenceLine = /\r?\n[ \t]*`+\s*$/
+  if (trailingFenceLine.test(content))
+    content = content.replace(trailingFenceLine, '')
+
   if (diff) {
-    const { original, updated } = splitUnifiedDiff(token.content || '')
+    const { original, updated } = splitUnifiedDiff(content)
     // 返回时保留原来的 code 字段为 updated（编辑后代码），并额外附加原始与更新的文本
     return {
       type: 'code_block',
       language,
       code: updated || '',
-      raw: token.content || '',
+      raw: content,
       diff,
       loading: closed === true ? false : closed === false ? true : !hasMap,
       originalCode: original,
@@ -51,8 +65,8 @@ export function parseFenceToken(token: MarkdownToken): CodeBlockNode {
   return {
     type: 'code_block',
     language,
-    code: token.content || '',
-    raw: token.content || '',
+    code: content || '',
+    raw: content || '',
     diff,
     loading: closed === true ? false : closed === false ? true : !hasMap,
   }

src/workers/katexWorkerClient.ts

@@ -55,7 +55,7 @@ function ensureWorker() {
   return worker
 }
 
-export async function renderKaTeXInWorker(content: string, displayMode = true, timeout = 2000): Promise<string> {
+export async function renderKaTeXInWorker(content: string, displayMode = true, timeout = 2000, signal?: AbortSignal): Promise<string> {
   // Quick cache hit
   const cacheKey = `${displayMode ? 'd' : 'i'}:${content}`
   const cached = cache.get(cacheKey)
@@ -67,12 +67,31 @@ export async function renderKaTeXInWorker(content: string, displayMode = true, t
     return Promise.reject(new Error('Web Worker not available'))
 
   return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      // align with DOM abort semantics
+      const err = new Error('Aborted')
+      ;(err as any).name = 'AbortError'
+      reject(err)
+      return
+    }
     const id = Math.random().toString(36).slice(2)
     const timeoutId = window.setTimeout(() => {
       pending.delete(id)
       reject(new Error('Worker render timed out'))
     }, timeout)
 
+    // Listen for abort to cancel this pending request
+    const onAbort = () => {
+      window.clearTimeout(timeoutId)
+      if (pending.has(id))
+        pending.delete(id)
+      const err = new Error('Aborted')
+      ;(err as any).name = 'AbortError'
+      reject(err)
+    }
+    if (signal)
+      signal.addEventListener('abort', onAbort, { once: true })
+
     pending.set(id, { resolve, reject, timeoutId })
 
     wk.postMessage({ id, content, displayMode })

test/fence-trailing-backtick.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { parseFenceToken } from '../src/utils/markdown-parser/inline-parsers/fence-parser'
+
+describe('fence parser trailing fence cleanup', () => {
+  it('removes a trailing line that only contains backticks from token.content', () => {
+    const token: any = {
+      type: 'fence',
+      info: 'ts',
+      content: 'const a = 1\n```',
+      map: [0, 2],
+    }
+
+    const node = parseFenceToken(token as any)
+    expect(node).toBeDefined()
+    expect((node as any).code).toBe('const a = 1')
+    expect((node as any).raw).toBe('const a = 1')
+  })
+
+  it('keeps legitimate content that contains backticks not on their own line', () => {
+    const token: any = {
+      type: 'fence',
+      info: 'text',
+      content: 'console.log(\'`inline`)\n', // backtick inside code, not a fence line
+      map: [0, 2],
+    }
+    const node = parseFenceToken(token as any)
+    expect((node as any).code).toBe('console.log(\'`inline`)\n')
+    expect((node as any).raw).toBe('console.log(\'`inline`)\n')
+  })
+})