refactor: Remove unnecessary flex classes from CodeBlock component
This commit is contained in:
parent
56b7121922
commit
4a5713d6e4
@ -1,6 +1,6 @@
|
|||||||
import { Tooltip } from "antd"
|
import { Tooltip } from "antd"
|
||||||
import { CheckIcon, ClipboardIcon } from "lucide-react"
|
import { CheckIcon, ClipboardIcon } from "lucide-react"
|
||||||
import { FC, memo, useState } from "react"
|
import { FC, useState } from "react"
|
||||||
import { useTranslation } from "react-i18next"
|
import { useTranslation } from "react-i18next"
|
||||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
|
||||||
import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism"
|
import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism"
|
||||||
@ -10,7 +10,7 @@ interface Props {
|
|||||||
value: string
|
value: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CodeBlock: FC<Props> = memo(({ language, value }) => {
|
export const CodeBlock: FC<Props> =({ language, value }) => {
|
||||||
const [isBtnPressed, setIsBtnPressed] = useState(false)
|
const [isBtnPressed, setIsBtnPressed] = useState(false)
|
||||||
const { t } = useTranslation("common")
|
const { t } = useTranslation("common")
|
||||||
return (
|
return (
|
||||||
@ -63,4 +63,4 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
|
@ -1,28 +1,16 @@
|
|||||||
import remarkGfm from "remark-gfm"
|
import remarkGfm from "remark-gfm"
|
||||||
import remarkMath from "remark-math"
|
import remarkMath from "remark-math"
|
||||||
import ReactMarkdown, { Options } from "react-markdown"
|
import ReactMarkdown from "react-markdown"
|
||||||
|
|
||||||
import "property-information"
|
import "property-information"
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import { Tooltip } from "antd"
|
|
||||||
import { CheckIcon, ClipboardIcon } from "lucide-react"
|
|
||||||
import { useTranslation } from "react-i18next"
|
|
||||||
|
|
||||||
import { FC, memo } from "react"
|
|
||||||
import { CodeBlock } from "./CodeBlock"
|
import { CodeBlock } from "./CodeBlock"
|
||||||
|
|
||||||
export const MemoizedReactMarkdown: FC<Options> = memo(
|
|
||||||
ReactMarkdown,
|
|
||||||
(prevProps, nextProps) =>
|
|
||||||
prevProps.children === nextProps.children &&
|
|
||||||
prevProps.className === nextProps.className
|
|
||||||
)
|
|
||||||
|
|
||||||
export default function Markdown({ message }: { message: string }) {
|
export default function Markdown({ message }: { message: string }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<MemoizedReactMarkdown
|
<ReactMarkdown
|
||||||
className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
|
className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark"
|
||||||
remarkPlugins={[remarkGfm, remarkMath]}
|
remarkPlugins={[remarkGfm, remarkMath]}
|
||||||
components={{
|
components={{
|
||||||
@ -55,7 +43,7 @@ export default function Markdown({ message }: { message: string }) {
|
|||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
{message}
|
{message}
|
||||||
</MemoizedReactMarkdown>
|
</ReactMarkdown>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user