How to use xterm-addon-web-links - 9 common examples

const handleTerminalInit = async () => {
      if (domContainer.current && xterm) {
        const webLinksAddon = new WebLinksAddon();
        xterm.loadAddon(fitAddon);
        xterm.loadAddon(webLinksAddon);
        xterm.attachCustomKeyEventHandler(copyShortcut);
        // last open
        xterm.open(domContainer.current);
        fitAddon.fit();
        if (onInit) {
          onInit(xterm, fitAddon);
        }
      }
    };
    handleTerminalInit();

mounted () {
    const term = this.term = new Terminal()
    const fitAddon = this.fitAddon = new FitAddon()

    term.loadAddon(fitAddon)
    term.loadAddon(new WebLinksAddon())

    term.open(this.$refs.container)
    term.focus()
    this.$nextTick(() => {
      // use $nextTick as xterm needs to be finished with rendering because fitAddon relies on
      // dynamic dimensions calculated via css, which do not return correct values before rendering is complete
      fitAddon.fit()
    })

    this.spinner = ora({
      stream: {
        write: chunk => this.term.write(chunk.toString()),
        isTTY: () => true,
        clearLine: () => this.term.write('\x1bc'), // TODO reset line only
        cursorTo: to => {}
      },

function createTerminal(){
  // Clean terminal
  while (terminalContainer.children.length) {
      terminalContainer.removeChild(terminalContainer.children[0]);
  }

  term = new Terminal({
      cursorBlink: true,
      scrollback: 10000,
      tabStopWidth: 10,
      windowsMode: isWindows
      });

  term.loadAddon(new WebLinksAddon());
  searchAddon = new SearchAddon();
  term.loadAddon(searchAddon);
  fitAddon = new FitAddon();
  term.loadAddon(fitAddon);

  term.onResize((size) => {
      if (!pid) {
          return;
      }
      const cols = size.cols;
      const rows = size.rows;
      const url = '/api/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows;

      fetch(url, {method: 'POST', headers: myHeaders});
      term.setOption('theme', curTheme);
      term.setOption('fontFamily', curFont);

mount({state, commit, dispatch, rootState}, {tab, element}) {
      let observer = state.observer
      if (!observer) {
        observer = new ResizeObserver(debounce(() => {
          dispatch('resize')
        }, 250))
        commit('setObserver', observer)
      }
      const settings = rootState.settings.settings
      const xterm = tab.xterm
      xterm.open(element)
      xterm.$.fit = new FitAddon()
      xterm.loadAddon(xterm.$.fit)
      xterm.$.search = new SearchAddon()
      xterm.loadAddon(xterm.$.search)
      xterm.loadAddon(new WebLinksAddon((event, uri) => {
        if (event.altKey) shell.openExternal(uri)
      }))
      if (settings['terminal.style.fontLigatures']) {
        xterm.$.ligatures = new LigaturesAddon()
        xterm.loadAddon(xterm.$.ligatures)
      }
      observer.observe(element)
      xterm.$.fit.fit()
      xterm.focus()
    },
    interact({state, commit}, tab) {

this.terminal = new Terminal(this.props.options);
        const { socket, terminal, container, fitAddon, overlayAddon } = this;
        window.term = terminal as TerminalExtended;
        window.term.fit = () => {
            this.fitAddon.fit();
        };

        socket.binaryType = 'arraybuffer';
        socket.onopen = this.onSocketOpen;
        socket.onmessage = this.onSocketData;
        socket.onclose = this.onSocketClose;
        socket.onerror = this.onSocketError;

        terminal.loadAddon(fitAddon);
        terminal.loadAddon(overlayAddon);
        terminal.loadAddon(new WebLinksAddon());
        terminal.loadAddon(this.zmodemAddon);

        terminal.onTitleChange(data => {
            if (data && data !== '') {
                document.title = data + ' | ' + this.title;
            }
        });
        terminal.onData(this.onTerminalData);
        terminal.onResize(this.onTerminalResize);
        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
            terminal.onSelectionChange(() => {
                if (terminal.getSelection() === '') return;
                overlayAddon.showOverlay('\u2702', 200);
                document.execCommand('copy');
            });
        }

private openTerminal() {
        this.terminal = new Terminal(this.props.termOptions);
        const { terminal, container, fitAddon, overlayAddon } = this;
        window.term = terminal as TtydTerminal;
        window.term.fit = () => {
            this.fitAddon.fit();
        };

        terminal.loadAddon(fitAddon);
        terminal.loadAddon(overlayAddon);
        terminal.loadAddon(new WebLinksAddon());
        terminal.loadAddon(this.zmodemAddon);

        terminal.onTitleChange(data => {
            if (data && data !== '' && !this.titleFixed) {
                document.title = data + ' | ' + this.title;
            }
        });
        terminal.onData(this.onTerminalData);
        terminal.onResize(this.onTerminalResize);
        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
            terminal.onSelectionChange(() => {
                if (terminal.getSelection() === '') return;
                overlayAddon.showOverlay('\u2702', 200);
                document.execCommand('copy');
            });
        }

constructor(elem: HTMLElement) {
        this.elem = elem;
        this.term = new Terminal();
        this.fitAddOn = new FitAddon();
        this.term.loadAddon(new WebLinksAddon());
        this.term.loadAddon(this.fitAddOn);

        this.message = elem.ownerDocument.createElement("div");
        this.message.className = "xterm-overlay";
        this.messageTimeout = 2000;

        this.resizeListener = () => {
            this.fitAddOn.fit();
            this.term.scrollToBottom();
            this.showMessage(String(this.term.cols) + "x" + String(this.term.rows), this.messageTimeout);
        };

        this.term.open(elem);
        this.term.focus();
        this.resizeListener();
        window.addEventListener("resize", () => { this.resizeListener(); });

bindListeners() {
    this.webLinksAddon = new WebLinksAddon((event, uri) => {
      if (document.querySelector('webview')) {
        document.querySelector('webview').remove()
      }

      if (platform({macos: event.metaKey, default: event.ctrlKey})) {
        const webview = document.createElement('webview')
        webview.setAttribute('src', uri)
        document.querySelector('body').append(webview)
      }
    })

    this.xterm.loadAddon(this.webLinksAddon)
    this.xterm.attachCustomKeyEventHandler(this.keybindingHandler)

    ipc.on(`pty-data-${this.id}`, this.writePtyData)
    this.subscriptions.add(new Disposable(() => {

}, opts)

    if (process.platform === 'win32') {
      opts.windowsMode = true
    }

    this.persistentState = {}
    this.persistentState.opts = opts

    if (opts.rendererType === 'webgl') {
      this.isWebgl = true
      opts.rendererType = 'canvas'
    }

    this.terminal = new Terminal(opts)
    const webLinksAddon = new WebLinksAddon((ev, uri) => openExternal(uri))
    this.terminal.loadAddon(webLinksAddon)

    this.searchAddon = new SearchAddon()
    this.terminal.loadAddon(this.searchAddon)

    this.fitAddon = new FitAddon()
    this.terminal.loadAddon(this.fitAddon)

    this.setTitle('Terminal')

    this.classname = ''

    this.enterhandler = (e) => {
      if (!this.ty && e.keyCode == 13) {
        if (this.startRequested) {
          this.startRequested()