From 0f2a329171055be1eca470cf5c5db52fa77e4a70 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Thu, 9 Nov 2023 14:27:37 -0600
Subject: [PATCH 01/12] Use monaco-editor for code display

---
 .changeset/early-hairs-hug.md                 |   5 +
 package.json                                  |   1 -
 packages/webui/package.json                   |   6 +-
 .../src/components/Authorization.test.tsx     |   5 +-
 .../webui/src/components/Authorization.tsx    |  21 ++-
 .../webui/src/components/CodeDisplay.test.tsx |  53 ++++++
 packages/webui/src/components/CodeDisplay.tsx |  43 +++++
 .../webui/src/components/JsonDisplay.test.tsx |  45 -----
 packages/webui/src/components/JsonDisplay.tsx |  60 -------
 .../webui/src/components/MonacoEditor.tsx     |  29 ++++
 packages/webui/src/components/index.ts        |   2 +-
 .../src/components/ui/TraceDetail.test.tsx    |   4 +-
 .../webui/src/components/ui/TraceDetail.tsx   |  54 ++----
 packages/webui/src/styles/base.css            |  38 +++-
 packages/webui/src/styles/react-json-view.css |  78 ---------
 yarn.lock                                     | 163 +++---------------
 16 files changed, 224 insertions(+), 383 deletions(-)
 create mode 100644 .changeset/early-hairs-hug.md
 create mode 100644 packages/webui/src/components/CodeDisplay.test.tsx
 create mode 100644 packages/webui/src/components/CodeDisplay.tsx
 delete mode 100644 packages/webui/src/components/JsonDisplay.test.tsx
 delete mode 100644 packages/webui/src/components/JsonDisplay.tsx
 create mode 100644 packages/webui/src/components/MonacoEditor.tsx
 delete mode 100644 packages/webui/src/styles/react-json-view.css

diff --git a/.changeset/early-hairs-hug.md b/.changeset/early-hairs-hug.md
new file mode 100644
index 0000000..6de8614
--- /dev/null
+++ b/.changeset/early-hairs-hug.md
@@ -0,0 +1,5 @@
+---
+'@envyjs/webui': minor
+---
+
+Use monaco-editor for code display
diff --git a/package.json b/package.json
index 69428ec..05d9b87 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,6 @@
     "wait-on": "^7.0.1"
   },
   "resolutions": {
-    "@microlink/react-json-view/react": ">=17",
     "react-hot-toast/csstype": "^3.0.10"
   },
   "lint-staged": {
diff --git a/packages/webui/package.json b/packages/webui/package.json
index bc3bcf2..f2682a8 100644
--- a/packages/webui/package.json
+++ b/packages/webui/package.json
@@ -62,7 +62,9 @@
   },
   "dependencies": {
     "@envyjs/core": "0.8.4",
+    "@monaco-editor/react": "4.6.0",
     "chalk": "^4.1.2",
+    "monaco-editor": "0.44.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "serve-handler": "^6.1.5",
@@ -71,7 +73,6 @@
     "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
-    "@microlink/react-json-view": "^1.22.2",
     "@parcel/config-default": "^2.9.3",
     "@parcel/core": "^2.9.3",
     "@storybook/cli": "^7.4.6",
@@ -115,9 +116,6 @@
     "ts-jest-mock-import-meta": "^1.1.0",
     "vite": "^4.4.9"
   },
-  "peerDependencies": {
-    "@microlink/react-json-view": "^1.22.2"
-  },
   "browserslist": [
     ">0.2%",
     "not ie <= 11"
diff --git a/packages/webui/src/components/Authorization.test.tsx b/packages/webui/src/components/Authorization.test.tsx
index 4e1892e..2261710 100644
--- a/packages/webui/src/components/Authorization.test.tsx
+++ b/packages/webui/src/components/Authorization.test.tsx
@@ -10,9 +10,8 @@ jest.mock('@/components', () => ({
   IconButton: function ({ short, Icon, ...safeProps }: any) {
     return <button {...safeProps} />;
   },
-  JsonDisplay: function ({ children, ...props }: any) {
-    const value = typeof children === 'object' ? JSON.stringify(children) : children;
-    return <div {...props}>{value}</div>;
+  CodeDisplay: function ({ data, contentType, ...props }: any) {
+    return <div {...props}>{data}</div>;
   },
 }));
 
diff --git a/packages/webui/src/components/Authorization.tsx b/packages/webui/src/components/Authorization.tsx
index 8a0aee6..a445530 100644
--- a/packages/webui/src/components/Authorization.tsx
+++ b/packages/webui/src/components/Authorization.tsx
@@ -1,8 +1,7 @@
-import { safeParseJson } from '@envyjs/core';
 import { ChevronDown, ChevronUp, Code2, MoreHorizontal } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
-import { Code, IconButton, JsonDisplay } from '@/components';
+import { Code, CodeDisplay, IconButton } from '@/components';
 import { tw } from '@/utils';
 
 enum TokenType {
@@ -53,7 +52,7 @@ export default function Authorization({ value }: AuthorizationProps) {
   if (!value) return null;
 
   function decodeToken(type: TokenType, token: string) {
-    let decoded;
+    let decoded = '';
 
     if (type === TokenType.JWT) {
       const base64Url = token.split('.')[1];
@@ -67,13 +66,13 @@ export default function Authorization({ value }: AuthorizationProps) {
           .join(''),
       );
 
-      decoded = safeParseJson(jsonPayload).value;
+      decoded = jsonPayload;
     } else if (type === TokenType.BasicAuth) {
       const [un, pw] = atob(token).split(':');
-      decoded = { username: un, password: pw };
+      decoded = JSON.stringify({ username: un, password: pw });
     }
 
-    setDecodedToken(<JsonDisplay>{decoded}</JsonDisplay>);
+    setDecodedToken(<CodeDisplay contentType="application/json" data={decoded} />);
   }
 
   return (
@@ -87,10 +86,10 @@ export default function Authorization({ value }: AuthorizationProps) {
                 className="flex"
                 onClick={() => setTokenState(TokenState.Expanded)}
               >
-                <div className="overflow-y-hidden">
+                <div className="clamp">
                   {type} {token}
                 </div>
-                <div className="flex items-center justify-end ml-auto">
+                <div className="flex items-center justify-end ml-auto cursor-pointer">
                   <ChevronDown className="w-4 h-4" />
                 </div>
               </div>
@@ -98,7 +97,11 @@ export default function Authorization({ value }: AuthorizationProps) {
           case TokenState.Expanded:
             return <Code data-test-id="token-expanded-view">{`${type} ${token}`}</Code>;
           case TokenState.Decoded:
-            return <div data-test-id="token-decoded-view">{decodedToken}</div>;
+            return (
+              <div data-test-id="token-decoded-view" className="h-[300px]">
+                {decodedToken}
+              </div>
+            );
         }
       })()}
       {tokenState !== TokenState.Minimal && (
diff --git a/packages/webui/src/components/CodeDisplay.test.tsx b/packages/webui/src/components/CodeDisplay.test.tsx
new file mode 100644
index 0000000..3dd36bd
--- /dev/null
+++ b/packages/webui/src/components/CodeDisplay.test.tsx
@@ -0,0 +1,53 @@
+import { cleanup, render, waitFor } from '@testing-library/react';
+
+import CodeDisplay from './CodeDisplay';
+
+jest.mock(
+  './MonacoEditor',
+  () =>
+    function MockEditor({ value, language }: any) {
+      return <div data-test-id={`lang-${language}`}>{value}</div>;
+    },
+);
+
+describe('CodeDisplay', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should parse application/json', async () => {
+    const data = { foo: 'bar' };
+    const { getByTestId } = render(<CodeDisplay data={JSON.stringify(data)} contentType="application/json" />);
+
+    const reactJson = await waitFor(() => getByTestId('lang-json'));
+    expect(reactJson).toHaveTextContent('{ "foo": "bar" }');
+  });
+
+  it('should parse application/graphql-response+json as json', async () => {
+    const data = { foo: 'bar' };
+    const { getByTestId } = render(
+      <CodeDisplay data={JSON.stringify(data)} contentType="application/graphql-response+json" />,
+    );
+
+    const reactJson = await waitFor(() => getByTestId('lang-json'));
+    expect(reactJson).toHaveTextContent('{ "foo": "bar" }');
+  });
+
+  it('should parse application/json with charset', async () => {
+    const data = { foo: 'bar' };
+    const { getByTestId } = render(
+      <CodeDisplay data={JSON.stringify(data)} contentType="application/json; ; charset=utf-8" />,
+    );
+
+    const reactJson = await waitFor(() => getByTestId('lang-json'));
+    expect(reactJson).toHaveTextContent('{ "foo": "bar" }');
+  });
+
+  it('should use txt language when contentType is undefined', async () => {
+    const data = { foo: 'bar' };
+    const { getByTestId } = render(<CodeDisplay data={JSON.stringify(data)} />);
+
+    const reactJson = await waitFor(() => getByTestId('lang-txt'));
+    expect(reactJson).toHaveTextContent('{"foo":"bar"}');
+  });
+});
diff --git a/packages/webui/src/components/CodeDisplay.tsx b/packages/webui/src/components/CodeDisplay.tsx
new file mode 100644
index 0000000..8d003d1
--- /dev/null
+++ b/packages/webui/src/components/CodeDisplay.tsx
@@ -0,0 +1,43 @@
+import { safeParseJson } from '@envyjs/core';
+import { Suspense, lazy } from 'react';
+
+import { MonacoEditorProps } from './MonacoEditor';
+
+const Editor = lazy<React.ComponentType<MonacoEditorProps>>(async () => await import('./MonacoEditor'));
+
+type CodeDisplayProps = {
+  contentType?: string | string[] | null;
+  data: string;
+};
+
+const languageMap: Record<string, MonacoEditorProps['language']> = {
+  'application/json': 'json',
+  'application/graphql-response+json': 'json',
+  'application/xml': 'xml',
+};
+
+export default function CodeDisplay({ data, contentType }: CodeDisplayProps) {
+  // content types can be an array or a string value
+  // each value in the array or string can be a content type with a charset
+  // example: [content-type: application/json; charset=utf-8]
+  let resolvedContentType = Array.isArray(contentType) ? contentType[0] : contentType;
+  resolvedContentType = resolvedContentType && resolvedContentType.split(';')[0];
+  const lang = resolvedContentType ? languageMap[resolvedContentType as string] : 'txt';
+
+  // TODO: Add support for XML formatting
+  let value = data;
+  if (lang === 'json') {
+    const parseResult = safeParseJson(data);
+    if (parseResult.value) {
+      value = JSON.stringify(parseResult.value, null, 2);
+    }
+  }
+
+  return (
+    <Suspense fallback={<></>}>
+      <div className="w-full h-full">
+        <Editor value={value} language={lang} />
+      </div>
+    </Suspense>
+  );
+}
diff --git a/packages/webui/src/components/JsonDisplay.test.tsx b/packages/webui/src/components/JsonDisplay.test.tsx
deleted file mode 100644
index a85becb..0000000
--- a/packages/webui/src/components/JsonDisplay.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { cleanup, render } from '@testing-library/react';
-
-import JsonDisplay from './JsonDisplay';
-
-jest.mock(
-  '@microlink/react-json-view',
-  () =>
-    function MockReactJson({ src }: any) {
-      return <div data-test-id="mock-react-json">{JSON.stringify(src)}</div>;
-    },
-);
-
-describe('JsonDisplay', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('should render without error', () => {
-    render(<JsonDisplay>{{ foo: 'bar' }}</JsonDisplay>);
-  });
-
-  it('should display code in ReactJson component', () => {
-    const data = { foo: 'bar' };
-    const { getByTestId } = render(<JsonDisplay>{data}</JsonDisplay>);
-
-    const reactJson = getByTestId('mock-react-json');
-    expect(reactJson).toHaveTextContent('{"foo":"bar"}');
-  });
-
-  it('should parse strings as json', () => {
-    const data = '{"foo":"bar"}';
-    const { getByTestId } = render(<JsonDisplay>{data}</JsonDisplay>);
-
-    const reactJson = getByTestId('mock-react-json');
-    expect(reactJson).toHaveTextContent('{"foo":"bar"}');
-  });
-
-  it('should display error when supplied json is invalid', () => {
-    const data = 'blah';
-    const { getByTestId } = render(<JsonDisplay>{data}</JsonDisplay>);
-
-    const reactJson = getByTestId('mock-react-json');
-    expect(reactJson).toHaveTextContent('{"error":"Error parsing JSON data","data":"blah"}');
-  });
-});
diff --git a/packages/webui/src/components/JsonDisplay.tsx b/packages/webui/src/components/JsonDisplay.tsx
deleted file mode 100644
index 7b238ed..0000000
--- a/packages/webui/src/components/JsonDisplay.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { safeParseJson } from '@envyjs/core';
-import { ReactJsonViewProps } from '@microlink/react-json-view';
-import { Suspense, lazy } from 'react';
-import colors from 'tailwindcss/colors';
-
-import { tw } from '@/utils';
-
-const ReactJson = lazy<React.ComponentType<ReactJsonViewProps>>(async () => await import('@microlink/react-json-view'));
-
-type JsonDisplayProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
-  children: object | string;
-};
-
-const bg = colors.gray['200'];
-const fg = colors.black;
-const lines = colors.gray['200'];
-const meta = colors.gray['400'];
-const accent = colors.orange['300'];
-
-const customTheme = {
-  base00: bg,
-  base01: accent,
-  base02: lines,
-  base03: fg,
-  base04: meta,
-  base05: accent,
-  base06: fg,
-  base07: fg,
-  base08: fg,
-  base09: fg,
-  base0A: fg,
-  base0B: fg,
-  base0C: fg,
-  base0D: meta,
-  base0E: meta,
-  base0F: fg,
-};
-
-export default function JsonDisplay({ className, children }: JsonDisplayProps) {
-  const errorData = { error: 'Error parsing JSON data', data: children };
-  const src = typeof children === 'string' ? safeParseJson(children).value ?? errorData : children;
-
-  return (
-    <Suspense fallback={<></>}>
-      <div className={tw('w-full h-full', className)}>
-        <ReactJson
-          src={src}
-          theme={customTheme}
-          name={null}
-          collapsed={3}
-          collapseStringsAfterLength={50}
-          displayDataTypes={false}
-          enableClipboard={true}
-          indentWidth={2}
-          iconStyle="circle"
-        />
-      </div>
-    </Suspense>
-  );
-}
diff --git a/packages/webui/src/components/MonacoEditor.tsx b/packages/webui/src/components/MonacoEditor.tsx
new file mode 100644
index 0000000..d541a81
--- /dev/null
+++ b/packages/webui/src/components/MonacoEditor.tsx
@@ -0,0 +1,29 @@
+import { Editor, EditorProps, Monaco } from '@monaco-editor/react';
+import colors from 'tailwindcss/colors';
+
+export type MonacoEditorProps = Pick<EditorProps, 'value' | 'language'>;
+
+const editorOptions: EditorProps['options'] = {
+  minimap: {
+    enabled: false,
+  },
+  readOnly: true,
+  showFoldingControls: 'always',
+  lineNumbers: 'off',
+};
+
+export default function MonacoEditor({ value, language }: MonacoEditorProps) {
+  return <Editor value={value} language={language} options={editorOptions} onMount={setEditorTheme} />;
+}
+
+function setEditorTheme(_: any, monaco: Monaco) {
+  monaco.editor.defineTheme('envy', {
+    base: 'vs',
+    inherit: true,
+    colors: {
+      'editor.background': colors.slate['100'],
+    },
+    rules: [],
+  });
+  monaco.editor.setTheme('envy');
+}
diff --git a/packages/webui/src/components/index.ts b/packages/webui/src/components/index.ts
index 0d3b73b..d98d9d2 100644
--- a/packages/webui/src/components/index.ts
+++ b/packages/webui/src/components/index.ts
@@ -4,11 +4,11 @@ export { default as Authorization } from './Authorization';
 export { default as Badge } from './Badge';
 export { default as Button } from './Button';
 export { default as Code } from './Code';
+export { default as CodeDisplay } from './CodeDisplay';
 export { default as DateTime } from './DateTime';
 export { default as Fields, Field } from './Fields';
 export { default as IconButton } from './IconButton';
 export { default as Input } from './Input';
-export { default as JsonDisplay } from './JsonDisplay';
 export { default as KeyValueList } from './KeyValueList';
 export { default as Label } from './Label';
 export { default as Loading } from './Loading';
diff --git a/packages/webui/src/components/ui/TraceDetail.test.tsx b/packages/webui/src/components/ui/TraceDetail.test.tsx
index 93db2e8..daee9df 100644
--- a/packages/webui/src/components/ui/TraceDetail.test.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.test.tsx
@@ -31,8 +31,8 @@ jest.mock('@/components', () => ({
   Fields: function (props: any) {
     return <div {...props} />;
   },
-  JsonDisplay: function ({ children }: any) {
-    return <>Mock JsonDisplay component: {children}</>;
+  CodeDisplay: function ({ children }: any) {
+    return <>Mock CodeDisplay component: {children}</>;
   },
   Loading: function (props: any) {
     return <div {...props}>Mock Loading component</div>;
diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
index 07b895d..d6b43f7 100644
--- a/packages/webui/src/components/ui/TraceDetail.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -2,18 +2,7 @@ import { HttpRequestState } from '@envyjs/core';
 import { X } from 'lucide-react';
 import { useCallback, useEffect, useRef } from 'react';
 
-import {
-  Badge,
-  Code,
-  DateTime,
-  Field,
-  Fields,
-  IconButton,
-  JsonDisplay,
-  Loading,
-  Section,
-  XmlDisplay,
-} from '@/components';
+import { Badge, CodeDisplay, DateTime, Field, Fields, IconButton, Loading, Section } from '@/components';
 import useApplication from '@/hooks/useApplication';
 import {
   RequestDetailsComponent,
@@ -31,31 +20,6 @@ import ResponseHeaders from './ResponseHeaders';
 import { TabContent, TabList, TabListItem } from './Tabs';
 import TimingsDiagram from './TimingsDiagram';
 
-type CodeDisplayProps = {
-  contentType: string | string[] | null;
-  children: any;
-};
-
-function CodeDisplay({ contentType, children, ...props }: CodeDisplayProps) {
-  if (!children) return null;
-
-  const type = Array.isArray(contentType) ? contentType[0] : contentType;
-  const isJson = type?.includes('application/json') || contentType?.includes('application/graphql-response+json');
-  const isXml = contentType?.includes('application/xml');
-
-  return (
-    <div className="h-full" {...props}>
-      {isJson ? (
-        <JsonDisplay>{children}</JsonDisplay>
-      ) : isXml ? (
-        <XmlDisplay>{children}</XmlDisplay>
-      ) : (
-        <Code>{children}</Code>
-      )}
-    </div>
-  );
-}
-
 export default function TraceDetail() {
   const { getSelectedTrace, clearSelectedTrace } = useApplication();
   const trace = getSelectedTrace();
@@ -215,16 +179,20 @@ export default function TraceDetail() {
         </TabContent>
 
         <TabContent id="payload">
-          <CodeDisplay data-test-id="request-body" contentType={getHeader(requestHeaders, 'content-type')}>
-            {requestBody}
-          </CodeDisplay>
+          <CodeDisplay
+            data-test-id="request-body"
+            contentType={getHeader(requestHeaders, 'content-type')}
+            data={requestBody}
+          />
         </TabContent>
 
         <TabContent id="response">
           {responseComplete && (
-            <CodeDisplay data-test-id="response-body" contentType={getHeader(responseHeaders, 'content-type')}>
-              {responseBody}
-            </CodeDisplay>
+            <CodeDisplay
+              data-test-id="response-body"
+              contentType={getHeader(responseHeaders, 'content-type')}
+              data={responseBody}
+            />
           )}
         </TabContent>
       </div>
diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css
index 0c06eb2..32eb97e 100644
--- a/packages/webui/src/styles/base.css
+++ b/packages/webui/src/styles/base.css
@@ -1,4 +1,3 @@
-@import './react-json-view.css';
 @import './allotment.css';
 
 @tailwind base;
@@ -113,3 +112,40 @@ input[type='search']::-webkit-search-results-decoration {
 .absolute-v-center {
   @apply absolute inline-block top-1/2 -translate-y-1/2;
 }
+
+.clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+/**
+ * Code Display
+ */
+.code {
+  @apply !font-mono !tracking-normal !break-all;
+  @apply text-slate-900;
+}
+
+.code-inline {
+  @apply code;
+  @apply inline-block;
+}
+
+.code-block {
+  @apply code;
+  @apply w-full py-4;
+  @apply block overflow-auto;
+  @apply bg-slate-100;
+  @apply rounded;
+}
+
+.code-block > ul > li {
+  @apply px-4;
+  @apply whitespace-pre-wrap;
+  @apply hover:bg-opacity-50 hover:bg-white;
+  @apply hover:cursor-default;
+}
diff --git a/packages/webui/src/styles/react-json-view.css b/packages/webui/src/styles/react-json-view.css
deleted file mode 100644
index 0fa7265..0000000
--- a/packages/webui/src/styles/react-json-view.css
+++ /dev/null
@@ -1,78 +0,0 @@
-.code {
-  @apply !font-mono !tracking-normal !break-all;
-  @apply text-slate-900;
-}
-
-.code-inline {
-  @apply code;
-  @apply inline-block;
-}
-
-.code-block {
-  @apply code;
-  @apply w-full py-4;
-  @apply block overflow-auto;
-  @apply bg-slate-100;
-  @apply rounded;
-}
-
-.code-block > ul > li {
-  @apply px-4;
-  @apply whitespace-pre-wrap;
-  @apply hover:bg-opacity-50 hover:bg-white;
-  @apply hover:cursor-default;
-}
-
-.react-json-view {
-  @apply code-block;
-  @apply h-full;
-  @apply px-4;
-}
-
-.react-json-view * {
-  @apply !text-base;
-  @apply !tracking-normal;
-}
-
-.react-json-view .node-ellipsis {
-  @apply !text-slate-400;
-}
-
-.react-json-view .array-key,
-.react-json-view .object-key {
-  @apply !font-bold;
-}
-
-.react-json-view .object-meta-data {
-  @apply !text-xs !font-sans;
-}
-
-.react-json-view .object-meta-data * {
-  @apply !not-italic !text-sm;
-}
-
-.react-json-view .array-key + span,
-.react-json-view .object-key + span,
-.react-json-view .variable-row > span > div {
-  @apply !ml-0;
-  @apply opacity-50;
-}
-
-.react-json-view .icon-container {
-  @apply absolute;
-  @apply -translate-x-[1.35em] xl:-translate-x-[1.2em] translate-y-[0.3em];
-  @apply bg-slate-100;
-}
-
-.react-json-view .variable-row > span {
-  @apply !font-bold;
-}
-
-.react-json-view .variable-value > div {
-  @apply !text-slate-700;
-}
-
-/* Hide the root expand/collapse icon */
-.react-json-view > .pretty-json-container > .object-content > .object-key-val > span > span > .icon-container {
-  @apply !hidden;
-}
diff --git a/yarn.lock b/yarn.lock
index 283a95e..b568ef1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1183,7 +1183,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -2163,16 +2163,6 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
-"@microlink/react-json-view@^1.22.2":
-  version "1.22.2"
-  resolved "https://registry.yarnpkg.com/@microlink/react-json-view/-/react-json-view-1.22.2.tgz#dc8262d40912655d5c4a4cf8c7e0549e683808f6"
-  integrity sha512-liJzdlbspT5GbEuPffw4jzZfXOypKLK1Er9br03T31bAaIi/WptZqpcJaXPi7OmwC7v/YYczCkmAS7WaEfItPQ==
-  dependencies:
-    flux "~4.0.1"
-    react-base16-styling "~0.6.0"
-    react-lifecycles-compat "~3.0.4"
-    react-textarea-autosize "~8.3.2"
-
 "@mischnic/json-sourcemap@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@mischnic/json-sourcemap/-/json-sourcemap-0.1.0.tgz#38af657be4108140a548638267d02a2ea3336507"
@@ -2182,6 +2172,20 @@
     "@lezer/lr" "^0.15.4"
     json5 "^2.2.1"
 
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+  dependencies:
+    state-local "^1.0.6"
+
+"@monaco-editor/react@4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
+  dependencies:
+    "@monaco-editor/loader" "^1.4.0"
+
 "@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.2.tgz#44d752c1a2dc113f15f781b7cc4f53a307e3fa38"
@@ -5097,11 +5101,6 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
 
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
-
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -5316,11 +5315,6 @@ base-x@^3.0.8:
   dependencies:
     safe-buffer "^5.0.1"
 
-base16@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
-  integrity sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==
-
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -6114,13 +6108,6 @@ cross-env@^7.0.3:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-fetch@^3.1.5:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
-  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
-  dependencies:
-    node-fetch "^2.6.12"
-
 cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -7401,31 +7388,6 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
-fbemitter@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-3.0.0.tgz#00b2a1af5411254aab416cd75f9e6289bee4bff3"
-  integrity sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==
-  dependencies:
-    fbjs "^3.0.0"
-
-fbjs-css-vars@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
-  integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
-
-fbjs@^3.0.0, fbjs@^3.0.1:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.5.tgz#aa0edb7d5caa6340011790bd9249dbef8a81128d"
-  integrity sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==
-  dependencies:
-    cross-fetch "^3.1.5"
-    fbjs-css-vars "^1.0.0"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^1.0.35"
-
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -7548,14 +7510,6 @@ flow-parser@0.*:
   resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.218.1.tgz#a4a5d14c2cfd40dc76649b23f48fb4facd9156f9"
   integrity sha512-46xpXyI4Bh3K2ej+NF3V5+pAsDlB5P0DWpgIIy/0/R7ujK0syfI/xfKDCOlq2sxtfUyPrr4rxfS2Da7yWdTdwg==
 
-flux@~4.0.1:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/flux/-/flux-4.0.4.tgz#9661182ea81d161ee1a6a6af10d20485ef2ac572"
-  integrity sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==
-  dependencies:
-    fbemitter "^3.0.0"
-    fbjs "^3.0.1"
-
 follow-redirects@^1.14.9, follow-redirects@^1.15.2:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
@@ -9457,21 +9411,11 @@ lodash.clamp@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa"
   integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==
 
-lodash.curry@^4.0.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
-  integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
-
 lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-lodash.flow@^3.3.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
-  integrity sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw==
-
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -9895,6 +9839,11 @@ mock-socket@^9.3.1:
   resolved "https://registry.yarnpkg.com/mock-socket/-/mock-socket-9.3.1.tgz#24fb00c2f573c84812aa4a24181bb025de80cc8e"
   integrity sha512-qxBgB7Qa2sEQgHFjj0dSigq7fX4k6Saisd5Nelwp2q8mlbAFh5dHV9JTTlF8viYJLSSWgMCZFUom8PJcMNBoJw==
 
+monaco-editor@0.44.0:
+  version "0.44.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.44.0.tgz#3c0fe3655923bbf7dd647057302070b5095b6c59"
+  integrity sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==
+
 mri@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@@ -10028,7 +9977,7 @@ node-fetch-native@^1.4.0:
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.4.0.tgz#fbe8ac033cb6aa44bd106b5e4fd2b6277ba70fa1"
   integrity sha512-F5kfEj95kX8tkDhUCYdV8dg3/8Olx/94zB8+ZNthFs6Bz31UpUi8Xh40TN3thLwXgrwXry1pEg9lJ++tLWTcqA==
 
-node-fetch@2, node-fetch@^2.0.0, node-fetch@^2.6.12, node-fetch@^2.6.7, node-fetch@^2.7.0:
+node-fetch@2, node-fetch@^2.0.0, node-fetch@^2.6.7, node-fetch@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -10119,7 +10068,7 @@ nwsapi@^2.2.2:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
 
-object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -10791,13 +10740,6 @@ progress@^2.0.1:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
-
 prompts@^2.0.1, prompts@^2.4.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -10901,11 +10843,6 @@ puppeteer-core@^2.1.1:
     rimraf "^2.6.1"
     ws "^6.1.0"
 
-pure-color@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
-  integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==
-
 pure-rand@^6.0.0:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.3.tgz#3c9e6b53c09e52ac3cedffc85ab7c1c7094b38cb"
@@ -10990,16 +10927,6 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-base16-styling@~0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c"
-  integrity sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==
-  dependencies:
-    base16 "^1.0.0"
-    lodash.curry "^4.0.1"
-    lodash.flow "^3.3.0"
-    pure-color "^1.2.0"
-
 react-colorful@^5.1.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
@@ -11080,11 +11007,6 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-lifecycles-compat@~3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
@@ -11123,15 +11045,6 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-textarea-autosize@~8.3.2:
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"
-  integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    use-composed-ref "^1.3.0"
-    use-latest "^1.2.1"
-
 react@18.2.0, react@>=17, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -11628,11 +11541,6 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
-
 setprototypeof@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
@@ -11845,6 +11753,11 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 statuses@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
@@ -12573,11 +12486,6 @@ typescript@5.2.2, typescript@^5.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
   integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
-ua-parser-js@^1.0.35:
-  version "1.0.35"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
-  integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==
-
 uglify-js@^3.1.4:
   version "3.17.4"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
@@ -12718,23 +12626,6 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
-use-composed-ref@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
-  integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
-
-use-isomorphic-layout-effect@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
-  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
-
-use-latest@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
-  integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
-  dependencies:
-    use-isomorphic-layout-effect "^1.1.1"
-
 use-resize-observer@^9.0.0, use-resize-observer@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"

From fddcae4333a946dbf48d5a3d2d1344538d60dbbe Mon Sep 17 00:00:00 2001
From: Charles Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 07:07:33 -0600
Subject: [PATCH 02/12] Prevent uneccessary scroll in code display

---
 packages/webui/src/components/MonacoEditor.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webui/src/components/MonacoEditor.tsx b/packages/webui/src/components/MonacoEditor.tsx
index d541a81..b3f142a 100644
--- a/packages/webui/src/components/MonacoEditor.tsx
+++ b/packages/webui/src/components/MonacoEditor.tsx
@@ -8,6 +8,7 @@ const editorOptions: EditorProps['options'] = {
     enabled: false,
   },
   readOnly: true,
+  scrollBeyondLastLine: false,
   showFoldingControls: 'always',
   lineNumbers: 'off',
 };

From ab3fd64b8a253786585f2246dbf7a627860c049b Mon Sep 17 00:00:00 2001
From: Charles Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 07:29:37 -0600
Subject: [PATCH 03/12] Ensure systems return the correct types

---
 packages/webui/src/components/CodeDisplay.tsx | 6 +++++-
 packages/webui/src/systems/Sanity.test.tsx    | 2 +-
 packages/webui/src/systems/Sanity.tsx         | 5 ++---
 packages/webui/src/systems/index.tsx          | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/webui/src/components/CodeDisplay.tsx b/packages/webui/src/components/CodeDisplay.tsx
index 8d003d1..f29aa91 100644
--- a/packages/webui/src/components/CodeDisplay.tsx
+++ b/packages/webui/src/components/CodeDisplay.tsx
@@ -7,7 +7,7 @@ const Editor = lazy<React.ComponentType<MonacoEditorProps>>(async () => await im
 
 type CodeDisplayProps = {
   contentType?: string | string[] | null;
-  data: string;
+  data: string | null | undefined;
 };
 
 const languageMap: Record<string, MonacoEditorProps['language']> = {
@@ -17,6 +17,10 @@ const languageMap: Record<string, MonacoEditorProps['language']> = {
 };
 
 export default function CodeDisplay({ data, contentType }: CodeDisplayProps) {
+  if (!data) {
+    return;
+  }
+
   // content types can be an array or a string value
   // each value in the array or string can be a content type with a charset
   // example: [content-type: application/json; charset=utf-8]
diff --git a/packages/webui/src/systems/Sanity.test.tsx b/packages/webui/src/systems/Sanity.test.tsx
index 8457676..6f1a049 100644
--- a/packages/webui/src/systems/Sanity.test.tsx
+++ b/packages/webui/src/systems/Sanity.test.tsx
@@ -114,6 +114,6 @@ describe('SanitySystem', () => {
 
     const result = instance.getResponseBody({ trace: mockTrace, data });
 
-    expect(result).toEqual({ data: { bar: 'baz' } });
+    expect(result).toEqual('{"data":{"bar":"baz"}}');
   });
 });
diff --git a/packages/webui/src/systems/Sanity.tsx b/packages/webui/src/systems/Sanity.tsx
index 0d580ba..03ae8bb 100644
--- a/packages/webui/src/systems/Sanity.tsx
+++ b/packages/webui/src/systems/Sanity.tsx
@@ -64,9 +64,8 @@ export default class SanitySystem implements System<SanityData> {
   getResponseBody({ trace }: TraceContext<SanityData>) {
     if (!trace.http?.responseBody) return null;
 
-    const json = safeParseJson(trace.http.responseBody).value;
-    const transformed = { ...json };
+    const transformed = safeParseJson(trace.http.responseBody).value;
     delete transformed.query;
-    return transformed;
+    return JSON.stringify(transformed);
   }
 }
diff --git a/packages/webui/src/systems/index.tsx b/packages/webui/src/systems/index.tsx
index 77da942..b63a44a 100644
--- a/packages/webui/src/systems/index.tsx
+++ b/packages/webui/src/systems/index.tsx
@@ -35,11 +35,11 @@ export function getIconUri(trace: Trace | null): string {
   return callOrFallback(trace as Trace, 'getIconUri');
 }
 
-export function getRequestBody(trace: Trace): any {
+export function getRequestBody(trace: Trace): string | undefined | null {
   return callOrFallback(trace, 'getRequestBody');
 }
 
-export function getResponseBody(trace: Trace): any {
+export function getResponseBody(trace: Trace): string | undefined | null {
   return callOrFallback(trace, 'getResponseBody');
 }
 

From 62b41f3a69488a1c2ed7a17ba2fbc740d8ee7c0b Mon Sep 17 00:00:00 2001
From: Charles Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 08:33:26 -0600
Subject: [PATCH 04/12] Fix persistent tabs when data is not present

---
 .../webui/src/components/ui/TraceDetail.tsx   | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
index d6b43f7..072f771 100644
--- a/packages/webui/src/components/ui/TraceDetail.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -20,8 +20,14 @@ import ResponseHeaders from './ResponseHeaders';
 import { TabContent, TabList, TabListItem } from './Tabs';
 import TimingsDiagram from './TimingsDiagram';
 
+const TabMap = {
+  default: 'default',
+  payload: 'payload',
+  response: 'response',
+};
+
 export default function TraceDetail() {
-  const { getSelectedTrace, clearSelectedTrace } = useApplication();
+  const { getSelectedTrace, clearSelectedTrace, selectedTab, setSelectedTab } = useApplication();
   const trace = getSelectedTrace();
 
   const { http, serviceName, timestamp } = trace || {};
@@ -57,6 +63,19 @@ export default function TraceDetail() {
   const responseBody = getResponseBody(trace);
   const httpStatusLabel = `${statusCode && statusCode > -1 ? statusCode : ''} ${statusMessage}`;
 
+  // handle persistent tabs
+  const availableTabs = [TabMap.default];
+  if (requestBody) {
+    availableTabs.push(TabMap.payload);
+  }
+  if (responseBody) {
+    availableTabs.push(TabMap.response);
+  }
+  if (!availableTabs.includes(selectedTab)) {
+    setSelectedTab(TabMap.default);
+    window.history.replaceState('', '', `#${TabMap.default}`);
+  }
+
   return (
     <div className="h-full flex flex-col p-default bg-secondary">
       <div className="sticky top-0" data-test-id="summary">
@@ -96,8 +115,8 @@ export default function TraceDetail() {
 
         <TabList>
           <TabListItem title="Details" id="default" />
-          {requestBody && <TabListItem title="Payload" id="payload" />}
-          {responseBody && <TabListItem title="Response" id="response" />}
+          {availableTabs.includes(TabMap.payload) && <TabListItem title="Payload" id={TabMap.payload} />}
+          {availableTabs.includes(TabMap.response) && <TabListItem title="Response" id={TabMap.response} />}
         </TabList>
       </div>
 

From bfa5ecbe5f98b3390c32a76bd4eff6877723e684 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 08:55:06 -0600
Subject: [PATCH 05/12] Align background colors

---
 packages/webui/src/components/Authorization.tsx | 2 +-
 packages/webui/src/components/MonacoEditor.tsx  | 3 ++-
 packages/webui/src/styles/base.css              | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/webui/src/components/Authorization.tsx b/packages/webui/src/components/Authorization.tsx
index a445530..9cab1d0 100644
--- a/packages/webui/src/components/Authorization.tsx
+++ b/packages/webui/src/components/Authorization.tsx
@@ -105,7 +105,7 @@ export default function Authorization({ value }: AuthorizationProps) {
         }
       })()}
       {tokenState !== TokenState.Minimal && (
-        <div className={tw('flex flex-row gap-2 bg-slate-100 px-4 pt-4')}>
+        <div className={tw('flex flex-row gap-2 bg-gray-200 px-4 pt-4')}>
           <>
             <IconButton
               data-test-id="token-expanded-button"
diff --git a/packages/webui/src/components/MonacoEditor.tsx b/packages/webui/src/components/MonacoEditor.tsx
index b3f142a..6be769d 100644
--- a/packages/webui/src/components/MonacoEditor.tsx
+++ b/packages/webui/src/components/MonacoEditor.tsx
@@ -22,7 +22,8 @@ function setEditorTheme(_: any, monaco: Monaco) {
     base: 'vs',
     inherit: true,
     colors: {
-      'editor.background': colors.slate['100'],
+      'editor.background': colors.gray['200'],
+      'editor.lineHighlightBackground': colors.gray['200'],
     },
     rules: [],
   });
diff --git a/packages/webui/src/styles/base.css b/packages/webui/src/styles/base.css
index 32eb97e..f77fa44 100644
--- a/packages/webui/src/styles/base.css
+++ b/packages/webui/src/styles/base.css
@@ -139,7 +139,7 @@ input[type='search']::-webkit-search-results-decoration {
   @apply code;
   @apply w-full py-4;
   @apply block overflow-auto;
-  @apply bg-slate-100;
+  @apply bg-gray-200;
   @apply rounded;
 }
 

From 7978a58165c57ae73781cd8d77166621e6581ac5 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 09:18:16 -0600
Subject: [PATCH 06/12] Autofold on initialization

---
 packages/webui/src/components/MonacoEditor.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/webui/src/components/MonacoEditor.tsx b/packages/webui/src/components/MonacoEditor.tsx
index 6be769d..900068d 100644
--- a/packages/webui/src/components/MonacoEditor.tsx
+++ b/packages/webui/src/components/MonacoEditor.tsx
@@ -1,4 +1,4 @@
-import { Editor, EditorProps, Monaco } from '@monaco-editor/react';
+import { Editor, EditorProps, OnMount } from '@monaco-editor/react';
 import colors from 'tailwindcss/colors';
 
 export type MonacoEditorProps = Pick<EditorProps, 'value' | 'language'>;
@@ -13,11 +13,7 @@ const editorOptions: EditorProps['options'] = {
   lineNumbers: 'off',
 };
 
-export default function MonacoEditor({ value, language }: MonacoEditorProps) {
-  return <Editor value={value} language={language} options={editorOptions} onMount={setEditorTheme} />;
-}
-
-function setEditorTheme(_: any, monaco: Monaco) {
+const setEditorTheme: OnMount = (editor, monaco) => {
   monaco.editor.defineTheme('envy', {
     base: 'vs',
     inherit: true,
@@ -28,4 +24,9 @@ function setEditorTheme(_: any, monaco: Monaco) {
     rules: [],
   });
   monaco.editor.setTheme('envy');
+  editor.trigger('fold', 'editor.foldLevel4', {});
+};
+
+export default function MonacoEditor({ value, language }: MonacoEditorProps) {
+  return <Editor value={value} language={language} options={editorOptions} onMount={setEditorTheme} />;
 }

From 8b23016d3f5b5b97012d0f06fb2980ea9024fe16 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 10:24:28 -0600
Subject: [PATCH 07/12] Remove unused component

---
 .../webui/src/components/XmlDisplay.test.tsx  | 31 -------------------
 packages/webui/src/components/XmlDisplay.tsx  | 22 -------------
 packages/webui/src/components/index.ts        |  1 -
 3 files changed, 54 deletions(-)
 delete mode 100644 packages/webui/src/components/XmlDisplay.test.tsx
 delete mode 100644 packages/webui/src/components/XmlDisplay.tsx

diff --git a/packages/webui/src/components/XmlDisplay.test.tsx b/packages/webui/src/components/XmlDisplay.test.tsx
deleted file mode 100644
index c4217be..0000000
--- a/packages/webui/src/components/XmlDisplay.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { cleanup, render } from '@testing-library/react';
-import xmlFormat from 'xml-formatter';
-
-import XmlDisplay from './XmlDisplay';
-
-jest.mock('xml-formatter');
-
-describe('XmlDisplay', () => {
-  beforeEach(() => {
-    jest.mocked(xmlFormat).mockReturnValue('Xml formatted input text');
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  it('should render without error', () => {
-    render(<XmlDisplay>Input text</XmlDisplay>);
-  });
-
-  it('should XML format content to display', () => {
-    const { container } = render(<XmlDisplay>Input text</XmlDisplay>);
-    expect(jest.mocked(xmlFormat)).toHaveBeenCalledWith('Input text', {
-      indentation: '  ',
-      lineSeparator: '\n',
-      collapseContent: true,
-      whiteSpaceAtEndOfSelfclosingTag: true,
-    });
-    expect(container).toHaveTextContent('Xml formatted input text');
-  });
-});
diff --git a/packages/webui/src/components/XmlDisplay.tsx b/packages/webui/src/components/XmlDisplay.tsx
deleted file mode 100644
index 408c1df..0000000
--- a/packages/webui/src/components/XmlDisplay.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import xmlFormat from 'xml-formatter';
-
-import Code from './Code';
-
-type XmlDisplayProps = React.HTMLAttributes<HTMLElement> & {
-  children: string;
-};
-
-export default function XmlDisplay({ children, ...props }: XmlDisplayProps) {
-  const formattedXml = xmlFormat(children, {
-    indentation: '  ',
-    lineSeparator: '\n',
-    collapseContent: true,
-    whiteSpaceAtEndOfSelfclosingTag: true,
-  });
-
-  return (
-    <Code prettify={false} {...props}>
-      {formattedXml}
-    </Code>
-  );
-}
diff --git a/packages/webui/src/components/index.ts b/packages/webui/src/components/index.ts
index d98d9d2..3190c60 100644
--- a/packages/webui/src/components/index.ts
+++ b/packages/webui/src/components/index.ts
@@ -16,4 +16,3 @@ export { default as Menu } from './Menu';
 export { default as SearchInput } from './SearchInput';
 export { default as Section } from './Section';
 export { default as ToggleSwitch } from './ToggleSwitch';
-export { default as XmlDisplay } from './XmlDisplay';

From eee97214da0a9398f8b9e09223a8a582faf80edc Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 10:24:39 -0600
Subject: [PATCH 08/12] Add xml formatting

---
 packages/webui/src/components/CodeDisplay.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/webui/src/components/CodeDisplay.tsx b/packages/webui/src/components/CodeDisplay.tsx
index f29aa91..9c76045 100644
--- a/packages/webui/src/components/CodeDisplay.tsx
+++ b/packages/webui/src/components/CodeDisplay.tsx
@@ -1,5 +1,6 @@
 import { safeParseJson } from '@envyjs/core';
 import { Suspense, lazy } from 'react';
+import formatXml from 'xml-formatter';
 
 import { MonacoEditorProps } from './MonacoEditor';
 
@@ -28,13 +29,19 @@ export default function CodeDisplay({ data, contentType }: CodeDisplayProps) {
   resolvedContentType = resolvedContentType && resolvedContentType.split(';')[0];
   const lang = resolvedContentType ? languageMap[resolvedContentType as string] : 'txt';
 
-  // TODO: Add support for XML formatting
   let value = data;
   if (lang === 'json') {
     const parseResult = safeParseJson(data);
     if (parseResult.value) {
       value = JSON.stringify(parseResult.value, null, 2);
     }
+  } else if (lang === 'xml') {
+    value = formatXml(data, {
+      indentation: '  ',
+      lineSeparator: '\n',
+      collapseContent: true,
+      whiteSpaceAtEndOfSelfclosingTag: true,
+    });
   }
 
   return (

From 9531b8b91990205630f406afe53ca9961fca8ca3 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Fri, 10 Nov 2023 10:24:59 -0600
Subject: [PATCH 09/12] Add nested multi level folding

---
 .../webui/src/components/MonacoEditor.tsx     | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/webui/src/components/MonacoEditor.tsx b/packages/webui/src/components/MonacoEditor.tsx
index 900068d..4ac7813 100644
--- a/packages/webui/src/components/MonacoEditor.tsx
+++ b/packages/webui/src/components/MonacoEditor.tsx
@@ -1,4 +1,5 @@
 import { Editor, EditorProps, OnMount } from '@monaco-editor/react';
+import { useEffect, useRef } from 'react';
 import colors from 'tailwindcss/colors';
 
 export type MonacoEditorProps = Pick<EditorProps, 'value' | 'language'>;
@@ -13,20 +14,37 @@ const editorOptions: EditorProps['options'] = {
   lineNumbers: 'off',
 };
 
-const setEditorTheme: OnMount = (editor, monaco) => {
-  monaco.editor.defineTheme('envy', {
-    base: 'vs',
-    inherit: true,
-    colors: {
-      'editor.background': colors.gray['200'],
-      'editor.lineHighlightBackground': colors.gray['200'],
-    },
-    rules: [],
-  });
-  monaco.editor.setTheme('envy');
-  editor.trigger('fold', 'editor.foldLevel4', {});
-};
-
 export default function MonacoEditor({ value, language }: MonacoEditorProps) {
-  return <Editor value={value} language={language} options={editorOptions} onMount={setEditorTheme} />;
+  const editorRef = useRef<Parameters<OnMount>['0'] | null>(null);
+
+  const executeFolding = () => {
+    if (!editorRef.current) return;
+
+    // fold deeply nested objects
+    editorRef.current?.trigger('fold', 'editor.foldLevel7', {});
+    editorRef.current?.trigger('fold', 'editor.foldLevel6', {});
+    editorRef.current?.trigger('fold', 'editor.foldLevel5', {});
+    editorRef.current?.trigger('fold', 'editor.foldLevel4', {});
+  };
+
+  const onMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor;
+
+    monaco.editor.defineTheme('envy', {
+      base: 'vs',
+      inherit: true,
+      colors: {
+        'editor.background': colors.gray['200'],
+        'editor.lineHighlightBackground': colors.gray['200'],
+      },
+      rules: [],
+    });
+    monaco.editor.setTheme('envy');
+
+    executeFolding();
+  };
+
+  useEffect(executeFolding, [value, language]);
+
+  return <Editor value={value} language={language} options={editorOptions} onMount={onMount} />;
 }

From f2264acc95f4ca1708a1495169add2f6dd0c00fb Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Mon, 13 Nov 2023 08:11:32 -0600
Subject: [PATCH 10/12] Add hover effect to auth viewer

---
 packages/webui/src/components/Authorization.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webui/src/components/Authorization.tsx b/packages/webui/src/components/Authorization.tsx
index 9cab1d0..e41c533 100644
--- a/packages/webui/src/components/Authorization.tsx
+++ b/packages/webui/src/components/Authorization.tsx
@@ -83,13 +83,13 @@ export default function Authorization({ value }: AuthorizationProps) {
             return (
               <div
                 data-test-id="token-minimal-view"
-                className="flex"
+                className="flex hover:bg-gray-100 rounded-sm cursor-pointer"
                 onClick={() => setTokenState(TokenState.Expanded)}
               >
                 <div className="clamp">
                   {type} {token}
                 </div>
-                <div className="flex items-center justify-end ml-auto cursor-pointer">
+                <div className="flex items-center justify-end ml-auto">
                   <ChevronDown className="w-4 h-4" />
                 </div>
               </div>

From 02d3c407b1781e0ff2b7b1d2fe65c7ae34dea504 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Mon, 13 Nov 2023 08:15:43 -0600
Subject: [PATCH 11/12] Hide response headers when request is aborted

---
 packages/webui/src/components/ui/TraceDetail.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/webui/src/components/ui/TraceDetail.tsx b/packages/webui/src/components/ui/TraceDetail.tsx
index 072f771..23b2c45 100644
--- a/packages/webui/src/components/ui/TraceDetail.tsx
+++ b/packages/webui/src/components/ui/TraceDetail.tsx
@@ -34,6 +34,7 @@ export default function TraceDetail() {
   const { method, host, url, requestHeaders, statusCode, statusMessage, responseHeaders, duration, state } = http || {};
   const requestAborted = state === HttpRequestState.Aborted;
   const responseComplete = state !== HttpRequestState.Sent;
+  const showResponseHeaders = state === HttpRequestState.Received;
 
   const updateTimer = useCallback(() => {
     if (counterElRef.current) {
@@ -168,7 +169,7 @@ export default function TraceDetail() {
             )}
           </Section>
 
-          {responseComplete && duration && (
+          {showResponseHeaders && (
             <>
               <Section data-test-id="request-headers" title="Response Headers">
                 <ResponseHeaders data-test-id="headers" trace={trace} />

From c3b16d6b28a371ddf737fc13a643e0d280fc13f2 Mon Sep 17 00:00:00 2001
From: Charlie Brown <carbonrobot@gmail.com>
Date: Mon, 13 Nov 2023 09:12:51 -0600
Subject: [PATCH 12/12] Editor has built in lazy loading

---
 packages/webui/src/components/CodeDisplay.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/webui/src/components/CodeDisplay.tsx b/packages/webui/src/components/CodeDisplay.tsx
index 9c76045..a46041b 100644
--- a/packages/webui/src/components/CodeDisplay.tsx
+++ b/packages/webui/src/components/CodeDisplay.tsx
@@ -1,10 +1,7 @@
 import { safeParseJson } from '@envyjs/core';
-import { Suspense, lazy } from 'react';
 import formatXml from 'xml-formatter';
 
-import { MonacoEditorProps } from './MonacoEditor';
-
-const Editor = lazy<React.ComponentType<MonacoEditorProps>>(async () => await import('./MonacoEditor'));
+import Editor, { MonacoEditorProps } from './MonacoEditor';
 
 type CodeDisplayProps = {
   contentType?: string | string[] | null;
@@ -45,10 +42,8 @@ export default function CodeDisplay({ data, contentType }: CodeDisplayProps) {
   }
 
   return (
-    <Suspense fallback={<></>}>
-      <div className="w-full h-full">
-        <Editor value={value} language={lang} />
-      </div>
-    </Suspense>
+    <div className="w-full h-full">
+      <Editor value={value} language={lang} />
+    </div>
   );
 }