fix up terminal layout

package.json

@@ -21,7 +21,7 @@
         "react-dropzone": "^10.2.2",
         "react-scripts": "3.4.1",
         "typescript": "~3.7.2",
-        "xterm": "^4.4.0"
+        "xterm": "^4.5.0"
     },
     "scripts": {
         "prepare": "mkdir -p public/static/js && cp node_modules/@pybricks/mpy-cross/build-wasm/mpy-cross.wasm public/static/js/",

src/components/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Editor from './Editor';
 import Toolbar from './Toolbar';
+import Terminal from './Terminal';
 import Container from 'react-bootstrap/Container';
 
 function App(): JSX.Element {
@@ -8,6 +9,7 @@ function App(): JSX.Element {
         <Container fluid>
             <Toolbar />
             <Editor />
+            <Terminal />
         </Container>
     );
 }

src/components/Terminal.tsx

@@ -1,40 +1,50 @@
 import React from 'react';
-import { Terminal } from 'xterm';
+import { Terminal as XTerm } from 'xterm';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
 
-const encoder = new TextEncoder();
+import 'xterm/css/xterm.css';
 
-type TerminalProps = {
-    onData: (data: Uint8Array) => void;
-};
-
-export default class TerminalComponent extends React.Component<TerminalProps> {
-    private term: Terminal;
+class Terminal extends React.Component {
+    private xterm: XTerm;
     private terminalRef: React.RefObject<HTMLDivElement>;
 
-    constructor(props: TerminalProps) {
+    constructor(props: {}) {
         super(props);
-        this.term = new Terminal();
+        this.xterm = new XTerm({
+            cursorBlink: true,
+            cursorStyle: 'underline',
+            fontSize: 18,
+            rows: 8,
+            theme: {
+                background: 'white',
+                foreground: 'black',
+                cursor: 'black',
+                // transparency is needed to work around https://github.com/xtermjs/xterm.js/issues/2808
+                selection: 'rgba(181,213,255,0.5)', // this should match AceEditor theme
+            },
+        });
+        this.xterm.onData((data) => this.xterm.write(data));
         this.terminalRef = React.createRef();
-        this.term.onData((data) => this.props.onData(encoder.encode(data)));
-    }
-
-    public write(data: Uint8Array): void {
-        this.term.write(data);
     }
 
     componentDidMount(): void {
         if (!this.terminalRef.current) {
+            console.error('Missing terminal reference');
             return;
         }
-        this.term.open(this.terminalRef.current);
+        this.xterm.open(this.terminalRef.current);
     }
 
     render(): JSX.Element {
         return (
-            <div>
-                <div id="terminal" ref={this.terminalRef}></div>
-            </div>
+            <Row className="px-2 py-4 bg-secondary">
+                <Col>
+                    <div id="terminal" ref={this.terminalRef}></div>
+                </Col>
+            </Row>
         );
     }
 }
-export { TerminalComponent as Terminal };
+
+export default Terminal;

yarn.lock

@@ -12491,10 +12491,10 @@ xtend@^4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-xterm@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.4.0.tgz#5915d3c4c8800fadbcf555a0a603c672ab9df589"
-  integrity sha512-JGIpigWM3EBWvnS3rtBuefkiToIILSK1HYMXy4BCsUpO+O4UeeV+/U1AdAXgCB6qJrnPNb7yLgBsVCQUNMteig==
+xterm@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.5.0.tgz#c7fd145c6cf91c9f2ef07011a9b35026cf4bfecc"
+  integrity sha512-4t12tsvtYnv13FBJwewddxdI/j4kSonmbQQv50j34R/rPIFbUNGtptbprmuUlTDAKvHLMDZ/Np2XcpNimga/HQ==
 
 y18n@^3.2.1:
   version "3.2.1"