Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cursor plugin causes word breaking #97

Closed
2 tasks done
bkempe opened this issue Mar 21, 2022 · 6 comments
Closed
2 tasks done

Cursor plugin causes word breaking #97

bkempe opened this issue Mar 21, 2022 · 6 comments
Assignees
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@bkempe
Copy link

bkempe commented Mar 21, 2022

Checklist

Describe the bug
The cursor plugin breaks words which can be observed especially when the cursor is placed in long words and using a smaller width of the text space.

To Reproduce
Steps to reproduce the behavior:

  1. Open two browser windows with width 800px
  2. In both windows, go to https://demos.yjs.dev/prosemirror/prosemirror.html
  3. Paste "Test test 123 Test test 123 Test test 123 Test test 123 Test test 123 Test test 123 Test test 123 Donaudampfschiffahrtsgesellschaftskapitän" in one window
  4. Place the cursor after Donaudampf in one window
  5. See that the word gets broken in the other window.

The DOM looks like this:

<p>Test test 123 Test test 123 Test test 123 Test test 123 Test test 123 Test test 123 Test test 123 Donaudampf<span 
class="ProseMirror-yjs-cursor ProseMirror-widget" style="border-color: #ffa500" contenteditable="false"><div 
style="background-color: #ffa500">User: 255092616</div></span>schiffahrtsgesellschaftskapitän</p>

Expected behavior
Words should not get broken. Example: https://slate-yjs.dev/remote-cursors-overlay

Screenshots
Screen Shot 2022-03-21 at 20 27 06

Additional context

We are a Sponsor :)

@bkempe bkempe added the bug Something isn't working label Mar 21, 2022
@dmonad
Copy link
Member

dmonad commented Mar 23, 2022

Hi @bkempe,

As we discussed in the last Y Community meeting, there is no good solution for this.

The reason why the words break is that the user-name is represented using a HTML block element. WebKit will automatically break when they see a block element. Gecko-based browsers won't break the word.

Btw, if you the the div to display: none, then everything will work as expected. But you won't have any user-names above the cursors anymore.

.ProseMirror-yjs-cursor > div {
  display: none;
}

An alternative solution would be to use the same approach that quill-cursors is using and render the cursors as absolutely-positioned elements. However, my experience with this approach is that it is very performant for large documents and requires extreme care to implement correctly.

I'll leave this issue open in case somebody finds a better solution.

@dmonad dmonad added the wontfix This will not be worked on label Mar 23, 2022
@bkempe
Copy link
Author

bkempe commented Mar 23, 2022

@dmonad Thanks for looking into this! One compromise solution may be to only wrap URLs(which are the most likely items to be long in a typical notepad) in a block.

@dmonad
Copy link
Member

dmonad commented Mar 23, 2022

That makes sense. You can basically set them in a <div style="white-space: nowrap;"> element.

@dmonad
Copy link
Member

dmonad commented Apr 20, 2022

There's now a solution to this problem. See yjs/y-codemirror.next#12

I'll be porting the solution to y-prosemirror (probably in the next ~two weeks). But if somebody wants to give this a try, that would be great!

@dmonad dmonad added good first issue Good for newcomers and removed wontfix This will not be worked on labels Apr 20, 2022
@bkempe
Copy link
Author

bkempe commented Apr 25, 2022

@dmonad dmonad closed this as completed in 776fec7 Apr 27, 2022
@dmonad
Copy link
Member

dmonad commented Apr 27, 2022

This issue is finally fixed in y-prosemirror@v1.0.19 🎉

ronnyroeller pushed a commit to Collaborne/y-prosemirror that referenced this issue May 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants