fix(core/structure): propagate custom heading ID to section element

src/core/structure.js

@@ -164,7 +164,12 @@ function getSectionTree(parent) {
       continue;
     }
     const title = header.textContent;
-    addId(section, undefined, title);
+    if (header.id && !section.id) {
+      section.id = header.id;
+      header.removeAttribute("id");
+    } else {
+      addId(section, undefined, title);
+    }
     sections.push({
       element: section,
       header,

tests/spec/core/id-headers-spec.js

@@ -46,15 +46,21 @@
       let ariaLabel = anchor.getAttribute("aria-label");
       expect(ariaLabel).toBe("Permalink for this Section");
 
-      const custom = doc.querySelector("#custom-id + a.self-link");
+      const custom = doc.querySelector(
+        "#custom-id > div.header-wrapper > h2 + a.self-link"
+      );
       ariaLabel = custom.getAttribute("aria-label");
       expect(ariaLabel).toBe("Permalink for Section 3.");
 
-      const appendix = doc.querySelector("#a1 + a.self-link");
+      const appendix = doc.querySelector(
+        "#a1 > div.header-wrapper > h2 + a.self-link"
+      );
       ariaLabel = appendix.getAttribute("aria-label");
       expect(ariaLabel).toBe("Permalink for Appendix A.");
 
-      const deepAppendix = doc.querySelector("#a2 + a.self-link");
+      const deepAppendix = doc.querySelector(
+        "#a2 > div.header-wrapper > h3 + a.self-link"
+      );
       ariaLabel = deepAppendix.getAttribute("aria-label");
       expect(ariaLabel).toBe("Permalink for Appendix A.1");
 
@@ -87,7 +93,7 @@
       const test2 = doc.querySelector(
         "#pass > div.header-wrapper > h2 + a.self-link"
       );
       expect(test2.getAttribute("href")).toBe("#custom-id");
     });
 
     it("doesn't add section links to h2s .introductory, but h3, h4s are ok", () => {

tests/spec/core/markdown-spec.js

@@ -128,16 +128,16 @@
 
     const [customID, foo, bar, automaticId] = headings;
 
-    expect(customID.id).toBe("custom-id");
+    expect(customID.closest("section").id).toBe("custom-id");
     expect(customID.textContent).toBe("1. Heading");
 
-    expect(foo.id).toBe("foo");
+    expect(foo.closest("section").id).toBe("foo");
     expect(foo.textContent).toBe("2. Foo title");
 
-    expect(bar.id).toBe("bar");
+    expect(bar.closest("section").id).toBe("bar");
     expect(bar.textContent).toBe("2.1 Bar title");
 
-    expect(automaticId.id).toBe("x2-2-another-title");
+    expect(automaticId.closest("section").id).toBe("x2-2-another-title");
     expect(automaticId.textContent).toBe("2.2 Another title");
   });
 
@@ -568,10 +568,10 @@
       const ops = makeStandardOps({ format: "markdown" }, body);
       ops.abstract = null;
       const doc = await makeRSDoc(ops);
-      const h2 = doc.getElementById("h2");
+      const h2 = doc.querySelector("#h2 > h2");
       const p = doc.getElementById("p");
 
       expect(h2.localName).toBe("h2");
       expect(h2.textContent).toBe("1. header");
       expect(p.localName).toBe("p");
     });

tests/spec/core/sections-spec.js

@@ -22,10 +22,11 @@
     const doc = await makeRSDoc(ops);
     for (let i = 2; i <= 6; i++) {
       const context = `h${i}`;
-      const h = doc.getElementById(context);
-      const section = h.parentElement.parentElement;
+      const section = doc.getElementById(context);
+      const h = section.querySelector(`h${i}`);
       expect(section.localName).withContext(context).toBe("section");
-      expect(section.id).withContext(context).toBe(`section-${i}`);
+      expect(section.id).withContext(context).toBe(context);
+      expect(h.id).withContext(context).toBe(`section-${i}`);
     }
   });
 
@@ -46,10 +47,12 @@
     const ops = makeStandardOps(null, body);
     const doc = await makeRSDoc(ops);
     for (let i = 2; i <= 6; i++) {
-      const h = doc.getElementById(`h${i}`);
-      const section = h.parentElement.parentElement;
+      const id = `h${i}`;
+      const section = doc.getElementById(id);
+      const h = section.querySelector(`h${i}`);
       expect(section.localName).toBe("section");
-      expect(section.id).toBe(`section-${i}`);
+      expect(section.id).toBe(id);
+      expect(h.id).toBe(`section-${i}`);
     }
   });
 
@@ -147,7 +150,7 @@
     const section = doc.getElementById("h2").closest("section");
     expect(section.classList).toContain("appendix");
 
-    const heading = section.querySelector("#h2");
+    const heading = section.querySelector("h2");
     expect(heading.localName).toBe("h2");
     expect(heading.textContent).toBe("A. Appendix A");