I wanted to implement AutoTOC，please help me

[rebron1900]

我想实现自动一个给笔记增加大纲的功能，但是现在遇到了一些问题。
这个功能使用的tocbot这个组件，目前有这些问题
I wanted to implement the ability to automatically add an outline to my notes, but I ran into some problems.
This feature uses the tocbot, which currently has these problems, help me

1. 有时候不会显示 Sometimes it doesn't show up
2. 有时候显示的大纲会和其他打开的笔记混淆 Sometimes the outline displayed is confused with other open notes
3. 虽然我给heade创建了ID，但是无法通过锚点跳转 Although I created the ID for Heade, I couldn't jump through the anchor point

效果如下：
The effect is as follows:

这是我写的很差的代码，不知道谁能把他完善一下。
This is my bad code, I don't know who can improve it.

/*
 * 一个显示当前笔记字数的小组件.
 * 给一个笔记加上 #字数统计 的标签就能启用字数统计功能, 你也可以把它设为可继承的标签属性, 这样所有的子笔记也会开启字数统计
 * 
 * 可以到"读书"笔记和子笔记里看到效果
 */
$("head").append($("<script></script>").attr("src", "https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"))
$("head").append($("<link>").attr({rel:"stylesheet",href:"https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"}))



const TPL = `<div class="js-toc" style="    position: absolute;
    display: block;
    width: 200px;
    right: 200px;
    max-width: 200px;
    height: auto;"></div>`;

class TOCWidget extends api.TabAwareWidget {
    get position() { return 100; } // higher value means position towards the bottom/right
    
    get parentWidget() { return 'center-pane'; }
    
    doRender() {
        this.$widget = $(TPL);
        return this.$widget;
    }
    
    
    async refreshWithNote(note) {
        if (note.type !== 'text' || !note.hasLabel('TOC')) { 
            // 只在有 "字数统计" 这个标签的笔记里才显示组件
            this.toggleInt(false); // 隐藏
            
            return;
        }
        const {content} = await note.getNoteComplement();
        console.log(content)
        this.toggleInt(true); // 显示
        this.makeIds('.component .note-split:not(.hidden-ext)','h1, h2, h3, h4, h5, h6, h7')
        tocbot.init({
          tocSelector: '.js-toc',
          contentSelector: '.component .note-split:not(.hidden-ext)',
          headingSelector: 'h1, h2, h3',
          hasInnerContainers: true,
        });

    }
    
     makeIds(cClass,headTypes){ // eslint-disable-line
      var content = document.querySelector(cClass)
      var headings = content.querySelectorAll(headTypes)
      var headingMap = {}

      Array.prototype.forEach.call(headings, function (heading) {
        var id = heading.id
          ? heading.id
          : heading.textContent.trim().toLowerCase()
            .split(' ').join('-').replace(/[!@#$%^&*():]/ig, '').replace(/\//ig, '-')
        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
        if (headingMap[id]) {
          heading.id = id + '-' + headingMap[id]
        } else {
          heading.id = id
        }
      })
    }
    

    
    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }
}

module.exports = new TOCWidget();

[ysslang]

哥们儿我觉得你的css在搞鬼. 你应该直接用right-panel, 而不是靠css把它挤过去
Maybe right-panel parent will help you

[rebron1900]

这个有可能是问题之一。我自己有点搞不定。不知道这个加载原理。

[wbjrpub]

This is almost working, except it always seems to be 'behind', i.e. it is displaying the TOC for the previous note in the tab, not the current note.
I'm thinking that refreshWithNote is called when the DOM for the content tab does not yet contain the note.
(I'm seeing an 'Element not found' error from tocbot, mentioning the contentSelector value).
Perhaps there is another function I can override that is called when the DOM is ready.

// From https://github.com/zadam/trilium/discussions/2481

$("head").append($("<script></script>").attr("src", "https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"))
$("head").append($("<link>").attr({rel:"stylesheet",href:"https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"}))

let TPL = `
<style>
.js-toc-widget {
    /*border: 1px solid black;*/
    min-height: 10em;
    resize: vertical;
    width: 100%;
    /*font-family: ???;*/
}
.toc {
    overflow-y:auto
}
.toc>.toc-list {
    overflow:hidden;
    position:relative
}
/*.toc>.toc-list li {*/
.toc-list-item {
    list-style:none
}
.toc-list {
    margin:0;
    padding-left:10px
}
a.toc-link {
    color:blue;
    height:100%
}
.is-collapsible {
    max-height:1000px;
    overflow:hidden;
    transition:all 300ms ease-in-out
}
.is-collapsed {
    max-height:0
}
.is-position-fixed {
    position:fixed !important;
    top:0
}
.is-active-link {
    font-weight:700
}
.toc-link::before {
    background-color:#EEE;
    content:' ';
    display:inline-block;
    height:inherit;
    left:0;
    margin-top:-1px;
    position:absolute;
    width:2px
}
.is-active-link::before {
    background-color:#54BC4B
}
</style>
<div id="js-toc" class="js-toc js-toc-widget"></div>
`

class TOCWidget extends api.CollapsibleWidget {
    get widgetTitle() {
        return "TOC"
    }

    get parentWidget() {
        return "right-pane";
    }

    get position() {
        return 10;
    }
    
    async doRenderBody() {
        this.$body.html(TPL);
    }

    isEnabled() {
        return (super.isEnabled() && this.note.type == 'text');
    }

    async refreshWithNote(note) {
        this.setupTOC(note);
    }
        
    setupTOC(note) {
        //console.log(">>refreshWithNote, note = ", note)
        var contentSelector = "#center-pane div.note-detail.component > div.note-detail-editable-text.note-detail-printable.component > div"
        var headingsSelector = 'h1, h2, h3'
        this.makeIds(contentSelector, headingsSelector);
        tocbot.destroy();
        tocbot.init({
          skipRendering: false,
          tocSelector: '#js-toc',
          contentSelector: contentSelector,
          headingSelector: headingsSelector,
          hasInnerContainers: false,
          collapseDepth: 6
        });
        //console.log("<<refreshWithNote")
    }

    makeIds(cClass,headTypes){ // eslint-disable-line
      var content = document.querySelector(cClass)
      if (content == null) {
          return
      }
      var headings = content.querySelectorAll(headTypes)

      var headingMap = {}
      //debugger
      Array.prototype.forEach.call(headings, function (heading) {
        var id = heading.id
          ? heading.id
          : heading.textContent.trim().toLowerCase()
            .split(' ').join('-').replace(/[!@#$%^&*():]/ig, '').replace(/\//ig, '-')
        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
        if (headingMap[id]) {
          heading.id = id + '-' + headingMap[id]
        } else {
          heading.id = id
        }
      })
    }

    async entitiesReloadedEvent({loadResults}) {
        if (loadResults.isNoteReloaded(this.noteId) || loadResults.isNoteContentReloaded(this.noteId)) {
            this.refresh();
        }
    }

}

module.exports = new TOCWidget();