get it saving

app.js

@@ -3,6 +3,7 @@ import { FileView } from "/editor/file-view.js"
 import { TextEdit } from "/editor/text-edit.js"
 import { ButtonGroup } from "/forms/button-group.js"
 import { Dropdown } from "/menu/dropdown.js"
+import { Builder } from "/loader/builder.js"
 
 customElements.define(
   'm-editor-file-group', FileGroup
@@ -30,17 +31,23 @@ class EditorApp extends HTMLElement {
     )
     addEventListener('message', event => {
       const message = event.data
-      console.info('editor got message', message)
       if (Array.isArray(message)) {
         if (message[0] === 'doc' && !this.loaded) {
           this.load(message[1])
           this.loaded = true
           this.shadowRoot.appendChild(this.el)
+        } else if (message[0] === 'request-html') {
+          const files = this.el.files.map(
+            ({name, data}) => ({name, data})
+          )
+          this.display(files)
         }
       }
     })
     parent.postMessage(['ready'], '*')
-    // TODO: observe input and save when doc changes
+    this.shadowRoot.addEventListener('input', (e) => {
+      this.handleInput()
+    })
   }
 
   connectedCallback() {
@@ -61,10 +68,10 @@ class EditorApp extends HTMLElement {
     for (const file of files) {
       this.el.addFile(file)
     }
-    this.display()
+    this.display(files)
   }
 
-  save() {
+  save(e) {
     const files = this.el.files.map(
       ({name, data}) => ({name, data})
     )
@@ -75,11 +82,25 @@ class EditorApp extends HTMLElement {
     parent.postMessage(['save', data], '*')
   }
 
-  display() {
-    // TODO: build html
-    const html = '<h1>HTML here</h1>'
+  display(files) {
+    const builder = new Builder(files)
+    const html = builder.build(files)
     parent.postMessage(['html', html], '*')
   }
+
+  handleInput(e) {
+    this.lastInputEvent = e
+    if (!this.inputTimeout) {
+      this.save(this.lastInputEvent)
+      this.lastInputEvent = undefined
+      this.inputTimeout = setTimeout(() => {
+        this.inputTimeout = undefined
+        if (this.lastInputEvent) {
+          this.handleInput(this.lastInputEvent)
+        }
+      }, 100)
+    }
+  }
 }
 
 customElements.define(

text-edit.js

@@ -51,7 +51,7 @@ export class TextEdit extends HTMLElement {
   set value(value) {
     this.textEl.value = value
     this.stackEl.dataset.copy = this.textEl.value
-  }
+  }  
 
   get value() {
     return this.textEl.value