CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(pre): add horizontal scrolling support for code blocks

Browse Source
This commit is contained in:
cfngc4594 2025-03-26 22:48:46 +08:00
parent 793db58e36
commit 2605b211bc
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/content/pre.tsx
View File

@ -4,9 +4,10 @@ import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { CheckIcon, CopyIcon } from "lucide-react";
import { ReactNode, useRef, useState } from "react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
interface PreProps {
children?: ReactNode,
children?: ReactNode;
className?: string;
}
@ -53,7 +54,7 @@ export function Pre({
<div
className={cn(
"transition-all",
copied ? "scale-100 opacity-100" : "scale-0 opacity-0",
copied ? "scale-100 opacity-100" : "scale-0 opacity-0"
)}
>
<CheckIcon className="stroke-emerald-500" size={16} aria-hidden="true" />
@ -61,15 +62,18 @@ export function Pre({
<div
className={cn(
"absolute transition-all",
copied ? "scale-0 opacity-0" : "scale-100 opacity-100",
copied ? "scale-0 opacity-0" : "scale-100 opacity-100"
)}
>
<CopyIcon size={16} aria-hidden="true" />
</div>
</Button>
<pre ref={preRef} className={className} {...props}>
{children}
</pre>
<ScrollArea>
<pre ref={preRef} className={className} {...props}>
{children}
</pre>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>
);
}