@ant-design/x-markdown/plugins/HighlightCode/index.js

placeholder for @ant-design/x-markdown

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { CopyOutlined } from '@ant-design/icons';
import useXComponentConfig from '@ant-design/x/es/_util/hooks/use-x-component-config';
import useLocale from '@ant-design/x/es/locale/useLocale';
import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
import locale_EN from '@ant-design/x/locale/en_US';
import { Button, message, Tooltip } from 'antd';
import classnames from 'classnames';
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import useStyle from "./style";
const customOneLight = {
  ...oneLight,
  'pre[class*="language-"]': {
    ...oneLight['pre[class*="language-"]'],
    margin: 0
  }
};
const HighlightCode = props => {
  const {
    lang,
    children,
    header,
    prefixCls: customizePrefixCls,
    className,
    classNames = {},
    styles = {},
    style,
    highlightProps
  } = props;

  // ============================ locale ============================
  const [contextLocale] = useLocale('HighlightCode', locale_EN.HighlightCode);

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

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

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

  // ============================ locale ============================
  const [messageApi, contextHolder] = message.useMessage();
  const handleCopyCode = async () => {
    if (!children) return;
    try {
      await navigator.clipboard.writeText(children.trim());
      messageApi.open({
        type: 'success',
        content: contextLocale.copySuccess
      });
    } catch (error) {
      console.error('Failed to copy code:', error);
    }
  };
  const renderTitle = () => {
    if (header === null) return null;
    if (header) return header;
    return /*#__PURE__*/React.createElement("div", {
      className: classnames(`${prefixCls}-header`, contextConfig.classNames.header, classNames.header),
      style: {
        ...contextConfig.styles.header,
        ...styles.header
      }
    }, contextHolder, /*#__PURE__*/React.createElement("span", {
      className: classnames(`${prefixCls}-header-title`, classNames.headerTitle, contextConfig.classNames.headerTitle),
      style: {
        ...contextConfig.styles.headerTitle,
        ...styles.headerTitle
      }
    }, lang), /*#__PURE__*/React.createElement(Tooltip, {
      title: contextLocale.copy
    }, /*#__PURE__*/React.createElement(Button, {
      type: "text",
      size: "small",
      icon: /*#__PURE__*/React.createElement(CopyOutlined, null),
      onClick: handleCopyCode
    })));
  };

  // ============================ render ============================
  if (!children) {
    return null;
  }
  if (!lang) {
    return /*#__PURE__*/React.createElement("code", null, children);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: mergedCls,
    style: {
      ...contextConfig.styles.root,
      ...style,
      ...styles.root
    }
  }, renderTitle(), /*#__PURE__*/React.createElement("div", {
    className: classnames(`${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$/, ''))));
};
export default HighlightCode;