typewriterjs icon indicating copy to clipboard operation
typewriterjs copied to clipboard

Cursor is on next line

Open NewYears1978 opened this issue 3 years ago • 3 comments

I am using this and it works but for some reason the cursor appears on the next line below the text instead of the end of the line as it types out.

Any idea what I did wrong?

NewYears1978 avatar Jul 07 '21 02:07 NewYears1978

Here's the code for reference

`

`

`const name='{name}'; const amount='{amount}'; const prompt='{prompt}'; const wrapData=(message)=>{ return message.replace(/\b{name}\b/g, '{name}').replace(/{currency}{amount}\b/g, '{currency}{amount}').replace(/\b{amount}{currency}/g, '{amount}{currency}').replace(/\b{amount}\b/g, '{amount}').replace(/{currency}/g, '{currency}'); } const typewriter = new Typewriter('.text-container', { //skipAddStyles:true,
delay:50 });

const row1a=wrapData({row1}); const row2a=wrapData({row2}); const row3a=wrapData({row3}); const row4a=wrapData({row4}); typewriter.changeCursor('{prompt}') .typeString(<div class="row1 message">${row1a}</div>)
.pauseFor(50) .typeString(<div class="row2 message">${row2a}</div>) .pauseFor(50) .typeString(<div class="row3 message">${row3a}</div>) .pauseFor(50) .typeString(<div class="row4 message">${row4a}</div>) .pauseFor(50) .start(); `

NewYears1978 avatar Jul 07 '21 03:07 NewYears1978

I found a similar issue when messing with <h1> tags, this caused the cursor to jump to a new line everytime. In order to remedy this for my code I did this: https://jsfiddle.net/ovczLxaj/1/

The key steps being to define the <div> as a class:

  <div id="app" class="cl">
  </div>

And then making sure the text is alined in-line:

 .cl h1 { 
  display: inline;
} 

.cl span {
  font-size: 50px;
}

Personally this feels like more of a trick in order to get it too work, as it means the cursor doesn't resize properly when you change header sizes or anything.. I'd like to see this issue fixed in new updates :)

I hope this helps as a temporary fix though :)

jimbob88 avatar Jul 18 '21 16:07 jimbob88

Hey thanks, all I had to do was add the display: inline to my existing class and now it works =D The only downside is there's no like..global CSS so I have to put this in every single CSS for every variation...a real pain but it works so I will take it =D

Woops I lied, that puts all the lines together too (like it doesn't line between each row. hmmm. But I added some
to the output lines and it's good now =D

NewYears1978 avatar Jul 18 '21 18:07 NewYears1978