@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 6.36 kB
Source Map (JSON)
{"version":3,"file":"useMarkdownComponents.mjs","names":[],"sources":["../../../src/hooks/useMarkdown/useMarkdownComponents.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo } from 'react';\nimport type { Components } from 'react-markdown';\n\nimport Hotkey from '@/Hotkey';\nimport { CodeBlock } from '@/Markdown/components/CodeBlock';\nimport { useMarkdownContext } from '@/Markdown/components/MarkdownProvider';\nimport MarkdownTable from '@/Markdown/components/MarkdownTable';\nimport Image from '@/mdx/mdxComponents/Image';\nimport Link from '@/mdx/mdxComponents/Link';\nimport Section from '@/mdx/mdxComponents/Section';\nimport Video from '@/mdx/mdxComponents/Video';\n\nexport const useMarkdownComponents = (): Components => {\n const {\n components,\n animated,\n citations,\n componentProps,\n enableHtmlPreview,\n enableMermaid,\n fullFeaturedCodeBlock,\n showFootnotes,\n } = useMarkdownContext();\n\n const memoA = useCallback(\n ({ node, ...props }: any) => <Link citations={citations} {...props} {...componentProps?.a} />,\n [citations, componentProps?.a],\n );\n\n const memoImg = useCallback(\n ({ node, ...props }: any) => <Image {...props} {...componentProps?.img} />,\n [componentProps?.img],\n );\n\n const memoVideo = useCallback(\n ({ node, ...props }: any) => <Video {...props} {...componentProps?.video} />,\n [componentProps?.video],\n );\n\n const memoSection = useCallback(\n ({ node, ...props }: any) => <Section showFootnotes={showFootnotes} {...props} />,\n [showFootnotes],\n );\n\n const memoKbd = useCallback(\n ({ children }: any) => <Hotkey keys={children} style={{ display: 'inline-flex' }} />,\n [],\n );\n\n const memoBr = useCallback(() => <br />, []);\n\n const memeP = useCallback(({ style, children, className }: any) => {\n const skipWrapperTags = ['img', 'video'];\n if (typeof children === 'object' && skipWrapperTags.includes(children?.props?.node?.tagName)) {\n return children;\n }\n return (\n <p className={className} style={style}>\n {children}\n </p>\n );\n }, []);\n\n // Stable references for theme objects to prevent unnecessary re-renders\n const highlightTheme = useMemo(\n () => componentProps?.highlight?.theme,\n [JSON.stringify(componentProps?.highlight?.theme)],\n );\n\n const mermaidTheme = useMemo(\n () => componentProps?.mermaid?.theme,\n [JSON.stringify(componentProps?.mermaid?.theme)],\n );\n\n // Create stable component props reference\n const stableComponentProps = useMemo(() => {\n if (!componentProps) return;\n\n return {\n highlight: componentProps.highlight\n ? { ...componentProps.highlight, theme: highlightTheme }\n : undefined,\n html: componentProps.html,\n mermaid: componentProps.mermaid\n ? { ...componentProps.mermaid, theme: mermaidTheme }\n : undefined,\n };\n }, [highlightTheme, mermaidTheme, componentProps?.html]);\n\n const memoPre = useCallback(\n ({ node, ...props }: any) => (\n <CodeBlock\n animated={animated}\n enableHtmlPreview={enableHtmlPreview}\n enableMermaid={enableMermaid}\n fullFeatured={fullFeaturedCodeBlock}\n {...stableComponentProps}\n {...componentProps?.pre}\n {...props}\n />\n ),\n [\n animated,\n enableHtmlPreview,\n enableMermaid,\n fullFeaturedCodeBlock,\n stableComponentProps,\n componentProps?.pre,\n ],\n );\n\n const memoColorPreview = useCallback(({ node, ...props }: any) => <code {...props} />, []);\n\n const memoTable = useCallback(\n ({ node, ...props }: any) => <MarkdownTable node={node} {...props} />,\n [],\n );\n\n const memoComponents = useMemo(\n () => ({\n a: memoA,\n br: memoBr,\n colorPreview: memoColorPreview,\n img: memoImg,\n kbd: memoKbd,\n p: memeP,\n pre: memoPre,\n section: memoSection,\n table: memoTable,\n video: memoVideo,\n }),\n [\n memoA,\n memoBr,\n memoImg,\n memoVideo,\n memoPre,\n memoSection,\n memeP,\n memoColorPreview,\n memoKbd,\n memoTable,\n ],\n );\n\n return useMemo(\n () => ({\n ...memoComponents,\n ...components,\n }),\n [memoComponents, components],\n );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,8BAA0C;CACrD,MAAM,EACJ,YACA,UACA,WACA,gBACA,mBACA,eACA,uBACA,kBACE,mBAAmB;CAEvB,MAAM,QAAQ,aACX,EAAE,MAAM,GAAG,YAAiB,oBAAC,MAAD;EAAiB;EAAW,GAAI;EAAO,GAAI,gBAAgB;CAAI,CAAA,GAC5F,CAAC,WAAW,gBAAgB,CAAC,CAC/B;CAEA,MAAM,UAAU,aACb,EAAE,MAAM,GAAG,YAAiB,oBAAC,OAAD;EAAO,GAAI;EAAO,GAAI,gBAAgB;CAAM,CAAA,GACzE,CAAC,gBAAgB,GAAG,CACtB;CAEA,MAAM,YAAY,aACf,EAAE,MAAM,GAAG,YAAiB,oBAAC,OAAD;EAAO,GAAI;EAAO,GAAI,gBAAgB;CAAQ,CAAA,GAC3E,CAAC,gBAAgB,KAAK,CACxB;CAEA,MAAM,cAAc,aACjB,EAAE,MAAM,GAAG,YAAiB,oBAAC,SAAD;EAAwB;EAAe,GAAI;CAAQ,CAAA,GAChF,CAAC,aAAa,CAChB;CAEA,MAAM,UAAU,aACb,EAAE,eAAoB,oBAAC,QAAD;EAAQ,MAAM;EAAU,OAAO,EAAE,SAAS,cAAc;CAAI,CAAA,GACnF,CAAC,CACH;CAEA,MAAM,SAAS,kBAAkB,oBAAC,MAAD,CAAK,CAAA,GAAG,CAAC,CAAC;CAE3C,MAAM,QAAQ,aAAa,EAAE,OAAO,UAAU,gBAAqB;EAEjE,IAAI,OAAO,aAAa,YAAY,CADX,OAAO,OACkB,CAAC,CAAC,SAAS,UAAU,OAAO,MAAM,OAAO,GACzF,OAAO;EAET,OACE,oBAAC,KAAD;GAAc;GAAkB;GAC7B;EACA,CAAA;CAEP,GAAG,CAAC,CAAC;CAGL,MAAM,iBAAiB,cACf,gBAAgB,WAAW,OACjC,CAAC,KAAK,UAAU,gBAAgB,WAAW,KAAK,CAAC,CACnD;CAEA,MAAM,eAAe,cACb,gBAAgB,SAAS,OAC/B,CAAC,KAAK,UAAU,gBAAgB,SAAS,KAAK,CAAC,CACjD;CAGA,MAAM,uBAAuB,cAAc;EACzC,IAAI,CAAC,gBAAgB;EAErB,OAAO;GACL,WAAW,eAAe,YACtB;IAAE,GAAG,eAAe;IAAW,OAAO;GAAe,IACrD,KAAA;GACJ,MAAM,eAAe;GACrB,SAAS,eAAe,UACpB;IAAE,GAAG,eAAe;IAAS,OAAO;GAAa,IACjD,KAAA;EACN;CACF,GAAG;EAAC;EAAgB;EAAc,gBAAgB;CAAI,CAAC;CAEvD,MAAM,UAAU,aACb,EAAE,MAAM,GAAG,YACV,oBAAC,WAAD;EACY;EACS;EACJ;EACf,cAAc;EACd,GAAI;EACJ,GAAI,gBAAgB;EACpB,GAAI;CACL,CAAA,GAEH;EACE;EACA;EACA;EACA;EACA;EACA,gBAAgB;CAClB,CACF;CAEA,MAAM,mBAAmB,aAAa,EAAE,MAAM,GAAG,YAAiB,oBAAC,QAAD,EAAM,GAAI,MAAQ,CAAA,GAAG,CAAC,CAAC;CAEzF,MAAM,YAAY,aACf,EAAE,MAAM,GAAG,YAAiB,oBAAC,eAAD;EAAqB;EAAM,GAAI;CAAQ,CAAA,GACpE,CAAC,CACH;CAEA,MAAM,iBAAiB,eACd;EACL,GAAG;EACH,IAAI;EACJ,cAAc;EACd,KAAK;EACL,KAAK;EACL,GAAG;EACH,KAAK;EACL,SAAS;EACT,OAAO;EACP,OAAO;CACT,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OAAO,eACE;EACL,GAAG;EACH,GAAG;CACL,IACA,CAAC,gBAAgB,UAAU,CAC7B;AACF"}