semi-live editor

client/src/app/markleft/markleft.html

@@ -1,3 +1,7 @@
-<p>markleft works!</p>
+<form [formGroup]="markupInput" (ngSubmit)="onSubmit()">
+    <textarea formControlName="inputText"></textarea>
+    <button>Render</button>
+</form>
 
-<div #markup_container></div>
+
+<div #markup_container class="markup_container"></div>

client/src/app/markleft/markleft.scss

@@ -3,6 +3,11 @@ p {
     font-size: larger;
 }
 
+.markup_container {
+    border: 3px solid #000000;
+}
+
+// markup classes
 .format-bold {
     font-weight: bold;
 }

client/src/app/markleft/markleft.ts

@@ -1,4 +1,5 @@
 import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
+import { ReactiveFormsModule, FormsModule, FormControl, FormGroup, FormBuilder } from '@angular/forms';
 
 // type descriptions
 
@@ -36,7 +37,7 @@ const styles: Record<string, formatDescriptor> = {
 
 @Component({
     selector: 'app-markleft',
-    imports: [],
+    imports: [FormsModule, ReactiveFormsModule],
     templateUrl: './markleft.html',
     styleUrl: './markleft.scss',
 })
@@ -44,21 +45,29 @@ export class Markleft {
 
     @ViewChild('markup_container', { static: true }) container!: ElementRef;
 
-    constructor(private renderer: Renderer2) {
+    constructor(private renderer: Renderer2, private fb: FormBuilder) {
         console.log("component constructor");
     }
 
     ngOnInit() { // DOM manipulation can't occur in constructor
 
-        const nodes: (textNode | blockNode)[] = this.parsePlaintext(this.plaintext);
-        console.log(nodes)
-        nodes.forEach((node) => {
-            this.renderNode(node);
+        this.markupInput = this.fb.group({
+            inputText: [this.liveText], 
         });
+
+        this.refresh();
+    }
+
+    markupInput = new FormGroup({
+        inputText:  new FormControl("")
+    });
+
+    onSubmit() {
+        this.refresh();
     }
 
     // full demo right here
-    plaintext: string = `
+    liveText: string = `
         #H{Hello World!}
         #P{
             This is some markleft text. This is %I{italic} and this is %B{bold}. Some might %I{even be %B{both}}.
@@ -113,7 +122,10 @@ export class Markleft {
                     //index++; // step to next
                     break;
                 } else { // regular text
-                    text += input[index];
+                    if(input[index] !== "}") { 
+                        // hack. TODO: should probably fix because I think I'm doing something wrong
+                        text += input[index];
+                    }
                 }
             }
         }
@@ -171,7 +183,10 @@ export class Markleft {
 
                     break;
                 } else { // regular text
-                    text += input[index];
+                    if(input[index] !== "}") { 
+                        // hack. TODO: should probably fix because I think I'm doing something wrong
+                        text += input[index];
+                    }
                 }
             }
         }
@@ -210,7 +225,10 @@ export class Markleft {
                     // nodes.push(parseAttribute());
                 } else {
                     // regular character
-                    currentText += input[index];
+                    if(input[index] !== "}") { 
+                        // hack. TODO: should probably fix because I think I'm doing something wrong
+                        currentText += input[index];
+                    }
                     index++;
                 }
             }
@@ -277,4 +295,25 @@ export class Markleft {
 
         return;
     }
+
+    refresh() {
+        if(this.markupInput.value.inputText) {
+
+            // clear children
+            const parent = this.container.nativeElement;
+            while (parent.firstChild) {
+                this.renderer.removeChild(parent, parent.firstChild);
+            }
+
+            // parse text
+            const nodes: (textNode | blockNode)[] = this.parsePlaintext(this.markupInput.value.inputText);
+
+            // console.log(nodes)
+
+            // render nodes
+            nodes.forEach((node) => {
+                this.renderNode(node);
+            });
+        }
+    }
 }