Spaces:
Sleeping
Sleeping
File size: 4,043 Bytes
05c5ed5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | "use client";
import type { JSX } from "react";
import {
bundledLanguages,
codeToHast,
type BundledLanguage,
} from "shiki/bundle/web";
import { Fragment, useLayoutEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { toJsxRuntime } from "hast-util-to-jsx-runtime";
import { safe } from "ts-safe";
import { cn } from "lib/utils";
import { useTheme } from "next-themes";
import { Button } from "ui/button";
import { CheckIcon, CopyIcon } from "lucide-react";
import JsonView from "ui/json-view";
import { useCopy } from "@/hooks/use-copy";
import dynamic from "next/dynamic";
// Dynamically import MermaidDiagram component
const MermaidDiagram = dynamic(
() => import("./mermaid-diagram").then((mod) => mod.MermaidDiagram),
{
loading: () => (
<div className="text-sm flex bg-accent/30 flex-col rounded-2xl relative my-4 overflow-hidden border">
<div className="w-full flex z-20 py-2 px-4 items-center">
<span className="text-sm text-muted-foreground">mermaid</span>
</div>
<div className="relative overflow-x-auto px-6 pb-6">
<div className="h-20 w-full flex items-center justify-center">
<span className="text-muted-foreground">
Loading Mermaid renderer...
</span>
</div>
</div>
</div>
),
ssr: false,
},
);
const PurePre = ({
children,
className,
code,
lang,
}: {
children: any;
className?: string;
code: string;
lang: string;
}) => {
const { copied, copy } = useCopy();
return (
<pre className={cn("relative", className)}>
<div className="p-1.5 border-b mb-4 z-20 bg-secondary">
<div className="w-full flex z-20 py-0.5 px-4 items-center">
<span className="text-sm text-muted-foreground">{lang}</span>
<Button
size="icon"
variant={copied ? "secondary" : "ghost"}
className="ml-auto z-10 p-3! size-2! rounded-sm"
onClick={() => {
copy(code);
}}
>
{copied ? <CheckIcon /> : <CopyIcon className="size-3!" />}
</Button>
</div>
</div>
<div className="relative overflow-x-auto px-6 pb-6">{children}</div>
</pre>
);
};
export async function Highlight(
code: string,
lang: BundledLanguage | (string & {}),
theme: string,
) {
const parsed: BundledLanguage = (
bundledLanguages[lang] ? lang : "md"
) as BundledLanguage;
if (lang === "json") {
return (
<PurePre code={code} lang={lang}>
<JsonView data={code} initialExpandDepth={3} />
</PurePre>
);
}
if (lang === "mermaid") {
return (
<PurePre code={code} lang={lang}>
<MermaidDiagram chart={code} />
</PurePre>
);
}
const out = await codeToHast(code, {
lang: parsed,
theme,
});
return toJsxRuntime(out, {
Fragment,
jsx,
jsxs,
components: {
pre: (props) => <PurePre {...props} code={code} lang={lang} />,
},
}) as JSX.Element;
}
export function PreBlock({ children }: { children: any }) {
const code = children.props.children;
const { theme } = useTheme();
const language = children.props.className?.split("-")?.[1] || "bash";
const [loading, setLoading] = useState(true);
const [component, setComponent] = useState<JSX.Element | null>(
<PurePre className="animate-pulse" code={code} lang={language}>
{children}
</PurePre>,
);
useLayoutEffect(() => {
safe()
.map(() =>
Highlight(
code,
language,
theme == "dark" ? "dark-plus" : "github-light",
),
)
.ifOk(setComponent)
.watch(() => setLoading(false));
}, [theme, language, code]);
// For other code blocks, render as before
return (
<div
className={cn(
loading && "animate-pulse",
"text-sm flex bg-secondary/40 shadow border flex-col rounded relative my-4 overflow-hidden",
)}
>
{component}
</div>
);
}
|