Invisible UTF-8 Joiner Characters getting copied

[hostilefork]

There are some nasty zero width joiners used to make the cursor properly appear in divs that would otherwise be empty.

Attempts to do this with plain CSS failed. But the problem with using the joiners is that Copying and Pasting keeps them.

Ideally there can be a way to get the desired behavior without the joiners. But if not, they need to be filtered when copying data out of the Replpad...as they cause invisible screwy things to appear when pasting anywhere (here on GitHub, into source editors, etc.)

[hostilefork]

Hm, I remember very clearly something not working when I didn't have the joiner there. But now I delete it and don't notice a difference. :-/

Some things have changed so maybe it's fixed?

I'll keep an eye on it...

[BrianOtto]

When I re-wrote the UI Builder code, I was having an issue with the cursor not appearing in the input div when it was empty. I did some research into this and found out it was happening because that div has display set to inline (so that it would display on the same line as the prompt). When an inline element has no content it takes up no space, and this causes the cursor to get hidden by the browser because there is no room to display it. If a character is entered then the cursor will appear.

I thought the zero width joiner was a trick to fix this issue, by having an "invisible" character in the div (and widening it enough for a cursor to appear). However, I tested this, and it didn't do anything. So I just removed it completely.

What does work is adding padding-left to the div. Some posts on Stack Overflow were saying you only need to add 1px and that is enough to get the cursor to appear, but I found I needed at least 3px. But there is a caveat when doing things this way... if you look closely enough the cursor jumps a bit when you click on the far left side of the input div. This is because you've click into the input div, but it has left padding now and so the cursor jumps to where the padding starts.

Anyway, long story short, I don't think the joiner is needed. However, I don't understand how the cursor is displaying for you, when the REPL starts off with an empty div. I couldn't get it working in my original implementation, but I guess there must have been something in your layout that I overlooked.

I ended up scrapping the contenteditable div completely and going with a standard <input>. I just hid the borders and all is good now, but this really only works for me because my app doesn't support multi-line content... though maybe you could get a <textarea> working in a similar fashion, if you do run into issues again.