Merge pull request #2899 from ehuss/filtered-headings

Filter mark tags from sidebar heading nav

Author: ehuss

crates/mdbook-html/front-end/templates/toc.js.hbs

@@ -327,6 +327,16 @@ window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox)
         });
     }
 
+    // Takes the nodes from the given head and copies them over to the
+    // destination, along with some filtering.
+    function filterHeader(source, dest) {
+        const clone = source.cloneNode(true);
+        clone.querySelectorAll('mark').forEach(mark => {
+            mark.replaceWith(...mark.childNodes);
+        });
+        dest.append(...clone.childNodes);
+    }
+
     // Scans page for headers and adds them to the sidebar.
     document.addEventListener('DOMContentLoaded', function() {
         const activeSection = document.querySelector('#mdbook-sidebar .active');
@@ -399,7 +409,7 @@ window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox)
             span.appendChild(a);
             a.href = '#' + header.id;
             a.classList.add('header-in-summary');
-            a.innerHTML = header.children[0].innerHTML;
+            filterHeader(header.children[0], a);
             a.addEventListener('click', headerThresholdClick);
             const nextHeader = headers[i + 1];
             if (nextHeader !== undefined) {

tests/gui/books/heading-nav/src/SUMMARY.md

@@ -7,3 +7,4 @@
 - [Headings with markup](markup.md)
 - [Current scrolls to bottom](current-to-bottom.md)
 - [Unusual heading levels](unusual-heading-levels.md)
+- [Filtered headings](filtered-headings.md)

tests/gui/books/heading-nav/src/filtered-headings.md

@@ -0,0 +1,5 @@
+# Filtered headings
+
+## Skateboard
+
+Checking for search marking.

tests/gui/heading-nav-filter.goml

@@ -0,0 +1,8 @@
+// Tests for collapsed heading sidebar navigation.
+
+set-window-size: (1400, 800)
+go-to: |DOC_PATH| + "heading-nav/filtered-headings.html?highlight=skateboard#skateboard"
+
+assert-property: ("//h2[@id='skateboard']", {"innerHTML": '<a class="header" href="#skateboard"><mark data-markjs="true">Skateboard</mark></a>'})
+
+assert-property: ("//a[contains(@class, 'header-in-summary') and @href='#skateboard']", {"innerHTML": 'Skateboard'})