feat: Функционал глобального переключения синтаксисов

[GulomovCreative]

Пока есть проблема со скроллом, нужно подумать над решением или посмотреть в сторону этого плагина

[biz87]

Привет @GulomovCreative!

Функционал очень полезный — в документации 78 code-groups, и глобальное переключение синтаксисов сильно улучшит UX.

Нашёл несколько проблем в текущей реализации:

1. Утечка event listener

window.addEventListener('click', ...)
Добавляется в onMounted, но не удаляется в onUnmounted. При hot reload будут накапливаться обработчики.

2. useRouter() внутри onMounted

onMounted(() => {
   const { route } = useRouter()
 })

Лучше вызывать на верхнем уровне composable.

3. Хрупкое сравнение через innerText

.find(el => el.innerText === syntax)
Если в табе будет лишний пробел или другой регистр — не сработает. Лучше textContent?.trim().toLowerCase().

4. Возможные проблемы с таймингом

После смены роута DOM может быть не готов. Стоит добавить nextTick.

Предложение по рефакторингу

  export function useSyntaxSwitcher(key: string, labels: string[]) {
    if (!inBrowser) return

    const { route } = useRouter()
    const normalizedLabels = labels.map(l => l.toLowerCase())

    const handleClick = (e: Event) => {
      const target = e.target as HTMLElement
      if (!e.isTrusted || !target.matches('.vp-code-group .tabs label')) return

      const syntax = target.textContent?.trim().toLowerCase()
      if (!syntax || !normalizedLabels.includes(syntax)) return

      localStorage.setItem(key, syntax)
      setSyntax(syntax, target.closest('.vp-code-group'))
    }

    onMounted(() => {
      window.addEventListener('click', handleClick)

      watch(() => route.path, () => {
        nextTick(() => {
          const saved = localStorage.getItem(key)
          if (saved) setSyntax(saved)
        })
      }, { immediate: true })
    })

    onUnmounted(() => {
      window.removeEventListener('click', handleClick)
    })
  }

Готов помочь с доработкой или могу сам оформить PR с исправлениями, если нет времени.