docs(docs-infra): Fix heading parsing (#57386)

fixes #57384

PR Close #57386

adev/shared-docs/pipeline/guides/extensions/docs-workflow/docs-step.ts

@@ -7,7 +7,7 @@
  */
 
 import {Token, Tokens, RendererThis, TokenizerThis} from 'marked';
-import {headingRender} from '../../tranformations/heading';
+import {formatHeading, headingRender} from '../../tranformations/heading';
 
 interface DocsStepToken extends Tokens.Generic {
   type: 'docs-step';
@@ -51,7 +51,7 @@ export const docsStepExtension = {
     return `
     <li>
       <span class="docs-step-number" aria-hidden="true"></span>
-      ${headingRender({text: token.title, depth: 3, type: 'heading', raw: token.title, tokens: []})}
+      ${formatHeading({text: token.title, depth: 3})}
       ${this.parser.parse(token.tokens)}
     </li>
     `;

adev/shared-docs/pipeline/guides/testing/heading/heading.md

@@ -9,4 +9,5 @@
 ## Duplicate Anchor
 ## `myClass.myMethod` is the best
 ## ステップ 2 - アプリケーションのレイアウトに新しいコンポーネントを追加
-## My heading {# my-custom-id }
+## My heading {# my-custom-id }
+## Query for the `<h1>`

adev/shared-docs/pipeline/guides/testing/heading/heading.spec.ts

@@ -83,4 +83,15 @@ describe('markdown to html', () => {
     expect(h2HeaderId).toBe('my-custom-id');
     expect(h2AnchorHref).toBe(`#${h2HeaderId}`);
   });
+
+  it('should be able to parse heading with a valid tag in a code block', () => {
+    const h2List = markdownDocument.querySelectorAll('h2');
+    const h2 = h2List[6];
+
+    // The anchor element should be to only child
+    expect(h2.children.length).toBe(1);
+    expect(h2.firstElementChild?.tagName).toBe('A');
+
+    expect(h2.firstElementChild!.innerHTML).toBe('Query for the <code>&lt;h1&gt;</code>');
+  });
 });

adev/shared-docs/pipeline/guides/tranformations/heading.ts

@@ -11,8 +11,12 @@ import {Renderer, Tokens} from 'marked';
 import {getHeaderId} from '../state';
 import {getPageTitle} from '../utils';
 
-export function headingRender({text, depth}: Tokens.Heading): string;
-export function headingRender(this: Renderer, {text, depth}: Tokens.Heading): string {
+export function headingRender(this: Renderer, {depth, tokens}: Tokens.Heading): string {
+  const text = this?.parser.parseInline(tokens);
+  return formatHeading({text, depth});
+}
+
+export function formatHeading({text, depth}: {text: string; depth: number}): string {
   if (depth === 1) {
     return `
     <header class="docs-header">