[gatsby-remark-autolink-headers] Ignore HTML in headers when generating ID

[jerelmiller]

Description

When using the gatsby-remark-autolink-headers plugin, markdown images contained in the header are included as part of the ID. On top that, it appears the aria-label includes a semi-stringified HTML representation of the image.

For example, take the following markdown:

## ![[email protected]](./images/img-integration-aws%402x.png "[email protected]") AWS integrations

This results in a header that looks like the following:

<h2 id="span-------classgatsby-resp-image-wrapper-------styleposition-relative-display-block-margin-left-auto-margin-right-auto-max-width-160px-------------span-----classgatsby-resp-image-background-image-----stylepadding-bottom-875-position-relative-bottom-0-left-0-background-image-urldataimagepngbase64ivborw0kggoaaaansuheugaaabqaaaascayaaabb0p4qaaaacxbiwxmaaastaaaleweampwyaaacfkleqvq4y61uw09tqrdurzekfdgihi4pn98zjaeaa0xiygehrmqby1cinvei1bo4aoivsksk21iw0kwmpuclaapoqkgqbal9glbcudyzpydzsqsmmkm38zoflszozsablnotp1qfevis5iszqcxsuxuaxids5hsqgri1qnts6iivbokwvkjfkxh6sdjjpib0whmtsffmbsookxtig7xn8irtr7ozunvthd7h8asahtaudoxl671jhhb1dzu0t6hrpyni3weklgtc9wqsi4sodyzzlh6y5onjbc7fhc9tcbhuwlciuiohvewgn3hajc8xevux80fttaw1qqbfplbuhnfprxhknpyactjdm7v3o7beivdoijgepm5lloywg127nvwom3yiwaovekociqrn3oggfedx3rm1gg5xuujpvjnbybeo95bxqgc2qoja1gfkmbo4llg0hmdfyjht58m2e6iua2aojm4vfhp0rzecclulqah7jldwszxu2jplgpoudobioeeyk3qey03qalrchixhctupx8ircktwof34sizfy5zjw8tnswypwvxizlqlr1tapcog3x5y2ossdbrgfjhbppkxivanmlibt3wvxduldnul3pxbczramokdxzihkvjaxvelopnktnsallhdvuyhbf56vf18cexkcwv2deb4ug7jlqn7oqke6qkevglw1gixvqxhccmgkbnrv4uq00lfxynrzomhpsdgzav00adlogu0s2fyeybgygmmpvw39yooyjsokouin5qwhtkmf54ssqcq5otvd5ivktlucabdojcq0xztyhwr1gvt4axkenw6wxvuaaaaaasuvork5cyii-background-size-cover-display-block---span---img---------classgatsby-resp-image-image---------altimg-integration-aws2xpng---------titleimg-integration-aws2xpng---------srcstatic78ac85c1fc41f94776fce7235e327f0169538img-integration-aws25402xpng---------srcsetstatic78ac85c1fc41f94776fce7235e327f0169538img-integration-aws25402xpng-160w---------sizesmax-width-160px-100vw-160px---------stylewidth100height100margin0vertical-alignmiddlepositionabsolutetop0left0---------loadinglazy------------span-aws-integrations" style="position: relative;"><a href="#span-------classgatsby-resp-image-wrapper-------styleposition-relative-display-block-margin-left-auto-margin-right-auto-max-width-260px-------------span-----classgatsby-resp-image-background-image-----stylepadding-bottom-875-position-relative-bottom-0-left-0-background-image-urldataimagepngbase64ivborw0kggoaaaansuheugaaabqaaaascayaaabb0p4qaaaacxbiwxmaaastaaaleweampwyaaacfkleqvq4y61uw09tqrdurzekfdgihi4pn98zjaeaa0xiygehrmqby1cinvei1bo4aoivsksk21iw0kwmpuclaapoqkgqbal9glbcudyzpydzsqsmmkm38zoflszozsablnotp1qfevis5iszqcxsuxuaxids5hsqgri1qnts6iivbokwvkjfkxh6sdjjpib0whmtsffmbsookxtig7xn8irtr7ozunvthd7h8asahtaudoxl671jhhb1dzu0t6hrpyni3weklgtc9wqsi4sodyzzlh6y5onjbc7fhc9tcbhuwlciuiohvewgn3hajc8xevux80fttaw1qqbfplbuhnfprxhknpyactjdm7v3o7beivdoijgepm5lloywg127nvwom3yiwaovekociqrn3oggfedx3rm1gg5xuujpvjnbybeo95bxqgc2qoja1gfkmbo4llg0hmdfyjht58m2e6iua2aojm4vfhp0rzecclulqah7jldwszxu2jplgpoudobioeeyk3qey03qalrchixhctupx8ircktwof34sizfy5zjw8tnswypwvxizlqlr1tapcog3x5y2ossdbrgfjhbppkxivanmlibt3wvxduldnul3pxbczramokdxzihkvjaxvelopnktnsallhdvuyhbf56vf18cexkcwv2deb4ug7jlqn7oqke6qkevglw1gixvqxhccmgkbnrv4uq00lfxynrzomhpsdgzav00adlogu0s2fyeybgygmmpvw39yooyjsokouin5qwhtkmf54ssqcq5otvd5ivktlucabdojcq0xztyhwr1gvt4axkenw6wxvuaaaaaasuvork5cyii-background-size-cover-display-block---span---img---------classgatsby-resp-image-image---------altimg-integration-aws2xpng---------titleimg-integration-aws2xpng---------srcstatic78ac85c1fc41f94776fce7235e327f0169538img-integration-aws25402xpng---------srcsetstatic78ac85c1fc41f94776fce7235e327f0169538img-integration-aws25402xpng-160w---------sizesmax-width-160px-100vw-160px---------stylewidth100height100margin0vertical-alignmiddlepositionabsolutetop0left0---------loadinglazy------------span-aws-integrations" aria-label="span       classgatsby resp image wrapper       styleposition relative display block margin left auto margin right auto max width 160px             span     classgatsby resp image background image     stylepadding bottom 875 position relative bottom 0 left 0 background image urldataimagepngbase64ivborw0kggoaaaansuheugaaabqaaaascayaaabb0p4qaaaacxbiwxmaaastaaaleweampwyaaacfkleqvq4y61uw09tqrdurzekfdgihi4pn98zjaeaa0xiygehrmqby1cinvei1bo4aoivsksk21iw0kwmpuclaapoqkgqbal9glbcudyzpydzsqsmmkm38zoflszozsablnotp1qfevis5iszqcxsuxuaxids5hsqgri1qnts6iivbokwvkjfkxh6sdjjpib0whmtsffmbsookxtig7xn8irtr7ozunvthd7h8asahtaudoxl671jhhb1dzu0t6hrpyni3weklgtc9wqsi4sodyzzlh6y5onjbc7fhc9tcbhuwlciuiohvewgn3hajc8xevux80fttaw1qqbfplbuhnfprxhknpyactjdm7v3o7beivdoijgepm5lloywg127nvwom3yiwaovekociqrn3oggfedx3rm1gg5xuujpvjnbybeo95bxqgc2qoja1gfkmbo4llg0hmdfyjht58m2e6iua2aojm4vfhp0rzecclulqah7jldwszxu2jplgpoudobioeeyk3qey03qalrchixhctupx8ircktwof34sizfy5zjw8tnswypwvxizlqlr1tapcog3x5y2ossdbrgfjhbppkxivanmlibt3wvxduldnul3pxbczramokdxzihkvjaxvelopnktnsallhdvuyhbf56vf18cexkcwv2deb4ug7jlqn7oqke6qkevglw1gixvqxhccmgkbnrv4uq00lfxynrzomhpsdgzav00adlogu0s2fyeybgygmmpvw39yooyjsokouin5qwhtkmf54ssqcq5otvd5ivktlucabdojcq0xztyhwr1gvt4axkenw6wxvuaaaaaasuvork5cyii background size cover display block   span   img         classgatsby resp image image         altimg integration aws2xpng         titleimg integration aws2xpng         srcstatic78ac85c1fc41f94776fce7235e327f0169538img integration aws25402xpng         srcsetstatic78ac85c1fc41f94776fce7235e327f0169538img integration aws25402xpng 160w         sizesmax width 160px 100vw 160px         stylewidth100height100margin0vertical alignmiddlepositionabsolutetop0left0         loadinglazy            span aws integrations permalink" class="anchor before">

I suspect it has to do in part with the use of mdast-util-to-string. According to that utility:

The algorithm checks value of node, then alt, and finally title

Would it be possible to filter out images from this check to avoid counting them as part of the ID string? I would expect only the non-image text to be counted as part of the id

Reproduction steps

You can see this in action on the New Relic Doc's site. We will be launching this site on March 3rd, so depending on which side of the launch date you're are on, you'll want one of the following 2 links:

Before March 3rd

https://docs-preview.newrelic.com/docs/full-stack-observability/instrument-everything/instrument-core-services-applications/cloud-services-integrations

On/after March 3rd

https://docs.newrelic.com/docs/full-stack-observability/instrument-everything/instrument-core-services-applications/cloud-services-integrations

Inspect the headings with images to see the result. You can see the raw code in the repo here

Environment

System:
OS: macOS 11.2
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.20.0 - /var/folders/bv/xv70fx350vd2htmc8vjb8h6w0000gn/T/yarn--1613010452125-0.12682654755096645/node
Yarn: 1.22.5 - /var/folders/bv/xv70fx350vd2htmc8vjb8h6w0000gn/T/yarn--1613010452125-0.12682654755096645/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v12.20.0/bin/npm
Languages:
Python: 3.7.7 - /Users/jmiller/.pyenv/shims/python
Browsers:
Chrome: 88.0.4324.150
Safari: 14.0.3
npmPackages:
gatsby: ^2.32.0 => 2.32.0
gatsby-image: ^2.7.0 => 2.7.0
gatsby-plugin-json-output: ^1.2.0 => 1.2.0
gatsby-plugin-manifest: ^2.8.0 => 2.8.0
gatsby-plugin-mdx: ^1.9.0 => 1.9.0
gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1
gatsby-plugin-offline: ^3.6.0 => 3.6.0
gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
gatsby-plugin-sharp: ^2.14.0 => 2.14.0
gatsby-remark-autolink-headers: ^2.7.0 => 2.7.0
gatsby-remark-copy-linked-files: ^2.6.0 => 2.6.0
gatsby-remark-images: ^3.11.0 => 3.11.0
gatsby-source-filesystem: ^2.7.0 => 2.7.0
gatsby-transformer-json: ^2.9.0 => 2.9.0
gatsby-transformer-remark: ^2.12.0 => 2.12.0
gatsby-transformer-sharp: ^2.12.0 => 2.12.0
gatsby-transformer-yaml: ^2.7.0 => 2.7.0

[ascorbic]

Hi. This is a good idea. I'm going to convert this to a discussion, as it's a feature request, but it does look like something we should look into. If anybody would like to open a PR, it would be welcome.