tocbot not working properly with id having emojis

[kevalrathod]

Ghost Version: 5.0.0
tocbot: https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js

I am trying to filter out h1, h2, and h3 tags in content in a ghost. But have headers that contain emojis and it's not showing correct ids when I try to redirect via tocbot.

Here is an example my blog: https://www.gumlet.com/blog/gumlet-summer-update/#%F0%9F%96%A5-dashboard-v20

   default.hbs

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
    {{! Initialize Tocbot after you load the script }}
    <script>
        tocbot.init({
            // Where to render the table of contents.
            tocSelector: '.gh-toc',
            // Where to grab the headings to build the table of contents.
            contentSelector: '.gumlet-content',
            // Which headings to grab inside of the contentSelector element.
            headingSelector: 'h1, h2, h3',
            hasInnerContainers: true,
            // Smooth scroll offset.
           // scrollSmoothOffset: -100,
            //headingsOffset: 100,
        });
    </script>

post.hbs

<div class="d-flex gap-5 justify-content-center align-items-start">
    <div class="col-sm-4 order-md-1 ms-10 d-lg-block d-none sidebar" style="top:6rem">
        <div>
            <div class="gh-toc"></div>
        </div>
    </div>
    <div class="col-sm-8 order-md-0">
        <div class="gumlet-content">
            {{!-- Display the post content --}}
            {{content}}
        </div>
    </div>
</div>

without emojis, it's working fine: link

[tscanlin]

Hey, this seems to be an encoding issue with how the ids are being generated. If I changed %F0%9F%93%88-video-insights to use the emoji 📈-video-insights it seems to be working. Any reason they are encoded?

[kevalrathod]

Hey, this seems to be an encoding issue with how the ids are being generated. If I changed %F0%9F%93%88-video-insights to use the emoji 📈-video-insights it seems to be working. Any reason they are encoded?

Yes, I have tried that once but ghost generates these ids.

Also, the ghost had mentioned and I simply follow the steps : link

[tscanlin]

Hey, this is a strange issue because tocbot should actually already handle this case. See:
https://github.com/tscanlin/tocbot/blob/master/src/js/scroll-smooth/index.js#L82-L86

Could you try the latest version to see if that helps? 4.18.2 https://cdnjs.com/libraries/tocbot

[tscanlin]

Latest version should fix it, I’m closing this.