From 7699b33ea1f252523f6e1a6c3faa79aeb630c26a Mon Sep 17 00:00:00 2001
From: Caleb Ukle <caleb@nrwl.io>
Date: Thu, 20 Jun 2024 11:00:26 -0700
Subject: [PATCH] fix(nx-dev): allow linking to headers that are `code` wrapped
 (#26608)

before if a header that was using `code` in the title (i.e. launch
template) the header should so the link icon but would not link anywhere
because the rendered id tag would be an empty string

![empty id tag for
headers](https://github.com/nrwl/nx/assets/23272162/6ee2aa5f-7b1f-4a98-ad11-2e088dd5c36d)

after the id tag is correctly linked by checking the rendering children
contains a `code` tag and pulls the code children out.

added benefit includes the code headers being linked in the side nav
correct too

![side by side diff with
changes](https://github.com/nrwl/nx/assets/23272162/c4f7a166-44fa-4541-ae72-d095962bee5b)



Example showing working from preview:
https://nx-dev-git-docs-allow-linking-code-headers-nrwl.vercel.app/ci/reference/launch-templates#launchtemplatestemplatenameinitsteps
---
 .../src/lib/nodes/heading.schema.spec.ts      | 15 +++++++++++
 .../src/lib/nodes/heading.schema.ts           | 27 +++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.spec.ts b/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.spec.ts
index e4f2172f7504c..946335d845b5f 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.spec.ts
+++ b/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.spec.ts
@@ -7,4 +7,19 @@ describe('heading schema: generateID', () => {
       'pro-simple-setup'
     );
   });
+
+  it('should create id for code based headers', () => {
+    const codeHeader = [
+      {
+        $$mdtype: 'Tag',
+        name: 'code',
+        attributes: {},
+        children: ['launch-templates.<template-name>.init-steps[*].env'],
+      },
+    ];
+
+    expect(generateID(codeHeader, {})).toEqual(
+      'launchtemplatestemplatenameinitstepsenv'
+    );
+  });
 });
diff --git a/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.ts b/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.ts
index 0fda4e70748a4..769de9bfb7fa5 100644
--- a/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.ts
+++ b/nx-dev/ui-markdoc/src/lib/nodes/heading.schema.ts
@@ -7,8 +7,31 @@ export function generateID(
   if (attributes['id'] && typeof attributes['id'] === 'string') {
     return attributes['id'];
   }
-  return children
-    .filter((child) => typeof child === 'string')
+
+  const validChildrenNodes: RenderableTreeNode[] = [];
+
+  for (const child of children) {
+    if (!child) {
+      continue;
+    }
+
+    if (typeof child === 'string') {
+      validChildrenNodes.push(child);
+    } else if (
+      // allow rendering titles that are wrapped in `code` tags
+      typeof child === 'object' &&
+      'children' in child &&
+      child.name === 'code' &&
+      Array.isArray(child.children)
+    ) {
+      const validNestedChild = child.children.filter(
+        (c) => typeof c === 'string'
+      );
+      validChildrenNodes.push(...validNestedChild);
+    }
+  }
+
+  return validChildrenNodes
     .join(' ')
     .normalize('NFD')
     .replace(/[\u0300-\u036f]/g, '')