Emoji's getting cut in Code

[thibaultmol]

Description

Certain emoji's (complex ones like country flags) get cutoff when your cursor is in them.

Steps to reproduce

If you paste an emoji like a country flag (ex 🇧🇪 or 🇬🇧) in Code and then move your cursor using the arrow keys to the left of emoji, your cursor is actually in the middle of the emoji instead of to the left of it.

So if you then press space or add another letter in that cursor position you cut the emoji.
It goes from this:

to this:

So to be clear, put your cursor to the right of such an emoji. Then press left arrow key once, now you cursor should be to the left of the emoji (and visually it is) but in reality it's in the middle of the emoji.

Relevant logs

No response

Expected behavior

If you press the left arrow key of such an emoji it should be on the left of that

Which operating system are you using?

Linux/BSD/UNIX

What browsers are you seeing the problem on?

Mozilla Firefox

Extensions

Tried in a fresh firefox profile

Version

2024.3.0

[davidbenque]

I can reproduce this issue on a CodeMirror 5 demo (which we currently use for the Code app) but not on a CodeMirror 6 demo so we can safely assume that this issue will be solved when we upgrade Codemirror across CryptPad.