@cimpress/react-components/dist/esm/src/CodeBlock.js

React components to support the MCP styleguide

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useMemo } from 'react';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
import { css, cx } from '@emotion/css';
import cvar from './theme/cvar';
import { useFeatureFlags } from './FeatureFlags';
SyntaxHighlighter.registerLanguage('javascript', js);
const codeBlockLight = css `
  .hljs {
    display: block;
    overflow-x: auto;
    background: ${cvar('light-color-code-background')};
    color: ${cvar('light-color-code-base')};
    padding: 0.5em;
  }

  .hljs-comment,
  .hljs-quote {
    color: ${cvar('color-code-comment')};
  }

  .hljs-variable,
  .hljs-template-variable,
  .hljs-attribute,
  .hljs-tag,
  .hljs-name,
  .hljs-regexp,
  .hljs-link,
  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class {
    color: ${cvar('color-code-variable')};
  }

  .hljs-number,
  .hljs-meta,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params {
    color: ${cvar('color-code-literal')};
  }

  .hljs-string,
  .hljs-symbol,
  .hljs-bullet {
    color: ${cvar('light-color-code-string')};
  }

  .hljs-title,
  .hljs-section {
    color: ${cvar('color-code-title')};
  }

  .hljs-keyword,
  .hljs-selector-tag {
    color: ${cvar('color-code-keyword')};
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }
`;
const codeBlockDark = css `
  ${codeBlockLight}
  .hljs {
    background: ${cvar('dark-color-code-background')};
    color: ${cvar('dark-color-code-base')};
  }
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet {
    color: ${cvar('dark-color-code-string')};
  }
`;
const highlightBlockLight = css `
  background: ${cvar('light-color-code-background')};
  border-color: ${cvar('light-color-code-border')};
`;
const highlightBlockDark = css `
  background: ${cvar('dark-color-code-background')};
  border-color: ${cvar('dark-color-code-border')};
`;
const noOuterMarginCss = css `
  margin-bottom: 0;
`;
const PreTag = (theme, noOuterSpacing) => ({ children }) => (React.createElement("pre", { className: cx(noOuterSpacing && noOuterMarginCss, {
        [`${highlightBlockLight}`]: theme === 'light',
        [`${highlightBlockDark}`]: theme === 'dark',
        [`${codeBlockLight}`]: theme === 'light',
        [`${codeBlockDark}`]: theme === 'dark',
    }) }, children));
const CodeTag = ({ children }) => React.createElement("code", { className: "hljs javascript" }, children);
export const CodeBlock = (_a) => {
    var { code, theme = 'light' } = _a, props = __rest(_a, ["code", "theme"]);
    // trim trailing new lines
    const trimmedCode = useMemo(() => code.replace(/\n+$/, ''), [code]);
    const { v17_noOuterSpacing } = useFeatureFlags();
    return (React.createElement(SyntaxHighlighter, Object.assign({ className: cx('crc-code-block', props.className), language: "javascript", useInlineStyles: false, PreTag: PreTag(theme, v17_noOuterSpacing), CodeTag: CodeTag }, props), trimmedCode));
};
//# sourceMappingURL=CodeBlock.js.map