Fix formatting breaking heading links

Author: Nixinova

changelog.md

@@ -8,6 +8,7 @@
 - Fixed underscores appearing in the default page title when present in the URL.
 - Fixed links not being automatically capitalised.
 - Fixed named references not working.
+- Fixed headings not working when containing formatting.
 - Fixed all index numbers in the TOC being '1'.
 
 ## 1.3.4

src/compile.ts

@@ -53,7 +53,8 @@ export function compile(dir: string = '.', config: Config = {}): void {
             let toc = '';
             let headings = Array.from(parsedContent.match(/<h\d[^>]*>.+?<\/h\d>/gs) || []);
             headings.forEach(match => {
-                const text: string = match.replace(/\s*<\/?h\d[^>]*>\s*/g, '');
+                const headingInner: string = match.replace(/\s*<\/?h\d[^>]*>\s*/g, '');
+                const text = headingInner.replace(/<.+?>/g, ''); // remove tags from inner
                 const lvl: number = +(match.match(/\d/g)?.[0] || -1);
                 toc += `${`<ol>`.repeat(lvl - 1)} <li> <a href="#${encodeURI(text.replace(/ /g, '_'))}">${text}</a> </li> ${`</ol>`.repeat(lvl - 1)}`;
             });

src/parse.ts

@@ -311,7 +311,10 @@ export function parse(data: string, config: Config = {}): Result {
             .replace(re(r`''  ([^']+?)  ''`), '<i>$1</i>')
 
             // Headings: ==heading==
-            .replace(re(r`^ (=+) \s* (.+?) \s* \1 \s* $`), (_, lvl, txt) => `<h${lvl.length} id="${encodeURI(txt.replace(/ /g, '_'))}">${txt}</h${lvl.length}>`)
+            .replace(re(r`^ (=+) \s* (.+?) \s* \1 \s* $`), (_, lvl, txt) => {
+                const linkForm = encodeURI(txt.replace(/ /g, '_').replace(/<.+?>/g, ''));
+                return `<h${lvl.length} id="${linkForm}">${txt}</h${lvl.length}>`;
+            })
 
             // Bulleted list: *item
             .replace(re(r`^ (\*+) (.+?) $`), (_, lvl, content) => {

test/src/example.wiki

@@ -8,6 +8,7 @@
 === Subheading ===
 == Broken heading ===
 ====== Small heading ======
+== ''fancy'' '''heading'''! ==
 </div>
 
 <div style="border:1px solid">