Text with links is animated incorrectly

[olshevski]

Issue summary

Echoing text (with typing animation) that contains any links results in a really weird glitchy animation. See the attached video:

Screen.Recording.2023-07-29.at.12.58.58.mov

The text jumps arround and the cursor position is incorrect.

Expected behavior

Any text containing links should be animated linearly and visually correctly. The cursor should not jump to the next line.

Actual behavior

If the printed text contains a link then the animation looks incorrect. The text that comes after the link is printed before the link and the cursor jumps to the next line.

Steps to reproduce

Here is the code from the video:

<script>
    $(function () {
        $('body').terminal({
            test: function() {
                this.echo("text before [[!;;;;https://github.com/jcubic/jquery.terminal]link] text after", { typing: true, delay: 200})
            }
        }, {
            greetings: null,
        })
    })
</script>

And here is the codepen: https://codepen.io/olshevski/pen/KKrrQpo

Browser and OS

The issue is reproduced on:
MacOS Ventura 13.3.1
Google Chrome 115.0.5790.114 (Official Build) (arm64)
Safari 16.4 (18615.1.26.110.1)

[jcubic]

The same as with newlines the problem was rendering links in prompt. The issue was in CSS, span had float: left but the links did not so they were rendered at the end.

[jcubic]

Released in 2.37.0