Merge pull request 'remove add file button, using menu items for adding files' (#10) from menu-add-file-only into pages

Reviewed-on: https://codeberg.org/macchiato/editor/pulls/10

app.js

@@ -1,6 +1,7 @@
 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"
@@ -14,6 +15,9 @@ customElements.define(
 customElements.define(
   'm-editor-text-edit', TextEdit
 )
+customElements.define(
+  'm-editor-code-edit', CodeEdit
+)
 customElements.define(
   'm-forms-button-group', ButtonGroup
 )
@@ -33,9 +37,7 @@ class EditorApp extends HTMLElement {
       const message = event.data
       if (Array.isArray(message)) {
         if (message[0] === 'doc' && !this.loaded) {
-          this.load(message[1])
-          this.loaded = true
-          this.shadowRoot.appendChild(this.el)
+          this.load(message[1], message[2])
         } else if (message[0] === 'request-html') {
           const files = this.el.files.map(
             ({name, data}) => ({name, data})
@@ -45,6 +47,9 @@ class EditorApp extends HTMLElement {
       }
     })
     parent.postMessage(['ready'], '*')
+    this.shadowRoot.addEventListener('code-input', (e) => {
+      this.handleInput()
+    })
     this.shadowRoot.addEventListener('input', (e) => {
       this.handleInput()
     })
@@ -63,17 +68,24 @@ class EditorApp extends HTMLElement {
     this.shadowRoot.append(style)
   }
 
-  load(doc) {
+  async load(doc, settings) {
     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.display(files)
+    this.loaded = true
+    this.shadowRoot.appendChild(this.el)
   }
 
   save(e) {
     const files = this.el.files.map(
-      ({name, data}) => ({name, data})
+      ({name, data, collapsed}) =>
+      ({name, data, collapsed})
     )
     const data = JSON.stringify({
       type: 'm-file-group',
@@ -101,6 +113,67 @@ 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

@@ -0,0 +1,133 @@
+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,14 +1,11 @@
 export class FileGroup extends HTMLElement {
-  textEn = {
-    addFile: 'Add File',
-  }
+  textEn = {}
 
-  textEs = {
-    addFile: 'Añadir archivo',
-  }
+  textEs = {}
 
   constructor() {
     super()
+    this.fileCount = {value: 0}
     this.language = navigator.language
     this.attachShadow({mode: 'open'})
     this.headerEl = document.createElement('div')
@@ -20,16 +17,35 @@ 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() {
@@ -57,15 +73,21 @@ export class FileGroup extends HTMLElement {
     }
   }
 
-  addFile({name, data} = {}) {
+  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
     }
     if (data !== undefined) {
       el.data = data
     }
+    if (collapsed !== undefined) {
+      el.collapsed = collapsed
+    }
     this.contentEl.appendChild(el)
+    this.fileCount.value += 1
     return el
   }
 

file-view.js

@@ -5,13 +5,27 @@ export class FileView extends HTMLElement {
         <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
       </svg>
     `,
+    down: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+      </svg>
+    `,
+    up: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+        <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+      </svg>
+    `,
   }
 
   textEn = {
+    addAbove: 'Add above',
+    addBelow: 'Add below',
     delete: 'Delete',
   }
 
   textEs = {
+    addAbove: 'Añadir arriba',
+    addBelow: 'Añadir abajo',
     delete: 'Borrar',
   }
 
@@ -27,21 +41,28 @@ export class FileView extends HTMLElement {
     this.shadowRoot.appendChild(this.contentEl)
     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'
+    )
+    this.collapseBtn.innerHTML = this.icons.up
+    this.collapseBtn.addEventListener('click', () => {
+      this.collapsed = !this.collapsed
+    })
+    this.headerEl.appendChild(this.collapseBtn)
     this.menuBtn = document.createElement('button')
     this.menuBtn.innerHTML = this.icons.menu
     this.menuBtn.addEventListener('click', () => {
-      this.menu.open(this.menuBtn)
+      this.openMenu()
     })
     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)
   }
 
@@ -57,8 +78,8 @@ export class FileView extends HTMLElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
-        background-color: #111;
-        color: #ddd;
+        background-color: #f2dbd8;
+        color: #000;
         padding: 3px 0;
       }
       div.header > * {
@@ -80,6 +101,10 @@ export class FileView extends HTMLElement {
         display: flex;
         flex-direction: column;
         align-items: stretch;
+        min-height: 5px;
+      }
+      div.content.collapsed > * {
+        display: none;
       }
       svg {
         height: 20px;
@@ -89,8 +114,44 @@ 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() {
@@ -105,6 +166,41 @@ export class FileView extends HTMLElement {
     return this.editEl.value
   }
 
+  set collapsed(value) {
+    const cl = this.contentEl.classList
+    if (value) {
+      cl.add('collapsed')
+    } else {
+      cl.remove('collapsed')
+    }
+    this.collapseBtn.innerHTML = (
+      value ?
+      this.icons.down : this.icons.up
+    )
+  }
+
+  get collapsed() {
+    return this.contentEl.classList.contains(
+      'collapsed'
+    )
+  }
+
+  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
   }