UI: Enable right click to paste in terminal

[SmartManoj]

All-Hands-AI#3162

[SmartManoj]

@CodiumAI-Agent /review

[CodiumAI-Agent]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Error Handling The new event listener for 'contextmenu' lacks error handling for the clipboard read operation. Consider adding a catch block for potential failures of navigator.clipboard.readText(). Performance Concern Adding an event listener inside a hook without cleanup could lead to memory leaks or multiple instances of the same listener if the component re-renders. Ensure to remove the event listener in a cleanup function. Logic Error The condition if (!cleanedCommand) return; prevents sending empty commands, which might be necessary in some cases (e.g., to signal a stop). Verify if this change in logic aligns with the intended use cases.

[SmartManoj]

@CodiumAI-Agent /ask

Adding an event listener inside a hook without cleanup could lead to memory leaks or multiple instances of the same listener if the component re-renders. Ensure to remove the event listener in a cleanup function.

attachCustomKeyEventHandler also there.

[CodiumAI-Agent]

Ask❓

Adding an event listener inside a hook without cleanup could lead to memory leaks or multiple instances of the same listener if the component re-renders. Ensure to remove the event listener in a cleanup function. attachCustomKeyEventHandler also there.

Answer:

You are correct. Adding an event listener inside a hook without proper cleanup can lead to memory leaks or multiple instances of the same listener if the component re-renders. To address this, we should ensure that the event listener is removed when the component unmounts or when the hook is re-invoked. Here is an updated version of the useTerminal hook with the necessary cleanup:

import { useEffect, useRef } from 'react';

export const useTerminal = (commands: Command[] = []) => {
  const terminal = useRef<any>(null);
  const fitAddon = useRef<any>(null);
  let commandBuffer = '';

  useEffect(() => {
    const handleContextMenu = (e: MouseEvent) => {
      e.preventDefault();
      navigator.clipboard.readText().then((text) => {
        terminal.current?.write(text);
        commandBuffer += text;
      });
    };

    const terminalElement = terminal.current?.element;
    if (terminalElement) {
      terminalElement.addEventListener('contextmenu', handleContextMenu);
    }

    return () => {
      if (terminalElement) {
        terminalElement.removeEventListener('contextmenu', handleContextMenu);
      }
    };
  }, [terminal]);

  // Other hook logic...

  return {
    // Return values...
  };
};

In this updated version, we define the handleContextMenu function inside the useEffect hook and add it as an event listener to the terminal element. We also ensure to remove the event listener in the cleanup function returned by useEffect. This will prevent memory leaks and ensure that only one instance of the event listener is active at any time.