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

Craft AI-driven interfaces effortlessly

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _clsx = require("clsx");
var _react = _interopRequireDefault(require("react"));
var _reactSyntaxHighlighter = require("react-syntax-highlighter");
var _prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
var _useXComponentConfig = _interopRequireDefault(require("../_util/hooks/use-x-component-config"));
var _actions = _interopRequireDefault(require("../actions"));
var _xProvider = require("../x-provider");
var _style = _interopRequireDefault(require("./style"));
const customOneLight = {
  ..._prism.oneLight,
  'pre[class*="language-"]': {
    ..._prism.oneLight['pre[class*="language-"]'],
    margin: 0
  }
};
const CodeHighlighter = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    lang,
    children,
    header,
    prefixCls: customizePrefixCls,
    className,
    classNames = {},
    styles = {},
    style = {},
    highlightProps,
    ...restProps
  } = props;

  // ============================ Prefix ============================
  const {
    getPrefixCls,
    direction
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('codeHighlighter', customizePrefixCls);
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);

  // ===================== Component Config =========================
  const contextConfig = (0, _useXComponentConfig.default)('codeHighlighter');

  // ============================ style ============================
  const mergedCls = (0, _clsx.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.default.createElement("div", {
      className: (0, _clsx.clsx)(`${prefixCls}-header`, contextConfig.classNames?.header, classNames.header),
      style: {
        ...contextConfig.styles?.header,
        ...styles.header
      }
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: (0, _clsx.clsx)(`${prefixCls}-header-title`, classNames.headerTitle, contextConfig.classNames?.headerTitle),
      style: {
        ...contextConfig.styles?.headerTitle,
        ...styles.headerTitle
      }
    }, lang), /*#__PURE__*/_react.default.createElement(_actions.default.Copy, {
      text: children
    }));
  };

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