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

React code highlight component based on refractor

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var clsx = require('clsx');
var all_js = require('refractor/lib/all.js');
var hastUtilToJsxRuntime = require('hast-util-to-jsx-runtime');
var iconsReact = require('@tabler/icons-react');
var core = require('@rtdui/core');
var decorator = require('./decorator.cjs');

const CodeHighlight = react.forwardRef(
  (props, ref) => {
    const {
      code,
      language = "tsx",
      withCopyButton = true,
      copyLabel = "Copy code",
      copiedLabel = "Copied",
      diff = false,
      showLineNumbers = false,
      highlingtLines = "",
      bad = false
    } = props;
    const ast = all_js.refractor.highlight(code.trim(), language);
    if (diff || showLineNumbers || highlingtLines) {
      const meta = `${highlingtLines} ${showLineNumbers ? "showLineNumbers" : ""}`;
      decorator.decorator(ast, diff, meta);
    }
    const elements = hastUtilToJsxRuntime.toJsxRuntime(ast, { Fragment: jsxRuntime.Fragment, jsx: jsxRuntime.jsx, jsxs: jsxRuntime.jsxs });
    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, children: [
      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start w-full bg-(--prism-color-2)", children: [
        /* @__PURE__ */ jsxRuntime.jsx("small", { className: "bg-base-300 uppercase font-bold text-xs rounded-br-md px-2 py-1", children: language }),
        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1" }),
        withCopyButton && bad === false && /* @__PURE__ */ jsxRuntime.jsx(core.CopyButton, { value: code.trim(), children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsx(
          core.Tooltip,
          {
            tip: copied ? copiedLabel : copyLabel,
            position: "left",
            color: copied ? "success" : "info",
            children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, { size: "xs", ghost: true, shape: "square", onClick: copy, children: copied ? /* @__PURE__ */ jsxRuntime.jsx(
              iconsReact.IconClipboardCheck,
              {
                size: 20,
                className: "stroke-success"
              }
            ) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconCopy, { size: 20 }) })
          }
        ) })
      ] }),
      /* @__PURE__ */ jsxRuntime.jsx(
        "pre",
        {
          className: clsx(`language-${language}`, "mt-0!", {
            "bg-red-100!": bad === true,
            "dark:bg-red-950!": bad === true
          }),
          "data-no-lang-indicator": language,
          children: /* @__PURE__ */ jsxRuntime.jsx(
            "code",
            {
              className: clsx(`language-${language}`, "code-highlight", {
                "bg-red-100!": bad === true,
                "dark:bg-red-950!": bad === true
              }),
              children: elements
            }
          )
        }
      )
    ] });
  }
);
CodeHighlight.displayName = "@rtdui/CodeHighlight";

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