@storybook/design-system/dist/components/Highlight.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Highlight = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _theming = require("@storybook/theming");

var _prismjs = _interopRequireDefault(require("prismjs"));

var _styles = require("./shared/styles");

var _excluded = ["children", "language", "withHTMLChildren"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

if (typeof document !== 'undefined') {
  // @ts-ignore
  global.Prism = _prismjs["default"]; // @ts-ignore

  require('prismjs/components/prism-bash'); // @ts-ignore


  require('prismjs/components/prism-javascript'); // @ts-ignore


  require('prismjs/components/prism-typescript'); // @ts-ignore


  require('prismjs/components/prism-json'); // @ts-ignore


  require('prismjs/components/prism-css'); // @ts-ignore


  require('prismjs/components/prism-yaml'); // @ts-ignore


  require('prismjs/components/prism-markdown'); // @ts-ignore


  require('prismjs/components/prism-jsx'); // @ts-ignore


  require('prismjs/components/prism-tsx');
} // Prism theme copied from 'prismjs/themes/prism.css.' -- without Webpack, the CSS
// cannot be imported easily and any app which pulls in the design system will
// need to handle the CSS loading itself. Therefore, it is easiest to just copy
// the theme over.
// prettier-ignore


var HighlightBlock = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1rbyhvm0"
} : {
  target: "e1rbyhvm0",
  label: "HighlightBlock"
})(".token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090;}.token.punctuation{color:#999;}.namespace{opacity:.7;}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905;}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690;}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5);}.token.atrule,.token.attr-value,.token.keyword{color:#07a;}.token.class-name,.token.function{color:#dd4a68;}.token.important,.token.regex,.token.variable{color:#e90;}.token.bold,.token.important{font-weight:700;}.token.italic{font-style:italic;}.token.entity{cursor:help;}code,pre{color:", _styles.color.darkest, ";}code{white-space:pre;}pre{padding:11px 1rem;margin:1rem 0;background:", _styles.color.lighter, ";overflow:auto;}.language-bash .token.operator,.language-bash .token.function,.language-bash .token.builtin{color:", _styles.color.darkest, ";background:none;}.language-markdown .token.title,.language-md .token.title{color:#dd4a68;}.language-markdown .token.table-header,.language-md .token.table-header{color:#07a;}");
var languageMap = {
  mdx: 'markdown',
  bash: 'bash',
  javascript: 'javascript',
  typescript: 'typescript',
  json: 'json',
  css: 'css',
  yaml: 'yaml',
  markdown: 'markdown',
  md: 'md',
  jsx: 'jsx',
  tsx: 'tsx'
};

var Highlight = function Highlight(_ref) {
  var children = _ref.children,
      inputLanguage = _ref.language,
      _ref$withHTMLChildren = _ref.withHTMLChildren,
      withHTMLChildren = _ref$withHTMLChildren === void 0 ? true : _ref$withHTMLChildren,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var language = languageMap[inputLanguage] || inputLanguage;
  var codeBlock = withHTMLChildren ? /*#__PURE__*/_react["default"].createElement("div", {
    dangerouslySetInnerHTML: {
      __html: children
    }
  }) : children;
  var domNode = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    if (domNode.current) {
      _prismjs["default"].highlightAllUnder(domNode.current);
    }
  });
  return /*#__PURE__*/_react["default"].createElement(HighlightBlock, (0, _extends2["default"])({}, rest, {
    ref: domNode
  }), language ? /*#__PURE__*/_react["default"].createElement("pre", {
    className: "language-".concat(language)
  }, /*#__PURE__*/_react["default"].createElement("code", {
    className: "language-".concat(language)
  }, codeBlock)) : codeBlock);
};

exports.Highlight = Highlight;