chore: improve [click] usage to make it easier to understand

demo/starter/slides.md

@@ -167,15 +167,13 @@ doubled.value = 2
 </style>
 
 <!--
-Notes can also sync with clicks [click]
+Notes can also sync with clicks
 
-This will be highlighted after the first click [click]
+[click] This will be highlighted after the first click
 
-Highlighted with `count = ref(0)` [click]
+[click] Highlighted with `count = ref(0)`
 
-[click:2]
-
-Last click (skip two clicks)
+[click:3] Last click (skip two clicks)
 -->
 
 ---

packages/client/internals/NoteDisplay.vue

@@ -19,14 +19,40 @@ function highlightNote() {
   if (!noteDisplay.value || !withClicks.value || props.clicks == null)
     return
 
-  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
-
   const disabled = +props.clicks < 0 || +props.clicks >= CLICKS_MAX
   if (disabled) {
-    children.forEach(el => el.classList.remove('slidev-note-fade'))
+    Array.from(noteDisplay.value.querySelectorAll('*'))
+      .forEach(el => el.classList.remove('slidev-note-fade'))
     return
   }
 
+  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 markers = Array.from(noteDisplay.value.querySelectorAll('.slidev-note-click-mark'))
+  // Convert all sibling text nodes to spans, so we attach classes to them
+  for (const marker of markers) {
+    const parent = marker.parentElement!
+    // 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
 
   const groups = new Map<number, Element[]>()
@@ -40,8 +66,14 @@ function highlightNote() {
       count = Number((child as HTMLElement).dataset.clicks) || (count + 1)
   }
 
-  for (const [count, els] of groups)
-    els.forEach(el => el.classList.toggle('slidev-note-fade', +count !== +props.clicks!))
+  for (const [count, els] of groups) {
+    els.forEach(el => el.classList.toggle(
+      'slidev-note-fade',
+      nodeToIgnores.has(el)
+        ? false
+        : +count !== +props.clicks!,
+    ))
+  }
 }
 
 watch(

packages/client/styles/index.css

@@ -70,9 +70,9 @@ html {
 }
 
 .slidev-note-click-mark {
-  font-size: 0.8em;
-  --uno: text-violet bg-violet/10 mx1 px1 font-mono rounded flex flex-inline
-    items-center align-middle;
+  font-size: 0.7em;
+  display: inline-flex;
+  --uno: text-violet bg-violet/10 px1 font-mono rounded items-center;
 }
 
 .slidev-note-click-mark::before {