@blockstack/ui/dist/highlighter/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../_virtual/_rollupPluginBabelHelpers.js';
import React__default from 'react';
import { Box } from '../box/index.esm.js';
import Highlight from 'prism-react-renderer';
import { Flex } from '../flex/index.esm.js';
import { startPad } from '../utils/index.esm.js';
import '../hooks/use-controllable.esm.js';
import '../hooks/use-previous.esm.js';
import '../hooks/use-disclosure.esm.js';
import '../hooks/use-latest-ref.esm.js';
import '../hooks/use-event-listener.esm.js';
import '../hooks/use-force-update.esm.js';
import '../hooks/use-id.esm.js';
import '../hooks/use-merge-refs.esm.js';
import '../hooks/use-safe-layout-effect.esm.js';
import '../hooks/use-timeout.esm.js';
import { useTheme } from '../hooks/use-theme.esm.js';
import '../hooks/use-color-mode.esm.js';
import { theme } from './prism-theme.esm.js';

var lineNumberWidth = 60;

var getLineNumber = function getLineNumber(n, length) {
  return startPad(n + 1, length.toString().length);
};

var Tokens = function Tokens(_ref) {
  var tokens = _ref.tokens,
      getTokenProps = _ref.getTokenProps,
      showLineNumbers = _ref.showLineNumbers,
      rest = _objectWithoutPropertiesLoose(_ref, ["tokens", "getTokenProps", "showLineNumbers"]);

  var bsTheme = useTheme();
  var pl = "calc(" + (showLineNumbers ? lineNumberWidth : '0') + "px + " + (bsTheme.sizes['base'] || '16px') + ")";
  return React__default.createElement(Box, Object.assign({
    pl: pl,
    pr: "base",
    position: "relative",
    zIndex: 2
  }, rest), tokens.map(function (token, key) {
    return React__default.createElement(Box, Object.assign({
      py: "2px",
      display: "inline-block"
    }, getTokenProps({
      token: token,
      key: key
    })));
  }));
};

var LineNumber = function LineNumber(_ref2) {
  var number = _ref2.number,
      length = _ref2.length,
      rest = _objectWithoutPropertiesLoose(_ref2, ["number", "length"]);

  return React__default.createElement(Flex, Object.assign({
    textAlign: "right",
    pr: "base",
    pl: "base",
    width: lineNumberWidth,
    borderRight: "1px solid",
    borderRightColor: "inherit",
    color: "ink.400",
    flexShrink: 0,
    style: {
      userSelect: 'none'
    },
    position: "absolute",
    left: 0,
    height: "100%",
    align: "baseline",
    justify: "center",
    zIndex: 1
  }, rest), getLineNumber(number, length));
};

var Line = function Line(_ref3) {
  var tokens = _ref3.tokens,
      getTokenProps = _ref3.getTokenProps,
      index = _ref3.index,
      length = _ref3.length,
      showLineNumbers = _ref3.showLineNumbers,
      hideLineHover = _ref3.hideLineHover,
      rest = _objectWithoutPropertiesLoose(_ref3, ["tokens", "getTokenProps", "index", "length", "showLineNumbers", "hideLineHover"]);

  return React__default.createElement(Flex, Object.assign({
    height: "loose",
    align: "baseline",
    borderColor: "ink.900",
    _hover: hideLineHover ? undefined : {
      bg: ['unset', 'unset', 'ink.900'],
      borderColor: ['ink.900', 'ink.900', 'ink.600']
    },
    position: "relative"
  }, rest), showLineNumbers ? React__default.createElement(LineNumber, {
    number: index,
    length: length
  }) : null, React__default.createElement(Tokens, {
    showLineNumbers: showLineNumbers,
    getTokenProps: getTokenProps,
    tokens: tokens
  }));
};

var Lines = function Lines(_ref4) {
  var lines = _ref4.tokens,
      getLineProps = _ref4.getLineProps,
      getTokenProps = _ref4.getTokenProps,
      className = _ref4.className,
      showLineNumbers = _ref4.showLineNumbers,
      hideLineHover = _ref4.hideLineHover;
  return React__default.createElement(Box, {
    display: "block",
    className: className
  }, React__default.createElement(Box, {
    display: "block",
    style: {
      fontFamily: 'Fira Code'
    }
  }, lines.map(function (tokens, i) {
    return React__default.createElement(Line, Object.assign({
      index: i,
      tokens: tokens,
      getTokenProps: getTokenProps,
      length: lines.length + 1,
      showLineNumbers: showLineNumbers,
      hideLineHover: hideLineHover || lines.length < 3
    }, getLineProps({
      line: tokens,
      key: i
    })));
  })));
};

var Highlighter = /*#__PURE__*/React__default.memo(function (_ref5) {
  var code = _ref5.code,
      _ref5$language = _ref5.language,
      language = _ref5$language === void 0 ? 'clarity' : _ref5$language,
      showLineNumbers = _ref5.showLineNumbers,
      hideLineHover = _ref5.hideLineHover,
      Prism = _ref5.Prism;
  return React__default.createElement(Highlight, {
    theme: theme,
    code: code,
    language: language,
    Prism: Prism
  }, function (props) {
    return React__default.createElement(Lines, Object.assign({
      showLineNumbers: showLineNumbers,
      hideLineHover: hideLineHover
    }, props));
  });
});
Highlighter.displayName = 'Highlighter';

export { Highlighter };
//# sourceMappingURL=index.esm.js.map