@mantine/code-highlight/cjs/CodeHighlight/CodeHighlight.cjs

Code highlight with Mantine theme

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var cx = require('clsx');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var CodeHighlightProvider = require('../CodeHighlightProvider/CodeHighlightProvider.cjs');
var CodeHighlight_context = require('./CodeHighlight.context.cjs');
var CodeHighlightControl = require('./CodeHighlightControl/CodeHighlightControl.cjs');
var CopyCodeButton = require('./CopyCodeButton/CopyCodeButton.cjs');
var ExpandCodeButton = require('./ExpandCodeButton/ExpandCodeButton.cjs');
var CodeHighlight_module = require('../CodeHighlight.module.css.cjs');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var cx__default = /*#__PURE__*/_interopDefault(cx);

const defaultProps = {
  withCopyButton: true,
  expandCodeLabel: "Expand code"
};
const varsResolver = core.createVarsResolver(
  (theme, { maxCollapsedHeight, background, radius }) => ({
    codeHighlight: {
      "--ch-max-height": core.rem(maxCollapsedHeight),
      "--ch-background": background ? core.getThemeColor(background, theme) : void 0,
      "--ch-radius": typeof radius !== "undefined" ? core.getRadius(radius) : void 0
    }
  })
);
const CodeHighlight = core.factory((_props, ref) => {
  const props = core.useProps("CodeHighlight", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    code,
    copiedLabel,
    copyLabel,
    defaultExpanded,
    expanded,
    onExpandedChange,
    maxCollapsedHeight,
    withCopyButton,
    withExpandButton,
    expandCodeLabel,
    collapseCodeLabel,
    radius,
    background,
    withBorder,
    controls,
    language,
    codeColorScheme,
    __withOffset,
    __inline,
    __staticSelector,
    ...others
  } = props;
  const getStyles = core.useStyles({
    name: __staticSelector || "CodeHighlight",
    classes: CodeHighlight_module,
    props,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver,
    rootSelector: "codeHighlight"
  });
  const [_expanded, setExpanded] = hooks.useUncontrolled({
    value: expanded,
    defaultValue: defaultExpanded,
    finalValue: true,
    onChange: onExpandedChange
  });
  const shouldDisplayControls = controls && controls.length > 0 || withExpandButton || withCopyButton;
  const colorScheme = core.useComputedColorScheme();
  const highlight = CodeHighlightProvider.useHighlight();
  const highlightedCode = highlight({ code: code.trim(), language, colorScheme });
  const codeContent = highlightedCode.isHighlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode.highlightedCode } } : { children: code.trim() };
  if (__inline) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      core.Box,
      {
        component: "code",
        ref,
        ...others,
        ...highlightedCode.codeElementProps,
        ...getStyles("codeHighlight", {
          className: cx__default.default(highlightedCode.codeElementProps?.className, className),
          style: [{ ...highlightedCode.codeElementProps?.style }, style]
        }),
        "data-with-border": withBorder || void 0,
        ...codeContent
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(CodeHighlight_context.CodeHighlightContextProvider, { value: { getStyles, codeColorScheme }, children: /* @__PURE__ */ jsxRuntime.jsxs(
    core.Box,
    {
      ref,
      ...getStyles("codeHighlight"),
      ...others,
      dir: "ltr",
      "data-code-color-scheme": codeColorScheme,
      "data-with-border": withBorder || void 0,
      children: [
        shouldDisplayControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getStyles("controls"), "data-with-offset": __withOffset || void 0, children: [
          controls,
          withExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
            ExpandCodeButton.ExpandCodeButton,
            {
              expanded: _expanded,
              onExpand: setExpanded,
              expandCodeLabel,
              collapseCodeLabel
            }
          ),
          withCopyButton && /* @__PURE__ */ jsxRuntime.jsx(CopyCodeButton.CopyCodeButton, { code, copiedLabel, copyLabel })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx(
          core.ScrollArea,
          {
            type: "hover",
            scrollbarSize: 4,
            dir: "ltr",
            offsetScrollbars: false,
            "data-collapsed": !_expanded || void 0,
            ...getStyles("scrollarea"),
            children: /* @__PURE__ */ jsxRuntime.jsx("pre", { ...getStyles("pre"), "data-with-offset": __withOffset || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
              "code",
              {
                ...highlightedCode.codeElementProps,
                ...getStyles("code", {
                  className: highlightedCode.codeElementProps?.className,
                  style: highlightedCode.codeElementProps?.style
                }),
                ...codeContent
              }
            ) })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          core.UnstyledButton,
          {
            ...getStyles("showCodeButton"),
            mod: { hidden: _expanded },
            onClick: () => setExpanded(true),
            "data-code-color-scheme": codeColorScheme,
            children: expandCodeLabel
          }
        )
      ]
    }
  ) });
});
CodeHighlight.displayName = "@mantine/code-highlight/CodeHighlight";
CodeHighlight.classes = CodeHighlight_module;
CodeHighlight.Control = CodeHighlightControl.CodeHighlightControl;

exports.CodeHighlight = CodeHighlight;
//# sourceMappingURL=CodeHighlight.cjs.map