How to create links in xterm.js

user_13251380 0
Viewed 254

I am using xterm.js to write a reporting tool that displays results on the xterm.js Terminal. I want some of these test results that are written to the terminal to be links that when pressed I can trigger some sort of JavaScript function to handle my next step. I was looking over the documentation and found an interface called ILink that supposedly does what I'm looking for but I have no idea how to use it. Is xterm.js capable of something like this?

xtermjs javascript
1 Answers

OSC 8 hyperlinks are supported since xterm.js#4005

based on readme.md#addons

using xterm-addon-web-links

import { Terminal } from 'xterm';
import { WebLinksAddon } from 'xterm-addon-web-links';

const terminal = new Terminal();
term.open(document.getElementById('terminal'));

// clickable links
// default handler: open the link
terminal.loadAddon(new WebLinksAddon());
// custom handler
/*
function onLinkClick(_event, url) {
  console.log(`clicked link: ${url}`);
}
terminal.loadAddon(new WebLinksAddon(onLinkClick));
*/

// simple link
terminal.writeln('click here: https://xtermjs.org/');

// OSC 8 hyperlink escape codes
// not working in xterm.js?
terminal.writeln('click here: \x1b]8;;https://xtermjs.org\x07OSC 8 hyperlink text\x1b]8;;\x07');

alternative: xterm-link-provider

import { Terminal } from 'xterm';
import { LinkProvider } from 'xterm-link-provider';

const terminal = new Terminal();
term.open(document.getElementById('terminal'));

const linkRegex = /(CLICKME)/gu
terminal.registerLinkProvider(
  new LinkProvider(
    terminal,
    linkRegex,
    (_event, text) => {
      console.log(text)
    }
  )
)

terminal.writeln('click here: CLICKME');
user_104401280
Related