From 45fcd61e7e7485ae3b1b4bdd65e18fc7b2c607dc Mon Sep 17 00:00:00 2001 From: Mistaber Code Date: Mon, 8 Jun 2026 09:37:47 +0000 Subject: [PATCH] fix(terminal): use ClipboardAddon for copy-on-select copyOnSelect option was removed in xterm.js v5. The correct replacement is @xterm/addon-clipboard which handles clipboard integration via the Clipboard API. Adds the addon to both the interactive terminal and the read-only output panel. Co-authored-by: Mistaber Code --- dashboard/frontend/package-lock.json | 21 +++++++++++++++++-- dashboard/frontend/package.json | 1 + .../components/BottomPanel/OutputPanel.tsx | 3 ++- .../src/components/Terminal/Terminal.tsx | 3 ++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/dashboard/frontend/package-lock.json b/dashboard/frontend/package-lock.json index 18ec53fd82..1204873a29 100644 --- a/dashboard/frontend/package-lock.json +++ b/dashboard/frontend/package-lock.json @@ -1,12 +1,13 @@ { - "name": "frontend", + "name": "mistaber-frontend", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "frontend", + "name": "mistaber-frontend", "version": "0.0.0", + "license": "Apache-2.0", "dependencies": { "@monaco-editor/react": "^4.7.0", "@radix-ui/react-accordion": "^1.2.12", @@ -27,6 +28,7 @@ "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tooltip": "^1.2.8", "@tanstack/react-query": "^5.90.20", + "@xterm/addon-clipboard": "^0.2.0", "@xterm/addon-fit": "^0.11.0", "@xterm/addon-web-links": "^0.12.0", "@xterm/addon-webgl": "^0.19.0", @@ -5097,6 +5099,15 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@xterm/addon-clipboard": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@xterm/addon-clipboard/-/addon-clipboard-0.2.0.tgz", + "integrity": "sha512-Dl31BCtBhLaUEECUbEiVcCLvLBbaeGYdT7NofB8OJkGTD3MWgBsaLjXvfGAD4tQNHhm6mbKyYkR7XD8kiZsdNg==", + "license": "MIT", + "dependencies": { + "js-base64": "^3.7.5" + } + }, "node_modules/@xterm/addon-fit": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz", @@ -7706,6 +7717,12 @@ "jiti": "lib/jiti-cli.mjs" } }, + "node_modules/js-base64": { + "version": "3.7.8", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz", + "integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==", + "license": "BSD-3-Clause" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/dashboard/frontend/package.json b/dashboard/frontend/package.json index 0a9756dd0d..f1f3985cc0 100644 --- a/dashboard/frontend/package.json +++ b/dashboard/frontend/package.json @@ -43,6 +43,7 @@ "@radix-ui/react-tabs": "^1.1.13", "@radix-ui/react-tooltip": "^1.2.8", "@tanstack/react-query": "^5.90.20", + "@xterm/addon-clipboard": "^0.2.0", "@xterm/addon-fit": "^0.11.0", "@xterm/addon-web-links": "^0.12.0", "@xterm/addon-webgl": "^0.19.0", diff --git a/dashboard/frontend/src/components/BottomPanel/OutputPanel.tsx b/dashboard/frontend/src/components/BottomPanel/OutputPanel.tsx index 7ef9a9208e..e18d9acc3f 100644 --- a/dashboard/frontend/src/components/BottomPanel/OutputPanel.tsx +++ b/dashboard/frontend/src/components/BottomPanel/OutputPanel.tsx @@ -9,6 +9,7 @@ import { useRef, useEffect, useCallback } from "react"; import { Terminal as XTerm } from "@xterm/xterm"; +import { ClipboardAddon } from "@xterm/addon-clipboard"; import { FitAddon } from "@xterm/addon-fit"; import { WebLinksAddon } from "@xterm/addon-web-links"; import "@xterm/xterm/css/xterm.css"; @@ -92,7 +93,6 @@ export function OutputPanel() { const term = new XTerm({ cursorBlink: false, - copyOnSelect: true, disableStdin: true, fontSize: terminalFontSize, fontFamily: "JetBrains Mono, Menlo, Monaco, monospace", @@ -124,6 +124,7 @@ export function OutputPanel() { const fitAddon = new FitAddon(); term.loadAddon(fitAddon); + term.loadAddon(new ClipboardAddon()); term.loadAddon(new WebLinksAddon()); term.open(containerRef.current); diff --git a/dashboard/frontend/src/components/Terminal/Terminal.tsx b/dashboard/frontend/src/components/Terminal/Terminal.tsx index 42f14fb216..b8832e1b0b 100644 --- a/dashboard/frontend/src/components/Terminal/Terminal.tsx +++ b/dashboard/frontend/src/components/Terminal/Terminal.tsx @@ -1,5 +1,6 @@ import { useRef, useEffect, useCallback, useState } from "react"; import { Terminal as XTerm } from "@xterm/xterm"; +import { ClipboardAddon } from "@xterm/addon-clipboard"; import { FitAddon } from "@xterm/addon-fit"; import { WebLinksAddon } from "@xterm/addon-web-links"; import "@xterm/xterm/css/xterm.css"; @@ -82,7 +83,6 @@ function ActiveTerminal({ const term = new XTerm({ cursorBlink: true, - copyOnSelect: true, scrollback: 5000, scrollOnUserInput: true, scrollSensitivity: 1, @@ -117,6 +117,7 @@ function ActiveTerminal({ const fitAddon = new FitAddon(); term.loadAddon(fitAddon); term.loadAddon(new WebLinksAddon()); + term.loadAddon(new ClipboardAddon()); term.open(containerRef.current); termRef.current = term;