Terminal: keybinding and context menu for copy & select all

datho7561 · datho7561 · commit 24e4830f9865 · 2023-09-29T13:07:29.000-04:00
Adds the following keybindings to the OpenShift terminal: - `Ctrl+Shift+C`: copy selection - `Ctrl+Shift+A`: select all text Hide the existing broken context menu (provided by VS Code) and replace it with one with "Select All" and "Copy" items that actually work. This context menu imitates the style of VS Code's context menu. Closes #3353, closes #3137 Signed-off-by: David Thompson <davthomp@redhat.com>
diff --git a/src/webview/common/vscode-theme.ts b/src/webview/common/vscode-theme.ts
@@ -93,6 +93,7 @@ export function createVSCodeTheme(paletteMode: PaletteMode): Theme {
                             variant: 'body1',
                         },
                         style: {
+                            fontSize: '0.9em',
                             color: computedStyle.getPropertyValue('--vscode-foreground'),
                         },
                     },
diff --git a/src/webview/openshift-terminal/app/terminalInstance.tsx b/src/webview/openshift-terminal/app/terminalInstance.tsx
@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 
-import { Box } from '@mui/material';
+import { Box, Button, Paper, Stack, Typography } from '@mui/material';
 import React from 'react';
 import { VSCodeMessage } from './vscodeMessage';
 import { Terminal, ITheme } from 'xterm';
@@ -13,6 +13,75 @@ import { WebglAddon } from 'xterm-addon-webgl';
 import 'xterm/css/xterm.css';
 import '../../common/scrollbar.scss';
 
+/**
+ * Clone of VS Code's context menu with "Copy" and "Select All" items.
+ */
+const TerminalContextMenu = (props: {
+    onCopyHandler: React.MouseEventHandler<HTMLButtonElement>;
+    onSelectAllHandler: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+    return (
+        <Paper
+            variant="outlined"
+            sx={{
+                borderRadius: '6px',
+                backgroundColor: 'var(--vscode-editor-background)',
+                borderColor: 'var(--vscode-menu-border)',
+                boxShadow: '0px 0px 8px var(--vscode-widget-shadow)',
+            }}
+        >
+            <Stack direction="column" minWidth="200px" marginX="4px" marginY="3px">
+                <Button
+                    variant="text"
+                    onClick={props.onCopyHandler}
+                    sx={{
+                        width: '100%',
+                        textTransform: 'none',
+                        '&:hover': {
+                            backgroundColor:
+                                'color-mix(in srgb, var(--vscode-button-background) 50%, black)',
+                        },
+                        paddingY: '4px',
+                    }}
+                >
+                    <Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        marginX="13px"
+                        style={{ width: '100%' }}
+                    >
+                        <Typography variant="body1">Copy</Typography>
+                        <Typography variant="body1">Ctrl+Shift+C</Typography>
+                    </Stack>
+                </Button>
+                <Button
+                    variant="text"
+                    onClick={props.onSelectAllHandler}
+                    sx={{
+                        width: '100%',
+                        textTransform: 'none',
+                        '&:hover': {
+                            backgroundColor:
+                                'color-mix(in srgb, var(--vscode-button-background) 50%, black)',
+                        },
+                        paddingY: '4px',
+                    }}
+                >
+                    <Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        marginX="13px"
+                        style={{ width: '100%' }}
+                    >
+                        <Typography variant="body1">Select All</Typography>
+                        <Typography variant="body1">Ctrl+Shift+A</Typography>
+                    </Stack>
+                </Button>
+            </Stack>
+        </Paper>
+    );
+};
+
 /**
  * Represents a tab in the terminal view. Wraps an instance of xtermjs.
  */
@@ -24,6 +93,34 @@ export const TerminalInstance = (props: {
     // Represents a reference to a div where the xtermjs instance is being rendered
     const termRef = React.useRef(null);
 
+    const [isContextMenuOpen, setContextMenuOpen] = React.useState(false);
+    const contextMenuRef = React.useRef(null);
+
+    const handleContextMenu = (event) => {
+        event.preventDefault();
+        setContextMenuOpen(true);
+        const { pageX, pageY } = event;
+        contextMenuRef.current.style.left = `${pageX}px`;
+        contextMenuRef.current.style.top = `${pageY}px`;
+
+        // Close the context menu when clicking outside of it
+        const handleOutsideClick = () => {
+            setContextMenuOpen(false);
+        };
+
+        document.addEventListener('click', handleOutsideClick);
+    };
+
+    const handleCopy = () => {
+        void navigator.clipboard.writeText(term.getSelection());
+        setContextMenuOpen(false);
+    };
+
+    const handleSelectAll = () => {
+        term.selectAll();
+        setContextMenuOpen(false);
+    };
+
     // The xtermjs addon that can be used to resize the terminal according to the size of the div
     const fitAddon = React.useMemo(() => {
         return new FitAddon();
@@ -35,9 +132,36 @@ export const TerminalInstance = (props: {
         newTerm.loadAddon(new WebLinksAddon());
         newTerm.loadAddon(new WebglAddon());
         newTerm.loadAddon(fitAddon);
+        newTerm.attachCustomKeyEventHandler((keyboardEvent: KeyboardEvent) => {
+            // Copy/Paste/Select All keybinding handlers
+            if (keyboardEvent.shiftKey && keyboardEvent.ctrlKey) {
+                // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values
+                if (keyboardEvent.code === 'KeyC' && term.hasSelection) {
+                    // Ctrl+Shift+C copies
+                    void navigator.clipboard.writeText(term.getSelection());
+                    keyboardEvent.stopPropagation();
+                    return false;
+                } else if (keyboardEvent.code === 'KeyA') {
+                    // Ctrl+Shift+A selects all
+                    term.selectAll();
+                    keyboardEvent.stopPropagation();
+                    return false;
+                }
+            }
+
+            return true;
+        });
         return newTerm;
     });
 
+    React.useEffect(() => {
+        const contextMenuListener = (event) => {
+            event.preventDefault();
+        };
+        window.addEventListener('contextmenu', contextMenuListener);
+        return window.removeEventListener('contextmenu', contextMenuListener);
+    });
+
     let resizeTimeout: NodeJS.Timeout = undefined;
 
     const setXtermjsTheme = (fontFamily: string, fontSize: number) => {
@@ -175,7 +299,7 @@ export const TerminalInstance = (props: {
             },
         });
         fitAddon.fit();
-    }
+    };
 
     const handleResize = function (_e: UIEvent) {
         if (resizeTimeout) {
@@ -193,10 +317,36 @@ export const TerminalInstance = (props: {
     }, [fitAddon]);
 
     return (
-        <Box marginY="8px" marginX="16px" width="100%" height="100%" overflow='scroll'>
+        <Box
+            onContextMenu={handleContextMenu}
+            marginY="8px"
+            marginX="16px"
+            width="100%"
+            height="100%"
+            overflow="scroll"
+        >
+            <div
+                style={{
+                    zIndex: 1000,
+                    position: 'absolute',
+                    display: isContextMenuOpen ? 'block' : 'none',
+                }}
+                ref={contextMenuRef}
+            >
+                <TerminalContextMenu
+                    onCopyHandler={handleCopy}
+                    onSelectAllHandler={handleSelectAll}
+                />
+            </div>
             <div
                 {...{ name: 'terminal-instance' }}
-                style={{ width: '100%', height: '100%', display: 'flex', flexFlow: 'column', overflow: 'hidden' }}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    flexFlow: 'column',
+                    overflow: 'hidden',
+                }}
                 ref={termRef}
             ></div>
         </Box>
diff --git a/src/webview/openshift-terminal/app/terminalMultiplexer.tsx b/src/webview/openshift-terminal/app/terminalMultiplexer.tsx
@@ -3,24 +3,24 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 
+import CloseIcon from '@mui/icons-material/Close';
+import TerminalIcon from '@mui/icons-material/Terminal';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import {
-    PaletteMode,
-    createTheme,
-    SvgIcon,
-    Typography,
     Box,
+    PaletteMode,
     Stack,
-    styled,
+    SvgIcon,
     Tab,
-    ThemeProvider
+    ThemeProvider,
+    Typography,
+    styled
 } from '@mui/material';
 import React from 'react';
-import { VSCodeMessage } from './vscodeMessage';
 import OpenShiftIcon from '../../../../images/openshift_view.svg';
+import { createVSCodeTheme } from '../../common/vscode-theme';
 import { TerminalInstance } from './terminalInstance';
-import CloseIcon from '@mui/icons-material/Close';
-import TerminalIcon from '@mui/icons-material/Terminal';
+import { VSCodeMessage } from './vscodeMessage';
 
 /**
  * Represents the label for the tab that's used in the list of tabs.
@@ -75,11 +75,7 @@ export const TerminalMultiplexer = () => {
     // represents the Material UI theme currently being used by this webview
     const theme = React.useMemo(
         () =>
-            createTheme({
-                palette: {
-                    mode: themeKind,
-                },
-            }),
+            createVSCodeTheme(themeKind),
         [themeKind],
     );
 
