Bracket matching decoration extends over composition in Safari

[hubgit]

Describe the issue

In Safari, when using a keyboard layout where some keys start a composition (e.g. those highlighted in orange below, in the macOS Keyboard Viewer), pressing one of those keys while the cursor is immediately after a matched bracket decoration causes the decoration to extend over the inserted text. The editor can continue to behave strangely after this point, until the page is reloaded.

https://github.com/codemirror/dev/assets/14294/95f33375-57c8-4760-91d0-4b533f5c7144

French:

Spanish:

This might seem like an obscure edge case, and it does only affect Safari users with certain keyboard layouts, but typing ^ after a closing bracket is quite common when writing equations in LaTeX!

Browser and platform

macOS 14.1.2, Safari 17.1.2

This does not happen in Chrome or Firefox.

Reproduction link

https://codemirror.net/try/?c=VGhpcyBpcyBhICh0ZXN0KQ==

[marijnh]

I could reproduce this on Firefox and Chrome as well. Attached patch adds a kludge to work around it.

[hubgit]

Unfortunately I think this may have created a few different issues (or perhaps they were there before, but I hadn't noticed them).

Both of these are using the French keyboard layout on macOS to type "è", using the "grave accent" key next to Enter.

https://codemirror.net/try/?c=VGhpcyBpcyBhICh0ZXN0KQ==

In Chrome, an extra accent character is inserted and the main character gets the matched bracket highlighting:

https://github.com/codemirror/dev/assets/14294/3f869de3-a8dd-430d-9816-5c8a97f47708

https://github.com/codemirror/dev/assets/14294/3bc06490-38f9-4036-93bb-4667eefc3cb1

In Safari, the correct character is inserted, but the syntax highlighting is odd while typing and the opening matched bracket decoration is missing afterwards:

https://github.com/codemirror/dev/assets/14294/d85206d6-226e-43a5-99ff-06dbbfc2a2ae

[marijnh]

It seems like Safari is simply not firing compositionend at the end of a dead-key composition in this situation. Attached patch adds a kludge that tries to use beforeinput events to detect and fix the situation.

[hubgit]

[ignore my previous comment, deleted once I realised that the latest fix isn't on Try CodeMirror yet]

I've tested the main branch and this does seem to be resolved in both Chrome and Safari - thanks!

[marijnh]

Reverted this kludge. See #1358 for discussion.

We may be able to avoid this issue by using EditContext on Chrome at some point. Researching how well it actually works in current Chrome.