toc sidebar for navigating through long note

[andrewchenshx]

walks through all heading elements within the note and generates a filterable table of contents containing anchor links in a collapsible, full-height side panel.

[mauritskorse]

I havent tested it, but I guess something like this could work.
You should add a <div id="toc"></div> next to the div that holds the editorJs instance and style it accordingly

const EditorInstance = new EditorJS({
  //... config
  tools: {
    //...
  },
  onChange: (api, event) => {
      EditorInstance.save()
        .then( async(data) => {
           const headers = getHeaders(data.blocks);
           let toc = buildToc(headers);
           document.getElementById('toc').appendChild(toc);
        })
  }
})

function getHeaders(blocks){
  return blocks
    .filter(block => block.type === 'header')
    .map(({ data: { text, level } }) => ({ text, level }));
}

function buildToc(toc) {
    let root = document.createElement('ul');
    let stack = [root];

    toc.forEach(({ text, level }) => {
        let li = document.createElement('li');
        li.textContent = text;

        while (level < stack.length) {
            stack.pop();
        }

        if (level > stack.length) {
            let ul = document.createElement('ul');
            stack[stack.length - 1].lastChild.appendChild(ul);
            stack.push(ul);
        }

        stack[stack.length - 1].appendChild(li);
    });

    return root;
}