diff --git a/apps/total-typescript/package.json b/apps/total-typescript/package.json index b875621011..da1f833c2a 100644 --- a/apps/total-typescript/package.json +++ b/apps/total-typescript/package.json @@ -52,6 +52,7 @@ "@mdx-js/loader": "^2.3.0", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", + "@monaco-editor/react": "^4.6.0", "@mux/mux-node": "^7.3.1", "@mux/mux-player-react": "2.3.2", "@next/mdx": "^14.1.3", diff --git a/apps/total-typescript/src/components/code-editor/code-editor.tsx b/apps/total-typescript/src/components/code-editor/code-editor.tsx new file mode 100644 index 0000000000..0cf02b0e3f --- /dev/null +++ b/apps/total-typescript/src/components/code-editor/code-editor.tsx @@ -0,0 +1,179 @@ +import Editor from '@monaco-editor/react' +import {ComponentProps, useRef, useState} from 'react' +import {prettierLoader} from './prettier-loader' + +type Editor = Parameters< + NonNullable['onMount']> +>[0] + +type Monaco = Parameters< + NonNullable['onMount']> +>[1] + +const resolveLanguage = (language: Language | undefined): Language => { + switch (language) { + case 'ts': + case undefined: + return 'typescript' + case 'js': + return 'javascript' + default: + return language + } +} + +export type Language = + | 'ts' + | 'tsx' + | 'typescript' + | 'json' + | 'js' + | 'javascript' + +const THEME_NAME = 'total-typescript' + +const EDITOR_THEME = { + base: 'vs-dark' as const, + inherit: true, + rules: [], + name: THEME_NAME, + colors: {'editor.background': '#1e2632'}, +} + +export type CodeEditorProps = { + language?: Language + code: string + className?: string + fontSize?: number + readonly?: boolean + onChange?: (code: string | undefined) => void + onEmittedJavaScript?: (code: string) => void +} + +let incrementable = 0 + +/** + * Eagerly loaded code editor + * + * This should not be used directly, instead use ./lazy-loaded-editor.tsx + */ +export const EagerlyLoadedEditor = (props: CodeEditorProps) => { + // Needs to be a different file name for each editor on-screen + const [path] = useState(() => { + incrementable++ + return `main-${incrementable}.ts` + }) + + const monacoRef = useRef(undefined) + const editorRef = useRef(undefined) + + const reportEmittedJavaScript = async (): Promise => { + if (!props.onEmittedJavaScript) { + return + } + + if (!editorRef.current || !monacoRef.current) { + return + } + + const uri = editorRef.current?.getModel()?.uri + + if (!uri) { + return + } + + try { + const worker = + await monacoRef.current.languages.typescript.getTypeScriptWorker() + + const client = await worker(uri) + + const emitOutput = await client.getEmitOutput(uri.toString()) + + props.onEmittedJavaScript(emitOutput.outputFiles[0].text) + } catch (e) { + console.error('Getting emitted JavaScript failed', e) + } + } + + return ( + Loading Code Editor...} + // height={getHeight(props.code)} + {...(props.readonly + ? { + value: props.code, + } + : { + defaultValue: props.code, + })} + onChange={(code) => { + props.onChange?.(code) + + reportEmittedJavaScript() + }} + language={resolveLanguage(props.language)} + options={{ + minimap: {enabled: false, showSlider: 'mouseover'}, + fontSize: props.fontSize ?? 16, + glyphMargin: false, + tabSize: 2, + lineNumbers: 'off', + scrollbar: { + vertical: 'hidden', + horizontal: 'auto', + }, + automaticLayout: true, + readOnly: props.readonly, + scrollBeyondLastLine: true, + }} + onMount={(editor, monaco) => { + monacoRef.current = monaco + editorRef.current = editor + + // Enable prettier + monaco.languages.registerDocumentFormattingEditProvider('typescript', { + provideDocumentFormattingEdits: async (model) => { + try { + return [ + { + text: await prettierLoader.format(model.getValue()), + range: model.getFullModelRange(), + }, + ] + } catch (err) { + console.error(err) + } + }, + }) + + // Adjust the compiler options + monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ + ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(), + module: monaco.languages.typescript.ModuleKind.ESNext, + moduleResolution: + monaco.languages.typescript.ModuleResolutionKind.NodeJs, + strict: true, + }) + + // Define the custom theme + monaco.editor.defineTheme(THEME_NAME, EDITOR_THEME) + monaco.editor.setTheme(THEME_NAME) + + // Enable auto formatting on save + editor.addAction({ + id: 'save', + label: 'Save', + keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS], + run: () => { + editor.getAction('editor.action.formatDocument')?.run(path) + }, + }) + + reportEmittedJavaScript() + }} + /> + ) +} diff --git a/apps/total-typescript/src/components/code-editor/js-logo.svg b/apps/total-typescript/src/components/code-editor/js-logo.svg new file mode 100644 index 0000000000..9650ca78ef --- /dev/null +++ b/apps/total-typescript/src/components/code-editor/js-logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx b/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx new file mode 100644 index 0000000000..019ab6d2d8 --- /dev/null +++ b/apps/total-typescript/src/components/code-editor/lazy-loaded-editor.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import type {CodeEditorProps} from './code-editor' + +const _LazyLoadedEditor = React.lazy(() => + import('./code-editor').then((res) => { + return { + default: res.EagerlyLoadedEditor, + } + }), +) + +const LoadWhenVisible = (props: {children: React.ReactNode}) => { + const [isVisible, setIsVisible] = React.useState(false) + + const ref = React.useRef(null) + + React.useEffect(() => { + const observer = new IntersectionObserver(([entry]) => { + setIsVisible(entry.isIntersecting) + }) + + observer.observe(ref.current!) + + return () => { + observer.disconnect() + } + }, []) + + return ( +
+ {isVisible ? props.children : null} +
+ ) +} + +export const LazyLoadedEditor = (props: CodeEditorProps) => { + return ( + + <_LazyLoadedEditor {...props} /> + + ) +} diff --git a/apps/total-typescript/src/components/code-editor/load-script.ts b/apps/total-typescript/src/components/code-editor/load-script.ts new file mode 100644 index 0000000000..3d8caeb4ac --- /dev/null +++ b/apps/total-typescript/src/components/code-editor/load-script.ts @@ -0,0 +1,16 @@ +export const loadScript = (src: string) => { + return new Promise((resolve, reject) => { + const scriptElement = document.createElement('script') + scriptElement.src = src + + const timeout = setTimeout(() => { + reject('Timeout') + }, 15000) + + scriptElement.onload = () => { + resolve() + clearTimeout(timeout) + } + document.body.appendChild(scriptElement) + }) +} diff --git a/apps/total-typescript/src/components/code-editor/mdx-editor.tsx b/apps/total-typescript/src/components/code-editor/mdx-editor.tsx new file mode 100644 index 0000000000..54fa641f1a --- /dev/null +++ b/apps/total-typescript/src/components/code-editor/mdx-editor.tsx @@ -0,0 +1,86 @@ +import Image from 'next/image' +import {useState} from 'react' +import type {CodeEditorProps, Language} from './code-editor' +import {LazyLoadedEditor} from './lazy-loaded-editor' +import tsSvg from './ts-logo.svg' +import jsSvg from './js-logo.svg' + +const getHeight = (code: string) => { + return (code.split('\n').length + 3) * 24 +} + +const extractCodeAndLanguage = (props: {children?: any}) => { + const code = props.children?.props?.children?.props?.children + let language = props.children?.props?.children?.props?.className + + if (!code || !language) { + return null + } + + language = language.replace('language-', '') as Language + + return {code, language} +} + +export const MDXEditor = (props: {children?: any}) => { + // Yes, we're diving into React's internals to grab the + // code from the 
 element
+  const extracted = extractCodeAndLanguage(props)
+
+  if (!extracted) {
+    return null
+  }
+
+  const {code, language} = extracted
+
+  return (
+    

+      
+    

+  )
+}
+
+export const MDXTranspilePreview = (props: {children?: any}) => {
+  const extracted = extractCodeAndLanguage(props)
+  const [jsCode, setJsCode] = useState(undefined)
+
+  if (!extracted) {
+    return null
+  }
+
+  const {code, language} = extracted
+
+  return (
+    

+      

+        
+        

+          TypeScript Logo
+          TypeScript Code
+        

+      

+      

+        
+        

+          JavaScript Logo
+          Emitted JavaScript
+        

+      

+    

+  )
+}
diff --git a/apps/total-typescript/src/components/code-editor/prettier-loader.ts b/apps/total-typescript/src/components/code-editor/prettier-loader.ts
new file mode 100644
index 0000000000..d398caefa9
--- /dev/null
+++ b/apps/total-typescript/src/components/code-editor/prettier-loader.ts
@@ -0,0 +1,56 @@
+import {loadScript} from './load-script'
+
+declare global {
+  interface Window {
+    define: any
+  }
+}
+
+const Prettier = () => {
+  let hasLoaded = false
+
+  const loadPrettier = async () => {
+    if (hasLoaded) return
+
+    /**
+     * Helps Monaco editor get over a too-sensitive error
+     *
+     * https://stackoverflow.com/questions/55057425/can-only-have-one-anonymous-define-call-per-script-file
+     */
+    const define = window.define
+    window.define = () => {}
+
+    await Promise.all([
+      loadScript('https://unpkg.com/prettier@2.3.2/standalone.js'),
+      loadScript('https://unpkg.com/prettier@2.3.2/parser-typescript.js'),
+    ])
+
+    window.define = define
+
+    hasLoaded = true
+  }
+
+  const format = async (code: string) => {
+    try {
+      await loadPrettier()
+      return (window as any).prettier.format(code, {
+        parser: 'typescript',
+        plugins: (window as any).prettierPlugins,
+      })
+    } catch (e) {
+      console.error(e)
+    }
+    /**
+     * If loading prettier fails, just
+     * load the code
+     */
+    return code
+  }
+
+  return {
+    load: loadPrettier,
+    format,
+  }
+}
+
+export const prettierLoader = Prettier()
diff --git a/apps/total-typescript/src/components/code-editor/ts-logo.svg b/apps/total-typescript/src/components/code-editor/ts-logo.svg
new file mode 100644
index 0000000000..a46d53d49f
--- /dev/null
+++ b/apps/total-typescript/src/components/code-editor/ts-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/total-typescript/src/components/mdx/index.tsx b/apps/total-typescript/src/components/mdx/index.tsx
index 054a3b3ccd..a4e10bafd7 100644
--- a/apps/total-typescript/src/components/mdx/index.tsx
+++ b/apps/total-typescript/src/components/mdx/index.tsx
@@ -1,26 +1,29 @@
-import React from 'react'
-import Image, {ImageProps} from 'next/image'
+import {isBrowser} from '@/utils/is-browser'
+import {CopyToClipboard, Twitter} from '@skillrecordings/react'
 import cx from 'classnames'
-import Balancer from 'react-wrap-balancer'
-import {Twitter, CopyToClipboard} from '@skillrecordings/react'
+import {type MDXComponents as MDXComponentsType} from 'mdx/types'
+import Image, {ImageProps} from 'next/image'
 import Link from 'next/link'
-import toast from 'react-hot-toast'
 import {useRouter} from 'next/router'
-import {twMerge} from 'tailwind-merge'
+import React from 'react'
+import toast from 'react-hot-toast'
 import {useCopyToClipboard} from 'react-use'
-import {isBrowser} from '@/utils/is-browser'
-import {type MDXComponents as MDXComponentsType} from 'mdx/types'
+import Balancer from 'react-wrap-balancer'
+import {twMerge} from 'tailwind-merge'
+import {MDXEditor, MDXTranspilePreview} from '../code-editor/mdx-editor'
 
 export const MDXComponents = {
-  TypeError: (props: TypeErrorProps) => ,
-  Topics: (props: TopicsProps) => ,
-  Image: (props: any) => ,
-  Section: (props: any) => 
,
-  SectionHeading: (props: any) => ,
-  ErrorFromHell: (props: any) => ,
-  Testimonial: (props: any) => ,
-  Module: (props: any) => ,
-}
+  TypeError: (props) => ,
+  Topics: (props) => ,
+  Image: (props) => ,
+  Section: (props) => 
,
+  SectionHeading: (props) => ,
+  ErrorFromHell: (props) => ,
+  Testimonial: (props) => ,
+  Module: (props) => ,
+  Editor: (props) => ,
+  TranspilePreview: (props) => ,
+} satisfies Record>
 
 type TypeErrorProps = {
   children: React.ReactNode
diff --git a/packages/skill-lesson/markdown/shiki-remote-plugin.ts b/packages/skill-lesson/markdown/shiki-remote-plugin.ts
index c6bde41f27..db39b9f902 100644
--- a/packages/skill-lesson/markdown/shiki-remote-plugin.ts
+++ b/packages/skill-lesson/markdown/shiki-remote-plugin.ts
@@ -4,6 +4,7 @@ import defaultTheme from 'shiki/themes/github-dark.json'
 
 interface MarkdownNode {
   type: string
+  name?: string
   children?: MarkdownNode[]
 }
 
@@ -13,10 +14,23 @@ interface CodeNode extends MarkdownNode {
   meta: string | null
 }
 
+const NODES_TO_ABORT = ['Editor', 'TranspilePreview']
+
 const visitCodeNodes = async (
   node: MarkdownNode,
   transformer: (node: CodeNode) => Promise,
 ) => {
+  /**
+   * Abort if the wrapping node is an Editor component
+   */
+  if (
+    node.type === 'mdxJsxFlowElement' &&
+    node.name &&
+    NODES_TO_ABORT.includes(node.name)
+  ) {
+    return
+  }
+
   if (node.type === 'code') {
     await transformer(node as CodeNode)
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5b7428a55..d57a1bf26e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3509,6 +3509,9 @@ importers:
       '@mdx-js/react':
         specifier: ^2.3.0
         version: 2.3.0(react@18.2.0)
+      '@monaco-editor/react':
+        specifier: ^4.6.0
+        version: 4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0)
       '@mux/mux-node':
         specifier: ^7.3.1
         version: 7.3.5
@@ -7178,10 +7181,10 @@ packages:
       '@babel/helpers': 7.23.9
       '@babel/parser': 7.23.9
       '@babel/template': 7.23.9
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@babel/types': 7.23.9
       convert-source-map: 2.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -7203,7 +7206,7 @@ packages:
       '@babel/traverse': 7.24.0
       '@babel/types': 7.24.0
       convert-source-map: 2.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -7322,8 +7325,8 @@ packages:
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.22.5
-      '@babel/traverse': 7.23.9
-      debug: 4.3.4(supports-color@8.1.1)
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
       semver: 6.3.1
@@ -7339,7 +7342,7 @@ packages:
       '@babel/core': 7.23.9
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-plugin-utils': 7.22.5
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -7353,7 +7356,7 @@ packages:
       '@babel/core': 7.24.0
       '@babel/helper-compilation-targets': 7.23.6
       '@babel/helper-plugin-utils': 7.22.5
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -7514,7 +7517,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.23.9
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@babel/types': 7.23.9
     transitivePeerDependencies:
       - supports-color
@@ -9611,23 +9614,6 @@ packages:
       '@babel/parser': 7.24.0
       '@babel/types': 7.24.0
 
-  /@babel/traverse@7.23.9:
-    resolution: {integrity: sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.6
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.23.9
-      '@babel/types': 7.23.9
-      debug: 4.3.4(supports-color@8.1.1)
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   /@babel/traverse@7.23.9(supports-color@5.5.0):
     resolution: {integrity: sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==}
     engines: {node: '>=6.9.0'}
@@ -9644,7 +9630,6 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@babel/traverse@7.24.0:
     resolution: {integrity: sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==}
@@ -9658,7 +9643,7 @@ packages:
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/parser': 7.24.0
       '@babel/types': 7.24.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -11419,7 +11404,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.0
@@ -11436,7 +11421,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.0
@@ -11563,7 +11548,7 @@ packages:
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 2.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -12631,6 +12616,28 @@ packages:
     resolution: {integrity: sha512-Rp7ll8BHrKB3wXaRFKhrltwZl1CiXGdibPxuWXvqGnKTnv8fqa/nvftYNuSbf+pbJWKYCXdBtYTITdAUTGGh0Q==}
     dev: false
 
+  /@monaco-editor/loader@1.4.0(monaco-editor@0.47.0):
+    resolution: {integrity: sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==}
+    peerDependencies:
+      monaco-editor: '>= 0.21.0 < 1'
+    dependencies:
+      monaco-editor: 0.47.0
+      state-local: 1.0.7
+    dev: false
+
+  /@monaco-editor/react@4.6.0(monaco-editor@0.47.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==}
+    peerDependencies:
+      monaco-editor: '>= 0.25.0 < 1'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@monaco-editor/loader': 1.4.0(monaco-editor@0.47.0)
+      monaco-editor: 0.47.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@motionone/animation@10.17.0:
     resolution: {integrity: sha512-ANfIN9+iq1kGgsZxs+Nz96uiNcPLGTXwfNo2Xz/fcJXniPYpaz/Uyrfa+7I5BPLxCP82sh7quVDudf1GABqHbg==}
     dependencies:
@@ -12698,7 +12705,7 @@ packages:
     dependencies:
       '@open-draft/until': 1.0.3
       '@xmldom/xmldom': 0.7.13
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       headers-utils: 3.0.2
       outvariant: 1.4.2
       strict-event-emitter: 0.2.8
@@ -15393,7 +15400,7 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     dependencies:
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@sanity/telemetry': 0.7.7
       chalk: 4.1.2
       esbuild: 0.19.12
@@ -15411,7 +15418,7 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
     dependencies:
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@sanity/telemetry': 0.7.7
       chalk: 4.1.2
       esbuild: 0.19.12
@@ -15490,7 +15497,7 @@ packages:
       sanity: ^3
       styled-components: ^5.2 || ^6
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.1)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.1)(@codemirror/view@6.23.1)(@lezer/common@1.2.1)
       '@codemirror/commands': 6.3.3
       '@codemirror/lang-html': 6.4.8
       '@codemirror/lang-java': 6.0.1
@@ -15532,7 +15539,7 @@ packages:
       sanity: ^3
       styled-components: ^5.2 || ^6
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.1)(@codemirror/view@6.23.1)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.1)(@lezer/common@1.2.1)
       '@codemirror/commands': 6.3.3
       '@codemirror/lang-html': 6.4.8
       '@codemirror/lang-java': 6.0.1
@@ -15841,7 +15848,7 @@ packages:
       '@sanity/types': 3.27.0
       '@sanity/util': 3.27.0
       arrify: 2.0.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       fast-fifo: 1.3.2
       groq-js: 1.4.1
       p-map: 7.0.1
@@ -18986,7 +18993,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/type-utils': 5.62.0(eslint@8.56.0)(typescript@5.1.6)
       '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.1.6)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.56.0
       graphemer: 1.4.0
       ignore: 5.3.0
@@ -19058,7 +19065,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.1.6)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.26.0
       typescript: 5.1.6
     transitivePeerDependencies:
@@ -19078,7 +19085,7 @@ packages:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.1.6)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.56.0
       typescript: 5.1.6
     transitivePeerDependencies:
@@ -19099,7 +19106,7 @@ packages:
       '@typescript-eslint/types': 6.19.1
       '@typescript-eslint/typescript-estree': 6.19.1(typescript@5.1.6)
       '@typescript-eslint/visitor-keys': 6.19.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.56.0
       typescript: 5.1.6
     transitivePeerDependencies:
@@ -19133,7 +19140,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.1.6)
       '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.1.6)
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.56.0
       tsutils: 3.21.0(typescript@5.1.6)
       typescript: 5.1.6
@@ -19159,7 +19166,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint-visitor-keys: 1.3.0
       glob: 7.2.3
       is-glob: 4.0.3
@@ -19181,7 +19188,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -19201,7 +19208,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.19.1
       '@typescript-eslint/visitor-keys': 6.19.1
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
@@ -19250,7 +19257,7 @@ packages:
     resolution: {integrity: sha512-kTwMUQ8xtAZaC4wb2XuLkPqFVBj2dNBueMQ89NWEuw87k2nLBbuafeG5cob/QEr6YduxIdTVUjix0MtC7mPlmg==}
     dependencies:
       '@typescript/vfs': 1.3.5
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       lz-string: 1.5.0
     transitivePeerDependencies:
       - supports-color
@@ -19259,7 +19266,7 @@ packages:
   /@typescript/vfs@1.3.4:
     resolution: {integrity: sha512-RbyJiaAGQPIcAGWFa3jAXSuAexU4BFiDRF1g3hy7LmRqfNpYlTQWGXjcrOaVZjJ8YkkpuwG0FcsYvtWQpd9igQ==}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -19267,7 +19274,7 @@ packages:
   /@typescript/vfs@1.3.5:
     resolution: {integrity: sha512-pI8Saqjupf9MfLw7w2+og+fmb0fZS0J6vsKXXrp4/PDXEFvntgzXmChCXC/KefZZS0YGS6AT8e0hGAJcTsdJlg==}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -19686,7 +19693,7 @@ packages:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -19694,7 +19701,7 @@ packages:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
     engines: {node: '>= 14'}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -20272,7 +20279,7 @@ packages:
     dependencies:
       '@babel/code-frame': 7.23.5
       '@babel/parser': 7.23.9
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@babel/types': 7.23.9
       eslint: 8.56.0
       eslint-visitor-keys: 1.3.0
@@ -22313,7 +22320,6 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 5.5.0
-    dev: false
 
   /debug@4.3.4(supports-color@8.1.1):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -23231,7 +23237,7 @@ packages:
     peerDependencies:
       esbuild: '>=0.12 <1'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       esbuild: 0.19.12
     transitivePeerDependencies:
       - supports-color
@@ -23653,7 +23659,7 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       eslint: 8.26.0
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@2.34.0)(eslint@8.26.0)
       glob: 7.2.3
@@ -23671,7 +23677,7 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       enhanced-resolve: 5.15.0
       eslint: 8.56.0
       eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.19.1)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0)
@@ -24190,7 +24196,7 @@ packages:
       ajv: 6.12.6
       chalk: 2.4.2
       cross-spawn: 6.0.5
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       doctrine: 3.0.0
       eslint-scope: 5.1.1
       eslint-utils: 1.4.3
@@ -24239,7 +24245,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -24291,7 +24297,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -24934,7 +24940,7 @@ packages:
       debug:
         optional: true
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
 
   /for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
@@ -25293,7 +25299,7 @@ packages:
     resolution: {integrity: sha512-omefjdbyRb2rRt0tnrZlbeWx9oZJm66o88K8JlYn13xELn+0+d6mJZOQHrJAdC3vxeJ4t/NHa4wh7Wlh+nvEJA==}
     engines: {node: '>=14.0.0'}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       decompress-response: 7.0.0
       follow-redirects: 1.15.5(debug@4.3.4)
       into-stream: 6.0.0
@@ -26335,7 +26341,7 @@ packages:
     dependencies:
       '@tootallnate/once': 1.1.2
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -26346,7 +26352,7 @@ packages:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -26356,7 +26362,7 @@ packages:
     engines: {node: '>= 14'}
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -26374,7 +26380,7 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -26383,7 +26389,7 @@ packages:
     engines: {node: '>= 14'}
     dependencies:
       agent-base: 7.1.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -26557,7 +26563,7 @@ packages:
       canonicalize: 1.0.8
       chalk: 4.1.2
       cross-fetch: 4.0.0
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       h3: 1.10.1
       hash.js: 1.1.7
       json-stringify-safe: 5.0.1
@@ -27197,7 +27203,7 @@ packages:
     resolution: {integrity: sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==}
     engines: {node: '>=10'}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -27764,7 +27770,7 @@ packages:
     resolution: {integrity: sha512-9acbWEfbmS8UpdcfqnDO+uBUgKa/9hcRh983IHdM+pKmJPL77G0sWAAK0V0kr5LK3a8cSBfkFSoncXwQlRZfkQ==}
     engines: {node: '>= 8.3'}
     dependencies:
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@jest/environment': 25.5.0
       '@jest/source-map': 25.5.0
       '@jest/test-result': 25.5.0
@@ -28298,7 +28304,7 @@ packages:
       '@babel/core': 7.23.9
       '@babel/generator': 7.23.6
       '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.9)
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@babel/types': 7.23.9
       '@jest/transform': 27.5.1
       '@jest/types': 27.5.1
@@ -30580,7 +30586,7 @@ packages:
   /micromark@2.11.4:
     resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
     dependencies:
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       parse-entities: 2.0.0
     transitivePeerDependencies:
       - supports-color
@@ -30590,7 +30596,7 @@ packages:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       decode-named-character-reference: 1.0.2
       micromark-core-commonmark: 1.1.0
       micromark-factory-space: 1.1.0
@@ -30613,7 +30619,7 @@ packages:
     resolution: {integrity: sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==}
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       decode-named-character-reference: 1.0.2
       devlop: 1.1.0
       micromark-core-commonmark: 2.0.0
@@ -31250,6 +31256,10 @@ packages:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
     dev: false
 
+  /monaco-editor@0.47.0:
+    resolution: {integrity: sha512-VabVvHvQ9QmMwXu4du008ZDuyLnHs9j7ThVFsiJoXSOQk18+LF89N4ADzPbFenm0W4V2bGHnFBztIRQTgBfxzw==}
+    dev: false
+
   /moo@0.5.2:
     resolution: {integrity: sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==}
     dev: false
@@ -37006,6 +37016,10 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /state-local@1.0.7:
+    resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
+    dev: false
+
   /static-browser-server@1.0.3:
     resolution: {integrity: sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==}
     dependencies:
@@ -38201,7 +38215,7 @@ packages:
       '@babel/parser': 7.23.9
       '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.23.9)
       '@babel/preset-env': 7.23.9(@babel/core@7.23.9)
-      '@babel/traverse': 7.23.9
+      '@babel/traverse': 7.23.9(supports-color@5.5.0)
       '@rollup/plugin-babel': 5.3.1(@babel/core@7.23.9)(rollup@1.32.1)
       '@rollup/plugin-commonjs': 11.1.0(rollup@1.32.1)
       '@rollup/plugin-json': 4.1.0(rollup@1.32.1)
@@ -38650,7 +38664,7 @@ packages:
       bundle-require: 3.1.2(esbuild@0.14.54)
       cac: 6.7.14
       chokidar: 3.5.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4(supports-color@5.5.0)
       esbuild: 0.14.54
       execa: 5.1.1
       globby: 11.1.0