fix(nx-dev): allow linking to headers that are code wrapped (nrwl#2…

…6608)

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

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'
+    );
+  });
 });

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, '')