fix: large content scroll bug in codemirror editor (#4138)

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 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>

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)()