Add codemirror editor

apps/docs/components/Playground.js

@@ -12,6 +12,8 @@ import {useEffect, useState, useRef} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {WebContainer} from '@webcontainer/api';
 import {files} from './playground-utils/files';
+import {UnControlled as CodeMirror} from 'react-codemirror2';
+import 'codemirror/mode/javascript/javascript';
 
 async function wcSpawn(instance, ...args) {
   console.log('Running:', args.join(' '));
@@ -74,9 +76,18 @@ export default function Playground() {
 
   return (
     <div {...stylex.props(styles.container)}>
-      <pre {...stylex.props(styles.textarea)}>
+      <CodeMirror
+        {...stylex.props(styles.textarea)}
+        options={{
+          mode: 'javascript',
+          theme: 'material-darker',
+          lineNumbers: true,
+        }}
+        value={files['input.js'].file.contents}
+      />
+      {/* <pre {...stylex.props(styles.textarea)}>
         {files['input.js'].file.contents}
-      </pre>
+      </pre> */}
       <pre {...stylex.props(styles.textarea)}>{output}</pre>
     </div>
   );
@@ -93,6 +104,10 @@ const styles = stylex.create({
     borderBottomColor: 'var(--cyan)',
   },
   textarea: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    justifyContent: 'stretch',
     width: '50%',
     height: '100%',
     borderWidth: 0,

apps/docs/package.json

@@ -26,7 +26,9 @@
     "@stylexjs/stylex": "0.2.0-beta.27",
     "@webcontainer/api": "^1.1.8",
     "clsx": "^1.2.1",
+    "codemirror": "^5.65.16",
     "react": "^17.0.2",
+    "react-codemirror2": "^7.3.0",
     "react-dom": "^17.0.2",
     "react-syntax-highlighter": "^15.5.0"
   },

apps/docs/src/css/custom.css

@@ -13,6 +13,9 @@
  * work well for content-centric websites.
  */
 
+@import 'codemirror/lib/codemirror.css';
+@import 'codemirror/theme/material-darker.css';
+
 /* You can override the default Infima variables here. */
 :root {
   --aa-text-color-rgb: 38, 38, 39;
@@ -247,3 +250,7 @@ html[data-theme='dark'] .navbar-github-link:after {
 .navbar--fixed-top {
   view-transition-name: navbar;
 }
+
+.CodeMirror {
+  height: 100%;
+}