Improve input prompt

[Compositr]

Currently, just a draft, looking for feedback

Scope

Just general improvements for the input box, like handling special keys and characters.

Plan

• [x] Handle special characters like &!* and uppercase (solved by #66)
• [x] Handle special keys such as delete, end, home, etc.
• [x] Add placeholders
• [x] Add a working cursor so the user can edit their text
• [x] Add a flashing cursor

[Compositr]

Also @Elius94 eslint seems to be configured to only allow CRLF endings

But all files are LF for some reason which causes a lot of IDE errors

Is this intentional?

[Compositr]

Assuming it is, added CRLF settings to .vscode's settings.json to force the editor to use CRLF

[Elius94]

Hi! yes, with clrf it should be ok for windows but I wouldn't want it to make problems on linux, however I can't tell you since I use windows. Otherwise everything is fine, thank you

[Compositr]

The above commit fixes the bug where the box "breaks" when pressing delete/backspace/tab when empty. Also CRLF works fine on Linux in my experience.

[Compositr]

Above commit fixes NaN from appearing when backspacing a negative number (such as -12). Before, when you deleted the last digit before the dash, it would change to NaN (another backspace would reset to 0). Now, once the last digit it removed it just sets it back to zero.

[Compositr]

Currently working on a placeholder feature, using chalk for colouring. However, chalk.gray results in this happening...

Any idea why @Elius94?

[Compositr]

(above commit doesn't fully work, just so you can help test)

[Compositr]

Fixed issue but the yellow sideline still appears for some reason

EDIT: Figured out its down to me using chalk, working on a fix

[Elius94]

Great! you are doing a great job. Thank you. as soon as you have a final version I will do some testing myself and accept the PR

[Compositr]

Figured out the chalk issue. Chalk inserts invisible ANSI characters that don't take up width on a screen but count toward string length.

This line then checks string length rather than visible length and over-compensates

https://github.com/Elius94/console-gui-tools/blob/5fceb67daf2b6daff872b967a5aa8936bdcbfe0a/src/components/layout/DoubleLayout.ts#L270

[Elius94]

Figured out the chalk issue. Chalk inserts invisible ANSI characters that don't take up width on a screen but count toward string length.

This line then checks string length rather than visible length and over-compensates

https://github.com/Elius94/console-gui-tools/blob/5fceb67daf2b6daff872b967a5aa8936bdcbfe0a/src/components/layout/DoubleLayout.ts#L270

Ok, yes! Chalk style characters are not visible and should not bel counted to check the size of a printable string. Previously the inputp popup didn't use styled strings and so there wasent this trouble.

You have to escape the style chars from string before count.

[Compositr]

Hm, played around and changed a few things The ANSI characters should now be factored into the calculation (only on DoubleLayout for now thought... perhaps we can look into combining the common functions into a BaseLayout in the future)

However, this weird phenomenon now occurs only when using Chalk:

It appears to draw two lines

[Elius94]

I think now we just need to add the cursor (maybe flashing), and after that we can include this PR in the new release! Thanks :D

[Compositr]

Yeah, when I have some free time I'll implement a flashing cursor The extra line issue is still present so I'll exclude placeholders from this PR, and will open another just for that feature when it's ready (to avoid delaying this PR too much).

[Compositr]

It's finally finished! Sorry for the delay, been busy with life in general lol. Flashing cursor and placeholder is also done. Code is slightly jank right now but it should work.

[Compositr]

@Elius94 whenever you're free