build app for editor that runs in iframe

app.js

@@ -0,0 +1,99 @@
+import { FileGroup } from "/editor/file-group.js"
+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"
+
+customElements.define(
+  'm-editor-file-group', FileGroup
+)
+customElements.define(
+  'm-editor-file-view', FileView
+)
+customElements.define(
+  'm-editor-text-edit', TextEdit
+)
+customElements.define(
+  'm-forms-button-group', ButtonGroup
+)
+customElements.define(
+  'm-menu-dropdown', Dropdown
+)
+
+class EditorApp extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'})
+    this.loaded = false
+    this.el = document.createElement(
+      'm-editor-file-group'
+    )
+    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)
+        }
+      }
+    })
+    parent.postMessage(['ready'], '*')
+    // TODO: observe input and save when doc changes
+  }
+
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        margin: 8px;
+      }
+    `
+    this.shadowRoot.append(style)
+  }
+
+  load(doc) {
+    const files = JSON.parse(doc).files
+    for (const file of files) {
+      this.el.addFile(file)
+    }
+    this.display()
+  }
+
+  save() {
+    const files = this.el.files.map(
+      ({name, data}) => ({name, data})
+    )
+    const data = JSON.stringify({
+      type: 'm-file-group',
+      files,
+    })
+    parent.postMessage(['save', data], '*')
+  }
+
+  display() {
+    // TODO: build html
+    const html = '<h1>HTML here</h1>'
+    parent.postMessage(['html', html], '*')
+  }
+}
+
+customElements.define(
+  'm-editor-app', EditorApp
+)
+
+class Setup {
+  async run() {
+    document.body.appendChild(
+      document.createElement(
+        'm-editor-app'
+      )
+    )
+  }
+}
+
+new Setup().run()