fix(ui): Request Panel > Pasting a curl command instantly replaces th…

…e address bar before confirm ok / cancel on confirm prompt - now that we've changed to our own confirm implementation instead of browser native confirm
flawiddsouza · Mar 9, 2024 · 2acf3fb · 2acf3fb
1 parent e83218e
commit 2acf3fb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/packages/ui/src/components/CodeMirrorSingleLine.vue b/packages/ui/src/components/CodeMirrorSingleLine.vue
@@ -17,16 +17,29 @@ function getExtensions(vueInstance) {
         [
             EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr),
             EditorView.domEventHandlers({
-                paste: (event, view) => {
+                paste: async(event, view) => {
                     const content = event.clipboardData.getData('text/plain')
 
+                    // if pasteHandler exists & pasteHandler returns true, it means it handled the paste event
+                    if(vueInstance.pasteHandler && await vueInstance.pasteHandler(content)) {
+                        console.log('pasteHandler returned true, so not handling paste event')
+                        return
+                    }
+
+                    console.log('pasteHandler not defined or returned false, so handling paste event')
+
                     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])
+                    } else {
+                        const transaction = view.state.replaceSelection(content)
+                        const update = view.state.update(transaction)
+                        view.update([update])
                     }
+
+                    return true
                 }
             }),
         ].forEach(enforcer => singleLineEnforcers.push(enforcer))
@@ -89,6 +102,10 @@ export default {
             type: Boolean,
             default: false
         },
+        pasteHandler: {
+            type: Function,
+            default: null
+        },
         disabled: {
             type: Boolean,
             default: false

diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue
@@ -5,7 +5,7 @@
                 <option v-for="method in methods">{{ method }}</option>
             </select>
             <div class="code-mirror-input-container">
-                <CodeMirrorSingleLine v-model="activeTab.url" placeholder="Enter request URL" :key="'address-bar-' + activeTab._id" @keydown="handleAddressBarKeyDown" @paste="handleAdressBarPaste" :env-variables="activeTabEnvironmentResolved" />
+                <CodeMirrorSingleLine v-model="activeTab.url" placeholder="Enter request URL" :key="'address-bar-' + activeTab._id" @keydown="handleAddressBarKeyDown" :paste-handler="handleAddressBarPaste" :env-variables="activeTabEnvironmentResolved" />
             </div>
             <button @click="sendRequest">Send</button>
         </div>
@@ -579,13 +579,10 @@ export default {
                 this.sendRequest()
             }
         },
-        async handleAdressBarPaste(e) {
-            e.preventDefault()
-            e.stopPropagation()
-            const content = e.clipboardData.getData('text/plain').trim()
+        async handleAddressBarPaste(content) {
             if (content.startsWith('curl')) {
                 if(!await window.createConfirm(`We've detected that you've pasted a curl command. Do you want to import the curl command into the current request?`)) {
-                    return
+                    return false
                 }
                 const result = await convertCurlCommandToRestfoxCollection(content, this.activeWorkspace._id)
                 if(result.length) {
@@ -596,7 +593,11 @@ export default {
                     delete result[0].parentId
                     Object.assign(this.activeTab, result[0])
                 }
+
+                return true
             }
+
+            return false
         },
         loadGraphql() {
             if(this.activeTab && this.activeTab.body && this.activeTab.body.mimeType === 'application/graphql') {