@lobehub/ui/es/Highlighter/FullFeatured.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport { bodyVariants, headerVariants, variants } from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'languageTitle'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        className={cx(variants({ shadow, variant, wrap }), className)}\n        data-code-type=\"highlighter\"\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(headerVariants({ variant }), classNames?.header)}\n          justify={'space-between'}\n          style={customStyles?.header}\n          onClick={handleToggleExpand}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          className={cx(bodyVariants({ expand }), classNames?.body)}\n          style={customStyles?.body}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":"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"}