Repository: slidevjs/slidev
File: packages/client/builtin/KaTexBlockWrapper.vue (Vue)

Code before:
onMounted(() => {
  const prev = elements?.value.length
  const index = computed(() => {
    if (disabled?.value)
      return props.ranges.length - 1
    return Math.min(Math.max(0, (clicks?.value || 0) - (prev || 0)), props.ranges.length - 1)
  })
  const rangeStr = computed(() => props.ranges[index.value] || '')
  if (props.ranges.length >= 2 && !disabled?.value) {
    const id = makeId()
    const ids = range(props.ranges.length - 1).map(i => id + i)
    if (elements?.value) {
      elements.value.push(...ids)
      onUnmounted(() => ids.forEach(i => remove(elements.value, i)), vm)
    }
  }

  watchEffect(() => {
    if (!el.value)
      return
    // KaTeX equations have col-align-XXX as parent
    const equationParents = el.value.querySelectorAll('.mtable > [class*=col-align]')
    if (!equationParents)
      return

    // We extract each equation row from the parents
    const equationRowsOfEachParent = Array.from(equationParents)
      .map(item => Array.from(item.querySelectorAll('.vlist-t > .vlist-r > .vlist > span > .mord')))
    // This list maps rows, which pairs up rows from different equationParents
    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 startLine = props.startLine
    const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr.value)
    lines.forEach((line, idx) => {
      const highlighted = highlights.includes(idx + startLine)
      line.forEach((node) => {
        node.classList.toggle(CLASS_VCLICK_TARGET, true)
        node.classList.toggle('highlighted', highlighted)
        node.classList.toggle('dishonored', !highlighted)
      })
    })

Review comment (refactor):
```suggestion
    // For each row we extract the individual equation rows
```

Code after:
onMounted(() => {
  const prev = elements?.value.length
  const index = computed(() => {
    if (disabled?.value)
      return props.ranges.length - 1
    return Math.min(Math.max(0, (clicks?.value || 0) - (prev || 0)), props.ranges.length - 1)
  })
  const rangeStr = computed(() => props.ranges[index.value] || '')
  if (props.ranges.length >= 2 && !disabled?.value) {
    const id = makeId()
    const ids = range(props.ranges.length - 1).map(i => id + i)
    if (elements?.value) {
      elements.value.push(...ids)
      onUnmounted(() => ids.forEach(i => remove(elements.value, i)), vm)
    }
  }

  watchEffect(() => {
    if (!el.value)
      return
    // 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('.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 startLine = props.startLine
    const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr.value)
    lines.forEach((line, idx) => {
      const highlighted = highlights.includes(idx + startLine)
      line.forEach((node) => {
        node.classList.toggle(CLASS_VCLICK_TARGET, true)
        node.classList.toggle('highlighted', highlighted)
        node.classList.toggle('dishonored', !highlighted)
      })
    })