starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-25 16:55:59 +03:00

[GH-ISSUE #1110] Collapsed Editor can be resized and dragging down doesn't increase code view #390

New issue

Closed

opened 2026-03-16 15:02:34 +03:00 by kerem · 8 comments

kerem commented

2026-03-16 15:02:34 +03:00

Owner

Originally created by @joeljstephen on GitHub (Aug 24, 2020).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1110

Describe the bug
When I pull the resize button of the code editor, it doesn't the resize the code in the editor.

To Reproduce
Steps to reproduce the behavior:

Click the resize button on the code editor and drag it down
The code doesn't resize

Expected behavior
I expected the code to resize as I drag down the button.

Screenshots
If applicable, add screenshots to help explain your problem.
Capture

Desktop (please complete the following information):

OS: Windows 10
Browser: Firefox

Additional context
When I press the expand button, it works though.

Originally created by @joeljstephen on GitHub (Aug 24, 2020). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1110 **Describe the bug** When I pull the resize button of the code editor, it doesn't the resize the code in the editor. **To Reproduce** Steps to reproduce the behavior: 1. Click the resize button on the code editor and drag it down 2. The code doesn't resize **Expected behavior** I expected the code to resize as I drag down the button. **Screenshots** If applicable, add screenshots to help explain your problem. <img width="1354" alt="Capture" src="https://user-images.githubusercontent.com/70131076/91014653-67de4180-e607-11ea-948f-6c8605b774dc.PNG"> **Desktop (please complete the following information):** - OS: Windows 10 - Browser: Firefox **Additional context** When I press the expand button, it works though.

kerem

2026-03-16 15:02:34 +03:00

closed this issue
added the
bug

good first issue
labels

kerem commented

2026-03-16 15:02:51 +03:00

Author

Owner

@liyasthomas commented on GitHub (Aug 24, 2020):

I'll look into it.

refer:
https://jsfiddle.net/6b2tfspe/1/
https://stackoverflow.com/questions/27534263/making-ace-editor-resizable
https://stackoverflow.com/questions/28785588/how-to-get-the-ace-editor-to-adjust-to-its-parent-div

@liyasthomas commented on GitHub (Aug 24, 2020): I'll look into it. refer: https://jsfiddle.net/6b2tfspe/1/ https://stackoverflow.com/questions/27534263/making-ace-editor-resizable https://stackoverflow.com/questions/28785588/how-to-get-the-ace-editor-to-adjust-to-its-parent-div

kerem commented

2026-03-16 15:02:56 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Aug 26, 2020):

I played around a bit to see what is causing it and found that the maxLines property might be relevant

Here is a snippet from JSON Lens Renderer:
github.com/hoppscotch/hoppscotch@3cd2a2a0f9/components/lenses/renderers/JSONLensRenderer.vue (L43-L57)

@AndrewBastin commented on GitHub (Aug 26, 2020): I played around a bit to see what is causing it and found that the `maxLines` property might be relevant Here is a snippet from JSON Lens Renderer: https://github.com/hoppscotch/hoppscotch/blob/3cd2a2a0f9c9f507be6736b829f637dba336e10f/components/lenses/renderers/JSONLensRenderer.vue#L43-L57

kerem commented

2026-03-16 15:03:01 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Aug 30, 2020):

Another possible option is to restart the efforts for moving to CodeMirror. I had attempted before, just that the only issue was that editor expanded the response panel.

Ace is really difficult to work with and pretty much impossible to test the functionality of due to its weird Webpack Resolution thingy and the codebase feels really legacy.

CodeMirror is pretty modern, supports mobile devices and we already have a sorta working implementation going.

You can check out the stale branch in my fork. https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror

@AndrewBastin commented on GitHub (Aug 30, 2020): Another possible option is to restart the efforts for moving to CodeMirror. I had attempted before, just that the only issue was that editor expanded the response panel. Ace is really difficult to work with and pretty much impossible to test the functionality of due to its weird Webpack Resolution thingy and the codebase feels really legacy. CodeMirror is pretty modern, supports mobile devices and we already have a sorta working implementation going. You can check out the stale branch in my fork. https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror

kerem commented

2026-03-16 15:03:06 +03:00

Author

Owner

@liyasthomas commented on GitHub (Aug 30, 2020):

Let me check.

@liyasthomas commented on GitHub (Aug 30, 2020): Let me check.

kerem commented

2026-03-16 15:03:11 +03:00

Author

Owner

@LeoMartinDev commented on GitHub (Oct 4, 2020):

Another possible option is to restart the efforts for moving to CodeMirror. I had attempted before, just that the only issue was that editor expanded the response panel.

Ace is really difficult to work with and pretty much impossible to test the functionality of due to its weird Webpack Resolution thingy and the codebase feels really legacy.

CodeMirror is pretty modern, supports mobile devices and we already have a sorta working implementation going.

You can check out the stale branch in my fork. https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror

What about monaco ? It's the VSCode editor https://github.com/egoist/vue-monaco

I can take this issue if no on is working on it

@LeoMartinDev commented on GitHub (Oct 4, 2020): > Another possible option is to restart the efforts for moving to CodeMirror. I had attempted before, just that the only issue was that editor expanded the response panel. > > Ace is really difficult to work with and pretty much impossible to test the functionality of due to its weird Webpack Resolution thingy and the codebase feels really legacy. > > CodeMirror is pretty modern, supports mobile devices and we already have a sorta working implementation going. > > You can check out the stale branch in my fork. https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror What about monaco ? It's the VSCode editor https://github.com/egoist/vue-monaco I can take this issue if no on is working on it

kerem commented

2026-03-16 15:03:16 +03:00

Author

Owner

@liyasthomas commented on GitHub (Oct 4, 2020):

@AndrewBastin once implemented a codemirror port. We refused monaco because it doesn't had mobile responsive support. We can consider it if it is responsive. Andrew, wdyt? It looks like now there's a monaco editor component for Vue.

@liyasthomas commented on GitHub (Oct 4, 2020): @AndrewBastin once implemented a [codemirror port](https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror). We refused monaco because it doesn't had mobile responsive support. We can consider it if it is responsive. Andrew, wdyt? It looks like now there's a monaco editor component for Vue.

kerem commented

2026-03-16 15:03:21 +03:00

Author

Owner

@LeoMartinDev commented on GitHub (Oct 4, 2020):

@AndrewBastin once implemented a codemirror port. We refused monaco because it doesn't had mobile responsive support. We can consider it if it is responsive. Andrew, wdyt? It looks like now there's a monaco editor component for Vue.

Indeed, from their Readme :

❓ Is the editor supported in mobile browsers or mobile web app frameworks?
No.

@LeoMartinDev commented on GitHub (Oct 4, 2020): > @AndrewBastin once implemented a [codemirror port](https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror). We refused monaco because it doesn't had mobile responsive support. We can consider it if it is responsive. Andrew, wdyt? It looks like now there's a monaco editor component for Vue. Indeed, from their Readme : > ❓ Is the editor supported in mobile browsers or mobile web app frameworks? > No.

kerem commented

2026-03-16 15:03:26 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Oct 4, 2020):

@AndrewBastin once implemented a codemirror port. We refused monaco because it doesn't had mobile responsive support. We can consider it if it is responsive. Andrew, wdyt? It looks like now there's a monaco editor component for Vue.

To be honest, I prefer Monaco as well as it is a lot more battle tested and advanced compared to CodeMirror, but Monaco doesn't support mobile devices as stated by @LeoMartinDev and we don't exactly have a definite plan to drop mobile devices just yet. But if that happens and we decide to drop mobile support for Hoppscotch, we can choose to move ahead with Monaco.

@AndrewBastin commented on GitHub (Oct 4, 2020): > @AndrewBastin once implemented a [codemirror port](https://github.com/AndrewBastin/hoppscotch/tree/feat/move-to-codemirror). We refused monaco because it doesn't had mobile responsive support. We can consider it if it is responsive. Andrew, wdyt? It looks like now there's a monaco editor component for Vue. To be honest, I prefer Monaco as well as it is a lot more battle tested and advanced compared to CodeMirror, but Monaco doesn't support mobile devices as stated by @LeoMartinDev and we don't exactly have a definite plan to drop mobile devices just yet. But if that happens and we decide to drop mobile support for Hoppscotch, we can choose to move ahead with Monaco.

kerem referenced this issue

2026-03-17 00:17:51 +03:00

[PR #410] [MERGED] Fixing bug on request saving #2607