feat: add packages for handling yaml

Author: tomootes

package.json

@@ -11,9 +11,11 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.11.0",
     "@codemirror/lint": "^6.8.5",
+    "@modyfi/vite-plugin-yaml": "^1.1.1",
     "@stoplight/better-ajv-errors": "^1.0.3",
     "@stoplight/spectral-core": "^1.20.0",
     "@stoplight/spectral-formats": "^1.8.2",

pnpm-lock.yaml

@@ -1,12 +1,13 @@
-import { json, jsonParseLinter } from '@codemirror/lang-json';
-import { forEachDiagnostic, linter, lintGutter, setDiagnosticsEffect } from '@codemirror/lint';
+// import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { yaml } from '@codemirror/lang-yaml';
+// import { forEachDiagnostic, linter, lintGutter, setDiagnosticsEffect } from '@codemirror/lint';
 import ReactCodeMirror, { EditorSelection, Extension, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import clsx from 'clsx';
 import { FC, useEffect, useRef, useState } from 'react';
 import { Diagnostic, Spec, SpecInput, SpecLinter } from '../types';
 import { formatDocument, groupBySource, handleResponse } from '../util';
 
-const EXTENSIONS: Extension[] = [json(), linter(jsonParseLinter()), lintGutter()];
+const EXTENSIONS: Extension[] = [yaml()];
 
 interface Props {
   spec: Spec;
@@ -55,30 +56,31 @@ const CodeEditor: FC<Props> = ({ spec, uri }) => {
     <div className="flex h-full">
       <div className="w-[50%] min-w-[400px] overflow-auto">
         <ReactCodeMirror
+          theme={'dark'}
           ref={codeMirrorRef}
           value={content}
           extensions={[...EXTENSIONS, ...linters.map(l => l.linter)]}
-          onUpdate={viewUpdate => {
-            if (error) {
-              return;
-            }
+          // onUpdate={viewUpdate => {
+          //   if (error) {
+          //     return;
+          //   }
 
-            viewUpdate.transactions.forEach(transaction => {
-              transaction.effects.forEach(effect => {
-                if (effect.is(setDiagnosticsEffect)) {
-                  const diagnostics: Diagnostic[] = [];
-                  forEachDiagnostic(viewUpdate.state, d => diagnostics.push(d));
-                  setDiagnostics(groupBySource(diagnostics));
-                  setChecking(false);
-                }
-              });
-            });
+          //   viewUpdate.transactions.forEach(transaction => {
+          //     transaction.effects.forEach(effect => {
+          //       if (effect.is(setDiagnosticsEffect)) {
+          //         const diagnostics: Diagnostic[] = [];
+          //         forEachDiagnostic(viewUpdate.state, d => diagnostics.push(d));
+          //         setDiagnostics(groupBySource(diagnostics));
+          //         setChecking(false);
+          //       }
+          //     });
+          //   });
 
-            if (viewUpdate.docChanged) {
-              setContent(viewUpdate.state.doc.toString());
-              setChecking(true);
-            }
-          }}
+          //   if (viewUpdate.docChanged) {
+          //     setContent(viewUpdate.state.doc.toString());
+          //     setChecking(true);
+          //   }
+          // }}
         />
       </div>
       <div className="flex-1 overflow-auto p-4 bg-sky-100 text-sm">