From 6901541fe418ca30c37ac1c5e619c4df3d91d196 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Tue, 23 Jan 2024 21:27:12 -0500
Subject: [PATCH] Start rendering the Org Ast.

---
 src/Editor.css             |  5 -----
 src/Editor.tsx             |  4 ++--
 src/OrgAst.module.css      | 10 ++++++++++
 src/OrgAst.module.css.d.ts |  3 +++
 src/OrgAst.tsx             | 32 ++++++++++++++++++++++++++++++++
 src/index.tsx              |  5 +----
 6 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 src/OrgAst.module.css
 create mode 100644 src/OrgAst.module.css.d.ts
 create mode 100644 src/OrgAst.tsx

diff --git a/src/Editor.css b/src/Editor.css
index d83ef31..a815d2d 100644
--- a/src/Editor.css
+++ b/src/Editor.css
@@ -43,11 +43,6 @@
   outline: none;
 }
 
-.Editor-ast {
-  flex: 1;
-  background: green;
-}
-
 .Editor-underlay {
   width: 100%;
   height: 100%;
diff --git a/src/Editor.tsx b/src/Editor.tsx
index b61c695..2354a54 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -2,10 +2,10 @@ import React, { ReactNode, useState } from "react";
 import "./Editor.css";
 import { Highlight } from "./highlight";
 import { buildShadow } from "./shadow";
+import OrgAst from "./OrgAst";
 
 function Editor({ defaultValue = "I have a text value." }) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    console.log(event.target.value);
     setValue(event.target.value);
   }
 
@@ -41,7 +41,7 @@ function Editor({ defaultValue = "I have a text value." }) {
         />
         <div className="Editor-underlay">{buildShadow(highlights, value)}</div>
       </div>
-      <div className="Editor-ast"></div>
+      <OrgAst addHighlight={addHighlight} value={value} />
     </div>
   );
 }
diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css
new file mode 100644
index 0000000..982caae
--- /dev/null
+++ b/src/OrgAst.module.css
@@ -0,0 +1,10 @@
+.OrgAst {
+  flex: 1;
+  background: green;
+}
+
+.OrgAstNode {
+}
+
+.OrgAstNodeType {
+}
diff --git a/src/OrgAst.module.css.d.ts b/src/OrgAst.module.css.d.ts
new file mode 100644
index 0000000..2a0c813
--- /dev/null
+++ b/src/OrgAst.module.css.d.ts
@@ -0,0 +1,3 @@
+export const OrgAst: string;
+export const OrgAstNode: string;
+export const OrgAstNodeType: string;
diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx
new file mode 100644
index 0000000..6d68b56
--- /dev/null
+++ b/src/OrgAst.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode, useState } from "react";
+import {
+  parse_org,
+} from "../../organic/target/wasm32-unknown-unknown/js/wasm";
+import styles from "./OrgAst.module.css";
+
+const OrgAst = (props: {addHighlight: Function, value: string}) => {
+  console.log(styles);
+  const ast_tree = parse_org(props.value);
+  console.log(JSON.stringify(ast_tree));
+
+  if (ast_tree.status !== "success") {
+    return (
+      <div className={styles.OrgAst}>Error! {ast_tree.content}</div>
+    );
+  } else {
+    return (
+      <div className={styles.OrgAst}><OrgAstNode node={ast_tree.content}/></div>
+    );
+
+  }
+}
+
+const OrgAstNode = (props: {node: any}) => {
+  return (
+    <div className={styles.OrgAstNode}>
+      <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
+    </div>
+  );
+}
+
+export default OrgAst;
diff --git a/src/index.tsx b/src/index.tsx
index 7865e62..45a29f5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,9 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import init, {
-  parse_org,
-} from "../../organic/target/wasm32-unknown-unknown/js/wasm";
+import init from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import App from "./App";
 
 init().then(() => {
-  console.log(parse_org("foo"));
   ReactDOM.render(
     <>
       <App />