How to setup/implement Medium type Tooltip menu?

1

Hi @marijn,

Firstly, thank you so much for putting this project together!

I realized that in Release 0.11.1 you removed the tooltip (“bubble”) menu. The ability to have something like that UI element is very important to our application.

Let’s say I we start from this menu/tooltipmenu.js (the old tooltip menu source file)…

My question is what is currently needed to get from there to incorporating that into a very basic prosemirror (version>=0.21.0) constuction such as is shown below?

var view = new EditorView(document.body, {
  state: EditorState.create({schema: schema})
})

What props would be required for the PM view constructor… or perhaps would they be plugins?

I’m moving from Quill.js and I really appreciate the modular approach you have here which is very flexible. I did not find that to be the case in Quill.

I am very new to this project and would appreciate any guidance on how recreate the tooltip menu and for my project.

2

You can do this with a widget decoration, or with the old approach of looking up the coordinates of the cursor and overlaying the tooltip at that position.

3

I am really struggling with how to detect when the user has selected text. At least I could not find anything in the documentation. How would you do that?

4

Inside your dispatchTransaction handler, check for tr.selectionSet, e.g.:

pm = new EditorView(domElement, {
  dispatchTransaction: tr => {
    if (tr.selectionSet) {
      // do your thing
   }
})
5

(Or, if your menu lives in a plugin, use the plugin’s state update callback instead.)