Simplify grid, add CodeMirror

Author: kddnewton

.gitignore

@@ -1,6 +1,5 @@
 # Ignore everything in the output docs directory controlled by the build system.
 /docs/
-!/docs/index.css
 !/docs/index.html
 
 # Ignore everything to do with building the app.wasm file.

package.json

@@ -7,12 +7,14 @@
   "dependencies": {
     "@wasmer/wasi": "^0.12.0",
     "@wasmer/wasmfs": "^0.12.0",
+    "codemirror": "^5.65.3",
     "path-browserify": "^1.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "ruby-head-wasm-wasi": "^0.3.0"
   },
   "devDependencies": {
+    "@types/codemirror": "^5.60.5",
     "@types/node": "^17.0.27",
     "@types/path-browserify": "^1.0.0",
     "@types/react": "^18.0.6",

src/Editor.tsx

@@ -1,17 +1,37 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+import CodeMirror from "codemirror";
+
+import "codemirror/mode/ruby/ruby";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/xq-light.css";
 
 type EditorProps = {
-  cols: number,
   value: string,
   onChange: (value: string) => void
 };
 
-const Editor: React.FC<EditorProps> = ({ cols, value, onChange }) => {
-  const onSourceChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(event.target.value);
-  };
+const Editor: React.FC<EditorProps> = ({ value, onChange }) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<CodeMirror.Editor>(null);
+
+  useEffect(() => {
+    if (elementRef.current && !editorRef.current) {
+      const editor = CodeMirror(elementRef.current, {
+        lineNumbers: true,
+        mode: "ruby",
+        value,
+        theme: "xq-light"
+      });
+
+      editor.on("change", () => {
+        onChange(editor.getDoc().getValue());
+      });
+
+      editorRef.current = editor;
+    }
+  });
 
-  return <textarea cols={cols} value={value} onChange={onSourceChange} />;
+  return <div ref={elementRef} />;
 };
 
 export default Editor;

src/Tree.tsx

@@ -26,11 +26,10 @@ function prettyPrint(ruby: Ruby, value: string) {
 }
 
 type TreeProps = {
-  cols: number,
   value: string
 };
 
-const Tree: React.FC<TreeProps> = ({ cols, value }) => {
+const Tree: React.FC<TreeProps> = ({ value }) => {
   const [output, setOutput] = useState<string>(() => prettyPrint(ruby, value));
 
   useEffect(() => {
@@ -55,8 +54,8 @@ const Tree: React.FC<TreeProps> = ({ cols, value }) => {
 
   return (
     <textarea
-      className={rubyState != "ready" ? "loading" : ""}
-      cols={cols}
+      cols={80}
+      disabled={rubyState != "ready"}
       value={output}
       readOnly
     />

docs/index.css renamed to src/index.css

@@ -6,17 +6,20 @@ html, body {
 }
 
 #root {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   height: 100%;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
 nav {
   background-color: #fafafa;
   box-shadow: 0 1px 2px 0 #888;
   box-sizing: border-box;
   display: flex;
+  grid-column: 1 / span 2;
   padding: 0.5em;
+  z-index: 1;
 }
 
 nav h1 {
@@ -33,20 +36,6 @@ nav h1, nav a {
   padding: 0 1em;
 }
 
-main {
-  box-sizing: border-box;
-  display: flex;
-  gap: 0.5em;
-  height: 100%;
-  padding: 0.5em;
-}
-
-textarea {
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-}
-
-.loading {
-  color: #ccc;
+.CodeMirror {
+  height: 100% !important;
 }

src/index.tsx

@@ -2,20 +2,33 @@ import React, { Suspense, useState } from "react";
 import { createRoot } from "react-dom/client";
 
 import initialSource from "./initialSource";
-import Editor from "./Editor";
+const Editor = React.lazy(() => import("./Editor"));
 const Tree = React.lazy(() => import("./Tree"));
 
-type TreeFallbackProps = {
-  cols: number
+import "./index.css";
+
+// type TreeProps = { value: string };
+// const Tree: React.FC<TreeProps> = () => <textarea disabled readOnly value="Hello, world!" />;
+
+type EditorFallbackProps = {
+  value: string,
+  onChange: (value: string) => void
+};
+
+const EditorFallback: React.FC<EditorFallbackProps> = ({ value, onChange }) => {
+  const onValueChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(event.target.value);
+  };
+
+  return <textarea value={value} onChange={onValueChange} />;
 };
 
-const TreeFallback: React.FC<TreeFallbackProps> = ({ cols }) => (
-  <textarea className="loading" cols={cols} readOnly>Loading...</textarea>
+const TreeFallback: React.FC = () => (
+  <textarea disabled readOnly value="Loading..." />
 );
 
 const App: React.FC = () => {
   const [source, setSource] = useState<string>(initialSource);
-  const cols = 80;
 
   return (
     <>
@@ -24,12 +37,12 @@ const App: React.FC = () => {
         <a href="https://ruby-syntax-tree.github.io/syntax_tree">Docs</a>
         <a href="https://github.com/ruby-syntax-tree/syntax_tree">Source</a>
       </nav>
-      <main>
-        <Editor cols={cols} value={source} onChange={setSource} />
-        <Suspense fallback={<TreeFallback cols={cols} />}>
-          <Tree cols={cols} value={source} />
-        </Suspense>
-      </main>
+      <Suspense fallback={<EditorFallback value={source} onChange={setSource} />}>
+        <Editor value={source} onChange={setSource} />
+      </Suspense>
+      <Suspense fallback={<TreeFallback />}>
+        <Tree value={source} />
+      </Suspense>
     </>
   );
 };

yarn.lock

@@ -2,6 +2,18 @@
 # yarn lockfile v1
 
 
+"@types/codemirror@^5.60.5":
+  version "5.60.5"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
+  integrity sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==
+  dependencies:
+    "@types/tern" "*"
+
+"@types/estree@*":
+  version "0.0.51"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
+  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+
 "@types/node@^17.0.27":
   version "17.0.27"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.27.tgz#f4df3981ae8268c066e8f49995639f855469081e"
@@ -38,6 +50,13 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/tern@*":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
+  integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
+  dependencies:
+    "@types/estree" "*"
+
 "@wasmer/wasi@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@wasmer/wasi/-/wasi-0.12.0.tgz#89c7c5e5ba58f7dfae4e323359346639c4ec382a"
@@ -89,6 +108,11 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
+codemirror@^5.65.3:
+  version "5.65.3"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.3.tgz#2d029930d5a293bc5fb96ceea64654803c0d4ac7"
+  integrity sha512-kCC0iwGZOVZXHEKW3NDTObvM7pTIyowjty4BUqeREROc/3I6bWbgZDA3fGDwlA+rbgRjvnRnfqs9SfXynel1AQ==
+
 csstype@^3.0.2:
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"