search

jcubic / jquery.terminal

jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands
https://terminal.jcubic.pl
MIT License
3.11k stars 569 forks source link

Bugs with a large prompt #919

Closed ordo-n closed 5 months ago

ordo-n commented 6 months ago

Preface

I'm using jqueryterminal 2.39.3 and whenever I have a large prompt 2 things happen on resize of the window or terminal Here is a screen shot of a large prompt

Issue summary

1) When i resize the terminal it appears to insert the prompt into the command input that i can press any key and it disappears again, further resizing makes it appear and disappear

2) the prompt splits across newlines with breaks inbetween when it should have no blank lines inbetween

Expected behavior

1) no blank lines inbetween prompt 2) the prompt should not appear more than once

Actual behavior

1) blank lines 2) prompt appears more than once

Steps to reproduce

1) create a large prompt with coloring 2) reduce the width of the browser by a few pixels for prompt to be inserted 3) reduce the width of the browser by a lot to see blank lines appear

Browser and OS

Tested in chrome latest and edge latest same problem Windows 10

Additional notes

I'm using 2.39.3 from a cdn As an incentive to fix theses bugs, once a programmer has fixed the bugs and i have tested I am willing to donate to them for their efforts as I am now reliant on this library working

ordo-n commented 6 months ago

for the duplicate prompt:

as you can see here its really confused

This is the first thing to fix

ordo-n commented 6 months ago

I have determined that the blank lines is caused by an issue with my CSS.

But, this problem with duplicate prompt persists and is now the focus of this bug report.

jcubic commented 6 months ago

Thanks for reporting. It looks like it happen on initialization, if you resize the window the issue is gone. Also, there is some kind of flicker when you resize, it looks like it renders the wrong prompt and then the prompt is corrected.

Do you have a reproduction of those blank lines?

jcubic commented 6 months ago

The first issue of initialization got fixed. The problem was that cmd plugin first rendered the prompt, and they check the size of the character and number of characters per line.

jcubic commented 6 months ago

The flicker is probably same behavior you observed with empty lines. When terminal is resized, cmd don't render immediately with new number of characters. And when cmd overflows it shows blank lines because of the ::before pseudo selector in CSS.

jcubic commented 6 months ago

Please check devel version if the issue is fixed. You can use jsDeliver link:

https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.js

https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@ddf91077011/css/jquery.terminal.css

The CSS have problems to refresh, so there is a hash to commit.

ordo-n commented 6 months ago

Please check devel version if the issue is fixed. You can use jsDeliver link:

https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.js

https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@ddf91077011/css/jquery.terminal.css

The CSS have problems to refresh, so there is a hash to commit.

I tested the provided scripts and they contain the bug so i had same problem when tested. Thanks for looking into this though I hope it can be fixed with not too much trouble

jcubic commented 6 months ago

Can you explain what you mean by "contain the bug"? It works for me. Can you explain what is not working?

ordo-n commented 6 months ago

by contain the bug i meant i am experiencing the same bug with jquery terminal 2.39.3 and the jsDeliver links

jcubic commented 6 months ago

Can you show the error on this link, that use latest files? Your screenshot use same links as your original bug.

https://jsfiddle.net/ebpj5m9w/

ordo-n commented 6 months ago

Can you show the error on this link, that use latest files? Your screenshot use same links as your original bug.

https://jsfiddle.net/ebpj5m9w/

https://jsfiddle.net/v3Lqh7fc/

ordo-n commented 6 months ago

you have to play with the width moving it from left to right to change which line the cursor is on

jcubic commented 6 months ago

Yes, I can reproduce, it's random when you resize the window. I need to investigate what is going on.

jcubic commented 5 months ago

I can reproduce it every time if you open dev tools that is on the side and you have full screen terminal.

jcubic commented 5 months ago

It should be fixed now, the problem was that the draw command line function get prompt from previous render. That's why when you have a big change of the size (like with dev tools open) the bug was visible.

Try again, use those links:

https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@devel/css/jquery.terminal.css https://cdn.jsdelivr.net/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.js

jcubic commented 5 months ago

I also fixed jumping of text when resizing a long command line. Below the line in command there was an empty line for as split second. Now it should look smooth.

ordo-n commented 5 months ago

can confirm its fixed can close issue now