= ({ language, code }) => {
- const { isCopied, copyToClipboard } = useCopyToClipboard();
- const onCopy = () => {
- if (!code || isCopied) return;
- copyToClipboard(code);
- };
-
- return (
-
- {language}
-
- {!isCopied && }
- {isCopied && }
-
-
- );
-};
+interface CodeHeaderProps {
+ language?: string;
+ code: string;
+}
const useCopyToClipboard = ({
copiedDuration = 3000,
@@ -71,8 +39,26 @@ const useCopyToClipboard = ({
return { isCopied, copyToClipboard };
};
-const defaultComponents = memoizeMarkdownComponents({
- h1: ({ className, ...props }) => (
+const CodeHeader: FC = ({ language, code }) => {
+ const { isCopied, copyToClipboard } = useCopyToClipboard();
+ const onCopy = () => {
+ if (!code || isCopied) return;
+ copyToClipboard(code);
+ };
+
+ return (
+
+ {language}
+
+ {!isCopied && }
+ {isCopied && }
+
+
+ );
+};
+
+const defaultComponents: any = {
+ h1: ({ className, ...props }: { className?: string }) => (
),
- h2: ({ className, ...props }) => (
+ h2: ({ className, ...props }: { className?: string }) => (
),
- h3: ({ className, ...props }) => (
+ h3: ({ className, ...props }: { className?: string }) => (
),
- h4: ({ className, ...props }) => (
+ h4: ({ className, ...props }: { className?: string }) => (
),
- h5: ({ className, ...props }) => (
+ h5: ({ className, ...props }: { className?: string }) => (
),
- h6: ({ className, ...props }) => (
+ h6: ({ className, ...props }: { className?: string }) => (
),
- p: ({ className, ...props }) => (
+ p: ({ className, ...props }: { className?: string }) => (
),
- a: ({ className, ...props }) => (
+ a: ({ className, ...props }: { className?: string }) => (
),
- blockquote: ({ className, ...props }) => (
+ blockquote: ({ className, ...props }: { className?: string }) => (
),
- ul: ({ className, ...props }) => (
+ ul: ({ className, ...props }: { className?: string }) => (
li]:mt-2", className)}
{...props}
/>
),
- ol: ({ className, ...props }) => (
+ ol: ({ className, ...props }: { className?: string }) => (
li]:mt-2", className)}
{...props}
/>
),
- hr: ({ className, ...props }) => (
+ hr: ({ className, ...props }: { className?: string }) => (
),
- table: ({ className, ...props }) => (
+ table: ({ className, ...props }: { className?: string }) => (
),
- th: ({ className, ...props }) => (
+ th: ({ className, ...props }: { className?: string }) => (
|
),
- td: ({ className, ...props }) => (
+ td: ({ className, ...props }: { className?: string }) => (
|
),
- tr: ({ className, ...props }) => (
+ tr: ({ className, ...props }: { className?: string }) => (
td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
@@ -195,30 +181,58 @@ const defaultComponents = memoizeMarkdownComponents({
{...props}
/>
),
- sup: ({ className, ...props }) => (
+ sup: ({ className, ...props }: { className?: string }) => (
a]:text-xs [&>a]:no-underline", className)}
{...props}
/>
),
- pre: ({ className, ...props }) => (
+ pre: ({ className, ...props }: { className?: string }) => (
),
- code: function Code({ className, ...props }) {
- const isCodeBlock = useIsMarkdownCodeBlock();
+ code: ({ className, children, ...props }: { className?: string; children: React.ReactNode }) => {
+ const match = /language-(\w+)/.exec(className || '');
+
+ if (match) {
+ const language = match[1];
+ const code = String(children).replace(/\n$/, '');
+
+ return (
+ <>
+
+
+ {code}
+
+ >
+ );
+ }
+
return (
-
+
+ {children}
+
);
- },
- CodeHeader,
- SyntaxHighlighter,
-});
+ }
+};
+
+const MarkdownTextImpl: FC<{ children: string }> = ({ children }) => {
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
diff --git a/src/components/thread/syntax-highlighter.tsx b/src/components/thread/syntax-highlighter.tsx
index 9561174..333ef2c 100644
--- a/src/components/thread/syntax-highlighter.tsx
+++ b/src/components/thread/syntax-highlighter.tsx
@@ -1,24 +1,36 @@
-import { PrismAsyncLight } from "react-syntax-highlighter";
-import { makePrismAsyncLightSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
-
+import { PrismAsyncLight as SyntaxHighlighterPrism } from "react-syntax-highlighter";
import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
-
import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { FC } from "react";
-// register languages you want to support
-PrismAsyncLight.registerLanguage("js", tsx);
-PrismAsyncLight.registerLanguage("jsx", tsx);
-PrismAsyncLight.registerLanguage("ts", tsx);
-PrismAsyncLight.registerLanguage("tsx", tsx);
-PrismAsyncLight.registerLanguage("python", python);
+// Register languages you want to support
+SyntaxHighlighterPrism.registerLanguage("js", tsx);
+SyntaxHighlighterPrism.registerLanguage("jsx", tsx);
+SyntaxHighlighterPrism.registerLanguage("ts", tsx);
+SyntaxHighlighterPrism.registerLanguage("tsx", tsx);
+SyntaxHighlighterPrism.registerLanguage("python", python);
-export const SyntaxHighlighter = makePrismAsyncLightSyntaxHighlighter({
- style: coldarkDark,
- customStyle: {
- margin: 0,
- width: "100%",
- background: "transparent",
- padding: "1.5rem 1rem",
- },
-});
+interface SyntaxHighlighterProps {
+ children: string;
+ language: string;
+ className?: string;
+}
+
+export const SyntaxHighlighter: FC = ({ children, language, className }) => {
+ return (
+
+ {children}
+
+ );
+};