fix: copy + paste

packages/hoppscotch-app/components/environments/Edit.vue

@@ -47,7 +47,7 @@
         >
           {{ $t("environment.nested_overflow") }}
         </div>
-        <div class="border divide-y rounded divide-dividerLight border-divider">
+        <div class="border rounded divide-y divide-dividerLight border-divider">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"

packages/hoppscotch-app/components/http/Request.vue

@@ -36,7 +36,7 @@
         </label>
       </div>
       <div
-        class="flex flex-1 overflow-auto border-l rounded-r border-divider transition bg-primaryLight whitespace-nowrap hide-scrollbar"
+        class="flex flex-1 overflow-auto border-l rounded-r transition border-divider bg-primaryLight whitespace-nowrap hide-scrollbar"
       >
         <SmartEnvInput
           v-model="newEndpoint"

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -18,7 +18,7 @@
           class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <div
-            class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary hide-scrollbar"
+            class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
           >
             <div class="inline-flex flex-1 space-x-2">
               <div class="flex flex-1">

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 flex-shrink-0 items-center whitespace-nowrap overflow-auto hide-scrollbar"
+    class="flex items-center flex-1 flex-shrink-0 overflow-visible whitespace-nowrap hide-scrollbar"
   >
     <div
       ref="editor"
@@ -32,6 +32,7 @@ import {
 } from "@codemirror/view"
 import { EditorState, Extension } from "@codemirror/state"
 import clone from "lodash/clone"
+import { tooltips } from "@codemirror/tooltip"
 import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
 import { useReadonlyStream } from "~/helpers/utils/composables"
@@ -92,10 +93,12 @@ watch(
   },
   {
     immediate: true,
+    flush: "sync",
   }
 )
 
 let clipboardEv: ClipboardEvent | null = null
+let pastedValue: string | null = null
 
 const aggregateEnvs = useReadonlyStream(aggregateEnvs$, []) as Ref<
   AggregateEnvironment[]
@@ -116,11 +119,15 @@ const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 const initView = (el: any) => {
   const extensions: Extension = [
     inputTheme,
+    tooltips({
+      position: "absolute",
+    }),
     envTooltipPlugin,
     placeholderExt(props.placeholder),
     EditorView.domEventHandlers({
       paste(ev) {
         clipboardEv = ev
+        pastedValue = ev.clipboardData?.getData("text") ?? ""
       },
     }),
     ViewPlugin.fromClass(
@@ -145,15 +152,16 @@ const initView = (el: any) => {
             )
 
             if (pasted && clipboardEv) {
-              const evHandle = clipboardEv
+              const pastedVal = pastedValue
               nextTick(() => {
                 emit("paste", {
-                  pastedValue: evHandle.clipboardData?.getData("text") ?? "",
+                  pastedValue: pastedVal!,
                   prevValue,
                 })
               })
             } else {
               clipboardEv = null
+              pastedValue = null
             }
           }
         }

packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts

@@ -7,12 +7,14 @@ import {
   MatchDecorator,
   ViewPlugin,
 } from "@codemirror/view"
+import * as E from "fp-ts/Either"
 import { StreamSubscriberFunc } from "~/helpers/utils/composables"
 import {
   AggregateEnvironment,
   aggregateEnvs$,
   getAggregateEnvs,
 } from "~/newstore/environments"
+import { parseTemplateStringE } from "~/helpers/templating"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<\w+>>)/g
 
@@ -59,22 +61,27 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
           // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
         )?.sourceEnv ?? "choose an environment"
 
-      const envValue = (
+      const envValue =
         aggregateEnvs.find(
           (env) => env.key === text.slice(start - from, end - from)
           // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
         )?.value ?? "not found"
-      ).replace(/"/g, "&quot;")
 
-      const textContent = `${envName} <xmp>${envValue}</xmp>`
+      const result = parseTemplateStringE(envValue, aggregateEnvs)
+
+      const finalEnv = E.isLeft(result) ? "error" : result.right
 
       return {
         pos: start,
         end: to,
         above: true,
+        arrow: true,
         create() {
           const dom = document.createElement("span")
-          dom.innerHTML = textContent
+          const xmp = document.createElement("xmp")
+          xmp.textContent = finalEnv
+          dom.appendChild(document.createTextNode(`${envName} `))
+          dom.appendChild(xmp)
           dom.className = "tooltip-theme"
           return { dom }
         },