From dfb02a479f19afbee9e292b15c3c2beef271e57f Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Thu, 13 Nov 2025 14:39:05 +0530 Subject: [PATCH] feat(client): emit `vitepress:codeGroupTabActivate` custom event when a code group tab is activated closes #5023 --- client.d.ts | 9 +++++++++ src/client/app/composables/codeGroups.ts | 11 +++++++++-- src/client/tsconfig.json | 2 +- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/client.d.ts b/client.d.ts index 440251f7..32fcebe2 100644 --- a/client.d.ts +++ b/client.d.ts @@ -3,3 +3,12 @@ /// 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 index d8a38ba7..ba56bc05 100644 --- 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,7 +36,7 @@ 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' }) @@ -44,3 +44,10 @@ export function useCodeGroups() { }) } } + +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 index ca0d2efd..7dca07bf 100644 --- 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"]