feat(terminal): add button to copy entire terminal content to clipboard

Author: KindaBrazy

src/renderer/src/App/Components/Browser_Terminal/RunningCardView.tsx

@@ -55,10 +55,21 @@ const RunningCardView = ({runningCard}: Props) => {
     }
   }, []);
 
+  const [terminalContent, setTerminalContent] = useState<string>('');
+
   return (
     <>
-      <TopBar webview={webViewRef} isDomReady={isDomReady} runningCard={runningCard} />
-      {isNil(ExtTerminal) ? <Terminal runningCard={runningCard} /> : <ExtTerminal />}
+      <TopBar
+        webview={webViewRef}
+        isDomReady={isDomReady}
+        runningCard={runningCard}
+        terminalContent={terminalContent}
+      />
+      {isNil(ExtTerminal) ? (
+        <Terminal runningCard={runningCard} setTerminalContent={setTerminalContent} />
+      ) : (
+        <ExtTerminal />
+      )}
       {isNil(ExtBrowser) ? (
         <Browser
           webViewRef={webViewRef}

src/renderer/src/App/Components/Browser_Terminal/Terminal/Terminal.tsx

@@ -8,7 +8,7 @@ import {ITheme, IWindowsPty, Terminal as XTerminal} from '@xterm/xterm';
 import {message} from 'antd';
 import FontFaceObserver from 'fontfaceobserver';
 import {isEmpty} from 'lodash';
-import {useCallback, useEffect, useRef, useState} from 'react';
+import {Dispatch, SetStateAction, useCallback, useEffect, useRef, useState} from 'react';
 import {useHotkeys} from 'react-hotkeys-hook';
 import {useDispatch} from 'react-redux';
 
@@ -28,8 +28,8 @@ let resizeTimeout: any;
 
 const FONT_FAMILY = 'JetBrainsMono';
 
-type Props = {runningCard: RunningCard};
-export default function Terminal({runningCard}: Props) {
+type Props = {runningCard: RunningCard; setTerminalContent: Dispatch<SetStateAction<string>>};
+export default function Terminal({runningCard, setTerminalContent}: Props) {
   const activeTab = useTabsState('activeTab');
   const allCards = useAllCards();
 
@@ -104,6 +104,9 @@ export default function Terminal({runningCard}: Props) {
 
   const writeData = useCallback(
     (data: string) => {
+      const xTerminal = terminal.current;
+      if (!xTerminal) return;
+
       if (isEmpty(webUIAddress) && browserBehavior !== 'doNothing') {
         const catchAddress = getCardMethod(allCards, id, 'catchAddress');
         const url = catchAddress?.(data) || '';
@@ -118,9 +121,20 @@ export default function Terminal({runningCard}: Props) {
           }
         }
       }
-      terminal.current?.write(outputColor ? parseTerminalColors(data) : data);
+      xTerminal.write(outputColor ? parseTerminalColors(data) : data);
+
+      let fullText = '';
+      const buffer = xTerminal.buffer.active;
+      for (let i = 0; i < buffer.length; i++) {
+        const line = buffer.getLine(i)?.translateToString(true);
+        if (line) {
+          fullText += line + '\n';
+        }
+      }
+
+      setTerminalContent(fullText);
     },
-    [webUIAddress, id, browserBehavior, outputColor, dispatch, allCards, activeTab],
+    [webUIAddress, id, terminal, browserBehavior, outputColor, dispatch, allCards, activeTab],
   );
 
   const onRightClickRef = useRef<((e: MouseEvent) => void) | null>(null);

src/renderer/src/App/Components/Browser_Terminal/Terminal/Terminal_TopBar.tsx

@@ -1,11 +1,15 @@
+import CopyClipboard from '../../Reusable/CopyClipboard';
 import Terminal_Timer from './Terminal_Timer';
 
-type Props = {startTime: string};
-export default function Terminal_TopBar({startTime}: Props) {
+type Props = {startTime: string; terminalContent: string};
+export default function Terminal_TopBar({startTime, terminalContent}: Props) {
   return (
     <>
-      <Terminal_Timer startTime={startTime} />
-      <div></div>
+      <div className="flex flex-row h-full items-center gap-x-1">
+        <Terminal_Timer startTime={startTime} />
+        <CopyClipboard showTooltip={false} contentToCopy={terminalContent} />
+      </div>
+      <div className="flex flex-row h-full items-center gap-x-1"></div>
     </>
   );
 }

src/renderer/src/App/Components/Browser_Terminal/TopBar/TopBar.tsx

@@ -5,17 +5,17 @@ import Browser_TopBar from '../Browser/Browser_TopBar';
 import Terminal_TopBar from '../Terminal/Terminal_TopBar';
 import SwitchAndTerminate from './SwitchAndTerminate';
 
-type Props = {webview: WebviewTag | null; isDomReady: boolean; runningCard: RunningCard};
+type Props = {webview: WebviewTag | null; isDomReady: boolean; runningCard: RunningCard; terminalContent: string};
 
-export default function TopBar({runningCard, isDomReady, webview}: Props) {
+export default function TopBar({runningCard, isDomReady, webview, terminalContent}: Props) {
   return (
     <div
       className={
         'h-10 inset-x-0 top-0 absolute bg-white dark:bg-LynxRaisinBlack' +
         ' flex flex-row gap-x-1 px-2 py-1 items-center justify-between'
       }>
       {runningCard.currentView === 'terminal' ? (
-        <Terminal_TopBar startTime={runningCard.startTime} />
+        <Terminal_TopBar terminalContent={terminalContent} startTime={runningCard.startTime} />
       ) : (
         <Browser_TopBar webview={webview} isDomReady={isDomReady} runningCard={runningCard} />
       )}