refactor: init codemirror theming support

2021-11-09 18:43:29 +05:30
parent 9b297ba882
commit 13bd831c5f
7 changed files with 508 additions and 61 deletions
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -25,30 +25,54 @@ import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
 import "codemirror/addon/selection/active-line"

-import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
-
 import {
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+} from "@codemirror/view"
+import {
+  Extension,
  EditorState,
  Compartment,
  EditorSelection,
  TransactionSpec,
-  Extension,
 } from "@codemirror/state"
-import { EditorView, keymap, ViewPlugin, ViewUpdate } from "@codemirror/view"
+import { history, historyKeymap } from "@codemirror/history"
+import { foldKeymap } from "@codemirror/fold"
+import { indentOnInput, Language, LanguageSupport } from "@codemirror/language"
+import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter"
 import { defaultKeymap } from "@codemirror/commands"
-import { basicSetup } from "@codemirror/basic-setup"
+import { bracketMatching } from "@codemirror/matchbrackets"
+import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"
+import {
+  completionKeymap,
+  Completion,
+  autocompletion,
+} from "@codemirror/autocomplete"
+import { commentKeymap } from "@codemirror/comment"
+import { rectangularSelection } from "@codemirror/rectangular-selection"
+import { defaultHighlightStyle } from "@codemirror/highlight"
+import { lintKeymap, linter } from "@codemirror/lint"
+
+import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
+
 import { javascriptLanguage } from "@codemirror/lang-javascript"
-import { Language, LanguageSupport } from "@codemirror/language"
-import { linter } from "@codemirror/lint"
 import { jsonLanguage } from "@codemirror/lang-json"
-import { Completion, autocompletion } from "@codemirror/autocomplete"
 import { onBeforeUnmount } from "@vue/runtime-dom"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
-import baseTheme from "./themes/baseTheme"
+import { baseThemeFoldStyle } from "./themes/baseTheme"
+import { darkTheme, darkHighlightStyle } from "./themes/darkTheme"
+import { lightTheme, lightHighlightStyle } from "./themes/lightTheme"
+import { blackTheme, blackHighlightStyle } from "./themes/blackTheme"
 import { HoppBgColor } from "~/newstore/settings"

 type CodeMirrorOptions = {
@@ -236,6 +260,34 @@ export function useCodemirror(
  }
 }

+export const basicSetup: Extension = [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  baseThemeFoldStyle,
+  drawSelection(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  defaultHighlightStyle.fallback,
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...searchKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...commentKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+]
+
 const hoppCompleterExt = (completer: Completer): Extension => {
  return autocompletion({
    override: [
@@ -321,11 +373,29 @@ const getEditorLanguage = (
    O.getOrElseW(() => [])
  )

-const getThemeExt = (mode: HoppBgColor) => {
-  // TODO: Implement more themes here
+const getHightlightMode = (mode: HoppBgColor): Extension => {
  switch (mode) {
+    case "light":
+      return lightHighlightStyle
+    case "dark":
+      return darkHighlightStyle
+    case "black":
+      return blackHighlightStyle
    default:
-      return baseTheme
+      return darkHighlightStyle
+  }
+}
+
+const getThemeExt = (mode: HoppBgColor): Extension => {
+  switch (mode) {
+    case "dark":
+      return darkTheme
+    case "black":
+      return blackTheme
+    case "light":
+      return lightTheme
+    case "system":
+      return darkTheme
  }
 }

@@ -339,6 +409,7 @@ export function useNewCodemirror(
  const language = new Compartment()
  const lineWrapping = new Compartment()
  const theming = new Compartment()
+  const highlightStyle = new Compartment()

  const cachedCursor = ref({
    line: 0,
@@ -355,6 +426,7 @@ export function useNewCodemirror(
    extensions: [
      basicSetup,
      theming.of(getThemeExt($colorMode.value)),
+      highlightStyle.of(getHightlightMode($colorMode.value)),
      ViewPlugin.fromClass(
        class {
          update(update: ViewUpdate) {
@@ -469,7 +541,10 @@ export function useNewCodemirror(
    () => $colorMode.value,
    (newVal) => {
      dispatch({
-        effects: theming.reconfigure(getThemeExt(newVal)),
+        effects: [
+          theming.reconfigure(getThemeExt(newVal)),
+          highlightStyle.reconfigure(getHightlightMode(newVal)),
+        ],
      })
    }
  )
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -1,22 +1,9 @@
-import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { foldGutter } from "@codemirror/fold"

-const baseTheme = EditorView.theme({
-  "&": {
-    fontSize: "var(--body-font-size)",
-  },
-  ".cm-content": {
-    fontFamily: "var(--font-mono)",
-    backgroundColor: "var(--primary-color)",
-  },
-  ".cm-gutters": {
-    fontFamily: "var(--font-mono)",
-    backgroundColor: "var(--primary-color)",
-    borderColor: "var(--divider-light-color)",
-  },
-  ".cm-lineNumbers": {
-    minWidth: "3em",
-    color: "var(--secondary-light-color)",
-  },
+export const baseThemeFoldStyle = foldGutter({
+  openText: "▾",
+  closedText: "▸",
 })

-export default baseTheme
+export const baseTheme: Extension = [baseThemeFoldStyle]
--- a/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/blackTheme.ts
@@ -0,0 +1,122 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
+
+const chalky = "#e5c07b"
+const coral = "#e06c75"
+const cyan = "#56b6c2"
+const invalid = "#ffffff"
+const ivory = "#abb2bf"
+const stone = "#7d8799"
+const malibu = "#61afef"
+const sage = "#98c379"
+const whiskey = "#d19a66"
+const violet = "#c678dd"
+
+export const blackTheme = EditorView.theme(
+  {
+    "&": {
+      fontSize: "var(--body-font-size)",
+    },
+    ".cm-content": {
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+    ".cm-gutters": {
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--primary-dark-color)",
+    },
+  },
+  {
+    dark: true,
+  }
+)
+
+export const blackHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+export const blackMode: Extension = [blackTheme, blackHighlightStyle]
--- a/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/darkTheme.ts
@@ -0,0 +1,122 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
+
+const chalky = "#e5c07b"
+const coral = "#e06c75"
+const cyan = "#56b6c2"
+const invalid = "#ffffff"
+const ivory = "#abb2bf"
+const stone = "#7d8799"
+const malibu = "#61afef"
+const sage = "#98c379"
+const whiskey = "#d19a66"
+const violet = "#c678dd"
+
+export const darkTheme = EditorView.theme(
+  {
+    "&": {
+      fontSize: "var(--body-font-size)",
+    },
+    ".cm-content": {
+      caretColor: "var(--secondary-light-color)",
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--secondary-light-color)",
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: "var(--primary-light-color)" },
+    ".cm-panels": {
+      backgroundColor: "var(--primary-dark-color)",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" },
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+    ".cm-gutters": {
+      fontFamily: "var(--font-mono)",
+      backgroundColor: "var(--primary-color)",
+      borderColor: "var(--divider-light-color)",
+    },
+    ".cm-lineNumbers": {
+      minWidth: "3em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter": {
+      minWidth: "2em",
+      color: "var(--secondary-light-color)",
+    },
+    ".cm-foldGutter .cm-gutterElement": {
+      textAlign: "center",
+    },
+    ".cm-line": {
+      paddingLeft: "0.5em",
+      paddingRight: "0.5em",
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "var(--primary-dark-color)",
+    },
+  },
+  {
+    dark: true,
+  }
+)
+
+export const darkHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+export const darkMode: Extension = [darkTheme, darkHighlightStyle]
--- a/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/lightTheme.ts
@@ -0,0 +1,140 @@
+import { EditorView } from "@codemirror/view"
+import { Extension } from "@codemirror/state"
+import { HighlightStyle, tags as t } from "@codemirror/highlight"
+
+const chalky = "#e5c07b"
+const coral = "#e06c75"
+const cyan = "#56b6c2"
+const invalid = "#ffffff"
+const ivory = "#abb2bf"
+const stone = "#7d8799"
+const malibu = "#61afef"
+const sage = "#98c379"
+const whiskey = "#d19a66"
+const violet = "#c678dd"
+const darkBackground = "#21252b"
+const highlightBackground = "#2c313a"
+const background = "#282c34"
+const tooltipBackground = "#353a42"
+const selection = "#3E4451"
+const cursor = "#528bff"
+
+export const lightTheme = EditorView.theme(
+  {
+    "&": {
+      color: ivory,
+      backgroundColor: background,
+    },
+
+    ".cm-content": {
+      caretColor: cursor,
+    },
+
+    "&.cm-focused .cm-cursor": { borderLeftColor: cursor },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+      { backgroundColor: selection },
+
+    ".cm-panels": { backgroundColor: darkBackground, color: ivory },
+    ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
+
+    ".cm-searchMatch": {
+      backgroundColor: "#72a1ff59",
+      outline: "1px solid #457dff",
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": {
+      backgroundColor: "#6199ff2f",
+    },
+
+    ".cm-activeLine": { backgroundColor: highlightBackground },
+    ".cm-selectionMatch": { backgroundColor: "#aafe661a" },
+
+    "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+      backgroundColor: "#bad0f847",
+      outline: "1px solid #515a6b",
+    },
+
+    ".cm-gutters": {
+      backgroundColor: background,
+      color: stone,
+      border: "none",
+    },
+
+    ".cm-activeLineGutter": {
+      backgroundColor: highlightBackground,
+    },
+
+    ".cm-foldPlaceholder": {
+      backgroundColor: "transparent",
+      border: "none",
+      color: "#ddd",
+    },
+
+    ".cm-tooltip": {
+      border: "none",
+      backgroundColor: tooltipBackground,
+    },
+    ".cm-tooltip .cm-tooltip-arrow:before": {
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent",
+    },
+    ".cm-tooltip .cm-tooltip-arrow:after": {
+      borderTopColor: tooltipBackground,
+      borderBottomColor: tooltipBackground,
+    },
+    ".cm-tooltip-autocomplete": {
+      "& > ul > li[aria-selected]": {
+        backgroundColor: highlightBackground,
+        color: ivory,
+      },
+    },
+  },
+  { dark: true }
+)
+
+export const lightHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: violet },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: malibu },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey },
+  { tag: [t.definition(t.name), t.separator], color: ivory },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: chalky,
+  },
+  {
+    tag: [
+      t.operator,
+      t.operatorKeyword,
+      t.url,
+      t.escape,
+      t.regexp,
+      t.link,
+      t.special(t.string),
+    ],
+    color: cyan,
+  },
+  { tag: [t.meta, t.comment], color: stone },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: stone, textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: coral },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: sage },
+  { tag: t.invalid, color: invalid },
+])
+
+export const lightMode: Extension = [lightHighlightStyle, lightHighlightStyle]
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -35,13 +35,20 @@
  "dependencies": {
    "@apollo/client": "^3.4.16",
    "@codemirror/autocomplete": "^0.19.4",
-    "@codemirror/basic-setup": "^0.19.0",
+    "@codemirror/closebrackets": "^0.19.0",
    "@codemirror/commands": "^0.19.5",
+    "@codemirror/comment": "^0.19.0",
+    "@codemirror/fold": "^0.19.1",
    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/history": "^0.19.0",
    "@codemirror/lang-javascript": "^0.19.2",
    "@codemirror/lang-json": "^0.19.1",
    "@codemirror/language": "^0.19.3",
    "@codemirror/lint": "^0.19.2",
+    "@codemirror/matchbrackets": "^0.19.3",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
    "@codemirror/state": "^0.19.3",
    "@codemirror/text": "^0.19.5",
    "@codemirror/view": "^0.19.12",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,13 +21,20 @@ importers:
      '@babel/core': ^7.16.0
      '@babel/preset-env': ^7.16.0
      '@codemirror/autocomplete': ^0.19.4
-      '@codemirror/basic-setup': ^0.19.0
+      '@codemirror/closebrackets': ^0.19.0
      '@codemirror/commands': ^0.19.5
+      '@codemirror/comment': ^0.19.0
+      '@codemirror/fold': ^0.19.1
      '@codemirror/gutter': ^0.19.4
+      '@codemirror/highlight': ^0.19.6
+      '@codemirror/history': ^0.19.0
      '@codemirror/lang-javascript': ^0.19.2
      '@codemirror/lang-json': ^0.19.1
      '@codemirror/language': ^0.19.3
      '@codemirror/lint': ^0.19.2
+      '@codemirror/matchbrackets': ^0.19.3
+      '@codemirror/rectangular-selection': ^0.19.1
+      '@codemirror/search': ^0.19.2
      '@codemirror/state': ^0.19.3
      '@codemirror/text': ^0.19.5
      '@codemirror/view': ^0.19.12
@@ -137,13 +144,20 @@ importers:
    dependencies:
      '@apollo/client': 3.4.16_f3f7eb5e21785ef7d5faca94c1a68824
      '@codemirror/autocomplete': 0.19.4
-      '@codemirror/basic-setup': 0.19.0
+      '@codemirror/closebrackets': 0.19.0
      '@codemirror/commands': 0.19.5
+      '@codemirror/comment': 0.19.0
+      '@codemirror/fold': 0.19.1
      '@codemirror/gutter': 0.19.4
+      '@codemirror/highlight': 0.19.6
+      '@codemirror/history': 0.19.0
      '@codemirror/lang-javascript': 0.19.2
      '@codemirror/lang-json': 0.19.1
      '@codemirror/language': 0.19.3
      '@codemirror/lint': 0.19.2
+      '@codemirror/matchbrackets': 0.19.3
+      '@codemirror/rectangular-selection': 0.19.1
+      '@codemirror/search': 0.19.2
      '@codemirror/state': 0.19.3
      '@codemirror/text': 0.19.5
      '@codemirror/view': 0.19.12
@@ -1726,26 +1740,6 @@ packages:
      '@lezer/common': 0.15.7
    dev: false

-  /@codemirror/basic-setup/0.19.0:
-    resolution: {integrity: sha512-Yhrf7fIz8+INHWOhpWeRwbs8fpc0KsydX9baD7TyYqniLVWyTi0Hwm52mr0f5O+k4YaJPeHAgT3x9gzDXZIvOw==}
-    dependencies:
-      '@codemirror/autocomplete': 0.19.4
-      '@codemirror/closebrackets': 0.19.0
-      '@codemirror/commands': 0.19.5
-      '@codemirror/comment': 0.19.0
-      '@codemirror/fold': 0.19.1
-      '@codemirror/gutter': 0.19.4
-      '@codemirror/highlight': 0.19.6
-      '@codemirror/history': 0.19.0
-      '@codemirror/language': 0.19.3
-      '@codemirror/lint': 0.19.2
-      '@codemirror/matchbrackets': 0.19.3
-      '@codemirror/rectangular-selection': 0.19.1
-      '@codemirror/search': 0.19.2
-      '@codemirror/state': 0.19.3
-      '@codemirror/view': 0.19.12
-    dev: false
-
  /@codemirror/closebrackets/0.19.0:
    resolution: {integrity: sha512-dFWX5OEVYWRNtGaifSbwIAlymnRRjxWMiMbffbAjF7p0zfGHDbdGkiT56q3Xud63h5/tQdSo5dK1iyNTzHz5vg==}
    dependencies:
@@ -3916,8 +3910,8 @@ packages:
      ufo: 0.7.9
    dev: false

-  /@nuxt/kit-edge/3.0.0-27268729.5b8e10f:
-    resolution: {integrity: sha512-m7bzSe8NRuR7ZcZqKwBQfOb1y3AlmGIiNMibZVO4r0ggIfT4fmkzVwfdZm+oWNhOYlZET7Kyk08rSjwShENukQ==}
+  /@nuxt/kit-edge/3.0.0-27274229.29599f0:
+    resolution: {integrity: sha512-8GyQaBXQh6RelLe5ahXBTZWugaBYKd3cESc+GqxoHlFVy0i2HqZkUggFShDEoT7FCckzfGHTZF5uV04k87D73w==}
    engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0}
    dependencies:
      consola: 2.15.3
@@ -3935,7 +3929,7 @@ packages:
      rc9: 1.2.0
      scule: 0.2.1
      semver: 7.3.5
-      std-env: 3.0.0
+      std-env: 3.0.1
      ufo: 0.7.9
      unctx: 1.0.2
      untyped: 0.2.12
@@ -14040,7 +14034,7 @@ packages:
  /nuxt-windicss/2.0.11:
    resolution: {integrity: sha512-/vAEmKLq1Iomuj4lz751dsoXdlGVAoiEGSh3JVxuZJMkqc/yrHTQrNhtMaOQzx5heuVsQ+E2bIF+Q/tfxicOFQ==}
    dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27268729.5b8e10f
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27274229.29599f0
      defu: 5.0.0
      h3: 0.3.3
      listhen: 0.2.5
@@ -16867,8 +16861,8 @@ packages:
      ci-info: 3.2.0
    dev: false

-  /std-env/3.0.0:
-    resolution: {integrity: sha512-GoFEqAGzhaexp/T01rIiLOK9LHa6HmVwEUyeU4cwdSnOhfxpw9IMeAFi44SHWbCErEs29qEh7vAOUbtUmoycjA==}
+  /std-env/3.0.1:
+    resolution: {integrity: sha512-mC1Ps9l77/97qeOZc+HrOL7TIaOboHqMZ24dGVQrlxFcpPpfCHpH+qfUT7Dz+6mlG8+JPA1KfBQo19iC/+Ngcw==}
    dev: true

  /stream-browserify/2.0.2: