@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 6.57 kB
Source Map (JSON)
{"version":3,"file":"Highlighter.mjs","names":["CopyButton","SyntaxHighlighter","FullFeatured","Flexbox","Tag"],"sources":["../../src/Highlighter/Highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName } from '@/Highlighter/const';\nimport Tag from '@/Tag';\n\nimport FullFeatured from './FullFeatured';\nimport SyntaxHighlighter from './SyntaxHighlighter';\nimport { styles, variants } from './style';\nimport type { HighlighterProps } from './type';\n\nexport const Highlighter = memo<HighlighterProps>(\n ({\n animated,\n fullFeatured,\n actionIconSize,\n children,\n language = 'markdown',\n className,\n classNames,\n styles: customStyles,\n copyable = true,\n showLanguage = true,\n variant = 'filled',\n shadow,\n wrap,\n bodyRender,\n actionsRender,\n enableTransformer,\n theme,\n icon,\n fileName,\n allowChangeLanguage,\n defaultExpand = true,\n ...rest\n }) => {\n const [lang, setLang] = useState(language);\n\n // Safely handle children with boundary check\n const tirmedChildren = useMemo(() => {\n if (children === null || children === undefined) return '';\n if (typeof children !== 'string') {\n console.warn('Highlighter: children should be a string, received:', typeof children);\n return String(children);\n }\n return children.trim();\n }, [children]);\n\n const copyContentRef = useRef(tirmedChildren);\n\n useEffect(() => {\n copyContentRef.current = tirmedChildren;\n }, [tirmedChildren]);\n\n const getCopyContent = useCallback(() => copyContentRef.current, []);\n\n const originalActions = useMemo(() => {\n if (!copyable) return null;\n return (\n <CopyButton\n content={getCopyContent}\n glass\n size={actionIconSize || { blockSize: 28, size: 16 }}\n />\n );\n }, [actionIconSize, copyable, getCopyContent]);\n\n const actions = useMemo(() => {\n if (!actionsRender) return originalActions;\n return actionsRender({\n actionIconSize,\n content: tirmedChildren,\n getContent: getCopyContent,\n language: lang,\n originalNode: originalActions,\n });\n }, [actionIconSize, actionsRender, getCopyContent, lang, originalActions, tirmedChildren]);\n\n const originalBody = useMemo(\n () => (\n <SyntaxHighlighter\n animated={animated}\n className={classNames?.content}\n enableTransformer={enableTransformer}\n language={lang?.toLowerCase()}\n style={{\n height: '100%',\n ...customStyles?.content,\n }}\n theme={theme}\n variant={variant}\n >\n {tirmedChildren}\n </SyntaxHighlighter>\n ),\n [\n animated,\n enableTransformer,\n lang,\n theme,\n tirmedChildren,\n variant,\n customStyles?.content,\n customStyles?.content,\n ],\n );\n\n const displayName = useMemo(() => {\n if (fileName) return fileName;\n return getCodeLanguageDisplayName(language);\n }, [fileName, language]);\n\n const body = useMemo(() => {\n if (!bodyRender) return originalBody;\n return bodyRender({ content: tirmedChildren, language: lang, originalNode: originalBody });\n }, [bodyRender, lang, originalBody, tirmedChildren]);\n\n if (fullFeatured)\n return (\n <FullFeatured\n actionsRender={actionsRender}\n allowChangeLanguage={allowChangeLanguage}\n className={className}\n classNames={classNames}\n content={tirmedChildren}\n copyable={copyable}\n defaultExpand={defaultExpand}\n fileName={fileName}\n icon={icon}\n language={language}\n setLanguage={setLang}\n shadow={shadow}\n showLanguage={showLanguage}\n styles={customStyles}\n variant={variant}\n wrap={wrap}\n {...rest}\n >\n {body}\n </FullFeatured>\n );\n\n return (\n <Flexbox\n className={cx(variants({ shadow, variant, wrap }), className)}\n data-code-type=\"highlighter\"\n {...rest}\n >\n <Flexbox align={'center'} className={styles.actions} flex={'none'} gap={4} horizontal>\n {actions}\n </Flexbox>\n {showLanguage && language && <Tag className={styles.lang}>{displayName}</Tag>}\n {body}\n </Flexbox>\n );\n },\n);\n\nHighlighter.displayName = 'Highlighter';\n\nexport default Highlighter;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAa,cAAc,MACxB,EACC,UACA,cACA,gBACA,UACA,WAAW,YACX,WACA,YACA,QAAQ,cACR,WAAW,MACX,eAAe,MACf,UAAU,UACV,QACA,MACA,YACA,eACA,mBACA,OACA,MACA,UACA,qBACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,SAAS,SAAS;CAG1C,MAAM,iBAAiB,cAAc;AACnC,MAAI,aAAa,QAAQ,aAAa,OAAW,QAAO;AACxD,MAAI,OAAO,aAAa,UAAU;AAChC,WAAQ,KAAK,uDAAuD,OAAO,SAAS;AACpF,UAAO,OAAO,SAAS;;AAEzB,SAAO,SAAS,MAAM;IACrB,CAAC,SAAS,CAAC;CAEd,MAAM,iBAAiB,OAAO,eAAe;AAE7C,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,eAAe,CAAC;CAEpB,MAAM,iBAAiB,kBAAkB,eAAe,SAAS,EAAE,CAAC;CAEpE,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,oBAACA;GACC,SAAS;GACT;GACA,MAAM,kBAAkB;IAAE,WAAW;IAAI,MAAM;IAAI;IACnD;IAEH;EAAC;EAAgB;EAAU;EAAe,CAAC;CAE9C,MAAM,UAAU,cAAc;AAC5B,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,cAAc;GACnB;GACA,SAAS;GACT,YAAY;GACZ,UAAU;GACV,cAAc;GACf,CAAC;IACD;EAAC;EAAgB;EAAe;EAAgB;EAAM;EAAiB;EAAe,CAAC;CAE1F,MAAM,eAAe,cAEjB,oBAACC;EACW;EACV,WAAW,YAAY;EACJ;EACnB,UAAU,MAAM,aAAa;EAC7B,OAAO;GACL,QAAQ;GACR,GAAG,cAAc;GAClB;EACM;EACE;YAER;GACiB,EAEtB;EACE;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,cAAc;EACf,CACF;CAED,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO;AACrB,SAAO,2BAA2B,SAAS;IAC1C,CAAC,UAAU,SAAS,CAAC;CAExB,MAAM,OAAO,cAAc;AACzB,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,WAAW;GAAE,SAAS;GAAgB,UAAU;GAAM,cAAc;GAAc,CAAC;IACzF;EAAC;EAAY;EAAM;EAAc;EAAe,CAAC;AAEpD,KAAI,aACF,QACE,oBAACC;EACgB;EACM;EACV;EACC;EACZ,SAAS;EACC;EACK;EACL;EACJ;EACI;EACV,aAAa;EACL;EACM;EACd,QAAQ;EACC;EACH;EACN,GAAI;YAEH;GACY;AAGnB,QACE,qBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;GAAM,CAAC,EAAE,UAAU;EAC7D,kBAAe;EACf,GAAI;;GAEJ,oBAACA;IAAQ,OAAO;IAAU,WAAW,OAAO;IAAS,MAAM;IAAQ,KAAK;IAAG;cACxE;KACO;GACT,gBAAgB,YAAY,oBAACC;IAAI,WAAW,OAAO;cAAO;KAAkB;GAC5E;;GACO;EAGf;AAED,YAAY,cAAc;AAE1B,0BAAe"}