fix: ignore nested KaTeX tables for line highlights

Author: MapleQiAN

packages/client/builtin/KaTexBlockWrapper.vue

@@ -25,6 +25,7 @@ import { parseRangeString } from '@slidev/parser/utils'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
+import { getKatexEquationRows } from '../logic/katex'
 import { makeId } from '../logic/utils'
 
 const props = defineProps({
@@ -77,26 +78,7 @@ 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 = getKatexEquationRows(el.value)
 
     const startLine = props.startLine
     const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr)

packages/client/logic/katex.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { getKatexEquationRows } from './katex'
+
+describe('getKatexEquationRows', () => {
+  it('ignores nested KaTeX tables when collecting equation rows', () => {
+    const leftRows = createRows('left', 3)
+    const rightRows = createRows('right', 3)
+
+    const root = {
+      querySelectorAll(selector: string) {
+        expect(selector).toBe('.mtable > [class*=col-align]')
+        return [
+          createColumn(leftRows),
+          createColumn(rightRows),
+          createColumn(createRows('substack', 2), true),
+          createColumn(createRows('matrix', 4), true),
+        ]
+      },
+    } as unknown as Element
+
+    expect(getKatexEquationRows(root)).toEqual([
+      [leftRows[0], rightRows[0]],
+      [leftRows[1], rightRows[1]],
+      [leftRows[2], rightRows[2]],
+    ])
+  })
+})
+
+function createColumn(rows: Element[], nested = false) {
+  return {
+    parentElement: {
+      parentElement: {
+        closest(selector: string) {
+          expect(selector).toBe('.mtable')
+          return nested ? {} : null
+        },
+      },
+    },
+    querySelectorAll(selector: string) {
+      expect(selector).toBe(':scope > .vlist-t > .vlist-r > .vlist > span > .mord')
+      return rows
+    },
+  } as unknown as Element
+}
+
+function createRows(name: string, count: number) {
+  return Array.from({ length: count }, (_, index) => ({ name, index } as unknown as Element))
+}

packages/client/logic/katex.ts

@@ -0,0 +1,24 @@
+export function getKatexEquationRows(el: Element): Element[][] {
+  const equationParents = Array.from(el.querySelectorAll('.mtable > [class*=col-align]'))
+    .filter(isTopLevelKatexColumn)
+
+  const equationRowsOfEachParent = equationParents
+    .map(item => Array.from(item.querySelectorAll(':scope > .vlist-t > .vlist-r > .vlist > span > .mord')))
+
+  const lines: Element[][] = []
+  for (const equationRowParent of equationRowsOfEachParent) {
+    equationRowParent.forEach((equationRow, idx) => {
+      if (Array.isArray(lines[idx]))
+        lines[idx].push(equationRow)
+      else
+        lines[idx] = [equationRow]
+    })
+  }
+
+  return lines
+}
+
+function isTopLevelKatexColumn(column: Element) {
+  const table = column.parentElement
+  return !!table && !table.parentElement?.closest('.mtable')
+}