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

Cannot select inline node at the end of a line or document #2690

Closed
1 of 2 tasks
Billiam opened this issue Apr 7, 2022 · 5 comments
Closed
1 of 2 tasks

Cannot select inline node at the end of a line or document #2690

Billiam opened this issue Apr 7, 2022 · 5 comments
Labels
Type: Bug The issue or pullrequest is related to a bug

Comments

@Billiam
Copy link
Contributor

Billiam commented Apr 7, 2022

What’s the bug you are facing?

Tiptap does not support selecting inline nodes with the mouse when dragging from right to left, if the node occurs at the end of a line (or is the only element on the line).

Selecting from left-to-right works, as does right-to-left if the node is not at the end of the line.

Oddly, if the cursor is very slightly inside the node on mouse down, selection works as expected (see gif), but only for non-draggable nodes.

tiptap-selection

How can we reproduce the bug on our side?

  1. Visit https://tiptap.dev/api/nodes/emoji
  2. Insert an emoji at the end of a line
  3. Try to select the emoji with the mouse, beginning at the right side of the emoji and dragging to the left.

Can you provide a CodeSandbox?

https://tiptap.dev/api/nodes/emoji

What did you expect to happen?

Element should be selected, the same way it is if element is not at the end of the line.

Anything to add? (optional)

This issue does not occur in Prosemirror:

https://prosemirror.net/examples/dino/

prosemirror-selection

Did you update your dependencies?

  • Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

  • Yes, I’m a sponsor. 💖
@Billiam Billiam added the Type: Bug The issue or pullrequest is related to a bug label Apr 7, 2022
@scottsidwell
Copy link

Having a look into this, it appears this behaviour is caused by the ProseMirror-separator node that is inserted by ProseMirror and custom styles Tiptap has applied to it.

Specifically, setting width: 1px on ProseMirror-separator appears to trigger this behaviour in Chrome's content-editable (I couldn't reproduce the original bug on Safari or Firefox). This was introduced in 0e94afe. Demo of this being the culprit below:

Tiptap.ProseMirror-Separator.bug.mov

Perhaps @philippkuehn can weigh in with what styling the above commit was trying to solve; to work out if it's safe to revert - or to hunt around for CSS that won't cause this conflict :)

@Billiam
Copy link
Contributor Author

Billiam commented Apr 10, 2022

Thanks! I was able to work around it by overriding the width, and also removing any right-side margin from my nodes for the same reason.

@stale
Copy link

stale bot commented Jul 6, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale label Jul 6, 2022
@stale stale bot closed this as completed Jul 14, 2022
@svenadlung svenadlung reopened this Sep 26, 2023
nperez0111 pushed a commit that referenced this issue Aug 13, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@rfgamaral
Copy link
Contributor

@nperez0111 This is marked as fixed on the release notes, but the still is still opened.

@nperez0111
Copy link

Sorry yea need to be better on closing issues. It is resolved

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug The issue or pullrequest is related to a bug
Projects
None yet
Development

No branches or pull requests

5 participants