Add ctrl-a support for logs (#228)

And prevent double line returns when copying logs
This commit is contained in:
Snarling 2022-11-24 13:04:06 -05:00 committed by GitHub
parent 533d8a4332
commit e17380549d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 4 deletions

@ -97,7 +97,7 @@ export const ANSIITypography = React.memo((props: IProps): React.ReactElement =>
parts.push({ code: null, text: text }); parts.push({ code: null, text: text });
} }
return ( return (
<Typography classes={{ root: lineClass(classes, props.color) }} paragraph={false}> <Typography component={"div"} classes={{ root: lineClass(classes, props.color) }} paragraph={false}>
{parts.map((part, i) => ( {parts.map((part, i) => (
<span key={i} style={ansiCodeStyle(part.code)}> <span key={i} style={ansiCodeStyle(part.code)}>
{part.text} {part.text}

@ -139,6 +139,7 @@ function LogWindow(props: IProps): React.ReactElement {
const [script, setScript] = useState(props.script); const [script, setScript] = useState(props.script);
const classes = useStyles(); const classes = useStyles();
const container = useRef<HTMLDivElement>(null); const container = useRef<HTMLDivElement>(null);
const textArea = useRef<HTMLDivElement>(null);
const setRerender = useState(false)[1]; const setRerender = useState(false)[1];
const [size, setSize] = useState<[number, number]>([500, 500]); const [size, setSize] = useState<[number, number]>([500, 500]);
const [minimized, setMinimized] = useState(false); const [minimized, setMinimized] = useState(false);
@ -146,6 +147,19 @@ function LogWindow(props: IProps): React.ReactElement {
setRerender((old) => !old); setRerender((old) => !old);
} }
const textAreaKeyDown = (e: React.KeyboardEvent) => {
if (e.ctrlKey && e.key === "a") {
if (!textArea.current) return; //Should never happen
const r = new Range();
r.setStartBefore(textArea.current);
r.setEndAfter(textArea.current);
document.getSelection()?.removeAllRanges();
document.getSelection()?.addRange(r);
e.preventDefault();
e.stopPropagation();
}
};
const onResize = (e: React.SyntheticEvent, { size }: ResizeCallbackData) => { const onResize = (e: React.SyntheticEvent, { size }: ResizeCallbackData) => {
setSize([size.width, size.height]); setSize([size.width, size.height]);
}; };
@ -364,15 +378,18 @@ function LogWindow(props: IProps): React.ReactElement {
<Paper <Paper
className={classes.logs} className={classes.logs}
sx={{ height: `calc(100% - ${minConstraints[1]}px)`, display: minimized ? "none" : "flex" }} style={{ height: `calc(100% - ${minConstraints[1]}px)`, display: minimized ? "none" : "flex" }}
tabIndex={-1}
ref={textArea}
onKeyDown={textAreaKeyDown}
> >
<span style={{ display: "flex", flexDirection: "column" }}> <div style={{ display: "flex", flexDirection: "column" }}>
{script.logs.map( {script.logs.map(
(line: string, i: number): JSX.Element => ( (line: string, i: number): JSX.Element => (
<ANSIITypography key={i} text={line} color={lineColor(line)} /> <ANSIITypography key={i} text={line} color={lineColor(line)} />
), ),
)} )}
</span> </div>
</Paper> </Paper>
</> </>
</ResizableBox> </ResizableBox>