From 41d4129cced7b57bae14ddcaea95c35a97d38862 Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sat, 27 Jan 2024 13:06:05 -0500
Subject: [PATCH] Improve the starting text for the editor.

---
 src/Editor.css        |  2 +-
 src/Editor.tsx        | 18 +++++++++++++++++-
 src/OrgAst.module.css |  3 ++-
 src/index.tsx         | 15 ++++++---------
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/Editor.css b/src/Editor.css
index a815d2d..6cc0b50 100644
--- a/src/Editor.css
+++ b/src/Editor.css
@@ -13,7 +13,7 @@
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
     "DejaVu Sans Mono", monospace;
   font-weight: normal;
-  font-size: 3rem;
+  font-size: 1.3rem;
   text-align: initial;
 }
 
diff --git a/src/Editor.tsx b/src/Editor.tsx
index b9d44ec..789ff54 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -4,7 +4,23 @@ import { Highlight } from "./highlight";
 import { buildShadow } from "./shadow";
 import OrgAst from "./OrgAst";
 
-function Editor({ defaultValue = "I have a text value." }) {
+const default_org_source: string = `Welcome to the Organic Wasm Demo!
+
+Type your Org [fn:1] source in this text box, and it will be parsed by Organic [fn:2] that has been compiled into wasm and embedded in this page. The resulting AST will be rendered to the right.
+
+In the AST on the right, you can:
+
+1. Click on an AST node to highlight the corresponding portion of the Org source on the left.
+2. Expand/Collapse the children, properties, and standard properties.
+
+* Footnotes
+
+[fn:1] https://orgmode.org/
+
+[fn:2] https://code.fizz.buzz/talexander/organic
+`;
+
+function Editor({ defaultValue = default_org_source }) {
   function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
     setValue(event.target.value);
   }
diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css
index 5e5d048..3bd9635 100644
--- a/src/OrgAst.module.css
+++ b/src/OrgAst.module.css
@@ -30,7 +30,7 @@
 }
 
 .OrgAstNodeType {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-weight: 700;
   background: #6ccff6;
   padding: 3px;
@@ -38,4 +38,5 @@
 
 .OrgAstChildren {
   padding: 5px 5px 5px 20px;
+  background: #eeeeee;
 }
diff --git a/src/index.tsx b/src/index.tsx
index 45a29f5..4fcf454 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import init from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import App from "./App";
 
-init().then(() => {
-  ReactDOM.render(
-    <>
-      <App />
-    </>,
-    document.getElementById("root"),
-  );
-});
+ReactDOM.render(
+  <>
+    <App />
+  </>,
+  document.getElementById("root"),
+);