[Bug]: Can't move cursor to left-side of mention when mention is the first thing in the editor

[rfgamaral]

Affected Packages

mention

Version(s)

2.7.4

Bug Description

Using the official mentions example, delete all editor contents and insert a mention with @. Then try to use the LeftArrow key to place the cursor before the mention. You'll realize that this is not possible. However, if you type some text, then the mention, you can use LeftArrow to move the cursor freely.

Browser Used

Firefox

Code Example URL

No response

Expected Behavior

Arrow keys should work all the times, allowing a user to place the cursor before/after any node/mark, such as mentions.

Additional Context (Optional)

No response

Dependency Updates

• [X] Yes, I've updated all my dependencies.

[nperez0111]

Hey @rfgamaral, this is a known issue with Prosemirror editors, the official solution is to use the Gapcursor extension to allow going before content. I modified the mention demo and it works after this extension is added:

https://github.com/user-attachments/assets/47e4acec-2525-42cb-a0a2-8a4e8847646e

[rfgamaral]

@nperez0111 Still an issue with Gapcursor on 🦊 Firefox (works fine on Chromium-based browsers). Can you reopen, please?

[nperez0111]

@rfgamaral, we use gap cursor straight from prosemirror, it looks like this was touched relatively recently for firefox (may 30, 2024) so maybe you haven't updated prosemirror-view (1.34.3 I think patches it)

If you still have issues with this, then you'll have to upstream this to prosemirror as we only wrap that plugin

[rfgamaral]

@nperez0111 I use @tiptap/pm, I'm guessing you need to update that first?

[nperez0111]

@tiptap/pm declares prosemirror-view as a peer dep, allowing a range of versions to match:

Right now it is defined here: https://github.com/ueberdosis/tiptap/blob/develop/packages/pm/package.json#L146C6-L146C35

You can update your package-lock to a newer version of prosemirror-view and it should update to a newer version. If you re-generate your package-lock completely without any installed node_modules, then NPM would fetch the latest matching version.

So this allows us to not have to constantly bump versions and gives you the flexibility to pull in newer versions of prosemirror without having to wait on us

[rfgamaral]

@nperez0111 Unfortunately, using prosemirror-view@1.34.3 doesn't fix the issue for Firefox.

I've tried the basic example on ProseMirror's website, inserted an image (the closest node type I could get to a mention), and I can use arrow keys on Firefox without issues to place the cursor on both sides of the image. Could there be something on Tiptap preventing this behaviour?

[nperez0111]

@rfgamaral I can't think of anything in particular. Our NodeView class does quite a bit, but does not do anything with selection movements. I'll reopen this but I probably won't look into it further than this

[gethari]

@rfgamaral am I missing something ? I don't see the cursor in ProseMirror's site as well in Firefox for mac 130.0.1 (64-bit)

https://github.com/user-attachments/assets/da386b74-5d13-40f5-9471-74098938fe32

[rfgamaral]

@gethari The cursor is not visible, yes (probably a CSS thing), but you can still move it to the left-side of the image (as you demonstrated by typing). Whereas on Tiptap, you can't move the cursor to the left-side of a mention at all.

[gethari]

@rfgamaral I am still confused !

https://github.com/user-attachments/assets/3f3f33f9-012c-4497-8f32-ec484e487d13

[rfgamaral]

@gethari That doesn't work for me. I even tried to disable all extensions, and it still doesn't work. Which Firefox version are you using?

[nperez0111]

OS might be important here too 🤔

[gethari]

@rfgamaral

@gethari That doesn't work for me. I even tried to disable all extensions, and it still doesn't work. Which Firefox version are you using?

[rfgamaral]

I'm on 132.0b2, shouldn't make that much of a difference, especially since I've been noticing this issue for a while now (so I'm certain I've had the issue when I was at 130). I guess this is a me problem, I just don't know what could possibly be the culprit.

[nperez0111]

I just installed Firefox to test it out, I'm on macOS and it works just like the video:

Maybe an extension, but I'm going to close this out

[rfgamaral]

I'm on Windows, so maybe a Windows+Firefox thing. Doubt it's an extension because I disabled them all, and still got the issue.