From a9d97017250262de1ccae9107e074181bfc53c5f Mon Sep 17 00:00:00 2001
From: Hugo ATTAL <hugoattal@hotmail.fr>
Date: Sun, 9 Oct 2022 21:37:35 +0200
Subject: [PATCH] feat: add JSON control (#319)

Co-authored-by: Guillaume Chau <guillaume.b.chau@gmail.com>

Related to #30
---
 .../vue3/src/components/Controls.story.vue    |   5 +
 .../panel/ControlsComponentPropItem.vue       |  41 +----
 packages/histoire-app/src/app/util/dark.ts    |  17 ++
 packages/histoire-app/src/shim.d.ts           |   9 ++
 packages/histoire-controls/package.json       |   7 +
 .../src/components/HstWrapper.vue             |   9 +-
 .../__snapshots__/HstCheckbox.test.ts.snap    |   8 +-
 .../src/components/json/HstJson.story.vue     |  41 +++++
 .../src/components/json/HstJson.vue           | 148 ++++++++++++++++++
 packages/histoire-controls/src/end.d.ts       |   8 +
 packages/histoire-controls/src/index.ts       |   3 +
 packages/histoire-controls/src/utils.ts       |  12 ++
 packages/histoire-plugin-svelte/src/index.ts  |   4 +
 packages/histoire-shared/src/state.ts         |   8 +-
 pnpm-lock.yaml                                | 105 +++++++++++++
 15 files changed, 374 insertions(+), 51 deletions(-)
 create mode 100644 packages/histoire-controls/src/components/json/HstJson.story.vue
 create mode 100644 packages/histoire-controls/src/components/json/HstJson.vue
 create mode 100644 packages/histoire-controls/src/end.d.ts
 create mode 100644 packages/histoire-controls/src/utils.ts

diff --git a/examples/vue3/src/components/Controls.story.vue b/examples/vue3/src/components/Controls.story.vue
index cb57657d..65474fc6 100644
--- a/examples/vue3/src/components/Controls.story.vue
+++ b/examples/vue3/src/components/Controls.story.vue
@@ -19,6 +19,7 @@ function initState () {
     longText: 'Longer text...',
     select: 'crash-bandicoot',
     radio: 'metal-gear',
+    object: { foo: 'bar' },
   }
 }
 </script>
@@ -67,6 +68,10 @@ function initState () {
           title="HstRadio"
           :options="radioOptions"
         />
+        <HstJson
+          v-model="state.object"
+          title="HstJson"
+        />
       </template>
     </Variant>
   </Story>
diff --git a/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue b/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue
index 660dd4e9..9889b6fc 100644
--- a/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue
+++ b/packages/histoire-app/src/app/components/panel/ControlsComponentPropItem.vue
@@ -1,13 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { Icon } from '@iconify/vue'
-import type { PropDefinition, AutoPropComponentDefinition } from '@histoire/shared'
-import {
-  HstText,
-  HstNumber,
-  HstCheckbox,
-  HstTextarea,
-} from '@histoire/controls'
+import type { AutoPropComponentDefinition, PropDefinition } from '@histoire/shared'
+import { HstCheckbox, HstJson, HstNumber, HstText } from '@histoire/controls'
 import type { Variant } from '../../types'
 
 const props = defineProps<{
@@ -26,35 +21,15 @@ const comp = computed(() => {
       return HstCheckbox
     case 'object':
     default:
-      return HstTextarea
+      return HstJson
   }
 })
 
-const isJSON = computed(() => comp.value === HstTextarea)
-
-const invalidValue = ref('')
-
 const model = computed({
   get: () => {
-    if (invalidValue.value) {
-      return invalidValue.value
-    }
-    let val = props.variant.state._hPropState[props.component.index]?.[props.definition.name]
-    if (val && isJSON.value) {
-      val = JSON.stringify(val, null, 2)
-    }
-    return val
+    return props.variant.state._hPropState[props.component.index]?.[props.definition.name]
   },
   set: (value) => {
-    invalidValue.value = ''
-    if (isJSON.value) {
-      try {
-        value = JSON.parse(value)
-      } catch (e) {
-        invalidValue.value = value
-        return
-      }
-    }
     if (!props.variant.state._hPropState[props.component.index]) {
       // eslint-disable-next-line vue/no-mutating-props
       props.variant.state._hPropState[props.component.index] = {}
@@ -80,16 +55,8 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
     v-if="comp"
     v-model="model"
     :title="`${definition.name}${canReset ? ' *' : ''}`"
-    :placeholder="isJSON ? 'Enter JSON' : null"
   >
     <template #actions>
-      <Icon
-        v-if="invalidValue"
-        v-tooltip="'JSON error'"
-        icon="carbon:warning-alt"
-        class="htw-text-orange-500"
-      />
-
       <Icon
         v-tooltip="'Remove override'"
         icon="carbon:erase"
diff --git a/packages/histoire-app/src/app/util/dark.ts b/packages/histoire-app/src/app/util/dark.ts
index 467866a1..bfd97e68 100644
--- a/packages/histoire-app/src/app/util/dark.ts
+++ b/packages/histoire-app/src/app/util/dark.ts
@@ -1,4 +1,21 @@
+import { watch } from 'vue'
 import { useDark, useToggle } from '@vueuse/core'
 
 export const isDark = useDark({ valueDark: 'htw-dark' })
 export const toggleDark = useToggle(isDark)
+
+function applyDarkToControls () {
+  window.__hst_controls_dark?.forEach(ref => {
+    ref.value = isDark.value
+  })
+}
+
+watch(isDark, () => {
+  applyDarkToControls()
+}, {
+  immediate: true,
+})
+
+window.__hst_controls_dark_ready = () => {
+  applyDarkToControls()
+}
diff --git a/packages/histoire-app/src/shim.d.ts b/packages/histoire-app/src/shim.d.ts
index 2cb444d2..fd6f79dd 100644
--- a/packages/histoire-app/src/shim.d.ts
+++ b/packages/histoire-app/src/shim.d.ts
@@ -1,7 +1,16 @@
 /// <reference types="vite/client" />
 
+import type { Ref } from '@histoire/vendors/vue'
+
 declare module '*.vue' {
   import { ComponentOptions } from 'vue'
   const comp: ComponentOptions
   export default comp
 }
+
+global {
+  interface Window {
+    __hst_controls_dark: Ref<boolean>[]
+    __hst_controls_dark_ready: () => void
+  }
+}
diff --git a/packages/histoire-controls/package.json b/packages/histoire-controls/package.json
index a57662a2..71f4fa81 100644
--- a/packages/histoire-controls/package.json
+++ b/packages/histoire-controls/package.json
@@ -40,6 +40,13 @@
     "test": "peeky run"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.1.1",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/language": "^6.2.1",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/state": "^6.1.2",
+    "@codemirror/theme-one-dark": "^6.1.0",
+    "@codemirror/view": "^6.3.0",
     "@histoire/vendors": "^0.11.2"
   },
   "devDependencies": {
diff --git a/packages/histoire-controls/src/components/HstWrapper.vue b/packages/histoire-controls/src/components/HstWrapper.vue
index 6d5b6fa7..d40f11d5 100644
--- a/packages/histoire-controls/src/components/HstWrapper.vue
+++ b/packages/histoire-controls/src/components/HstWrapper.vue
@@ -5,13 +5,14 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { withDefaults, computed } from 'vue'
+import { withDefaults } from 'vue'
 import { VTooltip as vTooltip } from 'floating-vue'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   title?: string
   tag?: string
 }>(), {
+  title: undefined,
   tag: 'label',
 })
 
@@ -32,8 +33,8 @@ const props = withDefaults(defineProps<{
     >
       {{ title }}
     </span>
-    <span class="htw-grow htw-flex htw-items-center htw-gap-1">
-      <span class="htw-block htw-grow">
+    <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
+      <span class="htw-block htw-grow htw-max-w-full">
         <slot />
       </span>
       <slot name="actions" />
diff --git a/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap b/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap
index 5d0b2448..11674be5 100644
--- a/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap
+++ b/packages/histoire-controls/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap
@@ -9,8 +9,8 @@ exports[`HstCheckbox toggle to checked 1`] = `
   <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
     Label
   </span>
-  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow">
+  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow htw-max-w-full">
       <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
         </div>
@@ -44,8 +44,8 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
     Label
   </span>
-  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
-    <span class="htw-block htw-grow">
+  <span class="htw-grow htw-max-w-full htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow htw-max-w-full">
       <div class="htw-group htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
         <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out group-hover:htw-border-primary-500 group-hover:dark:htw-border-primary-500 htw-border-primary-500 htw-border-8">
         </div>
diff --git a/packages/histoire-controls/src/components/json/HstJson.story.vue b/packages/histoire-controls/src/components/json/HstJson.story.vue
new file mode 100644
index 00000000..4083bf0b
--- /dev/null
+++ b/packages/histoire-controls/src/components/json/HstJson.story.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import HstJson from './HstJson.vue'
+
+function initState () {
+  return {
+    film: {
+      year: 2017,
+      title: 'Blade Runner 2049',
+      actors: ['Ryan Gosling', 'Harrison Ford', 'Ana de Armas', 'Sylvia Hoeks'],
+    },
+  }
+}
+</script>
+
+<template>
+  <Story
+    title="HstJson"
+    group="controls"
+    :layout="{ type: 'single', iframe: false }"
+  >
+    <Variant
+      title="default"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <HstJson
+          v-model="state.film"
+          title="Textarea"
+        />
+        <pre>{{ state.film }}</pre>
+      </template>
+
+      <template #controls="{ state }">
+        <HstJson
+          v-model="state.film"
+          title="Text"
+        />
+      </template>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/histoire-controls/src/components/json/HstJson.vue b/packages/histoire-controls/src/components/json/HstJson.vue
new file mode 100644
index 00000000..915c2220
--- /dev/null
+++ b/packages/histoire-controls/src/components/json/HstJson.vue
@@ -0,0 +1,148 @@
+<script lang="ts">
+export default {
+  name: 'HstJson',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, onMounted, watch, watchEffect } from 'vue'
+import { Icon } from '@iconify/vue'
+import HstWrapper from '../HstWrapper.vue'
+import { VTooltip as vTooltip } from 'floating-vue'
+import { Compartment } from '@codemirror/state'
+import {
+  EditorView,
+  keymap,
+  highlightActiveLineGutter,
+  highlightActiveLine,
+  highlightSpecialChars,
+  ViewUpdate,
+} from '@codemirror/view'
+import { defaultKeymap } from '@codemirror/commands'
+import { json } from '@codemirror/lang-json'
+import {
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+  foldGutter,
+  foldKeymap,
+} from '@codemirror/language'
+import { lintKeymap } from '@codemirror/lint'
+import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { isDark } from '../../utils'
+
+const props = defineProps<{
+  title?: string
+  modelValue: unknown
+}>()
+
+const emits = defineEmits({
+  'update:modelValue': (newValue: unknown) => true,
+})
+
+let editorView: EditorView
+const internalValue = ref('')
+const invalidValue = ref(false)
+const editorElement = ref<HTMLInputElement>()
+
+const themes = {
+  light: [EditorView.baseTheme({}), syntaxHighlighting(defaultHighlightStyle)],
+  dark: [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)],
+}
+
+const themeConfig = new Compartment()
+
+const extensions = [
+  highlightActiveLineGutter(),
+  highlightActiveLine(),
+  highlightSpecialChars(),
+  json(),
+  bracketMatching(),
+  indentOnInput(),
+  foldGutter(),
+  keymap.of([
+    ...defaultKeymap,
+    ...foldKeymap,
+    ...lintKeymap,
+  ]),
+  EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+    internalValue.value = viewUpdate.view.state.doc.toString()
+  }),
+  themeConfig.of(themes.light),
+]
+
+onMounted(() => {
+  editorView = new EditorView({
+    doc: JSON.stringify(props.modelValue, null, 2),
+    extensions,
+    parent: editorElement.value,
+  })
+
+  watchEffect(() => {
+    editorView.dispatch({
+      effects: [
+        themeConfig.reconfigure(themes[isDark.value ? 'dark' : 'light']),
+      ],
+    })
+  })
+})
+
+watch(() => props.modelValue, () => {
+  let sameDocument
+
+  try {
+    sameDocument = (JSON.stringify(JSON.parse(internalValue.value)) === JSON.stringify(props.modelValue))
+  } catch (e) {
+    sameDocument = false
+  }
+
+  if (!sameDocument) {
+    editorView.dispatch({ changes: [{ from: 0, to: editorView.state.doc.length, insert: JSON.stringify(props.modelValue, null, 2) }] })
+  }
+}, { deep: true })
+
+watch(() => internalValue.value, () => {
+  invalidValue.value = false
+  try {
+    emits('update:modelValue', JSON.parse(internalValue.value))
+  } catch (e) {
+    invalidValue.value = true
+  }
+})
+
+</script>
+
+<template>
+  <HstWrapper
+    :title="title"
+    class="htw-cursor-text"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div
+      ref="editorElement"
+      class="__histoire-json-code htw-w-full htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus-within:htw-border-primary-500 dark:focus-within:htw-border-primary-500 htw-rounded-sm htw-box-border htw-overflow-auto htw-resize-y htw-min-h-32 htw-h-48 htw-relative"
+      v-bind="{ ...$attrs, class: null, style: null }"
+    />
+
+    <template #actions>
+      <Icon
+        v-if="invalidValue"
+        v-tooltip="'JSON error'"
+        icon="carbon:warning-alt"
+        class="htw-text-orange-500"
+      />
+
+      <slot name="actions" />
+    </template>
+  </HstWrapper>
+</template>
+
+<style scoped>
+.__histoire-json-code :deep(.cm-editor) {
+  height: 100%;
+  min-width: 280px;
+}
+</style>
diff --git a/packages/histoire-controls/src/end.d.ts b/packages/histoire-controls/src/end.d.ts
new file mode 100644
index 00000000..e134bef1
--- /dev/null
+++ b/packages/histoire-controls/src/end.d.ts
@@ -0,0 +1,8 @@
+import type { Ref } from '@histoire/vendors/vue'
+
+global {
+  interface Window {
+    __hst_controls_dark: Ref<boolean>[]
+    __hst_controls_dark_ready: () => void
+  }
+}
diff --git a/packages/histoire-controls/src/index.ts b/packages/histoire-controls/src/index.ts
index d23a656e..89ab6b47 100644
--- a/packages/histoire-controls/src/index.ts
+++ b/packages/histoire-controls/src/index.ts
@@ -12,6 +12,7 @@ import HstTokenListVue from './components/design-tokens/HstTokenList.vue'
 import HstTokenGridVue from './components/design-tokens/HstTokenGrid.vue'
 import HstCopyIconVue from './components/HstCopyIcon.vue'
 import HstRadioVue from './components/radio/HstRadio.vue'
+import HstJsonVue from './components/json/HstJson.vue'
 
 export const HstButton = HstButtonVue
 export const HstButtonGroup = HstButtonGroupVue
@@ -27,6 +28,7 @@ export const HstTokenList = HstTokenListVue
 export const HstTokenGrid = HstTokenGridVue
 export const HstCopyIcon = HstCopyIconVue
 export const HstRadio = HstRadioVue
+export const HstJson = HstJsonVue
 
 export const components = {
   HstButton,
@@ -43,6 +45,7 @@ export const components = {
   HstTokenGrid,
   HstCopyIcon,
   HstRadio,
+  HstJson,
 }
 
 export * from './types'
diff --git a/packages/histoire-controls/src/utils.ts b/packages/histoire-controls/src/utils.ts
new file mode 100644
index 00000000..49d2f483
--- /dev/null
+++ b/packages/histoire-controls/src/utils.ts
@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+export const isDark = ref(false)
+
+if (!window.__hst_controls_dark) {
+  window.__hst_controls_dark = []
+}
+
+// There could be multiple instances of the controls lib (in the controls book https://controls.histoire.dev)
+window.__hst_controls_dark.push(isDark)
+
+window.__hst_controls_dark_ready?.()
diff --git a/packages/histoire-plugin-svelte/src/index.ts b/packages/histoire-plugin-svelte/src/index.ts
index 3f5c3af2..2783a6c4 100644
--- a/packages/histoire-plugin-svelte/src/index.ts
+++ b/packages/histoire-plugin-svelte/src/index.ts
@@ -100,6 +100,10 @@ export interface Hst {
     options: HstControlOption[]
     title?: string
   }>
+  Json: typeof SvelteComponentTyped<{
+    value: unknown
+    title: string
+  }>
   Shades: typeof SvelteComponentTyped<{
     shades: Record<string, any>
     getName?: (key: string, color: string) => string
diff --git a/packages/histoire-shared/src/state.ts b/packages/histoire-shared/src/state.ts
index ae4b6dac..db4db05e 100644
--- a/packages/histoire-shared/src/state.ts
+++ b/packages/histoire-shared/src/state.ts
@@ -22,12 +22,8 @@ export function omit (data, keys: string[]) {
   return copy
 }
 
-export function applyState (target: any, state: any, override = false) {
+export function applyState (target: any, state: any) {
   for (const key in state) {
-    if (!override && target[key] && !key.startsWith('_h') && typeof target[key] === 'object' && !Array.isArray(target[key])) {
-      Object.assign(target[key], state[key])
-    } else {
-      target[key] = state[key]
-    }
+    target[key] = state[key]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c001d3c..b53f9ce9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -380,6 +380,13 @@ importers:
 
   packages/histoire-controls:
     specifiers:
+      '@codemirror/commands': ^6.1.1
+      '@codemirror/lang-json': ^6.0.0
+      '@codemirror/language': ^6.2.1
+      '@codemirror/lint': ^6.0.0
+      '@codemirror/state': ^6.1.2
+      '@codemirror/theme-one-dark': ^6.1.0
+      '@codemirror/view': ^6.3.0
       '@histoire/vendors': ^0.11.2
       '@peeky/server': ^0.14.0
       '@peeky/test': ^0.14.1
@@ -398,6 +405,13 @@ importers:
       vue: ^3.2.31
       vue-tsc: ^0.35.2
     dependencies:
+      '@codemirror/commands': 6.1.1
+      '@codemirror/lang-json': 6.0.0
+      '@codemirror/language': 6.2.1
+      '@codemirror/lint': 6.0.0
+      '@codemirror/state': 6.1.2
+      '@codemirror/theme-one-dark': 6.1.0
+      '@codemirror/view': 6.3.0
       '@histoire/vendors': link:../histoire-vendors
     devDependencies:
       '@peeky/server': 0.14.0
@@ -1194,6 +1208,62 @@ packages:
     resolution: {integrity: sha512-gaBUSaKS65mN3iKZEgichbXYEmAa/pXkc5Gbt+1BptYphdGkj09ggdsiE4w8g0F/uI1g36QaTKrzVnBAWMipvQ==}
     dev: true
 
+  /@codemirror/commands/6.1.1:
+    resolution: {integrity: sha512-ibDohwkk7vyu3VsnZNlQhwk0OETBtlkYV+6AHfn5Zgq0sxa+yGVX+apwtC3M4wh6AH7yU5si/NysoECs5EGS3Q==}
+    dependencies:
+      '@codemirror/language': 6.2.1
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.3.0
+      '@lezer/common': 1.0.1
+    dev: false
+
+  /@codemirror/lang-json/6.0.0:
+    resolution: {integrity: sha512-DvTcYTKLmg2viADXlTdufrT334M9jowe1qO02W28nvm+nejcvhM5vot5mE8/kPrxYw/HJHhwu1z2PyBpnMLCNQ==}
+    dependencies:
+      '@codemirror/language': 6.2.1
+      '@lezer/json': 1.0.0
+    dev: false
+
+  /@codemirror/language/6.2.1:
+    resolution: {integrity: sha512-MC3svxuvIj0MRpFlGHxLS6vPyIdbTr2KKPEW46kCoCXw2ktb4NTkpkPBI/lSP/FoNXLCBJ0mrnUi1OoZxtpW1Q==}
+    dependencies:
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.3.0
+      '@lezer/common': 1.0.1
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+      style-mod: 4.0.0
+    dev: false
+
+  /@codemirror/lint/6.0.0:
+    resolution: {integrity: sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==}
+    dependencies:
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.3.0
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/state/6.1.2:
+    resolution: {integrity: sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA==}
+    dev: false
+
+  /@codemirror/theme-one-dark/6.1.0:
+    resolution: {integrity: sha512-AiTHtFRu8+vWT9wWUWDM+cog6ZwgivJogB1Tm/g40NIpLwph7AnmxrSzWfvJN5fBVufsuwBxecQCNmdcR5D7Aw==}
+    dependencies:
+      '@codemirror/language': 6.2.1
+      '@codemirror/state': 6.1.2
+      '@codemirror/view': 6.3.0
+      '@lezer/highlight': 1.1.1
+    dev: false
+
+  /@codemirror/view/6.3.0:
+    resolution: {integrity: sha512-jMN9OGKmzRPJ+kksfMrB5e/A9heQncirHsz8XNBpgEbYONCk5tWHMKVWKTNwznkUGD5mnigXI1i5YIcWpscSPg==}
+    dependencies:
+      '@codemirror/state': 6.1.2
+      style-mod: 4.0.0
+      w3c-keyname: 2.2.6
+    dev: false
+
   /@colors/colors/1.5.0:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
@@ -1604,6 +1674,29 @@ packages:
       - supports-color
     dev: true
 
+  /@lezer/common/1.0.1:
+    resolution: {integrity: sha512-8TR5++Q/F//tpDsLd5zkrvEX5xxeemafEaek7mUp7Y+bI8cKQXdSqhzTOBaOogETcMOVr0pT3BBPXp13477ciw==}
+    dev: false
+
+  /@lezer/highlight/1.1.1:
+    resolution: {integrity: sha512-duv9D23O9ghEDnnUDmxu+L8pJy4nYo4AbCOHIudUhscrLSazqeJeK1V50EU6ZufWF1zv0KJwu/frFRyZWXxHBQ==}
+    dependencies:
+      '@lezer/common': 1.0.1
+    dev: false
+
+  /@lezer/json/1.0.0:
+    resolution: {integrity: sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==}
+    dependencies:
+      '@lezer/highlight': 1.1.1
+      '@lezer/lr': 1.2.3
+    dev: false
+
+  /@lezer/lr/1.2.3:
+    resolution: {integrity: sha512-qpB7rBzH8f6Mzjv2AVZRahcm+2Cf7nbIH++uXbvVOL1yIRvVWQ3HAM/saeBLCyz/togB7LGo76qdJYL1uKQlqA==}
+    dependencies:
+      '@lezer/common': 1.0.1
+    dev: false
+
   /@mapbox/node-pre-gyp/1.0.10:
     resolution: {integrity: sha512-4ySo4CjzStuprMwk35H5pPbkymjv1SF3jGLj6rAHp/xT/RF7TL7bd9CTm1xDY49K2qF7jmR/g7k+SkLETP6opA==}
     hasBin: true
@@ -4475,6 +4568,10 @@ packages:
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: false
+
   /cross-fetch/3.1.5:
     resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
     dependencies:
@@ -10439,6 +10536,10 @@ packages:
     dependencies:
       acorn: 8.8.0
 
+  /style-mod/4.0.0:
+    resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
+    dev: false
+
   /stylehacks/5.1.0_postcss@8.4.17:
     resolution: {integrity: sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==}
     engines: {node: ^10 || ^12 || >=14.0}
@@ -11704,6 +11805,10 @@ packages:
       vite-plugin-vuetify: 1.0.0-alpha.12_tacspt2dmukucclm75di65rrdy
       vue: 3.2.40
 
+  /w3c-keyname/2.2.6:
+    resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
+    dev: false
+
   /wait-on/6.0.0_debug@4.3.2:
     resolution: {integrity: sha512-tnUJr9p5r+bEYXPUdRseolmz5XqJTTj98JgOsfBn7Oz2dxfE2g3zw1jE+Mo8lopM3j3et/Mq1yW7kKX6qw7RVw==}
     engines: {node: '>=10.0.0'}