Fix IdAttribute plugin issue with encoded html entities (option to de…

…code before slugify) Fixes 11ty#3398

package.json

@@ -128,6 +128,7 @@
  "cross-spawn": "^7.0.3",
  "debug": "^4.3.6",
  "dependency-graph": "^1.0.0",
+ "entities": "^5.0.0",
  "fast-glob": "^3.3.2",
  "filesize": "^10.1.4",
  "graceful-fs": "^4.2.11",

src/Plugins/IdAttributePlugin.js

@@ -1,4 +1,5 @@
 import matchHelper from "posthtml-match-helper";
+import { decodeHTML } from "entities";
 
 import slugifyFilter from "../Filters/Slugify.js";
 import MemoizeUtil from "../Util/MemoizeFunction.js";
@@ -28,6 +29,7 @@ function IdAttributePlugin(eleventyConfig, options = {}) {
  if (!options.selector) {
  options.selector = "h1,h2,h3,h4,h5,h6";
  }
+ options.decodeEntities = options.decodeEntities ?? true;
 
  eleventyConfig.htmlTransformer.addPosthtmlPlugin(
  "html",
@@ -39,7 +41,11 @@ function IdAttributePlugin(eleventyConfig, options = {}) {
  tree.match(matchHelper(options.selector), function (node) {
  if (!node.attrs?.id && node.content) {
  node.attrs = node.attrs || {};
- let id = options.slugify(getTextNodeContent(node));
+ let textContent = getTextNodeContent(node);
+ if (options.decodeEntities) {
+ textContent = decodeHTML(textContent);
+ }
+ let id = options.slugify(textContent);
  if (conflictCheck[id]) {
  conflictCheck[id]++;
  id = `${id}-${conflictCheck[id]}`;

test/IdAttributePluginTest.js

@@ -17,3 +17,18 @@ test("Using the IdAttribute plugin #3356", async (t) => {
  let results = await elev.toJSON();
  t.is(results[0].content, `<h1 id="this-is-a-heading">This is a heading</h1><h2 id="already">This is another heading</h2><h2 id="this-is-another-heading">This is another heading</h2><h3 id="this-is-another-heading-2">This is another heading</h3>`);
 });
+
+test("Using the IdAttribute plugin with escaped quoted text", async (t) => {
+ let elev = new Eleventy("./test/stubs-virtual/", "./test/stubs-virtual/_site", {
+ config: function (eleventyConfig) {
+ eleventyConfig.addPlugin(IdAttributePlugin);
+
+ eleventyConfig.addTemplate("test.md", `# This is a \`"heading"\``, {});
+ },
+ });
+
+ elev.disableLogger();
+
+ let results = await elev.toJSON();
+ t.is(results[0].content.trim(), `<h1 id="this-is-a-heading">This is a <code>&quot;heading&quot;</code></h1>`);
+});