From 58b2f4894f320b4b6a0ea093c4fd9e5937e6e0fe Mon Sep 17 00:00:00 2001
From: Joe Fusco <joe.fusco@wpengine.com>
Date: Wed, 8 Nov 2023 20:06:58 -0500
Subject: [PATCH] Initial component

Signed-off-by: Joe Fusco <joe.fusco@wpengine.com>
---
 components/DocsSidebarNavigation.jsx   |   6 +-
 components/DraggablePaneContainer.jsx  |  36 ++
 components/FeatureTabsLeft.jsx         |   6 +-
 components/MiniGraphQL.jsx             | 128 ++++++
 components/Prose.jsx                   |   2 +-
 components/icons/CheckIcon.jsx         |  12 +
 components/icons/PlayIcon.jsx          |  12 +
 components/ui/navigation-menu.tsx      |   2 +-
 package-lock.json                      | 574 ++++++++++++++++++++++++-
 package.json                           |   4 +
 tailwind.config.js                     |   5 +-
 wp-blocks/AcfFieldTypeSettingsBlock.js |   5 +-
 wp-blocks/AcfGraphqlQuery.js           |  33 ++
 wp-blocks/CoreHeading.js               |  10 +-
 wp-blocks/index.js                     |   6 +-
 wp-templates/single-field_type.js      |   5 +-
 16 files changed, 824 insertions(+), 22 deletions(-)
 create mode 100644 components/DraggablePaneContainer.jsx
 create mode 100644 components/MiniGraphQL.jsx
 create mode 100644 components/icons/CheckIcon.jsx
 create mode 100644 components/icons/PlayIcon.jsx
 create mode 100644 wp-blocks/AcfGraphqlQuery.js

diff --git a/components/DocsSidebarNavigation.jsx b/components/DocsSidebarNavigation.jsx
index 29839b7..2ae8501 100644
--- a/components/DocsSidebarNavigation.jsx
+++ b/components/DocsSidebarNavigation.jsx
@@ -51,14 +51,14 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
           <li key={section.title}>
             <div className="flex items-center">
               <Link href={section.href} className='block w-full'>
-                <h2 className="cursor-pointer font-display font-medium text-slate-900 dark:text-white hover:text-slate-600 dark:hover:text-gray-300">
+                <h2 className="cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
                   {section.title}
                 </h2>
               </Link>
-              <div className="inline-flex items-center justify-center rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800 mr-0 ml-auto">
+              <div className="ml-auto mr-0 inline-flex items-center justify-center rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
                 <button
                   onClick={() => toggleSection(section.title)}
-                  className="text-slate-900 transition-transform duration-300 dark:text-white p-2"
+                  className="p-2 text-slate-900 transition-transform duration-300 dark:text-white"
                 >
                   <svg
                     className={clsx(
diff --git a/components/DraggablePaneContainer.jsx b/components/DraggablePaneContainer.jsx
new file mode 100644
index 0000000..343c4b9
--- /dev/null
+++ b/components/DraggablePaneContainer.jsx
@@ -0,0 +1,36 @@
+import { Allotment } from "allotment";
+import PropTypes from "prop-types";
+import React from "react";
+import "allotment/dist/style.css";
+
+// DraggablePaneContainer: A component that uses Allotment to create a resizable pane container.
+// Fixed height is set on the container wrapping the Allotment component.
+const DraggablePaneContainer = ({ children, height = '500px' }) => {
+  // Ensure children is an array with two elements for two panes.
+  if (children.length !== 2) {
+    throw new Error("DraggablePaneContainer requires exactly two children.");
+  }
+
+  const containerStyle = { height };
+  const innerPaneStyle = { overflowY: "auto", height: "100%" };
+
+  return (
+    <div style={containerStyle}>
+      <Allotment>
+        <Allotment.Pane>
+          <div style={innerPaneStyle}>{children[0]}</div>
+         </Allotment.Pane>
+        <Allotment.Pane>
+          <div style={innerPaneStyle}>{children[1]}</div>
+        </Allotment.Pane>
+      </Allotment>
+    </div>
+  );
+};
+
+DraggablePaneContainer.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  height: PropTypes.string,
+};
+
+export default DraggablePaneContainer;
diff --git a/components/FeatureTabsLeft.jsx b/components/FeatureTabsLeft.jsx
index 51090d4..a1649c9 100644
--- a/components/FeatureTabsLeft.jsx
+++ b/components/FeatureTabsLeft.jsx
@@ -59,7 +59,7 @@ const FeatureTabsLeft = (layout) => {
                         'group relative my-2 rounded-full px-4  py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
                         selectedIndex === featureIndex
                           ? 'bg-slate-600 group-hover:text-white dark:bg-slate-800 lg:ring-1 lg:ring-inset lg:ring-white/10 lg:dark:bg-slate-700 '
-                          : 'bg-gray-100 hover:bg-slate-600 group-hover:text-white dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
+                          : 'bg-gray-100 group-hover:text-white hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
                       )}
                     >
                       <h3>
@@ -67,8 +67,8 @@ const FeatureTabsLeft = (layout) => {
                           className={clsx(
                             'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
                             selectedIndex === featureIndex
-                              ? 'text-white hover:text-white group-hover:text-white dark:text-slate-200 dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
-                              : 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200',
+                              ? 'text-white group-hover:text-white hover:text-white dark:text-slate-200 dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
+                              : 'text-slate-800 group-hover:text-white hover:text-white dark:hover:text-slate-200',
                           )}
                         >
                           <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
diff --git a/components/MiniGraphQL.jsx b/components/MiniGraphQL.jsx
new file mode 100644
index 0000000..7faf39e
--- /dev/null
+++ b/components/MiniGraphQL.jsx
@@ -0,0 +1,128 @@
+import hljs from 'highlight.js/lib/core'
+import graphql from 'highlight.js/lib/languages/graphql'
+import json from 'highlight.js/lib/languages/json'
+import React, { useState, useEffect, useRef } from 'react'
+
+import 'highlight.js/styles/atom-one-dark.css'
+import DraggablePaneContainer from './DraggablePaneContainer'
+
+// Register GraphQL and JSON for syntax highlighting
+hljs.registerLanguage('graphql', graphql)
+hljs.registerLanguage('json', json)
+
+export function MiniGraphQL({ initialQuery, initialVariables, endpoint }) {
+  const [query, setQuery] = useState(initialQuery || '')
+  const [variables, setVariables] = useState(initialVariables || {})
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const queryRef = useRef(null)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(highlightQuery, []) // Highlight query on mount
+
+  function highlightQuery() {
+    if (query && queryRef.current) {
+      queryRef.current.innerHTML = hljs.highlight(query, {
+        language: 'graphql',
+      }).value
+    }
+  }
+
+  function resetForm() {
+    setQuery(initialQuery || '') // Reset query to initial
+    setVariables(initialVariables || {}) // Reset variables to initial
+    setData(null) // Clear fetched data
+    setError(null) // Clear any errors
+  }
+
+  async function fetchData() {
+    if (loading) return // Prevent fetching if already loading
+
+    setLoading(true)
+    setError(null)
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query, variables }),
+      })
+
+      const result = await response.json()
+      if (response.ok && result.data) {
+        setData(result.data)
+      } else {
+        setError(
+          new Error(
+            result.errors?.map((e) => e.message).join('\n') ||
+              'Error fetching data',
+          ),
+        )
+      }
+    } catch (e) {
+      setError(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function handleQueryChange() {
+    if (queryRef.current) {
+      setQuery(queryRef.current.textContent)
+      resetForm() // Reset the form when query changes
+    }
+  }
+
+  function handleBlur() {
+    highlightQuery() // Re-highlight the query on blur
+  }
+
+  function handleRunQuery() {
+    if (data) {
+      resetForm() // Act as reset if data is present
+    } else {
+      fetchData() // Fetch data if no data present
+    }
+  }
+
+  return (
+    <div className="mini-graphql flex w-full flex-col">
+      <DraggablePaneContainer>
+        <div className="query-panel h-full flex-1 overflow-auto">
+          <pre
+            ref={queryRef}
+            className="not-prose graphql-query content-editable overflow-auto p-1 dark:bg-gray-800 dark:text-white text-sm"
+            contentEditable={!loading}
+            onInput={handleQueryChange}
+            onBlur={handleBlur}
+            suppressContentEditableWarning={true}
+          />
+        </div>
+        <div className="response-panel h-full flex-1 overflow-auto">
+          <div className="data-panel h-full">
+            {error && (
+              <pre className="not-prose p-1 text-red-500 text-sm">{error.message}</pre>
+            )}
+            {data && (
+              <pre className="not-prose json-data h-full overflow-auto p-1 dark:bg-gray-800 dark:text-white text-sm">
+                <code className="whitespace-pre-wrap">
+                  {JSON.stringify(data, null, 2)}
+                </code>
+              </pre>
+            )}
+          </div>
+        </div>
+      </DraggablePaneContainer>
+      <div className="button-panel flex py-4">
+        <button
+          onClick={handleRunQuery}
+          disabled={loading}
+          className="run-query-button rounded bg-blue-500 px-4 py-2 text-sm text-white font-semibold hover:bg-blue-700 disabled:bg-blue-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:disabled:bg-gray-500 lg:text-base"
+        >
+          {loading ? 'Loading...' : data ? 'Reset' : 'Run Query'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/Prose.jsx b/components/Prose.jsx
index 3b39bc7..12f8045 100644
--- a/components/Prose.jsx
+++ b/components/Prose.jsx
@@ -19,7 +19,7 @@ export function Prose({ as: Component = 'div', className, ...props }) {
         // hr
         'dark:prose-hr:border-slate-800',
         // code
-        'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none dark:prose-code:border-gray-700 dark:prose-code:bg-gray-800',
+        // 'prose-code:rounded-md prose-code:border prose-code:border-solid prose-code:border-gray-200 prose-code:bg-gray-100 prose-code:px-2.5 prose-code:py-0.5 prose-code:tracking-wide prose-code:before:content-none prose-code:after:content-none dark:prose-code:border-gray-700 dark:prose-code:bg-gray-800',
       )}
       {...props}
     />
diff --git a/components/icons/CheckIcon.jsx b/components/icons/CheckIcon.jsx
new file mode 100644
index 0000000..99ae268
--- /dev/null
+++ b/components/icons/CheckIcon.jsx
@@ -0,0 +1,12 @@
+export function CheckIcon() {
+    return (
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+            fill="currentColor"
+        />
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/components/icons/PlayIcon.jsx b/components/icons/PlayIcon.jsx
new file mode 100644
index 0000000..713441c
--- /dev/null
+++ b/components/icons/PlayIcon.jsx
@@ -0,0 +1,12 @@
+export function PlayIcon() {
+    return (
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M3.24182 2.32181C3.3919 2.23132 3.5784 2.22601 3.73338 2.30781L12.7334 7.05781C12.8974 7.14436 13 7.31457 13 7.5C13 7.68543 12.8974 7.85564 12.7334 7.94219L3.73338 12.6922C3.5784 12.774 3.3919 12.7687 3.24182 12.6782C3.09175 12.5877 3 12.4252 3 12.25V2.75C3 2.57476 3.09175 2.4123 3.24182 2.32181ZM4 3.57925V11.4207L11.4288 7.5L4 3.57925Z"
+                fill="currentColor"
+            />
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index d45d53d..b0e11ac 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50',
 )
 
 const NavigationMenuTrigger = React.forwardRef<
diff --git a/package-lock.json b/package-lock.json
index 79a3c33..0c94daf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "@tailwindcss/typography": "^0.5.8",
         "acorn": "^8.8.1",
         "algoliasearch": "^4.14.2",
+        "allotment": "^1.19.3",
         "autoprefixer": "^10.4.7",
         "class-variance-authority": "^0.6.0",
         "clsx": "^1.2.1",
@@ -38,7 +39,9 @@
         "flexsearch": "^0.7.31",
         "focus-visible": "^5.2.0",
         "framer-motion": "7.8.1",
+        "graphiql": "^3.0.8",
         "graphql": "^16.6.0",
+        "highlight.js": "^11.9.0",
         "lucide-react": "^0.216.0",
         "mdast-util-to-string": "^3.1.0",
         "mdx-annotations": "^0.1.1",
@@ -57,6 +60,7 @@
         "shiki": "^0.11.1",
         "simple-functional-loader": "^1.2.1",
         "tailwind-merge": "^1.12.0",
+        "tailwind-scrollbar": "^3.0.5",
         "tailwindcss": "^3.3.1",
         "tailwindcss-animate": "^1.0.5",
         "unified": "^10.1.2",
@@ -2114,6 +2118,37 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@codemirror/language": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.0.0.tgz",
+      "integrity": "sha512-rtjk5ifyMzOna1c7PBu7J1VCt0PvA5wy3o8eMVnxMKb7z8KA7JFecvD04dSn14vj/bBaAbqRsGed5OjtofEnLA==",
+      "peer": true,
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.1.tgz",
+      "integrity": "sha512-88e4HhMtKJyw6fKprGaN/yZfiaoGYOi2nM45YCUC6R/kex9sxFWBDGatS1vk4lMgnWmdIIB9tk8Gj1LmL8YfvA==",
+      "peer": true
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.21.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.21.4.tgz",
+      "integrity": "sha512-WKVZ7nvN0lwWPfAf05WxWqTpwjC8YN3q5goj3CsSig7//DD81LULgOx3nBegqpqP0iygBqRmW8z0KSc2QTAdAg==",
+      "peer": true,
+      "dependencies": {
+        "@codemirror/state": "^6.1.4",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -2527,6 +2562,84 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "node_modules/@graphiql/react": {
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@graphiql/react/-/react-0.20.1.tgz",
+      "integrity": "sha512-BW9XwMui3hKNtOOG+kLl7cjQ3HP/cOWpqbaATDlwOmXubQ/Lo6OghthWZKLWPOk4sa0zMk+FX37UoTCVoEL0uA==",
+      "dependencies": {
+        "@graphiql/toolkit": "^0.9.1",
+        "@headlessui/react": "^1.7.15",
+        "@radix-ui/react-dialog": "^1.0.4",
+        "@radix-ui/react-dropdown-menu": "^2.0.5",
+        "@radix-ui/react-tooltip": "^1.0.6",
+        "@radix-ui/react-visually-hidden": "^1.0.3",
+        "@types/codemirror": "^5.60.8",
+        "clsx": "^1.2.1",
+        "codemirror": "^5.65.3",
+        "codemirror-graphql": "^2.0.10",
+        "copy-to-clipboard": "^3.2.0",
+        "framer-motion": "^6.5.1",
+        "graphql-language-service": "^5.2.0",
+        "markdown-it": "^12.2.0",
+        "set-value": "^4.1.0"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@graphiql/toolkit": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@graphiql/toolkit/-/toolkit-0.9.1.tgz",
+      "integrity": "sha512-LVt9pdk0830so50ZnU2Znb2rclcoWznG8r8asqAENzV0U1FM1kuY0sdPpc/rBc9MmmNgnB6A+WZzDhq6dbhTHA==",
+      "dependencies": {
+        "@n1ru4l/push-pull-async-iterable-iterator": "^3.1.0",
+        "meros": "^1.1.4"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0",
+        "graphql-ws": ">= 4.5.0"
+      },
+      "peerDependenciesMeta": {
+        "graphql-ws": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@graphql-typed-document-node/core": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
@@ -3405,6 +3518,35 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.0.tgz",
+      "integrity": "sha512-XPIN3cYDXsoJI/oDWoR2tD++juVrhgIago9xyKhZ7IhGlzdDM9QgC8D8saKNCz5pindGcznFr2HBSsEQSWnSjw==",
+      "peer": true
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
+      "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+      "peer": true,
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.13.tgz",
+      "integrity": "sha512-RLAbau/4uSzKgIKj96mI5WUtG1qtiR0Frn0Ei9zhPj8YOkHM+1Bb8SgdVvmR/aWJCFIzjo2KFnDiRZ75Xf5NdQ==",
+      "peer": true,
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@markdoc/markdoc": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/@markdoc/markdoc/-/markdoc-0.1.7.tgz",
@@ -3544,6 +3686,14 @@
         "tslib": "^2.3.1"
       }
     },
+    "node_modules/@n1ru4l/push-pull-async-iterable-iterator": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@n1ru4l/push-pull-async-iterable-iterator/-/push-pull-async-iterable-iterator-3.2.0.tgz",
+      "integrity": "sha512-3fkKj25kEjsfObL6IlKPAlHYPq/oYwUkkQ03zsTTiDjD7vg/RxjdiLeCydqtxHZP0JgsXL3D/X5oAkMGzuUp/Q==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.5.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
@@ -3946,6 +4096,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -3990,6 +4176,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz",
+      "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-menu": "2.0.6",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
@@ -4081,6 +4296,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz",
+      "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-navigation-menu": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz",
@@ -4358,6 +4613,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+      "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -4642,6 +4931,14 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.12",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.12.tgz",
+      "integrity": "sha512-SFSj5Tb/mtQoVgaltsipdRGG1PkcFu/L0OXPNBGCXYUQtwsNoAGRNNHOTl1jYcQUcEI77EiUfk94bgETTbSo/A==",
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.10.tgz",
@@ -4812,6 +5109,14 @@
       "integrity": "sha512-g7CK9nHdwjK2n0ymT2CW698FuWJRIx+RP6embAzZ2Qi8/ilIrA1Imt2LVSeHUzKvpoi7BhmmQcXz95eS0f2JXw==",
       "dev": true
     },
+    "node_modules/@types/tern": {
+      "version": "0.23.6",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.6.tgz",
+      "integrity": "sha512-ntalN+F2msUwz7/OCCADN4FwxtIGqF4Hqwxd15yAn0VOUozj1VaIrH4Prh95N8y69K3bQpHFVGwTJDZC4oRtvA==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.9.tgz",
@@ -5467,6 +5772,23 @@
         "@algolia/transporter": "4.20.0"
       }
     },
+    "node_modules/allotment": {
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/allotment/-/allotment-1.19.3.tgz",
+      "integrity": "sha512-StPCZLGPNG9KhXeNCrqTkIK09s7D6+8n0w754SRY8PUvDXFLLovrFFo4ubd82fytRWS5bFntsWA5SX4sODxuiw==",
+      "dependencies": {
+        "classnames": "^2.3.0",
+        "eventemitter3": "^5.0.0",
+        "lodash.clamp": "^4.0.0",
+        "lodash.debounce": "^4.0.0",
+        "lodash.isequal": "^4.5.0",
+        "use-resize-observer": "^9.0.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -6493,6 +6815,33 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/codemirror": {
+      "version": "5.65.15",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.15.tgz",
+      "integrity": "sha512-YC4EHbbwQeubZzxLl5G4nlbLc1T21QTrKGaOal/Pkm9dVDMZXMH7+ieSPEOZCtO9I68i8/oteJKOxzHC2zR+0g=="
+    },
+    "node_modules/codemirror-graphql": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/codemirror-graphql/-/codemirror-graphql-2.0.10.tgz",
+      "integrity": "sha512-rC9NxibCsSzWtCQjHLfwKCkyYdGv2BT/BCgyDoKPrc/e7aGiyLyeT0fB60d+0imwlvhX3lIHncl6JMz2YxQ/jg==",
+      "dependencies": {
+        "@types/codemirror": "^0.0.90",
+        "graphql-language-service": "5.2.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "6.0.0",
+        "codemirror": "^5.65.3",
+        "graphql": "^15.5.0 || ^16.0.0"
+      }
+    },
+    "node_modules/codemirror-graphql/node_modules/@types/codemirror": {
+      "version": "0.0.90",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.90.tgz",
+      "integrity": "sha512-8Z9+tSg27NPRGubbUPUCrt5DDG/OWzLph5BvcDykwR5D7RyZh5mhHG0uS1ePKV1YFCA+/cwc4Ey2AJAEFfV3IA==",
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
@@ -6609,6 +6958,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.33.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.33.1.tgz",
@@ -7222,6 +7579,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/envinfo": {
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.10.0.tgz",
@@ -8238,6 +8603,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -8532,6 +8902,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/fs-extra": {
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
@@ -8826,6 +9204,22 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/graphiql": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/graphiql/-/graphiql-3.0.8.tgz",
+      "integrity": "sha512-hp5t6ob2rGLUsjOTEGbzARhWFDtWk7A32BUv2Lm5tptqx5J0Hj2xiz4GdplTALY1T42k25lZloLzl2q9U5FD7Q==",
+      "dependencies": {
+        "@graphiql/react": "^0.20.1",
+        "@graphiql/toolkit": "^0.9.1",
+        "graphql-language-service": "^5.2.0",
+        "markdown-it": "^12.2.0"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/graphql": {
       "version": "16.8.1",
       "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
@@ -8834,6 +9228,21 @@
         "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
       }
     },
+    "node_modules/graphql-language-service": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/graphql-language-service/-/graphql-language-service-5.2.0.tgz",
+      "integrity": "sha512-o/ZgTS0pBxWm3hSF4+6GwiV1//DxzoLWEbS38+jqpzzy1d/QXBidwQuVYTOksclbtOJZ3KR/tZ8fi/tI6VpVMg==",
+      "dependencies": {
+        "nullthrows": "^1.0.0",
+        "vscode-languageserver-types": "^3.17.1"
+      },
+      "bin": {
+        "graphql": "dist/temp-bin.js"
+      },
+      "peerDependencies": {
+        "graphql": "^15.5.0 || ^16.0.0"
+      }
+    },
     "node_modules/graphql-tag": {
       "version": "2.12.6",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz",
@@ -9111,6 +9520,14 @@
       "resolved": "https://registry.npmjs.org/highlight-words-core/-/highlight-words-core-1.2.2.tgz",
       "integrity": "sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg=="
     },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -9597,6 +10014,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-primitive": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
+      "integrity": "sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-reference": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
@@ -11776,6 +12201,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/linkify-it": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.3.tgz",
+      "integrity": "sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -11823,11 +12256,20 @@
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
       "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="
     },
+    "node_modules/lodash.clamp": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.clamp/-/lodash.clamp-4.0.3.tgz",
+      "integrity": "sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -11950,6 +12392,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "12.3.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz",
+      "integrity": "sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~2.1.0",
+        "linkify-it": "^3.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -12233,6 +12690,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "node_modules/mdx-annotations": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/mdx-annotations/-/mdx-annotations-0.1.3.tgz",
@@ -12261,6 +12723,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meros": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/meros/-/meros-1.3.0.tgz",
+      "integrity": "sha512-2BNGOimxEz5hmjUG2FwoxCt5HN7BXdaWyFqEwxPTrJzVdABtrL4TiHTcsWSFAxPQ/tOnEaQEJh3qWq71QRMY+w==",
+      "engines": {
+        "node": ">=13"
+      },
+      "peerDependencies": {
+        "@types/node": ">=13"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/micromark": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.2.0.tgz",
@@ -13168,6 +13646,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/nullthrows": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
+      "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -13622,6 +14105,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -14728,6 +15222,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-value": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-4.1.0.tgz",
+      "integrity": "sha512-zTEg4HL0RwVrqcWs3ztF+x1vkxfm0lP+MQQFPiMJTKVceBwEV0A569Ou8l9IYQG8jOZdMVI1hGsc0tmeD2o/Lw==",
+      "funding": [
+        "https://github.com/sponsors/jonschlinkert",
+        "https://paypal.me/jonathanschlinkert",
+        "https://jonschlinkert.dev/sponsor"
+      ],
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "is-primitive": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=11.0"
+      }
+    },
     "node_modules/shallow-clone": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
@@ -15074,6 +15585,12 @@
       "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
     },
+    "node_modules/style-mod": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz",
+      "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==",
+      "peer": true
+    },
     "node_modules/style-to-object": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
@@ -15082,6 +15599,15 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -15200,6 +15726,17 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-3.0.5.tgz",
+      "integrity": "sha512-0ZwxTivevqq9BY9fRP9zDjHl7Tu+J5giBGbln+0O1R/7nHtBUKnjQcA1aTIhK7Oyjp6Uc/Dj6/dn8Dq58k5Uww==",
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "3.x"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
@@ -15502,6 +16039,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
@@ -15732,6 +16274,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -16013,6 +16560,18 @@
         }
       }
     },
+    "node_modules/use-resize-observer": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz",
+      "integrity": "sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==",
+      "dependencies": {
+        "@juggle/resize-observer": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": "16.8.0 - 18",
+        "react-dom": "16.8.0 - 18"
+      }
+    },
     "node_modules/use-sidecar": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
@@ -16135,6 +16694,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="
+    },
     "node_modules/vscode-oniguruma": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
@@ -16145,6 +16709,12 @@
       "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-6.0.0.tgz",
       "integrity": "sha512-gu73tuZfJgu+mvCSy4UZwd2JXykjK9zAZsfmDeut5dx/1a7FeTk0XwJsSuqQn+cuMCGVbIBfl+s53X4T19DnzQ=="
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "peer": true
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
diff --git a/package.json b/package.json
index 4133a1f..d1c015b 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@tailwindcss/typography": "^0.5.8",
     "acorn": "^8.8.1",
     "algoliasearch": "^4.14.2",
+    "allotment": "^1.19.3",
     "autoprefixer": "^10.4.7",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
@@ -44,7 +45,9 @@
     "flexsearch": "^0.7.31",
     "focus-visible": "^5.2.0",
     "framer-motion": "7.8.1",
+    "graphiql": "^3.0.8",
     "graphql": "^16.6.0",
+    "highlight.js": "^11.9.0",
     "lucide-react": "^0.216.0",
     "mdast-util-to-string": "^3.1.0",
     "mdx-annotations": "^0.1.1",
@@ -63,6 +66,7 @@
     "shiki": "^0.11.1",
     "simple-functional-loader": "^1.2.1",
     "tailwind-merge": "^1.12.0",
+    "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.3.1",
     "tailwindcss-animate": "^1.0.5",
     "unified": "^10.1.2",
diff --git a/tailwind.config.js b/tailwind.config.js
index ecc3334..d55a498 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -129,5 +129,8 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require("tailwind-scrollbar"),
+  ],
 }
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
index e859e2a..ae64f95 100644
--- a/wp-blocks/AcfFieldTypeSettingsBlock.js
+++ b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,12 +1,13 @@
 import { gql } from '@apollo/client'
 import Image from 'next/image'
 import { Fragment } from 'react'
+
+import { InfoIcon } from '@/components/icons/InfoIcon'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { InfoIcon } from '@/components/icons/InfoIcon'
 
 export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
   const { fieldTypeSettings } = fieldTypeSettingsBlockFields
@@ -24,7 +25,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
                 <h3 className="m-0 inline-flex">{name}</h3>
                 <Popover className="ml-3">
                   <PopoverTrigger>
-                    <div className="m-2 p-2 rounded-full transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
+                    <div className="m-2 rounded-full p-2 transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
                       <InfoIcon />
                     </div>
                   </PopoverTrigger>
diff --git a/wp-blocks/AcfGraphqlQuery.js b/wp-blocks/AcfGraphqlQuery.js
new file mode 100644
index 0000000..92d5afe
--- /dev/null
+++ b/wp-blocks/AcfGraphqlQuery.js
@@ -0,0 +1,33 @@
+import { gql } from '@apollo/client';
+import { getGraphqlEndpoint } from '@faustwp/core';
+import React from 'react';
+
+import { MiniGraphQL } from '@/components/MiniGraphQL';
+
+export function AcfGraphqlQuery({ graphqlQueryBlockMeta }) {
+  const { query, variables } = graphqlQueryBlockMeta;
+
+  return (
+    <MiniGraphQL
+      endpoint={getGraphqlEndpoint()}
+      initialQuery={query}
+      initialVariables={variables}
+    />
+  );
+}
+
+AcfGraphqlQuery.displayName = 'AcfGraphqlQuery';
+AcfGraphqlQuery.config = {
+  name: 'AcfGraphqlQuery',
+};
+AcfGraphqlQuery.fragments = {
+  key: 'AcfGraphqlQueryFragment',
+  entry: gql`
+    fragment AcfGraphqlQueryFragment on AcfGraphqlQuery {
+      graphqlQueryBlockMeta {
+        query
+        variables
+      }
+    }
+  `,
+};
diff --git a/wp-blocks/CoreHeading.js b/wp-blocks/CoreHeading.js
index 7498556..d6f052b 100644
--- a/wp-blocks/CoreHeading.js
+++ b/wp-blocks/CoreHeading.js
@@ -2,7 +2,7 @@ import { CoreBlocks } from '@faustwp/blocks'
 import slugify from '@sindresorhus/slugify'
 const { CoreHeading: FaustCoreHeading } = CoreBlocks
 
-function Component(props) {
+export function CoreHeading(props) {
   const { attributes } = props
 
   const customAttributes = {
@@ -19,8 +19,6 @@ function Component(props) {
   )
 }
 
-Component.displayName = { ...FaustCoreHeading.displayName }
-Component.config = { ...FaustCoreHeading.config }
-Component.fragments = { ...FaustCoreHeading.fragments }
-
-export default Component
+CoreHeading.displayName = { ...FaustCoreHeading.displayName }
+CoreHeading.config = { ...FaustCoreHeading.config }
+CoreHeading.fragments = { ...FaustCoreHeading.fragments }
diff --git a/wp-blocks/index.js b/wp-blocks/index.js
index 6595f95..cde7480 100644
--- a/wp-blocks/index.js
+++ b/wp-blocks/index.js
@@ -1,12 +1,14 @@
 import { CoreBlocks } from '@faustwp/blocks'
 
 import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
-import CustomHeading from './CoreHeading'
+import { AcfGraphqlQuery } from './AcfGraphqlQuery'
+import { CoreHeading } from './CoreHeading'
 
 const blocks = {
   ...CoreBlocks,
-  CoreHeading: CustomHeading,
+  CoreHeading,
   AcfFieldTypeSettingsBlock,
+  AcfGraphqlQuery,
 }
 
 export default blocks
diff --git a/wp-templates/single-field_type.js b/wp-templates/single-field_type.js
index 102f386..b916d7f 100644
--- a/wp-templates/single-field_type.js
+++ b/wp-templates/single-field_type.js
@@ -6,7 +6,8 @@ import { Separator } from '@radix-ui/react-separator'
 import { Layout } from '@/components/Layout'
 import { Badge } from '@/components/ui/badge'
 import blocks from '@/wp-blocks'
-import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock';
+import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock'
+import { AcfGraphqlQuery } from '@/wp-blocks/AcfGraphqlQuery'
 
 export const SingleFieldType = ({ data }) => {
   const { node } = data
@@ -110,6 +111,7 @@ query SingleAcfFieldType($uri: String!) {
                 ...${blocks.CoreList.fragments.key}
                 ...${blocks.CoreHeading.fragments.key}
                 ...AcfFieldTypeSettingsBlockFragment
+                ...AcfGraphqlQueryFragment
             }
         }
         ...aCFFieldTypeCategoriesFragment
@@ -118,6 +120,7 @@ query SingleAcfFieldType($uri: String!) {
 ${Layout.fragment}
 ${aCFFieldTypeCategoriesFragment}
 ${AcfFieldTypeSettingsBlock.fragments.entry}
+${AcfGraphqlQuery.fragments.entry}
 
 ${blocks.CoreParagraph.fragments.entry}
 ${blocks.CoreColumns.fragments.entry}