Function useVariableEditor

packages/graphiql-react/src/editor/variable-editor.ts:48–155

(
  {
    editorTheme = DEFAULT_EDITOR_THEME,
    keyMap = DEFAULT_KEY_MAP,
    onClickReference,
    onEdit,
    readOnly = false,
  }: UseVariableEditorArgs = {},
  caller?: Function,
)

const _useVariableEditor = useVariableEditor;

export function useVariableEditor(
  {
    editorTheme = DEFAULT_EDITOR_THEME,
    keyMap = DEFAULT_KEY_MAP,
    onClickReference,
    onEdit,
    readOnly = false,
  }: UseVariableEditorArgs = {},
  caller?: Function,
) {
  const { initialVariables, variableEditor, setVariableEditor } =
    useEditorContext({
      nonNull: true,
      caller: caller || _useVariableEditor,
    });
  const executionContext = useExecutionContext();
  const merge = useMergeQuery({ caller: caller || _useVariableEditor });
  const prettify = usePrettifyEditors({ caller: caller || _useVariableEditor });
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    let isActive = true;

    void importCodeMirrorImports().then(CodeMirror => {
      // Don't continue if the effect has already been cleaned up
      if (!isActive) {
        return;
      }
      const container = ref.current;
      if (!container) {
        return;
      }

      const newEditor = CodeMirror(container, {
        value: initialVariables,
        lineNumbers: true,
        tabSize: 2,
        mode: 'graphql-variables',
        theme: editorTheme,
        autoCloseBrackets: true,
        matchBrackets: true,
        showCursorWhenSelecting: true,
        readOnly: readOnly ? 'nocursor' : false,
        foldGutter: true,
        lint: {
          // @ts-expect-error
          variableToType: undefined,
        },
        hintOptions: {
          closeOnUnfocus: false,
          completeSingle: false,
          container,
          // @ts-expect-error
          variableToType: undefined,
        },
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        extraKeys: commonKeys,
      });