Fix avoiding the mark header in the sidebar nav

This makes sure that the sidebar headings don't have the `<mark>` tag.
When these are created, the Marker is unable to remove them from the
sidebar (and we don't want them there in the first place).

I suspect we'll want more filtering in the future, but I'm not sure
exactly what to filter. Alternatively, it could have an allow list of
tags, and filter all others out.

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/heading-nav-filter.goml

@@ -5,4 +5,4 @@ go-to: |DOC_PATH| + "heading-nav/filtered-headings.html?highlight=skateboard#ska
 
 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": '<mark data-markjs="true">Skateboard</mark>'})
+assert-property: ("//a[contains(@class, 'header-in-summary') and @href='#skateboard']", {"innerHTML": 'Skateboard'})