Function initTerminalWindow

frontend/src/hooks/useTerminal.ts:230–336

(element: HTMLElement)

  };

  const initTerminalWindow = (element: HTMLElement) => {
    if (terminal.value) {
      throw new Error("Terminal already initialized, Please refresh the page!");
    }

    // init touch handler
    element.addEventListener("touchstart", touchHandler, true);
    element.addEventListener("touchmove", touchHandler, true);
    element.addEventListener("touchend", touchHandler, true);
    element.addEventListener("touchcancel", touchHandler, true);

    const background = hasBgImage.value ? "#00000000" : "#1e1e1e";
    const term = new Terminal({
      convertEol: true,
      disableStdin: false,
      cursorStyle: "underline",
      cursorBlink: true,
      fontSize: 14,
      theme: {
        background
      },
      allowProposedApi: true,
      allowTransparency: true
    });
    const fitAddon = new FitAddon();
    term.loadAddon(fitAddon);

    const unicode11Addon = new Unicode11Addon();
    term.loadAddon(unicode11Addon);
    term.unicode.activeVersion = "11";

    terminal.value = term;

    const gl = document.createElement("canvas").getContext("webgl2");
    if (gl) {
      // If WebGL2 is supported, use the WebGlAddon
      const webglAddon = new WebglAddon();
      webglAddon.onContextLoss((_) => {
        webglAddon.dispose();
      });
      term.loadAddon(webglAddon);
    } else {
      // If WebGL2 is not supported, use the CanvasAddon
      const canvasAddon = new CanvasAddon();
      term.loadAddon(canvasAddon);
    }

    term.open(element);

    // If text is selected, copy it. Otherwise, fallback to default behavior.
    term.attachCustomKeyEventHandler((arg) => {
      if (arg.type === "keydown" && arg.ctrlKey && arg.code === "KeyC") {
        const selection = term.getSelection();
        if (selection) {
          arg.preventDefault();
          toCopy(selection);
          term.clearSelection();
          return false;