feat(ui): Socket Panel > Highlight valid and invalid environment vari…

…ables in payload edit box
flawiddsouza · Mar 5, 2024 · f9fe76a · f9fe76a
1 parent 4ab368c
commit f9fe76a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -9,6 +9,28 @@ import { history, historyKeymap } from '@codemirror/commands'
 import { envVarDecoration } from '@/utils/codemirror-extensions'
 
 function getExtensions(vueInstance) {
+    const singleLineEnforcers = []
+
+    if(!vueInstance.allowMultipleLines) {
+        // From: https://discuss.codemirror.net/t/codemirror-6-single-line-and-or-avoid-carriage-return/2979/2
+        [
+            EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr),
+            EditorView.domEventHandlers({
+                paste: (event, view) => {
+                    const content = event.clipboardData.getData('text/plain')
+
+                    if(content.includes('\n')) {
+                        event.preventDefault()
+                        const contentWithoutNewLines = content.replace(/[\n\r]/g, '')
+                        const transaction = view.state.replaceSelection(contentWithoutNewLines)
+                        const update = view.state.update(transaction)
+                        view.update([update])
+                    }
+                }
+            })
+        ].forEach(enforcer => singleLineEnforcers.push(enforcer))
+    }
+
     const extensions = [
         history(),
         EditorView.updateListener.of(v => {
@@ -17,21 +39,7 @@ function getExtensions(vueInstance) {
                 vueInstance.$emit('update:modelValue', v.state.doc.toString())
             }
         }),
-        // From: https://discuss.codemirror.net/t/codemirror-6-single-line-and-or-avoid-carriage-return/2979/2
-        EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr),
-        EditorView.domEventHandlers({
-            paste: (event, view) => {
-                const content = event.clipboardData.getData('text/plain')
-
-                if(content.includes('\n')) {
-                    event.preventDefault()
-                    const contentWithoutNewLines = content.replace(/[\n\r]/g, '')
-                    const transaction = view.state.replaceSelection(contentWithoutNewLines)
-                    const update = view.state.update(transaction)
-                    view.update([update])
-                }
-            }
-        }),
+        ...singleLineEnforcers,
         keymap.of([
             ...historyKeymap
         ]),
@@ -48,7 +56,7 @@ function getExtensions(vueInstance) {
 
 function createState(vueInstance) {
     return EditorState.create({
-        doc: vueInstance.modelValue,
+        doc: typeof vueInstance.modelValue === 'string' ? vueInstance.modelValue : '',
         extensions: getExtensions(vueInstance)
     })
 }
@@ -71,6 +79,10 @@ export default {
             type: Boolean,
             default: false
         },
+        allowMultipleLines: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false
@@ -118,6 +130,10 @@ export default {
 </script>
 
 <style>
+.code-mirror-single-line .cm-editor {
+    height: 100%;
+}
+
 .code-mirror-single-line .cm-editor.cm-focused {
     outline: 0 !important;
 }

diff --git a/packages/ui/src/components/SocketPanel.vue b/packages/ui/src/components/SocketPanel.vue
@@ -103,13 +103,16 @@
                                     v-if="client.type && client.type.startsWith('Socket.IO')"
                                 />
                             </div>
-                            <textarea
-                                class="w-100p mt-0_5rem"
-                                rows="5"
-                                placeholder="Payload"
+                            <CodeMirrorSingleLine
                                 v-model="client.message"
-                                @input="updateCurrentPayload(client, 'payload', ($event as any).target.value)"
-                            ></textarea>
+                                @update:modelValue="updateCurrentPayload(client, 'payload', $event)"
+                                :placeholder="`Payload`"
+                                :env-variables="activeTabEnvironmentResolved"
+                                :input-text-compatible="true"
+                                :allow-multiple-lines="true"
+                                class="w-100p mt-0_5rem input o-a"
+                                style="height: 5.8rem; resize: vertical; margin-bottom: 0.2rem;"
+                            />
                             <div class="d-f flex-jc-sb">
                                 <button
                                     @click="beautifyJSON(client)"