@mantine/code-highlight/esm/CodeHighlight/CodeHighlight.mjs.map

Code highlight with Mantine theme

{"version":3,"file":"CodeHighlight.mjs","names":["classes"],"sources":["../../src/CodeHighlight/CodeHighlight.tsx"],"sourcesContent":["import cx from 'clsx';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  ScrollArea,\n  StylesApiProps,\n  UnstyledButton,\n  useComputedColorScheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  useHighlight,\n  type CodeHighlightAdapter,\n} from '../CodeHighlightProvider/CodeHighlightProvider';\nimport type {\n  CodeHighlightDefaultLanguage,\n  CodeHighlightTabsCode,\n  CodeHighlightTabsFactory,\n  CodeHighlightTabsProps,\n  CodeHighlightTabsStylesNames,\n} from '../CodeHighlightTabs/CodeHighlightTabs';\nimport type {\n  InlineCodeHighlightCssVariables,\n  InlineCodeHighlightFactory,\n  InlineCodeHighlightProps,\n  InlineCodeHighlightStylesNames,\n} from './InlineCodeHighlight';\nimport {\n  CodeHighlightContextProvider,\n  type CodeHighlightContextValue,\n} from './CodeHighlight.context';\nimport {\n  CodeHighlightControl,\n  type CodeHighlightControlProps,\n} from './CodeHighlightControl/CodeHighlightControl';\nimport { CopyCodeButton } from './CopyCodeButton/CopyCodeButton';\nimport { ExpandCodeButton } from './ExpandCodeButton/ExpandCodeButton';\nimport classes from '../CodeHighlight.module.css';\n\nexport type CodeHighlightStylesNames =\n  | 'codeHighlight'\n  | 'pre'\n  | 'code'\n  | 'control'\n  | 'controlTooltip'\n  | 'controls'\n  | 'scrollarea'\n  | 'showCodeButton'\n  | 'lineNumbers'\n  | 'codeWrapper';\n\nexport type CodeHighlightCssVariables = {\n  codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';\n};\n\nexport interface CodeHighlightSettings {\n  /** Label for copy button in default state @default 'Copy' */\n  copyLabel?: string;\n\n  /** Label for copy button in copied state @default 'Copied' */\n  copiedLabel?: string;\n\n  /** Uncontrolled expanded default state */\n  defaultExpanded?: boolean;\n\n  /** Controlled expanded state */\n  expanded?: boolean;\n\n  /** Called when expanded state changes */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Max height of collapsed state @default 180px */\n  maxCollapsedHeight?: number | string;\n\n  /** Determines whether the copy button should be displayed @default true  */\n  withCopyButton?: boolean;\n\n  /** Determines whether the expand/collapse button should be displayed @default false */\n  withExpandButton?: boolean;\n\n  /** Label for expand button @default 'Expand code' */\n  expandCodeLabel?: string;\n\n  /** Label for collapse button @default 'Collapse code' */\n  collapseCodeLabel?: string;\n\n  /** Controls background color of the code. By default, the value depends on color scheme. */\n  background?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default 0 */\n  radius?: MantineRadius;\n\n  /** Adds border to the root element @default false */\n  withBorder?: boolean;\n\n  /** Determines whether line numbers should be displayed @default false */\n  withLineNumbers?: boolean;\n\n  /** Extra controls to display in the controls list */\n  controls?: React.ReactNode[];\n\n  /** Set to use dark or light color scheme. When using shiki adapter, you can use loaded themes here */\n  codeColorScheme?: 'dark' | 'light' | (string & {});\n}\n\nexport interface CodeHighlightProps\n  extends\n    CodeHighlightSettings,\n    BoxProps,\n    StylesApiProps<CodeHighlightFactory>,\n    ElementProps<'div'> {\n  __withOffset?: boolean;\n  __staticSelector?: string;\n\n  /** If set, the code will be rendered as inline element without `<pre>` @default false */\n  __inline?: boolean;\n\n  /** Code to highlight */\n  code: string;\n\n  /** Language of the code, used for syntax highlighting */\n  language?: string;\n}\n\nexport type CodeHighlightFactory = Factory<{\n  props: CodeHighlightProps;\n  ref: HTMLDivElement;\n  stylesNames: CodeHighlightStylesNames;\n  vars: CodeHighlightCssVariables;\n  staticComponents: {\n    Control: typeof CodeHighlightControl;\n  };\n}>;\n\nconst defaultProps = {\n  withCopyButton: true,\n  expandCodeLabel: 'Expand code',\n  collapseCodeLabel: 'Collapse code',\n} satisfies Partial<CodeHighlightProps>;\n\nconst varsResolver = createVarsResolver<CodeHighlightFactory>(\n  (theme, { maxCollapsedHeight, background, radius }) => ({\n    codeHighlight: {\n      '--ch-max-height': rem(maxCollapsedHeight),\n      '--ch-background': background ? getThemeColor(background, theme) : undefined,\n      '--ch-radius': typeof radius !== 'undefined' ? getRadius(radius) : undefined,\n    },\n  })\n);\n\nexport const CodeHighlight = factory<CodeHighlightFactory>((_props) => {\n  const props = useProps('CodeHighlight', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    code,\n    copiedLabel,\n    copyLabel,\n    defaultExpanded,\n    expanded,\n    onExpandedChange,\n    maxCollapsedHeight,\n    withCopyButton,\n    withExpandButton,\n    expandCodeLabel,\n    collapseCodeLabel,\n    radius,\n    background,\n    withBorder,\n    withLineNumbers,\n    controls,\n    language,\n    codeColorScheme,\n    __withOffset,\n    __inline,\n    __staticSelector,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CodeHighlightFactory>({\n    name: __staticSelector || 'CodeHighlight',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'codeHighlight',\n  });\n\n  const [_expanded, setExpanded] = useUncontrolled({\n    value: expanded,\n    defaultValue: defaultExpanded,\n    finalValue: true,\n    onChange: onExpandedChange,\n  });\n\n  const shouldDisplayControls =\n    (controls && controls.length > 0) || withExpandButton || withCopyButton;\n\n  const colorScheme = useComputedColorScheme();\n  const highlight = useHighlight();\n  const highlightedCode = highlight({\n    code: code.trim(),\n    language,\n    colorScheme: codeColorScheme ?? colorScheme,\n  });\n\n  const codeContent = highlightedCode.isHighlighted\n    ? { dangerouslySetInnerHTML: { __html: highlightedCode.highlightedCode } }\n    : { children: code.trim() };\n\n  if (__inline) {\n    return (\n      <Box\n        component=\"code\"\n        {...others}\n        {...highlightedCode.codeElementProps}\n        {...getStyles('codeHighlight', {\n          className: cx(highlightedCode.codeElementProps?.className, className),\n          style: [{ ...highlightedCode.codeElementProps?.style }, style],\n        })}\n        data-with-border={withBorder || undefined}\n        {...codeContent}\n      />\n    );\n  }\n\n  return (\n    <CodeHighlightContextProvider value={{ getStyles, codeColorScheme }}>\n      <Box\n        {...getStyles('codeHighlight')}\n        {...others}\n        dir=\"ltr\"\n        data-code-color-scheme={codeColorScheme}\n        data-with-border={withBorder || undefined}\n      >\n        {shouldDisplayControls && (\n          <div {...getStyles('controls')} data-with-offset={__withOffset || undefined}>\n            {controls}\n\n            {withExpandButton && (\n              <ExpandCodeButton\n                expanded={_expanded}\n                onExpand={setExpanded}\n                expandCodeLabel={expandCodeLabel}\n                collapseCodeLabel={collapseCodeLabel}\n              />\n            )}\n            {withCopyButton && (\n              <CopyCodeButton code={code} copiedLabel={copiedLabel} copyLabel={copyLabel} />\n            )}\n          </div>\n        )}\n\n        <ScrollArea\n          type=\"hover\"\n          scrollbarSize={4}\n          dir=\"ltr\"\n          offsetScrollbars={false}\n          data-collapsed={!_expanded || undefined}\n          styles={{ viewport: { overscrollBehaviorInline: 'none' } }}\n          {...getStyles('scrollarea')}\n        >\n          <div {...getStyles('codeWrapper')}>\n            {withLineNumbers && (\n              <div {...getStyles('lineNumbers')} data-with-offset={__withOffset || undefined}>\n                {code\n                  .trim()\n                  .split('\\n')\n                  .map((_, i) => (\n                    <div key={i}>{i + 1}</div>\n                  ))}\n              </div>\n            )}\n            <pre {...getStyles('pre')} data-with-offset={__withOffset || undefined}>\n              <code\n                {...highlightedCode.codeElementProps}\n                {...getStyles('code', {\n                  className: highlightedCode.codeElementProps?.className,\n                  style: highlightedCode.codeElementProps?.style,\n                })}\n                {...codeContent}\n              />\n            </pre>\n          </div>\n        </ScrollArea>\n\n        <UnstyledButton\n          {...getStyles('showCodeButton')}\n          mod={{ hidden: _expanded }}\n          onClick={() => setExpanded(true)}\n          data-code-color-scheme={codeColorScheme}\n        >\n          {expandCodeLabel}\n        </UnstyledButton>\n      </Box>\n    </CodeHighlightContextProvider>\n  );\n});\n\nCodeHighlight.displayName = '@mantine/code-highlight/CodeHighlight';\nCodeHighlight.classes = classes;\nCodeHighlight.varsResolver = varsResolver;\nCodeHighlight.Control = CodeHighlightControl;\n\nexport namespace CodeHighlight {\n  export type Props = CodeHighlightProps;\n  export type StylesNames = CodeHighlightStylesNames;\n  export type CssVariables = CodeHighlightCssVariables;\n  export type Factory = CodeHighlightFactory;\n  export type ContextValue = CodeHighlightContextValue;\n  export type Adapter = CodeHighlightAdapter;\n\n  export namespace Tabs {\n    export type Props = CodeHighlightTabsProps;\n    export type StylesNames = CodeHighlightTabsStylesNames;\n    export type Code = CodeHighlightTabsCode;\n    export type Factory = CodeHighlightTabsFactory;\n    export type DefaultLanguage = CodeHighlightDefaultLanguage;\n  }\n\n  export namespace Inline {\n    export type Props = InlineCodeHighlightProps;\n    export type StylesNames = InlineCodeHighlightStylesNames;\n    export type CssVariables = InlineCodeHighlightCssVariables;\n    export type Factory = InlineCodeHighlightFactory;\n  }\n\n  export namespace Control {\n    export type Props = CodeHighlightControlProps;\n  }\n}\n"],"mappings":"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"}