@graphiql/react/dist/components/variables-editor.js

[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)

import { jsx } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { useRef, useEffect } from "react";
import { useGraphiQLActions, useGraphiQL } from "./provider.js";
import { STORAGE_KEY, URI_NAME, KEY_BINDINGS } from "../constants.js";
import { useMonaco } from "../stores/monaco.js";
import { useChangeHandler } from "../utility/hooks.js";
import { onEditorContainerKeyDown, getOrCreateModel, createEditor } from "../utility/create-editor.js";
import { pick } from "../utility/pick.js";
import { cleanupDisposables } from "../utility/cleanup-disposables.js";
import { clsx } from "clsx";
const VariablesEditor = (t0) => {
  const $ = c(19);
  let onEdit;
  let props;
  if ($[0] !== t0) {
    ({
      onEdit,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = onEdit;
    $[2] = props;
  } else {
    onEdit = $[1];
    props = $[2];
  }
  const {
    setEditor,
    run,
    prettifyEditors,
    mergeQuery
  } = useGraphiQLActions();
  let t1;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = pick("initialVariables", "uriInstanceId");
    $[3] = t1;
  } else {
    t1 = $[3];
  }
  const {
    initialVariables,
    uriInstanceId
  } = useGraphiQL(t1);
  const ref = useRef(null);
  const monaco = useMonaco(_temp);
  useChangeHandler(onEdit, STORAGE_KEY.variables, "variables");
  let t2;
  if ($[4] !== initialVariables || $[5] !== mergeQuery || $[6] !== monaco || $[7] !== prettifyEditors || $[8] !== run || $[9] !== setEditor || $[10] !== uriInstanceId) {
    t2 = () => {
      if (!monaco) {
        return;
      }
      const model = getOrCreateModel({
        uri: `${uriInstanceId}${URI_NAME.variables}`,
        value: initialVariables
      });
      const editor = createEditor(ref, {
        model
      });
      setEditor({
        variableEditor: editor
      });
      const disposables = [editor.addAction({
        ...KEY_BINDINGS.runQuery,
        run
      }), editor.addAction({
        ...KEY_BINDINGS.prettify,
        run: prettifyEditors
      }), editor.addAction({
        ...KEY_BINDINGS.mergeFragments,
        run: mergeQuery
      }), editor, model];
      return cleanupDisposables(disposables);
    };
    $[4] = initialVariables;
    $[5] = mergeQuery;
    $[6] = monaco;
    $[7] = prettifyEditors;
    $[8] = run;
    $[9] = setEditor;
    $[10] = uriInstanceId;
    $[11] = t2;
  } else {
    t2 = $[11];
  }
  let t3;
  if ($[12] !== monaco) {
    t3 = [monaco];
    $[12] = monaco;
    $[13] = t3;
  } else {
    t3 = $[13];
  }
  useEffect(t2, t3);
  let t4;
  if ($[14] !== props.className) {
    t4 = clsx("graphiql-editor", props.className);
    $[14] = props.className;
    $[15] = t4;
  } else {
    t4 = $[15];
  }
  let t5;
  if ($[16] !== props || $[17] !== t4) {
    t5 = /* @__PURE__ */ jsx("div", { ref, tabIndex: 0, onKeyDown: onEditorContainerKeyDown, ...props, className: t4 });
    $[16] = props;
    $[17] = t4;
    $[18] = t5;
  } else {
    t5 = $[18];
  }
  return t5;
};
function _temp(state) {
  return state.monaco;
}
export {
  VariablesEditor
};
//# sourceMappingURL=variables-editor.js.map