Function Editor

examples/monaco-graphql-react-vite/src/editor.tsx:84–187

()

});

export default function Editor(): ReactElement {
  const operationsRef = useRef<HTMLDivElement>(null);
  const variablesRef = useRef<HTMLDivElement>(null);
  const responseRef = useRef<HTMLDivElement>(null);
  const typescriptRef = useRef<HTMLDivElement>(null);
  const [operationsEditor, setOperationsEditor] =
    useState<editor.IStandaloneCodeEditor>();
  const [variablesEditor, setVariablesEditor] =
    useState<editor.IStandaloneCodeEditor>();
  const [responseEditor, setResponseEditor] =
    useState<editor.IStandaloneCodeEditor>();
  const [typescriptEditor, setTypescriptEditor] =
    useState<editor.IStandaloneCodeEditor>();
  const [schema, setSchema] = useState<IntrospectionQuery>();
  const [loading, setLoading] = useState(false);
  /**
   * Create the models & editors
   */
  useEffect(() => {
    if (!operationsEditor) {
      const codeEditor = editor.create(operationsRef.current!, {
        model: MODEL.operations,
        ...DEFAULT_EDITOR_OPTIONS,
      });
      codeEditor.addAction(queryAction);
      MODEL.operations.onDidChangeContent(
        debounce(300, () => {
          localStorage.setItem(
            STORAGE_KEY.operations,
            MODEL.operations.getValue(),
          );
        }),
      );
      setOperationsEditor(codeEditor);
    }
    if (!variablesEditor) {
      const codeEditor = editor.create(variablesRef.current!, {
        model: MODEL.variables,
        ...DEFAULT_EDITOR_OPTIONS,
      });
      codeEditor.addAction(queryAction);
      MODEL.variables.onDidChangeContent(
        debounce(300, () => {
          localStorage.setItem(
            STORAGE_KEY.variables,
            MODEL.variables.getValue(),
          );
        }),
      );
      setVariablesEditor(codeEditor);
    }
    if (!responseEditor) {
      setResponseEditor(
        editor.create(responseRef.current!, {
          model: MODEL.response,
          ...DEFAULT_EDITOR_OPTIONS,
          readOnly: true,
          smoothScrolling: true,