From 5bc2ebf0ca08cae24425b3b3cfd7b672a9ff28df Mon Sep 17 00:00:00 2001
From: geoffgscott <59206100+geoffgscott@users.noreply.github.com>
Date: Thu, 29 Feb 2024 12:24:38 -0800
Subject: [PATCH] feat: Add codemirror syntax highlighting back in and move to
 a static color (#1080)

* feat: Add codemirror syntax highlighting back in and move to a static value for selection color

* feat: Add CSS language

* docs(changeset): Add syntax highlighting back to codemirror
---
 .changeset/selfish-pets-live.md               | 13 +++++
 .../SwaggerEditor/SwaggerEditorInput.vue      |  8 ++-
 packages/use-codemirror/package.json          |  4 +-
 .../use-codemirror/src/hooks/useCodeMirror.ts | 55 +++++++++++++++----
 packages/use-codemirror/src/themes/index.ts   |  3 +-
 packages/use-codemirror/src/types.ts          |  2 +-
 pnpm-lock.yaml                                | 38 ++++++++++---
 7 files changed, 96 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/selfish-pets-live.md

diff --git a/.changeset/selfish-pets-live.md b/.changeset/selfish-pets-live.md
new file mode 100644
index 0000000000..6c84bee818
--- /dev/null
+++ b/.changeset/selfish-pets-live.md
@@ -0,0 +1,13 @@
+---
+"@scalar/fastify-api-reference": patch
+"@scalar/api-client-proxy": patch
+"@scalar/swagger-editor": patch
+"@scalar/swagger-parser": patch
+"@scalar/use-codemirror": patch
+"@scalar/api-reference": patch
+"@scalar/echo-server": patch
+"@scalar/api-client": patch
+"@scalar/components": patch
+---
+
+Add syntax highlighting back to codemirror
diff --git a/packages/swagger-editor/src/components/SwaggerEditor/SwaggerEditorInput.vue b/packages/swagger-editor/src/components/SwaggerEditor/SwaggerEditorInput.vue
index e422bd853a..c2dcfb9f64 100644
--- a/packages/swagger-editor/src/components/SwaggerEditor/SwaggerEditorInput.vue
+++ b/packages/swagger-editor/src/components/SwaggerEditor/SwaggerEditorInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { CodeMirror, type CodeMirrorLanguage } from '@scalar/use-codemirror'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import { isJsonString } from '../../helpers'
 import { type SwaggerEditorInputProps } from '../../types'
 
-defineProps<SwaggerEditorInputProps>()
+const props = defineProps<SwaggerEditorInputProps>()
 
 defineEmits<{
   (e: 'contentUpdate', value: string): void
@@ -22,6 +22,8 @@ const codeMirrorRef = ref<typeof CodeMirror | null>(null)
 function getSyntaxHighlighting(content?: string): CodeMirrorLanguage {
   return isJsonString(content) ? 'json' : 'yaml'
 }
+
+const language = computed(() => getSyntaxHighlighting(props.value))
 </script>
 
 <template>
@@ -29,7 +31,7 @@ function getSyntaxHighlighting(content?: string): CodeMirrorLanguage {
     <CodeMirror
       ref="codeMirrorRef"
       :content="value"
-      :language="getSyntaxHighlighting(value)"
+      :language="language"
       lineNumbers
       @change="(value: string) => $emit('contentUpdate', value)" />
   </div>
diff --git a/packages/use-codemirror/package.json b/packages/use-codemirror/package.json
index 22b33c7023..f5119111a6 100644
--- a/packages/use-codemirror/package.json
+++ b/packages/use-codemirror/package.json
@@ -41,10 +41,12 @@
     "directory": "packages/use-codemirror"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.12.0",
+    "@codemirror/lang-css": "^6.2.1",
     "@codemirror/lang-html": "^6.4.8",
     "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/lang-yaml": "^6.0.0",
     "@codemirror/language": "^6.10.1",
-    "@codemirror/legacy-modes": "^6.0.0",
     "@codemirror/state": "^6.4.0",
     "@codemirror/view": "^6.23.1",
     "@lezer/common": "^1.2.1",
diff --git a/packages/use-codemirror/src/hooks/useCodeMirror.ts b/packages/use-codemirror/src/hooks/useCodeMirror.ts
index e71d154ba3..c4a2cd6bd3 100644
--- a/packages/use-codemirror/src/hooks/useCodeMirror.ts
+++ b/packages/use-codemirror/src/hooks/useCodeMirror.ts
@@ -1,11 +1,26 @@
+import {
+  autocompletion,
+  closeBrackets,
+  closeBracketsKeymap,
+  completionKeymap,
+} from '@codemirror/autocomplete'
+import { css } from '@codemirror/lang-css'
 import { html } from '@codemirror/lang-html'
 import { json } from '@codemirror/lang-json'
-import { type LanguageSupport, StreamLanguage } from '@codemirror/language'
-import * as yamlMode from '@codemirror/legacy-modes/mode/yaml'
+import { yaml } from '@codemirror/lang-yaml'
+import {
+  type LanguageSupport,
+  type StreamLanguage,
+  bracketMatching,
+  defaultHighlightStyle,
+  indentOnInput,
+  syntaxHighlighting,
+} from '@codemirror/language'
 import { type Extension, StateEffect } from '@codemirror/state'
 import {
   EditorView,
   type KeyBinding,
+  highlightSpecialChars,
   keymap,
   lineNumbers as lineNumbersExtension,
 } from '@codemirror/view'
@@ -212,15 +227,16 @@ export const useCodeMirror = (
 
 // ---------------------------------------------------------------------------
 
-const syntaxHighlighting: {
-  [lang in CodeMirrorLanguage]: LanguageSupport | StreamLanguage<any>
+const languageExtensions: {
+  [lang in CodeMirrorLanguage]: () => LanguageSupport | StreamLanguage<any>
 } = {
-  html: html(),
-  json: json(),
-  yaml: StreamLanguage.define(yamlMode.yaml),
+  html: html,
+  json: json,
+  yaml: yaml,
+  css: css,
 }
 
-/** Generate the list of extension from parameters */
+/** Generate  the list of extension from parameters */
 function getCodeMirrorExtensions({
   onChange,
   onBlur,
@@ -249,7 +265,8 @@ function getCodeMirrorExtensions({
   additionalExtensions?: Extension[]
 }) {
   const extensions: Extension[] = [
-    keymap.of([selectAllKeyBinding]),
+    highlightSpecialChars(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
     EditorView.theme({
       '.cm-line': {
         lineHeight: '20px',
@@ -283,11 +300,25 @@ function getCodeMirrorExtensions({
   if (!withoutTheme) extensions.push(customTheme)
 
   // Read only
-  if (readOnly) extensions.push(EditorView.editable.of(false))
+  if (readOnly) {
+    extensions.push(EditorView.editable.of(false))
+  } else {
+    extensions.push(
+      indentOnInput(),
+      bracketMatching(),
+      autocompletion(),
+      closeBrackets(),
+      keymap.of([
+        ...completionKeymap,
+        ...closeBracketsKeymap,
+        selectAllKeyBinding,
+      ]),
+    )
+  }
 
   // Syntax highlighting
-  if (language && typeof syntaxHighlighting[language] === 'string') {
-    extensions.push(syntaxHighlighting[language] as Extension)
+  if (language && languageExtensions[language]) {
+    extensions.push(languageExtensions[language]())
   }
 
   // Line numbers
diff --git a/packages/use-codemirror/src/themes/index.ts b/packages/use-codemirror/src/themes/index.ts
index 852b0ae5b5..492e694150 100644
--- a/packages/use-codemirror/src/themes/index.ts
+++ b/packages/use-codemirror/src/themes/index.ts
@@ -7,7 +7,8 @@ export const customTheme = createTheme({
     background: 'var(--theme-background-2, var(--default-theme-background-2))',
     foreground: 'var(--theme-color-1, var(--default-theme-color-1))',
     caret: 'var(--theme-color-1, var(--default-theme-color-1))',
-    selection: 'var(--theme-background-3, var(--default-theme-background-3))',
+    // Selection likely needs a hardcoded color due to it not accepting variables
+    selection: 'rgba(151, 183, 205, 0.2)',
     selectionMatch: '#e3dcce',
     gutterBackground:
       'var(--theme-background-2, var(--default-theme-background-2))',
diff --git a/packages/use-codemirror/src/types.ts b/packages/use-codemirror/src/types.ts
index b199d9398f..41342d52fe 100644
--- a/packages/use-codemirror/src/types.ts
+++ b/packages/use-codemirror/src/types.ts
@@ -1 +1 @@
-export type CodeMirrorLanguage = 'html' | 'json' | 'yaml'
+export type CodeMirrorLanguage = 'html' | 'json' | 'yaml' | 'css'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cabcc84c07..aeedcbd4ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1350,18 +1350,24 @@ importers:
 
   packages/use-codemirror:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.12.0
+        version: 6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1)
+      '@codemirror/lang-css':
+        specifier: ^6.2.1
+        version: 6.2.1(@codemirror/view@6.24.1)
       '@codemirror/lang-html':
         specifier: ^6.4.8
         version: 6.4.8
       '@codemirror/lang-json':
         specifier: ^6.0.0
         version: 6.0.1
+      '@codemirror/lang-yaml':
+        specifier: ^6.0.0
+        version: 6.0.0(@codemirror/view@6.24.1)
       '@codemirror/language':
         specifier: ^6.10.1
         version: 6.10.1
-      '@codemirror/legacy-modes':
-        specifier: ^6.0.0
-        version: 6.3.3
       '@codemirror/state':
         specifier: ^6.4.0
         version: 6.4.1
@@ -3159,6 +3165,18 @@ packages:
       '@lezer/json': 1.0.2
     dev: false
 
+  /@codemirror/lang-yaml@6.0.0(@codemirror/view@6.24.1):
+    resolution: {integrity: sha512-fVPapdX1oYr5HMC5bou1MHscGnNCvOHuhUW6C+V2gfIeIRcughvVfznV0OuUyHy0AdXoBCjOehjzFcmLRumu2Q==}
+    dependencies:
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.24.1)(@lezer/common@1.2.1)
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@lezer/common': 1.2.1
+      '@lezer/yaml': 1.0.2
+    transitivePeerDependencies:
+      - '@codemirror/view'
+    dev: false
+
   /@codemirror/language@6.10.1:
     resolution: {integrity: sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==}
     dependencies:
@@ -3170,12 +3188,6 @@ packages:
       style-mod: 4.1.1
     dev: false
 
-  /@codemirror/legacy-modes@6.3.3:
-    resolution: {integrity: sha512-X0Z48odJ0KIoh/HY8Ltz75/4tDYc9msQf1E/2trlxFaFFhgjpVHjZ/BCXe1Lk7s4Gd67LL/CeEEHNI+xHOiESg==}
-    dependencies:
-      '@codemirror/language': 6.10.1
-    dev: false
-
   /@codemirror/lint@6.5.0:
     resolution: {integrity: sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==}
     dependencies:
@@ -4230,6 +4242,14 @@ packages:
       '@lezer/common': 1.2.1
     dev: false
 
+  /@lezer/yaml@1.0.2:
+    resolution: {integrity: sha512-XCkwuxe+eumJ28nA9e1S6XKsXz9W7V/AG+WBiWOtiIuUpKcZ/bHuvN8bLxSDREIcybSRpEd/jvphh4vgm6Ed2g==}
+    dependencies:
+      '@lezer/common': 1.2.1
+      '@lezer/highlight': 1.2.0
+      '@lezer/lr': 1.4.0
+    dev: false
+
   /@ljharb/through@2.3.12:
     resolution: {integrity: sha512-ajo/heTlG3QgC8EGP6APIejksVAYt4ayz4tqoP3MolFELzcH1x1fzwEYRJTPO0IELutZ5HQ0c26/GqAYy79u3g==}
     engines: {node: '>= 0.4'}