fix: cursors will not break to new-line on firefox #1419 #1422
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
nperez0111
changed the title
There was a problem hiding this comment.
🥳 yay, first PR!
I'm not sure about the design changes. The original thinking was to make the cursor look similar to how it is in Google Docs. Could you compare with that? The idea is imo that it's sort of a flag that expands
Also; ended up going for the outline version? Was that because it also solves the "zoom" issue?
|
Got it, looked into google docs more & I think I nailed the look. Google docs on the left, blocknote on the right |
|
As for the outline approach, the zooming was fine with the display block, but I went with the outline because it better represents the intention here. Can't accidentally click on the cursor caret now too which is a nice bonus |
|
@nperez0111 oh no :( something we didn't think of; of course hovering the cursor to show the username doesn't work anymore if the cursor doesn't take any space (with the outline trick). It's now only possible to hover the "dot", not the caret. Ideas for a fix? |
Ah yea, didn't realize that was intended. zero-width element is definitely going to have that behaviour. So I'll go back to the display: inline-block |
|
Alright, tried another stab at it. With display: inline-block, it worked for firefox, but then zooming at specific sizes in chrome would be incorrect. So, I went with the same outline approach, but now I'm overlaying the element with a pseudo element, specifically to capture the mouse events. This is a nice in-between because the pseudo element is absolutely positioned so it should have no effect on other elements (e.g. to break wrapping). |
|
Smart!! I think now there's only 1px white space between label and caret. After that we should be good to go! 
|
This resolves an issue where in Firefox the cursor's caret was breaking to a new line in specific scenarios. Resolves (#1419)
Original issue:
Screen.Recording.2025-02-10.at.10.43.47.mov
After fix is applied:
Screen.Recording.2025-02-10.at.10.45.39.mov
You'll also notice I repositioned the label to actually line-up to the caret element. I felt like it just looked wrong otherwise.
Before:
After:
If this should be changed in another PR, then happy to do so, just wanted this to look great. Also willing to make the cursor thicker than 1 px it is right now