refactor(console): replace monaco editor with prism highlighter

packages/console/package.json

@@ -21,7 +21,6 @@
     "@logto/react": "^0.1.5",
     "@logto/schemas": "^0.1.0",
     "@mdx-js/react": "^1.6.22",
-    "@monaco-editor/react": "^4.3.1",
     "@parcel/core": "^2.5.0",
     "@parcel/transformer-mdx": "^2.5.0",
     "@parcel/transformer-sass": "^2.5.0",
@@ -37,6 +36,7 @@
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "@types/react-modal": "^3.13.1",
+    "@types/react-syntax-highlighter": "^15.5.1",
     "classnames": "^2.3.1",
     "csstype": "^3.0.11",
     "dayjs": "^1.10.5",
@@ -47,7 +47,6 @@
     "ky": "^0.30.0",
     "lint-staged": "^12.0.0",
     "lodash.kebabcase": "^4.1.1",
-    "monaco-editor": "^0.33.0",
     "nanoid": "^3.1.23",
     "parcel": "^2.5.0",
     "postcss": "^8.4.6",
@@ -65,6 +64,7 @@
     "react-modal": "^3.14.4",
     "react-paginate": "^8.1.2",
     "react-router-dom": "^6.2.2",
+    "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^3.0.1",
     "stylelint": "^13.13.1",
     "swr": "^1.2.2",

packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx

@@ -61,14 +61,17 @@ pnpm build
 
 Add the following code to your main html file. You may need client ID and authorization domain.
 
-```typescript
+```tsx
 import { LogtoProvider, LogtoConfig } from '@logto/react';
 import React from 'react';
 
 //...
 
 const App = () => {
-  const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+  const config: LogtoConfig = {
+    clientId: 'foo',
+    endpoint: 'https://your-endpoint-domain.com'
+  };
 
   return (
     <BrowserRouter>
@@ -109,7 +112,7 @@ The Logto React SDK provides you tools and hooks to quickly implement your own a
 
 Add the following code to your web app
 
-```typescript
+```tsx
 import React from 'react';
 import { useLogto } from '@logto/react';
 
@@ -125,7 +128,7 @@ export default SignInButton;
 
 ### Retrieve Auth Status
 
-```typescript
+```tsx
 import React from "react";
 import { useLogto } from '@logto/react';
 
@@ -159,7 +162,7 @@ Execute signOut() methods will redirect users to the Logto sign out page. After
 
 Add the following code to your web app
 
-```typescript
+```tsx
 import React from 'react';
 import { useLogto } from '@logto/react';
 

packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx

@@ -62,14 +62,17 @@ pnpm build
 在项目的 html 文件中，加入如下代码（需提前准备好 client ID 以及 authorization domain）
 Add the following code to your main html file. You may need client ID and authorization domain.
 
-```typescript
+```tsx
 import { LogtoProvider, LogtoConfig } from '@logto/react';
 import React from 'react';
 
 //...
 
 const App = () => {
-  const config: LogtoConfig = { clientId: 'foo', endpoint: 'https://your-endpoint-domain.com' };
+  const config: LogtoConfig = {
+    clientId: 'foo',
+    endpoint: 'https://your-endpoint-domain.com'
+  };
 
   return (
     <BrowserRouter>
@@ -110,7 +113,7 @@ The Logto React SDK provides you tools and hooks to quickly implement your own a
 
 Add the following code to your web app
 
-```typescript
+```tsx
 import React from 'react';
 import { useLogto } from '@logto/react';
 
@@ -126,7 +129,7 @@ export default SignInButton;
 
 ### Retrieve Auth Status
 
-```typescript
+```tsx
 import React from "react";
 import { useLogto } from '@logto/react';
 
@@ -160,7 +163,7 @@ Execute signOut() methods will redirect users to the Logto sign out page. After
 
 Add the following code to your web app
 
-```typescript
+```tsx
 import React from 'react';
 import { useLogto } from '@logto/react';
 

packages/console/src/components/CodeEditor/index.module.scss

@@ -1,20 +1,52 @@
 @use '@/scss/underscore' as _;
 
-.editor {
-  border-radius: _.unit(4);
-  padding: _.unit(4) 0;
-  // Use fixed color for both light and dark mode, the same as vs-dark.
-  background: #1e1e1e;
+.container {
+  padding: _.unit(6);
+  border-radius: 16px;
+  // Force dark theme on the code editor
+  background: #2d3132;
+  position: relative;
 
-  .actions {
+  .copy {
     display: flex;
     align-items: center;
     justify-content: right;
-    padding: 0 _.unit(4);
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    opacity: 0%;
+    transition: opacity 0.2s ease-in-out;
+    z-index: 1;
+    cursor: pointer;
+  }
 
-    button:hover {
-      // Clear icons background style since the background color is fixed.
-      background: unset;
+  &:hover {
+    .copy {
+      opacity: 100%;
+    }
+  }
+
+  .editor {
+    position: relative;
+
+    textarea {
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: none;
+      font-size: 14px;
+      line-height: 1.5;
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      white-space: pre-wrap;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      position: absolute;
+      inset: 0;
+      resize: none;
+      color: #fefefe;
+      overflow: hidden;
+      -webkit-text-fill-color: transparent;
+      outline: none;
     }
   }
 }

packages/console/src/components/CodeEditor/index.tsx

@@ -1,61 +1,52 @@
-import MonacoEditor from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-import React from 'react';
+import React, { ChangeEvent } from 'react';
+import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+// eslint-disable-next-line node/file-extension-in-import
+import { a11yDark as theme } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-import Copy from '@/icons/Copy';
-
-import IconButton from '../IconButton';
+import CopyToClipboard from '../CopyToClipboard';
 import * as styles from './index.module.scss';
 
 type Props = {
   language?: string;
-  height?: string;
   isReadonly?: boolean;
   value?: string;
   onChange?: (value: string) => void;
 };
 
-const CodeEditor = ({ value, onChange, language, height = '300px', isReadonly = false }: Props) => {
-  const handleChange = (changedValue = '') => {
-    onChange?.(changedValue);
-  };
-
-  const handleCopy = async () => {
-    if (!value) {
-      return;
-    }
-    await navigator.clipboard.writeText(value);
-  };
-
-  // See https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.EditorOption.html
-  const options: monaco.editor.IStandaloneEditorConstructionOptions = {
-    readOnly: isReadonly,
-    scrollBeyondLastLine: false,
-    codeLens: false,
-    minimap: {
-      enabled: false,
-    },
-    folding: false,
-    scrollbar: {
-      alwaysConsumeMouseWheel: false,
-    },
+const CodeEditor = ({ language, isReadonly = false, value = '', onChange }: Props) => {
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange?.(event.currentTarget.value);
   };
 
   return (
-    <div className={styles.editor}>
-      <div className={styles.actions}>
-        <IconButton onClick={handleCopy}>
-          <Copy />
-        </IconButton>
+    <div className={styles.container}>
+      <CopyToClipboard value={value} variant="icon" className={styles.copy} />
+      <div className={styles.editor}>
+        <textarea
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          data-gramm="false"
+          readOnly={isReadonly}
+          spellCheck="false"
+          onChange={handleChange}
+        >
+          {value}
+        </textarea>
+        <SyntaxHighlighter
+          customStyle={{
+            background: 'transparent',
+            fontSize: '14px',
+            margin: '0',
+            padding: '0',
+            borderRadius: '0',
+          }}
+          language={language}
+          style={theme}
+        >
+          {value}
+        </SyntaxHighlighter>
       </div>
-      <MonacoEditor
-        language={language}
-        height={height}
-        theme="vs-dark"
-        value={value}
-        options={options}
-        onChange={handleChange}
-      />
     </div>
   );
 };

packages/console/src/components/CopyToClipboard/index.module.scss

@@ -33,6 +33,18 @@
       }
     }
   }
+
+  &.icon {
+    .row {
+      > svg {
+        fill: rgba(#fff, 0.8);
+
+        &:hover {
+          fill: #fff;
+        }
+      }
+    }
+  }
 }
 
 div.successTooltip {

packages/console/src/components/CopyToClipboard/index.tsx

@@ -8,7 +8,7 @@ import * as styles from './index.module.scss';
 type Props = {
   value: string;
   className?: string;
-  variant?: 'text' | 'contained' | 'border';
+  variant?: 'text' | 'contained' | 'border' | 'icon';
 };
 
 const CopyIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
@@ -53,7 +53,7 @@ const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) =>
       }}
     >
       <div className={styles.row}>
-        {value}
+        {variant === 'icon' ? null : value}
         <CopyIcon ref={copyIconReference} onClick={copy} />
         <Tooltip
           className={classNames(copyState === 'copied' && styles.successTooltip)}

packages/console/src/pages/Guide/index.tsx

@@ -114,9 +114,6 @@ const Guide = ({
 
                   return <CodeEditor isReadonly language={language} value={String(children)} />;
                 },
-                hr: () => null,
-                h1: () => null,
-                h2: () => null,
               }}
             >
               <Suspense fallback={<div>Loading...</div>}>

packages/console/src/pages/UserDetails/index.tsx

@@ -249,7 +249,7 @@ const UserDetails = () => {
                   title="admin_console.user_details.field_custom_data"
                   className={styles.textField}
                 >
-                  <CodeEditor height="200px" language="json" value={value} onChange={onChange} />
+                  <CodeEditor language="json" value={value} onChange={onChange} />
                 </FormField>
               </div>
               <div className={detailsStyles.footer}>

pnpm-lock.yaml

@@ -439,7 +439,6 @@ importers:
       '@logto/react': ^0.1.5
       '@logto/schemas': ^0.1.0
       '@mdx-js/react': ^1.6.22
-      '@monaco-editor/react': ^4.3.1
       '@parcel/core': ^2.5.0
       '@parcel/transformer-mdx': ^2.5.0
       '@parcel/transformer-sass': ^2.5.0
@@ -455,6 +454,7 @@ importers:
       '@types/react': ^17.0.14
       '@types/react-dom': ^17.0.9
       '@types/react-modal': ^3.13.1
+      '@types/react-syntax-highlighter': ^15.5.1
       classnames: ^2.3.1
       csstype: ^3.0.11
       dayjs: ^1.10.5
@@ -465,7 +465,6 @@ importers:
       ky: ^0.30.0
       lint-staged: ^12.0.0
       lodash.kebabcase: ^4.1.1
-      monaco-editor: ^0.33.0
       nanoid: ^3.1.23
       parcel: ^2.5.0
       postcss: ^8.4.6
@@ -483,6 +482,7 @@ importers:
       react-modal: ^3.14.4
       react-paginate: ^8.1.2
       react-router-dom: ^6.2.2
+      react-syntax-highlighter: ^15.5.0
       remark-gfm: ^3.0.1
       stylelint: ^13.13.1
       swr: ^1.2.2
@@ -492,7 +492,6 @@ importers:
       '@logto/react': 0.1.5_react@17.0.2
       '@logto/schemas': link:../schemas
       '@mdx-js/react': 1.6.22_react@17.0.2
-      '@monaco-editor/react': 4.3.1_m23risk2t2ktwbmyoufat5z4ue
       '@parcel/core': 2.5.0
       '@parcel/transformer-mdx': 2.5.0_qizmsa7ujgewn5fdmmvyi6cykq
       '@parcel/transformer-sass': 2.5.0_@parcel+core@2.5.0
@@ -508,6 +507,7 @@ importers:
       '@types/react': 17.0.37
       '@types/react-dom': 17.0.11
       '@types/react-modal': 3.13.1
+      '@types/react-syntax-highlighter': 15.5.1
       classnames: 2.3.1
       csstype: 3.0.11
       dayjs: 1.10.7
@@ -518,7 +518,6 @@ importers:
       ky: 0.30.0
       lint-staged: 12.4.0
       lodash.kebabcase: 4.1.1
-      monaco-editor: 0.33.0
       nanoid: 3.3.1
       parcel: 2.5.0_postcss@8.4.6
       postcss: 8.4.6
@@ -536,6 +535,7 @@ importers:
       react-modal: 3.14.4_sfoxds7t5ydpegc3knd667wn6m
       react-paginate: 8.1.2_react@17.0.2
       react-router-dom: 6.2.2_sfoxds7t5ydpegc3knd667wn6m
+      react-syntax-highlighter: 15.5.0_react@17.0.2
       remark-gfm: 3.0.1
       stylelint: 13.13.1
       swr: 1.2.2_react@17.0.2
@@ -4131,7 +4131,6 @@ packages:
       pacote: 11.3.5
       semver: 7.3.5
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4300,7 +4299,6 @@ packages:
       whatwg-url: 8.7.0
       yargs-parser: 20.2.4
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4498,7 +4496,6 @@ packages:
       npm-registry-fetch: 9.0.0
       npmlog: 4.1.2
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4528,7 +4525,6 @@ packages:
       pify: 5.0.0
       read-package-json: 3.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -4663,7 +4659,6 @@ packages:
       pacote: 11.3.5
       semver: 7.3.5
     transitivePeerDependencies:
-      - bluebird
       - encoding
       - supports-color
     dev: true
@@ -4919,29 +4914,6 @@ packages:
       json5: 2.2.1
     dev: true
 
-  /@monaco-editor/loader/1.2.0_monaco-editor@0.33.0:
-    resolution: {integrity: sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==}
-    peerDependencies:
-      monaco-editor: '>= 0.21.0 < 1'
-    dependencies:
-      monaco-editor: 0.33.0
-      state-local: 1.0.7
-    dev: true
-
-  /@monaco-editor/react/4.3.1_m23risk2t2ktwbmyoufat5z4ue:
-    resolution: {integrity: sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==}
-    peerDependencies:
-      monaco-editor: '>= 0.25.0 < 1'
-      react: ^16.8.0 || ^17.0.0
-      react-dom: ^16.8.0 || ^17.0.0
-    dependencies:
-      '@monaco-editor/loader': 1.2.0_monaco-editor@0.33.0
-      monaco-editor: 0.33.0
-      prop-types: 15.8.1
-      react: 17.0.2
-      react-dom: 17.0.2_react@17.0.2
-    dev: true
-
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4985,8 +4957,6 @@ packages:
       promise-retry: 2.0.1
       semver: 7.3.5
       which: 2.0.2
-    transitivePeerDependencies:
-      - bluebird
     dev: true
 
   /@npmcli/installed-package-contents/1.0.7:
@@ -5987,7 +5957,6 @@ packages:
       stylelint-config-xo-scss: 0.14.0_stylelint@13.13.1
     transitivePeerDependencies:
       - eslint
-      - eslint-import-resolver-webpack
       - prettier
       - supports-color
       - typescript
@@ -6011,7 +5980,7 @@ packages:
       eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       eslint-plugin-consistent-default-export-name: 0.0.7
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       eslint-plugin-no-use-extend-native: 0.5.0
       eslint-plugin-node: 11.1.0_eslint@8.10.0
       eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@@ -6021,7 +5990,6 @@ packages:
       prettier: 2.5.1
       typescript: 4.6.2
     transitivePeerDependencies:
-      - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
@@ -6043,7 +6011,7 @@ packages:
       eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       eslint-plugin-consistent-default-export-name: 0.0.7
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       eslint-plugin-no-use-extend-native: 0.5.0
       eslint-plugin-node: 11.1.0_eslint@8.10.0
       eslint-plugin-prettier: 3.4.1_6pitu4b2tqihty6rv5qeiyb35m
@@ -6053,7 +6021,6 @@ packages:
       prettier: 2.5.1
       typescript: 4.6.3
     transitivePeerDependencies:
-      - eslint-import-resolver-webpack
       - supports-color
     dev: true
 
@@ -6168,7 +6135,7 @@ packages:
     dependencies:
       '@babel/core': 7.16.0
       postcss: 7.0.39
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6181,7 +6148,7 @@ packages:
       postcss-syntax: '>=0.36.2'
     dependencies:
       postcss: 7.0.39
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
       remark: 13.0.0
       unist-util-find-all-after: 3.0.2
     transitivePeerDependencies:
@@ -6824,6 +6791,12 @@ packages:
       '@types/react': 17.0.37
     dev: true
 
+  /@types/react-syntax-highlighter/15.5.1:
+    resolution: {integrity: sha512-+yD6D8y21JqLf89cRFEyRfptVMqo2ROHyAlysRvFwT28gT5gDo3KOiXHwGilHcq9y/OKTjlWK0f/hZUicrBFPQ==}
+    dependencies:
+      '@types/react': 17.0.37
+    dev: true
+
   /@types/react/17.0.37:
     resolution: {integrity: sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==}
     dependencies:
@@ -7975,8 +7948,6 @@ packages:
       qs: 6.9.7
       raw-body: 2.4.3
       type-is: 1.6.18
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /bonjour-service/1.0.11:
@@ -8176,8 +8147,6 @@ packages:
       ssri: 8.0.1
       tar: 6.1.11
       unique-filename: 1.1.1
-    transitivePeerDependencies:
-      - bluebird
     dev: true
 
   /cache-content-type/1.0.1:
@@ -8692,8 +8661,6 @@ packages:
       on-headers: 1.0.2
       safe-buffer: 5.1.2
       vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /concat-map/0.0.1:
@@ -9247,22 +9214,12 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.0.0
     dev: true
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
     dependencies:
       ms: 2.1.3
 
@@ -9481,8 +9438,6 @@ packages:
     dependencies:
       address: 1.1.2
       debug: 2.6.9
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /detect-port/1.3.0:
@@ -9492,8 +9447,6 @@ packages:
     dependencies:
       address: 1.1.2
       debug: 2.6.9
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /dezalgo/1.0.3:
@@ -9956,8 +9909,6 @@ packages:
     dependencies:
       debug: 3.2.7
       resolve: 1.22.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /eslint-import-resolver-typescript/2.5.0_rnagsyfcubvpoxo2ynj23pim7u:
@@ -9969,7 +9920,7 @@ packages:
     dependencies:
       debug: 4.3.3
       eslint: 8.10.0
-      eslint-plugin-import: 2.25.4_sidoke6kqbkbdht6nlmwbfnany
+      eslint-plugin-import: 2.25.4_eslint@8.10.0
       glob: 7.2.0
       is-glob: 4.0.3
       resolve: 1.22.0
@@ -9978,31 +9929,12 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.3_l62aq42yiamaj3cnpuf6avthf4:
+  /eslint-module-utils/2.7.3:
     resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
     engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.14.0_6ued5m2uqo2r7ksfjlk2bzosza
       debug: 3.2.7
-      eslint-import-resolver-node: 0.3.6
-      eslint-import-resolver-typescript: 2.5.0_rnagsyfcubvpoxo2ynj23pim7u
       find-up: 2.1.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /eslint-plugin-consistent-default-export-name/0.0.7:
@@ -10037,24 +9969,19 @@ packages:
       ignore: 5.2.0
     dev: true
 
-  /eslint-plugin-import/2.25.4_sidoke6kqbkbdht6nlmwbfnany:
+  /eslint-plugin-import/2.25.4_eslint@8.10.0:
     resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==}
     engines: {node: '>=4'}
     peerDependencies:
-      '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.14.0_6ued5m2uqo2r7ksfjlk2bzosza
       array-includes: 3.1.4
       array.prototype.flat: 1.2.5
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.10.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3_l62aq42yiamaj3cnpuf6avthf4
+      eslint-module-utils: 2.7.3
       has: 1.0.3
       is-core-module: 2.8.1
       is-glob: 4.0.3
@@ -10062,10 +9989,6 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.0
       tsconfig-paths: 3.13.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
     dev: true
 
   /eslint-plugin-no-use-extend-native/0.5.0:
@@ -10457,8 +10380,6 @@ packages:
       type-is: 1.6.18
       utils-merge: 1.0.1
       vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /extend-shallow/2.0.1:
@@ -10557,6 +10478,12 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /fault/1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+    dependencies:
+      format: 0.2.2
+    dev: true
+
   /faye-websocket/0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
     engines: {node: '>=0.8.0'}
@@ -10660,8 +10587,6 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /find-cache-dir/3.3.2:
@@ -10808,6 +10733,11 @@ packages:
       mime-types: 2.1.34
     dev: true
 
+  /format/0.2.2:
+    resolution: {integrity: sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=}
+    engines: {node: '>=0.4.x'}
+    dev: true
+
   /formidable/2.0.1:
     resolution: {integrity: sha512-rjTMNbp2BpfQShhFbR3Ruk3qk2y9jKpvMW78nJgx8QKtxjDVrwbZG+wvDOmVbifHyOUOQJXxqEy6r0faRrPzTQ==}
     dependencies:
@@ -11436,6 +11366,10 @@ packages:
     resolution: {integrity: sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==}
     engines: {node: '>=8'}
 
+  /highlight.js/10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: true
+
   /history/4.10.1:
     resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
     dependencies:
@@ -13401,7 +13335,6 @@ packages:
       import-local: 3.1.0
       npmlog: 4.1.2
     transitivePeerDependencies:
-      - bluebird
       - encoding
       - supports-color
     dev: true
@@ -13436,7 +13369,6 @@ packages:
       npm-package-arg: 8.1.5
       npm-registry-fetch: 11.0.0
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -13450,7 +13382,6 @@ packages:
       semver: 7.3.5
       ssri: 8.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -13767,6 +13698,13 @@ packages:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
     engines: {node: '>=8'}
 
+  /lowlight/1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+    dev: true
+
   /lru-cache/6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -13815,7 +13753,6 @@ packages:
       socks-proxy-agent: 5.0.1
       ssri: 8.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -13840,7 +13777,6 @@ packages:
       socks-proxy-agent: 6.1.1
       ssri: 8.0.1
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -14600,10 +14536,6 @@ packages:
     resolution: {integrity: sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==}
     dev: false
 
-  /monaco-editor/0.33.0:
-    resolution: {integrity: sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==}
-    dev: true
-
   /mri/1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -14966,7 +14898,6 @@ packages:
       minizlib: 2.1.2
       npm-package-arg: 8.1.5
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -14983,7 +14914,6 @@ packages:
       minizlib: 2.1.2
       npm-package-arg: 8.1.5
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -15427,7 +15357,6 @@ packages:
       ssri: 8.0.1
       tar: 6.1.11
     transitivePeerDependencies:
-      - bluebird
       - supports-color
     dev: true
 
@@ -15829,8 +15758,6 @@ packages:
       async: 2.6.3
       debug: 3.2.7
       mkdirp: 0.5.5
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /postcss-calc/8.2.4_postcss@8.4.13:
@@ -15920,7 +15847,7 @@ packages:
     dependencies:
       htmlparser2: 3.10.1
       postcss: 7.0.39
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
     dev: true
 
   /postcss-less/3.1.4:
@@ -16320,31 +16247,12 @@ packages:
       svgo: 2.8.0
     dev: true
 
-  /postcss-syntax/0.36.2_kei4jy7wdgbhc236h4oijypxom:
+  /postcss-syntax/0.36.2_postcss@7.0.39:
     resolution: {integrity: sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==}
     peerDependencies:
       postcss: '>=5.0.0'
-      postcss-html: '*'
-      postcss-jsx: '*'
-      postcss-less: '*'
-      postcss-markdown: '*'
-      postcss-scss: '*'
-    peerDependenciesMeta:
-      postcss-html:
-        optional: true
-      postcss-jsx:
-        optional: true
-      postcss-less:
-        optional: true
-      postcss-markdown:
-        optional: true
-      postcss-scss:
-        optional: true
     dependencies:
       postcss: 7.0.39
-      postcss-html: 0.36.0_j55xdkkcxc32kvnyvx3y7casfm
-      postcss-less: 3.1.4
-      postcss-scss: 2.1.1
     dev: true
 
   /postcss-unique-selectors/5.1.1_postcss@8.4.13:
@@ -16565,11 +16473,6 @@ packages:
 
   /promise-inflight/1.0.1:
     resolution: {integrity: sha1-mEcocL8igTL8vdhoEputEsPAKeM=}
-    peerDependencies:
-      bluebird: '*'
-    peerDependenciesMeta:
-      bluebird:
-        optional: true
     dev: true
 
   /promise-retry/2.0.1:
@@ -16847,7 +16750,6 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - eslint
-      - supports-color
       - typescript
       - vue-template-compiler
       - webpack
@@ -17142,6 +17044,19 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /react-syntax-highlighter/15.5.0_react@17.0.2:
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+    dependencies:
+      '@babel/runtime': 7.17.9
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.27.0
+      react: 17.0.2
+      refractor: 3.6.0
+    dev: true
+
   /react-textarea-autosize/8.3.3_z7w6vgz62d5pbxpnoxayoqdmly:
     resolution: {integrity: sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==}
     engines: {node: '>=10'}
@@ -17344,6 +17259,14 @@ packages:
       '@babel/runtime': 7.17.9
     dev: true
 
+  /refractor/3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+    dev: true
+
   /regenerate-unicode-properties/10.0.1:
     resolution: {integrity: sha512-vn5DU6yg6h8hP/2OkQo3K7uVILvY4iu0oI4t3HFa81UPkhGJwkRwM10JEc3upjdhHjs/k8GJY1sRBhk5sr69Bw==}
     engines: {node: '>=4'}
@@ -17935,8 +17858,6 @@ packages:
       on-finished: 2.3.0
       range-parser: 1.2.1
       statuses: 1.5.0
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /serialize-error/7.0.1:
@@ -17983,8 +17904,6 @@ packages:
       http-errors: 1.6.3
       mime-types: 2.1.35
       parseurl: 1.3.3
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /serve-static/1.14.2:
@@ -17995,8 +17914,6 @@ packages:
       escape-html: 1.0.3
       parseurl: 1.3.3
       send: 0.17.2
-    transitivePeerDependencies:
-      - supports-color
     dev: true
 
   /set-blocking/2.0.0:
@@ -18501,10 +18418,6 @@ packages:
       escape-string-regexp: 2.0.0
     dev: true
 
-  /state-local/1.0.7:
-    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
-    dev: true
-
   /state-toggle/1.0.3:
     resolution: {integrity: sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==}
     dev: true
@@ -18830,7 +18743,7 @@ packages:
       postcss-sass: 0.4.4
       postcss-scss: 2.1.1
       postcss-selector-parser: 6.0.9
-      postcss-syntax: 0.36.2_kei4jy7wdgbhc236h4oijypxom
+      postcss-syntax: 0.36.2_postcss@7.0.39
       postcss-value-parser: 4.2.0
       resolve-from: 5.0.0
       slash: 3.0.0
@@ -18844,8 +18757,6 @@ packages:
       v8-compile-cache: 2.3.0
       write-file-atomic: 3.0.3
     transitivePeerDependencies:
-      - postcss-jsx
-      - postcss-markdown
       - supports-color
     dev: true