adds terminal search support (getcursor#395)

package.json

@@ -172,6 +172,7 @@
         "watcher": "^2.2.2",
         "webpack": "^5.75.0",
         "xterm": "^4.19.0",
+        "xterm-addon-search": "^0.9.0",
         "xterm-addon-web-links": "^0.6.0"
     }
 }

src/components/terminal.tsx

@@ -2,16 +2,19 @@ import React, { useEffect, useRef } from 'react'
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import { WebLinksAddon } from 'xterm-addon-web-links'
+import { SearchAddon } from 'xterm-addon-search'
 import 'xterm/css/xterm.css'
 import { useAppDispatch, useAppSelector } from '../app/hooks'
 import { FullState } from '../features/window/state'
 import * as gs from '../features/globalSlice'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { throttleCallback } from './componentUtils'
+import { faChevronDown, faChevronUp } from '@fortawesome/pro-regular-svg-icons'
 
 export function XTermComponent({ height }: { height: number }) {
     const terminalRef = useRef<HTMLDivElement>(null)
+    const searchBarInputRef = useRef<HTMLInputElement>(null)
     const terminal = useRef<Terminal | null>(null)
     const fitAddon = useRef<FitAddon>(new FitAddon())
     const webLinksAddon = useRef<WebLinksAddon>(
@@ -20,6 +23,8 @@ export function XTermComponent({ height }: { height: number }) {
             connector.terminalClickLink(url)
         })
     )
+    const searchAddon = useRef<SearchAddon>(new SearchAddon())
+    const [searchBarOpen, setSearchBarOpen] = React.useState(false)
 
     const handleIncomingData = (e: any, data: any) => {
         terminal.current!.write(data)
@@ -38,6 +43,7 @@ export function XTermComponent({ height }: { height: number }) {
 
         terminal.current.loadAddon(fitAddon.current)
         terminal.current.loadAddon(webLinksAddon.current)
+        terminal.current.loadAddon(searchAddon.current)
 
         if (terminalRef.current) {
             terminal.current.open(terminalRef.current)
@@ -49,6 +55,17 @@ export function XTermComponent({ height }: { height: number }) {
             connector.terminalInto(e)
         })
 
+        terminal.current.attachCustomKeyEventHandler((e) => {
+            if (e.ctrlKey && e.key === 'f') {
+                openSearchBar()
+                return false
+            } else if (e.key === 'Escape') {
+                closeSearchBar()
+                return false
+            }
+            return true
+        })
+
         connector.registerIncData(handleIncomingData)
 
         // Make the terminal's size and geometry fit the size of #terminal-container
@@ -68,12 +85,77 @@ export function XTermComponent({ height }: { height: number }) {
         }
     }, [height, terminal, fitAddon])
 
+    const openSearchBar = () => {
+        setSearchBarOpen(true)
+        searchBarInputRef.current?.focus()
+    }
+
+    const closeSearchBar = () => {
+        setSearchBarOpen(false)
+        terminal.current?.focus()
+    }
+
+    const findNextSearchResult = () => {
+        if (searchBarInputRef.current?.value) {
+            searchAddon.current.findNext(searchBarInputRef.current.value)
+        }
+    }
+
+    const findPreviousSearchResult = () => {
+        if (searchBarInputRef.current?.value) {
+            searchAddon.current.findPrevious(searchBarInputRef.current.value)
+        }
+    }
+
     return (
         <div
             className="terminalInnerContainer"
             ref={terminalRef}
-            style={{ height: height + 'px' }}
-        ></div>
+            style={{ height: height + 'px', position: 'relative' }}
+        >
+            {searchBarOpen && (
+                <div
+                    className="search-input flex justify-end absolute top-1 right-4 z-10 md:w-80"
+                    onKeyDown={(e) => {
+                        if (e.key === 'Escape') {
+                            closeSearchBar()
+                        }
+                    }}
+                >
+                    <input
+                        className="search-input w-full"
+                        placeholder="Search..."
+                        autoFocus
+                        ref={searchBarInputRef}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                                findNextSearchResult()
+                            }
+                        }}
+                    />
+                    <div className="flex">
+                        <button
+                            className="icon"
+                            onClick={() => findPreviousSearchResult()}
+                        >
+                            <FontAwesomeIcon icon={faChevronUp} />
+                        </button>
+                        <button
+                            className="icon"
+                            onClick={() => findNextSearchResult()}
+                        >
+                            <FontAwesomeIcon icon={faChevronDown} />
+                        </button>
+                        <button
+                            className="icon"
+                            onClick={() => closeSearchBar()}
+                        >
+                            <FontAwesomeIcon icon={faTimes} />
+                        </button>
+                    </div>
+                </div>
+            )}
+        </div>
     )
 }
 export const BottomTerminal: React.FC = () => {

src/index.css

@@ -1517,6 +1517,13 @@ cm-diff-cancel > div {
     padding: 12px;
 }
 
+.search-input {
+    border-radius: 5px;
+    background-color: var(--input-background);
+    color: var(--input-text);
+    padding: 4px;
+}
+
 /* .cm-diagnostic {
   display: block;
   word-break: keep-all;
@@ -2416,6 +2423,14 @@ free servers .disabled_command .shortcut__block {
     align-items: center;
 }
 
+.terminalInnerContainer .icon {
+    color: #bbb;
+    font-size: 18px;
+    margin: auto;
+    width: 24px;
+    height: 24px;
+}
+
 .terminalTitle {
     color: #bbb;
     flex-grow: 1;
@@ -2567,4 +2582,4 @@ free servers .disabled_command .shortcut__block {
 
 .markdownpopup p {
     margin: 12px 0px;
-}
+}