npm i -D worker-loader css-loader file-loader webpack

npm i  graphql-editor react react-dom monaco-editor @monaco-editor/react

import React, { useState } from 'react';
import { render } from 'react-dom';
import { GraphQLEditor, PassedSchema } from 'graphql-editor';

const schemas = {
  pizza: `
type Query{
    pizzas: [Pizza!]
}
`,
  pizzaLibrary: `
type Pizza{
  name:String;
}
`,
};

export const App = () => {
  const [mySchema, setMySchema] = useState<PassedSchema>({
    code: schemas.pizza,
    libraries: schemas.pizzaLibrary,
  });
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',

...

*Здесь текст обрывается.* | gql       | true     | undefined |
|----------|---------|-----------|
| readonly  | `boolean`                                             | lock editing               | false    | false     |
| theme     | `EditorTheme`                                         | current theme              | false    | MainTheme |

### Встроенный редактор с поддержкой GraphQL для чтения только

Если вы хотите только просмотреть схему и встроить её куда-то в своё приложение, вы можете использовать наш встроенный редактор.

```tsx
import React from 'react';
import { EmbeddedGraphQLEditor } from 'graphql-editor';
import * as schemas from '../schema';

export const embeddedEditor = () => {
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <EmbeddedGraphQLEditor
        schema={{
          code: schemas.googleDirectionsNew,
          libraries: '',
        }}
      />
    </div>
  );
};