feat: add json linter

package.json

@@ -50,6 +50,7 @@
     "@codemirror/commands": "^6.5.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lint": "^6.7.0",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.26.3",

src/common/style/style.css

@@ -92,10 +92,6 @@ textarea {
   &[readonly] {
     color: text-zinc-600;
   }
-  &.error,
-  .error > & {
-    @apply bg-red-200 border-red-600 dark:bg-red-600 dark:bg-opacity-40 dark:border-red-700;
-  }
 }
 .cm-editor {
   @apply h-full border rounded;
@@ -105,6 +101,12 @@ textarea {
     border-color: var(--border-input-focus);
   }
 }
+.input-error,
+.child-error > * {
+  @apply bg-red-200 border-red-600 dark:bg-red-600 dark:bg-opacity-20 dark:border-red-700;
+  --border-input: #b91c1c;
+  --border-input-focus: #b91c1c;
+}
 
 ul {
   @apply list-disc pl-6;

src/options/components/code-editor.vue

@@ -1,15 +1,15 @@
 <template>
-  <div ref="refCode"></div>
+  <div ref="refCode" :class="{ 'child-error': hasError }"></div>
 </template>
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
 import { EditorView, basicSetup } from 'codemirror';
-import { json } from '@codemirror/lang-json';
+import { linter, lintGutter, diagnosticCount } from '@codemirror/lint';
+import { json, jsonParseLinter } from '@codemirror/lang-json';
 import { html } from '@codemirror/lang-html';
-import { EditorState, Compartment } from '@codemirror/state';
+import { EditorState, Compartment, Extension } from '@codemirror/state';
 import { indentWithTab } from '@codemirror/commands';
-import type { LanguageSupport } from '@codemirror/language';
 import { keymap } from '@codemirror/view';
 import { oneDark } from '@codemirror/theme-one-dark';
 
@@ -20,9 +20,9 @@ const props = defineProps<{
   contentType?: string;
 }>();
 
-const langExtMap: Record<string, () => LanguageSupport> = {
-  json,
-  html,
+const langExtMap: Record<string, () => Extension[]> = {
+  json: () => [json(), linter(jsonParseLinter()), lintGutter()],
+  html: () => [html()],
 };
 
 const refCode = ref<HTMLElement>();
@@ -33,6 +33,7 @@ let lastState: EditorState | undefined;
 const langExtComp = new Compartment();
 const themeComp = new Compartment();
 
+const hasError = ref(false);
 const langExt = computed(() => langExtMap[props.lang || '']?.() || []);
 
 const result = window.matchMedia('(prefers-color-scheme: dark');
@@ -74,9 +75,10 @@ onMounted(() => {
       langExtComp.of(langExt.value),
       themeComp.of(isDark.value ? oneDark : []),
       EditorView.updateListener.of((update) => {
-        if (!update.docChanged || update.view !== view) return;
-        lastState = view.state;
-        model.value = view.state.doc.toString();
+        hasError.value = diagnosticCount(update.view.state) > 0;
+        if (!update.docChanged) return;
+        lastState = update.view.state;
+        model.value = update.view.state.doc.toString();
       }),
     ],
     parent: refCode.value,

src/options/components/edit-request-item.vue

@@ -28,8 +28,9 @@
         <span class="flex-1" v-text="method.toUpperCase()"></span>
       </div>
     </div>
-    <div :class="{ error: errors.url }">
+    <div>
       <input
+        :class="{ 'input-error': errors.url }"
         type="text"
         v-model="input.url"
         placeholder="URL"
@@ -64,8 +65,9 @@
       </select>
       <div class="form-hint">Action type</div>
     </div>
-    <div :class="{ error: errors.target }" v-if="input.type === 'redirect'">
+    <div v-if="input.type === 'redirect'">
       <textarea
+        :class="{ 'input-error': errors.target }"
         v-model="input.target"
         placeholder="Set target here"
         :readonly="!editable"
@@ -90,7 +92,7 @@
       </div>
     </div>
     <template v-if="input.type === 'replace'">
-      <div class="min-w-0" :class="{ error: errors.target }">
+      <div class="min-w-0">
         <CodeEditor
           class="h-[50vh]"
           v-model="input.target"