fix: notes highlighting algorithm (#1683)

Author: kermanx

packages/client/internals/NoteDisplay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import type { ClicksContext } from '@slidev/types'
 import { CLICKS_MAX } from '../constants'
 
@@ -29,108 +29,118 @@ const noteDisplay = ref<HTMLElement | null>(null)
 const CLASS_FADE = 'slidev-note-fade'
 const CLASS_MARKER = 'slidev-note-click-mark'
 
-function highlightNote() {
+function processNote() {
   if (!noteDisplay.value || !withClicks.value)
     return
 
   const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
 
-  const current = +(props.clicksContext?.current ?? CLICKS_MAX)
-  const disabled = current < 0 || current >= CLICKS_MAX || !props.highlight
-
-  const nodeToIgnores = new Set<Element>()
-  function ignoreParent(node: Element) {
-    if (!node || node === noteDisplay.value)
-      return
-    nodeToIgnores.add(node)
-    if (node.parentElement)
-      ignoreParent(node.parentElement)
-  }
-
-  const markersMap = new Map<number, HTMLElement>()
-
-  // Convert all sibling text nodes to spans, so we attach classes to them
+  const markersMap = new Map<HTMLElement, number>()
+  const parentsMap = new Map<HTMLElement, [divider: HTMLElement | null, dividerClicks: number][]>()
+  let lastClicks = 0
   for (const marker of markers) {
-    const parent = marker.parentElement!
     const clicks = Number(marker.dataset!.clicks)
-    markersMap.set(clicks, marker)
-    // Ignore the parents of the marker, so the class only applies to the children
-    ignoreParent(parent)
-    Array.from(parent!.childNodes)
-      .forEach((node) => {
-        if (node.nodeType === 3) { // text node
-          const span = document.createElement('span')
-          span.textContent = node.textContent
-          parent.insertBefore(span, node)
-          node.remove()
-        }
-      })
-  }
-  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
-
-  let count = 0
-
-  // Segmenting notes by clicks
-  const segments = new Map<number, Element[]>()
-  for (const child of children) {
-    if (!segments.has(count))
-      segments.set(count, [])
-    segments.get(count)!.push(child)
-    // Update count when reach marker
-    if (child.classList.contains(CLASS_MARKER))
-      count = Number((child as HTMLElement).dataset.clicks) || (count + 1)
+    markersMap.set(marker, clicks)
+
+    // Set parent clicks map
+    let n = marker
+    let p = marker.parentElement
+    while (p && n !== noteDisplay.value) {
+      if (!parentsMap.has(p))
+        parentsMap.set(p, [[null, lastClicks]])
+      parentsMap.get(p)!.push([n, clicks])
+      n = p
+      p = p.parentElement
+    }
+
+    lastClicks = clicks
   }
 
-  // Apply
-  for (const [count, els] of segments) {
-    if (disabled) {
-      els.forEach(el => el.classList.remove(CLASS_FADE))
-    }
-    else {
-      els.forEach(el => el.classList.toggle(
-        CLASS_FADE,
-        nodeToIgnores.has(el)
-          ? false
-          : count !== current,
-      ))
+  const siblingsMap = new Map<HTMLElement, number>()
+  for (const [parent, dividers] of parentsMap) {
+    let hasPrefix = false
+    let dividerIdx = 0
+    for (const sibling of Array.from(parent.childNodes)) {
+      let skip = false
+      while (sibling === dividers[dividerIdx + 1]?.[0]) {
+        skip = true
+        dividerIdx++
+      }
+      if (skip)
+        continue
+
+      // Convert sibling text nodes to spans
+      let siblingEl = sibling as HTMLElement
+      if (sibling.nodeType === 3 /* text node */) {
+        if (!sibling.textContent?.trim())
+          continue
+        siblingEl = document.createElement('span')
+        siblingEl.textContent = sibling.textContent
+        parent.insertBefore(siblingEl, sibling)
+        sibling.remove()
+      }
+
+      hasPrefix ||= dividerIdx === 0
+      siblingsMap.set(siblingEl, dividers[dividerIdx][1])
     }
+    if (!hasPrefix)
+      dividers[0][1] = -1
   }
 
-  for (const [clicks, marker] of markersMap) {
-    marker.classList.remove(CLASS_FADE)
-    marker.classList.toggle(`${CLASS_MARKER}-past`, disabled ? false : clicks < current)
-    marker.classList.toggle(`${CLASS_MARKER}-active`, disabled ? false : clicks === current)
-    marker.classList.toggle(`${CLASS_MARKER}-next`, disabled ? false : clicks === current + 1)
-    marker.classList.toggle(`${CLASS_MARKER}-future`, disabled ? false : clicks > current + 1)
-    marker.ondblclick = (e) => {
-      emit('markerDblclick', e, clicks)
-      if (e.defaultPrevented)
-        return
-      props.clicksContext!.current = clicks
-      e.stopPropagation()
-      e.stopImmediatePropagation()
-    }
-    marker.onclick = (e) => {
-      emit('markerClick', e, clicks)
+  // Apply
+  return (current: number) => {
+    const enabled = props.highlight
+    for (const [parent, clicks] of parentsMap)
+      parent.classList.toggle(CLASS_FADE, enabled && !clicks.some(([_, c]) => c === current))
+    for (const [parent, clicks] of siblingsMap)
+      parent.classList.toggle(CLASS_FADE, enabled && clicks !== current)
+    for (const [marker, clicks] of markersMap) {
+      marker.classList.remove(CLASS_FADE)
+      marker.classList.toggle(`${CLASS_MARKER}-past`, enabled && clicks < current)
+      marker.classList.toggle(`${CLASS_MARKER}-active`, enabled && clicks === current)
+      marker.classList.toggle(`${CLASS_MARKER}-next`, enabled && clicks === current + 1)
+      marker.classList.toggle(`${CLASS_MARKER}-future`, enabled && clicks > current + 1)
+      marker.ondblclick = enabled
+        ? (e) => {
+            emit('markerDblclick', e, clicks)
+            if (e.defaultPrevented)
+              return
+            props.clicksContext!.current = clicks
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+          }
+        : null
+      marker.onclick = enabled
+        ? (e) => {
+            emit('markerClick', e, clicks)
+          }
+        : null
+
+      if (!enabled && props.autoScroll && clicks === current)
+        marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
     }
-
-    if (props.autoScroll && clicks === current)
-      marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
   }
 }
 
+const applyHighlight = ref<ReturnType<typeof processNote>>()
+
 watch(
-  () => [props.noteHtml, props.clicksContext?.current, props.highlight],
+  () => [props.noteHtml, props.highlight],
   () => {
     nextTick(() => {
-      highlightNote()
+      applyHighlight.value = processNote()
     })
   },
   { immediate: true },
 )
 
 onMounted(() => {
-  highlightNote()
+  processNote()
+})
+
+watchEffect(() => {
+  const current = props.clicksContext?.current ?? CLICKS_MAX
+  applyHighlight.value?.(current)
 })
 </script>