From 45e41cc79f2d24ae84c5b613cab2dd524001e7bf Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Wed, 7 Sep 2022 12:15:11 +0200
Subject: [PATCH 01/17] initial

---
 package.json                                  |  3 +-
 .../graphiql-plugin-code-exporter/.eslintrc   |  3 +
 .../graphiql-plugin-code-exporter/.gitignore  | 25 ++++++++
 .../CHANGELOG.md                              |  1 +
 .../graphiql-plugin-code-exporter/README.md   | 57 +++++++++++++++++++
 .../package.json                              | 45 +++++++++++++++
 .../resources/copy-types.mjs                  | 11 ++++
 .../src/graphiql-code-exporter.d.ts           | 14 +++++
 .../src/index.css                             |  1 +
 .../src/index.tsx                             | 46 +++++++++++++++
 .../src/vite-env.d.ts                         |  1 +
 .../tsconfig.json                             | 22 +++++++
 .../tsconfig.node.json                        |  9 +++
 .../vite.config.ts                            | 31 ++++++++++
 yarn.lock                                     | 14 +++++
 15 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 packages/graphiql-plugin-code-exporter/.eslintrc
 create mode 100644 packages/graphiql-plugin-code-exporter/.gitignore
 create mode 100644 packages/graphiql-plugin-code-exporter/CHANGELOG.md
 create mode 100644 packages/graphiql-plugin-code-exporter/README.md
 create mode 100644 packages/graphiql-plugin-code-exporter/package.json
 create mode 100644 packages/graphiql-plugin-code-exporter/resources/copy-types.mjs
 create mode 100644 packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
 create mode 100644 packages/graphiql-plugin-code-exporter/src/index.css
 create mode 100644 packages/graphiql-plugin-code-exporter/src/index.tsx
 create mode 100644 packages/graphiql-plugin-code-exporter/src/vite-env.d.ts
 create mode 100644 packages/graphiql-plugin-code-exporter/tsconfig.json
 create mode 100644 packages/graphiql-plugin-code-exporter/tsconfig.node.json
 create mode 100644 packages/graphiql-plugin-code-exporter/vite.config.ts

diff --git a/package.json b/package.json
index 7e764c94dba..01d6516b3e7 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "npm": "please_use_yarn_instead"
   },
   "scripts": {
-    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql",
+    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql-plugin-code-exporter && yarn build:graphiql",
     "build-bundles": "yarn prebuild-bundles && wsrun -p -m -s build-bundles",
     "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql run build-bundles-clean",
     "build-clean": "wsrun -m build-clean ",
@@ -41,6 +41,7 @@
     "build:clean": "yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json",
     "build:graphiql": "yarn tsc resources/tsconfig.graphiql.json",
     "build:graphiql-plugin-explorer": "yarn workspace @graphiql/plugin-explorer run build",
+    "build:graphiql-plugin-code-exporter": "yarn workspace @graphiql/plugin-code-exporter run build",
     "build:graphiql-react": "yarn workspace @graphiql/react run build",
     "build:packages": "yarn tsc",
     "build:watch": "yarn tsc --watch",
diff --git a/packages/graphiql-plugin-code-exporter/.eslintrc b/packages/graphiql-plugin-code-exporter/.eslintrc
new file mode 100644
index 00000000000..98f785433f6
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:react/jsx-runtime"]
+}
diff --git a/packages/graphiql-plugin-code-exporter/.gitignore b/packages/graphiql-plugin-code-exporter/.gitignore
new file mode 100644
index 00000000000..81275974cf0
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+types
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/graphiql-plugin-code-exporter/CHANGELOG.md b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
new file mode 100644
index 00000000000..42072232b44
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
@@ -0,0 +1 @@
+# @graphiql/plugin-code-exporter
diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
new file mode 100644
index 00000000000..be7e38ccd30
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -0,0 +1,57 @@
+# GraphiQL Code Exporter Plugin
+
+This package provides a plugin that integrated the [`GraphiQL Code Exporter`](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
+
+## Install
+
+Use your favorite package manager to install the package:
+
+```sh
+npm i -S @graphiql/plugin-code-exporter
+```
+
+The following packages are peer dependencies, so make sure you have them installed as well:
+
+```sh
+npm i -S react react-dom graphql
+```
+
+## Usage
+
+```jsx
+import { useCodeExporterPlugin } from '@graphiql/plugin-code-exporter';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import { useState } from 'react';
+
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
+
+const fetcher = createGraphiQLFetcher({
+  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+});
+
+const snippets = [`your-custom-snippets`];
+
+function GraphiQLWithExplorer() {
+  const [query, setQuery] = useState(DEFAULT_QUERY);
+  const exporterPlugin = useCodeExporterPlugin({
+    query,
+    snippets,
+  });
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[exporterPlugin]}
+    />
+  );
+}
+```
+
+## CDN bundles
+
+TODO!
+
+You can also use add this plugin when using the [CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the [example HTML file](examples/index.html) that shows how you can do this.
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
new file mode 100644
index 00000000000..7d9b79c42fd
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@graphiql/plugin-code-exporter",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/graphql/graphiql",
+    "directory": "packages/graphiql-plugin-code-exporter"
+  },
+  "author": "LekoArts",
+  "main": "dist/graphiql-plugin-code-exporter.cjs.js",
+  "module": "dist/graphiql-plugin-code-exporter.es.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "graphql",
+    "graphiql",
+    "plugin",
+    "explorer"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --emitDeclarationOnly && node resources/copy-types.mjs && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@graphiql/react": "^0.13.0",
+    "graphiql-code-exporter": "^3.0.3"
+  },
+  "peerDependencies": {
+    "graphql": "^15.5.0 || ^16.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.13"
+  }
+}
diff --git a/packages/graphiql-plugin-code-exporter/resources/copy-types.mjs b/packages/graphiql-plugin-code-exporter/resources/copy-types.mjs
new file mode 100644
index 00000000000..45e621b507b
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/resources/copy-types.mjs
@@ -0,0 +1,11 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const base = path.resolve(path.dirname(__filename), '..');
+
+fs.copyFileSync(
+  path.resolve(base, 'src', 'graphiql-code-exporter.d.ts'),
+  path.resolve(base, 'types', 'graphiql-code-exporter.d.ts'),
+);
diff --git a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
new file mode 100644
index 00000000000..3b30ff6ea92
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
@@ -0,0 +1,14 @@
+declare module 'graphiql-code-exporter' {
+  import { GraphQLLeafType, ValueNode } from 'graphql';
+  import { ComponentType } from 'react';
+
+  export type GraphiQLCodeExporterProps = {
+    query: string;
+  };
+
+  const GraphiQLCodeExporter: ComponentType<GraphiQLCodeExporterProps> & {
+    defaultValue: (arg: GraphQLLeafType) => ValueNode;
+  };
+
+  export default GraphiQLCodeExporter;
+}
diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
new file mode 100644
index 00000000000..8f414f586f2
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -0,0 +1 @@
+/* TODO */
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
new file mode 100644
index 00000000000..e17e2c7143c
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -0,0 +1,46 @@
+import { GraphiQLPlugin } from '@graphiql/react';
+import { useMemo, useRef } from 'react';
+import GraphiQLCodeExporter, {
+  GraphiQLCodeExporterProps,
+} from 'graphiql-code-exporter';
+
+import './graphiql-code-exporter.d.ts';
+import './index.css';
+
+function ExporterPlugin(props: GraphiQLCodeExporterProps) {
+  return <GraphiQLCodeExporter {...props} />;
+}
+
+export function useExplorerPlugin(props: GraphiQLCodeExporterProps) {
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  return useMemo<GraphiQLPlugin>(
+    () => ({
+      title: 'GraphiQL Code Exporter',
+      icon: () => (
+        <svg height="1em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M18 6H20M22 6H20M20 6V4M20 6V8"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M21.4 20H2.6C2.26863 20 2 19.7314 2 19.4V11H21.4C21.7314 11 22 11.2686 22 11.6V19.4C22 19.7314 21.7314 20 21.4 20Z"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H14"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+      content: () => <ExporterPlugin {...propsRef.current} />,
+    }),
+    [],
+  );
+}
diff --git a/packages/graphiql-plugin-code-exporter/src/vite-env.d.ts b/packages/graphiql-plugin-code-exporter/src/vite-env.d.ts
new file mode 100644
index 00000000000..14fa7492304
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/vite-env.d.ts
@@ -0,0 +1 @@
+// / <reference types="vite/client" />
diff --git a/packages/graphiql-plugin-code-exporter/tsconfig.json b/packages/graphiql-plugin-code-exporter/tsconfig.json
new file mode 100644
index 00000000000..872ce46c3eb
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationDir": "types",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/graphiql-plugin-code-exporter/tsconfig.node.json b/packages/graphiql-plugin-code-exporter/tsconfig.node.json
new file mode 100644
index 00000000000..9d31e2aed93
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/graphiql-plugin-code-exporter/vite.config.ts b/packages/graphiql-plugin-code-exporter/vite.config.ts
new file mode 100644
index 00000000000..93fb3234898
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/vite.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: 'src/index.tsx',
+      fileName: 'graphiql-plugin-code-exporter',
+      name: 'GraphiQLPluginCodeExporter',
+      formats: ['cjs', 'es', 'umd'],
+    },
+    rollupOptions: {
+      external: ['@graphiql/react', 'graphql', 'react', 'react-dom'],
+      output: {
+        chunkFileNames: '[name].[format].js',
+        globals: {
+          '@graphiql/react': 'GraphiQL.React',
+          graphql: 'GraphiQL.GraphQL',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+    commonjsOptions: {
+      esmExternals: true,
+      requireReturnsDefault: 'auto',
+    },
+  },
+});
diff --git a/yarn.lock b/yarn.lock
index 197763dad40..02efd544d7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7299,6 +7299,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.0.8:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107"
+  integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-to-clipboard@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
@@ -10355,6 +10362,13 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphiql-code-exporter@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/graphiql-code-exporter/-/graphiql-code-exporter-3.0.3.tgz#550c87caa018eade5db4238f81953db6e0468248"
+  integrity sha512-Ml3J/ojCQ56qrIgJPDCrWQ2cpI/6yio2P1tHPBuvhGJ2zVSUCH/D+v1DIwXIzsAMwqq0WkaknqH3iuA6LD5A5A==
+  dependencies:
+    copy-to-clipboard "^3.0.8"
+
 graphiql-explorer@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/graphiql-explorer/-/graphiql-explorer-0.9.0.tgz#25f6b990bfc3e04e88c0cf419e28d12abe2c4fbe"

From 74678f85abbb8281df8076551b2aa3a5ad011e05 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Wed, 7 Sep 2022 12:15:21 +0200
Subject: [PATCH 02/17] update cspell

---
 custom-words.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/custom-words.txt b/custom-words.txt
index 49cbf6ce8b8..fbc53f62c07 100644
--- a/custom-words.txt
+++ b/custom-words.txt
@@ -58,6 +58,8 @@ timsuchanek
 urigo
 wincent
 yoshiakis
+Leko
+LekoArts
 
 
 // packages and tools

From 7bc8b1a40c8e61d72a7faae955ddd96dc9c8939f Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Wed, 7 Sep 2022 12:42:12 +0200
Subject: [PATCH 03/17] integrate into example

---
 examples/graphiql-webpack/package.json        |  5 +-
 examples/graphiql-webpack/src/index.jsx       | 65 ++++++++++++-------
 .../package.json                              |  2 +-
 .../src/index.tsx                             |  2 +-
 yarn.lock                                     |  5 ++
 5 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
index 8405f594a6b..756da01bcf9 100644
--- a/examples/graphiql-webpack/package.json
+++ b/examples/graphiql-webpack/package.json
@@ -9,11 +9,14 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
+    "@graphiql/plugin-code-exporter": "^0.0.1",
+    "@graphiql/plugin-explorer": "^0.1.3",
     "@graphiql/toolkit": "^0.7.3",
     "graphiql": "^2.0.6",
     "graphql": "^16.4.0",
     "graphql-ws": "^5.5.5",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",
diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index c9ede1fdbcd..0cbce52d3d6 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -1,34 +1,55 @@
-import React from 'react';
+import 'regenerator-runtime/runtime.js';
+
+import * as React from 'react';
 import { render } from 'react-dom';
 import GraphiQL from 'graphiql';
+import snippets from 'graphiql-code-exporter/lib/snippets';
+import { useExplorerPlugin } from '@graphiql/plugin-explorer';
+import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
+
 import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
 
 const Logo = () => <span>My Corp</span>;
 
 // See GraphiQL Readme - Advanced Usage section for more examples like this
 GraphiQL.Logo = Logo;
 
-const App = () => (
-  <GraphiQL
-    style={{ height: '100vh' }}
-    headerEditorEnabled
-    fetcher={async (graphQLParams, options) => {
-      const data = await fetch(
-        'https://swapi-graphql.netlify.app/.netlify/functions/index',
-        {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-            ...options.headers,
+const App = () => {
+  const [query, setQuery] = React.useState('');
+  const explorerPlugin = useExplorerPlugin({
+    query,
+    onEdit: setQuery,
+  });
+  const exporterPlugin = useExporterPlugin({
+    query,
+    snippets,
+  });
+
+  return (
+    <GraphiQL
+      style={{ height: '100vh' }}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[explorerPlugin, exporterPlugin]}
+      fetcher={async (graphQLParams, options) => {
+        const data = await fetch(
+          'https://swapi-graphql.netlify.app/.netlify/functions/index',
+          {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+              ...options.headers,
+            },
+            body: JSON.stringify(graphQLParams),
+            credentials: 'same-origin',
           },
-          body: JSON.stringify(graphQLParams),
-          credentials: 'same-origin',
-        },
-      );
-      return data.json().catch(() => data.text());
-    }}
-  />
-);
+        );
+        return data.json().catch(() => data.text());
+      }}
+    />
+  );
+};
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
index 7d9b79c42fd..2075326be4b 100644
--- a/packages/graphiql-plugin-code-exporter/package.json
+++ b/packages/graphiql-plugin-code-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-code-exporter",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
index e17e2c7143c..8a7d409b9cd 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.tsx
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -11,7 +11,7 @@ function ExporterPlugin(props: GraphiQLCodeExporterProps) {
   return <GraphiQLCodeExporter {...props} />;
 }
 
-export function useExplorerPlugin(props: GraphiQLCodeExporterProps) {
+export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
   const propsRef = useRef(props);
   propsRef.current = props;
   return useMemo<GraphiQLPlugin>(
diff --git a/yarn.lock b/yarn.lock
index 02efd544d7b..10e249943c7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15551,6 +15551,11 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
+regenerator-runtime@^0.13.9:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 regenerator-transform@^0.14.2:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"

From e2ea00aefd178745468f5d4e180dce3471e6e812 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Thu, 8 Sep 2022 09:15:29 +0200
Subject: [PATCH 04/17] update props

---
 examples/graphiql-webpack/src/index.jsx       |  5 --
 .../src/graphiql-code-exporter.d.ts           | 47 +++++++++++++++++--
 .../src/index.tsx                             | 19 +++++++-
 3 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index 0cbce52d3d6..66fdf7eb4ce 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -10,11 +10,6 @@ import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
 import 'graphiql/graphiql.css';
 import '@graphiql/plugin-explorer/dist/style.css';
 
-const Logo = () => <span>My Corp</span>;
-
-// See GraphiQL Readme - Advanced Usage section for more examples like this
-GraphiQL.Logo = Logo;
-
 const App = () => {
   const [query, setQuery] = React.useState('');
   const explorerPlugin = useExplorerPlugin({
diff --git a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
index 3b30ff6ea92..29264e30216 100644
--- a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
+++ b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
@@ -1,14 +1,53 @@
 declare module 'graphiql-code-exporter' {
-  import { GraphQLLeafType, ValueNode } from 'graphql';
   import { ComponentType } from 'react';
+  import {
+    GraphQLSchema,
+    OperationTypeNode,
+    OperationDefinitionNode,
+    FragmentDefinitionNode,
+  } from 'graphql';
 
-  export type GraphiQLCodeExporterProps = {
+  type OperationData = {
     query: string;
+    name: string;
+    displayName: string;
+    type: OperationTypeNode | 'fragment';
+    variableName: string;
+    variables: Record<string, any>;
+    operationDefinition: OperationDefinitionNode | FragmentDefinitionNode;
+    fragmentDependencies: Array<FragmentDefinitionNode>;
+  };
+
+  type GenerateOptions = {
+    serverUrl: string;
+    headers: Record<string, string>;
+    context: Record<string, any>;
+    operationDataList: Array<OperationData>;
+    options: Record<string, boolean>;
+  };
+
+  type Snippet = {
+    language: string;
+    codeMirrorMode: string;
+    name: string;
+    options: Array<{
+      id: string;
+      label: string;
+      initial: boolean;
+    }>;
+    generate: (options: GenerateOptions) => string;
   };
 
-  const GraphiQLCodeExporter: ComponentType<GraphiQLCodeExporterProps> & {
-    defaultValue: (arg: GraphQLLeafType) => ValueNode;
+  export type GraphiQLCodeExporterProps = {
+    query: string;
+    snippets: Array<Snippet>;
+    codeMirrorTheme?: string;
+    variables?: string;
+    context?: Record<string, any>;
+    schema?: GraphQLSchema | null | undefined;
   };
 
+  const GraphiQLCodeExporter: ComponentType<GraphiQLCodeExporterProps>;
+
   export default GraphiQLCodeExporter;
 }
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
index 8a7d409b9cd..c6170515c5a 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.tsx
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -5,10 +5,27 @@ import GraphiQLCodeExporter, {
 } from 'graphiql-code-exporter';
 
 import './graphiql-code-exporter.d.ts';
+// TODO: Check if needed or if we should style everything ourselves
+// import 'graphiql-code-exporter/CodeExporter.css'
 import './index.css';
 
 function ExporterPlugin(props: GraphiQLCodeExporterProps) {
-  return <GraphiQLCodeExporter {...props} />;
+  const {
+    query = ``,
+    codeMirrorTheme = `graphiql`,
+    variables = ``,
+    context = {},
+    ...rest
+  } = props;
+  return (
+    <GraphiQLCodeExporter
+      query={query}
+      codeMirrorTheme={codeMirrorTheme}
+      variables={variables}
+      context={context}
+      {...rest}
+    />
+  );
 }
 
 export function useExporterPlugin(props: GraphiQLCodeExporterProps) {

From da21fcc60d7caaf59d64170f824c33a09e2acf04 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Thu, 8 Sep 2022 09:59:14 +0200
Subject: [PATCH 05/17] get things working

---
 examples/graphiql-webpack/src/index.jsx       |  1 +
 .../graphiql-plugin-code-exporter/README.md   |  1 +
 .../src/graphiql-code-exporter.d.ts           |  2 +-
 .../src/index.tsx                             | 19 +------------------
 4 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index 66fdf7eb4ce..325e374a174 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -19,6 +19,7 @@ const App = () => {
   const exporterPlugin = useExporterPlugin({
     query,
     snippets,
+    codeMirrorTheme: 'graphiql',
   });
 
   return (
diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index be7e38ccd30..b4e7819abe9 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -38,6 +38,7 @@ function GraphiQLWithExplorer() {
   const exporterPlugin = useCodeExporterPlugin({
     query,
     snippets,
+    codeMirrorTheme: 'graphiql',
   });
   return (
     <GraphiQL
diff --git a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
index 29264e30216..35601315029 100644
--- a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
+++ b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
@@ -41,7 +41,7 @@ declare module 'graphiql-code-exporter' {
   export type GraphiQLCodeExporterProps = {
     query: string;
     snippets: Array<Snippet>;
-    codeMirrorTheme?: string;
+    codeMirrorTheme: string;
     variables?: string;
     context?: Record<string, any>;
     schema?: GraphQLSchema | null | undefined;
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
index c6170515c5a..8a7d409b9cd 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.tsx
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -5,27 +5,10 @@ import GraphiQLCodeExporter, {
 } from 'graphiql-code-exporter';
 
 import './graphiql-code-exporter.d.ts';
-// TODO: Check if needed or if we should style everything ourselves
-// import 'graphiql-code-exporter/CodeExporter.css'
 import './index.css';
 
 function ExporterPlugin(props: GraphiQLCodeExporterProps) {
-  const {
-    query = ``,
-    codeMirrorTheme = `graphiql`,
-    variables = ``,
-    context = {},
-    ...rest
-  } = props;
-  return (
-    <GraphiQLCodeExporter
-      query={query}
-      codeMirrorTheme={codeMirrorTheme}
-      variables={variables}
-      context={context}
-      {...rest}
-    />
-  );
+  return <GraphiQLCodeExporter {...props} />;
 }
 
 export function useExporterPlugin(props: GraphiQLCodeExporterProps) {

From 23817b6d571d14d3876b98ad67d798430354d29a Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Thu, 8 Sep 2022 13:37:56 +0200
Subject: [PATCH 06/17] add styling

---
 examples/graphiql-webpack/src/index.jsx       |   1 +
 .../graphiql-plugin-code-exporter/README.md   |   2 +-
 .../src/index.css                             | 130 +++++++++++++++++-
 3 files changed, 131 insertions(+), 2 deletions(-)

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index 325e374a174..1500a126c5c 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -9,6 +9,7 @@ import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
 
 import 'graphiql/graphiql.css';
 import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-code-exporter/dist/style.css';
 
 const App = () => {
   const [query, setQuery] = React.useState('');
diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index b4e7819abe9..e440fefad43 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -25,7 +25,7 @@ import { GraphiQL } from 'graphiql';
 import { useState } from 'react';
 
 import 'graphiql/graphiql.css';
-import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-code-exporter/dist/style.css';
 
 const fetcher = createGraphiQLFetcher({
   url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
index 8f414f586f2..22d9dd65a05 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.css
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -1 +1,129 @@
-/* TODO */
+.graphiql-code-exporter {
+  min-width: unset !important;
+  position: relative;
+  padding: var(--px-16) 0;
+}
+
+.graphiql-code-exporter > div {
+  font-family: var(--font-family) !important;
+  padding: 0 !important;
+  font-size: var(--font-size-body) !important;
+}
+
+.graphiql-code-exporter > div:first-of-type > div {
+  padding: 0 !important;
+}
+
+.graphiql-code-exporter button.toolbar-button {
+  display: block;
+  height: var(--toolbar-width) !important;
+  width: var(--toolbar-width) !important;
+  border-radius: var(--border-radius-4) !important;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: unset !important;
+  left: unset !important;
+  margin-top: unset !important;
+  top: var(--px-16);
+  right: 0;
+  justify-content: center;
+  align-items: center;
+  background-color: unset !important;
+}
+
+.graphiql-code-exporter button.toolbar-button svg {
+  fill: hsla(var(--color-neutral), var(--alpha-tertiary));
+}
+
+.graphiql-code-exporter > div:first-of-type {
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-16);
+}
+
+.graphiql-code-exporter > div:first-of-type > div:first-of-type {
+  display: flex;
+  flex-direction: row;
+  gap: var(--px-16);
+}
+
+.graphiql-code-exporter
+  > div:first-of-type
+  > div:last-of-type
+  > div:first-of-type {
+  color: hsla(var(--color-neutral), var(--alpha-secondary)) !important;
+  font-variant: unset !important;
+  text-transform: unset !important;
+  font-weight: unset !important;
+  margin-bottom: var(--px-12);
+}
+
+.graphiql-code-exporter > div:last-of-type {
+  border-top: none !important;
+}
+
+.graphiql-code-exporter > div:last-of-type {
+  display: flex;
+  flex: 1;
+  margin-top: var(--px-24) !important;
+}
+
+.graphiql-code-exporter > div:last-of-type > div {
+  position: relative;
+  min-height: 600px;
+  width: calc(100% - 2 * var(--px-16));
+}
+
+.graphiql-code-exporter .toolbar-button:hover {
+  background-color: hsla(
+    var(--color-neutral),
+    var(--alpha-background-light)
+  ) !important;
+}
+
+.graphiql-code-exporter .toolbar-menu.toolbar-button {
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  padding: var(--px-8) var(--px-12);
+  color: hsla(var(--color-neutral), 1) !important;
+  border-radius: var(--border-radius-4) !important;
+}
+
+.graphiql-code-exporter .toolbar-menu-items {
+  background-color: hsl(var(--color-base)) !important;
+  box-shadow: var(--popover-box-shadow) !important;
+  margin: 0;
+  padding: var(--px-8) 0;
+  position: absolute;
+  z-index: 100;
+  margin-top: var(--px-8);
+  visibility: hidden;
+  left: 0;
+}
+
+.graphiql-code-exporter .toolbar-menu-items.open {
+  visibility: visible;
+}
+
+.graphiql-code-exporter .toolbar-menu-items > li {
+  cursor: pointer;
+  display: block;
+  margin: none;
+  max-width: 300px;
+  overflow: hidden;
+  padding: 2px 20px 4px 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: hsla(var(--color-neutral), 1) !important;
+}
+
+.graphiql-code-exporter .toolbar-menu-items > li:hover {
+  color: hsla(var(--color-primary), 1) !important;
+}
+
+.graphiql-code-exporter .CodeMirror {
+  box-shadow: var(--popover-box-shadow);
+  border-radius: calc(var(--border-radius-12));
+  padding: var(--px-16);
+}

From c74bfa54190010d98fcdbfded81314920c4b4c0d Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 9 Sep 2022 13:53:21 +0200
Subject: [PATCH 07/17] add icon, svg example, inline snippets

---
 examples/graphiql-webpack/src/index.jsx       |  44 +++++-
 .../graphiql-plugin-code-exporter/README.md   |   2 -
 .../examples/index.html                       | 125 ++++++++++++++++++
 .../src/index.tsx                             |  23 ++--
 4 files changed, 176 insertions(+), 18 deletions(-)
 create mode 100644 packages/graphiql-plugin-code-exporter/examples/index.html

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index 1500a126c5c..09abed0f94b 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -3,7 +3,6 @@ import 'regenerator-runtime/runtime.js';
 import * as React from 'react';
 import { render } from 'react-dom';
 import GraphiQL from 'graphiql';
-import snippets from 'graphiql-code-exporter/lib/snippets';
 import { useExplorerPlugin } from '@graphiql/plugin-explorer';
 import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
 
@@ -11,6 +10,49 @@ import 'graphiql/graphiql.css';
 import '@graphiql/plugin-explorer/dist/style.css';
 import '@graphiql/plugin-code-exporter/dist/style.css';
 
+const removeQueryName = query =>
+  query.replace(
+    /^[^{(]+([{(])/,
+    (_match, openingCurlyBracketsOrParenthesis) =>
+      `query ${openingCurlyBracketsOrParenthesis}`,
+  );
+
+const getQuery = (arg, spaceCount) => {
+  const { operationDataList } = arg;
+  const { query } = operationDataList[0];
+  const anonymousQuery = removeQueryName(query);
+  return (
+    ` `.repeat(spaceCount) +
+    anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
+  );
+};
+
+const exampleSnippetOne = {
+  name: `Example One`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+`,
+};
+
+const exampleSnippetTwo = {
+  name: `Example Two`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `import { graphql } from 'graphql'
+
+export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+`,
+};
+
+const snippets = [exampleSnippetOne, exampleSnippetTwo];
+
 const App = () => {
   const [query, setQuery] = React.useState('');
   const explorerPlugin = useExplorerPlugin({
diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index e440fefad43..c5c9aeda7f8 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -53,6 +53,4 @@ function GraphiQLWithExplorer() {
 
 ## CDN bundles
 
-TODO!
-
 You can also use add this plugin when using the [CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the [example HTML file](examples/index.html) that shows how you can do this.
diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
new file mode 100644
index 00000000000..65abecd4699
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -0,0 +1,125 @@
+<!--
+ *  Copyright (c) 2021 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+    ></script>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/graphiql-plugin-explorer.umd.js"
+    ></script>
+
+    <script>
+      var fetcher = GraphiQL.createFetcher({
+        url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+      });
+
+      function removeQueryName(query) {
+        return query.replace(
+          /^[^{(]+([{(])/,
+          (_match, openingCurlyBracketsOrParenthesis) =>
+            `query ${openingCurlyBracketsOrParenthesis}`,
+        );
+      }
+
+      function getQuery(arg, spaceCount) {
+        var { operationDataList } = arg;
+        var { query } = operationDataList[0];
+        var anonymousQuery = removeQueryName(query);
+        return (
+          ` `.repeat(spaceCount) +
+          anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
+        );
+      }
+
+      var exampleSnippetOne = {
+        name: `Example One`,
+        language: `JavaScript`,
+        codeMirrorMode: `jsx`,
+        options: [],
+        generate: arg => `export const query = graphql\`
+      ${getQuery(arg, 2)}
+      \`
+      `,
+      };
+
+      var exampleSnippetTwo = {
+        name: `Example Two`,
+        language: `JavaScript`,
+        codeMirrorMode: `jsx`,
+        options: [],
+        generate: arg => `import { graphql } from 'graphql'
+
+      export const query = graphql\`
+      ${getQuery(arg, 2)}
+      \`
+      `,
+      };
+
+      var snippets = [exampleSnippetOne, exampleSnippetTwo];
+
+      function GraphiQLWithExporter() {
+        var [query, setQuery] = React.useState(
+          'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}',
+        );
+        var exporterPlugin = GraphiQLPluginCodeExporter.useExporterPlugin({
+          query: query,
+          snippets,
+          codeMirrorTheme: 'graphiql',
+        });
+        return React.createElement(GraphiQL, {
+          fetcher: fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [exporterPlugin],
+          query: query,
+          onEditQuery: setQuery,
+        });
+      }
+
+      ReactDOM.render(
+        React.createElement(GraphiQLWithExporter),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
index 8a7d409b9cd..ca9074f5a8a 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.tsx
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -18,24 +18,17 @@ export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
     () => ({
       title: 'GraphiQL Code Exporter',
       icon: () => (
-        <svg height="1em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+        >
           <path
-            d="M18 6H20M22 6H20M20 6V4M20 6V8"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M21.4 20H2.6C2.26863 20 2 19.7314 2 19.4V11H21.4C21.7314 11 22 11.2686 22 11.6V19.4C22 19.7314 21.7314 20 21.4 20Z"
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H14"
-            stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
+            d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15"
           />
         </svg>
       ),

From 598d7eb08b2b7692095bd0184c8b1d34655a4649 Mon Sep 17 00:00:00 2001
From: Lennart <lekoarts@gmail.com>
Date: Sat, 1 Oct 2022 09:40:15 +0200
Subject: [PATCH 08/17] Update packages/graphiql-plugin-code-exporter/README.md

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>
---
 packages/graphiql-plugin-code-exporter/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index c5c9aeda7f8..b10d75f3270 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -1,6 +1,6 @@
 # GraphiQL Code Exporter Plugin
 
-This package provides a plugin that integrated the [`GraphiQL Code Exporter`](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
+This package provides a plugin that integrates the [`GraphiQL Code Exporter`](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
 
 ## Install
 

From 26fda634a4ebbd3eba232fc1f23239500a6589b2 Mon Sep 17 00:00:00 2001
From: Lennart <lekoarts@gmail.com>
Date: Sat, 1 Oct 2022 09:40:20 +0200
Subject: [PATCH 09/17] Update packages/graphiql-plugin-code-exporter/README.md

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>
---
 packages/graphiql-plugin-code-exporter/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index b10d75f3270..278db2e3248 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -53,4 +53,4 @@ function GraphiQLWithExplorer() {
 
 ## CDN bundles
 
-You can also use add this plugin when using the [CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the [example HTML file](examples/index.html) that shows how you can do this.
+You can also use this plugin when using the [CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the [example HTML file](examples/index.html) that shows how you can do this.

From c512adde6141b2d6c163998f548e3187c4d68751 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 14 Oct 2022 11:16:12 +0200
Subject: [PATCH 10/17] review comments no1

- deduplication
- vite bundle config
- move package to devDep
- remove wrapper react component
- eslint thingy
---
 .../graphiql-plugin-code-exporter/package.json   |  2 +-
 .../graphiql-plugin-code-exporter/src/index.tsx  |  8 ++------
 .../graphiql-plugin-code-exporter/vite.config.ts |  3 +--
 yarn.lock                                        | 16 ++--------------
 4 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
index 2075326be4b..9c5b7a0c1f1 100644
--- a/packages/graphiql-plugin-code-exporter/package.json
+++ b/packages/graphiql-plugin-code-exporter/package.json
@@ -29,7 +29,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@graphiql/react": "^0.13.0",
     "graphiql-code-exporter": "^3.0.3"
   },
   "peerDependencies": {
@@ -38,6 +37,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@graphiql/react": "^0.13.0",
     "@vitejs/plugin-react": "^1.3.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.13"
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
index ca9074f5a8a..3bee791848f 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.tsx
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -1,4 +1,4 @@
-import { GraphiQLPlugin } from '@graphiql/react';
+import type { GraphiQLPlugin } from '@graphiql/react';
 import { useMemo, useRef } from 'react';
 import GraphiQLCodeExporter, {
   GraphiQLCodeExporterProps,
@@ -7,10 +7,6 @@ import GraphiQLCodeExporter, {
 import './graphiql-code-exporter.d.ts';
 import './index.css';
 
-function ExporterPlugin(props: GraphiQLCodeExporterProps) {
-  return <GraphiQLCodeExporter {...props} />;
-}
-
 export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
   const propsRef = useRef(props);
   propsRef.current = props;
@@ -32,7 +28,7 @@ export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
           />
         </svg>
       ),
-      content: () => <ExporterPlugin {...propsRef.current} />,
+      content: () => <GraphiQLCodeExporter {...propsRef.current} />,
     }),
     [],
   );
diff --git a/packages/graphiql-plugin-code-exporter/vite.config.ts b/packages/graphiql-plugin-code-exporter/vite.config.ts
index 93fb3234898..421069fc228 100644
--- a/packages/graphiql-plugin-code-exporter/vite.config.ts
+++ b/packages/graphiql-plugin-code-exporter/vite.config.ts
@@ -12,11 +12,10 @@ export default defineConfig({
       formats: ['cjs', 'es', 'umd'],
     },
     rollupOptions: {
-      external: ['@graphiql/react', 'graphql', 'react', 'react-dom'],
+      external: ['graphql', 'react', 'react-dom'],
       output: {
         chunkFileNames: '[name].[format].js',
         globals: {
-          '@graphiql/react': 'GraphiQL.React',
           graphql: 'GraphiQL.GraphQL',
           react: 'React',
           'react-dom': 'ReactDOM',
diff --git a/yarn.lock b/yarn.lock
index c0ad3a33fcb..be49c60a5ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7373,20 +7373,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3.0.8:
+copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107"
   integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==
   dependencies:
     toggle-selection "^1.0.6"
 
-copy-to-clipboard@^3.2.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 copy@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/copy/-/copy-0.3.2.tgz#870b871d02a599b3c6ef27bc5b3d4c4102261909"
@@ -15811,12 +15804,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.4:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
-
-regenerator-runtime@^0.13.9:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==

From 4ad8fa9ecc6f70cea5e9af1c2c7d2e68b7fb0f8d Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 14 Oct 2022 11:23:03 +0200
Subject: [PATCH 11/17] review comments no2

Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
---
 .../graphiql-plugin-code-exporter/README.md   | 51 ++++++++++++++++++-
 .../examples/index.html                       |  2 +-
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
index 278db2e3248..7d5234d17fe 100644
--- a/packages/graphiql-plugin-code-exporter/README.md
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -1,6 +1,6 @@
 # GraphiQL Code Exporter Plugin
 
-This package provides a plugin that integrates the [`GraphiQL Code Exporter`](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
+This package provides a plugin that integrates the [GraphiQL Code Exporter](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
 
 ## Install
 
@@ -18,6 +18,8 @@ npm i -S react react-dom graphql
 
 ## Usage
 
+See [GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for all details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).
+
 ```jsx
 import { useCodeExporterPlugin } from '@graphiql/plugin-code-exporter';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
@@ -31,7 +33,52 @@ const fetcher = createGraphiQLFetcher({
   url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
 });
 
-const snippets = [`your-custom-snippets`];
+/*
+Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details
+*/
+
+const removeQueryName = query =>
+  query.replace(
+    /^[^{(]+([{(])/,
+    (_match, openingCurlyBracketsOrParenthesis) =>
+      `query ${openingCurlyBracketsOrParenthesis}`,
+  );
+
+const getQuery = (arg, spaceCount) => {
+  const { operationDataList } = arg;
+  const { query } = operationDataList[0];
+  const anonymousQuery = removeQueryName(query);
+  return (
+    ` `.repeat(spaceCount) +
+    anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
+  );
+};
+
+const exampleSnippetOne = {
+  name: `Example One`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+`,
+};
+
+const exampleSnippetTwo = {
+  name: `Example Two`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `import { graphql } from 'graphql'
+
+export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+`,
+};
+
+const snippets = [exampleSnippetOne, exampleSnippetTwo];
 
 function GraphiQLWithExplorer() {
   const [query, setQuery] = useState(DEFAULT_QUERY);
diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
index 65abecd4699..b62eea39463 100644
--- a/packages/graphiql-plugin-code-exporter/examples/index.html
+++ b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -46,7 +46,7 @@
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/graphiql-plugin-explorer.umd.js"
+      src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/graphiql-plugin-code-exporter.umd.js"
     ></script>
 
     <script>

From 2e86a760553c88d1c9931cdb7d4abc09eeacea87 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 14 Oct 2022 11:52:12 +0200
Subject: [PATCH 12/17] css nesting

---
 .../package.json                              |   1 +
 .../postcss.config.js                         |   3 +
 .../src/index.css                             | 228 ++++++++----------
 3 files changed, 108 insertions(+), 124 deletions(-)
 create mode 100644 packages/graphiql-plugin-code-exporter/postcss.config.js

diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
index 9c5b7a0c1f1..34ce71c7ea2 100644
--- a/packages/graphiql-plugin-code-exporter/package.json
+++ b/packages/graphiql-plugin-code-exporter/package.json
@@ -39,6 +39,7 @@
   "devDependencies": {
     "@graphiql/react": "^0.13.0",
     "@vitejs/plugin-react": "^1.3.0",
+    "postcss-nesting": "^10.1.7",
     "typescript": "^4.6.3",
     "vite": "^2.9.13"
   }
diff --git a/packages/graphiql-plugin-code-exporter/postcss.config.js b/packages/graphiql-plugin-code-exporter/postcss.config.js
new file mode 100644
index 00000000000..1ab3f9d65bf
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-nesting')],
+};
diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
index 22d9dd65a05..008e4d7d62e 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.css
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -2,128 +2,108 @@
   min-width: unset !important;
   position: relative;
   padding: var(--px-16) 0;
-}
-
-.graphiql-code-exporter > div {
-  font-family: var(--font-family) !important;
-  padding: 0 !important;
-  font-size: var(--font-size-body) !important;
-}
-
-.graphiql-code-exporter > div:first-of-type > div {
-  padding: 0 !important;
-}
-
-.graphiql-code-exporter button.toolbar-button {
-  display: block;
-  height: var(--toolbar-width) !important;
-  width: var(--toolbar-width) !important;
-  border-radius: var(--border-radius-4) !important;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: unset !important;
-  left: unset !important;
-  margin-top: unset !important;
-  top: var(--px-16);
-  right: 0;
-  justify-content: center;
-  align-items: center;
-  background-color: unset !important;
-}
-
-.graphiql-code-exporter button.toolbar-button svg {
-  fill: hsla(var(--color-neutral), var(--alpha-tertiary));
-}
-
-.graphiql-code-exporter > div:first-of-type {
-  display: flex;
-  flex-direction: column;
-  gap: var(--px-16);
-}
-
-.graphiql-code-exporter > div:first-of-type > div:first-of-type {
-  display: flex;
-  flex-direction: row;
-  gap: var(--px-16);
-}
-
-.graphiql-code-exporter
-  > div:first-of-type
-  > div:last-of-type
-  > div:first-of-type {
-  color: hsla(var(--color-neutral), var(--alpha-secondary)) !important;
-  font-variant: unset !important;
-  text-transform: unset !important;
-  font-weight: unset !important;
-  margin-bottom: var(--px-12);
-}
-
-.graphiql-code-exporter > div:last-of-type {
-  border-top: none !important;
-}
-
-.graphiql-code-exporter > div:last-of-type {
-  display: flex;
-  flex: 1;
-  margin-top: var(--px-24) !important;
-}
-
-.graphiql-code-exporter > div:last-of-type > div {
-  position: relative;
-  min-height: 600px;
-  width: calc(100% - 2 * var(--px-16));
-}
-
-.graphiql-code-exporter .toolbar-button:hover {
-  background-color: hsla(
-    var(--color-neutral),
-    var(--alpha-background-light)
-  ) !important;
-}
-
-.graphiql-code-exporter .toolbar-menu.toolbar-button {
-  position: relative;
-  cursor: pointer;
-  text-decoration: none;
-  padding: var(--px-8) var(--px-12);
-  color: hsla(var(--color-neutral), 1) !important;
-  border-radius: var(--border-radius-4) !important;
-}
-
-.graphiql-code-exporter .toolbar-menu-items {
-  background-color: hsl(var(--color-base)) !important;
-  box-shadow: var(--popover-box-shadow) !important;
-  margin: 0;
-  padding: var(--px-8) 0;
-  position: absolute;
-  z-index: 100;
-  margin-top: var(--px-8);
-  visibility: hidden;
-  left: 0;
-}
-
-.graphiql-code-exporter .toolbar-menu-items.open {
-  visibility: visible;
-}
-
-.graphiql-code-exporter .toolbar-menu-items > li {
-  cursor: pointer;
-  display: block;
-  margin: none;
-  max-width: 300px;
-  overflow: hidden;
-  padding: 2px 20px 4px 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: hsla(var(--color-neutral), 1) !important;
-}
-
-.graphiql-code-exporter .toolbar-menu-items > li:hover {
-  color: hsla(var(--color-primary), 1) !important;
-}
-
-.graphiql-code-exporter .CodeMirror {
-  box-shadow: var(--popover-box-shadow);
-  border-radius: calc(var(--border-radius-12));
-  padding: var(--px-16);
+  & > div {
+    font-family: var(--font-family) !important;
+    padding: 0 !important;
+    font-size: var(--font-size-body) !important;
+  }
+  & > div:first-of-type {
+    display: flex;
+    flex-direction: column;
+    gap: var(--px-16);
+    & > div {
+      padding: 0 !important;
+    }
+    & > div:first-of-type {
+      display: flex;
+      flex-direction: row;
+      gap: var(--px-16);
+    }
+    & > div:last-of-type {
+      & > div:first-of-type {
+        color: hsla(var(--color-neutral), var(--alpha-secondary)) !important;
+        font-variant: unset !important;
+        text-transform: unset !important;
+        font-weight: unset !important;
+        margin-bottom: var(--px-12);
+      }
+    }
+  }
+  & button.toolbar-button {
+    display: block;
+    height: var(--toolbar-width) !important;
+    width: var(--toolbar-width) !important;
+    border-radius: var(--border-radius-4) !important;
+    cursor: pointer;
+    display: inline-flex;
+    font-size: unset !important;
+    left: unset !important;
+    margin-top: unset !important;
+    top: var(--px-16);
+    right: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: unset !important;
+    & svg {
+      fill: hsla(var(--color-neutral), var(--alpha-tertiary));
+    }
+  }
+  & > div:last-of-type {
+    border-top: none !important;
+    display: flex;
+    flex: 1;
+    margin-top: var(--px-24) !important;
+    & > div {
+      position: relative;
+      min-height: 600px;
+      width: calc(100% - 2 * var(--px-16));
+    }
+  }
+  & .toolbar-menu.toolbar-button {
+    position: relative;
+    cursor: pointer;
+    text-decoration: none;
+    padding: var(--px-8) var(--px-12);
+    color: hsla(var(--color-neutral), 1) !important;
+    border-radius: var(--border-radius-4) !important;
+    &:hover {
+      background-color: hsla(
+        var(--color-neutral),
+        var(--alpha-background-light)
+      ) !important;
+    }
+  }
+  & .toolbar-menu-items {
+    background-color: hsl(var(--color-base)) !important;
+    box-shadow: var(--popover-box-shadow) !important;
+    margin: 0;
+    padding: var(--px-8) 0;
+    position: absolute;
+    z-index: 100;
+    margin-top: var(--px-8);
+    visibility: hidden;
+    left: 0;
+    & .open {
+      visibility: visible;
+    }
+    & > li {
+      cursor: pointer;
+      display: block;
+      margin: none;
+      max-width: 300px;
+      overflow: hidden;
+      padding: 2px 20px 4px 11px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: hsla(var(--color-neutral), 1) !important;
+      &:hover {
+        color: hsla(var(--color-primary), 1) !important;
+      }
+    }
+  }
+  & .CodeMirror {
+    box-shadow: var(--popover-box-shadow);
+    border-radius: calc(var(--border-radius-12));
+    padding: var(--px-16);
+  }
 }

From 72c39419d96e8fd4702c880248a1151d2cd0c9a6 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 14 Oct 2022 11:52:25 +0200
Subject: [PATCH 13/17] fix default codeMirrorTheme issue

---
 examples/graphiql-webpack/src/index.jsx                    | 1 -
 packages/graphiql-plugin-code-exporter/examples/index.html | 1 -
 .../src/graphiql-code-exporter.d.ts                        | 2 +-
 packages/graphiql-plugin-code-exporter/src/index.tsx       | 7 ++++++-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index 09abed0f94b..575c3645788 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -62,7 +62,6 @@ const App = () => {
   const exporterPlugin = useExporterPlugin({
     query,
     snippets,
-    codeMirrorTheme: 'graphiql',
   });
 
   return (
diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
index b62eea39463..67475959084 100644
--- a/packages/graphiql-plugin-code-exporter/examples/index.html
+++ b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -105,7 +105,6 @@
         var exporterPlugin = GraphiQLPluginCodeExporter.useExporterPlugin({
           query: query,
           snippets,
-          codeMirrorTheme: 'graphiql',
         });
         return React.createElement(GraphiQL, {
           fetcher: fetcher,
diff --git a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
index 35601315029..29264e30216 100644
--- a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
+++ b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
@@ -41,7 +41,7 @@ declare module 'graphiql-code-exporter' {
   export type GraphiQLCodeExporterProps = {
     query: string;
     snippets: Array<Snippet>;
-    codeMirrorTheme: string;
+    codeMirrorTheme?: string;
     variables?: string;
     context?: Record<string, any>;
     schema?: GraphQLSchema | null | undefined;
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
index 3bee791848f..7eadddbfd31 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.tsx
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -28,7 +28,12 @@ export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
           />
         </svg>
       ),
-      content: () => <GraphiQLCodeExporter {...propsRef.current} />,
+      content: () => (
+        <GraphiQLCodeExporter
+          codeMirrorTheme="graphiql"
+          {...propsRef.current}
+        />
+      ),
     }),
     [],
   );

From 92ecd2cb751e6ac0b39a303e7ea4f067c01c65a4 Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Fri, 14 Oct 2022 13:19:27 +0200
Subject: [PATCH 14/17] fix dropdown styles

---
 .../src/index.css                             | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
index 008e4d7d62e..318313315d0 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.css
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -75,29 +75,41 @@
   }
   & .toolbar-menu-items {
     background-color: hsl(var(--color-base)) !important;
+    border: var(--popover-border);
+    border-radius: var(--border-radius-8);
     box-shadow: var(--popover-box-shadow) !important;
-    margin: 0;
-    padding: var(--px-8) 0;
+    padding: var(--px-4);
+    max-width: 250px;
+    font-size: inherit;
+    display: block;
+    white-space: nowrap;
+    outline: none;
     position: absolute;
     z-index: 100;
     margin-top: var(--px-8);
     visibility: hidden;
     left: 0;
-    & .open {
+    &.open {
       visibility: visible;
     }
     & > li {
       cursor: pointer;
       display: block;
-      margin: none;
-      max-width: 300px;
+      color: inherit;
+      font: inherit;
+      text-decoration: initial;
+      border-radius: var(--border-radius-4);
+      margin: var(--px-4);
       overflow: hidden;
-      padding: 2px 20px 4px 11px;
+      padding: var(--px-6) var(--px-8);
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: hsla(var(--color-neutral), 1) !important;
       &:hover {
-        color: hsla(var(--color-primary), 1) !important;
+        color: inherit;
+        background-color: hsla(
+          var(--color-neutral),
+          var(--alpha-background-light)
+        );
       }
     }
   }

From f9f8b78a8fc59e939053ad7df1d19151854d80db Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Fri, 28 Oct 2022 15:41:34 +0200
Subject: [PATCH 15/17] add doc explorer style resets

---
 .../src/index.css                             | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
index 318313315d0..3f9d6e8106e 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.css
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -1,3 +1,22 @@
+.docExplorerWrap {
+  height: unset !important;
+  min-width: unset !important;
+  width: unset !important;
+}
+
+.doc-explorer-title {
+  font-size: var(--font-size-h2);
+  font-weight: var(--font-weight-medium);
+}
+
+.doc-explorer-rhs {
+  display: none;
+}
+
+.doc-explorer-contents {
+  border-top: none !important;
+}
+
 .graphiql-code-exporter {
   min-width: unset !important;
   position: relative;

From 83dfbc7b030cc1843946e7a29da0b6c341c5f3be Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Fri, 28 Oct 2022 15:47:33 +0200
Subject: [PATCH 16/17] adjust width of plugin pane and code exporter editor

---
 packages/graphiql-plugin-code-exporter/src/index.css | 2 +-
 packages/graphiql/src/style.css                      | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
index 3f9d6e8106e..c139a05d582 100644
--- a/packages/graphiql-plugin-code-exporter/src/index.css
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -75,7 +75,7 @@
     & > div {
       position: relative;
       min-height: 600px;
-      width: calc(100% - 2 * var(--px-16));
+      width: 100%;
     }
   }
   & .toolbar-menu.toolbar-button {
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 9baf3c35ea6..b1f4cd79c31 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -228,7 +228,6 @@ button.graphiql-tab-add > svg {
   border-left: 1px solid
     hsla(var(--color-neutral), var(--alpha-background-heavy));
   flex: 1;
-  max-width: calc(100% - 2 * var(--px-16));
   overflow-y: auto;
   padding: var(--px-16);
 }

From 56e56f13b6d23c6514c0d7c3c5311b4363a7e8da Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Fri, 28 Oct 2022 15:48:34 +0200
Subject: [PATCH 17/17] add changesets

---
 .changeset/dirty-melons-burn.md | 5 +++++
 .changeset/real-boxes-sleep.md  | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/dirty-melons-burn.md
 create mode 100644 .changeset/real-boxes-sleep.md

diff --git a/.changeset/dirty-melons-burn.md b/.changeset/dirty-melons-burn.md
new file mode 100644
index 00000000000..943e06fdacf
--- /dev/null
+++ b/.changeset/dirty-melons-burn.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+Fix the width of the plugin pane
diff --git a/.changeset/real-boxes-sleep.md b/.changeset/real-boxes-sleep.md
new file mode 100644
index 00000000000..2ad4a3f8e05
--- /dev/null
+++ b/.changeset/real-boxes-sleep.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-code-exporter': minor
+---
+
+Add code exported plugin