@pantheon-systems/design-toolkit-react/dist/Code/Code.js

Pantheon's React Design Toolkit

import Prism from 'prismjs/components/prism-core';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-okaidia.css';
import PropTypes from 'prop-types';
import { useRef, useEffect } from 'react';
import 'prismjs/plugins/line-numbers/prism-line-numbers';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import { jsx } from 'react/jsx-runtime';

var PreWrapper = function PreWrapper(_ref) {
  var isBlock = _ref.isBlock,
    children = _ref.children,
    showLineNumbers = _ref.showLineNumbers;
  return isBlock ? /*#__PURE__*/jsx("pre", {
    className: showLineNumbers ? 'line-numbers' : '',
    "data-testid": "pre-element",
    children: children
  }) : children;
};
PreWrapper.defaultProps = {
  isBlock: false,
  showLineNumbers: false
};
PreWrapper.propTypes = {
  children: PropTypes.node.isRequired,
  isBlock: PropTypes.bool,
  showLineNumbers: PropTypes.bool
};
var Code = function Code(_ref2) {
  var code = _ref2.code,
    maxHeight = _ref2.maxHeight,
    minHeight = _ref2.minHeight,
    language = _ref2.language,
    highlight = _ref2.highlight,
    isBlock = _ref2.isBlock,
    showLineNumbers = _ref2.showLineNumbers;
  // NOTE: For greater dynamic flexibility this could use `react-html-parser` with Prism.tokenize() without the need for bothering with the useEffect() hook
  var codeRef = useRef();
  useEffect(function () {
    if (codeRef && codeRef.current && highlight) {
      Prism.highlightElement(codeRef.current);
    }
  }, [codeRef, highlight]);
  useEffect(function () {
    if (codeRef && codeRef.current && showLineNumbers) {
      Prism.highlightElement(codeRef.current);
    }
  }, [codeRef, showLineNumbers]);
  var cssClass = highlight ? "language-".concat(language) : undefined;
  return /*#__PURE__*/jsx("div", {
    className: "overflow-scroll",
    style: {
      maxHeight: maxHeight,
      minHeight: minHeight
    },
    children: /*#__PURE__*/jsx(PreWrapper, {
      isBlock: isBlock,
      showLineNumbers: showLineNumbers,
      children: /*#__PURE__*/jsx("code", {
        className: cssClass,
        "data-testid": "code-element",
        ref: codeRef,
        children: typeof code === 'string' ? code.trim() : code
      })
    })
  });
};
Code.defaultProps = {
  highlight: true,
  isBlock: false,
  language: 'js',
  maxHeight: '36rem',
  minHeight: '10rem',
  showLineNumbers: false
};

// language types: if more are added, you must also adjust the babel config
// https://prismjs.com/#supported-languages
Code.propTypes = {
  code: PropTypes.string.isRequired,
  highlight: PropTypes.bool,
  isBlock: PropTypes.bool,
  language: PropTypes.oneOf(['bash', 'css', 'html', 'js']),
  maxHeight: PropTypes.string,
  minHeight: PropTypes.string,
  showLineNumbers: PropTypes.bool
};

/*
const CodeInline = ({ code, language, highlight }) => {
  return <Code code={code} language={language} highlight={highlight} />;
};

const CodeBlock = ({ code, language, highlight }) => {
  return (
    <Code
      code={code}
      language={language}
      highlight={highlight}
      isBlock={true}
    />
  );
};
*/

var Code$1 = Code;
/* export { CodeInline, CodeBlock }; */

export { Code$1 as default };
//# sourceMappingURL=Code.js.map