From 257974325eb400ea9000f640015921a2ad3e6861 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Fri, 21 Jun 2024 23:27:22 +0530
Subject: [PATCH] fix: large content scroll bug in codemirror editor (#4138)

---
 .../src/components/lenses/renderers/JSONLensRenderer.vue     | 3 ++-
 .../src/components/lenses/renderers/RawLensRenderer.vue      | 4 ++--
 packages/hoppscotch-common/src/composables/codemirror.ts     | 5 ++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index 512932346..f9ae2f42a 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
index fdc1d72d9..7f12fb359 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
@@ -35,8 +35,8 @@
         />
       </div>
     </div>
-    <div class="h-full">
-      <div ref="rawResponse" class="flex flex-1 flex-col"></div>
+    <div class="h-full relative overflow-auto">
+      <div ref="rawResponse" class="absolute inset-0"></div>
     </div>
   </div>
 </template>
diff --git a/packages/hoppscotch-common/src/composables/codemirror.ts b/packages/hoppscotch-common/src/composables/codemirror.ts
index b09a644d2..a2a4d25e2 100644
--- a/packages/hoppscotch-common/src/composables/codemirror.ts
+++ b/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)()