[Bug]: Custom Component Cursor Issues

[incutonez]

Which packages did you experience the bug in?

core, gapcursor

What Tiptap version are you using?

2.0.4

What’s the bug you are facing?

Hello! I'm trying to have custom components show in my editor, which seems to work after following this example. Unfortunately, it looks like there's something weird with the Gapcursor. In the attached video, you'll see that the Gapcursor shows horizontally above my items... it does actually update to the proper location in the DOM, but it always hangs above my custom components.

Maybe it's my lack of understanding Gapcursor, but this seems like a bug. I've tried a couple options:

• Padding all my custom components with a paragraph on both ends, but that got hairy quickly
• Changing my custom components to be paragraphs, but that didn't really seem to do anything

What browser are you using?

Firefox

Code example

https://codesandbox.io/p/sandbox/peaceful-bird-qr79hs?file=%2Fsrc%2Fcomponents%2FTipTapEditor.vue%3A40%2C15

What did you expect to happen?

I expected the cursor to show vertically after my custom component.

Anything to add? (optional)

No response

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. 💖

[rocher71]

I am facing the exact same problem.... @incutonez Have you solved it by any chance?

This is what is happening to me. https://github.com/user-attachments/assets/5c8e05b2-7bf5-4b1f-9b8a-f8cf78bfad70

[incutonez]

@rocher71 After creating this issue, I posted on the ProseMirror forums, came up with a solution, but it didn't work well with keyboard navigation. I eventually came across several GH issues that were opened by a diligent user, only to be closed by a bot. The current issue and solution I had followed can be found here. Hope that helps!

[rocher71]

Wow I didn't really expect an answer since it is an issue from an year ago, I really appreciate it! Thank you so much! I've tried the solutions you've provided, but it doesn't work for me🥲 Think I will just open a new issue about this.

[rocher71]

Hey @incutonez, I'm not sure if you're still looking for the solutions, but I made a new issue and got the perfect answer! Although you might have probably already resolved this, I'm attaching a link just in case. Check it out if you need to!

https://github.com/ueberdosis/tiptap/issues/5350

[incutonez]

@rocher71 Glad the solution posted there helped you! Unfortunately for us, we had highly custom components, so disabling GapCursor was not an option, due to keyboard navigation and using the mouse.

[RomanBednyakov]

fix via global styles in the project

  .ProseMirror-gapcursor:after {
    transform: rotate(90deg);
    width: 15px;
    position: static;
  }