Insert Table of Content at the top of Dropbox Paper

run.js

(() => {
  clear()

  const childTo = (children, parents) => {
    children.forEach(datum => {
      let parent = parents.filter(parent => parent.idx < datum.idx).pop();
      parent.children.push(datum);
    })
  }

  const toHTMLString = (list) => {
    if (!list.length) return '';
    return list.reduce((acc, curr) => {
      return  acc + '<li>' +
        '<a href="'+ window.location.href.split('#')[0] + curr.url +'">'+
          curr.content
        +'</a>'
      + '</li>' + toHTMLString(curr.children)
    }, '<ul>') + '</ul>'
  }

  let data = $('#padpage-container').find('h1, h2, h3').toArray().map((curr, idx) => {
    return {
      el: curr,
      children: [],
      level: parseInt(curr.localName[1]),
      content: curr.innerText,
      idx: idx,
      url: '#:uid=' + curr.attributes["data-usually-unique-id"].nodeValue
    }
  })


  let h1 = data.filter(datum => datum.level == 1)
  let h2 = data.filter(datum => datum.level == 2)
  let h3 = data.filter(datum => datum.level == 3)

  childTo(h3, h2)
  childTo(h2, h1)

  parentNode = $('#editor-1').children()[0]
  referenceNode = parentNode.children[1]
  
  parentNode.insertBefore($(toHTMLString(h1))[0], referenceNode);

})()