response content doesn't fit to the text area when resizing

[ShahAnuj2610]

To Reproduce

1. Hit any api (in my case GET: https://api.spacexdata.com/v3/launches)
2. Increase response height by dragging
3. Try scrolling and the response does not fit to the resized window
4. Check this video for more context

Expected behavior

resizing should work properly

[liyasthomas]

Seems like an issue with ace editor in large responses. Will look into it.

[ShahAnuj2610]

@liyasthomas you can assign to me. I can look into it.

[liyasthomas]

Ahaa.. Great. Assigning this to you.

[ShahAnuj2610]

@liyasthomas after some debugging, I found this couple of things

Remove maxLines

We need to remove maxLines from here
https://github.com/liyasthomas/postwoman/blob/5d94ac361e8e2a324e6eca845bee311b6536016b/pages/index.vue#L998 and add height to parent div

Why?

• whenever we resize, the ace-editor always sets it's content according to maxLines
• If we call editor.resize, it would resize to fit container according to maxLines

Add height to parent div

https://github.com/liyasthomas/postwoman/blob/5d94ac361e8e2a324e6eca845bee311b6536016b/components/ui/ace-editor.vue#L2

Now whenever this div gets resized, we need to call editor.resize, so the content gets fitted according to the parent

How to detect resize on an element?

I found this library that could be used for resize event change on an element https://github.com/Akryum/vue-resize

Example of ace-editor resize

https://codepen.io/ourcodeworld/embed/BaBXbPb?height=400&theme-id=dark&default-tab=js%2Cresult&user=ourcodeworld&slug-hash=BaBXbPb&pen-title=Resizable%20ACE%20Editor&name=cp_embed_1

Open question

If we remove maxLines, then how to handle Expand Response feature. BC, currently we are setting maxLines: infinity on expand response
https://github.com/liyasthomas/postwoman/blob/5d94ac361e8e2a324e6eca845bee311b6536016b/pages/index.vue#L2478

Maybe sol'n

Calculate height according to this logic https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor

Lmk, wdyt?

[liyasthomas]

https://stackoverflow.com/questions/11584061/automatically-adjust-height-to-contents-in-ace-cloud-9-editor

suggests to use maxLines: Infinity to make editor expand to content height, so how can we remove maxLines property?

[ShahAnuj2610]

suggests to use maxLines: Infinity to make editor expand to content height, so how can we remove maxLines property?

A possible sol'n could be to reset maxLines when Collapse Response, and set it to Infinity when Expand Response. Although the above SO ans doesn't recommend to use maxLines: Infinity as there could be performance issues. Instead we can set the viewport height of the parent to 100vh and the parent's position would be relative and editor's position would be absolute

[liyasthomas]

A possible sol'n could be to reset maxLines when Collapse Response, and set it to Infinity when Expand Response.

Isn't this the current implementation? Frankly, I guess we can ignore this UI issue since it's only reproducible in such an edge case of large responses. Let me know if you can make a PR.