app.js

@@ -1,7 +1,6 @@
 import { FileGroup } from "/editor/file-group.js"
 import { FileView } from "/editor/file-view.js"
 import { TextEdit } from "/editor/text-edit.js"
-import { CodeEdit } from "/editor/code-edit.js"
 import { ButtonGroup } from "/forms/button-group.js"
 import { Dropdown } from "/menu/dropdown.js"
 import { Builder } from "/loader/builder.js"
@@ -15,9 +14,6 @@ customElements.define(
 customElements.define(
   'm-editor-text-edit', TextEdit
 )
-customElements.define(
-  'm-editor-code-edit', CodeEdit
-)
 customElements.define(
   'm-forms-button-group', ButtonGroup
 )
@@ -37,7 +33,9 @@ class EditorApp extends HTMLElement {
       const message = event.data
       if (Array.isArray(message)) {
         if (message[0] === 'doc' && !this.loaded) {
-          this.load(message[1], message[2])
+          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})
@@ -47,9 +45,6 @@ class EditorApp extends HTMLElement {
       }
     })
     parent.postMessage(['ready'], '*')
-    this.shadowRoot.addEventListener('code-input', (e) => {
-      this.handleInput()
-    })
     this.shadowRoot.addEventListener('input', (e) => {
       this.handleInput()
     })
@@ -68,18 +63,12 @@ class EditorApp extends HTMLElement {
     this.shadowRoot.append(style)
   }
 
-  async load(doc, settings) {
+  load(doc) {
     const files = JSON.parse(doc).files
-    this.display(files)
-    this.el.codeMirror = !!(settings?.codeMirror)
-    if (this.el.codeMirror) {
-      await this.loadCodeMirror()
-    }
     for (const file of files) {
       this.el.addFile(file)
     }
-    this.loaded = true
+    this.display(files)
-    this.shadowRoot.appendChild(this.el)
   }
 
   save(e) {
@@ -113,67 +102,6 @@ class EditorApp extends HTMLElement {
       }, 100)
     }
   }
-
-  async sha(ab) {
-    const hash = await crypto.subtle.digest(
-      "SHA-256", ab
-    )
-    return 'sha256-' + btoa(
-      String.fromCharCode(
-        ...new Uint8Array(hash)
-      )
-    )
-  }
-
-  async checkIntegrity(text, integrity) {
-    const ab = new TextEncoder().encode(text)
-    const sha = await this.sha(ab)
-    if (sha !== integrity) {
-      throw new Error(
-        'failed integrity check: ' +
-        `${sha} !== ${integrity}`
-      )
-    }
-    return ab
-  }
-
-  req(method, path, value = undefined) {
-    return new Promise((resolve, reject) => {
-      const ch = new MessageChannel()
-      const port = ch.port1
-      port.onmessage = e => {
-        resolve(e.data)
-        port.close()
-      }
-      window.parent.postMessage(
-        (
-          method === 'get' ?
-          [method, path] :
-          [method, path, value]
-        ),
-        '*',
-        [ch.port2]
-      )
-    })
-  }
-
-  async loadCodeMirror() {
-    const resp = await this.req(
-      'load', '/editor-lib-codemirror/codemirror-bundle.js'
-    )
-    const passed = await this.checkIntegrity(
-      resp.body,
-      'sha256-5RlM/RBsaGHWVkn1pTnI7jUm9KPsI+SLglUwtbWroEA=',
-    )
-    if (!passed) {
-      throw new Error('Failed integrity check')
-    }
-    const s = document.createElement('script')
-    s.type = 'module'
-    s.textContent = resp.body
-    document.head.append(s)
-    await new Promise(res => setTimeout(() => res(), 50))
-  }
 }
 
 customElements.define(

code-edit.js

@@ -1,133 +0,0 @@
-export class CodeEdit extends HTMLElement {
-  constructor() {
-    super()
-    this.attachShadow({mode: 'open'})
-    this.shadowRoot.adoptedStyleSheets = [
-      this.constructor.styleSheet
-    ]
-  }
-
-  connectedCallback() {
-    this.initEditor()
-  }
-
-  static get styleSheet() {
-    if (this._styleSheet === undefined) {
-      this._styleSheet = new CSSStyleSheet()
-      this._styleSheet.replaceSync(this.css)
-    }
-    return this._styleSheet
-  }
-
-  set value(value) {
-    if (this.view) {
-      this.view.dispatch({changes: {
-        from: 0,
-        to: this.view.state.doc.length,
-        insert: value
-      }})
-    } else {
-      this._value = value
-    }
-  }
-
-  get value() {
-    if (this.view) {
-      return this.view.state.doc.toString()
-    } else {
-      return this._value ?? ''
-    }
-  }
-
-  set fileType(value) {
-    this._fileType = value
-    if (this.view) {
-      const langPlugins = this.langPlugins
-      this.view.dispatch({
-        effects: 
-        this.languageCompartment.reconfigure(langPlugins)
-      })
-    }
-  }
-
-  get fileType() {
-    return this._fileType
-  }
-
-  get langPlugins() {
-    const cm = window.CodeMirrorBasic
-    const langPlugins = []
-    if (['js', 'javascript'].includes(this.fileType)) {
-      langPlugins.push(cm.javascriptLanguage)
-    } else if (this.fileType === 'css') {
-      langPlugins.push(cm.cssLanguage)
-    } else if (this.fileType === 'html') {
-      langPlugins.push(cm.htmlLanguage)
-    } else if (this.fileType === 'json') {
-      langPlugins.push(cm.jsonLanguage)
-    }
-    return langPlugins
-  }
-
-  initEditor() {
-    const cm = window.CodeMirrorBasic
-    this.languageCompartment = new cm.Compartment()
-    const langPlugins = this.langPlugins
-    const basicSetup = [
-      cm.lineNumbers(),
-      cm.highlightActiveLineGutter(),
-      cm.highlightSpecialChars(),
-      cm.history(),
-      cm.foldGutter(),
-      cm.drawSelection(),
-      cm.dropCursor(),
-      cm.EditorState.allowMultipleSelections.of(true),
-      cm.indentOnInput(),
-      cm.syntaxHighlighting(
-        cm.defaultHighlightStyle, {fallback: true}
-      ),
-      cm.bracketMatching(),
-      cm.closeBrackets(),
-      cm.autocompletion(),
-      cm.rectangularSelection(),
-      cm.crosshairCursor(),
-      cm.highlightActiveLine(),
-      cm.highlightSelectionMatches(),
-      cm.keymap.of([
-        ...cm.closeBracketsKeymap,
-        ...cm.defaultKeymap,
-        ...cm.searchKeymap,
-        ...cm.historyKeymap,
-        ...cm.foldKeymap,
-        ...cm.completionKeymap,
-        ...cm.lintKeymap
-      ]),
-    ]
-    this.view = new cm.EditorView({
-      doc: this._value ?? '',
-      extensions: [
-        ...basicSetup,
-        this.languageCompartment.of(langPlugins),
-        cm.EditorView.updateListener.of(e => {
-          this.dispatchEvent(new CustomEvent(
-            'code-input', {bubbles: true, composed: true}
-          ))
-        }),
-      ],
-      root: this.shadowRoot,
-    })
-    this.shadowRoot.append(this.view.dom)
-  }
-
-  static css = `
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      background-color: #fff;
-    }
-    :host > * {
-      flex-grow: 1;
-    }
-  `
-}

file-group.js

@@ -1,11 +1,14 @@
 export class FileGroup extends HTMLElement {
-  textEn = {}
+  textEn = {
+    addFile: 'Add File',
+  }
 
-  textEs = {}
+  textEs = {
+    addFile: 'Añadir archivo',
+  }
 
   constructor() {
     super()
-    this.fileCount = {value: 0}
     this.language = navigator.language
     this.attachShadow({mode: 'open'})
     this.headerEl = document.createElement('div')
@@ -17,35 +20,16 @@ export class FileGroup extends HTMLElement {
     const bGroup = document.createElement(
       'm-forms-button-group'
     )
+    bGroup.addPrimary(this.text.addFile, () => {
+      this.addFile()
+      const btn = bGroup.primary
+      if (btn.scrollIntoViewIfNeeded) {
+        btn.scrollIntoViewIfNeeded()
+      } else {
+        btn.scrollIntoView()
+      }
+    })
     this.shadowRoot.appendChild(bGroup)
-    this.contentEl.addEventListener(
-      'click-add-above',
-      e => {
-        const el = document.createElement(
-          'm-editor-file-view'
-        )
-        el.fileCount = this.fileCount
-        el.codeMirror = this.codeMirror
-        e.target.insertAdjacentElement(
-          'beforebegin', el
-        )
-        this.fileCount.value += 1
-      },
-    )
-    this.contentEl.addEventListener(
-      'click-add-below',
-      e => {
-        const el = document.createElement(
-          'm-editor-file-view'
-        )
-        el.fileCount = this.fileCount
-        el.codeMirror = this.codeMirror
-        e.target.insertAdjacentElement(
-          'afterend', el
-        )
-        this.fileCount.value += 1
-      },
-    )
   }
 
   connectedCallback() {
@@ -75,8 +59,6 @@ export class FileGroup extends HTMLElement {
 
   addFile({name, data, collapsed} = {}) {
     const el = document.createElement('m-editor-file-view')
-    el.fileCount = this.fileCount
-    el.codeMirror = this.codeMirror
     if (name !== undefined) {
       el.name = name
     }
@@ -87,7 +69,6 @@ export class FileGroup extends HTMLElement {
       el.collapsed = collapsed
     }
     this.contentEl.appendChild(el)
-    this.fileCount.value += 1
     return el
   }
 

file-view.js

@@ -18,14 +18,10 @@ export class FileView extends HTMLElement {
   }
 
   textEn = {
-    addAbove: 'Add above',
-    addBelow: 'Add below',
     delete: 'Delete',
   }
 
   textEs = {
-    addAbove: 'Añadir arriba',
-    addBelow: 'Añadir abajo',
     delete: 'Borrar',
   }
 
@@ -42,10 +38,9 @@ export class FileView extends HTMLElement {
     this.nameEl = document.createElement('input')
     this.nameEl.classList.add('name')
     this.nameEl.setAttribute('spellcheck', 'false')
-    this.nameEl.addEventListener('input', e => {
-      this.setFileType(e.target.value)
-    })
     this.headerEl.appendChild(this.nameEl)
+    this.editEl = document.createElement('m-editor-text-edit')
+    this.contentEl.appendChild(this.editEl)
     this.collapseBtn = document.createElement(
       'button'
     )
@@ -57,12 +52,15 @@ export class FileView extends HTMLElement {
     this.menuBtn = document.createElement('button')
     this.menuBtn.innerHTML = this.icons.menu
     this.menuBtn.addEventListener('click', () => {
-      this.openMenu()
+      this.menu.open(this.menuBtn)
     })
     this.headerEl.appendChild(this.menuBtn)
     this.menu = document.createElement(
       'm-menu-dropdown'
     )
+    this.menu.add(this.text.delete, () => {
+      this.remove()
+    })
     this.shadowRoot.appendChild(this.menu)
   }
 
@@ -78,8 +76,8 @@ export class FileView extends HTMLElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
-        background-color: #f2dbd8;
+        background-color: #111;
-        color: #000;
+        color: #ddd;
         padding: 3px 0;
       }
       div.header > * {
@@ -114,44 +112,8 @@ export class FileView extends HTMLElement {
     this.shadowRoot.appendChild(style)
   }
 
-  openMenu() {
-    this.menu.clear()
-    this.menu.add(this.text.addAbove, () => {
-      this.dispatchEvent(new CustomEvent(
-        'click-add-above', {bubbles: true}
-      ))
-    })
-    this.menu.add(this.text.addBelow, () => {
-      this.dispatchEvent(new CustomEvent(
-        'click-add-below', {bubbles: true}
-      ))
-    })
-    if (this.fileCount.value > 1) {
-      this.menu.add(this.text.delete, () => {
-        this.remove()
-        this.fileCount.value -= 1
-      })
-    }
-    this.menu.open(this.menuBtn)
-  }
-
-  set codeMirror(value) {
-    this._codeMirror = value
-    const tagName = (
-      this.codeMirror ?
-      'm-editor-code-edit' : 'm-editor-text-edit'
-    )
-    this.editEl = document.createElement(tagName)
-    this.contentEl.replaceChildren(this.editEl)
-  }
-
-  get codeMirror() {
-    return this._codeMirror
-  }
-
   set name(name) {
     this.nameEl.value = name
-    this.setFileType(name)
   }
 
   get name() {
@@ -185,22 +147,6 @@ export class FileView extends HTMLElement {
     )
   }
 
-  setFileType(value) {
-    if (this.codeMirror && this.editEl) {
-      let fileType
-      if (value.endsWith('.js')) {
-        fileType = 'js'
-      } else if (value.endsWith('.html')) {
-        fileType = 'html'
-      } else if (value.endsWith('.css')) {
-        fileType = 'css'
-      } else if (value.endsWith('.json')) {
-        fileType = 'json'
-      }
-      this.editEl.fileType = fileType
-    }
-  }
-
   get language() {
     return this._language
   }