Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bracket matching decoration extends over composition in Safari #1324

Open
hubgit opened this issue Jan 19, 2024 · 5 comments
Open

Bracket matching decoration extends over composition in Safari #1324

hubgit opened this issue Jan 19, 2024 · 5 comments

Comments

@hubgit
Copy link
Contributor

hubgit commented Jan 19, 2024

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.

composition-after-matched-bracket.mov

French:
french

Spanish:
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
Copy link
Member

marijnh commented Feb 20, 2024

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

@marijnh marijnh closed this as completed Feb 20, 2024
marijnh added a commit to codemirror/view that referenced this issue Feb 20, 2024
…s before

FIX: When starting a composition after a non-inclusive mark decoration,
temporarily insert a widget that prevents the composed text from inheriting
that mark's styles.

Issue codemirror/dev#1324
@hubgit
Copy link
Contributor Author

hubgit commented Mar 8, 2024

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:

chrome.mov
chrome-start.mov

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

safari.mov

marijnh added a commit to codemirror/view that referenced this issue Mar 20, 2024
FIX: Fix the editor getting stuck in composition when Safari fails to fire a
compositionend event for a dead key composition.

Issue codemirror/dev#1324
@marijnh
Copy link
Member

marijnh commented Mar 20, 2024

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
Copy link
Contributor Author

hubgit commented Mar 26, 2024

[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 added a commit to codemirror/view that referenced this issue Apr 9, 2024
FIX: Remove the workaround that avoided inappropriate styling on composed text after
a decoration again, since it breaks the stock Android virtual keyboard.

Issue codemirror/dev#1358
Issue codemirror/dev#1324
@marijnh
Copy link
Member

marijnh commented Apr 9, 2024

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.

@marijnh marijnh reopened this Apr 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants