editor/app.js

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()