jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix avoiding the mark header in the sidebar nav

Browse source 
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.
This commit is contained in:
Eric Huss 2025-10-21 17:07:25 -07:00
parent a6944683e6
commit 18813516e1
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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) {

2
tests/gui/heading-nav-filter.goml
View file

@ -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'})