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

@@ -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

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,14 +22,16 @@ 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>
   <div class="swagger-editor-input">
     <CodeMirror
       ref="codeMirrorRef"
       :content="value"
-      :language="getSyntaxHighlighting(value)"
+      :language="language"
       lineNumbers
       @change="(value: string) => $emit('contentUpdate', value)" />
   </div>

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",

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

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))',

packages/use-codemirror/src/types.ts

@@ -1 +1 @@
-export type CodeMirrorLanguage = 'html' | 'json' | 'yaml'
+export type CodeMirrorLanguage = 'html' | 'json' | 'yaml' | 'css'