Allow editing card text (temporary)

src/3x5.ts

@@ -1,7 +1,7 @@
-import { ALL as HTML } from './lib/html';
-import { parse } from './parser';
-import { runNoctl, Vm } from './vm';
-import { AsHtml } from './words';
+import { ALL as HTML } from "./lib/html";
+import { parse } from "./parser";
+import { runNoctl, Vm } from "./vm";
+import { AsHtml } from "./words";
 
 /**
  * Basic unit of information, also an "actor" in the programming system
@@ -36,53 +36,68 @@ function renderCard(state: Vm, code: string) {
 let theCard: Card = {
   id: 100,
   fields: {},
-  code: String.raw`
-    h1 "Hello, World!"
-    para [2 + 2]
-    block {
-        This is a paragraph of text, with one [b bold] word. Yes, this means there has to be some magic in text processing... <b>this</b> won't work.
-    }
-    block -red "Beware!"
-    para "All text should be quoted, it's clearer that way. & blockquotes already should contain paragraphs. (maybe normalize nested paragraphs)"
-    block {
-        First block
-    } {
-        Second block
-
-        Is this markdown-parsed?
-
-        [button "No we want to render UI" \\{noop}]
-    } {
-      Since we want escapes to work, these blocks [i will] be subject to substitutions, maybe via a relaxed bareWordTmpl.
-    } 
-    # A comment
-    para {
-      line endings escaped\
-      one slash
-
-      not escaped if \\
-      two slashes
-
-      escaped with a slash if \\\
-      three slashes
-
-      not escaped with two slashes if \\\\
-      four slashes
-
-      escaped with two slashes if \\\\\
-      five slashes
-
-      not escaped with three slashes if \\\\\\
-      six slashes
-    }
-  `,
+  code: "",
 };
 
+const TEXTAREA_STYLE: Partial<CSSStyleDeclaration> = {
+  display: "block",
+  width: "100%",
+};
+
+const codeInput = document.createElement("textarea");
+Object.assign(codeInput.style, TEXTAREA_STYLE, { height: "20em" });
+codeInput.value = String.raw`
+h1 "Hello, World!"
+para [2 + 2]
+block {
+    This is a paragraph of text, with one [b bold] word. Yes, this means there has to be some magic in text processing... <b>this</b> won't work.
+}
+block -red "Beware!"
+para "All text should be quoted, it's clearer that way. & blockquotes already should contain paragraphs. (maybe normalize nested paragraphs)"
+block {
+    First block
+} {
+    Second block
+
+    Is this markdown-parsed?
+
+    [button "No we want to render UI" \\{noop}]
+} {
+  Since we want escapes to work, these blocks [i will] be subject to substitutions, maybe via a relaxed bareWordTmpl.
+} 
+# A comment
+para {
+  line endings escaped\
+  one slash
+
+  not escaped if \\
+  two slashes
+
+  escaped with a slash if \\\
+  three slashes
+
+  not escaped with two slashes if \\\\
+  four slashes
+
+  escaped with two slashes if \\\\\
+  five slashes
+
+  not escaped with three slashes if \\\\\\
+  six slashes
+}
+`.trim();
+
+const rerender = Object.assign(document.createElement("button"), {
+  onclick: () => render(),
+  textContent: "Render",
+});
 const state = document.createElement("pre");
 const display = document.createElement("blockquote");
 const debugDisplay = document.createElement("pre");
 
 function render() {
+  theCard.code = codeInput.value;
+
   const vm: Vm = {
     mode: "render",
     commands: { ...HTML },
@@ -96,4 +111,11 @@ function render() {
 }
 
 render();
-document.body.append(state, display, debugDisplay);
+document.body.append(
+  fieldInput,
+  codeInput,
+  rerender,
+  state,
+  display,
+  debugDisplay
+);