@readme/markdown 13.7.4 → 13.8.0

package/dist/main.js

@@ -12070,13 +12070,91 @@ const Table = (props) => {
 
 ;// ./components/TableOfContents/index.tsx
 
-function TableOfContents({ children, heading = 'Table of Contents' }) {
-    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { "aria-label": "Table of contents", role: "navigation" },
+/**
+ * Build link map and decode the hash to get the id and weird chars
+ */
+function buildLinkMap(nav) {
+    const map = new Map();
+    Array.from(nav.querySelectorAll('a')).forEach(link => {
+        const id = decodeURIComponent(link.hash.slice(1));
+        if (!id)
+            return;
+        const list = map.get(id);
+        if (list)
+            list.push(link);
+        else
+            map.set(id, [link]);
+    });
+    return map;
+}
+/**
+ * Watches headings in the viewport and toggles `active` on the
+ * corresponding TOC links so the reader always knows where they are.
+ */
+function useScrollHighlight(navRef) {
+    const [linkCount, setLinkCount] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        const nav = navRef.current;
+        if (!nav)
+            return;
+        const count = nav.querySelectorAll('a[href^="#"]').length;
+        setLinkCount(count);
+    }, [navRef]);
+    (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
+        const nav = navRef.current;
+        if (!nav || typeof IntersectionObserver === 'undefined' || linkCount === 0)
+            return undefined;
+        const linkMap = buildLinkMap(nav);
+        if (linkMap.size === 0)
+            return undefined;
+        const headings = [...linkMap.keys()]
+            .map(id => document.getElementById(id))
+            .filter((el) => el !== null);
+        if (headings.length === 0)
+            return undefined;
+        let activeId = null;
+        const visible = new Set();
+        const activate = (id) => {
+            if (id === activeId)
+                return;
+            if (activeId)
+                linkMap.get(activeId)?.forEach(a => a.classList.remove('active'));
+            activeId = id;
+            // set active states + border pos/size
+            if (id) {
+                const links = linkMap.get(id);
+                links?.forEach(a => a.classList.add('active'));
+                const link = links?.[0];
+                if (link) {
+                    const navRect = nav.getBoundingClientRect();
+                    const linkRect = link.getBoundingClientRect();
+                    nav.style.setProperty('--ToC-border-active-height', `${linkRect.height}px`);
+                    nav.style.setProperty('--ToC-border-active-top', `${linkRect.top - navRect.top}px`);
+                }
+            }
+        };
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(e => {
+                if (e.isIntersecting)
+                    visible.add(e.target.id);
+                else
+                    visible.delete(e.target.id);
+            });
+            // Highlight the topmost visible heading; if none are visible,
+            // keep the last active one so the user still has context.
+            const topmost = headings.find(el => visible.has(el.id));
+            if (topmost)
+                activate(topmost.id);
+        }, { rootMargin: '0px 0px -60% 0px', threshold: 0 });
+        headings.forEach(el => { observer.observe(el); });
+        return () => { observer.disconnect(); };
+    }, [navRef, linkCount]);
+}
+function TableOfContents({ children }) {
+    const navRef = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useRef)(null);
+    useScrollHighlight(navRef);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { ref: navRef, "aria-label": "Table of contents", className: "rm-ToC" },
         external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("ul", { className: "toc-list" },
-            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("li", null,
-                external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { className: "tocHeader", href: "#" },
-                    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("i", { className: "icon icon-text-align-left" }),
-                    heading)),
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("li", { className: "toc-children" }, children))));
 }
 /* harmony default export */ const components_TableOfContents = (TableOfContents);
@@ -100940,7 +101018,7 @@ function createTocComponent(tocHast) {
         components: { p: (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment },
     });
     const tocReactElement = tocProcessor.stringify(tocHast);
-    const TocComponent = (props) => tocReactElement ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_TableOfContents, { heading: props.heading }, tocReactElement)) : null;
+    const TocComponent = () => tocReactElement ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_TableOfContents, null, tocReactElement)) : null;
     TocComponent.displayName = 'Toc';
     return TocComponent;
 }
@@ -101106,7 +101184,7 @@ const run_run = (string, _opts = {}) => {
         default: (props) => (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(contexts, { baseUrl: baseUrl, copyButtons: copyButtons, terms: terms, theme: theme, variables: variables },
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Content, { ...props }))),
         toc,
-        Toc: (props) => Toc ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_TableOfContents, { heading: props.heading },
+        Toc: () => Toc ? (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(components_TableOfContents, null,
             external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(Toc, null))) : null,
         stylesheet,
         ...exports,

package/dist/main.node.js

@@ -24666,13 +24666,91 @@ const Table = (props) => {
 
 ;// ./components/TableOfContents/index.tsx
 
-function TableOfContents({ children, heading = 'Table of Contents' }) {
-    return (external_react_default().createElement("nav", { "aria-label": "Table of contents", role: "navigation" },
+/**
+ * Build link map and decode the hash to get the id and weird chars
+ */
+function buildLinkMap(nav) {
+    const map = new Map();
+    Array.from(nav.querySelectorAll('a')).forEach(link => {
+        const id = decodeURIComponent(link.hash.slice(1));
+        if (!id)
+            return;
+        const list = map.get(id);
+        if (list)
+            list.push(link);
+        else
+            map.set(id, [link]);
+    });
+    return map;
+}
+/**
+ * Watches headings in the viewport and toggles `active` on the
+ * corresponding TOC links so the reader always knows where they are.
+ */
+function useScrollHighlight(navRef) {
+    const [linkCount, setLinkCount] = (0,external_react_.useState)(0);
+    (0,external_react_.useEffect)(() => {
+        const nav = navRef.current;
+        if (!nav)
+            return;
+        const count = nav.querySelectorAll('a[href^="#"]').length;
+        setLinkCount(count);
+    }, [navRef]);
+    (0,external_react_.useEffect)(() => {
+        const nav = navRef.current;
+        if (!nav || typeof IntersectionObserver === 'undefined' || linkCount === 0)
+            return undefined;
+        const linkMap = buildLinkMap(nav);
+        if (linkMap.size === 0)
+            return undefined;
+        const headings = [...linkMap.keys()]
+            .map(id => document.getElementById(id))
+            .filter((el) => el !== null);
+        if (headings.length === 0)
+            return undefined;
+        let activeId = null;
+        const visible = new Set();
+        const activate = (id) => {
+            if (id === activeId)
+                return;
+            if (activeId)
+                linkMap.get(activeId)?.forEach(a => a.classList.remove('active'));
+            activeId = id;
+            // set active states + border pos/size
+            if (id) {
+                const links = linkMap.get(id);
+                links?.forEach(a => a.classList.add('active'));
+                const link = links?.[0];
+                if (link) {
+                    const navRect = nav.getBoundingClientRect();
+                    const linkRect = link.getBoundingClientRect();
+                    nav.style.setProperty('--ToC-border-active-height', `${linkRect.height}px`);
+                    nav.style.setProperty('--ToC-border-active-top', `${linkRect.top - navRect.top}px`);
+                }
+            }
+        };
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(e => {
+                if (e.isIntersecting)
+                    visible.add(e.target.id);
+                else
+                    visible.delete(e.target.id);
+            });
+            // Highlight the topmost visible heading; if none are visible,
+            // keep the last active one so the user still has context.
+            const topmost = headings.find(el => visible.has(el.id));
+            if (topmost)
+                activate(topmost.id);
+        }, { rootMargin: '0px 0px -60% 0px', threshold: 0 });
+        headings.forEach(el => { observer.observe(el); });
+        return () => { observer.disconnect(); };
+    }, [navRef, linkCount]);
+}
+function TableOfContents({ children }) {
+    const navRef = (0,external_react_.useRef)(null);
+    useScrollHighlight(navRef);
+    return (external_react_default().createElement("nav", { ref: navRef, "aria-label": "Table of contents", className: "rm-ToC" },
         external_react_default().createElement("ul", { className: "toc-list" },
-            external_react_default().createElement("li", null,
-                external_react_default().createElement("a", { className: "tocHeader", href: "#" },
-                    external_react_default().createElement("i", { className: "icon icon-text-align-left" }),
-                    heading)),
             external_react_default().createElement("li", { className: "toc-children" }, children))));
 }
 /* harmony default export */ const components_TableOfContents = (TableOfContents);
@@ -121134,7 +121212,7 @@ function createTocComponent(tocHast) {
         components: { p: (external_react_default()).Fragment },
     });
     const tocReactElement = tocProcessor.stringify(tocHast);
-    const TocComponent = (props) => tocReactElement ? (external_react_default().createElement(components_TableOfContents, { heading: props.heading }, tocReactElement)) : null;
+    const TocComponent = () => tocReactElement ? (external_react_default().createElement(components_TableOfContents, null, tocReactElement)) : null;
     TocComponent.displayName = 'Toc';
     return TocComponent;
 }
@@ -121300,7 +121378,7 @@ const run_run = (string, _opts = {}) => {
         default: (props) => (external_react_default().createElement(contexts, { baseUrl: baseUrl, copyButtons: copyButtons, terms: terms, theme: theme, variables: variables },
             external_react_default().createElement(Content, { ...props }))),
         toc,
-        Toc: (props) => Toc ? (external_react_default().createElement(components_TableOfContents, { heading: props.heading },
+        Toc: () => Toc ? (external_react_default().createElement(components_TableOfContents, null,
             external_react_default().createElement(Toc, null))) : null,
         stylesheet,
         ...exports,