@ant-design/x/es/code-highlighter/CodeHighlighter.js

Craft AI-driven interfaces effortlessly

import _extends from "@babel/runtime/helpers/esm/extends";
import { clsx } from 'clsx';
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import useXComponentConfig from "../_util/hooks/use-x-component-config";
import Actions from "../actions";
import { useXProviderContext } from "../x-provider";
import useStyle from "./style";
const customOneLight = {
  ...oneLight,
  'pre[class*="language-"]': {
    ...oneLight['pre[class*="language-"]'],
    margin: 0
  }
};
const CodeHighlighter = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    lang,
    children,
    header,
    prefixCls: customizePrefixCls,
    className,
    classNames = {},
    styles = {},
    style = {},
    highlightProps,
    ...restProps
  } = props;

  // ============================ Prefix ============================
  const {
    getPrefixCls,
    direction
  } = useXProviderContext();
  const prefixCls = getPrefixCls('codeHighlighter', customizePrefixCls);
  const [hashId, cssVarCls] = useStyle(prefixCls);

  // ===================== Component Config =========================
  const contextConfig = useXComponentConfig('codeHighlighter');

  // ============================ style ============================
  const mergedCls = clsx(prefixCls, contextConfig.className, className, contextConfig.classNames?.root, classNames.root, hashId, cssVarCls, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });
  const mergedStyle = {
    ...contextConfig.style,
    ...styles?.root,
    ...style
  };

  // ============================ render content ============================
  const renderTitle = () => {
    if (header === null) return null;
    if (header) return header;
    return /*#__PURE__*/React.createElement("div", {
      className: clsx(`${prefixCls}-header`, contextConfig.classNames?.header, classNames.header),
      style: {
        ...contextConfig.styles?.header,
        ...styles.header
      }
    }, /*#__PURE__*/React.createElement("span", {
      className: clsx(`${prefixCls}-header-title`, classNames.headerTitle, contextConfig.classNames?.headerTitle),
      style: {
        ...contextConfig.styles?.headerTitle,
        ...styles.headerTitle
      }
    }, lang), /*#__PURE__*/React.createElement(Actions.Copy, {
      text: children
    }));
  };

  // ============================ render ============================
  if (!children) {
    return null;
  }
  if (!lang) {
    return /*#__PURE__*/React.createElement("code", null, children);
  }
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: mergedCls,
    style: mergedStyle
  }, restProps), renderTitle(), /*#__PURE__*/React.createElement("div", {
    className: clsx(`${prefixCls}-code`, contextConfig.classNames?.code, classNames.code),
    style: {
      ...contextConfig.styles.code,
      ...styles.code
    }
  }, /*#__PURE__*/React.createElement(SyntaxHighlighter, _extends({
    language: lang,
    wrapLines: true,
    style: customOneLight
  }, highlightProps), children.replace(/\n$/, ''))));
});
if (process.env.NODE_ENV !== 'production') {
  CodeHighlighter.displayName = 'CodeHighlighter';
}
export default CodeHighlighter;