ant-design-x-vue-next/es/code-highlighter/CodeHighlighter.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as E, useSlots as F, ref as f, computed as i, watch as I, createVNode as r, mergeProps as T } from "vue";
import { b as h } from "../chunks/module-chunk.mjs";
import { Typography as q } from "ant-design-vue";
import D from "../_util/pick-attrs.mjs";
import G from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import { escapeHtml as j, ensureFullPrism as J, ensureLanguage as K, highlightCode as O } from "./prism.mjs";
import Q from "./style/index.mjs";
import U from "../x-provider/hooks/use-x-provider-context.mjs";
const ie = /* @__PURE__ */ E({
  name: "AXCodeHighlighter",
  __name: "CodeHighlighter",
  props: {
    lang: null,
    children: null,
    header: null,
    prefixCls: null,
    rootClassName: null,
    className: null,
    class: null,
    style: null,
    highlightProps: null,
    classNames: {
      default: () => ({})
    },
    styles: {
      default: () => ({})
    },
    prismLightMode: {
      type: Boolean,
      default: !0
    }
  },
  setup(P, {
    expose: S
  }) {
    const e = P, u = F(), g = f(null), c = f(""), m = f(""), $ = i(() => D(e, {
      attr: !0,
      aria: !0,
      data: !0
    })), {
      getPrefixCls: w,
      direction: _
    } = U(), n = i(() => w("codeHighlighter", e.prefixCls)), t = G("codeHighlighter"), [A, M, V] = Q(n), p = i(() => {
      var a;
      if (typeof e.children == "string")
        return e.children;
      const l = (a = u.default) == null ? void 0 : a.call(u);
      return l ? (Array.isArray(l) ? l : [l]).map((s) => {
        if (typeof s == "string" || typeof s == "number")
          return String(s);
        if (s && typeof s == "object" && "children" in s) {
          const d = s.children;
          if (typeof d == "string" || typeof d == "number")
            return String(d);
        }
        return "";
      }).join("") : "";
    }), X = i(() => p.value.replace(/\n$/, ""));
    I([X, () => e.lang, () => e.prismLightMode], async ([l, o, a]) => {
      if (!l || !o) {
        c.value = "", m.value = "";
        return;
      }
      c.value = j(l);
      try {
        a === !1 && await J();
        const s = await K(o);
        m.value = s, c.value = O(l, s);
      } catch {
        c.value = j(l);
      }
    }, {
      immediate: !0
    });
    const k = i(() => {
      var l;
      return h(n.value, t.value.className, e.className, e.class, e.rootClassName, (l = t.value.classNames) == null ? void 0 : l.root, e.classNames.root, M.value, V, {
        [`${n.value}-rtl`]: _.value === "rtl"
      });
    }), R = i(() => {
      var l;
      return {
        ...typeof t.value.style == "object" ? t.value.style : {},
        ...typeof ((l = t.value.styles) == null ? void 0 : l.root) == "object" ? t.value.styles.root : {},
        ...e.styles.root,
        ...e.style
      };
    }), z = () => {
      if (u.header)
        return u.header();
      if (e.header !== void 0) {
        const l = typeof e.header == "function" ? e.header() : e.header;
        return l === !1 || l === null ? null : l;
      }
    };
    return S({
      get nativeElement() {
        return g.value;
      }
    }), () => {
      var N, C, b, x, L, H;
      const l = p.value;
      if (!l)
        return null;
      if (!e.lang)
        return r("code", null, [l]);
      const o = z();
      let a;
      o === null ? a = null : o === void 0 ? a = r("div", {
        class: h(`${n.value}-header`, (N = t.value.classNames) == null ? void 0 : N.header, e.classNames.header),
        style: {
          ...typeof ((C = t.value.styles) == null ? void 0 : C.header) == "object" ? t.value.styles.header : {},
          ...e.styles.header
        }
      }, [r("span", {
        class: h(`${n.value}-header-title`, e.classNames.headerTitle, (b = t.value.classNames) == null ? void 0 : b.headerTitle),
        style: {
          ...typeof ((x = t.value.styles) == null ? void 0 : x.headerTitle) == "object" ? t.value.styles.headerTitle : {},
          ...e.styles.headerTitle
        }
      }, [e.lang]), r(q.Text, {
        copyable: {
          text: l
        }
      }, null)]) : a = o;
      const {
        className: s,
        class: d,
        style: y,
        showLineNumbers: W,
        startingLineNumber: Y,
        ...B
      } = e.highlightProps || {}, v = m.value ? `language-${m.value}` : e.lang ? `language-${e.lang}` : "";
      return A(r("div", T($.value, {
        ref: g,
        class: k.value,
        style: R.value
      }), [a, r("div", {
        class: h(`${n.value}-code`, (L = t.value.classNames) == null ? void 0 : L.code, e.classNames.code),
        style: {
          ...typeof ((H = t.value.styles) == null ? void 0 : H.code) == "object" ? t.value.styles.code : {},
          ...e.styles.code
        }
      }, [r("pre", T(B, {
        class: h(v, s, d),
        style: {
          margin: 0,
          ...typeof y == "object" ? y : {}
        }
      }), [r("code", {
        class: v,
        style: {
          background: "transparent"
        },
        innerHTML: c.value
      }, null)])])]));
    };
  }
});
export {
  ie as default
};