From 9b5421a7febd1f57cbd504855ea375eec5d57843 Mon Sep 17 00:00:00 2001
From: Jeroen Claassens <support@favware.tech>
Date: Fri, 27 Jan 2023 01:05:36 +0100
Subject: [PATCH] feat: finish all but state handling of live demo

---
 .eslintrc.js                                  |   3 +-
 .prettierrc.js                                |   1 -
 docs/.vuepress/client.ts                      |  27 ++
 docs/.vuepress/components/Demo/Demo.vue       | 419 +++++++----------
 .../components/Demo/MonacoEditor.vue          |  83 ++++
 docs/.vuepress/tsconfig.json                  |  10 +
 docs/demo.md                                  |   9 +-
 package-lock.json                             | 431 ++----------------
 package.json                                  |   9 +-
 9 files changed, 339 insertions(+), 653 deletions(-)
 create mode 100644 docs/.vuepress/components/Demo/MonacoEditor.vue
 create mode 100644 docs/.vuepress/tsconfig.json

diff --git a/.eslintrc.js b/.eslintrc.js
index 51bf28852..7557fc480 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,7 +18,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV !== 'production' ? 0 : 2,
     'no-useless-escape': 0,
-    'no-empty': 0,
-    indent: ['error', 2]
+    'no-empty': 0
   }
 }
diff --git a/.prettierrc.js b/.prettierrc.js
index d0bd2e224..df9510243 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -11,5 +11,4 @@ module.exports = {
       }
     }
   ]
-  // htmlWhitespaceSensitivity: false
 }
diff --git a/docs/.vuepress/client.ts b/docs/.vuepress/client.ts
index 786c21782..0089c5873 100644
--- a/docs/.vuepress/client.ts
+++ b/docs/.vuepress/client.ts
@@ -1,7 +1,28 @@
 import { defineClientConfig } from '@vuepress/client'
 
+// @ts-expect-error monaco editor doesn't have types for the workers
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// @ts-expect-error monaco editor doesn't have types for the workers
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+// @ts-expect-error monaco editor doesn't have types for the workers
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
 export default defineClientConfig({
   enhance({ router }) {
+    self.MonacoEnvironment = {
+      getWorker(_, label) {
+        switch (label) {
+          case 'json':
+            return new jsonWorker()
+          case 'typescript':
+          case 'javascript':
+            return new tsWorker()
+          default:
+            return editorWorker()
+        }
+      }
+    }
+
     router.addRoute('/', {
       path: '/ads.txt',
       redirect: '',
@@ -19,3 +40,9 @@ export default defineClientConfig({
     })
   }
 })
+
+declare global {
+  interface Window {
+    MonacoEnvironment?: import('monaco-editor').Environment | undefined
+  }
+}
diff --git a/docs/.vuepress/components/Demo/Demo.vue b/docs/.vuepress/components/Demo/Demo.vue
index 778dcd660..66b9a6c7c 100644
--- a/docs/.vuepress/components/Demo/Demo.vue
+++ b/docs/.vuepress/components/Demo/Demo.vue
@@ -1,300 +1,211 @@
 <template>
-  <div class="live-demo">
-    <article class="code-container">
-      <span class="header">
-        <span>list.json</span>
-        <span class="instruction">(list of items to search)</span>
-      </span>
-      <codemirror
-        class="cm-list-editor"
-        ref="listEditor"
-        :value="listJSON"
-        :options="listOptions"
-        @input="onCmListChange"
-      />
-    </article>
-    <span v-if="listErrorMessage" class="error-msg">
-      {{ listErrorMessage }}
-    </span>
-
-    <section class="search-section">
-      <input
-        type="text"
-        v-model="pattern"
-        @keyup="onPatternKeyUp"
-        placeholder="Search..."
-      />
-      <!-- <label class="toggle-code" @click="toggleCode">
-        {{ showCode ? '[hide code]' : '[show code]' }}
-      </label> -->
-    </section>
-
-    <div class="code-container-wrapper">
-      <Content slot-key="middle" />
-      <article class="code-container">
-        <span class="header">
-          <span>main.js</span>
-          <span class="instruction">(entry module)</span>
-        </span>
-        <codemirror
-          ref="cmEditor"
-          class="cm-code-editor"
-          :value="code"
-          :options="cmOptions"
-          @input="onCmCodeChange"
-        />
-      </article>
-      <span v-if="codeErrorMessage" class="error-msg">
-        {{ codeErrorMessage }}
-      </span>
-    </div>
-    <article class="code-container">
-      <span class="header">
-        <span v-if="!hasErrors">
-          <b>Results:</b> found {{ count }} items in {{ searchTime }}
-        </span>
-        <span v-else>--</span>
-      </span>
-      <pre class="output"><code v-html="outputHtml"></code></pre>
-    </article>
-  </div>
+  <section>
+    <MonacoEditor
+      language="json"
+      :value="jsonData"
+      id="json-list-monaco-editor"
+      file-name="list.json"
+      file-description="list of items to search"
+    ></MonacoEditor>
+  </section>
+
+  <section class="search-section">
+    <input
+      type="text"
+      class="search-section-input"
+      v-model="searchPattern"
+      @keyup="onSearchPatternKeyUp"
+      placeholder="Search..."
+    />
+  </section>
+
+  <section>
+    <MonacoEditor
+      language="typescript"
+      :value="mainJsData"
+      id="main-monaco-editor"
+      file-name="main.js"
+      file-description="entry module"
+    ></MonacoEditor>
+  </section>
+
+  <section class="monaco-editor-results">
+    <MonacoEditor
+      language="json"
+      :value="resultsData"
+      id="main-monaco-editor"
+      file-name="Results:"
+      :file-description="
+        isNullish(count) || isNullish(searchTime)
+          ? ''
+          : 'found ' + count + ' in ' + searchTime + 'ms'
+      "
+      readonly
+    ></MonacoEditor>
+  </section>
 </template>
 
 <script setup lang="ts">
-import 'prismjs/components/prism-json'
-import { defineComponent, onMounted, ref, shallowRef } from 'vue'
-
+import { Stopwatch } from '@sapphire/stopwatch'
+import { ref } from 'vue'
 import Fuse from '../../../../dist/fuse.esm.js'
 import Books from './books.js'
+import MonacoEditor from './MonacoEditor.vue'
 
-import Prism from 'prismjs'
-
-// import { javascript } from '@codemirror/lang-javascript'
-import { javascript } from '@codemirror/lang-javascript'
-import { oneDark } from '@codemirror/theme-one-dark'
-import { Codemirror } from 'vue-codemirror'
-
-let keys = []
+let possibleFuseKeys: string[] = []
 for (const key in Fuse.config) {
   if (typeof Fuse.config[key] != 'function' && key !== 'keys') {
-    keys.push(key)
+    possibleFuseKeys.push(key)
   }
 }
 
-let codify = (pattern) => {
-  return `const options = {
-${keys.map((key) => `  // ${key}: ${Fuse.config[key]},`).join('\n')}
-  keys: [
-    "title",
-    "author.firstName"
-  ]
+const searchPattern = ref('')
+
+let codify = () => {
+  return `
+const Fuse = require('fuse.js');
+
+const fuseOptions = {
+${possibleFuseKeys.map((key) => `\t// ${key}: ${Fuse.config[key]},`).join('\n')}
+\tkeys: [
+\t\t"title",
+\t\t"author.firstName"
+\t]
 };
 
-const fuse = new Fuse(list, options);
+const fuse = new Fuse(list, fuseOptions);
 
 // Change the pattern
-const pattern = "${pattern}"
+const pattern = "${searchPattern.value}"
 
 return fuse.search(pattern)`
 }
 
-// Purely here to make two-way binding possible:
-// Extend Fuse such that we can expose the pattern that was
-// modified directly in the CodeMirror input.
-class DemoFuse extends Fuse {
-  public override search(pattern: any, opts = { limit: -1 }) {
-    const results = super.search(pattern, opts)
-    return { pattern, results }
-  }
+const isNullish = <T>(
+  value: null | undefined | T
+): value is null | undefined => {
+  return value === null || value === undefined
 }
 
-let listJSON = ref(JSON.stringify(Books, null, 2))
-let list = ref(Books)
-let code = ref(codify(''))
-let result = ref('')
-let outputHtml = ref('')
-let count = ref(0)
-let searchTime = ref<string | number>(0)
-let listErrorMessage = ref('')
-let codeErrorMessage = ref('')
-let hasErrors = ref(false)
-let pattern = ref('')
-let showCode = ref(true)
-let listOptions = ref({
-  tabSize: 2,
-  mode: 'text/javascript',
-  theme: 'default',
-  lineNumbers: true,
-  line: true
-})
-let cmOptions = ref({
-  tabSize: 2,
-  mode: 'text/javascript',
-  theme: 'default',
-  lineNumbers: true,
-  line: true
-})
+const jsonData = ref(JSON.stringify(Books, null, 2))
+const mainJsData = ref(codify())
+const resultsData = ref(JSON.stringify({}, null, 2))
+const count = ref<number | null>(null)
+const searchTime = ref<number | null>(null)
 
-function toggleCode() {
-  showCode.value = !showCode.value
-}
+console.log('>>>>', resultsData.value)
 
-function onCmCodeChange(newCode) {
-  code.value = newCode
-  try {
-    parse()
-    update()
-  } catch (err) {}
-}
+function onSearchPatternKeyUp() {
+  mainJsData.value = codify()
 
-function onCmListChange(newCode) {
-  try {
-    list.value = eval(newCode)
-    listErrorMessage.value = null
-    hasErrors.value = !!codeErrorMessage.value
-    update()
-  } catch (err) {
-    listErrorMessage.value = err
-    hasErrors.value = true
-    outputHtml.value = ''
-    throw err
-  }
+  doFuseSearch()
 }
 
-function parse() {
+function doFuseSearch() {
   try {
-    let func = eval(`[function (Fuse, list){${this.code}}][0]`)
-
-    let start = new Date().getTime()
-    const { pattern, results } = func(DemoFuse, this.list)
-    result.value = results
-    pattern.value = pattern
-    let end = new Date().getTime()
-    searchTime.value = end - start + ' ms'
-    codeErrorMessage.value = null
-    hasErrors.value = !!this.listErrorMessage
-  } catch (err) {
-    codeErrorMessage.value = err
-    hasErrors.value = true
-    outputHtml.value = ''
-    throw err
-  }
-}
-
-function update() {
-  if (hasErrors.value) {
-    return
-  }
-  const html = Prism.highlight(
-    JSON.stringify(this.result, null, 2),
-    Prism.languages.json,
-    'json'
-  )
-  count.value = this.result.length
-  outputHtml.value = html
-}
-function onPatternKeyUp() {
-  code.value = codify(this.pattern)
-}
+    const fuseOptions = {
+      // isCaseSensitive: false,
+      // includeScore: false,
+      // shouldSort: true,
+      // includeMatches: false,
+      // findAllMatches: false,
+      // minMatchCharLength: 1,
+      // location: 0,
+      // threshold: 0.6,
+      // distance: 100,
+      // useExtendedSearch: false,
+      // ignoreLocation: false,
+      // ignoreFieldNorm: false,
+      // fieldNormWeight: 1,
+      keys: ['title', 'author.firstName']
+    }
 
-onMounted(() => {
-  parse()
-  update()
-})
+    const fuse = new Fuse(JSON.parse(jsonData.value), fuseOptions)
 
-defineComponent({
-  components: {
-    Codemirror
-  },
-  setup: () => {
-    const extensions = [javascript(), oneDark]
+    const stopwatch = new Stopwatch()
 
-    // Codemirror EditorView instance ref
-    const view = shallowRef()
-    const handleReady = (payload) => {
-      view.value = payload.view
-    }
+    const result = fuse.search(searchPattern.value)
 
-    return {
-      code,
-      extensions,
-      handleReady,
-      log: console.log
-    }
+    count.value = result.length
+    searchTime.value = Math.floor(stopwatch.stop().duration)
+    resultsData.value = JSON.stringify(result, null, 2)
+  } catch {
+    count.value = null
+    searchTime.value = null
+    resultsData.value = JSON.stringify({}, null, 2)
   }
-})
-</script>
-
-<style lang="css">
-.live-demo .code-container {
-  border: 1px solid #ccc;
-  margin-bottom: 20px;
 }
 
-.live-demo .code-container .header {
-  display: block;
-  padding: 0.5em;
-  border-bottom: 1px solid #f4f4f4;
-  color: #555;
-  position: relative;
-}
+// function onCmCodeChange(newCode) {
+//   code.value = newCode
+//   try {
+//     parse()
+//     update()
+//   } catch (err) {}
+// }
+
+// function onCmListChange(newCode) {
+//   try {
+//     list.value = eval(newCode)
+//     listErrorMessage.value = null
+//     hasErrors.value = !!codeErrorMessage.value
+//     update()
+//   } catch (err) {
+//     listErrorMessage.value = err
+//     hasErrors.value = true
+//     outputHtml.value = ''
+//     throw err
+//   }
+// }
+
+// function update() {
+//   if (hasErrors.value) {
+//     return
+//   }
+//   const html = Prism.highlight(
+//     JSON.stringify(result.value, null, 2),
+//     Prism.languages.json,
+//     'json'
+//   )
+//   count.value = result.value.length
+//   outputHtml.value = html
+// }
+
+// onMounted(() => {
+//   // parse()
+//   // update()
+// })
+</script>
 
-.live-demo .code-container .header .instruction {
-  color: #555;
-  opacity: 0.6;
-  position: absolute;
-  right: 0;
-  padding-right: 0.5em;
+<style scoped lang="css">
+.monaco-editor-results {
+  margin-top: 20px;
 }
 
-.live-demo .CodeMirror {
-  height: 100%;
-  border-radius: 3px;
-  font-family: Inconsolata, monospace;
-  font-size: 16px;
-  line-height: 1.2;
-  font-weight: 400;
-  color: #333;
-}
-.live-demo .cm-list-editor {
-  height: 250px;
-}
-.live-demo .error-msg {
-  margin: 5px 0px;
-  color: red;
-  display: inline-block;
+.search-section {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 100%;
 }
-.live-demo .output {
-  max-height: 300px;
-  border-radius: 3px;
-  background: white;
-  font-family: Inconsolata, monospace;
+
+.search-section-input {
   font-size: 16px;
-  line-height: 1.2;
-}
+  width: 100%;
 
-.live-demo .output .token.punctuation,
-.live-demo .output .token.operator {
-  color: #333;
-}
+  color: rgb(156, 181, 200);
+  background-color: rgb(24, 26, 27);
+  background-image: none;
+  border-color: rgb(56, 60, 63);
 
-.live-demo .output .token.property,
-.live-demo .output .token.string,
-.live-demo .output .token.number,
-.live-demo .output .token.comment,
-.live-demo .output .token.prolog,
-.live-demo .output .token.doctype,
-.live-demo .output .token.cdata {
-  color: #a11 !important;
+  padding: 0.45rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  width: 96%;
+  border: 1px solid #e1e3e6;
+  border-radius: 4px;
 }
 
-.live-demo .search-section {
-  margin-bottom: 20px;
-}
-.live-demo .search-section input {
-  font-size: 16px;
-}
-.live-demo .toggle-code {
-  cursor: pointer;
+html.dark .search-section-input {
+  border: 1px solid #878e99;
 }
 </style>
diff --git a/docs/.vuepress/components/Demo/MonacoEditor.vue b/docs/.vuepress/components/Demo/MonacoEditor.vue
new file mode 100644
index 000000000..8a3c263c3
--- /dev/null
+++ b/docs/.vuepress/components/Demo/MonacoEditor.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import * as monaco from 'monaco-editor'
+import { defineProps, onMounted, ref } from 'vue'
+
+const editorRef = ref()
+const props = defineProps<{
+  language: string
+  value: any
+  id: string
+  fileName: string
+  fileDescription: string
+  readonly?: boolean
+}>()
+
+onMounted(() => {
+  monaco.editor.create(editorRef.value, {
+    value: props.value,
+    language: props.language,
+    automaticLayout: true,
+    selectOnLineNumbers: true,
+    wordWrap: 'on',
+    wrappingStrategy: 'advanced',
+    minimap: {
+      enabled: false
+    },
+    autoClosingQuotes: 'always',
+    bracketPairColorization: {
+      enabled: true
+    },
+    colorDecorators: true,
+    cursorBlinking: 'expand',
+    cursorSmoothCaretAnimation: true,
+    fontLigatures: true,
+    fontFamily:
+      '"Fira Code", "JetBrains Mono", "Menlo", "Monaco", "Consolas", "Courier New", "monospace"',
+    formatOnPaste: true,
+    guides: {
+      bracketPairs: true
+    },
+    theme: 'vs-dark',
+    smartSelect: {
+      selectLeadingAndTrailingWhitespace: true
+    },
+    tabCompletion: 'on',
+    useShadowDOM: true,
+    scrollBeyondLastLine: false,
+    ...(props.readonly && {
+      readOnly: true,
+      contextmenu: false
+    })
+  })
+})
+</script>
+
+<template>
+  <div class="header">
+    <div>{{ props.fileName }}</div>
+    <div>{{ props.fileDescription }}</div>
+  </div>
+  <div :id="props.id" class="editor" ref="editorRef"></div>
+</template>
+
+<style scoped>
+.editor {
+  height: 35vh;
+}
+
+.header {
+  align-items: center;
+  background: #ffffff;
+  border: solid 1px #ffffff;
+  display: flex;
+  height: 30px;
+  justify-content: space-between;
+  padding: 0px 1%;
+  width: 97.5%;
+}
+
+html.dark .header {
+  background: #1e1e1e;
+  border: solid 1px #3c3c3c;
+}
+</style>
diff --git a/docs/.vuepress/tsconfig.json b/docs/.vuepress/tsconfig.json
new file mode 100644
index 000000000..6b6f0f5ba
--- /dev/null
+++ b/docs/.vuepress/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "es2016",
+    "incremental": true,
+    "lib": ["DOM", "ESNext"]
+  },
+  "include": ["."]
+}
diff --git a/docs/demo.md b/docs/demo.md
index c7dab0d05..eabdb735d 100644
--- a/docs/demo.md
+++ b/docs/demo.md
@@ -4,13 +4,6 @@
 
 Play around with a live demo of Fuse.js. Have a look at the [options](api/options.html) to understand what they mean.
 
-<!--
-::: slot middle
-Modify the `options` and/or `pattern`:
-::: -->
-
-<ClientOnly>
-  <Demo />
-</ClientOnly>
+<Demo />
 
 <Donate />
diff --git a/package-lock.json b/package-lock.json
index 0810c90b5..740fe383a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,33 +15,30 @@
         "@babel/plugin-proposal-object-rest-spread": "7.20.7",
         "@babel/preset-env": "7.20.2",
         "@babel/preset-typescript": "7.18.6",
-        "@codemirror/lang-javascript": "^6.1.2",
-        "@codemirror/theme-one-dark": "^6.1.0",
         "@commitlint/cli": "^17.4.2",
         "@commitlint/config-conventional": "^17.4.2",
         "@rollup/plugin-babel": "^6.0.3",
         "@rollup/plugin-node-resolve": "^15.0.1",
         "@rollup/plugin-replace": "^5.0.2",
+        "@sapphire/stopwatch": "^1.5.0",
         "@snippetors/vuepress-plugin-tabs": "1.2.3",
         "@vuepress/plugin-google-analytics": "2.0.0-beta.60",
         "@vuepress/plugin-pwa": "2.0.0-beta.60",
         "@vuepress/plugin-register-components": "2.0.0-beta.60",
         "@vuepress/plugin-search": "2.0.0-beta.60",
         "babel-loader": "^9.1.2",
-        "codemirror": "6.0.1",
         "eslint": "8.32.0",
         "eslint-config-prettier": "8.6.0",
         "husky": "^8.0.3",
+        "monaco-editor": "^0.34.1",
         "prettier": "2.8.3",
-        "prismjs": "^1.29.0",
         "replace-in-file": "^6.3.5",
         "rollup": "^2.79.1",
         "rollup-plugin-copy": "3.4.0",
         "standard-version": "^9.5.0",
         "terser": "^5.16.1",
         "typescript": "^4.9.4",
-        "vitest": "^0.28.1",
-        "vue-codemirror": "^6.1.1",
+        "vitest": "^0.28.2",
         "vuepress": "2.0.0-beta.60",
         "vuepress-plugin-google-adsense2": "1.0.2"
       },
@@ -1762,116 +1759,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@codemirror/autocomplete": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.0.tgz",
-      "integrity": "sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.6.0",
-        "@lezer/common": "^1.0.0"
-      },
-      "peerDependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/commands": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.0.tgz",
-      "integrity": "sha512-+00smmZBradoGFEkRjliN7BjqPh/Hx0KCHWOEibUmflUqZz2RwBTU0MrVovEEHozhx3AUSGcO/rl3/5f9e9Biw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/lang-javascript": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.2.tgz",
-      "integrity": "sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/javascript": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/language": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.4.0.tgz",
-      "integrity": "sha512-Wzb7GnNj8vnEtbPWiOy9H0m1fBtE28kepQNGLXekU2EEZv43BF865VKITUn+NoV8OpW6gRtvm29YEhqm46927Q==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
-    "node_modules/@codemirror/lint": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.1.0.tgz",
-      "integrity": "sha512-mdvDQrjRmYPvQ3WrzF6Ewaao+NWERYtpthJvoQ3tK3t/44Ynhk8ZGjTSL9jMEv8CgSMogmt75X8ceOZRDSXHtQ==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "node_modules/@codemirror/search": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
-      "integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "node_modules/@codemirror/state": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz",
-      "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==",
-      "dev": true
-    },
-    "node_modules/@codemirror/theme-one-dark": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
-      "integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/highlight": "^1.0.0"
-      }
-    },
-    "node_modules/@codemirror/view": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.7.3.tgz",
-      "integrity": "sha512-Lt+4POnhXrZFfHOdPzXEHxrzwdy7cjqYlMkOWvoFGi6/bAsjzlFfr0NY3B15B/PGx+cDFgM1hlc12wvYeZbGLw==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/state": "^6.1.4",
-        "style-mod": "^4.0.0",
-        "w3c-keyname": "^2.2.4"
-      }
-    },
     "node_modules/@commitlint/cli": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-17.4.2.tgz",
@@ -2584,40 +2471,6 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
-    "node_modules/@lezer/common": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz",
-      "integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==",
-      "dev": true
-    },
-    "node_modules/@lezer/highlight": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.3.tgz",
-      "integrity": "sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "node_modules/@lezer/javascript": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.1.tgz",
-      "integrity": "sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/highlight": "^1.1.3",
-        "@lezer/lr": "^1.3.0"
-      }
-    },
-    "node_modules/@lezer/lr": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.1.tgz",
-      "integrity": "sha512-+GymJB/+3gThkk2zHwseaJTI5oa4AuOuj1I2LCslAVq1dFZLSX8SAe4ZlJq1TjezteDXtF/+d4qeWz9JvnrG9Q==",
-      "dev": true,
-      "dependencies": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
     "node_modules/@mdit-vue/plugin-component": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/@mdit-vue/plugin-component/-/plugin-component-0.11.2.tgz",
@@ -2849,6 +2702,19 @@
         }
       }
     },
+    "node_modules/@sapphire/stopwatch": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@sapphire/stopwatch/-/stopwatch-1.5.0.tgz",
+      "integrity": "sha512-DtyKugdy3JTqm6JnEepTY64fGJAqlusDVrlrzifEgSCfGYCqpvB+SBldkWtDH+z+zLcp+PyaFLq7xpVfkhmvGg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
     "node_modules/@snippetors/vuepress-plugin-tabs": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@snippetors/vuepress-plugin-tabs/-/vuepress-plugin-tabs-1.2.3.tgz",
@@ -4415,21 +4281,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/codemirror": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4976,12 +4827,6 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
-    "node_modules/crelt": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
-      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==",
-      "dev": true
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -8023,6 +7868,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz",
+      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==",
+      "dev": true
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -9968,12 +9819,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/style-mod": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
-      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==",
-      "dev": true
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -10203,6 +10048,12 @@
         }
       }
     },
+    "node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
+      "dev": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -10605,22 +10456,6 @@
         "@vue/shared": "3.2.45"
       }
     },
-    "node_modules/vue-codemirror": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-6.1.1.tgz",
-      "integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==",
-      "dev": true,
-      "dependencies": {
-        "@codemirror/commands": "6.x",
-        "@codemirror/language": "6.x",
-        "@codemirror/state": "6.x",
-        "@codemirror/view": "6.x"
-      },
-      "peerDependencies": {
-        "codemirror": "6.x",
-        "vue": "3.x"
-      }
-    },
     "node_modules/vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -10706,12 +10541,6 @@
         "vue": "^3.2.45"
       }
     },
-    "node_modules/w3c-keyname": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
-      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==",
-      "dev": true
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -12539,110 +12368,6 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@codemirror/autocomplete": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.4.0.tgz",
-      "integrity": "sha512-HLF2PnZAm1s4kGs30EiqKMgD7XsYaQ0XJnMR0rofEWQ5t5D60SfqpDIkIh1ze5tiEbyUWm8+VJ6W1/erVvBMIA==",
-      "dev": true,
-      "requires": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.6.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "@codemirror/commands": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.0.tgz",
-      "integrity": "sha512-+00smmZBradoGFEkRjliN7BjqPh/Hx0KCHWOEibUmflUqZz2RwBTU0MrVovEEHozhx3AUSGcO/rl3/5f9e9Biw==",
-      "dev": true,
-      "requires": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "@codemirror/lang-javascript": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.1.2.tgz",
-      "integrity": "sha512-OcwLfZXdQ1OHrLiIcKCn7MqZ7nx205CMKlhe+vL88pe2ymhT9+2P+QhwkYGxMICj8TDHyp8HFKVwpiisUT7iEQ==",
-      "dev": true,
-      "requires": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/javascript": "^1.0.0"
-      }
-    },
-    "@codemirror/language": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.4.0.tgz",
-      "integrity": "sha512-Wzb7GnNj8vnEtbPWiOy9H0m1fBtE28kepQNGLXekU2EEZv43BF865VKITUn+NoV8OpW6gRtvm29YEhqm46927Q==",
-      "dev": true,
-      "requires": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/common": "^1.0.0",
-        "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0",
-        "style-mod": "^4.0.0"
-      }
-    },
-    "@codemirror/lint": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.1.0.tgz",
-      "integrity": "sha512-mdvDQrjRmYPvQ3WrzF6Ewaao+NWERYtpthJvoQ3tK3t/44Ynhk8ZGjTSL9jMEv8CgSMogmt75X8ceOZRDSXHtQ==",
-      "dev": true,
-      "requires": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "@codemirror/search": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.2.3.tgz",
-      "integrity": "sha512-V9n9233lopQhB1dyjsBK2Wc1i+8hcCqxl1wQ46c5HWWLePoe4FluV3TGHoZ04rBRlGjNyz9DTmpJErig8UE4jw==",
-      "dev": true,
-      "requires": {
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "crelt": "^1.0.5"
-      }
-    },
-    "@codemirror/state": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.0.tgz",
-      "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==",
-      "dev": true
-    },
-    "@codemirror/theme-one-dark": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.0.tgz",
-      "integrity": "sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==",
-      "dev": true,
-      "requires": {
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@lezer/highlight": "^1.0.0"
-      }
-    },
-    "@codemirror/view": {
-      "version": "6.7.3",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.7.3.tgz",
-      "integrity": "sha512-Lt+4POnhXrZFfHOdPzXEHxrzwdy7cjqYlMkOWvoFGi6/bAsjzlFfr0NY3B15B/PGx+cDFgM1hlc12wvYeZbGLw==",
-      "dev": true,
-      "requires": {
-        "@codemirror/state": "^6.1.4",
-        "style-mod": "^4.0.0",
-        "w3c-keyname": "^2.2.4"
-      }
-    },
     "@commitlint/cli": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-17.4.2.tgz",
@@ -13184,40 +12909,6 @@
         "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
-    "@lezer/common": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz",
-      "integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==",
-      "dev": true
-    },
-    "@lezer/highlight": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.3.tgz",
-      "integrity": "sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==",
-      "dev": true,
-      "requires": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
-    "@lezer/javascript": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.1.tgz",
-      "integrity": "sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==",
-      "dev": true,
-      "requires": {
-        "@lezer/highlight": "^1.1.3",
-        "@lezer/lr": "^1.3.0"
-      }
-    },
-    "@lezer/lr": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.1.tgz",
-      "integrity": "sha512-+GymJB/+3gThkk2zHwseaJTI5oa4AuOuj1I2LCslAVq1dFZLSX8SAe4ZlJq1TjezteDXtF/+d4qeWz9JvnrG9Q==",
-      "dev": true,
-      "requires": {
-        "@lezer/common": "^1.0.0"
-      }
-    },
     "@mdit-vue/plugin-component": {
       "version": "0.11.2",
       "resolved": "https://registry.npmjs.org/@mdit-vue/plugin-component/-/plugin-component-0.11.2.tgz",
@@ -13391,6 +13082,15 @@
         "picomatch": "^2.3.1"
       }
     },
+    "@sapphire/stopwatch": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@sapphire/stopwatch/-/stopwatch-1.5.0.tgz",
+      "integrity": "sha512-DtyKugdy3JTqm6JnEepTY64fGJAqlusDVrlrzifEgSCfGYCqpvB+SBldkWtDH+z+zLcp+PyaFLq7xpVfkhmvGg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@snippetors/vuepress-plugin-tabs": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@snippetors/vuepress-plugin-tabs/-/vuepress-plugin-tabs-1.2.3.tgz",
@@ -14653,21 +14353,6 @@
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
       "dev": true
     },
-    "codemirror": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
-      "dev": true,
-      "requires": {
-        "@codemirror/autocomplete": "^6.0.0",
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/lint": "^6.0.0",
-        "@codemirror/search": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0"
-      }
-    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -15101,12 +14786,6 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
-    "crelt": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.5.tgz",
-      "integrity": "sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==",
-      "dev": true
-    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -17367,6 +17046,12 @@
       "integrity": "sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==",
       "dev": true
     },
+    "monaco-editor": {
+      "version": "0.34.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.34.1.tgz",
+      "integrity": "sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -18784,12 +18469,6 @@
         "acorn": "^8.8.1"
       }
     },
-    "style-mod": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.0.tgz",
-      "integrity": "sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==",
-      "dev": true
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -18953,6 +18632,12 @@
         "yn": "3.1.1"
       }
     },
+    "tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
+      "dev": true
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -19203,18 +18888,6 @@
         "@vue/shared": "3.2.45"
       }
     },
-    "vue-codemirror": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-6.1.1.tgz",
-      "integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==",
-      "dev": true,
-      "requires": {
-        "@codemirror/commands": "6.x",
-        "@codemirror/language": "6.x",
-        "@codemirror/state": "6.x",
-        "@codemirror/view": "6.x"
-      }
-    },
     "vue-demi": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
@@ -19263,12 +18936,6 @@
         "@vuepress/theme-default": "2.0.0-beta.60"
       }
     },
-    "w3c-keyname": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
-      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==",
-      "dev": true
-    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index b7ca9a918..2707a24bf 100644
--- a/package.json
+++ b/package.json
@@ -59,33 +59,30 @@
     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-typescript": "7.18.6",
-    "@codemirror/lang-javascript": "^6.1.2",
-    "@codemirror/theme-one-dark": "^6.1.0",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
+    "@sapphire/stopwatch": "^1.5.0",
     "@snippetors/vuepress-plugin-tabs": "1.2.3",
     "@vuepress/plugin-google-analytics": "2.0.0-beta.60",
     "@vuepress/plugin-pwa": "2.0.0-beta.60",
     "@vuepress/plugin-register-components": "2.0.0-beta.60",
     "@vuepress/plugin-search": "2.0.0-beta.60",
     "babel-loader": "^9.1.2",
-    "codemirror": "6.0.1",
     "eslint": "8.32.0",
     "eslint-config-prettier": "8.6.0",
     "husky": "^8.0.3",
+    "monaco-editor": "^0.34.1",
     "prettier": "2.8.3",
-    "prismjs": "^1.29.0",
     "replace-in-file": "^6.3.5",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "3.4.0",
     "standard-version": "^9.5.0",
     "terser": "^5.16.1",
     "typescript": "^4.9.4",
-    "vitest": "^0.28.1",
-    "vue-codemirror": "^6.1.1",
+    "vitest": "^0.28.2",
     "vuepress": "2.0.0-beta.60",
     "vuepress-plugin-google-adsense2": "1.0.2"
   },