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 });
}
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) => (
<span key={i} style={ansiCodeStyle(part.code)}>
{part.text}

@ -139,6 +139,7 @@ function LogWindow(props: IProps): React.ReactElement {
const [script, setScript] = useState(props.script);
const classes = useStyles();
const container = useRef<HTMLDivElement>(null);
const textArea = useRef<HTMLDivElement>(null);
const setRerender = useState(false)[1];
const [size, setSize] = useState<[number, number]>([500, 500]);
const [minimized, setMinimized] = useState(false);
@ -146,6 +147,19 @@ function LogWindow(props: IProps): React.ReactElement {
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) => {
setSize([size.width, size.height]);
};
@ -364,15 +378,18 @@ function LogWindow(props: IProps): React.ReactElement {
<Paper
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(
(line: string, i: number): JSX.Element => (
<ANSIITypography key={i} text={line} color={lineColor(line)} />
),
)}
</span>
</div>
</Paper>
</>
</ResizableBox>