@mantine/code-highlight/esm/CodeHighlight/CodeHighlight.mjs

Code highlight with Mantine theme

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import cx from 'clsx';
import { createVarsResolver, rem, getThemeColor, getRadius, factory, useProps, useStyles, useComputedColorScheme, Box, ScrollArea, UnstyledButton } from '@mantine/core';
import { useUncontrolled } from '@mantine/hooks';
import { useHighlight } from '../CodeHighlightProvider/CodeHighlightProvider.mjs';
import { CodeHighlightContextProvider } from './CodeHighlight.context.mjs';
import { CodeHighlightControl } from './CodeHighlightControl/CodeHighlightControl.mjs';
import { CopyCodeButton } from './CopyCodeButton/CopyCodeButton.mjs';
import { ExpandCodeButton } from './ExpandCodeButton/ExpandCodeButton.mjs';
import classes from '../CodeHighlight.module.css.mjs';

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

export { CodeHighlight };
//# sourceMappingURL=CodeHighlight.mjs.map