feat(client): emit vitepress:codeGroupTabActivate custom event when a code group tab is activated

brc-dd · brc-dd · commit dfb02a479f19 · 2025-11-13T14:39:05.000+05:30
closes #5023
diff --git a/client.d.ts b/client.d.ts
@@ -3,3 +3,12 @@
 /// <reference types="vite/client" />
 
 export * from './dist/client/index.js'
+
+declare global {
+  interface WindowEventMap {
+    'vitepress:codeGroupTabActivate': Event & {
+      /** code block element that was activated */
+      detail: Element
+    }
+  }
+}
diff --git a/src/client/app/composables/codeGroups.ts b/src/client/app/composables/codeGroups.ts
@@ -7,7 +7,7 @@ export function useCodeGroups() {
         Array.from(el.children).forEach((child) => {
           child.classList.remove('active')
         })
-        el.children[0].classList.add('active')
+        activate(el.children[0])
       })
     })
   }
@@ -36,11 +36,18 @@ export function useCodeGroups() {
         if (!next || current === next) return
 
         current.classList.remove('active')
-        next.classList.add('active')
+        activate(next)
 
         const label = group?.querySelector(`label[for="${el.id}"]`)
         label?.scrollIntoView({ block: 'nearest' })
       }
     })
   }
 }
+
+function activate(el: Element): void {
+  el.classList.add('active')
+  window.dispatchEvent(
+    new CustomEvent('vitepress:codeGroupTabActivate', { detail: el })
+  )
+}
diff --git a/src/client/tsconfig.json b/src/client/tsconfig.json
@@ -5,7 +5,7 @@
     "outDir": "../../dist/client",
     "declaration": true,
     "declarationDir": "../../dist/client-types",
-    "types": ["vite/client", "@types/node"],
+    "types": ["../../client.d.ts", "@types/node"],
     "paths": {
       "vitepress": ["index.ts"],
       "vitepress/theme": ["../../theme.d.ts"]
