@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 6.46 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/mdx/Mdx/index.tsx"],"sourcesContent":["'use client';\n\nimport { evaluate } from '@mdx-js/mdx';\nimport { cx } from 'antd-style';\nimport { memo, type ReactNode, useEffect, useMemo, useState } from 'react';\nimport jsxDevRuntime from 'react/jsx-dev-runtime';\nimport jsxRuntime from 'react/jsx-runtime';\nimport { rehypeGithubAlerts } from 'rehype-github-alerts';\nimport rehypeKatex from 'rehype-katex';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { type Pluggable } from 'unified';\n\nimport Alert from '@/Alert';\nimport { useMarkdownContent } from '@/hooks/useMarkdown';\nimport { PreviewGroup } from '@/Image';\nimport { Typography, type TypographyProps } from '@/Markdown';\nimport { styles } from '@/Markdown/style';\n\nimport mdxComponents from '../mdxComponents';\nimport CodeBlock from '../mdxComponents/CodeBlock';\nimport Image from '../mdxComponents/Image';\nimport Video from '../mdxComponents/Video';\n\nconst runtime = process.env.NODE_ENV === 'production' ? jsxRuntime : jsxDevRuntime;\n\nexport interface MdxProps extends Omit<TypographyProps, 'children'> {\n children: string;\n components?: any[];\n enableImageGallery?: boolean;\n enableLatex?: boolean;\n enableMermaid?: boolean;\n fallback?: ReactNode;\n fullFeaturedCodeBlock?: boolean;\n onDoubleClick?: () => void;\n rehypePlugins?: Pluggable[];\n remarkPlugins?: Pluggable[];\n variant?: 'normal' | 'chat';\n}\n\nconst Mdx = memo<MdxProps>(\n ({\n children,\n className,\n style,\n fullFeaturedCodeBlock = true,\n enableImageGallery,\n enableLatex = true,\n enableMermaid = true,\n rehypePlugins,\n remarkPlugins,\n components = {},\n fallback = null,\n fontSize,\n headerMultiple,\n lineHeight,\n marginMultiple,\n variant,\n ...rest\n }) => {\n const escapedContent = useMarkdownContent(children);\n\n const isChatMode = variant === 'chat';\n\n const [MDXContent, setMDXContent] = useState<any>(() => () => null);\n\n const innerRehypePlugins = Array.isArray(rehypePlugins) ? rehypePlugins : [rehypePlugins];\n const memoRehypePlugins = useMemo(\n () =>\n [rehypeGithubAlerts, enableLatex && rehypeKatex, ...innerRehypePlugins].filter(\n Boolean,\n ) as any,\n [enableLatex, ...innerRehypePlugins],\n );\n\n const innerRemarkPlugins = Array.isArray(remarkPlugins) ? remarkPlugins : [remarkPlugins];\n const memoRemarkPlugins = useMemo(\n () => [remarkGfm, enableLatex && remarkMath, ...innerRemarkPlugins].filter(Boolean) as any,\n [enableLatex, ...innerRemarkPlugins],\n );\n\n const memoComponents = useMemo(() => {\n const list: any = {};\n Object.entries({\n ...mdxComponents,\n img: Image,\n pre: (props: any) => (\n <CodeBlock\n {...props}\n enableMermaid={enableMermaid}\n fullFeatured={fullFeaturedCodeBlock}\n />\n ),\n video: Video,\n ...components,\n }).forEach(([key, Render]: any) => {\n list[key] = (props: any) => <Render {...props} />;\n });\n return list;\n }, [components, enableMermaid, fullFeaturedCodeBlock]);\n\n useEffect(() => {\n if (!escapedContent) return;\n (async () => {\n try {\n const { default: Content } = await evaluate(escapedContent, {\n ...runtime,\n development: process.env.NODE_ENV !== 'production',\n rehypePlugins: memoRehypePlugins,\n remarkPlugins: memoRemarkPlugins,\n });\n setMDXContent(() => Content);\n } catch (error: any) {\n // @ts-ignore\n setMDXContent(() => () => (\n <Alert\n description={String(error?.message as string)}\n title={'Error compiling MDX'}\n type=\"error\"\n style={{\n width: '100%',\n }}\n />\n ));\n console.error('Error compiling MDX:', error);\n }\n })();\n }, [escapedContent, memoRehypePlugins, memoRemarkPlugins]);\n\n if (!escapedContent || !MDXContent) return fallback;\n\n return (\n <Typography\n className={cx(enableLatex && styles.latex, isChatMode && styles.chat, className)}\n data-code-type=\"mdx\"\n fontSize={fontSize}\n headerMultiple={headerMultiple}\n lineHeight={lineHeight}\n marginMultiple={marginMultiple}\n style={style}\n {...rest}\n >\n <PreviewGroup enable={enableImageGallery}>\n <MDXContent components={memoComponents} />\n </PreviewGroup>\n </Typography>\n );\n },\n);\n\nMdx.displayName = 'Mdx';\n\nexport default Mdx;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,QAAQ,IAAI,aAAa,eAAe,aAAa;AAgBrE,MAAM,MAAM,MACT,EACC,UACA,WACA,OACA,wBAAwB,MACxB,oBACA,cAAc,MACd,gBAAgB,MAChB,eACA,eACA,aAAa,CAAC,GACd,WAAW,MACX,UACA,gBACA,YACA,gBACA,SACA,GAAG,WACC;CACJ,MAAM,iBAAiB,mBAAmB,QAAQ;CAElD,MAAM,aAAa,YAAY;CAE/B,MAAM,CAAC,YAAY,iBAAiB,qBAA0B,IAAI;CAElE,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAEtB;EAAC;EAAoB,eAAe;EAAa,GAAG;CAAkB,CAAC,CAAC,OACtE,OACF,GACF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,qBAAqB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;CACxF,MAAM,oBAAoB,cAClB;EAAC;EAAW,eAAe;EAAY,GAAG;CAAkB,CAAC,CAAC,OAAO,OAAO,GAClF,CAAC,aAAa,GAAG,kBAAkB,CACrC;CAEA,MAAM,iBAAiB,cAAc;EACnC,MAAM,OAAY,CAAC;EACnB,OAAO,QAAQ;GACb,GAAG;GACH,KAAK;GACL,MAAM,UACJ,oBAAC,WAAD;IACE,GAAI;IACW;IACf,cAAc;GACf,CAAA;GAEH,OAAO;GACP,GAAG;EACL,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,YAAiB;GACjC,KAAK,QAAQ,UAAe,oBAAC,QAAD,EAAQ,GAAI,MAAQ,CAAA;EAClD,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAY;EAAe;CAAqB,CAAC;CAErD,gBAAgB;EACd,IAAI,CAAC,gBAAgB;EACrB,CAAC,YAAY;GACX,IAAI;IACF,MAAM,EAAE,SAAS,YAAY,MAAM,SAAS,gBAAgB;KAC1D,GAAG;KACH,aAAa,QAAQ,IAAI,aAAa;KACtC,eAAe;KACf,eAAe;IACjB,CAAC;IACD,oBAAoB,OAAO;GAC7B,SAAS,OAAY;IAEnB,0BACE,oBAAC,OAAD;KACE,aAAa,OAAO,OAAO,OAAiB;KAC5C,OAAO;KACP,MAAK;KACL,OAAO,EACL,OAAO,OACT;IACD,CAAA,CACF;IACD,QAAQ,MAAM,wBAAwB,KAAK;GAC7C;EACF,EAAA,CAAG;CACL,GAAG;EAAC;EAAgB;EAAmB;CAAiB,CAAC;CAEzD,IAAI,CAAC,kBAAkB,CAAC,YAAY,OAAO;CAE3C,OACE,oBAAC,YAAD;EACE,WAAW,GAAG,eAAe,OAAO,OAAO,cAAc,OAAO,MAAM,SAAS;EAC/E,kBAAe;EACL;EACM;EACJ;EACI;EACT;EACP,GAAI;YAEJ,oBAAC,cAAD;GAAc,QAAQ;aACpB,oBAAC,YAAD,EAAY,YAAY,eAAiB,CAAA;EAC7B,CAAA;CACJ,CAAA;AAEhB,CACF;AAEA,IAAI,cAAc"}