Tippy breaks the "headless" idea of tiptap

[zcuric]

Hi! I've been developing with tiptap intensively in last couple of months and with v2 since it has been made public. I also made some contributions and I got the chance to make myself familiar with the code.

When it comes to bubble menu, my opinion is that v1 implementation was better and it fits into the headless theme of the tiptap better. It had good API to work with, especially the menu slot prop. It was a simple and barebones implementation that provided a nice wrapper which could easily be positioned.

Tippy breaks that "headless" idea because it introduces additional wrappers and reduces DX because developer used to control over the menu and to positioning programatically isn't possible any more.

I know we can make our own bubble menu extensions which won't use tippy, but I wanted to share my opinion with tiptap devs.

Thanks!

[cadars]

Have you tried using the headless version of Tippy in the bubble menu instead?
https://atomiks.github.io/tippyjs/v6/headless-tippy/

[zcuric]

No, I haven't. That could make things easier. But, that's again one more dependency inside the bubble menu extension.

[philippkuehn]

It was not an easy decision but tippy (popper.js) is really good at positioning things. Another goal was to make a bubble menu possible in the plain JS version of tiptap. The bubble menu in v1 was built in a way (using slots) we can’t use for a plain JS implementation. Since tippy comes without styling at all as seen in our demos and you are able to overwrite all tippy options I'm fine with it.

positioning programatically isn't possible any more

Can you tell me more about that limitation? What was possible in v1 and isn’t possible anymore?

[zcuric]

For example, if you wan to adjust positions of the bubble menu, in v1, you would just add css on the content of the menu. Now, because of tippy wrapper that isn't possible. For example this issue could be solved in v1 #1313 with style attribute and positioning css (left, right... ).

[philippkuehn]

There is an offset option for tippy. Does that help you?

<bubble-menu :editor="editor" :tippy-options="{ offset: [0, 20] }">
  ...
</bubble-menu>

I’m not sure how v1 could handle your issue in a better way 🤔