commit @graphiql/react

commit graphiql

remove unused and add editor theme

add monaco-editor-webpack-plugin

remove

Author: dimaMachina

packages/graphiql-react/package.json

@@ -38,7 +38,7 @@
     "types"
   ],
   "scripts": {
-    "dev": "concurrently 'tsc --emitDeclarationOnly --watch' 'vite build --watch'",
+    "dev": "vite build --watch",
     "build": "tsc --emitDeclarationOnly && vite build"
   },
   "peerDependencies": {
@@ -47,6 +47,8 @@
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "dependencies": {
+    "monaco-editor": "^0.39.0",
+    "monaco-graphql": "^1.2.3",
     "@headlessui/react": "^1.7.15",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-visually-hidden": "^1.0.3",

packages/graphiql-react/src/constants.ts

@@ -0,0 +1,57 @@
+import { editor as MONACO_EDITOR } from 'monaco-editor';
+import {
+  OPERATIONS_MODEL,
+  VARIABLES_MODEL,
+  HEADERS_MODEL,
+  RESULTS_MODEL,
+  editorThemeDark,
+  editorThemeLight,
+} from './constants';
+
+// this should be called somewhere else, but fine here for now
+MONACO_EDITOR.defineTheme('graphiql-DARK', editorThemeDark);
+MONACO_EDITOR.defineTheme('graphiql-LIGHT', editorThemeLight);
+
+export function createEditor(
+  type: 'operations' | 'variables' | 'headers' | 'results',
+  domElement: HTMLDivElement,
+) {
+  return MONACO_EDITOR.create(domElement, {
+    language: type === 'operations' ? 'graphql' : 'json',
+    // the default theme
+    theme: 'graphiql-DARK',
+    automaticLayout: true,
+    // folding: false, // disable folding
+    fontFamily: "'Fira Code', monospace", // TODO: set the font (this is problematic because the font has to be installed locally)
+    fontSize: 13, // default is 12
+    // lineDecorationsWidth: 100,
+    lineNumbersMinChars: 2,
+    minimap: {
+      enabled: false, // disable the minimap
+    },
+    overviewRulerLanes: 0, // remove unnecessary cruft on right side of editors
+    scrollbar: {
+      // hide the scrollbars
+      horizontal: 'hidden',
+      // vertical: 'hidden',
+      verticalScrollbarSize: 4,
+    },
+    // scrollPredominantAxis: false,
+    scrollBeyondLastLine: false, // cleans up unnecessary "padding" on the bottom of each editor
+    tabSize: 2,
+    wordWrap: 'on',
+    // wrappingIndent: 'none',
+    wrappingStrategy: 'advanced',
+    fixedOverflowWidgets: true,
+    ...(type === 'results' && {
+      readOnly: true,
+      lineNumbers: 'off',
+    }),
+    model: {
+      operations: OPERATIONS_MODEL,
+      variables: VARIABLES_MODEL,
+      headers: HEADERS_MODEL,
+      results: RESULTS_MODEL,
+    }[type],
+  });
+}

packages/graphiql-react/src/create-editor.ts

@@ -164,12 +164,10 @@ export function onHasCompletion(
               if (event.target === hintsUl) {
                 hintsUl.removeEventListener('scroll', handleScroll);
                 hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
-                if (information) {
-                  information.removeEventListener(
-                    'click',
-                    onClickHintInformation,
-                  );
-                }
+                information?.removeEventListener(
+                  'click',
+                  onClickHintInformation,
+                );
                 information = null;
                 fieldName = null;
                 typeNamePill = null;

packages/graphiql-react/src/editor/completion.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck -- codemirror editor complain about type errors
 import { useEffect } from 'react';
 import { clsx } from 'clsx';
 

packages/graphiql-react/src/editor/components/header-editor.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import { clsx } from 'clsx';
+import { useEditorContext } from '../context';
+import { UseHeaderEditorArgs } from '../header-editor';
+import '../style/editor.css';
+import { createEditor } from '@/create-editor';
+import { HEADERS_MODEL } from '@/constants';
+import debounce from '@/utility/debounce';
+import { useStorageContext } from '@/storage';
+
+type HeaderEditorProps = UseHeaderEditorArgs & {
+  /**
+   * Visually hide the header editor.
+   * @default false
+   */
+  isHidden?: boolean;
+};
+
+export function HeadersEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
+  const { setHeaderEditor, updateActiveTabValues, shouldPersistHeaders } =
+    useEditorContext({
+      nonNull: true,
+      caller: HeadersEditor,
+    });
+  const ref = useRef<HTMLDivElement>(null);
+  const storage = useStorageContext();
+
+  useEffect(() => {
+    setHeaderEditor(createEditor('headers', ref.current!));
+    if (!shouldPersistHeaders) {
+      return;
+    }
+    HEADERS_MODEL.onDidChangeContent(
+      debounce(500, () => {
+        const value = HEADERS_MODEL.getValue();
+        storage?.set(STORAGE_KEY, value);
+        updateActiveTabValues({ headers: value });
+      }),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only on mount
+  }, []);
+
+  return (
+    <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
+  );
+}
+
+export const STORAGE_KEY = 'headers';

packages/graphiql-react/src/editor/components/headers-editor.tsx

@@ -3,3 +3,7 @@ export { ImagePreview } from './image-preview';
 export { QueryEditor } from './query-editor';
 export { ResponseEditor } from './response-editor';
 export { VariableEditor } from './variable-editor';
+export { OperationsEditor } from './operations-editor';
+export { VariablesEditor } from './variables-editor';
+export { HeadersEditor } from './headers-editor';
+export { ResultsEditor } from './results-editor';

packages/graphiql-react/src/editor/components/index.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useQueryEditor, UseQueryEditorArgs } from '../operations-editor';
+
+export function OperationsEditor(props: UseQueryEditorArgs) {
+  const ref = useQueryEditor(props, OperationsEditor);
+
+  return <div className="graphiql-editor" ref={ref} />;
+}

packages/graphiql-react/src/editor/components/operations-editor.tsx

@@ -0,0 +1,29 @@
+import { UseResponseEditorArgs } from '../response-editor';
+import { useEffect, useRef } from 'react';
+import { createEditor } from '@/create-editor';
+import { useEditorContext } from '@/editor';
+import '../style/editor.css';
+
+export function ResultsEditor(props: UseResponseEditorArgs) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { setResponseEditor } = useEditorContext({
+    nonNull: true,
+    caller: ResultsEditor,
+  });
+
+  useEffect(() => {
+    setResponseEditor(createEditor('results', ref.current!));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only on mount
+  }, []);
+
+  return (
+    <section
+      className="result-window"
+      aria-label="Result Window"
+      aria-live="polite"
+      aria-atomic="true"
+      ref={ref}
+    />
+  );
+}

packages/graphiql-react/src/editor/components/results-editor.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck -- codemirror editor complain about type errors
 import { useEffect } from 'react';
 import { clsx } from 'clsx';
 
@@ -26,8 +27,8 @@ export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
   const ref = useVariableEditor(hookArgs, VariableEditor);
 
   useEffect(() => {
-    if (variableEditor && !isHidden) {
-      variableEditor.refresh();
+    if (!isHidden) {
+      variableEditor?.refresh();
     }
   }, [variableEditor, isHidden]);