gmi-web/gmi.js

/* gmi.js is licensed under CC0 */
class Gemini {
  static syntax = { P: "", A: "=>", UL: "*", BLOCKQUOTE: ">", PRE: "```", H1: "#", H2: "##", H3: "###", }
  static line(line, type) {
    if (typeof line === "string") line = {content: line, type: type || "P"}
    let dom = Gemini.render(line).dom
    return {
      get dom() { return dom },
      get type() { return this.dom.nodeName },
      set type(type) { dom = Gemini.render({dom: this.dom, type, content: Gemini.contentFrom(this.dom)}).dom },
      get content() { return Gemini.contentFrom(dom) },
      set content(content) { Gemini.render({dom, type: dom.nodeName, content}) },
      get editable() { return this.dom.contentEditable === "true" },
      set editable(value) { Gemini.render({dom: this.dom, type: this.type, content: this.content, editable: value}) },
      delete() { return this.dom.remove() },
      get gmi() { 
        const syntax = Gemini.syntax[this.type]
        const content = Gemini.contentFrom(this.dom).replace(/\n?$/, "")
        switch (this.type.toUpperCase()) {
          case "PRE":
            return `${syntax}\n${content}\n${syntax}`
            break
          default:
            return content.split("\n").map(line => 
              `${syntax !== "" ? syntax + " " : ""}${line}`
            ).join("\n")
        }
      },
      get before() { return Gemini.line(this.dom.previousElementSibling) },
      set before(line) { this.before.dom.after(line.dom) },
      get after() { return Gemini.line(this.dom.nextElementSibling) },
      set after(line) { this.after.dom.before(line.dom) },
    }
  }
  static render(line) {
    if (line.dom && line.dom.nodeName !== line.type) {
      const replacement = document.createElement(line.type)
      line.dom.replaceWith(replacement)
      line.dom = replacement
    } else if (line.nodeName) {
      line = {
        dom: line, 
        type: line.nodeName, 
        content: Gemini.contentFrom(line),
        editable: line.contentEditable
      }
    } else {
      line.dom = line.dom || document.createElement(line.type || "P")
    }
    line.dom.contentEditable = line.editable || "inherit"
    switch (line.type.toUpperCase()) {
      case "A":
        const {href, content} = Gemini.link(line.content)
        line.dom.innerHTML = line.editable && href !== content ? `${href} ${content}` :  content 
        line.dom.href = href 
        break
      case "UL": 
        line.dom.innerHTML = line.content.split("\n").map(content => content.length > 0 ? 
          `<li>${content}</li>` : ""
        ).join("\n")
        break
      case "BLOCKQUOTE": 
        line.dom.innerHTML = line.content.split("\n").map(content => 
          `<div>${content}</div>`
        ).join("\n")
        break
      case "PRE":
        line.dom.textContent = line.content
        break
      default:
        line.dom.innerHTML = line.content.replace(/\n+/g, "<br>") 
    }
    return line 
  }
  static contentFrom(dom) {
    switch (dom.nodeName.toUpperCase()) {
      case "BLOCKQUOTE":
        return Array.from(dom.childNodes).map(child => 
          child.textContent
        ).join("\n")
        break
      case "UL": 
        return Array.from(dom.children).map(child => 
          child.textContent
        ).join("\n")
        break
      case "A": 
        const {href, content} = Gemini.link(dom.textContent)
        return `${href || dom.href} ${content}`
        break
      case "PRE": 
        return dom.textContent
        break
      default:
        return dom.innerHTML.replace(/<br>/g, "\n")
    }
  }
  // TODO: rename/move/idk this is awk
  static link(content = "") { return /((?<href>[^\s]+\/\/[^\s]+)\s)?(?<content>.+)/.exec(content).groups }

  constructor(root) { this.root = root }
  get editable() { return this.root.contentEditable === "true" }
  set editable(value) {
    this.root.contentEditable = value 
    this.lines.forEach(line => line.editable = value)
  }
  get lines() {
    return Array.from(this.root.children).filter(el => [
      "P", "BLOCKQUOTE", "A", "PRE", "UL", "H1", "H2", "H3"
    ].includes(el.nodeName)).map(Gemini.line)
  }
  set lines(lines) {
    this.root.textContent = ""
    this.root.append(...lines.map(line => line.dom))
  } 
  get source() { return this.lines.map(line => line.gmi).join("\n") }
  // TODO: set source is a DOM thing, but parsing should be isomorphic
  // set source(gmi) {}
  download() {
    const el = document.createElement('a')
    el.setAttribute('href', 'data:text/gemini;charset=utf-8,' 
      + encodeURIComponent(this.source))
    el.setAttribute('download', 
      `${this.lines[0].content.replace(/\s/g, "_")}.gmi`)
    el.style.display = 'none'
    document.body.appendChild(el); el.click(); document.body.removeChild(el)
  }
  get foreground() { return getComputedStyle(this.root).getPropertyValue("--foreground") }
  set foreground(value) { return this.root.style.setProperty("--foreground", value) }
  get background() { return getComputedStyle(this.root).getPropertyValue("--background") }
  set background(value) { return this.root.style.setProperty("--background", value) }
  get size() { return getComputedStyle(this.root).getPropertyValue("--font-size") }
  set size(value) { return this.root.style.setProperty("--font-size", value) }
  get lineHeight() { return getComputedStyle(this.root).getPropertyValue("--line-height") }
  set lineHeight(value) { return this.root.style.setProperty("--line-height", value) }
  get serif() { return getComputedStyle(this.root).getPropertyValue("--serif") }
  set serif(value) { return this.root.style.setProperty("--serif", value) }
  get sans() { return getComputedStyle(this.root).getPropertyValue("--sans") }
  set sans(value) { return this.root.style.setProperty("--sans", value) }
  get mono() { return getComputedStyle(this.root).getPropertyValue("--mono") }
  set mono(value) { return this.root.style.setProperty("--mono", value) }
}