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

Code highlight with Mantine theme

"use client";
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 CodeHighlight_module_default from "../CodeHighlight.module.mjs";
import cx from "clsx";
import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, getThemeColor, rem, useComputedColorScheme, useProps, useStyles } from "@mantine/core";
import { useUncontrolled } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/code-highlight/src/CodeHighlight/CodeHighlight.tsx
const defaultProps = {
	withCopyButton: true,
	expandCodeLabel: "Expand code",
	collapseCodeLabel: "Collapse 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) => {
	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, withLineNumbers, controls, language, codeColorScheme, __withOffset, __inline, __staticSelector, attributes, ...others } = props;
	const getStyles = useStyles({
		name: __staticSelector || "CodeHighlight",
		classes: CodeHighlight_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		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 highlightedCode = useHighlight()({
		code: code.trim(),
		language,
		colorScheme: codeColorScheme ?? colorScheme
	});
	const codeContent = highlightedCode.isHighlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode.highlightedCode } } : { children: code.trim() };
	if (__inline) return /* @__PURE__ */ jsx(Box, {
		component: "code",
		...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, {
			...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,
					styles: { viewport: { overscrollBehaviorInline: "none" } },
					...getStyles("scrollarea"),
					children: /* @__PURE__ */ jsxs("div", {
						...getStyles("codeWrapper"),
						children: [withLineNumbers && /* @__PURE__ */ jsx("div", {
							...getStyles("lineNumbers"),
							"data-with-offset": __withOffset || void 0,
							children: code.trim().split("\n").map((_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i))
						}), /* @__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 = CodeHighlight_module_default;
CodeHighlight.varsResolver = varsResolver;
CodeHighlight.Control = CodeHighlightControl;
//#endregion
export { CodeHighlight };

//# sourceMappingURL=CodeHighlight.mjs.map