Editor.ts

editor.ts

// git repo: https://github.com/optimalux/js-agent/blob/master/src/editor.ts

export class Editor {
  iframe: HTMLIFrameElement
  destination: string

  constructor(iframe: HTMLIFrameElement) {
    this.iframe = iframe
    this.destination = '*'

    if (!this.iframe) {
      console.warn('No iframe found')
    }
  }

  connect(url: string): Promise<number> {
    // TODO: call "reject" on timeout
    return new Promise<number>((resolve) => {
      window.addEventListener('message', (e) => {
        console.log('message from site: ', e.data)
        if (e.data === 'loaded') {
          console.log('connected')
          resolve(0)
        }
      })
      this.iframe.src = url
      // Setting "destination" properly
      const parsed_url = new URL(url)
      this.destination = `${parsed_url.protocol}//${parsed_url.host}`
    })
  }

  replaceModification(id: string, css_selector: string, styles: string, new_content?: string) {
    this.iframe.contentWindow?.postMessage(
      {
        modification: [id, css_selector, styles, new_content],
      },
      this.destination,
    )
  }

  deleteModification(id: string) {
    this.iframe.contentWindow?.postMessage(
      {
        delete: id,
      },
      this.destination,
    )
  }
}