chore: merge hoppscotch/patch into hoppscotch/next

packages/hoppscotch-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/cli",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A CLI to run Hoppscotch test scripts in CI environments.",
   "homepage": "https://hoppscotch.io",
   "type": "module",

packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue

@@ -119,10 +119,11 @@
         />
       </div>
     </div>
-    <div class="h-full">
+    <div class="h-full relative overflow-auto">
       <div
         ref="jsonResponse"
         :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
+        class="absolute inset-0 h-full"
       ></div>
     </div>
     <div

packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue

@@ -35,8 +35,8 @@
         />
       </div>
     </div>
-    <div class="h-full">
+    <div class="h-full relative overflow-auto">
-      <div ref="rawResponse" class="flex flex-1 flex-col"></div>
+      <div ref="rawResponse" class="absolute inset-0"></div>
     </div>
   </div>
 </template>

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -330,7 +330,10 @@ export function useCodemirror(
       ),
 
       EditorView.domEventHandlers({
-        scroll(event) {
+        scroll(event, view) {
+          // HACK: This is a workaround to fix the issue in CodeMirror where the content doesn't load when the editor is not in view.
+          view.requestMeasure()
+
           if (event.target && options.contextMenuEnabled) {
             // Debounce to make the performance better
             debouncedTextSelection(30)()

packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts

@@ -59,6 +59,7 @@ export const baseTheme = EditorView.theme({
     backgroundColor: "var(--accent-dark-color)",
     color: "var(--accent-contrast-color)",
     borderRadius: "2px",
+    opacity: "0.4",
   },
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",

packages/hoppscotch-common/src/helpers/import-export/import/insomnia.ts

@@ -48,8 +48,13 @@ const parseInsomniaDoc = (content: string) =>
 const replacePathVarTemplating = (expression: string) =>
   expression.replaceAll(/:([^/]+)/g, "<<$1>>")
 
-const replaceVarTemplating = (expression: string) =>
+const replaceVarTemplating = (expression: string, pathVar = false) => {
-  pipe(expression, replacePathVarTemplating, replaceInsomniaTemplating)
+  return pipe(
+    expression,
+    pathVar ? replacePathVarTemplating : (x) => x,
+    replaceInsomniaTemplating
+  )
+}
 
 const getFoldersIn = (
   folder: InsomniaFolderResource | null,
@@ -208,7 +213,7 @@ const getHoppRequest = (req: InsomniaRequestResource): HoppRESTRequest =>
   makeRESTRequest({
     name: req.name ?? "Untitled Request",
     method: req.method?.toUpperCase() ?? "GET",
-    endpoint: replaceVarTemplating(req.url ?? ""),
+    endpoint: replaceVarTemplating(req.url ?? "", true),
     auth: getHoppReqAuth(req),
     body: getHoppReqBody(req),
     headers: getHoppReqHeaders(req),