Skip to content

Commit e8d9b99

Browse files
samejrsamejr
committed
Removes the duplication of the Highlight component
1 parent 3eeadc8 commit e8d9b99

File tree

1 file changed

+136
-184
lines changed

1 file changed

+136
-184
lines changed

‎apps/webapp/app/components/code/CodeBlock.tsx‎

Lines changed: 136 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -302,99 +302,16 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
302302
</div>
303303

304304
{shouldHighlight ? (
305-
<Highlight theme={theme} code={code} language={language}>
306-
{({
307-
className: inheritedClassName,
308-
style: inheritedStyle,
309-
tokens,
310-
getLineProps,
311-
getTokenProps,
312-
}) => (
313-
<div
314-
dir="ltr"
315-
className="overflow-auto px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
316-
style={{
317-
maxHeight,
318-
}}
319-
>
320-
<pre
321-
className={cn(
322-
"relative mr-2 font-mono text-xs leading-relaxed",
323-
inheritedClassName
324-
)}
325-
style={inheritedStyle}
326-
dir="ltr"
327-
>
328-
{tokens
329-
.map((line, index) => {
330-
if (
331-
index === tokens.length - 1 &&
332-
line.length === 1 &&
333-
line[0].content === "\n"
334-
) {
335-
return null;
336-
}
337-
338-
const lineNumber = index + 1;
339-
const lineProps = getLineProps({ line, key: index });
340-
341-
let hasAnyHighlights = highlightLines ? highlightLines.length > 0 : false;
342-
343-
let shouldDim = hasAnyHighlights;
344-
if (hasAnyHighlights && highlightLines?.includes(lineNumber)) {
345-
shouldDim = false;
346-
}
347-
348-
return (
349-
<div
350-
key={lineNumber}
351-
{...lineProps}
352-
className={cn(
353-
"flex w-full justify-start transition-opacity duration-500",
354-
lineProps.className
355-
)}
356-
style={{
357-
opacity: shouldDim ? dimAmount : undefined,
358-
...lineProps.style,
359-
}}
360-
>
361-
{showLineNumbers && (
362-
<div
363-
className={
364-
"mr-2 flex-none select-none text-right text-charcoal-500 transition-opacity duration-500"
365-
}
366-
style={{
367-
width: `calc(8 * ${maxLineWidth / 16}rem)`,
368-
}}
369-
>
370-
{lineNumber}
371-
</div>
372-
)}
373-
374-
<div className="flex-1">
375-
{line.map((token, key) => {
376-
const tokenProps = getTokenProps({ token, key });
377-
return (
378-
<span
379-
key={key}
380-
{...tokenProps}
381-
style={{
382-
color: tokenProps?.style?.color as string,
383-
...tokenProps.style,
384-
}}
385-
/>
386-
);
387-
})}
388-
</div>
389-
<div className="w-4 flex-none" />
390-
</div>
391-
);
392-
})
393-
.filter(Boolean)}
394-
</pre>
395-
</div>
396-
)}
397-
</Highlight>
305+
<HighlightCode
306+
theme={theme}
307+
code={code}
308+
language={language}
309+
showLineNumbers={showLineNumbers}
310+
highlightLines={highlightLines}
311+
maxLineWidth={maxLineWidth}
312+
className="px-2 py-3"
313+
preClassName="text-xs"
314+
/>
398315
) : (
399316
<div
400317
dir="ltr"
@@ -413,7 +330,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
413330
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
414331
<DialogContent className="flex flex-col gap-0 p-0 pt-[2.9rem] sm:h-[80vh] sm:max-h-[80vh] sm:max-w-[80vw]">
415332
<DialogHeader className="h-fit">
416-
<DialogTitle className="absolute left-3 top-3">
333+
<DialogTitle className="absolute left-3.5 top-2.5">
417334
{fileName && fileName}
418335
{rowTitle && rowTitle}
419336
</DialogTitle>
@@ -429,96 +346,16 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
429346
</DialogHeader>
430347

431348
{shouldHighlight ? (
432-
<Highlight theme={theme} code={code} language={language}>
433-
{({
434-
className: inheritedClassName,
435-
style: inheritedStyle,
436-
tokens,
437-
getLineProps,
438-
getTokenProps,
439-
}) => (
440-
<div
441-
dir="ltr"
442-
className="min-h-full overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
443-
>
444-
<pre
445-
className={cn(
446-
"relative mr-2 font-mono text-base leading-relaxed",
447-
inheritedClassName
448-
)}
449-
style={inheritedStyle}
450-
dir="ltr"
451-
>
452-
{tokens
453-
.map((line, index) => {
454-
if (
455-
index === tokens.length - 1 &&
456-
line.length === 1 &&
457-
line[0].content === "\n"
458-
) {
459-
return null;
460-
}
461-
462-
const lineNumber = index + 1;
463-
const lineProps = getLineProps({ line, key: index });
464-
465-
let hasAnyHighlights = highlightLines ? highlightLines.length > 0 : false;
466-
467-
let shouldDim = hasAnyHighlights;
468-
if (hasAnyHighlights && highlightLines?.includes(lineNumber)) {
469-
shouldDim = false;
470-
}
471-
472-
return (
473-
<div
474-
key={lineNumber}
475-
{...lineProps}
476-
className={cn(
477-
"flex w-full justify-start transition-opacity duration-500",
478-
lineProps.className
479-
)}
480-
style={{
481-
opacity: shouldDim ? dimAmount : undefined,
482-
...lineProps.style,
483-
}}
484-
>
485-
{showLineNumbers && (
486-
<div
487-
className={
488-
"mr-2 flex-none select-none text-right text-charcoal-500 transition-opacity duration-500"
489-
}
490-
style={{
491-
width: `calc(8 * ${maxLineWidth / 16}rem)`,
492-
}}
493-
>
494-
{lineNumber}
495-
</div>
496-
)}
497-
498-
<div className="flex-1">
499-
{line.map((token, key) => {
500-
const tokenProps = getTokenProps({ token, key });
501-
return (
502-
<span
503-
key={key}
504-
{...tokenProps}
505-
style={{
506-
color: tokenProps?.style?.color as string,
507-
...tokenProps.style,
508-
}}
509-
/>
510-
);
511-
})}
512-
</div>
513-
<div className="w-4 flex-none" />
514-
</div>
515-
);
516-
})
517-
.filter(Boolean)}
518-
</pre>
519-
</div>
520-
)}
521-
</Highlight>
349+
<HighlightCode
350+
theme={theme}
351+
code={code}
352+
language={language}
353+
showLineNumbers={showLineNumbers}
354+
highlightLines={highlightLines}
355+
maxLineWidth={maxLineWidth}
356+
className="min-h-full"
357+
preClassName="text-sm"
358+
/>
522359
) : (
523360
<div
524361
dir="ltr"
@@ -563,3 +400,118 @@ export function TitleRow({ title }: { title: ReactNode }) {
563400
</div>
564401
);
565402
}
403+
404+
type HighlightCodeProps = {
405+
theme: PrismTheme;
406+
code: string;
407+
language: Language;
408+
showLineNumbers: boolean;
409+
highlightLines?: number[];
410+
maxLineWidth?: number;
411+
className?: string;
412+
preClassName?: string;
413+
};
414+
415+
function HighlightCode({
416+
theme,
417+
code,
418+
language,
419+
showLineNumbers,
420+
highlightLines,
421+
maxLineWidth,
422+
className,
423+
preClassName,
424+
}: HighlightCodeProps) {
425+
return (
426+
<Highlight theme={theme} code={code} language={language}>
427+
{({
428+
className: inheritedClassName,
429+
style: inheritedStyle,
430+
tokens,
431+
getLineProps,
432+
getTokenProps,
433+
}) => (
434+
<div
435+
dir="ltr"
436+
className={cn(
437+
"overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
438+
className
439+
)}
440+
>
441+
<pre
442+
className={cn(
443+
"relative mr-2 font-mono leading-relaxed",
444+
inheritedClassName,
445+
preClassName
446+
)}
447+
style={inheritedStyle}
448+
dir="ltr"
449+
>
450+
{tokens
451+
.map((line, index) => {
452+
if (index === tokens.length - 1 && line.length === 1 && line[0].content === "\n") {
453+
return null;
454+
}
455+
456+
const lineNumber = index + 1;
457+
const lineProps = getLineProps({ line, key: index });
458+
459+
let hasAnyHighlights = highlightLines ? highlightLines.length > 0 : false;
460+
461+
let shouldDim = hasAnyHighlights;
462+
if (hasAnyHighlights && highlightLines?.includes(lineNumber)) {
463+
shouldDim = false;
464+
}
465+
466+
return (
467+
<div
468+
key={lineNumber}
469+
{...lineProps}
470+
className={cn(
471+
"flex w-full justify-start transition-opacity duration-500",
472+
lineProps.className
473+
)}
474+
style={{
475+
opacity: shouldDim ? dimAmount : undefined,
476+
...lineProps.style,
477+
}}
478+
>
479+
{showLineNumbers && (
480+
<div
481+
className={
482+
"mr-2 flex-none select-none text-right text-charcoal-500 transition-opacity duration-500"
483+
}
484+
style={{
485+
width: `calc(8 * ${(maxLineWidth as number) / 16}rem)`,
486+
}}
487+
>
488+
{lineNumber}
489+
</div>
490+
)}
491+
492+
<div className="flex-1">
493+
{line.map((token, key) => {
494+
const tokenProps = getTokenProps({ token, key });
495+
return (
496+
<span
497+
key={key}
498+
{...tokenProps}
499+
style={{
500+
color: tokenProps?.style?.color as string,
501+
...tokenProps.style,
502+
}}
503+
/>
504+
);
505+
})}
506+
</div>
507+
<div className="w-4 flex-none" />
508+
</div>
509+
);
510+
})
511+
.filter(Boolean)}
512+
</pre>
513+
</div>
514+
)}
515+
</Highlight>
516+
);
517+
}

0 commit comments

Comments
 (0)