[toc] not rendered if first tocItem is not in view
dcheglakov opened this issue · comments
Hi,
I've an issue with svelte-put/toc. Table of contents is not rendered if first tocItem is not in view on page load.
In my case I'm targeting for h2 elements and first h2 is not in view.
Here is svelte repl with this issue.
@dcheglakov hello there, I see there are 2 (h2) headings in your REPL:
- one is
<h2>Title 1</h2>and is extracted bytocsucessfully, - the other one is
<h2 data-toc-ignore>Contents</h2>which is ignored bytocbecause of thedata-toc-ignoreattribute added there.
If you are referring to <h2 data-toc-ignore>Contents</h2>, then just remove the data-toc-ignore. Does that help?
@vnphanquang in my case <h2>Title 1</h2> is not extracted by toc. When you tested svelte repl is <h2>Title 1</h2> was in the view or outside of it?
Here is what it looks like when <h2>Title 1</h2> is not in view on page load
Notice the table of contents is empty
And after scrolling <h2>Title 1</h2> is appered in toc
@dcheglakov hmm interesting. From my side everything is okay, tested in chrome and firefox.
When you tested svelte repl is
<h2>Title 1</h2>was in the view or outside of it?
Mine was inside
Here is a loom: https://www.loom.com/share/3c057f54bbe64992bca30f77b8075f07
Can you provide some more info about your env (browser, os,...). Also does this occur in your project on localhost or just in REPL sandbox? Let me know
@vnphanquang the problem occurs when <h2>Title 1</h2> is not in view. Just copy paste paragraphs to shift <h2>Title 1</h2> outside the view. Or use this updated repl with more p tags.
And yes I've this problem in the real project I'm currently working on.
@dcheglakov Ah i see, apologies I wasn't understanding what you meant by 'inside/outside of view'. Taking a look right now
@dcheglakov should be resolved with @svelte-put/toc@2.1.3 (I forgot to run it on mount, silly me).
You can refresh your REPL and verify the fix. Thanks for raising this and for your patience.
@vnphanquang thank you for such a quick fix. Everything is fine now. Thanks again.
@dcheglakov no worries, happy that folks are using this.
Just one thing, I notice you've placed data-toc-observe-for in your div, this won't have any effect because data-toc-observe-for is readonly and meant for internal references. The docs wasn't clear on this but I've updated it recently. To change observe behavior you might want to use set observe.strategy or use data-observe-strategy . Hope that helps.
https://svelte-put.vnphanquang.com/docs/toc#by-observe-operation
@vnphanquang yeah forgot to remove it. I was desperate and tried everything possible and imposible to fix it 😂