fix(editor): disable code editor font ligatures

This commit is contained in:
Melody Ruch authored and GitHub committed 2026-09-04 16:55:08 +08:00
1 parent 5e03c20821
commit a559371fc9
2 files changed
+24

No files matched your search

+14
View File
@@ -202,3 +202,17 @@ describe("editor gutters", () => {
});
});
});
describe("editor font theme", () => {
it("disables ligatures on the editor content so repainted character runs stay stable", () => {
const rules = buildEditorFontThemeRules();
// Ligature fonts merge runs like `--`/`==` into one glyph and can race
// CodeMirror's per-keystroke span patching (dbx#7900); dropping either
// declaration would reintroduce unpainted characters in the query editor.
expect(rules[".cm-content"]).toMatchObject({
fontVariantLigatures: "none",
fontFeatureSettings: '"liga" 0, "calt" 0',
});
});
});
@@ -763,6 +763,16 @@ export function buildEditorFontThemeRules(opts?: { fixedHeight?: boolean; scroll
...(opts?.scrollable ? { ".cm-scroller": { overflowX: "auto", overflowY: "auto" } } : {}),
".cm-content": {
fontFamily: `var(${EDITOR_FONT_FAMILY_CSS_VAR}, ${defaults?.family ?? "monospace"})`,
// Ligature fonts (Fira Code, Cascadia Code, JetBrains Mono, ...) combine
// runs like `--`/`==` into a single shaped glyph. CodeMirror repaints
// edited lines by patching individual character spans, and that
// per-keystroke patching can race the browser's ligature reshaping when
// the same character is typed repeatedly in place, leaving earlier
// characters unpainted until something else forces a repaint (dbx#7900).
// Disabling ligatures here avoids the reshaping entirely, matching the
// same fix already applied to DataGridConditionEditor.vue.
fontVariantLigatures: "none",
fontFeatureSettings: '"liga" 0, "calt" 0',
lineHeight: "1.6",
padding: "0",
},