feat: basic autocomplete on code editor (#3370)

TBD54566975 · Nov 12, 2024 · aca3e00 · aca3e00
1 parent 17ead1f
commit aca3e00
Show file tree

Hide file tree

Showing 3 changed files with 370 additions and 33 deletions.
diff --git a/frontend/console/package.json b/frontend/console/package.json
@@ -24,18 +24,23 @@
     "build-storybook": "storybook build"
   },
   "lint-staged": {
-    "*.(js|cjs|tsx|ts)": ["pnpm run lint:fix"]
+    "*.(js|cjs|tsx|ts)": [
+      "pnpm run lint:fix"
+    ]
   },
-  "browserslist": ["> 2%"],
+  "browserslist": [
+    "> 2%"
+  ],
   "source": "index.html",
   "dependencies": {
     "@bufbuild/protobuf": "^1.10.0",
-    "@codemirror/autocomplete": "^6.18.0",
-    "@codemirror/commands": "^6.5.0",
-    "@codemirror/language": "^6.10.1",
-    "@codemirror/lint": "^6.8.1",
+    "@codemirror/autocomplete": "^6.18.2",
+    "@codemirror/commands": "^6.7.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/lint": "^6.8.2",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.3",
+    "@codemirror/view": "^6.34.2",
     "@connectrpc/connect": "^1.5.0",
     "@connectrpc/connect-web": "^1.5.0",
     "@headlessui/react": "2.2.0",
@@ -45,7 +50,7 @@
     "@uiw/codemirror-theme-atomone": "^4.22.0",
     "@uiw/codemirror-theme-github": "^4.22.0",
     "@vitejs/plugin-react": "^4.0.4",
-    "codemirror-json-schema": "0.7.0",
+    "codemirror-json-schema": "0.7.8",
     "codemirror-json5": "^1.0.3",
     "fnv1a": "^1.1.1",
     "fuse.js": "^7.0.0",

diff --git a/frontend/console/src/components/CodeEditor.tsx b/frontend/console/src/components/CodeEditor.tsx
@@ -11,8 +11,9 @@ import { atomone } from '@uiw/codemirror-theme-atomone'
 import { githubLight } from '@uiw/codemirror-theme-github'
 
 import { defaultKeymap, indentWithTab } from '@codemirror/commands'
-import { handleRefresh, jsonSchemaHover, jsonSchemaLinter, stateExtensions } from 'codemirror-json-schema'
-import { json5, json5ParseLinter } from 'codemirror-json5'
+import { json, jsonLanguage, jsonParseLinter } from '@codemirror/lang-json'
+import { handleRefresh, jsonCompletion, jsonSchemaHover, jsonSchemaLinter, stateExtensions } from 'codemirror-json-schema'
+
 import { useEffect, useRef } from 'react'
 import { useUserPreferences } from '../providers/user-preferences-provider'
 
@@ -56,13 +57,15 @@ export const CodeEditor = ({
             indentOnInput(),
             drawSelection(),
             foldGutter(),
-            linter(json5ParseLinter(), {
-              delay: 300,
-            }),
+            linter(jsonParseLinter(), {}),
             linter(jsonSchemaLinter(), {
               needsRefresh: handleRefresh,
             }),
+            jsonLanguage.data.of({
+              autocomplete: jsonCompletion(),
+            }),
             hoverTooltip(jsonSchemaHover()),
+            stateExtensions(sch),
             EditorView.updateListener.of((update) => {
               if (update.docChanged) {
                 const currentText = update.state.doc.toString()
@@ -71,16 +74,15 @@ export const CodeEditor = ({
                 }
               }
             }),
-            stateExtensions(sch),
           ]
 
       const state = EditorState.create({
         doc: value,
         extensions: [
           ...commonExtensions,
           isDarkMode ? atomone : githubLight,
-          json5(),
           editingExtensions,
+          json(),
           EditorView.theme({
             '&': { height: '100%' },
           }),