feat(ui): Socket Panel > json highlighting + auto bracket closing + i…

…ndent on input (closes #299)

packages/ui/src/components/CodeMirrorSingleLine.vue

@@ -6,9 +6,13 @@
 import { EditorView, keymap, placeholder, drawSelection } from '@codemirror/view'
 import { EditorState, StateEffect } from '@codemirror/state'
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
-import { autocompletion, completeFromList } from '@codemirror/autocomplete'
+import { closeBrackets, autocompletion, completeFromList } from '@codemirror/autocomplete'
 import { envVarDecoration } from '@/utils/codemirror-extensions'
 import { tags } from '@/codemirror-extensions/tags'
+import { json } from '@codemirror/lang-json'
+import { codeMirrorSyntaxHighlighting, getEditorConfig, getSpaces } from '@/helpers'
+import { syntaxHighlighting } from '@codemirror/language'
+import { indentOnInput, indentUnit, bracketMatching, syntaxHighlighting } from '@codemirror/language'
 import type { ParsedResult } from '@/parsers/tag'
 
 function getExtensions(vueInstance) {
@@ -64,7 +68,20 @@ function getExtensions(vueInstance) {
         vueInstance.$emit('tag-click', parsedFunc, updateFunc)
     }
 
+    const languageExtensions = []
+
+    if (vueInstance.lang === 'json') {
+        languageExtensions.push(json())
+        const highlightStyle = codeMirrorSyntaxHighlighting()
+        languageExtensions.push(syntaxHighlighting(highlightStyle, { fallback: true }))
+        languageExtensions.push(indentOnInput())
+        languageExtensions.push(indentUnit.of(getSpaces(getEditorConfig().indentSize)))
+        languageExtensions.push(bracketMatching())
+        languageExtensions.push(closeBrackets()) // auto close flower brackets, close double quotes
+    }
+
     const extensions = [
+        ...languageExtensions,
         history(),
         EditorView.updateListener.of(v => {
             if(v.docChanged) {
@@ -181,6 +198,10 @@ export default {
             type: Array,
             default: () => []
         },
+        lang: {
+            type: String,
+            required: false,
+        },
     },
     data() {
         return {

packages/ui/src/components/SocketPanel.vue

@@ -110,6 +110,7 @@
                                 :env-variables="collectionItemEnvironmentResolved"
                                 :input-text-compatible="true"
                                 :allow-multiple-lines="true"
+                                lang="json"
                                 class="w-100p mt-0_5rem input o-a"
                                 style="height: 5.8rem; resize: vertical; margin-bottom: 0.2rem;"
                             />