Code Block

<script setup lang="ts">
import type { BundledLanguage } from 'shiki'
import type { HTMLAttributes } from 'vue'
import { computed, provide } from 'vue'
import CodeBlockContainer from './CodeBlockContainer.vue'
import CodeBlockContent from './CodeBlockContent.vue'
import { CodeBlockKey } from './context'

const props = withDefaults(
  defineProps<{
    code: string
    language: BundledLanguage
    showLineNumbers?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    showLineNumbers: false,
  },
)

provide(CodeBlockKey, {
  code: computed(() => props.code),
})
</script>

<template>
  <CodeBlockContainer :class="props.class" :language="props.language">
    <slot />
    <CodeBlockContent
      :code="props.code"
      :language="props.language"
      :show-line-numbers="props.showLineNumbers"
    />
  </CodeBlockContainer>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  language: string
}>()

const style = {
  contentVisibility: 'auto',
  containIntrinsicSize: 'auto 200px',
}
</script>

<template>
  <div
    :class="cn(
      'group relative w-full overflow-hidden rounded-md border bg-background text-foreground',
      props.class,
    )"
    :data-language="props.language"
    :style="style"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { BundledLanguage, ThemedToken } from 'shiki'
import type { TokenizedCode } from './utils'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { computed, ref, watch } from 'vue'
import { createRawTokens, highlightCode, isBold, isItalic, isUnderline } from './utils'

const props = withDefaults(
  defineProps<{
    code: string
    language: BundledLanguage
    showLineNumbers?: boolean
  }>(),
  {
    showLineNumbers: false,
  },
)

const rawTokens = computed(() => createRawTokens(props.code))
// Try to get cached result synchronously, otherwise use raw tokens
const tokenized = ref<TokenizedCode>(highlightCode(props.code, props.language) ?? rawTokens.value)

watch(
  () => [props.code, props.language],
  () => {
    // Reset to raw tokens or cached result
    tokenized.value = highlightCode(props.code, props.language) ?? rawTokens.value
    // Trigger async highlight
    highlightCode(props.code, props.language, (result) => {
      tokenized.value = result
    })
  },
  { immediate: true },
)

const preStyle = computed(() => ({
  backgroundColor: tokenized.value.bg,
  color: tokenized.value.fg,
}))

interface KeyedToken {
  token: ThemedToken
  key: string
}
interface KeyedLine {
  tokens: KeyedToken[]
  key: string
}

const keyedLines = computed<KeyedLine[]>(() =>
  tokenized.value.tokens.map((line, lineIdx) => ({
    key: `line-${lineIdx}`,
    tokens: line.map((token, tokenIdx) => ({
      token,
      key: `line-${lineIdx}-${tokenIdx}`,
    })),
  })),
)

const lineNumberClasses = cn(
  'block',
  'before:content-[counter(line)]',
  'before:inline-block',
  'before:[counter-increment:line]',
  'before:w-8',
  'before:mr-4',
  'before:text-right',
  'before:text-muted-foreground/50',
  'before:font-mono',
  'before:select-none',
)
</script>

<template>
  <div class="relative overflow-auto">
    <pre
      :class="cn('dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)] m-0 p-4 text-sm')"
      :style="preStyle"
    ><code
        :class="cn(
          'font-mono text-sm',
          showLineNumbers && '[counter-increment:line_0] [counter-reset:line]',
        )"
      ><template v-for="line in keyedLines" :key="line.key"><!-- Line rendering component --><span :class="showLineNumbers ? lineNumberClasses : 'block'"><template v-if="line.tokens.length === 0">{{ '\n' }}</template><template v-else><!-- Token rendering component --><span
                v-for="tokenObj in line.tokens"
                :key="tokenObj.key"
                class="dark:!bg-[var(--shiki-dark-bg)] dark:!text-[var(--shiki-dark)]"
                :style="{
                  color: tokenObj.token.color,
                  backgroundColor: tokenObj.token.bgColor,
                  ...tokenObj.token.htmlStyle,
                  fontStyle: isItalic(tokenObj.token.fontStyle) ? 'italic' : undefined,
                  fontWeight: isBold(tokenObj.token.fontStyle) ? 'bold' : undefined,
                  textDecoration: isUnderline(tokenObj.token.fontStyle) ? 'underline' : undefined,
                }"
    >{{ tokenObj.token.content }}</span></template></span></template></code></pre>
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    :class="cn(
      'flex items-center justify-between bg-muted/80 px-3 py-2 text-muted-foreground text-xs',
      props.class,
    )"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div :class="cn('flex items-center gap-2', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span :class="cn('font-mono', props.class)" v-bind="$attrs">
    <slot />
  </span>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div :class="cn('flex items-center gap-2', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Button } from '@repo/shadcn-vue/components/ui/button'
import { cn } from '@repo/shadcn-vue/lib/utils'
import { reactiveOmit } from '@vueuse/core'
import { CheckIcon, CopyIcon } from 'lucide-vue-next'
import { computed, inject, onBeforeUnmount, ref } from 'vue'
import { CodeBlockKey } from './context'

const props = withDefaults(
  defineProps<{
    timeout?: number
    class?: HTMLAttributes['class']
  }>(),
  {
    timeout: 2000,
  },
)

const emit = defineEmits<{
  (event: 'copy'): void
  (event: 'error', error: Error): void
}>()

const delegatedProps = reactiveOmit(props, 'timeout', 'class')

const context = inject(CodeBlockKey)

if (!context)
  throw new Error('CodeBlockCopyButton must be used within a <CodeBlock />')

const { code } = context

const isCopied = ref(false)
let resetTimer: ReturnType<typeof setTimeout> | undefined

const icon = computed(() => (isCopied.value ? CheckIcon : CopyIcon))

async function copyToClipboard() {
  if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
    const error = new Error('Clipboard API not available')
    emit('error', error)
    return
  }

  try {
    await navigator.clipboard.writeText(code.value)
    isCopied.value = true
    emit('copy')

    if (resetTimer) {
      clearTimeout(resetTimer)
    }

    resetTimer = setTimeout(() => {
      isCopied.value = false
    }, props.timeout)
  }
  catch (error) {
    emit('error', error instanceof Error ? error : new Error('Copy failed'))
  }
}

onBeforeUnmount(() => {
  if (resetTimer) {
    clearTimeout(resetTimer)
  }
})
</script>

<template>
  <Button
    data-slot="code-block-copy-button"
    v-bind="delegatedProps"
    :class="cn('shrink-0', props.class)"
    size="icon"
    variant="ghost"
    @click="copyToClipboard"
  >
    <slot>
      <component :is="icon" :size="14" />
    </slot>
  </Button>
</template>

<script setup lang="ts">
import { Select } from '@repo/shadcn-vue/components/ui/select'

defineOptions({
  inheritAttrs: false,
})
</script>

<template>
  <Select v-bind="$attrs">
    <slot />
  </Select>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { SelectTrigger } from '@repo/shadcn-vue/components/ui/select'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <SelectTrigger
    :class="cn(
      'h-7 border-none bg-transparent px-2 text-xs shadow-none',
      props.class,
    )"
    size="sm"
    v-bind="$attrs"
  >
    <slot />
  </SelectTrigger>
</template>

<script setup lang="ts">
import { SelectValue } from '@repo/shadcn-vue/components/ui/select'
</script>

<template>
  <SelectValue v-bind="$attrs">
    <slot />
  </SelectValue>
</template>

<script setup lang="ts">
import { SelectContent } from '@repo/shadcn-vue/components/ui/select'

const props = withDefaults(defineProps<{
  align?: 'start' | 'center' | 'end'
}>(), {
  align: 'end',
})
</script>

<template>
  <SelectContent :align="props.align" v-bind="$attrs">
    <slot />
  </SelectContent>
</template>

<script setup lang="ts">
import { SelectItem } from '@repo/shadcn-vue/components/ui/select'

const props = defineProps<{
  value: string
  disabled?: boolean
  textValue?: string
}>()
</script>

<template>
  <SelectItem v-bind="{ ...props, ...$attrs }">
    <slot />
  </SelectItem>
</template>

import type { BundledLanguage, BundledTheme, HighlighterGeneric, ThemedToken } from 'shiki'
import { createHighlighter } from 'shiki'

// Shiki uses bitflags for font styles: 1=italic, 2=bold, 4=underline
// biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
export const isItalic = (fontStyle: number | undefined) => fontStyle && fontStyle & 1
// biome-ignore lint/suspicious/noBitwiseOperators: shiki bitflag check
export const isBold = (fontStyle: number | undefined) => fontStyle && fontStyle & 2
export function isUnderline(fontStyle: number | undefined) {
  return fontStyle && fontStyle & 4
}

export interface TokenizedCode {
  tokens: ThemedToken[][]
  fg: string
  bg: string
}

// Highlighter cache (singleton per language)
const highlighterCache = new Map<
  string,
  Promise<HighlighterGeneric<BundledLanguage, BundledTheme>>
>()

// Token cache
const tokensCache = new Map<string, TokenizedCode>()

// Subscribers for async token updates
const subscribers = new Map<string, Set<(result: TokenizedCode) => void>>()

function getTokensCacheKey(code: string, language: BundledLanguage) {
  const start = code.slice(0, 100)
  const end = code.length > 100 ? code.slice(-100) : ''
  return `${language}:${code.length}:${start}:${end}`
}

function getHighlighter(language: BundledLanguage): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> {
  const cached = highlighterCache.get(language)
  if (cached) {
    return cached
  }

  const highlighterPromise = createHighlighter({
    themes: ['github-light', 'github-dark'],
    langs: [language],
  })

  highlighterCache.set(language, highlighterPromise)
  return highlighterPromise
}

// Create raw tokens for immediate display while highlighting loads
export function createRawTokens(code: string): TokenizedCode {
  return {
    tokens: code.split('\n').map(line =>
      line === ''
        ? []
        : [
            {
              content: line,
              color: 'inherit',
            } as ThemedToken,
          ],
    ),
    fg: 'inherit',
    bg: 'transparent',
  }
}

// Synchronous highlight with callback for async results
export function highlightCode(
  code: string,
  language: BundledLanguage,
  callback?: (result: TokenizedCode) => void,
): TokenizedCode | null {
  const tokensCacheKey = getTokensCacheKey(code, language)

  // Return cached result if available
  const cached = tokensCache.get(tokensCacheKey)
  if (cached) {
    return cached
  }

  // Subscribe callback if provided
  if (callback) {
    if (!subscribers.has(tokensCacheKey)) {
      subscribers.set(tokensCacheKey, new Set())
    }
    subscribers.get(tokensCacheKey)?.add(callback)
  }

  // Start highlighting in background
  getHighlighter(language)
    .then((highlighter) => {
      const availableLangs = highlighter.getLoadedLanguages()
      const langToUse = availableLangs.includes(language) ? language : 'text'

      const result = highlighter.codeToTokens(code, {
        lang: langToUse,
        themes: {
          light: 'github-light',
          dark: 'github-dark',
        },
      })

      const tokenized: TokenizedCode = {
        tokens: result.tokens,
        fg: result.fg,
        bg: result.bg,
      }

      // Cache the result
      tokensCache.set(tokensCacheKey, tokenized)

      // Notify all subscribers
      const subs = subscribers.get(tokensCacheKey)
      if (subs) {
        for (const sub of subs) {
          sub(tokenized)
        }
        subscribers.delete(tokensCacheKey)
      }
    })
    .catch((error) => {
      console.error('Failed to highlight code:', error)
      subscribers.delete(tokensCacheKey)
    })

  return null
}