fix(terminal): Render with xterm's DOM renderer

The WebGL renderer rasterizes each glyph against its cell background, so
text over the selection came out at a visibly lighter weight than the
rest and looked like a different font. The DOM renderer draws text like
the editor does, selected or not.

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
This commit is contained in:
l0ng-ai
2026-10-24 13:42:07 +08:00
parent 86f1f666d7
commit 99b4f8bdf6
3 changed files with 2 additions and 23 deletions
-1
View File
@@ -41,7 +41,6 @@
"@tauri-apps/plugin-opener": "^2",
"@xterm/addon-fit": "^0.11.0",
"@xterm/addon-search": "^0.16.0",
"@xterm/addon-webgl": "^0.19.0",
"@xterm/xterm": "^6.0.0",
"anser": "^2.3.5",
"clsx": "^2.1.1",
-8
View File
@@ -65,9 +65,6 @@ importers:
'@xterm/addon-search':
specifier: ^0.16.0
version: 0.16.0
'@xterm/addon-webgl':
specifier: ^0.19.0
version: 0.19.0
'@xterm/xterm':
specifier: ^6.0.0
version: 6.0.0
@@ -918,9 +915,6 @@ packages:
'@xterm/addon-search@0.16.0':
resolution: {integrity: sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA==}
'@xterm/addon-webgl@0.19.0':
resolution: {integrity: sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A==}
'@xterm/xterm@6.0.0':
resolution: {integrity: sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==}
@@ -2657,8 +2651,6 @@ snapshots:
'@xterm/addon-search@0.16.0': {}
'@xterm/addon-webgl@0.19.0': {}
'@xterm/xterm@6.0.0': {}
acorn-jsx@5.3.2(acorn@8.19.0):
+2 -14
View File
@@ -286,9 +286,10 @@ export class TerminalSession {
if (this.host.parentElement !== container) container.appendChild(this.host);
if (!this.opened) {
this.opened = true;
// xterm's DOM renderer: the WebGL one rasterizes glyphs per background, so
// selected text rendered at a visibly different weight than the rest.
this.term.open(this.host);
this.term.textarea?.addEventListener("focus", () => this.opts.onFocus(this.key));
void this.loadRenderer();
}
this.resizeObserver?.disconnect();
this.resizeObserver = new ResizeObserver(() => this.scheduleFit());
@@ -302,19 +303,6 @@ export class TerminalSession {
if (this.host.parentElement === container) container.removeChild(this.host);
}
private async loadRenderer() {
// WebGL when available; xterm's DOM renderer is the built-in fallback.
try {
const { WebglAddon } = await import("@xterm/addon-webgl");
if (this.disposed) return;
const webgl = new WebglAddon();
webgl.onContextLoss(() => webgl.dispose());
this.term.loadAddon(webgl);
} catch {
/* no WebGL: keep the DOM renderer */
}
}
private scheduleFit() {
if (this.fitRaf) return;
const run = () => {