@mantine/code-highlight
Version:
Code highlight with Mantine theme
143 lines (142 loc) • 6.15 kB
JavaScript
"use client";
const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
const require_CodeHighlightProvider = require("../CodeHighlightProvider/CodeHighlightProvider.cjs");
const require_CodeHighlight_context = require("./CodeHighlight.context.cjs");
const require_CodeHighlightControl = require("./CodeHighlightControl/CodeHighlightControl.cjs");
const require_CopyCodeButton = require("./CopyCodeButton/CopyCodeButton.cjs");
const require_ExpandCodeButton = require("./ExpandCodeButton/ExpandCodeButton.cjs");
const require_CodeHighlight_module = require("../CodeHighlight.module.cjs");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let _mantine_core = require("@mantine/core");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/code-highlight/src/CodeHighlight/CodeHighlight.tsx
const defaultProps = {
withCopyButton: true,
expandCodeLabel: "Expand code",
collapseCodeLabel: "Collapse code"
};
const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { maxCollapsedHeight, background, radius }) => ({ codeHighlight: {
"--ch-max-height": (0, _mantine_core.rem)(maxCollapsedHeight),
"--ch-background": background ? (0, _mantine_core.getThemeColor)(background, theme) : void 0,
"--ch-radius": typeof radius !== "undefined" ? (0, _mantine_core.getRadius)(radius) : void 0
} }));
const CodeHighlight = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_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, withLineNumbers, controls, language, codeColorScheme, __withOffset, __inline, __staticSelector, attributes, ...others } = props;
const getStyles = (0, _mantine_core.useStyles)({
name: __staticSelector || "CodeHighlight",
classes: require_CodeHighlight_module.default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver,
rootSelector: "codeHighlight"
});
const [_expanded, setExpanded] = (0, _mantine_hooks.useUncontrolled)({
value: expanded,
defaultValue: defaultExpanded,
finalValue: true,
onChange: onExpandedChange
});
const shouldDisplayControls = controls && controls.length > 0 || withExpandButton || withCopyButton;
const colorScheme = (0, _mantine_core.useComputedColorScheme)();
const highlightedCode = require_CodeHighlightProvider.useHighlight()({
code: code.trim(),
language,
colorScheme: codeColorScheme ?? colorScheme
});
const codeContent = highlightedCode.isHighlighted ? { dangerouslySetInnerHTML: { __html: highlightedCode.highlightedCode } } : { children: code.trim() };
if (__inline) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
component: "code",
...others,
...highlightedCode.codeElementProps,
...getStyles("codeHighlight", {
className: (0, clsx.default)(highlightedCode.codeElementProps?.className, className),
style: [{ ...highlightedCode.codeElementProps?.style }, style]
}),
"data-with-border": withBorder || void 0,
...codeContent
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CodeHighlight_context.CodeHighlightContextProvider, {
value: {
getStyles,
codeColorScheme
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
...getStyles("codeHighlight"),
...others,
dir: "ltr",
"data-code-color-scheme": codeColorScheme,
"data-with-border": withBorder || void 0,
children: [
shouldDisplayControls && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...getStyles("controls"),
"data-with-offset": __withOffset || void 0,
children: [
controls,
withExpandButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ExpandCodeButton.ExpandCodeButton, {
expanded: _expanded,
onExpand: setExpanded,
expandCodeLabel,
collapseCodeLabel
}),
withCopyButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopyCodeButton.CopyCodeButton, {
code,
copiedLabel,
copyLabel
})
]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ScrollArea, {
type: "hover",
scrollbarSize: 4,
dir: "ltr",
offsetScrollbars: false,
"data-collapsed": !_expanded || void 0,
styles: { viewport: { overscrollBehaviorInline: "none" } },
...getStyles("scrollarea"),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...getStyles("codeWrapper"),
children: [withLineNumbers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
...getStyles("lineNumbers"),
"data-with-offset": __withOffset || void 0,
children: code.trim().split("\n").map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: i + 1 }, i))
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
...getStyles("pre"),
"data-with-offset": __withOffset || void 0,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
...highlightedCode.codeElementProps,
...getStyles("code", {
className: highlightedCode.codeElementProps?.className,
style: highlightedCode.codeElementProps?.style
}),
...codeContent
})
})]
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_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 = require_CodeHighlight_module.default;
CodeHighlight.varsResolver = varsResolver;
CodeHighlight.Control = require_CodeHighlightControl.CodeHighlightControl;
//#endregion
exports.CodeHighlight = CodeHighlight;
//# sourceMappingURL=CodeHighlight.cjs.map