fix(client): ignore nested katex tables for line highlights (#2579)

Co-authored-by: cyphercodes <cyphercodes@users.noreply.github.com>
Co-authored-by: _Kerman <kermanx@qq.com>

Author: cyphercodes

packages/client/builtin/KaTexBlockWrapper.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { collectKatexEquationLines } from './katex-lines'
+
+function fakeElement(options: {
+  parent?: Element | null
+  closest?: Element | null
+  children?: Element[]
+} = {}) {
+  const el = {
+    parentElement: options.parent ?? null,
+    closest: () => options.closest ?? null,
+    querySelectorAll: () => options.children ?? [],
+  }
+  return el as unknown as Element
+}
+
+describe('collectKatexEquationLines', () => {
+  it('ignores nested KaTeX tables when mapping equation lines', () => {
+    const rowA1 = fakeElement()
+    const rowA2 = fakeElement()
+    const rowB1 = fakeElement()
+    const rowB2 = fakeElement()
+    const nestedRow = fakeElement()
+
+    const outerLeftParent = fakeElement({ children: [rowA1, rowA2] })
+    const outerRightParent = fakeElement({ children: [rowB1, rowB2] })
+    const nestedParent = fakeElement({
+      parent: fakeElement({ closest: outerLeftParent }),
+      children: [nestedRow],
+    })
+
+    const root = fakeElement({
+      children: [outerLeftParent, nestedParent, outerRightParent],
+    })
+
+    expect(collectKatexEquationLines(root)).toEqual([
+      [rowA1, rowB1],
+      [rowA2, rowB2],
+    ])
+  })
+})

packages/client/builtin/KaTexBlockWrapper.vue

@@ -26,6 +26,7 @@ import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
 import { makeId } from '../logic/utils'
+import { collectKatexEquationLines } from './katex-lines'
 
 const props = defineProps({
   ranges: {
@@ -77,26 +78,10 @@ onMounted(() => {
     if (hide)
       rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
 
-    // KaTeX equations have col-align-XXX as parent
-    const equationParents = el.value.querySelectorAll('.mtable > [class*=col-align]')
-    if (!equationParents)
-      return
-
-    // For each row we extract the individual equation rows
-    const equationRowsOfEachParent = Array.from(equationParents)
-      .map(item => Array.from(item.querySelectorAll(':scope > .vlist-t > .vlist-r > .vlist > span > .mord')))
     // This list maps rows from different parents to line them up
-    const lines: Element[][] = []
-    for (const equationRowParent of equationRowsOfEachParent) {
-      equationRowParent.forEach((equationRow, idx) => {
-        if (!equationRow)
-          return
-        if (Array.isArray(lines[idx]))
-          lines[idx].push(equationRow)
-        else
-          lines[idx] = [equationRow]
-      })
-    }
+    const lines = collectKatexEquationLines(el.value)
+    if (!lines.length)
+      return
 
     const startLine = props.startLine
     const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr)

packages/client/builtin/katex-lines.ts

@@ -0,0 +1,22 @@
+const KATEX_EQUATION_PARENT_SELECTOR = '.mtable > [class*=col-align]'
+const KATEX_EQUATION_ROW_SELECTOR = ':scope > .vlist-t > .vlist-r > .vlist > span > .mord'
+
+export function collectKatexEquationLines(el: Element): Element[][] {
+  const equationParents = Array.from(el.querySelectorAll(KATEX_EQUATION_PARENT_SELECTOR))
+    .filter(parent => !parent.parentElement?.closest(KATEX_EQUATION_PARENT_SELECTOR))
+
+  const lines: Element[][] = []
+  for (const equationRowParent of equationParents) {
+    const equationRows = Array.from(equationRowParent.querySelectorAll(KATEX_EQUATION_ROW_SELECTOR))
+    equationRows.forEach((equationRow, idx) => {
+      if (!equationRow)
+        return
+      if (Array.isArray(lines[idx]))
+        lines[idx].push(equationRow)
+      else
+        lines[idx] = [equationRow]
+    })
+  }
+
+  return lines
+}