import { defineComponent as u, ref as d, useId as f, toRef as n, createElementBlock as m, openBlock as c, createElementVNode as l, createBlock as p, createCommentVNode as g, unref as a } from "vue";
import { ScalarCodeBlockCopy as _ } from "@scalar/components";
import { prettyPrintJson as b } from "@scalar/oas-utils/helpers";
import { useCodeMirror as k } from "@scalar/use-codemirror";
const y = { class: "scalar-code-block group/code-block body-raw flex min-h-0 flex-col overflow-hidden p-px outline-none has-focus-visible:outline" }, h = {
  class: "body-raw-scroller custom-scroll relative pr-1",
  tabindex: "0"
}, M = /* @__PURE__ */ u({
  __name: "ResponseBodyRaw",
  props: {
    content: {},
    language: {}
  },
  setup(e) {
    const o = e, t = d(null), s = f(), { codeMirror: i } = k({
      codeMirrorRef: t,
      readOnly: !0,
      lineNumbers: !0,
      content: n(() => b(o.content)),
      language: n(() => o.language),
      forceFoldGutter: !0
    }), r = () => i.value?.state.doc.toString() || "";
    return (v, C) => (c(), m("div", y, [
      l("div", h, [
        l("div", {
          ref_key: "codeMirrorRef",
          ref: t
        }, null, 512)
      ]),
      r() ? (c(), p(a(_), {
        key: 0,
        content: r(),
        "aria-controls": a(s),
        lang: e.language,
        class: "absolute top-2 right-2"
      }, null, 8, ["content", "aria-controls", "lang"])) : g("", !0)
    ]));
  }
});
export {
  M as default
};
