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 @@
@@ -29,7 +31,7 @@ function getSyntaxHighlighting(content?: string): CodeMirrorLanguage {
$emit('contentUpdate', value)" />
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
+const languageExtensions: {
+ [lang in CodeMirrorLanguage]: () => LanguageSupport | StreamLanguage
} = {
- 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'}