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

Add "trailing hacks" in more scenarios. #122

Merged
merged 7 commits into from
Mar 17, 2024

Conversation

smoores-dev
Copy link
Collaborator

@smoores-dev smoores-dev commented Mar 15, 2024

Browsers have very particular opinions about where they will allow users to place selections in contenteditable elements. ProseMirror manages this in part by placing
elements in locations that browsers otherwise wouldn't allow user selections.

This PR brings react-prosemirror closer to matching all of the situations that ProseMirror itself uses these "trailing hacks". Rather than only in empty textblocks, we now also place trailing hacks when a textblock node ends with a non-text node, a widget, or a text node that ends with a newline.

Also, Safari and Chrome both have cursor drawing/selection bugs that prevent users from making selections after non-contenteditable inline nodes in some situations. To work around this, in these browsers, we add an empty image element between the trailing non-contenteditable node and the "trailing hack", which allows users to place cursors there.

Browsers have very particular opinions about where they will allow
users to place selections in contenteditable elements. ProseMirror
manages this in part by placing <br> elements in locations that
browsers otherwise wouldn't allow user selections.

This PR brings react-prosemirror closer to matching all of the
situations that ProseMirror itself uses these "trailing hacks". Rather
than only in empty textblocks, we now also place trailing hacks when
a textblock node ends with a non-text node, a widget, or a text node
that ends with a newline.
@smoores-dev smoores-dev requested a review from a team as a code owner March 15, 2024 01:36
Safari and Chrome both have cursor drawing/selection bugs that
prevent users from making selections after non-contenteditable
inline nodes in some situations. To work around this, in these
browsers, we add an empty image element between the trailing non-
contenteditable node and the "trailing hack", which allows users
to place cursors there.
@smoores-dev smoores-dev merged commit c90da83 into react-editor-view Mar 17, 2024
1 of 2 checks passed
@smoores-dev smoores-dev deleted the better-trailing-hacks branch March 17, 2024 23:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant