-
-
Couldn't load subscription status.
- Fork 624
fix: Firefox invisible text cursor after dropping blocks #2128
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
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@blocknote/ariakit
@blocknote/code-block
@blocknote/core
@blocknote/mantine
@blocknote/react
@blocknote/server-util
@blocknote/shadcn
@blocknote/xl-ai
@blocknote/xl-docx-exporter
@blocknote/xl-email-exporter
@blocknote/xl-multi-column
@blocknote/xl-odt-exporter
@blocknote/xl-pdf-exporter
commit: |
|
Good sleuthing @matthewlipski, I've been annoyed by this for a while myself using firefox daily. Only question is why we'd blur the domElement, instead of doing In either case, we should definitely leave ourselves a comment linking to this PR since you've captured a lot of info here |
|
So there actually is no |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fantastic!
Summary
This PR blurs the editor after blocks are dragged and dropped. This is mainly to fix an issue in Firefox that causes the text cursor to become invisible after drag & drop. However, it's also generally better for UX, as having the editor keep focus makes the formatting toolbar show up. Notion also doesn't show the toolbar after blocks are dropped.
R.e. the Firefox invisible cursor issue, this was a bit of a rabbithole.
First off, this also happens with TipTap's drag handle implementions (vanilla JS, React, and Vue):
Vanilla JS Drag Handle
React Drag Handle
Vue Drag Handle
Then I found that TinyMCE also had this issue ages ago, but was since fixed:
TinyMCE #2823
TinyMCE #1497
Unfortunately, despite searching for it, I couldn't find the PR with the fix for these issues.
There's also a ProseMirror bug report that's been open for years regarding what seems to be the same issue:
ProseMirror #593
So overall, looks like this is just a bug with Firefox, and the best we can do is work around it. Blurring the editor and refocusing it works. This PR just blurs it (as this more closely matches Notion's UX), but could be changed to refocus it after too.
Closes #2036
Rationale
The caret disappearing in Firefox is a major annoyance, and users have to click somewhere outside the editor, then back on it, to make it reappear.
Changes
Made editor DOM element get blurred at the end of
blockDragEnd.Impact
N/A
Testing
Is there even a way to test for this? Even with e2e test screenshots, the text cursor blinks so they seem like they'd be flaky at best.
Screenshots/Video
N/A
Checklist
Additional Notes