fix(toc): set tocId to element.id

Author: vnphanquang

.changeset/rotten-lemons-accept.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/toc': patch
+---
+
+set extracted `tocId` to `element.id` (bugfix)

apps/docs/src/routes/(main)/docs/(pkg)/toc/_page/codes/quick-start-input.svelte

@@ -5,6 +5,7 @@
 
 <main use:toc={{ store: tocStore, observe: true }}>
   <h1>Page Heading</h1>
+
   <section>
     <h2>Table of Contents</h2>
     {#if Object.values($tocStore.items).length}
@@ -17,11 +18,15 @@
       </ul>
     {/if}
   </section>
+
+  <section>
+    <h2>Section Heading Level 2</h2>
+    <p>...</p>
+  </section>
+
   <section>
-    <h2>Section Heading</h2>
-    <section>
-      <h3>Nested Section Heading</h3>
-    </section>
+    <h3>Section Heading Level 3</h3>
+    <p>...</p>
   </section>
   <!-- ... -->
 </main>

apps/docs/src/routes/(main)/docs/(pkg)/toc/_page/codes/quick-start-output.svelte

@@ -1,37 +1,36 @@
-<main>
-  <h1 id="page-heading" data-toc="">
+<main data-toc-observe-for="page-heading">
+  <h1 id="page-heading" data-toc="" class="">
     <a aria-hidden="true" tabindex="-1" href="#page-heading" data-toc-anchor="">#</a>Page Heading
   </h1>
-  <section>
-    <h2 id="table-of-contents" data-toc="">
+  <section data-toc-observe-for="table-of-contents">
+    <h2 id="table-of-contents" data-toc="" class="">
       <a aria-hidden="true" tabindex="-1" href="#table-of-contents" data-toc-anchor="">#</a>Table of
       Contents
     </h2>
     <ul>
-      <a href="#page-heading" style="display: contents;">
-        <li>Page Heading</li>
-      </a>
-      <a href="#table-of-contents" style="display: contents;">
-        <li>Table of Contents</li>
-      </a>
-      <a href="#section-heading" style="display: contents;">
-        <li>Section Heading</li>
-      </a>
-      <a href="#nested-section-heading" style="display: contents;">
-        <li>Nested Section Heading</li>
+      <a href="#page-heading" style="display: contents;"><li class="">Page Heading</li> </a><a
+        href="#table-of-contents"
+        style="display: contents;"
+        ><li>Table of Contents</li>
+      </a><a href="#section-heading-level-2" style="display: contents;"
+        ><li class="">Section Heading Level 2</li>
+      </a><a href="#section-heading-level-3" class="active" style="display: contents;"
+        ><li>Section Heading Level 3</li>
       </a>
     </ul>
   </section>
-  <section>
-    <h2 id="section-heading" data-toc="">
-      <a aria-hidden="true" tabindex="-1" href="#section-heading" data-toc-anchor="">#</a>Section
-      Heading
+  <section data-toc-observe-for="section-heading-level-2">
+    <h2 id="section-heading-level-2" data-toc="" class="">
+      <a aria-hidden="true" tabindex="-1" href="#section-heading-level-2" data-toc-anchor="">#</a
+      >Section Heading Level 2
     </h2>
-    <section>
-      <h3 id="nested-section-heading" data-toc="">
-        <a aria-hidden="true" tabindex="-1" href="#nested-section-heading" data-toc-anchor="">#</a
-        >Nested Section Heading
-      </h3>
-    </section>
+    <p>...</p>
+  </section>
+  <section data-toc-observe-for="section-heading-level-3">
+    <h3 id="section-heading-level-3" data-toc="">
+      <a aria-hidden="true" tabindex="-1" href="#section-heading-level-3" data-toc-anchor="">#</a
+      >Section Heading Level 3
+    </h3>
+    <p>...</p>
   </section>
 </main>

packages/actions/toc/src/lib/toc.action.ts

@@ -127,7 +127,10 @@ export const toc: Action<HTMLElement, UserTocParameters, TocAttributes> = functi
         if (element.hasAttribute(ATTRIBUTES.ignore)) continue;
 
         const text = extractElementText(element);
+
         const tocId = extractTocId(element, text);
+        element.id = tocId;
+
         processScrollMarginTop(element, scrollMarginTop);
         const a = processAnchor(element, anchor, tocId);