[PR #4138] [MERGED] fix: large content scroll bug in codemirror editor #4678

New issue

Closed

opened 2026-03-17 02:11:35 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:11:35 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4138
Author: @nivedin
Created: 6/20/2024
Status: ✅ Merged
Merged: 6/21/2024
Merged by: @AndrewBastin

Base: patch ← Head: fix/codemirror-large-text-scroll-bug

📝 Commits (3)

4a70142 fix: huge code scroll bug in codemirror
238bc22 chore: scroll inside codemirror for response lenses
d51f137 chore: add overflow for container

📊 Changes

3 files changed (+8 additions, -4 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue (+2 -1)
📝 packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue (+2 -2)
📝 packages/hoppscotch-common/src/composables/codemirror.ts (+4 -1)

📄 Description

Closes #4050, #4007

https://github.com/hoppscotch/hoppscotch/assets/53208152/38d7d4c9-dad1-4c29-ba90-0481f035fe8c

This PR fixes the issue in CodeMirror where content was not loading correctly on scroll when we had large request bodies. Parts of the body were not rendered and would only render when clicked.

4106 fixes the issue, but the CodeMirror component was not filling the parent container. Therefore, a hack fix view.requestMeasure() is used. This function re-measures the CodeMirror layout.

What's changed

Added a function inside the CodeMirror scroll listener that re-measures the CodeMirror layout while scrolling.
Also added CodeMirror scroll for response lenses.

Notes to reviewers

To check the bug, select the option application/json from the body content-type and paste a large text. Scroll down and you should be able to see the content without clicking the editor.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4138 **Author:** [@nivedin](https://github.com/nivedin) **Created:** 6/20/2024 **Status:** ✅ Merged **Merged:** 6/21/2024 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `patch` ← **Head:** `fix/codemirror-large-text-scroll-bug` --- ### 📝 Commits (3) - [`4a70142`](https://github.com/hoppscotch/hoppscotch/commit/4a701421c61d34325137147ec8c5829580b5228b) fix: huge code scroll bug in codemirror - [`238bc22`](https://github.com/hoppscotch/hoppscotch/commit/238bc22e3d686ee153fe5daa04385899646282fe) chore: scroll inside codemirror for response lenses - [`d51f137`](https://github.com/hoppscotch/hoppscotch/commit/d51f1375132c1d86f81f17c9cd90c6714dbd93ed) chore: add overflow for container ### 📊 Changes **3 files changed** (+8 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue` (+2 -1) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue` (+2 -2) 📝 `packages/hoppscotch-common/src/composables/codemirror.ts` (+4 -1) </details> ### 📄 Description Closes #4050, #4007 https://github.com/hoppscotch/hoppscotch/assets/53208152/38d7d4c9-dad1-4c29-ba90-0481f035fe8c This PR fixes the issue in CodeMirror where content was not loading correctly on scroll when we had large request bodies. Parts of the body were not rendered and would only render when clicked. [4106](https://github.com/hoppscotch/hoppscotch/pull/4106) fixes the issue, but the CodeMirror component was not filling the parent container. Therefore, a hack fix `view.requestMeasure()` is used. This function re-measures the CodeMirror layout. ### What's changed Added a function inside the CodeMirror scroll listener that re-measures the CodeMirror layout while scrolling. Also added CodeMirror scroll for response lenses. ### Notes to reviewers To check the bug, select the option application/json from the body content-type and paste a large text. Scroll down and you should be able to see the content without clicking the editor. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>