Small sketch of a bijection that renders indents explicit

indent-explicit.es6

/*
- `»` and `«` to delimit indent/outdent tokens
- two text areas side by side, one with »«, one without
- edits to indent editor update the brackets, edits to bracket editor update indents in both to match brackets
*/
mnt = document.body.querySelector('div')
mnt && mnt.remove()
document.body.appendChild(mnt = document.createElement('div'))
out.innerText=''; (new Date)+"\n"+document.body.outerHTML
mnt.innerHTML = `
  <pre contenteditable id=e_ind style=display:inline-block;background:#eff></pre>
  <pre contenteditable id=e_paren style=display:inline-block;background:#eff></pre>
  <pre id=e_json style=background:#eee></pre>
`
e_ind.innerText = `
.${' '.repeat(20)}
fn arg1
  arg2
  arg2a
arg3
`.trim()
e_ind.onkeyup= ()=>{
  ind = []; indc=0
  stack = []; cur = []
  for(s of e_ind.innerText.split("\n")){
    n = s.match(/^ */)[0].length
    s = ( (n<indc && "«"+(indc-n)) || (n>indc && "»"+(n-indc)) || "  " )+"|"+s
    while(n<indc){
      stack[0].cur.push(cur)
      cur = stack[0].cur
      indc = stack[0].indc
      stack.shift()
    }
    stack.unshift({indc,cur}); cur=[]
    cur.push(s.slice(3).replace(/^ */,""))
    indc = n
    ind.push(s)
  }
  if(e_paren.innerText != ind.join("\n")){
    e_paren.innerText = ind.join("\n")
  }
  while(stack[0]){
    stack[0].cur.push(cur)
    cur=stack[0].cur
    stack.shift()
  }
  e_json.innerText = JSON.stringify(cur,null,2)
}
e_ind.onkeyup()
e_paren.onkeyup= ()=>{
  ind = []; indc = 0
  for(s of e_paren.innerText.split("\n")){
    c = s[0]; n=Number(s[1])||2; s=s.slice(3)
    indc += n*[-1,0,1][1+(c=="»")-(c=="«")]
    s = s.replace(/^ */," ".repeat(indc))
    ind.push(s)
  }
  e_ind.innerText = ind.join("\n")
  e_ind.onkeyup()
}
e_paren.onkeyup()

env data:text/html,<textarea onkeyup="out.innerText=eval(this.value)"></textarea><pre id=out>