Draft-js: get block under cursor onMouseOver

Created on 25 Apr 2016 · 2Comments · Source: facebook/draft-js

How would one go about getting the DraftEditor block under mouse with onMouseOver?

question

Source

alexeygolev

Most helpful comment

Discussed in Slack. :)

@alexeygolev: Ah ok :simple_smile: Honestly I think the simplest thing might be the DOM-based suggestion I made above. Mouseover listener on your top-level container, then traverse to find the block key that the mouse is currently hovering over. Then you can use that to position your menu as needed. I usually suggest using absolute positioning outside the actual rendering of the editor for menus etc., so that you have as much control over positioning as you need.

hellendag on 25 Apr 2016

👍2

All 2 comments

Discussed in Slack. :)

@alexeygolev: Ah ok :simple_smile: Honestly I think the simplest thing might be the DOM-based suggestion I made above. Mouseover listener on your top-level container, then traverse to find the block key that the mouse is currently hovering over. Then you can use that to position your menu as needed. I usually suggest using absolute positioning outside the actual rendering of the editor for menus etc., so that you have as much control over positioning as you need.

hellendag on 25 Apr 2016

👍2

How can one do this when we need to know the block besides the editable area like in Workflowy or similar apps where it gets highlighted on hover? Do we make a custom editor block with non-editable content?