How to add margin below the cursor by click?

1

Hello guys. First of all, thanks for your work.

I am building an application where I am using the Tiptap editor witch based on the Prosemirror editor. I have a floating menu that is under the cursor and I want it to always be shown above the keyboard on mobile devices and not hide under it. I found 2 properties (scrollMargin and scrollThreshold) that should help me, but it only works when the enter or up or down keys are pressed, and only on desktop or Android, on IOS it doesn’t work.

  1. Do you have any ideas on how to make it work also by clicking on the document?
  2. And can you fix it for IOS?

Here is an example from another site and it works well on IOS

ezgif.com-gif-maker
ezgif.com-gif-maker600×1136 2.04 MB

Thanks!

2

The library only knows how to scroll the cursor into view. If that’s what you need, you can fire a transaction with scrollIntoView() called on it. As for not working on iOS, you could try opening an issue on github with a more detailed description of what doesn’t work.

3

Thanks for the fast reply! I added this code into my plugin and it works well on desktop. On Android, I need to twice click for it to work (not double click, 2 separate clicks). Have you any ideas what can be wrong with Android?

And also not working on IOS.

I will open an issue on github about IOS problem. Thanks!

handleDOMEvents: {
  click (view) {
    view.dispatch(view.state.tr.scrollIntoView())
    return true
  }
}