tiptap
tiptap copied to clipboard
ueberdosis
[Bug]: The active click area is limited to the top area of editor
Which packages did you experience the bug in?
core
What Tiptap version are you using?
2.3
What’s the bug you are facing?
Steps:
- Go to: https://tiptap.dev/docs/editor/examples/default
- Remove all the content from the editor
- Now click outside the editor to remove the focus from editor (the blinking | should vanish from editor)
- Move mouse cursor back inside the editor and click towards the bottom area.
Expected: The editor should get into active mode and start showing the cursor blinking, where user can start typing. Actual: Nothing happens. It's only when you click towards the top area of the editor that TipTap acknowledges the click and starts showing the pointer (indicating that editor is ready to accept input).
On my installation, I set the default height of the editor to about 96 pixels. When users click in the middle of the editor, nothing happens. Only when they click towards the top area of the editor that it becomes active.
The user typically needs to click inside ~20 pixels from the top border to make the editor active.
It's incredibly frustrating.
What browser are you using?
Chrome
Code example
No response
What did you expect to happen?
Expected: The editor should get into active mode and start showing the cursor blinking, where user can start typing.
Anything to add? (optional)
None. All details have been added to the main post.
Did you update your dependencies?
- [X] Yes, I’ve updated my dependencies to use the latest version of all packages.
Are you sponsoring us?
- [ ] Yes, I’m a sponsor. 💖
In the docs the black border isn't the editor, it contains the editor (and the toolbar buttons). The editor is actually only this little blue highlighted bit (once all the content has been removed).
In the real world, if you make the actually editor bigger (say a min height of 200px or the view height) then clicking anywhere on the editor will trigger the cursor blinking.
You can add a height in your CSS or add a class to the editor.
You can also focus the editor when the user clicks somewhere on the wider canvas area.
Yea this is not an issue with our implementation, you can change the editor to whatever height you like, we left our editor be mostly default because we want to show that we are headless.
