{
"$schema": "https://uipkge.dev/schema/registry-item.json",
"name": "code-block",
"title": "Code Block",
"type": "registry:ui",
"files": [
{
"path": "packages/registry-angular/components/code-block/code-block.component.ts",
"content": "import {\n Component,\n Input,\n OnInit,\n OnChanges,\n OnDestroy,\n SimpleChanges,\n booleanAttribute,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { codeToTokens, type ThemedToken, type BundledLanguage } from 'shiki/bundle/web'\n\nexport type CodeBlockCopyState = 'idle' | 'copied' | 'error'\n\ninterface HighlightSegment {\n content: string\n style?: ThemedToken['htmlStyle']\n}\n\nfunction toHighlightSegments(tokens: ThemedToken[][], source: string): HighlightSegment[] {\n const segments: HighlightSegment[] = []\n let cursor = 0\n\n for (const token of tokens.flat()) {\n if (token.offset > cursor) segments.push({ content: source.slice(cursor, token.offset) })\n segments.push({ content: token.content, style: token.htmlStyle })\n cursor = token.offset + token.content.length\n }\n\n if (cursor < source.length) segments.push({ content: source.slice(cursor) })\n return segments\n}\n\nlet nextId = 0\n\n/**\n * Angular port of UIPKGE CodeBlock. Syntax-highlighted code preview with a\n * language header, copy button, optional line numbers, and collapsible ``\n * content. 1:1 React parity.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-code-block, [ui-code-block]',\n standalone: true,\n imports: [UiButtonComponent],\n host: {\n '[attr.data-slot]': '\"code-block\"',\n '[attr.data-uipkge]': '\"\"',\n '[class]': 'hostClass',\n },\n template: `\n @if (showHeader) {\n \n
{{ language }}\n
\n
\n @if (copyStatus === 'copied') {\n \n \n \n } @else {\n \n \n \n \n }\n \n {{ copyLabel }}\n \n \n \n @if (isExpanded) {\n \n \n \n } @else {\n \n \n \n }\n {{ isExpanded ? 'Hide' : 'Show' }} code\n \n \n
\n @if (showLineNumbers) {\n
\n @for (line of lines; track $index) {\n {{ $index + 1 }}\n }\n @if (highlightedSegments) {@for (segment of highlightedSegments; track $index) {{{ segment.content }}}} @else {{{ code }}}\n \n \n `,\n})\nexport class UiCodeBlockComponent implements OnInit, OnChanges, OnDestroy {\n @Input() code = ''\n @Input() language = 'tsx'\n @Input({ transform: booleanAttribute }) showLineNumbers = true\n @Input() maxHeight = '400px'\n @Input({ transform: booleanAttribute }) defaultExpanded = true\n @Input({ transform: booleanAttribute }) showHeader = true\n @Input('class') className?: string\n\n readonly bodyId = `code-block-${++nextId}`\n isExpanded = true\n copyStatus: CodeBlockCopyState = 'idle'\n highlightedSegments: HighlightSegment[] | null = null\n\n private copyResetTimer?: ReturnType\n private highlightRequest = 0\n\n ngOnInit(): void {\n this.isExpanded = this.defaultExpanded\n this.highlightCode()\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['code'] || changes['language']) {\n this.highlightCode()\n }\n }\n\n ngOnDestroy(): void {\n if (this.copyResetTimer) clearTimeout(this.copyResetTimer)\n }\n\n get hostClass(): string {\n return cn('block group border-border bg-muted/20 relative overflow-hidden rounded-lg border', this.className)\n }\n\n get lines(): string[] {\n return this.code.split('\\n')\n }\n\n get bodyVisible(): boolean {\n return !this.showHeader || this.isExpanded\n }\n\n get copyLabel(): string {\n if (this.copyStatus === 'copied') return 'Copied'\n if (this.copyStatus === 'error') return 'Copy failed'\n return 'Copy'\n }\n\n get copyLabelClass(): string {\n return cn('text-xs', this.copyStatus === 'error' && 'text-destructive')\n }\n\n async copyToClipboard(): Promise {\n try {\n await navigator.clipboard.writeText(this.code)\n this.copyStatus = 'copied'\n } catch {\n this.copyStatus = 'error'\n } finally {\n if (this.copyResetTimer) clearTimeout(this.copyResetTimer)\n this.copyResetTimer = setTimeout(() => {\n this.copyStatus = 'idle'\n }, 1600)\n }\n }\n\n private async highlightCode(): Promise {\n const req = ++this.highlightRequest\n this.highlightedSegments = null\n\n try {\n const { tokens } = await codeToTokens(this.code, {\n lang: this.language.toLowerCase() as BundledLanguage,\n themes: { light: 'github-light', dark: 'github-dark' },\n defaultColor: false,\n })\n if (req === this.highlightRequest) {\n this.highlightedSegments = toHighlightSegments(tokens, this.code)\n }\n } catch {\n if (req === this.highlightRequest) {\n this.highlightedSegments = null\n }\n }\n }\n}\n",
"type": "registry:ui",
"target": "~/src/app/components/ui/code-block/code-block.component.ts"
},
{
"path": "packages/registry-angular/components/code-block/index.ts",
"content": "export { UiCodeBlockComponent } from './code-block.component'\nexport type { CodeBlockCopyState } from './code-block.component'\n",
"type": "registry:ui",
"target": "~/src/app/components/ui/code-block/index.ts"
}
],
"dependencies": [
"shiki"
],
"devDependencies": [],
"registryDependencies": [
"https://uipkge.dev/r/angular/button.json"
],
"description": "Syntax-highlighted code preview with a language header, copy button, optional line numbers, and collapsible `` content. Use for installation snippets, API examples, and source you want users to copy verbatim.",
"categories": [
"data-display"
]
}